/* Piezas comunes de los restaurantes de ejemplo. Cada tema define sus variables y su carácter. */
@font-face{font-family:Inter;src:url(../fonts/inter-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* franja de ejemplo */
.ribbon{position:relative;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding:8px 14px;background:#f5efe5;color:#2a1f17;font:500 .74rem/1.4 Inter,system-ui,sans-serif;text-align:center}
.ribbon b{font-weight:600;color:#a8472a}
.ribbon-links{display:inline-flex;gap:14px;align-items:center}
.ribbon-links a{text-decoration:underline;text-underline-offset:3px}
.ribbon .ribbon-cta{text-decoration:none;background:#1e1712;color:#f5efe5;padding:4px 12px;border-radius:99px;font-weight:600}
.notice{padding:11px 18px;text-align:center;font-weight:500;font-size:.9rem;background:var(--accent);color:var(--btn-ink)}
.notice.closed{background:#7d2a12;color:#fff}

/* aparición al bajar */
.has-reveal [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.2,.7,.1,1),transform 1.1s cubic-bezier(.2,.7,.1,1)}
.has-reveal [data-reveal].in{opacity:1;transform:none}
.v-rise{animation:rise 1.3s cubic-bezier(.2,.7,.1,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* botones genéricos */
.btn-theme{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;background:var(--btn-bg);color:var(--btn-ink);border:1px solid var(--btn-bg);border-radius:var(--btn-radius);font:600 .78rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:filter .3s,transform .3s}
.btn-theme:hover{filter:brightness(1.08)}
.btn-theme.ghost{background:transparent;color:var(--ink);border-color:var(--line)}

/* cabecera de página con foto */
.ph{position:relative;min-height:56svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;margin-top:calc(var(--head,72px) * -1)}
.ph-media{position:absolute;inset:0;z-index:-1}
.ph-img{width:100%;height:100%;object-fit:cover;animation:ph-zoom 18s cubic-bezier(.2,.7,.1,1) both}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.1) 75%),linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 35%,rgba(0,0,0,.8))}
.ph-kicker,.ph h1,.ph-text{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.ph-inner{width:100%;max-width:1280px;margin:0 auto;padding:calc(var(--head,72px) + 60px) var(--pad,22px) clamp(40px,7vw,80px);color:#fff}
.ph-kicker{font:600 .68rem/1.4 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.ph h1{font-size:clamp(3rem,12vw,7rem);line-height:.98;margin:14px 0 16px;color:#fff}
.ph-text{max-width:34em;color:rgba(255,255,255,.84);font-size:1rem}
@keyframes ph-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}

/* carta */
.carta{max-width:1180px;margin:0 auto;padding:0 0 30px}
.cat-tabs{position:sticky;top:var(--head,72px);z-index:30;display:flex;gap:6px;overflow-x:auto;padding:12px var(--pad,22px);background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs a{flex:none;padding:9px 16px;border-radius:99px;font-size:.86rem;color:var(--muted);border:1px solid transparent;transition:all .3s}
.cat-tabs a.on,.cat-tabs a:hover{color:var(--ink);border-color:var(--line)}
.cat-tabs a.on{background:var(--card)}
.carta-main{padding:0 var(--pad,22px)}
.allergen-filter{margin:26px 0 6px;border:1px solid var(--line);border-radius:var(--radius)}
.allergen-filter summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;font-size:.9rem;font-weight:500}
.allergen-filter summary::-webkit-details-marker{display:none}
.allergen-filter summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--accent);transition:transform .3s}
.allergen-filter[open] summary::after{transform:rotate(45deg)}
.allergen-filter summary b{margin-left:auto;display:grid;place-items:center;min-width:24px;height:24px;border-radius:99px;background:var(--accent);color:var(--btn-ink);font-size:.74rem}
.allergen-filter form{padding:0 18px 18px}
.allergen-filter form>p{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--line);font-size:.82rem;cursor:pointer;color:var(--muted);transition:all .25s}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.allergen-filter .clear{display:inline-block;margin-top:14px;font-size:.85rem;text-decoration:underline}
.menu-cat{padding-top:56px;scroll-margin-top:calc(var(--head,72px) + 70px)}
.menu-cat>header{margin-bottom:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.menu-cat>header h2{font-size:clamp(2.2rem,6vw,3.2rem)}
.menu-cat>header p{color:var(--muted);font-size:.88rem;margin-top:6px}
.dish{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.dish-thumb{flex:none;width:76px;height:76px;object-fit:cover;border-radius:12px}
.dish-body{flex:1;min-width:0}
.dish-top{display:flex;align-items:baseline;gap:10px}
.dish-top h3{font-size:1.2rem;line-height:1.2}
.dish-dots{flex:1;min-width:14px;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.dish-price{flex:none;white-space:nowrap;font-weight:600;color:var(--accent)}
.dish-body>p{color:var(--muted);font-size:.9rem;margin-top:4px;line-height:1.55}
.dish-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.tag{font:600 .6rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:var(--accent);color:var(--btn-ink)}
.tag.veg{background:#3f7a4a;color:#fff}
.allergens{list-style:none;padding:0;display:contents}
.allergens li{font-size:.7rem;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.dish.sold{opacity:.5}
.dish.sold .dish-price{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:50px 0}
.menu-foot{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:46px var(--pad,22px) 90px}
.menu-foot .btn-theme{flex:1 1 200px;max-width:300px}

/* pizarra del menú del día */
.board-wrap{padding:clamp(40px,7vw,90px) var(--pad,22px) 0;max-width:1180px;margin:0 auto}
.board{border-radius:var(--radius);padding:clamp(26px,5vw,56px)}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.board-head p{font:600 .7rem var(--body);letter-spacing:.28em;text-transform:uppercase}
.board-head b{font-size:clamp(1.8rem,6vw,3rem);line-height:1;white-space:nowrap}
.board-cols{display:grid;gap:28px}
.board h2{font-size:1.5rem;margin-bottom:10px}
.board ul{list-style:none;padding:0}
.board li{padding:10px 0;border-bottom:1px dashed currentColor;border-color:rgba(255,255,255,.18)}
.board-foot{margin-top:26px;font-size:.84rem;opacity:.75}

/* degustación */
.tasting-page{max-width:880px;margin:0 auto;padding:clamp(40px,7vw,90px) var(--pad,22px) 0}
.steps{list-style:none;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:56px 1fr;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:clamp(1.35rem,3.6vw,1.9rem);line-height:1.25}
.steps span{font:600 .66rem var(--body);letter-spacing:.2em;color:var(--accent)}
.tasting-price{text-align:center;margin-top:46px;color:var(--muted)}
.big-price{font-family:var(--display);font-size:clamp(2.8rem,8vw,4.2rem);color:var(--accent);line-height:1;margin-bottom:12px}
.big-price small{font:400 .9rem var(--body);color:var(--muted)}

/* cantina */
.wine-list{max-width:1180px;margin:0 auto;display:grid;gap:14px;padding:clamp(40px,7vw,90px) var(--pad,22px) 0}
.wine-card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);display:grid;gap:10px;transition:border-color .4s}
.wine-card:hover{border-color:var(--accent)}
.wine-card .region{font:600 .62rem var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.wine-card b{font-weight:400;font-size:1.4rem;line-height:1.2}
.wine-prices{display:flex;gap:20px;font-size:.84rem;color:var(--muted);margin-top:6px}
.wine-prices i{font-style:normal;color:var(--ink)}

/* reservas */
.booking-form{width:min(760px,calc(100% - 24px));margin:clamp(24px,6vw,70px) auto 90px;padding:clamp(22px,5vw,48px);border-radius:var(--radius);display:grid;gap:30px;background:var(--card)}
.booking-form fieldset{border:0;padding:0;min-width:0}
.booking-form legend{font-family:var(--display);font-size:1.5rem;margin-bottom:14px;padding:0}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick.days{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none;scroll-snap-type:x proximity}
.pick.days::-webkit-scrollbar{display:none}
.pick label{position:relative}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:grid;place-items:center;min-width:58px;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:calc(var(--radius) * .6);cursor:pointer;transition:all .25s;font-variant-numeric:tabular-nums}
.pick.days label{flex:none;scroll-snap-align:start}
.pick.days span{min-width:64px;padding:10px 8px}
.pick.days small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pick.days b{font-family:var(--display);font-size:1.6rem;font-weight:400;line-height:1.1}
.pick input:checked+span{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink)}
.pick input:checked+span small{color:inherit;opacity:.8}
.pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fields2{display:grid;gap:14px}
.fields2 label{display:grid;gap:7px;font-size:.84rem;color:var(--muted)}
.fields2 i{font-style:normal;opacity:.75}
.fields2 input,.fields2 textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) * .6);padding:14px 15px;width:100%;transition:border-color .3s}
.fields2 input:focus,.fields2 textarea:focus{outline:none;border-color:var(--accent)}
.booking-form .check{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--muted);line-height:1.5}
.booking-form .check input{margin-top:2px;width:20px;height:20px;flex:none;accent-color:var(--accent)}
.booking-form .check a{text-decoration:underline}
.booking-form>.btn-theme{width:100%}
.err{color:#e0674a;font-size:.84rem;font-weight:500}
.form-error{background:#f7e1d6;color:#7d2a12;padding:12px 16px;border-radius:10px}
.demo-note{font-size:.84rem;color:var(--muted);text-align:center}
.demo-note a{text-decoration:underline}
.page-ok{max-width:720px;margin:0 auto;text-align:center;padding:clamp(70px,12vw,140px) var(--pad,22px) 110px}
.page-ok h1{font-size:clamp(2.6rem,9vw,4.4rem);margin:12px 0 18px}
.page-ok>p{color:var(--muted)}
.page-ok .ph-kicker{text-shadow:none;color:var(--accent)!important}
.page-ok b{color:var(--ink)}
.ok-mark{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#3f9a5a;color:#fff;font-size:1.7rem;margin-bottom:22px}
.ok-demo{margin-top:38px;padding:26px;border:1px dashed var(--accent);border-radius:var(--radius)}
.ok-demo p{margin-bottom:18px}

/* QR para imprimir */
.qr-print{display:grid;place-items:center;min-height:100vh;padding:30px}
.qr-card{width:min(100%,420px);text-align:center;padding:40px 34px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.qr-name{font-family:var(--display);font-size:2.4rem}
.qr-kicker{color:var(--muted);margin:6px 0 20px}
.qr-code svg{width:100%;height:auto;max-width:280px;margin:0 auto;background:#fff;padding:10px;border-radius:12px}
.qr-url{font-size:.78rem;color:var(--muted);margin-top:14px;word-break:break-all}
@media print{.qr-print{background:#fff}.qr-card{border:0}}

@media (min-width:700px){
  .fields2{grid-template-columns:1fr 1fr}
  .fields2 .wide{grid-column:1/-1}
  .board-cols{grid-template-columns:repeat(3,1fr)}
  .wine-list{grid-template-columns:1fr 1fr}
  .dish-thumb{width:92px;height:92px}
  .dish{gap:22px}
}
@media (min-width:981px){
  .carta{display:grid;grid-template-columns:220px 1fr;gap:60px;padding:0 var(--pad,22px)}
  .cat-tabs{position:sticky;top:calc(var(--head,72px) + 30px);align-self:start;flex-direction:column;gap:2px;padding:56px 0 0;border:0;background:none;overflow:visible}
  .cat-tabs a{padding:10px 0;border:0;border-radius:0;font-size:.95rem}
  .cat-tabs a.on,.cat-tabs a:hover{background:none;border:0}
  .cat-tabs a.on{color:var(--accent)}
  .carta-main{padding:0}
  .wine-list{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.has-reveal [data-reveal]{opacity:1;transform:none}}