/* ==========================================================================
   Pizzeria Italiana · demo
   Móvil primero: la base es 320–360 px y se sube con min-width (768, 1024, 1280).
   Paleta sacada de la fachada real: ocre de pared, zócalo marrón, tricolor del rótulo.
   ========================================================================== */

/* ---------- Fuentes locales (sin Google Fonts externas, por RGPD) ---------- */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/bodoni-latin.0492c8615361.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/bodoni-latin-ext.2f380b117ee0.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/bodoni-italic-latin.3d6740166d53.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/bodoni-italic-latin-ext.45eff25ed24e.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/jost-latin.928f4210aa48.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/jost-latin-ext.7f44f6fd229b.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens (en la plataforma real los inyecta el tema del negocio) ---------- */
:root{
  --paper:#F4ECDD;
  --paper-2:#EADFCB;
  --ink:#2A1A12;
  --ink-soft:#5E493C;
  --ocra:#E6B143;
  --pomodoro:#B3361F;
  --basilico:#2F5D3A;
  --notte:#17110D;
  --marrone:#3B2418;
  --line:rgba(42,26,18,.16);
  --line-light:rgba(244,236,221,.18);

  --serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --sans:"Jost","Futura","Avenir Next",system-ui,sans-serif;

  --gutter:clamp(20px,5.4vw,72px);
  --header-h:64px;
  --bar-h:70px; /* hueco abajo para las burbujas de contacto en móvil */
  --sec-pad:clamp(4.5rem,13vw,9rem);

  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.6 var(--sans);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol,dl,dd{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
em{font-style:italic}
:focus-visible{outline:2px solid var(--pomodoro);outline-offset:3px}
::selection{background:var(--ocra);color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;transition:top .3s}
.skip:focus{top:1rem}
.wrap{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Grano de papel: le quita el aspecto "plano digital" a todo */
body::after{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Tipografía común ---------- */
.kicker{
  display:flex;align-items:center;gap:.85em;
  font:500 .72rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pomodoro);
}
.kicker::before{content:"";width:2.4rem;height:1px;background:currentColor;flex:none}
.kicker b{font:italic 400 1.05rem/1 var(--serif);letter-spacing:0;text-transform:none}
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.7rem,12.5vw,7rem);line-height:.94;letter-spacing:-.03em;
  margin-top:1.1rem;
}
.h2 em{color:var(--pomodoro)}
.lead{font:italic 400 clamp(1.12rem,4.4vw,1.45rem)/1.5 var(--serif);color:var(--ink-soft);max-width:34ch}

/* Texto partido en letras (lo genera main.js) */
.w{display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap;padding:0 .06em .12em;margin:0 -.06em -.12em}
.ch{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 26ms + var(--d0,0ms))}
.is-in .ch,.is-in.ch{transform:none}
.js [data-split]:not(.is-split){visibility:hidden}

/* ---------- Apariciones al hacer scroll ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,32px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal="fade"]{transform:none}
/* El recorte va en los hijos: IntersectionObserver no detecta un objetivo con clip-path a cero */
.js [data-reveal="clip"]{opacity:1;transform:none}
.js [data-reveal="clip"] > *{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-io);transition-delay:var(--d,0ms)}
.js [data-reveal="clip"] img{transform:scale(1.3);transition:transform 1.8s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="clip"].is-in > *{clip-path:inset(0 0 0 0)}
.js [data-reveal="clip"].is-in img{transform:scale(1)}

/* ---------- Botones ---------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:54px;padding:0 1.7rem;
  font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid currentColor;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,currentColor);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ease)}
.btn .ico{width:18px;height:18px}
.btn--ocra{background:var(--ocra);border-color:var(--ocra);color:var(--ink);--fill:var(--paper)}
.btn--paper{background:var(--paper);border-color:var(--paper);color:var(--ink);--fill:var(--ocra)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper);--fill:var(--pomodoro)}
.btn--line{color:inherit;--fill:var(--ink)}
.btn--line-light{color:var(--paper);--fill:var(--paper)}
.link-arrow{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.link-arrow .ico{transition:transform .5s var(--ease)}
@media (hover:hover){
  .btn:hover::before{transform:scaleY(1)}
  .btn--line:hover{color:var(--paper);border-color:var(--ink)}
  .btn--line-light:hover{color:var(--ink)}
  .link-arrow:hover .ico{transform:translateX(5px)}
}


/* ==========================================================================
   Intro
   ========================================================================== */
.loader{display:none}
.js:not(.no-intro) .loader{
  position:fixed;inset:0;z-index:120;display:grid;place-content:center;justify-items:center;gap:1.1rem;
  background:var(--ocra);color:var(--ink);
  transition:transform 1.1s var(--ease-io);
  animation:loader-fallback 0s 4.5s forwards;
}
.loader__top{font:500 .72rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;opacity:0;animation:fade-in .8s .15s forwards}
.loader__word{font:italic 400 clamp(3.6rem,19vw,9rem)/1 var(--serif);letter-spacing:-.03em;display:flex}
.loader__word span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + .1s)}
.loader__word .w{padding-bottom:.18em;margin-bottom:-.18em}
.loader__flag{display:flex;width:7.5rem;height:2px;gap:0}
.loader__flag i{flex:1;transform:scaleX(0);transform-origin:0 50%;animation:grow .5s var(--ease) forwards}
.loader__flag i:nth-child(1){background:var(--basilico);animation-delay:.55s}
.loader__flag i:nth-child(2){background:var(--paper);animation-delay:.75s}
.loader__flag i:nth-child(3){background:var(--pomodoro);animation-delay:.95s}
.is-loaded .loader{transform:translate3d(0,-100%,0)}
.intro-done .loader{display:none!important}
@keyframes rise{to{transform:none}}
@keyframes grow{to{transform:none}}
@keyframes fade-in{to{opacity:1}}
@keyframes loader-fallback{to{transform:translate3d(0,-100%,0);visibility:hidden}}

/* ==========================================================================
   Cabecera y menú
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-inline:var(--gutter);padding-top:env(safe-area-inset-top);
  color:var(--paper);
  transition:background-color .5s,color .5s,transform .6s var(--ease),box-shadow .5s;
}
.hdr.is-solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line)}
/* Bajando: sin fondo, solo logo y opciones. Sobre zonas oscuras el texto pasa a claro */
.hdr.is-solid.is-ghost{background:transparent;box-shadow:none;text-shadow:0 0 10px var(--paper),0 0 18px var(--paper)}
.hdr.is-ghost.on-dark{color:var(--paper);text-shadow:0 0 10px rgba(23,17,13,.85),0 0 18px rgba(23,17,13,.6)}
.menu-open .hdr{color:var(--ink);background:transparent;box-shadow:none}
/* En móvil la cabecera va siempre opaca (también sobre la portada), por petición del usuario */
@media (max-width:767px){
  .hdr,.hdr.is-solid.is-ghost,.hdr.is-ghost.on-dark{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line);text-shadow:none}
  .menu-open .hdr{box-shadow:none}
}

.logo{display:flex;flex-direction:column;line-height:1;min-height:44px;justify-content:center}
.logo__top{font:500 .58rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase}
.logo__main{font:italic 400 1.62rem/1 var(--serif);letter-spacing:-.02em;margin-top:.12rem}
.logo__flag{display:flex;gap:3px;margin-top:.38rem}
.logo__flag i{width:.55rem;height:2px}
.logo__flag i:nth-child(1){background:var(--basilico)}
.logo__flag i:nth-child(2){background:currentColor;opacity:.55}
.logo__flag i:nth-child(3){background:var(--pomodoro)}

.nav{display:none}
.hdr__right{display:flex;align-items:center;gap:.4rem}
.hdr__call{display:none}

.burger{position:relative;width:48px;height:48px;display:grid;place-items:center}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .6s var(--ease),top .6s var(--ease)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:28px}
.menu-open .burger span:nth-child(1){top:23.5px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:23.5px;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:55;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:calc(var(--header-h) + env(safe-area-inset-top) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--ink);overflow-y:auto;
  clip-path:circle(0 at calc(100% - var(--gutter) - 24px) 32px);
  visibility:hidden;
  transition:clip-path .9s var(--ease-io),visibility 0s .9s;
}
.menu-open .menu{clip-path:circle(160% at calc(100% - var(--gutter) - 24px) 32px);visibility:visible;transition:clip-path .9s var(--ease-io),visibility 0s}
.menu-open{overflow:hidden}
.menu__list li{overflow:hidden;border-bottom:1px solid var(--line)}
.menu__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.45rem 0;
  font:400 clamp(2.4rem,11.5vw,4.4rem)/1.08 var(--serif);letter-spacing:-.02em;
  transform:translate3d(0,105%,0);transition:transform .9s var(--ease);
}
.menu__list a small{font:500 .7rem/1 var(--sans);letter-spacing:.2em;color:var(--pomodoro)}
.menu-open .menu__list a{transform:none;transition-delay:calc(.25s + var(--i) * 60ms)}
.menu__foot{display:grid;gap:1.2rem;opacity:0;transition:opacity .6s}
.menu-open .menu__foot{opacity:1;transition-delay:.6s}
.menu__foot p{color:var(--ink-soft);font-size:.95rem}
/* Acceso al panel de gestión (demo) */
.menu__panel{display:flex;align-items:center;gap:.9rem;min-height:64px;padding:.8rem 1rem;background:var(--ink);color:var(--paper)}
.menu__panel > span{flex:1;display:flex;flex-direction:column;font:500 .72rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.menu__panel small{margin-top:.2rem;font:italic 400 .98rem/1.3 var(--serif);letter-spacing:0;text-transform:none;color:rgba(244,236,221,.7)}
.menu__panel .ico{color:var(--ocra)}
.hdr__panel{display:none}
.menu__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.menu__btns .btn{flex:1 1 9rem}
@media (hover:hover){.menu__list a:hover{font-style:italic;color:var(--pomodoro)}}

/* ==========================================================================
   Hero: la foto del horno queda fija debajo y el resto de la página la tapa
   ========================================================================== */
.hero{
  position:sticky;top:0;z-index:0;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  background:var(--notte);color:var(--paper);overflow:hidden;isolation:isolate;
}
.hero.is-off{visibility:hidden}
.hero__media{position:absolute;inset:0;z-index:-2;
  transform:translate3d(0,calc(var(--hp,0) * 14%),0) scale(calc(1 + var(--hp,0) * .12));will-change:transform}
.hero__media picture,.hero__media img{width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:50% 55%;transform:scale(1.22);transition:transform 2.6s var(--ease)}
.is-ready .hero__media img,.no-js .hero__media img{transform:scale(1)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(23,17,13,.94) 0%,rgba(23,17,13,.62) 36%,rgba(23,17,13,.12) 64%,rgba(23,17,13,.5) 100%);
}
.hero__inner{
  width:100%;
  padding:calc(var(--header-h) + 3rem) var(--gutter) calc(2.2rem + var(--bar-h) + env(safe-area-inset-bottom));
  opacity:calc(1 - var(--hp,0) * 1.7);
  transform:translate3d(0,calc(var(--hp,0) * -10vh),0);
}
.hero__eyebrow{color:var(--ocra)}
.hero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(4rem,21.5vw,13rem);line-height:.86;letter-spacing:-.045em;
  margin:1rem 0 1.4rem;
}
.hero__title .l1{display:block}
.hero__title em{display:block;color:var(--ocra);padding-left:.28em}
.hero__title .ch{transition-duration:1.3s}
.is-ready .hero__title .ch{transform:none}
.hero__lead{font:italic 400 clamp(1.1rem,4.6vw,1.5rem)/1.45 var(--serif);color:rgba(244,236,221,.88);max-width:30ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.hero__ctas .btn{flex:1 1 10rem}
.badge.hero__badge{display:none} /* .badge (más abajo) la volvía a mostrar en móvil */
.js .hi{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
.is-ready .hi{opacity:1;transform:none}

/* Insignia circular giratoria (texto en SVG) */
.badge{position:relative;width:9.5rem;aspect-ratio:1;display:grid;place-items:center}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.badge text{font:500 12.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;fill:currentColor}
.badge__c{font:italic 400 2.3rem/1 var(--serif);text-align:center}
.badge__c small{display:block;font:500 .56rem/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin-top:.3rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Todo lo que va por encima de la foto fija */
.above{position:relative;z-index:1}

/* ==========================================================================
   Cinta marquee
   ========================================================================== */
.marquee{background:var(--ocra);color:var(--ink);overflow:hidden;padding:1.05rem 0 1.2rem;border-block:1px solid rgba(42,26,18,.18)}
.marquee__track{display:flex;width:max-content;will-change:transform;animation:marquee 38s linear infinite}
.js .marquee__track{animation:none}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__item{font:italic 400 clamp(2.1rem,9.5vw,5rem)/1.05 var(--serif);letter-spacing:-.02em;padding-inline:.42em;white-space:nowrap}
.marquee__item.is-up{font:500 clamp(.9rem,3.4vw,1.4rem)/1 var(--sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase}
.marquee__sep{width:.55rem;height:.55rem;border-radius:50%;background:var(--pomodoro);flex:none}
.marquee__sep:nth-of-type(2n){background:var(--basilico)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   01 · La casa (manifiesto + pizza que gira)
   ========================================================================== */
.casa{position:relative;background:var(--paper);padding-block:clamp(3rem,10vw,9rem) var(--sec-pad);overflow:hidden}
.casa__disc{
  width:84vw;max-width:680px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin:0 calc(var(--gutter) * -1 - 26vw) 2.5rem auto;
  box-shadow:0 40px 70px -30px rgba(42,26,18,.55);
  transform:rotate(var(--rot,0deg));will-change:transform;
}
.casa__disc img{width:100%;height:100%;object-fit:cover;transform:scale(1.16)}
.casa__text{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,7.6vw,3.7rem);line-height:1.12;letter-spacing:-.02em;
  margin-top:1.6rem;max-width:17em;
}
.casa__text em{color:var(--pomodoro)}
.js .casa__text .word{opacity:.14;transition:opacity .45s}
.js .casa__text .word.on{opacity:1}
.casa__sign{margin-top:1.8rem;font:italic 400 1.15rem/1.4 var(--serif);color:var(--ink-soft)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);max-width:40rem}
.stat__num{font:400 clamp(2.3rem,11vw,4.4rem)/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;font-variation-settings:"opsz" 24;font-variant-numeric:lining-nums tabular-nums}
.stat__num sup{font-size:.45em;vertical-align:top;margin-left:.05em}
.stat__lbl{font:500 .64rem/1.35 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.55rem}

/* ==========================================================================
   02 · Especialidades (carrusel en móvil, scroll horizontal fijado en escritorio)
   ========================================================================== */
.spec{background:var(--notte);color:var(--paper);padding-top:var(--sec-pad);padding-bottom:clamp(3rem,9vw,6rem)}
.spec .kicker{color:var(--ocra)}
.spec .h2 em{color:var(--ocra)}
.spec__head{display:grid;gap:1.4rem}
.spec__head .lead{color:rgba(244,236,221,.72)}
.hs__track{
  display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:2.6rem var(--gutter) 1.8rem;scrollbar-width:none;
}
.hs__track::-webkit-scrollbar{display:none}
.card{flex:0 0 80%;max-width:380px;scroll-snap-align:start}
.card__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:#2A2019}
.card__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.14) translate3d(var(--px,0),0,0);transition:transform 1.4s var(--ease)}
.card__no{position:absolute;top:1rem;left:1rem;font:italic 400 1.05rem/1 var(--serif);color:var(--paper);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.card__price{
  position:absolute;right:1rem;bottom:1rem;width:4.6rem;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--ocra);color:var(--ink);
  font:500 1.1rem/1 var(--serif);transform:rotate(-10deg);transition:transform .8s var(--ease);
}
.card__body{padding-top:1.2rem}
.card__cat{font:500 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ocra)}
.card__name{font:italic 400 clamp(1.9rem,7.6vw,2.5rem)/1 var(--serif);letter-spacing:-.02em;margin-top:.55rem}
.card__desc{color:rgba(244,236,221,.7);font-size:.95rem;line-height:1.55;margin-top:.55rem;max-width:32ch}
.hs__foot{display:flex;align-items:center;gap:1.2rem;padding-inline:var(--gutter)}
.hs__bar{position:relative;flex:1;height:1px;background:var(--line-light);overflow:hidden}
.hs__bar::after{content:"";position:absolute;inset:0;background:var(--ocra);transform-origin:0 50%;transform:scaleX(var(--prog,.16))}
.hs__count{font:italic 400 1rem/1 var(--serif);white-space:nowrap}
@media (hover:hover){
  .card:hover .card__media img{transform:scale(1.2) translate3d(var(--px,0),0,0)}
  .card:hover .card__price{transform:rotate(8deg) scale(1.06)}
}

/* ==========================================================================
   03 · Oferta
   ========================================================================== */
.offer{position:relative;background:var(--pomodoro);color:var(--paper);padding-block:var(--sec-pad);overflow:hidden}
.offer .kicker{color:var(--paper)}
.offer .h2 em{color:var(--ocra)}
.offer__grid{display:grid;gap:3rem}
.offer__fig{position:relative;max-width:34rem;width:100%;margin-inline:auto}
.offer__media{aspect-ratio:1;border-radius:50%;overflow:hidden}
.js .offer__media{clip-path:circle(10% at 50% 50%);transition:clip-path 1.8s var(--ease-io)}
.js .offer__media.is-in{clip-path:circle(71% at 50% 50%)}
.offer__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);transition:transform 2.2s var(--ease)}
.offer__media.is-in img{transform:scale(1)}
.offer__sticker{position:absolute;right:-.4rem;top:-.6rem;color:var(--ink)}
.offer__sticker.badge{width:8.2rem;background:var(--ocra);border-radius:50%}
.offer__sticker svg{animation-duration:16s}
.offer__sticker .badge__c{font-size:2.6rem}
.offer__text .lead{color:rgba(244,236,221,.88);margin-top:1.4rem}
.offer__rules{margin-top:1.6rem;display:grid;gap:.5rem;font-size:.95rem;color:rgba(244,236,221,.85)}
.offer__rules li{display:flex;gap:.7rem}
.offer__rules li::before{content:"";width:.9rem;height:1px;background:currentColor;margin-top:.8em;flex:none}
.offer__code{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:1.8rem;padding:.9rem 1.2rem;border:1px dashed rgba(244,236,221,.6);font:500 .74rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.offer__code b{font:italic 400 1.35rem/1 var(--serif);letter-spacing:.04em;text-transform:none}
.offer__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.offer__ctas .btn{flex:1 1 12rem}

/* ==========================================================================
   04 · Carta
   ========================================================================== */
.carta{background:var(--paper);padding-top:var(--sec-pad);padding-bottom:clamp(3rem,10vw,6rem)}
.carta__head{display:grid;gap:1.4rem}
.carta__tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:.6rem}

.tabs{
  position:sticky;top:var(--header-h);z-index:20;
  margin-top:2.6rem;background:var(--paper);border-block:1px solid var(--line);
}
.tabs__list{
  position:relative;display:flex;overflow-x:auto;scrollbar-width:none;
  padding-inline:calc(var(--gutter) - 1rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.2rem,#000 calc(100% - 2.4rem),transparent);
          mask-image:linear-gradient(90deg,transparent 0,#000 1.2rem,#000 calc(100% - 2.4rem),transparent);
}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__list a{
  flex:none;display:flex;align-items:center;min-height:54px;padding:0 1rem;
  font:500 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  transition:color .4s;
}
.tabs__list a.is-active{color:var(--ink)}
.tabs__ind{position:absolute;left:0;bottom:0;height:2px;width:var(--iw,0);background:var(--pomodoro);transform:translate3d(var(--ix,0),0,0);transition:transform .6s var(--ease),width .6s var(--ease)}

.cat{padding-top:3.4rem;scroll-margin-top:calc(var(--header-h) + 56px)}
.cat__banner{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.cat__banner img{width:100%;height:100%;object-fit:cover}
.cat__title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.4rem;
  font:italic 400 clamp(3.2rem,15vw,6.5rem)/.9 var(--serif);letter-spacing:-.035em}
.cat__title small{font:500 .7rem/1 var(--sans);font-style:normal;letter-spacing:.22em;color:var(--pomodoro)}
.cat__note{margin-top:.8rem;color:var(--ink-soft);font-size:.95rem;max-width:40ch}

.dishes{margin-top:1.2rem}
.dish{padding:1.15rem 0 1.2rem;border-bottom:1px solid var(--line)}
.dish__head{display:flex;align-items:baseline;gap:.7rem}
.dish__name{font:400 1.38rem/1.2 var(--serif);letter-spacing:-.01em;transition:color .4s}
.dish__name i{font-size:.8em;color:var(--ink-soft)}
.dish__dots{flex:1 1 1rem;min-width:1rem;border-bottom:1px dotted rgba(42,26,18,.38);transform:translateY(-.3em)}
.dish__price{font:500 1.02rem/1 var(--sans);white-space:nowrap}
.dish__desc{margin-top:.35rem;color:var(--ink-soft);font-size:.95rem;line-height:1.55;max-width:50ch}
.dish__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .4rem;margin-top:.65rem}
.alg{
  display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .3rem;border-radius:99px;
  border:1px solid rgba(42,26,18,.3);font:500 .58rem/1 var(--sans);letter-spacing:.04em;color:var(--ink-soft);cursor:help;
  text-decoration:none;
}
.tag{font:500 .6rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:.42rem .6rem;border-radius:99px;background:rgba(47,93,58,.12);color:var(--basilico)}
.tag--hot{background:rgba(179,54,31,.1);color:var(--pomodoro)}
.tag--new{background:var(--ocra);color:var(--ink)}
@media (hover:hover){.dish:hover .dish__name{color:var(--pomodoro)}}

.drinks{display:grid;grid-template-columns:1fr;gap:0 2.5rem;margin-top:1.2rem}
.drinks li{display:flex;align-items:baseline;gap:.7rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.drinks span:first-child{font:400 1.15rem/1.2 var(--serif)}

.legend{margin-top:3.2rem;border:1px solid var(--line)}
.legend summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:0 1.2rem;cursor:pointer;
  font:500 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;list-style:none;
}
.legend summary::-webkit-details-marker{display:none}
.legend summary::after{content:"+";font:300 1.6rem/1 var(--sans);transition:transform .4s var(--ease)}
.legend[open] summary::after{transform:rotate(45deg)}
.legend ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem;padding:.4rem 1.2rem 1.4rem}
.legend li{display:flex;align-items:center;gap:.6rem;font-size:.9rem}
.legend p{padding:0 1.2rem 1.4rem;color:var(--ink-soft);font-size:.88rem}

.order{margin-top:3.4rem;background:var(--ink);color:var(--paper);padding:2.4rem clamp(1.4rem,5vw,3.4rem);display:grid;gap:1.4rem;position:relative;overflow:hidden}
.order__title{font:400 clamp(2rem,8vw,3.4rem)/1 var(--serif);letter-spacing:-.02em}
.order__title em{color:var(--ocra)}
.order p{color:rgba(244,236,221,.75);max-width:44ch}
.order__ctas{display:flex;flex-wrap:wrap;gap:.7rem}
.order__ctas .btn{flex:1 1 12rem}

/* ==========================================================================
   Ventana: la foto queda fija y la sección hace de "ventana" (funciona en iOS,
   a diferencia de background-attachment: fixed)
   ========================================================================== */
.window{position:relative;height:88vh;height:88svh;clip-path:inset(0 0 0 0);color:var(--paper);display:grid;place-items:center;text-align:center}
.window__img{position:fixed;inset:0;z-index:-1}
.window__img img,.window__img picture{width:100%;height:100%}
.window__img img{object-fit:cover}
.window::before{content:"";position:absolute;inset:0;background:rgba(23,17,13,.38)}
.window__txt{position:relative;padding-inline:var(--gutter)}
.window__big{font:400 clamp(4rem,21vw,14rem)/.85 var(--serif);letter-spacing:-.045em}
.window__big em{display:block;color:var(--ocra)}
.window__small{margin-top:1.4rem;font:500 .74rem/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase}

/* ==========================================================================
   05 · Historia
   ========================================================================== */
.storia{position:relative;background:var(--paper-2);padding-block:var(--sec-pad);overflow:hidden}
.ribbon{position:absolute;left:-5%;width:110%;top:1.2rem;height:auto;pointer-events:none}
.ribbon path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--sp,0))}
.storia__grid{display:grid;gap:2.6rem;position:relative}
.storia__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.storia__media > div{position:absolute;inset:-9% 0;will-change:transform}
.storia__media img{width:100%;height:100%;object-fit:cover}
.storia__tag{position:absolute;left:1rem;bottom:1rem;z-index:1;background:var(--paper);color:var(--ink);padding:.6rem .9rem;font:500 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.storia__body p{margin-top:1.1rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.7;max-width:48ch}
.storia__body p.lead{font-size:clamp(1.2rem,4.8vw,1.55rem);color:var(--ink);margin-top:1.6rem}
.storia__sign{margin-top:1.8rem;font:italic 400 1.6rem/1 var(--serif);color:var(--pomodoro)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.facts dt{font:500 .64rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.facts dd{font:400 1.3rem/1.25 var(--serif);margin-top:.35rem}

/* ==========================================================================
   06 · Galería
   ========================================================================== */
.gal{background:var(--notte);color:var(--paper);padding-block:var(--sec-pad)}
.gal .kicker{color:var(--ocra)}
.gal .h2 em{color:var(--ocra)}
.gal__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem}
.gal__grid{columns:2;column-gap:.6rem;margin-top:2.8rem}
.gal__item{display:block;position:relative;overflow:hidden;margin-bottom:.6rem;break-inside:avoid;background:#2A2019}
.gal__item > div{will-change:transform}
.gal__item img{width:100%;transition:transform 1.4s var(--ease),filter .8s}
.gal__item figcaption{position:absolute;left:.8rem;bottom:.7rem;font:italic 400 1rem/1.2 var(--serif);text-shadow:0 1px 14px rgba(0,0,0,.6)}
@media (hover:hover){.gal__item:hover img{transform:scale(1.06)}}

.lb{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:transparent;color:var(--paper)}
.lb::backdrop{background:rgba(23,17,13,.95)}
.lb[open]{display:grid;grid-template-rows:auto 1fr auto;animation:fade-in .4s forwards;opacity:0}
.lb__bar{display:flex;justify-content:space-between;align-items:center;padding:calc(.6rem + env(safe-area-inset-top)) var(--gutter) .6rem}
.lb__count{font:italic 400 1.05rem/1 var(--serif)}
.lb__fig{display:grid;place-items:center;min-height:0;padding:0 var(--gutter)}
.lb__fig img{max-height:100%;max-width:100%;width:auto;object-fit:contain;animation:lb-in .6s var(--ease)}
.lb__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem var(--gutter) calc(1rem + env(safe-area-inset-bottom))}
.lb__cap{font:italic 400 1.1rem/1.3 var(--serif);text-align:center}
.icon-btn{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-light);border-radius:50%;flex:none;transition:background .4s,color .4s}
@media (hover:hover){.icon-btn:hover{background:var(--paper);color:var(--ink)}}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ==========================================================================
   07 · Reseñas
   ========================================================================== */
.rev{background:var(--paper);padding-top:var(--sec-pad);padding-bottom:clamp(3.5rem,10vw,7rem)}
.rev__head{display:grid;gap:2rem}
.rev__score{display:flex;align-items:flex-end;gap:1.2rem}
/* Corte óptico pequeño: a tamaño display los trazos finos de Bodoni casi desaparecen
   y el palo del 4 parecía una línea suelta */
.rev__num{font:400 clamp(5.5rem,27vw,11rem)/.8 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 24;font-variant-numeric:lining-nums}
.rev__meta{padding-bottom:.4rem}
.stars{display:flex;gap:3px;color:var(--ocra)}
.stars svg{width:18px;height:18px;fill:currentColor;stroke:none}
.rev__meta p{font-size:.92rem;color:var(--ink-soft);margin-top:.5rem;line-height:1.4}
.rev__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:2.4rem var(--gutter) 1.4rem;scrollbar-width:none}
.rev__track::-webkit-scrollbar{display:none}
.review{flex:0 0 86%;max-width:440px;scroll-snap-align:start;display:flex;flex-direction:column;gap:1.4rem;padding:1.8rem 1.5rem 1.5rem;background:var(--paper-2);border:1px solid var(--line)}
.review blockquote{font:italic 400 1.28rem/1.45 var(--serif);flex:1}
.review blockquote::before{content:"\201C";display:block;font:400 3.8rem/.6 var(--serif);color:var(--pomodoro);margin-bottom:.4rem;height:1.6rem}
.review footer{display:flex;align-items:center;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.review__av{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--ocra);font:italic 400 1.2rem/1 var(--serif);flex:none}
.review__who{font-weight:500;font-size:.95rem;line-height:1.3}
.review__who small{display:block;font-weight:400;color:var(--ink-soft);font-size:.8rem}
.review .stars{margin-left:auto}
.review .stars svg{width:13px;height:13px}
.rev__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-inline:var(--gutter)}
.rev__nav{display:flex;gap:.6rem}
.rev__nav .icon-btn{border-color:var(--line)}
@media (hover:hover){.rev__nav .icon-btn:hover{background:var(--ink);color:var(--paper)}}
.demo-note{font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}

/* ==========================================================================
   08 · Dónde estamos
   ========================================================================== */
.dove{background:var(--ocra);color:var(--ink);padding-block:var(--sec-pad)}
.dove .kicker{color:var(--ink)}
.dove__grid{display:grid;gap:3rem;margin-top:2.6rem}
.dove__addr{font:400 clamp(1.6rem,6.6vw,2.4rem)/1.2 var(--serif);letter-spacing:-.01em}
.dove__links{margin-top:1.8rem;border-top:1px solid rgba(42,26,18,.3)}
.dove__links a{display:flex;align-items:center;gap:1rem;min-height:60px;border-bottom:1px solid rgba(42,26,18,.3);font-size:1.02rem}
.dove__links a > span{flex:1}
.dove__links a small{display:block;font:500 .62rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.dove__links .ico:last-child{transition:transform .5s var(--ease)}
@media (hover:hover){.dove__links a:hover .ico:last-child{transform:translate(3px,-3px)}}
.hours{margin-top:2.4rem}
.hours h3{font:500 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin-bottom:.6rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px solid rgba(42,26,18,.22);font-size:.96rem}
.hours dt{display:flex;align-items:center;gap:.6rem}
.hours dd{text-align:right;font-variant-numeric:tabular-nums}
.hours .is-today{font-weight:500}
.hours .is-today dt::after{content:"hoy";font:500 .58rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:var(--ink);color:var(--ocra);padding:.3rem .45rem;border-radius:99px}

.map{position:relative;aspect-ratio:4/5;background:var(--ink);color:var(--paper);overflow:hidden}
.map svg.map__streets{position:absolute;inset:0;width:100%;height:100%}
.map__streets path{fill:none;stroke:var(--ocra);stroke-opacity:.22}
.map__streets .big{stroke-opacity:.4;stroke-width:6}
.map__pin{position:absolute;left:52%;top:46%;transform:translate(-50%,-100%);display:grid;justify-items:center;gap:.4rem}
.map__pin i{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--pomodoro);box-shadow:0 0 0 .5rem rgba(179,54,31,.3),0 0 0 1.1rem rgba(179,54,31,.14)}
.map__pin span{font:italic 400 1.1rem/1 var(--serif);background:var(--paper);color:var(--ink);padding:.45rem .7rem;white-space:nowrap}
.map__load{position:absolute;left:1rem;right:1rem;bottom:1rem;display:grid;gap:.6rem;justify-items:start}
.map__load p{font-size:.8rem;color:rgba(244,236,221,.7)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==========================================================================
   Pie
   ========================================================================== */
.ftr{position:relative;z-index:1;background:var(--marrone);color:var(--paper);padding-top:clamp(4rem,11vw,7rem);padding-bottom:calc(var(--bar-h) + 1.4rem + env(safe-area-inset-bottom));overflow:hidden}
.ftr__grid{display:grid;gap:2.4rem}
.ftr h3{font:500 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ocra);margin-bottom:1rem}
.ftr__claim{font:italic 400 clamp(1.6rem,6vw,2.2rem)/1.2 var(--serif);max-width:18ch}
.ftr li a,.ftr li span{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:rgba(244,236,221,.82)}
.ftr__bottom a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.ftr li a:hover{color:var(--ocra)}}
.ftr__mega{
  margin-top:clamp(3rem,9vw,6rem);
  font:italic 400 27.5vw/.78 var(--serif);letter-spacing:-.055em;white-space:nowrap;color:var(--ocra);
  margin-left:-.04em;
}
.ftr__flag{display:flex;height:4px;margin-top:1.4rem}
.ftr__flag i{flex:1}
.ftr__flag i:nth-child(1){background:var(--basilico)}
.ftr__flag i:nth-child(2){background:var(--paper)}
.ftr__flag i:nth-child(3){background:var(--pomodoro)}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;justify-content:space-between;align-items:center;margin-top:1.2rem;font-size:.82rem;color:rgba(244,236,221,.62)}
.ftr__bottom ul{display:flex;flex-wrap:wrap;gap:0 1.2rem}
.ftr__demo{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;padding:.55rem .9rem;border:1px solid var(--line-light);font:500 .66rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,236,221,.8)}

/* ==========================================================================
   Burbujas de contacto (solo por debajo de md)
   ========================================================================== */
.fab{
  position:fixed;z-index:50;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:flex-end;
  opacity:0;transform:translate3d(0,24px,0);pointer-events:none;
  transition:opacity .6s var(--ease) .6s,transform .9s var(--ease) .6s;
}
/* Aparecen al empezar a bajar: en la portada ya están sus botones y en móviles bajos los tapaban */
.is-ready.fab-on .fab{opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
html:not(.js) .fab{display:none}
.fab__btn{
  position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  box-shadow:0 12px 26px -12px rgba(23,17,13,.7),inset 0 0 0 1px rgba(244,236,221,.14);
  transition:transform .5s var(--ease);
}
.fab__btn--tel{background:var(--ocra);color:var(--ink);box-shadow:0 12px 26px -12px rgba(23,17,13,.7),inset 0 0 0 1px rgba(42,26,18,.12)}
.fab__btn:active{transform:scale(.92)}
.fab__btn .ico{grid-area:1/1;width:22px;height:22px;transition:opacity .35s,transform .6s var(--ease)}
.fab__x{opacity:0;transform:rotate(-90deg) scale(.5)}
.fab__btn[aria-expanded="true"] .fab__i{opacity:0;transform:rotate(90deg) scale(.5)}
.fab__btn[aria-expanded="true"] .fab__x{opacity:1;transform:none}

.fab__pop{
  position:absolute;right:0;bottom:calc(100% + 12px);width:min(19.5rem,calc(100vw - 32px));
  padding:1.2rem 1.1rem 1.1rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 26px 50px -22px rgba(23,17,13,.6);
  transform-origin:calc(100% - 27px) 100%;
  opacity:0;visibility:hidden;transform:translate3d(0,10px,0) scale(.88);
  transition:opacity .3s var(--ease),transform .55s var(--ease),visibility 0s .55s;
}
.fab__pop--map{transform-origin:calc(100% - 91px) 100%}
.fab__pop.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .55s var(--ease),visibility 0s}
.fab__k{display:flex;align-items:center;gap:.7em;margin-bottom:.9rem;font:500 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pomodoro)}
.fab__k::before{content:"";width:1.6rem;height:1px;background:currentColor}
.fab__opt{display:flex;align-items:center;gap:.9rem;min-height:58px;padding:0 1rem;margin-top:.5rem;background:var(--ink);color:var(--paper)}
.fab__opt span{display:flex;flex-direction:column;font:500 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.fab__opt small{margin-top:.2rem;font:italic 400 1rem/1.2 var(--serif);letter-spacing:0;text-transform:none;opacity:.85}
.fab__opt--wa{background:var(--basilico)}
.fab__opt--map{background:var(--ocra);color:var(--ink)}
.fab__addr{font:400 1.4rem/1.2 var(--serif);letter-spacing:-.01em}
.fab__hours{margin:.8rem 0 .7rem;font-size:.86rem}
.fab__hours div{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid var(--line)}
.fab__hours dd{color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:right}
.fab__hours .is-today{font-weight:500}
.fab__hours .is-today dd{color:var(--ink)}
.fab__hours .is-today dt::after{content:" · hoy";color:var(--pomodoro)}

/* ==========================================================================
   Tablet ≥ 768
   ========================================================================== */
@media (min-width:768px){
  :root{--header-h:76px}
  .fab{display:none}
  .ftr{padding-bottom:2rem}
  .hero__inner{padding-bottom:3.4rem}
  .hero__ctas .btn{flex:0 0 auto}
  .badge.hero__badge{display:grid;position:absolute;right:var(--gutter);top:calc(var(--header-h) + 2.4rem);color:var(--paper)}
  .hdr__call{display:inline-flex;min-height:44px;padding:0 1.2rem;font-size:.72rem}

  .casa__disc{position:absolute;right:-22vw;top:clamp(3rem,8vw,7rem);width:62vw;margin:0}
  .casa__inner{position:relative;max-width:64%}

  .card{flex-basis:44%}
  .spec__head{grid-template-columns:1fr auto;align-items:end}
  .spec__head .lead{max-width:26ch}

  .offer__ctas .btn{flex:0 0 auto}

  .dishes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.6rem}
  .drinks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legend ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .order{grid-template-columns:1fr auto;align-items:end}
  .order__ctas .btn{flex:0 0 auto}

  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gal__grid{columns:3;column-gap:1rem}
  .gal__item{margin-bottom:1rem}
  .review{flex-basis:46%}
  .rev__head{grid-template-columns:auto 1fr;align-items:end;column-gap:4rem}
  /* Comparte fila con la nota: a 12,5vw "Opiniones" no cabía en su columna en tablet */
  .rev__head .h2{font-size:clamp(2.7rem,6.6vw,7rem)}
  .dove__grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .map{aspect-ratio:4/5;position:sticky;top:calc(var(--header-h) + 1.5rem)}
  .ftr__grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* ==========================================================================
   Escritorio ≥ 1024
   ========================================================================== */
@media (min-width:1024px){
  .nav{display:flex;gap:2.2rem;position:absolute;left:50%;transform:translateX(-50%)}
  .nav a{position:relative;display:flex;align-items:center;min-height:44px;font:500 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease)}
  .nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:0 50%}
  .burger{display:none}
  .nav{gap:1.6rem}
  .hdr__panel{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:44px;min-height:44px;padding:0 .3rem;font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.85;transition:opacity .3s}
  .hdr__panel .ico{width:17px;height:17px}
  .hdr__panel span{display:none}
  .hdr__panel:hover{opacity:1}

  .casa__inner{max-width:58%}
  .casa__disc{right:-10vw;width:48vw;top:50%;margin-top:-24vw}

  .hs--pinned .hs{height:var(--hs-h,300vh)}
  .hs--pinned .hs__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--header-h)}
  .hs--pinned .hs__track{overflow:visible;scroll-snap-type:none;transform:translate3d(var(--hs-x,0),0,0);will-change:transform;padding-top:1.6rem;padding-bottom:1.2rem}
  .hs--pinned .card{flex:0 0 auto;width:clamp(230px,calc((100vh - 480px) * .75),380px);max-width:none}
  .hs--pinned .spec .h2{font-size:clamp(2.6rem,5.4vw,5rem);margin-top:.8rem}
  .hs--pinned .spec{padding-top:0}
  .hs--pinned .spec__head{padding-top:0}
  .card__desc{max-width:30ch}

  .offer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:5rem}

  .carta__head{grid-template-columns:1fr auto;align-items:end}
  .cat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4.5rem;align-items:start;padding-top:5rem}
  .cat__aside{position:sticky;top:calc(var(--header-h) + 90px)}
  .cat__banner{aspect-ratio:4/3}
  .dishes{margin-top:0}

  .storia__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:5rem;align-items:center}
  .rev__track{padding-inline:var(--gutter)}
  .review{flex-basis:32%}
  .dove__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:5rem}
  .map{aspect-ratio:1}
  .ftr__grid{grid-template-columns:2fr 1fr 1fr 1fr}
}

@media (min-width:1280px){
  .card__name{font-size:2.6rem}
  .nav{gap:2.2rem}
  .hdr__panel span{display:inline}

  .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);align-items:end;column-gap:4rem}
  .hero__inner > .hero__eyebrow,.hero__inner > .hero__title{grid-column:1}
  .hero__aside{grid-column:2;grid-row:1 / span 2;padding-bottom:1.6rem}
  /* "Italiana" con su sangría mide ~3,35 em: el título se ajusta a su columna */
  .hero__title{margin-bottom:0;font-size:min(13rem,calc((100vw - 2 * var(--gutter) - 29rem) / 3.5))}
}

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal],.js .hi{opacity:1!important;transform:none!important;clip-path:none!important}
  .js [data-reveal] img{transform:none!important}
  .js [data-reveal] > *{clip-path:none!important}
  .ch{transform:none!important}
  .js .casa__text .word{opacity:1}
  .js .offer__media{clip-path:none}
  .marquee__track{animation:none}
}