/* 견본 사이트 공용 뼈대 — 색과 글꼴은 각 페이지 :root 토큰이 정함 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html[data-l=es] [lang=en],html[data-l=es] [lang=pt],html[data-l=en] [lang=es],html[data-l=en] [lang=pt],html[data-l=pt] [lang=es],html[data-l=pt] [lang=en]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-style:normal;line-height:1.08;margin:0;overflow-wrap:anywhere;min-width:0}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
.langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:13px;font-weight:600}
.langs button{all:unset;cursor:pointer;padding:6px 12px;color:var(--ink-2)}
.langs button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.langs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:var(--radius);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn.main{background:var(--accent);color:var(--on-accent)}
.btn.ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.now{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.now::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.now.on{color:var(--ok)} .now.off{color:var(--ink-2)}
table.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.hours td{padding:9px 0;border-bottom:1px solid var(--line)}
table.hours td:last-child{text-align:right}
table.hours tr.today td{font-weight:700;color:var(--accent-ink)}
.map{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius);filter:saturate(.85)}
dialog{border:0;border-radius:var(--radius);padding:24px;width:min(420px,calc(100% - 32px));background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgb(0 0 0 / .45)}
dialog h3{font-size:26px;margin-bottom:14px}
dialog label{display:block;font-size:14px;font-weight:600;margin:12px 0 4px}
dialog input,dialog select{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--radius) / 2);background:var(--paper);color:var(--ink)}
dialog .row{display:flex;gap:10px;margin-top:18px}
dialog .row .btn{flex:1}
.demo-note{font-size:13px;color:var(--ink-2);margin-top:12px}
#callnote{position:fixed;left:16px;right:16px;bottom:88px;margin-inline:auto;max-width:420px;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:12px;font-size:14px;z-index:9}
.dock{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);z-index:8}
.dock .btn{flex:1;padding:12px 10px;font-size:15px}
@media (max-width:700px){.dock{display:flex} body{padding-bottom:76px}}
footer.sample{font-size:13px;color:var(--ink-2);padding:28px 0 36px;border-top:1px solid var(--line);margin-top:56px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}