/* ============================================================
   OSTERIA DA GIANNI - flagship demo · We Creative
   Identidad REAL: cotto #6F1A07 (extraído de su CSS) + crema + espresso.
   Tipos: Josefin Slab (display, tipografía del cliente, 28-jul) + Hanken Grotesk
   (provisional: pendiente sustituir por Glacial Indifference cuando llegue el archivo).
   Tema único cálido claro. Cero em-dashes. Una sola tinta de acento (cotto).
   ============================================================ */

:root{
  --cotto:#5C0015; --cotto-2:#7E0A22; --terra:#D89060; --espresso:#1E1813;
  --panna:#F4ECDD; --carta:#E7DAC6; --basilico:#5E6B3B; --oro:#B98A2E;
  --ink-90:#1E1813; --ink-70:#4A423A; --ink-50:#6E6256; --hairline:#D8C7AE;

  --font-display:"Josefin Slab",Georgia,"Times New Roman",serif;
  --font-sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --maxw:1240px;
  --pad:clamp(20px,5vw,72px);
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --sh-2:0 8px 30px rgba(30,24,19,.12);
  --sh-3:0 24px 60px rgba(30,24,19,.20);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans); color:var(--ink-90); background:var(--panna);
  font-size:1.02rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.h1{font-size:clamp(2.7rem,6.2vw,5.4rem);line-height:1.0}
.h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.06}
.h3{font-family:var(--font-sans);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:0}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-70);line-height:1.6;max-width:60ch}
.eyebrow{font-family:var(--font-sans);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--cotto)}
.muted{color:var(--ink-50)}
em,.it{font-style:italic}

/* ---------- buttons (one radius: pill; AA contrast checked) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;
  padding:0 1.7rem;border-radius:var(--r-pill);font-family:var(--font-sans);font-weight:600;
  font-size:.95rem;letter-spacing:.01em;cursor:pointer;border:1.5px solid transparent;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);white-space:nowrap}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--panna),0 0 0 5px var(--oro)}
.btn-primary{background:var(--cotto);color:var(--panna);box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--cotto-2);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--espresso);color:var(--espresso)}
.btn-outline:hover{background:var(--espresso);color:var(--panna)}
.btn-on-dark{background:var(--panna);color:var(--cotto)}
.btn-on-dark:hover{background:var(--terra);color:var(--espresso);transform:translateY(-2px)}
.btn-ghost-light{background:transparent;border-color:rgba(244,236,221,.5);color:var(--panna)}
.btn-ghost-light:hover{background:var(--panna);color:var(--espresso)}
.btn:active{transform:translateY(0) scale(.98)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.nav.solid{background:rgba(244,236,221,.96);backdrop-filter:blur(10px);box-shadow:0 4px 24px rgba(30,24,19,.08)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:var(--font-display);font-size:1.35rem;color:var(--panna);transition:color .5s}
.nav.solid .brand{color:var(--cotto)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-weight:500;font-size:.86rem;text-transform:uppercase;letter-spacing:.12em;color:var(--panna);transition:color .3s}
.nav.solid .nav-links a{color:var(--ink-90)}
.nav-links a:hover{color:var(--terra)}
.nav.solid .nav-links a:hover{color:var(--cotto)}
.nav-cta{display:inline-flex}
.nav .btn{min-height:44px;padding:0 1.2rem;font-size:.84rem}
.nav:not(.solid) .nav-cta .btn{background:var(--panna);color:var(--cotto)}
.burger{display:none}

/* mobile bottom bar */
.mobilebar{position:fixed;inset:auto 0 0;z-index:50;display:none;grid-template-columns:1fr 1fr;gap:.5rem;
  padding:.5rem;background:var(--panna);border-top:1px solid var(--hairline)}
.mobilebar a{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:var(--r-pill);font-weight:600;font-size:.9rem}
.mobilebar .call{border:1.5px solid var(--espresso);color:var(--espresso)}
.mobilebar .res{background:var(--cotto);color:var(--panna)}

/* ---------- hero cinemático ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;color:var(--panna);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:112%;object-fit:cover;will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,12,.94),rgba(20,16,12,.22) 56%,rgba(20,16,12,.5))}
.hero-inner{position:relative;z-index:1;width:100%;padding-bottom:clamp(2.5rem,8vh,6rem);padding-top:96px}
.hero-kicker{display:flex;gap:.6rem;align-items:center;font-family:var(--font-sans);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.24em;color:var(--terra);margin-bottom:1.2rem}
.hero-kicker .d{color:rgba(216,144,96,.5)}
.hero-title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.8rem,8.4vw,6rem);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .line>span{display:block;will-change:transform}
.hero-title .it{font-style:italic;color:var(--terra)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:2.2rem}
.hero-sub{color:rgba(244,236,221,.9);max-width:40ch;font-size:1.05rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- trust strip ---------- */
.trust{background:var(--espresso);color:var(--panna)}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1rem,4vw,3.5rem);padding:1.3rem 0;text-align:center}
.trust b{font-family:var(--font-display);font-size:1.5rem;font-weight:500}
.trust .t-item{display:flex;align-items:baseline;gap:.5rem;font-size:.92rem;color:rgba(244,236,221,.85)}
.trust .star{color:var(--oro)}

/* ---------- section base ---------- */
section{position:relative}
.sec{padding:clamp(3.2rem,6vw,5.5rem) 0}
.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head .h2{margin-top:.6rem}

/* ---------- signature (asymmetric editorial grid, NOT 3 equal cards) ---------- */
.sig-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1rem,2.5vw,2rem)}
.dish{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--carta)}
.dish img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.dish:hover img{transform:scale(1.05)}
.dish-feature{grid-row:span 2}
.dish-feature .dish-ph{aspect-ratio:4/5}
.dish-ph{aspect-ratio:4/3;overflow:hidden}
.dish-body{position:absolute;inset:auto 0 0;padding:1.4rem 1.5rem;color:var(--panna);
  background:linear-gradient(to top,rgba(20,16,12,.9),transparent)}
.dish-body h3{font-family:var(--font-display);font-size:1.5rem;font-weight:500;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.dish-body .price{font-size:.95rem;color:var(--terra);white-space:nowrap}
.dish-body p{font-size:.9rem;color:rgba(244,236,221,.82);margin-top:.3rem;max-width:42ch}
.tag{position:absolute;top:1rem;left:1rem;background:var(--cotto);color:var(--panna);
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.3rem .7rem;border-radius:var(--r-pill)}

/* ---------- story split (image + text) ---------- */
.story{background:var(--carta)}
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.story-portrait{background:var(--panna);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.5rem);text-align:center;box-shadow:var(--sh-2)}
.story-portrait img{margin:0 auto;width:min(280px,70%)}
.story-portrait .sign{font-family:var(--font-display);font-style:italic;font-size:1.6rem;color:var(--cotto);margin-top:.6rem}
.story-text p{margin-top:1rem;max-width:54ch}

/* ---------- pasta manifesto (full-width band) ---------- */
.pasta{background:var(--cotto);color:var(--panna);text-align:center}
.pasta .h2{color:var(--panna)}
.pasta-words{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,5vw,4rem);margin-top:2.5rem}
.pasta-word{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);font-style:italic}
.pasta-word span{display:block;font-family:var(--font-sans);font-style:normal;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--terra);margin-top:.4rem}
.pasta .lead{color:rgba(244,236,221,.85);margin:1.4rem auto 0;text-align:center}

/* ---------- gallery (grid, distinct family) ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1rem)}
.gal-grid figure{position:relative;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:1}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal-grid figure:hover img{transform:scale(1.06)}
.gal-grid figcaption{position:absolute;left:.8rem;bottom:.7rem;color:var(--panna);font-size:.82rem;font-weight:600;
  text-shadow:0 1px 8px rgba(20,16,12,.8)}

/* ---------- testimonials (deliberate dark color-block) ---------- */
.testi{background:var(--espresso);color:var(--panna);text-align:center}
.testi-quote{min-height:7em}
.testi blockquote{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.22;max-width:20ch;margin:0 auto;font-weight:500}
.testi .who{margin-top:1.4rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(244,236,221,.7)}
.testi-dots{display:flex;gap:.55rem;justify-content:center;margin-top:2rem}
.testi-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(244,236,221,.3);cursor:pointer;transition:background .3s,transform .3s}
.testi-dots button[aria-selected="true"]{background:var(--terra);transform:scale(1.25)}
.testi .rating{color:var(--oro);font-size:.85rem;letter-spacing:.1em;margin-bottom:1.2rem}

/* ---------- reserva (cotto accent panel) ---------- */
.reserva .panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;
  background:var(--cotto);color:var(--panna);border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.5rem)}
.reserva .panel h2{color:var(--panna)}
.reserva .panel p{color:rgba(244,236,221,.85);max-width:44ch;margin-top:.6rem}

/* ---------- location ---------- */
.loc{background:var(--carta);color:var(--ink-90)}
.loc .h2{color:var(--espresso)}
.loc dd{color:var(--ink-70)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.loc dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;margin-top:1.4rem}
.loc dt{font-weight:600;color:var(--cotto);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;align-self:center}
.loc dd a:hover{color:var(--cotto)}
.loc-map{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3}
.loc-map img{width:100%;height:100%;object-fit:cover}

/* ---------- footer ---------- */
.footer{background:var(--espresso);color:var(--panna);padding:clamp(3rem,6vw,5rem) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.footer h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--terra);margin-bottom:.9rem;font-family:var(--font-sans);font-weight:600}
.footer a:hover{color:var(--terra)}
.footer .fbrand{font-family:var(--font-display);font-size:1.7rem;color:var(--terra)}
.footer address{font-style:normal;color:rgba(244,236,221,.8);line-height:1.9}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;border-top:1px solid rgba(244,236,221,.15);
  margin-top:2.5rem;padding-top:1.4rem;font-size:.78rem;color:rgba(244,236,221,.55)}
.foot-bottom nav{display:flex;gap:1.4rem}

/* ---------- reveal animation ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- reservas page ---------- */
.res-hero{padding:140px 0 2.5rem;background:var(--carta);text-align:center}
.res-hero .lead{margin:1rem auto 0}
.cm-wrap{background:var(--panna);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);min-height:680px}
.cm-wrap iframe{width:100%;min-height:680px;border:0;display:block}
.res-fallback{text-align:center;margin-top:2rem}

/* ---------- carta page ---------- */
.menu-hero{padding:140px 0 2rem;text-align:center}
.menu-sec{padding:1.5rem 0}
.menu-sec h2{border-bottom:1px solid var(--hairline);padding-bottom:.6rem;margin-bottom:1.2rem}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.4rem;padding:.8rem 0;border-bottom:1px dotted var(--hairline);align-items:baseline}
.menu-item:last-child{border-bottom:0}
.menu-item h3{font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.menu-item .mprice{font-family:var(--font-sans);font-weight:600;color:var(--cotto);white-space:nowrap}
.menu-item p{grid-column:1/-1;color:var(--ink-50);font-size:.9rem;max-width:60ch}
.veg{font-size:.66rem;color:var(--basilico);border:1px solid var(--basilico);border-radius:var(--r-pill);padding:.05rem .45rem;margin-left:.5rem;vertical-align:middle;letter-spacing:.04em}

/* ---------- nav underline ---------- */
.nav-links a{position:relative;padding-bottom:2px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--cotto);transition:right .35s var(--ease)}
.nav-links a:hover::after{right:0}
.nav:not(.solid) .nav-links a::after{background:var(--terra)}

/* ---------- hero parallax hook ---------- */
.hero-bg img{will-change:transform}

/* ---------- marquee (one per page, decorative) ---------- */
.marquee{overflow:hidden;background:var(--carta);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:1.05rem 0}
.marquee-track{display:inline-flex;align-items:center;gap:1.5rem;white-space:nowrap;will-change:transform;animation:marq 30s linear infinite;
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,2.8vw,2.2rem);color:var(--cotto)}
.marquee .dot{color:var(--terra);font-style:normal;font-size:.7em}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- pasta builder ---------- */
.builder{background:var(--panna)}
.builder .sec-head{max-width:48ch}
.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:.5rem}
.builder-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:1}
.builder-visual img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease),transform 7s var(--ease)}
.builder-visual:hover img{transform:scale(1.05)}
.builder-visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem;color:var(--panna);
  font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);background:linear-gradient(to top,rgba(20,16,12,.92),transparent)}
.b-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-50);margin:1.5rem 0 .7rem}
.builder-controls .b-label:first-child{margin-top:0}
.b-opts{display:flex;flex-wrap:wrap;gap:.55rem}
.b-opt{font-family:var(--font-sans);font-weight:600;font-size:.9rem;padding:.6rem 1.1rem;border-radius:var(--r-pill);
  border:1.5px solid var(--hairline);background:transparent;color:var(--ink-70);cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .15s var(--ease)}
.b-opt:hover{border-color:var(--cotto);color:var(--cotto)}
.b-opt:active{transform:scale(.96)}
.b-opt.is-on{background:var(--cotto);border-color:var(--cotto);color:var(--panna)}
.b-opt:focus-visible{outline:none;box-shadow:0 0 0 3px var(--panna),0 0 0 5px var(--oro)}
.b-foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:2.2rem;flex-wrap:wrap}
.b-price{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.3rem);color:var(--espresso)}

/* ---------- location map iframe ---------- */
.loc-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:saturate(.92)}

/* ---------- paseo horizontal (centro de la experiencia) ---------- */
.paseo{position:relative;background:var(--espresso);color:var(--panna);padding-bottom:clamp(2rem,4vw,3rem)}
.paseo-intro{padding:clamp(3.5rem,7vw,6rem) var(--pad) 0;max-width:var(--maxw);margin:0 auto}
.paseo-intro .eyebrow{color:var(--terra)}
.paseo-intro .h2{color:var(--panna);margin-top:.5rem}
.paseo-hint{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(244,236,221,.5);margin-top:1rem}
/* fallback sin GSAP: scroll horizontal nativo con snap */
.paseo-track{display:flex;gap:clamp(1rem,2vw,1.8rem);padding:clamp(1.5rem,3vw,2.5rem) var(--pad);
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.paseo-track::-webkit-scrollbar{height:0}
.station{flex:0 0 min(82vw,500px);scroll-snap-align:center;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;background:#2a221b}
.station--hero{flex-basis:min(88vw,580px)}
.station-ph{position:absolute;inset:0}
.station-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.station:hover .station-ph img{transform:scale(1.06)}
.station-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,12,.93),transparent 60%)}
.station-txt{position:absolute;inset:auto 0 0;z-index:1;padding:clamp(1.4rem,3vw,2.1rem)}
.station-no{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--terra)}
.station-txt h3{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.04;margin:.5rem 0 .4rem}
.station-txt p{color:rgba(244,236,221,.82);max-width:34ch;font-size:.93rem}
.station-price{display:inline-block;margin-top:1rem;font-family:var(--font-display);font-size:1.3rem;color:var(--panna)}
.station--cta{display:grid;place-items:center;background:var(--cotto);border-radius:var(--r-lg)}
.station-cta-in{text-align:center;padding:2rem}
.station-cta-in h3{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4vw,3rem);color:var(--panna)}
.station-cta-in p{color:rgba(244,236,221,.85);margin:.7rem auto 1.6rem;max-width:24ch}
.station-cta-in .hero-cta{justify-content:center}
/* con GSAP: pin + pan horizontal */
.gsap-on .paseo{height:100vh;overflow:hidden;padding-bottom:0;display:flex;flex-direction:column;justify-content:center}
.gsap-on .paseo-intro{position:absolute;top:clamp(5rem,12vh,8rem);left:0;right:0;z-index:2;padding-top:0;pointer-events:none}
.gsap-on .paseo-track{overflow:visible;flex-wrap:nowrap;width:max-content;scroll-snap-type:none;align-items:center;padding-block:0}
.gsap-on .station{flex-basis:clamp(340px,40vw,540px);aspect-ratio:auto;height:72vh;scroll-snap-align:none}
.gsap-on .station--hero{flex-basis:clamp(380px,46vw,600px)}
.gsap-on .station--cta{aspect-ratio:auto;height:72vh}
.gsap-on .paseo-hint{display:none}

/* magnetic targets */
[data-magnetic]{will-change:transform}

/* barra de progreso a todo el ancho, bajo el header (film) */
.nav-progress.nav-progress--bar{position:absolute;left:0;bottom:0;width:100%;max-width:none;height:2px;margin:0;border-radius:0;display:block;flex:none}

/* ===== EL FILM: una noche en Gianni ===== */
.film-body{background:var(--espresso)}
.nav--film .brand{color:var(--panna)}
.nav--film:not(.solid) .nav-cta .btn{background:var(--panna);color:var(--cotto)}
.nav-progress{flex:1;max-width:220px;height:2px;background:rgba(244,236,221,.18);margin:0 1.5rem;border-radius:2px;overflow:hidden}
.nav-progress span{display:block;height:100%;width:0;background:var(--terra)}
.nav.solid .nav-progress{background:rgba(30,24,19,.12)}
@media(max-width:680px){.nav-progress{display:none}}

.film{position:relative;background:var(--espresso);color:var(--panna)}
.act{position:relative;min-height:100dvh;display:grid;place-items:center;text-align:center;padding:96px var(--pad) 4rem;overflow:hidden}
.act-bg{position:absolute;inset:0;z-index:0}
.act-bg img{width:100%;height:100%;object-fit:cover}
.act-bg::after{content:"";position:absolute;inset:0;background:rgba(18,14,11,.66)}
.act-1 .act-bg::after{background:radial-gradient(120% 90% at 50% 64%,rgba(111,26,7,.42),rgba(18,14,11,.82) 58%,rgba(18,14,11,.97))}
.act-2 .act-bg::after{background:linear-gradient(to top,rgba(18,14,11,.92),rgba(18,14,11,.45))}
.act-5 .act-bg::after{background:linear-gradient(to top,rgba(18,14,11,.9),rgba(18,14,11,.22) 60%,rgba(18,14,11,.55))}
.act-inner{position:relative;z-index:1;max-width:62ch}
.act-inner--wide{max-width:1080px;width:100%}
.act .kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.26em;color:var(--terra)}
.act h2,.act h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.3rem,6.2vw,5.2rem);line-height:1.0;letter-spacing:-.02em;margin:1.1rem 0;text-wrap:balance}
.act h2.it{font-style:italic;color:var(--terra)}
.act p{color:rgba(244,236,221,.86);font-size:clamp(1.02rem,1.5vw,1.26rem);max-width:46ch;margin:0 auto;line-height:1.6}
.brandmark{font-size:clamp(3rem,11vw,8rem)!important;line-height:.9!important;letter-spacing:-.03em}
.brandmark .it{font-style:italic;color:var(--terra)}

.table-dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.3rem);margin-top:2.2rem}
.table-dishes figure{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4}
.table-dishes img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.table-dishes figure:hover img{transform:scale(1.06)}
.table-dishes figcaption{position:absolute;inset:auto 0 0;padding:.9rem 1rem;text-align:left;font-family:var(--font-display);font-size:1.1rem;
  background:linear-gradient(to top,rgba(18,14,11,.93),transparent);display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.table-dishes figcaption span{font-size:.82rem;color:var(--terra);font-family:var(--font-sans);font-weight:600}

.act-inner--split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:1000px;text-align:left}
.act-gianni{background:var(--panna);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);text-align:center}
.act-gianni img{width:min(240px,72%);margin:0 auto}
.act-gianni .sign{display:block;font-family:var(--font-display);font-style:italic;font-size:1.6rem;color:var(--cotto);margin-top:.4rem}
.act-inner--split h2,.act-inner--split p{margin-left:0}

/* con GSAP: film pineado con fundidos */
.gsap-film .film{height:100vh;overflow:hidden}
.gsap-film .act{position:absolute;inset:0;min-height:0;height:100vh;opacity:0;will-change:opacity,transform}
.gsap-film .act-1{opacity:1}

/* ===== OUTRO ===== */
.outro{background:var(--cotto);color:var(--panna);text-align:center;padding:clamp(3.2rem,7vw,6rem) 0}
.outro .h2{color:var(--panna);font-size:clamp(2.4rem,5vw,4rem)}
.outro .kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.24em;color:rgba(244,236,221,.72)}
.outro .lead{color:rgba(244,236,221,.9)}
.outro-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.outro .btn-primary{background:var(--panna);color:var(--cotto)}
.outro .btn-primary:hover{background:var(--terra);color:var(--espresso)}
.outro .btn-outline{border-color:var(--panna);color:var(--panna)}
.outro .btn-outline:hover{background:var(--panna);color:var(--cotto)}
.outro-trust{margin-top:2rem;font-size:.95rem;color:rgba(244,236,221,.82)}
.outro-trust b{color:var(--panna)}

@media(max-width:780px){
  .table-dishes{grid-template-columns:1fr;max-width:330px;margin-inline:auto}
  .act-inner--split{grid-template-columns:1fr;text-align:center}
  .act-inner--split h2,.act-inner--split p{margin-inline:auto}
  .act-gianni{max-width:250px;margin-inline:auto}
  /* movil: sin film pineado, los actos no se fuerzan a pantalla completa -> menos scroll */
  .act{min-height:auto;padding-block:clamp(3rem,11vw,4.4rem)}
  .act-1{min-height:84vh}
  .act-5{min-height:62vh}
  .brandmark{font-size:clamp(2.9rem,15vw,4.6rem)!important}
  .table-dishes{max-width:360px}
  .table-dishes figure{aspect-ratio:4/3}
}
/* offset de ancla por el header fijo (salto nativo en movil y fallback) */
#arma,#visita,#reservar{scroll-margin-top:84px}

/* movil/tablet (sin film pineado): cada acto entra con fundido + leve zoom */
@media(max-width:899px){
  .js .act:not(.act-1){opacity:0;transform:translateY(20px) scale(.97);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .act.act-in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .sig-grid{grid-template-columns:1fr}
  .builder-grid{grid-template-columns:1fr}
  .dish-feature{grid-row:auto}
  .dish-feature .dish-ph{aspect-ratio:4/3}
  .story-grid,.loc-grid,.foot-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .reserva .panel{flex-direction:column;align-items:flex-start}
}
@media(max-width:680px){
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex;background:none;border:0;color:var(--panna);font-size:1.6rem;cursor:pointer}
  .nav.solid .burger{color:var(--espresso)}
  .mobilebar{display:grid}
  body{padding-bottom:66px}
  .foot-grid{grid-template-columns:1fr;gap:1.8rem}
  .gal-grid{grid-template-columns:1fr 1fr}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .act{opacity:1!important;transform:none!important}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ============================================================
   AMPLIACION - paginas Nosotros, Contacto, Eventos (We Creative)
   Mismo sistema: cotto/crema/espresso + Josefin Slab/Hanken.
   ============================================================ */

/* skip link (a11y) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cotto);color:var(--panna);padding:.7rem 1.2rem;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip-link:focus{left:0}

/* generic page hero (nosotros/contacto/eventos) */
.page-hero{padding:140px 0 2.2rem;text-align:center}
.page-hero--carta{background:var(--carta)}
.page-hero .lead{margin:1rem auto 0}
.crumbs{font-size:.76rem;color:var(--ink-50);letter-spacing:.02em;margin-bottom:1rem}
.crumbs a:hover{color:var(--cotto)}
.crumbs span[aria-current]{color:var(--cotto)}

/* ---------- Nosotros (Gianni) ---------- */
.gianni-quote{background:var(--cotto);color:var(--panna);text-align:center}
.gianni-quote blockquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.7rem,4vw,3rem);line-height:1.2;max-width:24ch;margin:0 auto;color:var(--panna);font-weight:500}
.gianni-quote .who{margin-top:1.5rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(244,236,221,.72)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:.5rem}
.val{background:var(--panna);border:1px solid var(--hairline);border-radius:var(--r-md);padding:clamp(1.4rem,2.4vw,2rem)}
.val .n{font-family:var(--font-display);font-style:italic;color:var(--cotto);font-size:1.35rem}
.val h3{font-family:var(--font-display);font-size:1.45rem;margin:.2rem 0 .4rem;font-weight:500}
.val p{color:var(--ink-70);font-size:.94rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem);counter-reset:s;margin-top:.5rem}
.step-card{background:var(--carta);border-radius:var(--r-md);padding:clamp(1.4rem,2.4vw,2rem);position:relative}
.step-card::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--cotto);margin-bottom:.3rem}
.step-card h3{font-family:var(--font-display);font-size:1.4rem;margin:0 0 .4rem;font-weight:500}
.step-card p{color:var(--ink-70);font-size:.93rem}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contact-info dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.4rem;margin:1.4rem 0}
.contact-info dt{font-weight:600;color:var(--cotto);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;align-self:center}
.contact-info dd a:hover{color:var(--cotto)}
.contact-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem}
.contact-form{background:var(--carta);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--sh-2)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-70);margin-bottom:.45rem}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-sans);font-size:1rem;color:var(--ink-90);background:var(--panna);border:1.5px solid var(--hairline);border-radius:var(--r-sm);padding:.8rem 1rem;min-height:48px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cotto);box-shadow:0 0 0 3px rgba(111,26,7,.13)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.82rem;color:var(--ink-50);margin-top:.2rem}
.form-success{display:none;background:var(--basilico);color:var(--panna);border-radius:var(--r-sm);padding:1rem 1.2rem;margin-bottom:1.2rem;font-weight:600}
.is-sent .form-success{display:block}
.is-sent .contact-form form{display:none}

/* ---------- Eventos privados ---------- */
.evt-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.evt{background:var(--carta);border-radius:var(--r-md);padding:clamp(1.4rem,2.4vw,2rem)}
.evt .ico{font-family:var(--font-display);font-style:italic;color:var(--cotto);font-size:1.7rem}
.evt h3{font-family:var(--font-display);font-size:1.4rem;margin:.3rem 0 .4rem;font-weight:500}
.evt p{color:var(--ink-70);font-size:.93rem}
.evt-band{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.evt-band .ph{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-2)}
.evt-band img{width:100%;height:100%;object-fit:cover}
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--hairline);padding:1.1rem 0}
.faq summary{font-family:var(--font-display);font-size:1.25rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cotto);font-size:1.5rem;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-70);margin-top:.7rem;max-width:62ch}

/* responsive additions */
@media(max-width:900px){
  .contact-grid,.evt-band{grid-template-columns:1fr}
  .vals,.evt-feats,.steps{grid-template-columns:1fr}
}
@media(max-width:680px){
  .field-row{grid-template-columns:1fr}
}
/* ============================================================
   AUDIT (impeccable) - refinamientos de las paginas nuevas
   - quitar numeracion decorativa en items NO secuenciales (valores/ventajas)
   - de tarjetas iguales a columnas editoriales (coherente con "no 3 cards iguales")
   - contraste de placeholder >= 4.5:1
   ============================================================ */
.vals .val, .evt-feats .evt{
  background:transparent; border:0; border-radius:0;
  border-top:1px solid var(--hairline); padding:1.5rem 0 0;
}
.vals .val .n{display:none}
.evt-feats .evt .ico{display:none}
.evt-feats .evt h3, .vals .val h3{margin-top:0}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-50);opacity:1}

/* ============================================================
   V3 — REDISEÑO TENUE / MUCHO BLANCO / FORMAL (cliente jul-2026)
   Base más blanca, header que aparece al scroll (tinto),
   4 idiomas, chatbox, carta real, bebidas, banners.
   ============================================================ */
:root{ --latte:#FBF8F1; --blanco:#FFFFFF; }
body{ background:var(--latte); }

/* ---------- header sólido tinto (páginas internas, siempre visible) ---------- */
.nav--solid{ background:var(--cotto); box-shadow:0 4px 24px rgba(30,24,19,.18); }
.nav--solid .brand{ color:var(--panna); }
.nav--solid .brand-logo{ height:26px; width:auto; display:block; }
.nav--solid .nav-links a{ color:rgba(244,236,221,.92); }
.nav--solid .nav-links a:hover{ color:#fff; }
.nav--solid .nav-links a::after{ background:var(--terra); }
.nav--solid .nav-cta .btn{ background:var(--panna); color:var(--cotto); }
.nav--solid .nav-cta .btn:hover{ background:var(--terra); color:var(--espresso); }
.nav--solid .burger{ color:var(--panna); }

/* ---------- header que aparece al hacer scroll (tinto) ---------- */
.nav--reveal{ transform:translateY(-100%); opacity:0; pointer-events:none;
  background:var(--cotto);
  transition:transform .5s var(--ease),opacity .4s var(--ease),box-shadow .4s var(--ease); }
.nav--reveal.is-shown{ transform:none; opacity:1; pointer-events:auto; box-shadow:0 4px 24px rgba(30,24,19,.22); }
.nav--reveal .brand{ color:var(--panna); }
.nav--reveal .brand-logo{ height:26px; width:auto; display:block; }
.nav--reveal .nav-links a{ color:rgba(244,236,221,.92); }
.nav--reveal .nav-links a:hover{ color:#fff; }
.nav--reveal .nav-links a::after{ background:var(--terra); }
.nav--reveal .nav-cta .btn{ background:var(--panna); color:var(--cotto); }
.nav--reveal .nav-cta .btn:hover{ background:var(--terra); color:var(--espresso); }
.nav--reveal .burger{ color:var(--panna); }

/* ---------- selector de idioma + banderas ---------- */
.lang-switch{ position:relative; display:inline-flex; }
.lang-current{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(244,236,221,.34); color:var(--panna);
  border-radius:var(--r-pill); padding:.34rem .6rem; font-family:var(--font-sans); }
.lang-current:hover{ background:rgba(255,255,255,.24); }
.lang-code{ font-size:.72rem; font-weight:700; letter-spacing:.06em; }
.lang-caret{ width:10px; height:6px; opacity:.8; }
.flag-wrap{ display:inline-flex; width:22px; height:15px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.flag{ width:100%; height:100%; display:block; object-fit:cover; }
.lang-menu{ position:absolute; right:0; top:calc(100% + .5rem); min-width:176px; z-index:70;
  background:var(--blanco); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:.35rem; display:none; }
.lang-switch.open .lang-menu{ display:block; }
.lang-menu button{ display:flex; align-items:center; gap:.6rem; width:100%; border:0; background:none; cursor:pointer;
  padding:.55rem .6rem; border-radius:var(--r-sm); color:var(--ink-90); font-family:var(--font-sans); font-size:.9rem; }
.lang-menu button:hover{ background:var(--carta); }
.lang-menu button[aria-current="true"]{ color:var(--cotto); font-weight:700; }
/* selector de idioma como enlaces <a> reales (SEO: crawlables) */
.lang-menu a{ display:flex; align-items:center; gap:.6rem; width:100%; text-decoration:none;
  padding:.55rem .6rem; border-radius:var(--r-sm); color:var(--ink-90); font-family:var(--font-sans); font-size:.9rem; }
.lang-menu a:hover{ background:var(--carta); }
.lang-menu a[aria-current="true"]{ color:var(--cotto); font-weight:700; }

/* ---------- HERO v2 (solo logo + botones, overlay leve) ---------- */
.hero-v2{ position:relative; min-height:100svh; display:grid; place-items:center; text-align:center;
  color:var(--panna); overflow:hidden; padding:2rem var(--pad); }
.hero-v2 .hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-v2 .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-v2 .hero-bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(closest-side at 50% 44%, rgba(20,14,11,.5), rgba(20,14,11,.12) 78%),
             linear-gradient(180deg, rgba(20,14,11,.22), rgba(20,14,11,.34)); }
.hero-v2 .hero-in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2.2rem; }
.hero-logo{ width:min(560px,84vw); filter:drop-shadow(0 10px 34px rgba(0,0,0,.5)); }
.hero-v2 .hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.hero-scroll{ position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:1;
  color:rgba(244,236,221,.8); font-family:var(--font-sans); font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero-scroll .line{ width:1px; height:34px; background:linear-gradient(var(--terra),transparent); }

/* ---------- barra de reseñas dual (Google + TripAdvisor) ---------- */
.trust2{ background:var(--blanco); border-bottom:1px solid var(--hairline); }
.trust2-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1rem,5vw,3rem); padding:1.15rem 0; text-align:center; }
.trust2 .badge{ display:inline-flex; align-items:center; gap:.65rem; }
.trust2 .badge .mark{ width:24px; height:24px; flex:0 0 auto; }
.trust2 .badge .score{ font-family:var(--font-display); font-size:1.45rem; color:var(--espresso); line-height:1; }
.trust2 .badge .stars{ color:var(--oro); font-size:.9rem; letter-spacing:.06em; }
.trust2 .badge .src{ font-size:.85rem; color:var(--ink-70); text-align:left; line-height:1.25; }
.trust2 .badge .src b{ color:var(--espresso); }
.trust2 .sep{ width:1px; height:36px; background:var(--hairline); }

/* ---------- Nosotros (light) ---------- */
.about2{ background:var(--latte); }
.about2-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.about2-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:4/5; }
.about2-media img{ width:100%; height:100%; object-fit:cover; }
.about2-copy .hr{ width:54px; height:2px; background:var(--cotto); border:0; margin:1.2rem 0; }
.about2-copy .quote-it{ font-family:var(--font-display); font-style:italic; color:var(--cotto); font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:1.3rem; }

/* ---------- carrusel de platos ---------- */
.dishes2{ background:var(--blanco); }
.carousel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.carousel-arrows{ display:flex; gap:.5rem; }
.carousel-nav{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--hairline); background:var(--blanco);
  color:var(--espresso); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .25s var(--ease),color .25s,border-color .25s,opacity .25s; }
.carousel-nav svg{ width:18px; height:18px; }
.carousel-nav:hover{ background:var(--cotto); color:var(--panna); border-color:var(--cotto); }
.carousel-nav:disabled{ opacity:.3; cursor:default; }
.carousel-track{ display:flex; gap:16px; overflow-x:auto; scroll-behavior:auto; padding-bottom:.4rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-item{ flex:0 0 clamp(240px,32vw,320px); scroll-snap-align:start; }
.dish-card{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/5; background:var(--carta); }
.dish-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.dish-card:hover img{ transform:scale(1.06); }
.dish-card figcaption{ position:absolute; inset:auto 0 0; padding:1rem 1.1rem; color:var(--panna);
  background:linear-gradient(to top,rgba(20,16,12,.92),transparent); }
.dish-card .k{ font-size:.62rem; text-transform:uppercase; letter-spacing:.2em; color:var(--terra); display:block; margin-bottom:.2rem; }
.dish-card .n{ font-family:var(--font-display); font-size:1.3rem; line-height:1.1; }

/* ---------- reserva formal ---------- */
.reserva2{ background:var(--latte); }
.reserva2 .panel{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem;
  background:var(--carta); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(2rem,5vw,3.2rem); }
.reserva2 .panel .p-txt{ max-width:52ch; }
.reserva2 .panel h2{ color:var(--espresso); }
.reserva2 .panel p{ color:var(--ink-70); margin-top:.6rem; }
.reserva2 .r-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* ---------- footer v2 (logo centro · ubicación izq · horario der) ---------- */
.footer2{ background:var(--latte); border-top:1px solid var(--hairline); color:var(--ink-70); padding:clamp(2.4rem,5vw,3.6rem) 0 1.6rem; }
.footer2-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:1.6rem; align-items:start; }
.footer2 .f-left{ text-align:left; } .footer2 .f-right{ text-align:right; }
.footer2 .f-logo{ text-align:center; align-self:center; }
.footer2 .f-logo .fbrand{ font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--cotto); line-height:1.05; }
.footer2 .f-logo .ftag{ font-family:var(--font-display); font-style:italic; color:var(--ink-50); font-size:.9rem; margin-top:.2rem; }
.footer2 h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--cotto); margin-bottom:.5rem; font-family:var(--font-sans); font-weight:700; }
.footer2 address{ font-style:normal; line-height:1.7; color:var(--ink-70); font-size:.9rem; }
.footer2 a:hover{ color:var(--cotto); }
.footer2 .f-right a{ color:inherit; }
.footer2-bottom{ text-align:center; margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--hairline); font-size:.76rem; color:var(--ink-50); }

/* ---------- chatbox flotante ---------- */
#odg-chat{ position:fixed; right:20px; bottom:20px; z-index:80; }
.chat-launcher{ display:inline-flex; align-items:center; gap:.5rem; background:var(--cotto); color:var(--panna);
  border:0; border-radius:var(--r-pill); padding:.8rem 1.15rem; cursor:pointer; box-shadow:var(--sh-2);
  font-family:var(--font-sans); font-weight:600; font-size:.9rem; }
.chat-launcher:hover{ background:var(--cotto-2); }
.chat-launcher svg{ width:20px; height:20px; }
#odg-chat.open .chat-launcher{ display:none; }
.chat-panel{ position:absolute; right:0; bottom:0; width:min(360px,92vw);
  background:var(--blanco); border-radius:18px; box-shadow:var(--sh-3); overflow:hidden; display:none; }
#odg-chat.open .chat-panel{ display:block; }
.chat-head{ background:var(--cotto); color:var(--panna); padding:.9rem 1rem; display:flex; align-items:center; gap:.7rem; }
.chat-head .avatar{ width:38px; height:38px; border-radius:50%; background:var(--panna); color:var(--cotto);
  display:grid; place-items:center; font-family:var(--font-display); font-size:1.1rem; flex:0 0 auto; }
.chat-head .ct b{ font-size:.94rem; display:block; line-height:1.2; }
.chat-head .ct span{ font-size:.74rem; opacity:.85; }
.chat-close{ margin-left:auto; background:none; border:0; color:var(--panna); font-size:1.4rem; line-height:1; cursor:pointer; }
.chat-body{ padding:1rem; max-height:min(46vh,360px); overflow-y:auto; display:flex; flex-direction:column; gap:.55rem; background:var(--latte); }
.chat-msg{ max-width:86%; padding:.6rem .8rem; border-radius:14px; font-size:.9rem; line-height:1.45; }
.chat-msg.bot{ background:var(--blanco); border:1px solid var(--hairline); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg.user{ background:var(--cotto); color:var(--panna); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-quick{ display:flex; flex-direction:column; gap:.4rem; margin-top:.2rem; }
.chat-quick button{ text-align:left; background:var(--blanco); border:1px solid var(--hairline); border-radius:12px;
  padding:.55rem .75rem; cursor:pointer; font-family:var(--font-sans); font-size:.85rem; color:var(--cotto); transition:.2s; }
.chat-quick button:hover{ background:var(--carta); }
.chat-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--hairline); background:var(--blanco); }
.chat-form input{ flex:1; min-width:0; border:1px solid var(--hairline); border-radius:var(--r-pill); padding:.55rem .9rem; font-family:var(--font-sans); font-size:.88rem; }
.chat-form input:focus{ outline:none; border-color:var(--cotto); }
.chat-form button{ background:var(--cotto); color:var(--panna); border:0; border-radius:var(--r-pill); padding:0 1rem; cursor:pointer; font-weight:600; }

/* ---------- banner con imagen semitransparente + texto flotante ---------- */
.page-banner{ position:relative; display:grid; place-items:center; text-align:center; overflow:hidden;
  background:var(--cotto); color:var(--panna); min-height:clamp(230px,38vh,360px); padding-top:60px; }
.page-banner .banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.page-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(92,0,21,.32),rgba(92,0,21,.6)); }
.page-banner .banner-in{ position:relative; z-index:1; padding:2.4rem var(--pad); max-width:64ch; }
.page-banner .eyebrow{ color:var(--terra); }
.page-banner h1{ color:var(--panna); font-size:clamp(2.3rem,5.4vw,4rem); margin-top:.5rem; }
.page-banner .lead{ color:rgba(244,236,221,.9); margin:1rem auto 0; }
.page-banner .banner-note{ margin:1.1rem auto 0; display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .95rem; border:1px solid rgba(244,236,221,.32); border-radius:var(--r-sm);
  color:rgba(244,236,221,.82); font-size:.86rem; letter-spacing:.01em; }
.page-banner .banner-note::before{ content:"☎"; font-size:.9em; opacity:.85; }

/* ---------- carta real ---------- */
.carta-tools{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; margin:1.6rem 0 2.4rem; }
.menu-sec h2.up{ text-transform:uppercase; letter-spacing:.05em; font-size:clamp(1.5rem,3vw,2.1rem); }
.menu-item-allg{ margin-left:.5rem; font-size:.92rem; white-space:nowrap; letter-spacing:.05em; }
.menu-item-allg .al-ic{ text-decoration:none; cursor:help; }
.menu-item .xtra{ display:block; color:var(--ink-50); font-size:.82rem; grid-column:1/-1; }
.menu-note{ color:var(--ink-50); font-size:.9rem; margin:.2rem 0 1rem; }

/* ---------- leyenda de alérgenos ---------- */
.allergens{ background:var(--carta); border-radius:var(--r-md); padding:clamp(1.2rem,3vw,1.9rem); margin-top:2.4rem; }
.allergens h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:500; }
.allergen-grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.55rem 1.1rem; margin-top:1rem; }
.allergen-grid li{ display:flex; align-items:center; gap:.55rem; font-size:.85rem; color:var(--ink-70); }
.allergen-ic{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:var(--panna); display:grid; place-items:center; font-size:1rem; }
.waiter-note{ text-align:center; margin-top:1.6rem; font-weight:600; color:var(--cotto); font-size:1.02rem; }

/* ---------- filtros de bebidas ---------- */
.filterbar{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1.4rem 0 2.6rem; }
.filterbar button{ font-family:var(--font-sans); font-weight:600; font-size:.85rem; padding:.5rem 1.05rem;
  border-radius:var(--r-pill); border:1.5px solid var(--hairline); background:var(--blanco); color:var(--ink-70); cursor:pointer; transition:.2s var(--ease); }
.filterbar button:hover{ border-color:var(--cotto); color:var(--cotto); }
.filterbar button[aria-pressed="true"]{ background:var(--cotto); border-color:var(--cotto); color:var(--panna); }
.drink-sec{ padding:1.4rem 0; }
.drink-sec h2{ border-bottom:1px solid var(--hairline); padding-bottom:.5rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.3rem,2.4vw,1.8rem); }
.drink-sub{ font-family:var(--font-sans); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cotto); margin:1.1rem 0 .5rem; }

/* ---------- responsive v3 ---------- */
@media(max-width:900px){
  .about2-grid{ grid-template-columns:1fr; }
  .about2-media{ order:-1; max-width:520px; margin-inline:auto; aspect-ratio:16/11; }
  .reserva2 .panel{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:680px){
  .footer2-grid{ grid-template-columns:1fr; text-align:center; gap:1.8rem; }
  .footer2 .f-left,.footer2 .f-right{ text-align:center; }
  #odg-chat{ right:12px; bottom:74px; }
  .trust2 .sep{ display:none; }
}

/* ============================================================
   V4 — TEMA OSCURO / TENUE (ref. casadaragona.com) + ÁNGULOS RECTOS
   El cliente pidió web oscura (no clara), esquinas rectas, footer con
   logo en el medio y hero con transparencia tinto oscura.
   ============================================================ */
:root{
  --r-sm:0; --r-md:0; --r-lg:0; --r-pill:0;
  --latte:#14100E; --blanco:#1C1611; --carta:#241C16;
  --panna:#F4ECDD;
  --ink-90:#F4ECDD; --ink-70:rgba(244,236,221,.82); --ink-50:rgba(244,236,221,.55);
  --hairline:rgba(244,236,221,.16);
}
body{ background:var(--latte); color:var(--ink-90); }
h1,h2,h3,.h1,.h2{ color:var(--panna); }

/* --- ángulos rectos en todo lo redondeado --- */
.btn,.dish,.dish-card,.about2-media,.loc-map,.builder-visual,.cm-wrap,.gal-grid figure,
.chat-panel,.chat-msg,.chat-launcher,.chat-quick button,.chat-form input,.chat-form button,
.lang-current,.lang-menu,.lang-menu button,.lang-menu a,.filterbar button,.allergens,.allergen-ic,
.carousel-nav,.field input,.field textarea,.field select,.flag-wrap,.mobilebar a,.page-banner,.b-opt{ border-radius:0 !important; }

/* --- acentos terracota/dorado --- */
.eyebrow{ color:var(--terra); }
.menu-item .mprice{ color:var(--terra); }
.about2-copy .quote-it{ color:var(--terra); }

/* --- botones (dark) --- */
.btn-outline{ border-color:rgba(244,236,221,.5); color:var(--panna); }
.btn-outline:hover{ background:var(--panna); color:var(--espresso); }

/* --- barra de reseñas (dark) --- */
.trust2{ background:var(--blanco); border-bottom:1px solid var(--hairline); }
.trust2 .badge .score{ color:var(--panna); }
.trust2 .badge .src b{ color:var(--panna); }
.trust2 .sep{ background:var(--hairline); }

/* --- secciones (dark) --- */
.about2{ background:var(--latte); }
.dishes2{ background:var(--blanco); }
.reserva2{ background:var(--latte); }
.reserva2 .panel{ background:var(--carta); border-color:var(--hairline); }
.reserva2 .panel h2{ color:var(--panna); }
.loc{ background:var(--carta); }
.loc .h2{ color:var(--panna); }
.loc dt{ color:var(--terra); }
.cm-wrap{ background:var(--carta); border-color:var(--hairline); }
.contact-info dt{ color:var(--terra); }

/* --- carruseles / flechas (dark) --- */
.carousel-nav{ background:transparent; border-color:rgba(244,236,221,.4); color:var(--panna); }
.carousel-nav:hover{ background:var(--cotto); color:var(--panna); border-color:var(--cotto); }

/* --- carta / menú (dark) --- */
.menu-sec h2{ border-bottom-color:var(--hairline); }
.menu-item{ border-bottom-color:rgba(244,236,221,.12); }
.allergens{ background:var(--carta); }
.allergen-ic{ background:rgba(244,236,221,.1); }
.waiter-note{ color:var(--terra); }
.drink-sec h2{ border-bottom-color:var(--hairline); }
.drink-sub{ color:var(--terra); }
.menu-note{ color:var(--ink-50); }

/* --- filtros bebidas (dark) --- */
.filterbar button{ background:transparent; border-color:rgba(244,236,221,.3); color:var(--ink-70); }
.filterbar button:hover{ border-color:var(--terra); color:var(--terra); }
.filterbar button[aria-pressed="true"]{ background:var(--cotto); border-color:var(--cotto); color:var(--panna); }

/* --- footer (dark) + LOGO en el medio --- */
.footer2{ background:var(--latte); border-top:1px solid var(--hairline); }
.footer2 h4{ color:var(--terra); }
.footer2 .f-logo .fbrand{ font-size:0; line-height:0; color:transparent; }
.footer2 .f-logo .fbrand::before{ content:""; display:inline-block; width:210px; max-width:62vw; height:50px;
  background:url(img/logo.png) center/contain no-repeat; }
.footer2-bottom{ border-top-color:var(--hairline); }

/* --- chatbox (dark) --- */
.chat-panel{ background:var(--carta); border:1px solid var(--hairline); }
.chat-body{ background:var(--latte); }
.chat-msg.bot{ background:#2A221B; border-color:var(--hairline); color:var(--panna); }
.chat-quick button{ background:transparent; border-color:rgba(244,236,221,.28); color:var(--terra); }
.chat-quick button:hover{ background:rgba(244,236,221,.08); }
.chat-form{ background:var(--carta); border-top-color:var(--hairline); }
.chat-form input{ background:var(--latte); border-color:var(--hairline); color:var(--panna); }
.lang-menu{ background:var(--carta); }
.lang-menu button,.lang-menu a{ color:var(--panna); }
.lang-menu button:hover,.lang-menu a:hover{ background:rgba(244,236,221,.08); }

/* --- barra móvil (dark) --- */
.mobilebar{ background:var(--latte); border-top-color:var(--hairline); }
.mobilebar .call{ border-color:rgba(244,236,221,.5); color:var(--panna); }

/* --- HERO: transparencia oscura color tinto (restaurada, no leve) --- */
.hero-v2 .hero-bg::after{
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(92,0,21,.52), rgba(20,14,11,.55) 55%, rgba(20,14,11,.92)),
    linear-gradient(180deg, rgba(20,14,11,.5), rgba(20,14,11,.82));
}

/* --- carrusel: flechas flotantes (secciones sin cabecera) + fix scroll --- */
.carousel{ position:relative; }
.carousel--float > .carousel-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; background:rgba(20,16,14,.72); border-color:rgba(244,236,221,.4); color:var(--panna); }
.carousel--float > .carousel-nav.prev{ left:6px; }
.carousel--float > .carousel-nav.next{ right:6px; }
.carousel--float > .carousel-nav:hover{ background:var(--cotto); border-color:var(--cotto); }
.carousel--float > .carousel-nav:disabled{ opacity:0; pointer-events:none; }
/* ============================================================
   FABs flotantes: chat (solo logo) + Instagram + reseñas
   Derecha: Instagram encima del chat.  Izquierda: TripAdvisor
   encima de Google. En movil suben para no tapar la mobilebar.
   ============================================================ */
.fab{ width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer; background:var(--cotto); color:var(--panna);
  box-shadow:var(--sh-2); transition:transform .16s ease, background .16s ease; }
.fab:hover{ transform:translateY(-2px); }
.fab:focus-visible{ outline:2px solid var(--panna); outline-offset:2px; }
.fab svg{ width:24px; height:24px; }
.fab-ig:hover{ background:var(--cotto-2); }
/* pila derecha: instagram + chat apilados */
#odg-chat{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
#odg-chat .chat-panel{ margin:0; }
#odg-chat.open .fab-ig{ display:none; }
/* pila izquierda: reseñas (chip oscuro translúcido, sin recuadro blanco; logos a color + texto) */
.rev-fabs{ position:fixed; left:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; gap:12px; }
.rev-fabs .fab{ flex-direction:column; gap:3px; width:auto; min-width:54px; height:auto; padding:7px 7px 6px;
  background:rgba(20,16,14,.82); border:1px solid rgba(244,236,221,.3); color:var(--panna); }
.rev-fabs .fab:hover{ background:rgba(20,16,14,.94); border-color:rgba(244,236,221,.5); transform:translateY(-2px); }
.rev-fabs .fab svg{ width:24px; height:24px; }
.fab-cap{ font-family:var(--font-sans); font-size:8.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; line-height:1; color:var(--panna); white-space:nowrap; }
@media(max-width:680px){
  .rev-fabs{ left:12px; bottom:74px; }
}

/* ============================================================
   FIX ENTREGA — barra de reseñas visible + menú móvil funcional
   ============================================================ */

/* --- Barra de reseñas: banda diferenciada (antes se camuflaba con el fondo) --- */
.trust2{ background:var(--carta); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.trust2-row{ padding:1.25rem 0; }
.trust2 .badge .score{ color:var(--ink-90); }
.trust2 .badge .src, .trust2 .badge .src b{ color:var(--ink-90); }
.trust2 .sep{ background:var(--hairline); }
@media(max-width:680px){
  .trust2-row{ gap:.4rem 1.4rem; padding:1rem var(--pad); }
  .trust2 .badge{ gap:.5rem; }
  .trust2 .badge .score{ font-size:1.25rem; }
  .trust2 .badge .src{ font-size:.78rem; }
}

/* --- Menú móvil (overlay al pulsar la hamburguesa) --- */
@media(max-width:680px){
  body.nav-open{ overflow:hidden; }
  body.nav-open #nav{ background:var(--cotto); box-shadow:none; }
  body.nav-open .burger{ color:var(--panna); position:relative; z-index:51; }
  body.nav-open .nav-links{
    display:flex; position:fixed; top:0; left:0; right:0; bottom:0;
    width:100%; height:100vh; height:100dvh; z-index:49; margin:0;
    flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
    padding:5rem 2rem calc(66px + 1.5rem); background:var(--cotto);
    animation:navOpenFade .28s var(--ease);
  }
  body.nav-open .nav-links a{
    color:var(--panna); font-family:var(--font-display); font-size:2rem;
    text-transform:none; letter-spacing:.01em; padding:.5rem 1rem; min-height:44px;
    display:flex; align-items:center;
  }
  body.nav-open .nav-links a::after{ display:none; }
  /* la barra inferior (Llamar/Reservar) queda visible sobre el overlay */
  /* target táctil del selector de idioma */
  .lang-current{ min-height:44px; }
}
@keyframes navOpenFade{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ============================================================
   RGPD: banner de consentimiento de cookies + facade del mapa
   + paginas legales + enlaces legales del footer
   ============================================================ */
.cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:120;
  max-width:660px; margin:0 auto; background:var(--carta,#1c1712); color:var(--panna,#f4ecdd);
  border:1px solid rgba(244,236,221,.28); box-shadow:var(--sh-2,0 10px 40px rgba(0,0,0,.45));
  padding:1rem 1.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.2rem;
  transform:translateY(160%); transition:transform .3s ease; }
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ margin:0; flex:1 1 280px; font-size:.85rem; line-height:1.5; color:var(--panna,#f4ecdd); }
.cookie-banner a{ color:var(--terra,#d89060); text-decoration:underline; }
.cookie-actions{ display:flex; gap:.6rem; flex:0 0 auto; }
.cookie-banner .btn{ font-size:.8rem; padding:.5rem 1.05rem; }
@media(max-width:560px){
  .cookie-actions{ flex:1 1 100%; }
  .cookie-actions .btn{ flex:1; }
}

/* facade del mapa (no carga Google hasta clic/consentimiento) */
.map-facade{ width:100%; height:100%; min-height:340px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.9rem; text-align:center; padding:1.5rem;
  background:var(--carta,#1c1712); color:var(--panna,#f4ecdd); }
.map-facade .map-note{ margin:0; max-width:34ch; font-size:.82rem; color:var(--ink-50,#9a9088); line-height:1.5; }

/* paginas legales */
.legal{ padding:clamp(2.5rem,6vw,4.5rem) 0; }
.legal .container{ max-width:820px; }
.legal h1{ font-family:var(--font-display); color:var(--terra,#d89060); margin-bottom:.35rem; line-height:1.1; }
.legal .updated{ color:var(--panna,#f4ecdd); opacity:.6; font-size:.82rem; margin-bottom:2rem; }
.legal h2{ font-size:1.15rem; margin:2rem 0 .55rem; color:var(--panna,#f4ecdd); }
.legal h3{ font-size:1rem; margin:1.3rem 0 .4rem; color:var(--panna,#f4ecdd); }
.legal p, .legal li{ color:var(--panna,#f4ecdd); opacity:.85; line-height:1.7; font-size:.95rem; }
.legal ul{ margin:.4rem 0 .6rem 1.2rem; }
.legal a{ color:var(--terra,#d89060); text-decoration:underline; }
.legal .box{ border:1px solid var(--hairline,rgba(244,236,221,.16)); padding:1rem 1.2rem; margin:1rem 0; }
.legal .box p{ margin:0; }

/* enlaces legales del footer */
.footer2-legal{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-bottom:.7rem; }
.footer2-legal a{ color:var(--ink-50,#9a9088); font-size:.76rem; }
.footer2-legal a:hover{ color:var(--terra,#d89060); }
.footer2-copy{ color:var(--ink-50,#9a9088); font-size:.76rem; }

/* --- HERO: vídeo de fondo (prueba). La <img> queda de póster/fallback. --- */
.hero-v2 .hero-bg .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s ease; pointer-events:none;
}
.hero-v2 .hero-bg .hero-video.is-ready{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-v2 .hero-bg .hero-video{ display:none; }
}

/* ============================================================
   CREA TU PASTA — pasos verticales + extras en línea propia
   (2ª tanda de feedback del cliente, 28-jul-2026)
   ============================================================ */

/* listas de elección (tipos de pasta / extras): una opción por fila */
.pick-list{ list-style:none; margin:.2rem 0 1.7rem; padding:0; }
.pick-list li{
  display:grid; grid-template-columns:1fr auto; gap:1.4rem; align-items:baseline;
  padding:.62rem 0; border-bottom:1px dotted var(--hairline,rgba(244,236,221,.12));
  font-family:var(--font-display); font-size:1.08rem; line-height:1.35;
  color:var(--panna,#f4ecdd);
}
.pick-list li:last-child{ border-bottom:0; }
.pick-list .pprice{
  font-family:var(--font-sans); font-weight:600; font-size:.95rem;
  color:var(--terra,#d89060); white-space:nowrap;
}

/* extras de plato: ahora uno debajo del otro (separados por <br>) */
.menu-item .xtra{ line-height:1.55; }