/* =============================================================================
   CHÁCHARA · Argumosa 39, Lavapiés (Madrid)
   Web estática. Sin build, sin npm, sin librerías externas.
   1. Fuentes de marca      5. Componentes
   2. Tokens                6. Secciones
   3. Reset y base          7. Efectos
   4. Utilidades            8. Responsive   9. Reduced-motion
   ========================================================================== */

/* =============================================================
   1. FUENTES DE MARCA (auto-alojadas en assets/fonts/)
   ============================================================= */
@font-face{
  font-family:"Chachara Display";
  src:url("assets/fonts/chachara-display.woff") format("woff"),
      url("assets/fonts/chachara-display.otf") format("opentype");
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Chachara Sans";
  src:url("assets/fonts/chachara-sans.woff") format("woff"),
      url("assets/fonts/chachara-sans.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Chachara Mono";
  src:url("assets/fonts/chachara-mono.woff") format("woff"),
      url("assets/fonts/chachara-mono.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

/* =============================================================
   2. TOKENS
   ============================================================= */
:root{
  /* Paleta oficial Cháchara */
  --verde:#173323;
  --verde-900:#0e2118;
  --verde-800:#122a1d;
  --naranja:#e55a29;
  --naranja-soft:#f07a4f;
  --marfil:#f6f2e6;
  --amarillo:#fff2bd;
  --oliva:#ac9a4e;

  /* Semánticos */
  --bg:var(--verde);
  --text:var(--marfil);
  --accent:var(--naranja);

  /* Tipografía */
  --display:"Chachara Display","Avenir Next","Arial Black",Impact,sans-serif;
  --sans:"Chachara Sans","Neue Haas Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Chachara Mono",ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;
  --serif:"Bodoni Moda","Playfair Display","Didot",Georgia,"Times New Roman",serif;

  /* Ritmo */
  --gutter:clamp(1.15rem,4.5vw,4.5rem);
  --nav-h:74px;
  --maxw:1440px;

  /* Easings */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in:cubic-bezier(0.7,0,0.84,0);
  --ease-soft:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
}

/* =============================================================
   3. RESET Y BASE
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{
  -webkit-text-size-adjust:100%;tab-size:2;
  overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  font-family:var(--sans);font-size:16px;line-height:1.62;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;overscroll-behavior-y:none;
}
img,svg,video,canvas,iframe{display:block;max-width:100%}
/* Sin esto, cualquier <svg> se pinta de NEGRO por defecto y se salta
   el color de marca. Nunca debe quitarse. */
svg{fill:currentColor}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.02;letter-spacing:-.02em;font-weight:400}
::selection{background:var(--naranja);color:var(--marfil)}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:3px}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* =============================================================
   4. UTILIDADES
   ============================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-120px;left:1rem;z-index:9999;padding:.7rem 1.1rem;background:var(--marfil);color:var(--verde);border-radius:6px;font-family:var(--mono);font-size:.78rem;transition:top .25s var(--ease-out)}
.skip-link:focus{top:1rem}

.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}

.kicker{
  font-family:var(--mono);font-size:clamp(.66rem,1.6vw,.76rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--naranja);
  line-height:1.7;margin-bottom:1.4rem;
}
.kicker span{color:var(--oliva)}
.kicker-dark{color:var(--naranja)}

.h-display{
  font-family:var(--display);
  font-size:clamp(2.15rem,6.4vw,5.1rem);
  line-height:.95;letter-spacing:-.028em;text-transform:none;
  max-width:16ch;
}
.h-display em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--naranja);text-transform:none}
.h-dark{color:var(--verde)}
.h-dark em{color:var(--naranja)}

.lead{font-size:clamp(1.02rem,1.9vw,1.28rem);line-height:1.55;max-width:46ch;color:color-mix(in srgb,var(--marfil) 88%,transparent);margin-top:1.6rem}
.lead-dark{color:color-mix(in srgb,var(--verde) 82%,transparent)}
.body{font-size:1rem;line-height:1.72;max-width:52ch;color:color-mix(in srgb,var(--marfil) 68%,transparent);margin-top:1.1rem}
.dim{color:color-mix(in srgb,var(--marfil) 55%,transparent)}

/* Ilustraciones de marca */
.ilu{position:absolute;pointer-events:none;user-select:none;opacity:.55}

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1.02rem 1.5rem;border-radius:999px;
  transition:transform .45s var(--ease-out),background .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .45s var(--ease-out);
  will-change:transform;
}
.btn-solid{background:var(--naranja);color:var(--marfil);box-shadow:0 0 0 0 rgba(229,90,41,.5)}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(229,90,41,.9)}
.btn-ghost{border:1px solid color-mix(in srgb,var(--marfil) 34%,transparent);color:var(--marfil)}
.btn-ghost:hover{border-color:var(--marfil);background:color-mix(in srgb,var(--marfil) 8%,transparent)}
.btn-arrow b{display:inline-block;transition:transform .45s var(--ease-out)}
.btn-arrow:hover b{transform:translateX(6px)}

/* --- Nav --- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;gap:1.2rem;
  padding:0 var(--gutter);
  transition:background .5s var(--ease-out),backdrop-filter .5s var(--ease-out),border-color .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:color-mix(in srgb,var(--verde-900) 88%,transparent);border-bottom-color:color-mix(in srgb,var(--marfil) 12%,transparent)}
@supports (backdrop-filter:blur(14px)){
  .nav.is-stuck{background:color-mix(in srgb,var(--verde-900) 72%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
}
.nav-logo{display:flex;align-items:center;gap:.7rem;color:var(--naranja);margin-right:auto}
.mark-cha{width:26px;height:auto;color:var(--naranja)}
.nav-logo-word{display:none;color:var(--marfil)}
.mark-wm{width:118px;height:auto;color:var(--marfil)}

.nav-links{display:none;gap:1.15rem;align-items:center}
.nav-links a{
  position:relative;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--marfil) 74%,transparent);transition:color .3s var(--ease-out);
  display:inline-flex;align-items:baseline;gap:.42rem;padding:.3rem 0;
}
.nav-links a i{font-style:normal;font-size:.58rem;color:var(--naranja);opacity:.75}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--naranja);transition:right .45s var(--ease-out)}
.nav-links a:hover{color:var(--marfil)}
.nav-links a:hover::after{right:0}
.nav-links a.is-active{color:var(--marfil)}
.nav-links a.is-active::after{right:0}

.nav-cta{display:none;padding:.72rem 1.15rem;font-size:.68rem}

.burger{width:42px;height:42px;display:grid;place-content:center;gap:6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--marfil) 22%,transparent)}
.burger span{display:block;width:17px;height:1.5px;background:var(--marfil);transition:transform .45s var(--ease-out),opacity .25s var(--ease-out)}
.nav.is-open .burger span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* Menú móvil desplegado */
.nav.is-open{background:var(--verde-900)}
.nav.is-open .nav-links{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  position:fixed;left:0;right:0;top:var(--nav-h);
  padding:1.6rem var(--gutter) 2.2rem;
  background:var(--verde-900);
  border-bottom:1px solid color-mix(in srgb,var(--marfil) 12%,transparent);
}
.nav.is-open .nav-links a{font-size:1.05rem;letter-spacing:.02em;padding:.72rem 0;width:100%;border-bottom:1px solid color-mix(in srgb,var(--marfil) 8%,transparent)}
.nav.is-open .nav-links a i{font-size:.62rem}

/* --- Cursor personalizado --- */
.cursor{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);mix-blend-mode:normal}
.cursor.is-ready{opacity:1}
.cursor-ring,.cursor-dot{position:absolute;top:0;left:0;border-radius:999px;transform:translate3d(-100px,-100px,0)}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid color-mix(in srgb,var(--marfil) 55%,transparent);
  display:grid;place-content:center;
  transition:width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),background .4s var(--ease-out),border-color .4s var(--ease-out);
}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--naranja)}
.cursor-label{font-family:var(--mono);font-size:.53rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marfil);opacity:0;transition:opacity .25s var(--ease-out);white-space:nowrap}
.cursor.is-hot .cursor-ring{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--naranja);border-color:var(--naranja)}
.cursor.is-hot .cursor-label{opacity:1}
.cursor.is-hot .cursor-dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* =============================================================
   6. SECCIONES
   ============================================================= */

/* --- Splash --- */
.splash{
  position:fixed;inset:0;z-index:300;background:var(--verde-900);
  display:grid;place-content:center;justify-items:center;gap:1.6rem;
  padding:var(--gutter);
  animation:splashSafety .01s 4.5s forwards;   /* red de seguridad CSS */
}
.splash-inner{display:grid;justify-items:center;gap:1.5rem;width:min(560px,80vw)}
.splash-mark{width:100%;color:var(--naranja)}
.splash-mark svg{width:100%;height:auto}
.splash-mark .wm-l{opacity:0;transform:translateY(26px) rotate(-4deg);transform-origin:50% 100%;transform-box:fill-box;animation:letterIn .82s var(--ease-bounce) forwards}
.splash-mark .wm-l:nth-child(1){animation-delay:.06s}
.splash-mark .wm-l:nth-child(2){animation-delay:.14s}
.splash-mark .wm-l:nth-child(3){animation-delay:.22s}
.splash-mark .wm-l:nth-child(4){animation-delay:.30s}
.splash-mark .wm-l:nth-child(5){animation-delay:.38s}
.splash-mark .wm-l:nth-child(6){animation-delay:.46s}
.splash-mark .wm-l:nth-child(7){animation-delay:.54s}
.splash-mark .wm-l:nth-child(8){animation-delay:.62s}
@keyframes letterIn{to{opacity:1;transform:translateY(0) rotate(0)}}

.splash-bar{width:min(280px,60vw);height:1px;background:color-mix(in srgb,var(--marfil) 18%,transparent);overflow:hidden}
.splash-bar i{display:block;height:100%;width:0;background:var(--naranja);animation:loadBar 1.5s .35s var(--ease-soft) forwards}
@keyframes loadBar{to{width:100%}}
.splash-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--marfil) 52%,transparent);opacity:0;animation:fadeIn .8s .9s forwards}
@keyframes fadeIn{to{opacity:1}}

.splash.is-out{opacity:0;pointer-events:none;transform:scale(1.03);transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-out)}
@keyframes splashSafety{to{opacity:0;pointer-events:none;visibility:hidden}}

/* --- Aurora + grano --- */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--verde-900)}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(96px);opacity:.42}
.aurora .a1{width:70vmax;height:70vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,rgba(229,90,41,.34),transparent 68%);animation:drift1 34s linear infinite}
.aurora .a2{width:60vmax;height:60vmax;right:-16vmax;top:24vmax;background:radial-gradient(circle,rgba(172,154,78,.34),transparent 68%);animation:drift2 44s linear infinite}
.aurora .a3{width:52vmax;height:52vmax;left:22vmax;bottom:-20vmax;background:radial-gradient(circle,rgba(255,242,189,.20),transparent 70%);animation:drift3 52s linear infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14vmax,8vmax,0)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-12vmax,-10vmax,0)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(8vmax,-12vmax,0)}}

.grain{
  position:fixed;inset:-120px;z-index:-1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-14px,9px)}40%{transform:translate(10px,-12px)}60%{transform:translate(-9px,-8px)}80%{transform:translate(12px,10px)}100%{transform:translate(0,0)}}

/* --- Hero --- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:-8% 0 -8% 0;z-index:-2;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.92) contrast(1.04)}
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(14,33,24,.86) 0%,rgba(14,33,24,.34) 32%,rgba(14,33,24,.74) 68%,rgba(14,33,24,.94) 100%),
    radial-gradient(120% 78% at 18% 82%,rgba(23,51,35,.72),transparent 62%);
}
.hero-body{padding:calc(var(--nav-h) + 3.2rem) var(--gutter) 1.4rem;max-width:var(--maxw);width:100%;margin:0 auto}
.hero-mark{width:min(760px,84%);color:var(--naranja);margin:0 0 1.4rem}
.hero-mark svg{width:100%;height:auto;filter:drop-shadow(0 14px 40px rgba(14,33,24,.75)) drop-shadow(0 2px 10px rgba(14,33,24,.5))}
.hero-tagline{font-family:var(--display);font-size:clamp(1.5rem,4.2vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--marfil)}
.hero-tagline em{font-family:var(--serif);font-style:italic;color:var(--naranja)}
.hero-sub{margin-top:1.15rem;font-size:clamp(.95rem,1.7vw,1.1rem);line-height:1.55;max-width:44ch;color:color-mix(in srgb,var(--marfil) 76%,transparent)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}

.hero-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem var(--gutter) 1.5rem;max-width:var(--maxw);width:100%;margin:0 auto;
  border-top:1px solid color-mix(in srgb,var(--marfil) 12%,transparent);
  color:color-mix(in srgb,var(--marfil) 55%,transparent);
}
.hero-foot>span:last-child{display:none}
.hero-scroll{display:inline-flex;align-items:center;gap:.5rem}
.hero-scroll i{width:26px;height:1px;background:var(--naranja);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--marfil);animation:scrollLine 2.1s var(--ease-soft) infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* --- Ticker --- */
.ticker{background:var(--naranja);color:var(--verde);overflow:hidden;padding:.85rem 0;position:relative;z-index:2}
.ticker-track{display:flex;align-items:center;gap:1.6rem;width:max-content;animation:tick 42s linear infinite}
.ticker span{font-family:var(--display);font-size:clamp(.95rem,2.1vw,1.35rem);letter-spacing:-.01em;white-space:nowrap}
.ticker em{font-style:normal;font-size:.6rem;opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}

/* --- Secciones genéricas --- */
.sec{position:relative;padding:clamp(4.5rem,11vw,9rem) var(--gutter);max-width:var(--maxw);margin:0 auto;z-index:2}
.numeral{
  position:absolute;top:clamp(1.2rem,3vw,2.4rem);right:var(--gutter);
  font-family:var(--display);font-size:clamp(6rem,20vw,17rem);line-height:.8;
  color:color-mix(in srgb,var(--marfil) 5%,transparent);pointer-events:none;user-select:none;z-index:-1;
}
.numeral-dark{color:color-mix(in srgb,var(--verde) 8%,transparent)}
.sec-head{max-width:56ch;margin-bottom:clamp(2.6rem,5vw,4rem)}
.sec-head-center{margin-inline:auto;text-align:center}
.sec-head-center .h-display{margin-inline:auto}
.sec-head-center .lead{margin-inline:auto}

/* --- 01 El local --- */
.sec-local{background:rgba(23,51,35,.87);max-width:none}
.local-grid{display:grid;gap:clamp(2.4rem,5vw,3.6rem);max-width:var(--maxw);margin:0 auto}

.local-collage{position:relative;height:clamp(320px,72vw,540px);perspective:1100px}
.local-collage .cg{position:absolute;overflow:hidden;border-radius:3px;box-shadow:0 28px 60px -30px rgba(0,0,0,.75);transition:transform .8s var(--ease-out)}
.local-collage .cg img{width:100%;height:100%;object-fit:cover}
.cg-1{width:56%;height:66%;left:0;top:4%;transform:rotate(-3.2deg)}
.cg-2{width:44%;height:56%;right:2%;top:0;transform:rotate(2.6deg)}
.cg-3{width:50%;height:48%;right:8%;bottom:0;transform:rotate(-1.6deg)}
.cinta{
  position:absolute;left:46%;bottom:12%;z-index:3;
  background:var(--naranja);color:var(--marfil);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.5rem 1rem;transform:rotate(-6deg);box-shadow:0 10px 26px -12px rgba(0,0,0,.8);
}

.local-copy{max-width:60ch}
.deflist{margin-top:2.4rem;display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--marfil) 14%,transparent)}
.deflist>div{display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.05rem 0;border-bottom:1px solid color-mix(in srgb,var(--marfil) 14%,transparent)}
.deflist dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja)}
.deflist dd{font-size:.95rem;line-height:1.6;color:color-mix(in srgb,var(--marfil) 82%,transparent)}
.deflist dd i{font-style:normal;color:color-mix(in srgb,var(--marfil) 48%,transparent);font-size:.86em}

.local-aside{position:relative;padding-top:1.6rem;border-top:1px solid color-mix(in srgb,var(--marfil) 14%,transparent)}
.vert{display:block;color:var(--oliva);margin-bottom:1.2rem}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3.4vw,1.85rem);line-height:1.28;color:var(--amarillo);max-width:22ch}
.meta{margin-top:1.4rem;color:color-mix(in srgb,var(--marfil) 50%,transparent)}
.ilu-terraza{width:min(230px,44vw);right:0;bottom:-1.5rem;opacity:.5}

/* --- 02 Cócteles --- */
.sec-cocteles{background:rgba(14,33,24,.84);max-width:none;overflow:hidden}
.sec-cocteles>*{max-width:var(--maxw);margin-inline:auto}
.ilu-botella{width:min(300px,52vw);left:-3rem;top:8%;opacity:.14;transform:rotate(-12deg)}

.ctl-grid{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
.ctl{
  position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--marfil) 7%,transparent),color-mix(in srgb,var(--marfil) 2%,transparent));
  border:1px solid color-mix(in srgb,var(--marfil) 12%,transparent);
  transition:border-color .5s var(--ease-out),transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.ctl:hover{border-color:color-mix(in srgb,var(--naranja) 55%,transparent);transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.ctl-3d{position:relative;height:158px;background:radial-gradient(70% 60% at 50% 42%,color-mix(in srgb,var(--naranja) 16%,transparent),transparent 70%)}
/* Posicion absoluta con los cuatro lados fijados: asi el lienzo NUNCA puede
   quedarse con altura 0 (era lo que lo hacia desaparecer en algunos moviles) */
.ctl-3d canvas{
  position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
  width:100%;height:100%;max-width:300px;
  touch-action:pan-y;            /* el dedo gira la copa, la pagina sigue bajando */
  cursor:grab;
}
.ctl-3d canvas:active{cursor:grabbing}
.ctl-fallback{position:absolute;inset:auto 0 1rem 0;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--marfil) 32%,transparent)}
.ctl-fallback::after{content:"Arrastra para girarla"}
.ctl-body{padding:.95rem .9rem 1.05rem;border-top:1px solid color-mix(in srgb,var(--marfil) 10%,transparent)}
.ctl-serie{color:var(--oliva);margin-bottom:.45rem;font-size:.54rem;letter-spacing:.1em}
.ctl h3{font-family:var(--display);font-size:1.02rem;line-height:1.05;letter-spacing:-.025em;color:var(--marfil)}
.ctl-sub{font-family:var(--serif);font-style:italic;font-size:.84rem;line-height:1.3;color:var(--amarillo);margin-top:.35rem}
.ctl-ing{display:none;margin-top:1rem;color:var(--naranja);font-size:.64rem;letter-spacing:.12em;line-height:1.9}
.ctl-desc{display:none;margin-top:.85rem;font-size:.92rem;line-height:1.62;color:color-mix(in srgb,var(--marfil) 62%,transparent)}
.ctl-foot{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:.8rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--marfil) 10%,transparent)}
.ctl-foot span{color:color-mix(in srgb,var(--marfil) 45%,transparent);font-size:.56rem}
.ctl-foot b{font-family:var(--display);font-size:1.05rem;color:var(--naranja);letter-spacing:-.02em;white-space:nowrap}
.ctl-note{margin-top:2.4rem;color:color-mix(in srgb,var(--marfil) 55%,transparent);letter-spacing:.08em}
.ctl-note a{color:var(--naranja);border-bottom:1px solid color-mix(in srgb,var(--naranja) 45%,transparent)}


/* --- Copas: animacion en WebP animado ---------------------------------
   Un WebP animado de 40 fotogramas a 12,5 img/s. Es una animacion de
   verdad: la reproduce el propio navegador, no hace falta <canvas> ni
   trucos de CSS. Se ve igual en cualquier movil, y con color pleno.     */
.spr{display:block;width:auto;height:100%;object-fit:contain}

/* --- Platos destacados (seccion 02) --- */
.dish-grid{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin-bottom:clamp(2.4rem,7vw,5.5rem)}
.dish-card{
  overflow:hidden;border-radius:4px;background:#fff;
  border:1px solid color-mix(in srgb,var(--verde) 12%,transparent);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .5s var(--ease-out);
}
.dish-card:hover{transform:translateY(-5px);border-color:var(--naranja);box-shadow:0 28px 56px -32px rgba(23,51,35,.6)}
.dish-3d{
  position:relative;height:230px;display:grid;place-items:center;padding:1rem 0;
  background:
    radial-gradient(65% 60% at 50% 46%,color-mix(in srgb,var(--naranja) 22%,transparent),transparent 72%),
    var(--verde);
}
.dish-3d .spr{width:auto;height:100%}
.dish-body{padding:.95rem .9rem 1.05rem;color:var(--verde)}
.dish-serie{color:var(--oliva);margin-bottom:.45rem;font-size:.54rem;letter-spacing:.1em}
.dish-card h3{font-family:var(--display);font-size:1rem;line-height:1.05;letter-spacing:-.025em;color:var(--verde)}
.dish-sub{font-family:var(--serif);font-style:italic;font-size:.82rem;line-height:1.3;color:var(--naranja);margin-top:.32rem}
.dish-desc{display:none;margin-top:.8rem;font-size:.92rem;line-height:1.6;color:color-mix(in srgb,var(--verde) 68%,transparent)}
.dish-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.8rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--verde) 15%,transparent);
}
.dish-foot span{color:color-mix(in srgb,var(--verde) 48%,transparent);font-size:.56rem}
.dish-foot b{font-family:var(--display);font-size:1.05rem;color:var(--naranja);letter-spacing:-.02em;white-space:nowrap}

.carta-nueva{padding-top:clamp(2rem,5vw,3rem);border-top:1px solid color-mix(in srgb,var(--verde) 18%,transparent)}
.carta-nueva .lead{margin-top:1.2rem;margin-bottom:2rem}

/* --- Copas: la secuencia va debajo, el 3D interactivo encima --- */
.ctl-3d .spr{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:100%;transition:opacity .5s var(--ease-out)}
.ctl-3d.has-3d .spr{opacity:0}
.ctl-3d canvas{opacity:0;transition:opacity .6s var(--ease-out)}
.ctl-3d.has-3d canvas{opacity:1}
/* El lienzo 3D tambien en movil. Si no llega a pintar, debajo sigue la
   secuencia de fotogramas y no se nota. La etiqueta "arrastra" solo en raton. */
@media (hover:none),(pointer:coarse){
  .ctl-fallback{display:none}
}


/* --- Fotos de plato (seccion 02) --- */
.dish-foto{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--verde)}
.dish-foto img,.dish-foto video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease-out);
}
.dish-card:hover .dish-foto img,.dish-card:hover .dish-foto video{transform:scale(1.045)}
.dish-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,33,24,.34) 0%,transparent 34%,transparent 62%,rgba(14,33,24,.42) 100%);
}
.dish-tag{
  position:absolute;left:.5rem;top:.5rem;z-index:2;
  background:var(--naranja);color:var(--marfil);
  font-size:.56rem;letter-spacing:.16em;padding:.32rem .6rem;border-radius:999px;
}

/* --- Resto de la carta, en texto --- */
.dish-mas{margin-bottom:clamp(2.6rem,6vw,4rem)}
.dish-mas-h{color:var(--naranja);letter-spacing:.2em;margin-bottom:1rem}
.dish-mas ul{list-style:none;padding:0;margin:0;border-top:1px solid color-mix(in srgb,var(--verde) 18%,transparent)}
.dish-mas li{
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1.4rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid color-mix(in srgb,var(--verde) 18%,transparent);
}
.dish-mas b{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em;color:var(--verde)}
.dish-mas span{grid-column:1/2;font-size:.88rem;line-height:1.5;color:color-mix(in srgb,var(--verde) 60%,transparent)}
.dish-mas i{grid-row:1/2;grid-column:2/3;font-style:normal;font-family:var(--display);font-size:1rem;color:var(--naranja)}

/* --- Anuncio: la carta nueva --- */
.anuncio{
  position:relative;overflow:hidden;border-radius:6px;
  background:linear-gradient(135deg,var(--naranja) 0%,#d24d1f 62%,#c04519 100%);
  color:var(--marfil);
  padding:clamp(2rem,6vw,3.6rem) clamp(1.4rem,5vw,3.4rem);
  margin-bottom:clamp(2.6rem,6vw,4rem);
  box-shadow:0 34px 70px -40px rgba(196,69,25,.9);
}
.anuncio-in{position:relative;z-index:2;max-width:44ch}
.anuncio-kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  letter-spacing:.2em;color:var(--amarillo);margin-bottom:1.1rem;
}
.anuncio-kicker i{width:8px;height:8px;border-radius:999px;background:var(--marfil);animation:pulseDot 2.2s var(--ease-soft) infinite}
.anuncio-tit{
  font-family:var(--display);font-size:clamp(2.1rem,7vw,4.2rem);line-height:.92;letter-spacing:-.035em;
  color:var(--marfil);
}
.anuncio-tit em{font-family:var(--serif);font-style:italic;color:var(--amarillo)}
.anuncio-txt{margin-top:1.2rem;font-size:clamp(1.12rem,2.4vw,1.5rem);line-height:1.45;max-width:34ch;color:color-mix(in srgb,var(--marfil) 92%,transparent)}

.cuenta{display:flex;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap}
.cuenta>div{
  min-width:76px;text-align:center;padding:.75rem .5rem .6rem;border-radius:4px;
  background:color-mix(in srgb,var(--verde) 78%,transparent);
}
.cuenta b{display:block;font-family:var(--display);font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1;color:var(--amarillo);letter-spacing:-.02em}
.cuenta span{display:block;margin-top:.3rem;font-size:.56rem;letter-spacing:.18em;color:color-mix(in srgb,var(--marfil) 62%,transparent)}
.anuncio-ya{margin-top:1.6rem;letter-spacing:.16em;color:var(--amarillo)}

.anuncio-marca{
  position:absolute;right:-4%;bottom:-24%;width:min(340px,46%);z-index:1;
  color:color-mix(in srgb,var(--marfil) 16%,transparent);pointer-events:none;
}
.anuncio-marca svg{width:100%;height:auto}

/* --- 02 La carta --- */
.sec-carta{background:var(--marfil);color:var(--verde);max-width:none;overflow:hidden}
.sec-carta>*{max-width:var(--maxw);margin-inline:auto}
.sec-carta .kicker{color:var(--naranja)}
.sec-carta .h-display{color:var(--verde)}
.sec-carta .lead{color:color-mix(in srgb,var(--verde) 78%,transparent)}
.sec-carta .numeral{color:color-mix(in srgb,var(--verde) 7%,transparent)}
.ilu-cazuela{width:min(340px,58vw);right:-4rem;bottom:-3rem;opacity:.16}

.carta-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--verde);color:var(--amarillo);padding:.7rem 1.1rem;border-radius:999px;margin-bottom:2rem;
}
.carta-badge i{width:7px;height:7px;border-radius:999px;background:var(--naranja);animation:pulseDot 2.4s var(--ease-soft) infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.45}}

.carta-tabs{display:flex;gap:.5rem;margin-bottom:1.6rem}
.tab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem 1.1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--verde) 25%,transparent);
  color:color-mix(in srgb,var(--verde) 65%,transparent);transition:all .35s var(--ease-out);
}
.tab:hover{border-color:var(--verde)}
.tab.is-on{background:var(--verde);color:var(--amarillo);border-color:var(--verde);box-shadow:0 6px 18px -10px rgba(23,51,35,.9)}
.tab.is-on::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--naranja);display:inline-block;margin-right:.5rem;vertical-align:middle}

/* [hidden] debe ganar SIEMPRE a display:grid (era el bug de las pestanas:
   se veian los dos idiomas a la vez porque display:grid pisaba el hidden) */
[hidden]{display:none !important}
.carta-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
.carta-grid[hidden]{display:none}
.carta-card{
  display:grid;grid-template-columns:88px 1fr;gap:1.1rem;align-items:center;
  background:#fff;border:1px solid color-mix(in srgb,var(--verde) 12%,transparent);
  padding:.9rem;border-radius:3px;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out);
}
.carta-card:hover{transform:translateY(-4px);border-color:var(--naranja);box-shadow:0 22px 48px -28px rgba(23,51,35,.6)}
.carta-thumb{overflow:hidden;border-radius:2px;background:var(--verde)}
.carta-thumb img{width:100%;height:110px;object-fit:cover;object-position:top left}
.carta-meta{display:grid;gap:.35rem}
.carta-meta b{font-family:var(--display);font-size:1.08rem;letter-spacing:-.02em}
.carta-meta i{font-style:normal;color:color-mix(in srgb,var(--verde) 55%,transparent);font-size:.6rem;letter-spacing:.12em}

.carta-dishes{margin-top:clamp(2.6rem,5vw,4rem);display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--verde) 18%,transparent)}
.dish{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.4rem;padding:1.15rem 0;border-bottom:1px solid color-mix(in srgb,var(--verde) 18%,transparent);align-items:baseline}
.dish b{font-family:var(--display);font-size:1.12rem;letter-spacing:-.02em;color:var(--verde)}
.dish span{grid-column:1/2;font-size:.9rem;line-height:1.5;color:color-mix(in srgb,var(--verde) 62%,transparent);max-width:52ch}
.dish i{grid-row:1/2;grid-column:2/3;font-style:normal;font-family:var(--display);font-size:1.05rem;color:var(--naranja)}

/* --- 04 Galería --- */
.sec-galeria{background:rgba(23,51,35,.87);max-width:none;padding-inline:0;overflow:hidden}
.sec-galeria .sec-head{padding-inline:var(--gutter);max-width:min(56ch,90vw)}
.lanes{display:grid;gap:clamp(.6rem,1.4vw,1rem)}
.lane{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lane-track{display:flex;gap:clamp(.6rem,1.4vw,1rem);width:max-content}
.lane-track img{
  height:clamp(140px,22vw,240px);width:auto;object-fit:cover;border-radius:2px;
  filter:saturate(.9) brightness(.92);transition:filter .6s var(--ease-out),transform .6s var(--ease-out);
}
.lane-track img:hover{filter:saturate(1.05) brightness(1.04);transform:scale(1.03)}
.lane-a .lane-track{animation:marquee 38s linear infinite}
.lane-b .lane-track{animation:marquee 62s linear infinite}
.lane-c .lane-track{animation:marqueeRev 48s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes marqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.galeria-note{margin:2.4rem var(--gutter) 0;color:color-mix(in srgb,var(--marfil) 52%,transparent)}
.galeria-note a{color:var(--naranja);border-bottom:1px solid color-mix(in srgb,var(--naranja) 45%,transparent)}


/* =============================================================
   06 · OPINIONES (datos reales de Google)
   ============================================================= */
.sec-opi{background:rgba(23,51,35,.87);max-width:none;overflow:hidden}
.sec-opi>*{max-width:var(--maxw);margin-inline:auto}
.sec-opi .h-display{max-width:20ch}
.sec-opi .h-display em span{font-family:var(--display);font-style:normal}
.ilu-amigas{width:min(300px,52vw);right:-2rem;top:12%;opacity:.10}

/* Nota media */
.nota{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.4rem;
  padding:clamp(1.3rem,3.4vw,2rem);border-radius:5px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--marfil) 9%,transparent),color-mix(in srgb,var(--marfil) 3%,transparent));
  border:1px solid color-mix(in srgb,var(--marfil) 16%,transparent);
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.nota-num{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-right:auto}
.nota-num>b{font-family:var(--display);font-size:clamp(3rem,9vw,4.6rem);line-height:.85;letter-spacing:-.04em;color:var(--amarillo)}
.estrellas{display:inline-flex;gap:.22rem}
.estrellas i{width:15px;height:15px;background:var(--naranja);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.estrellas i:last-child{background:linear-gradient(90deg,var(--naranja) 90%,color-mix(in srgb,var(--marfil) 22%,transparent) 90%)}
.nota-meta{color:color-mix(in srgb,var(--marfil) 62%,transparent);letter-spacing:.1em}
.nota-meta b{color:var(--marfil);font-weight:400}
.nota-cta{flex:0 0 auto}

/* Palabras mas repetidas */
.chips{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.chips-h{color:var(--oliva);letter-spacing:.2em;margin-bottom:.9rem}
.chips ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--marfil) 18%,transparent);
  color:color-mix(in srgb,var(--marfil) 78%,transparent);
  transition:border-color .4s var(--ease-out),color .4s var(--ease-out);
}
.chips li:hover{border-color:var(--naranja);color:var(--marfil)}
.chips li i{font-style:normal;color:var(--naranja);font-size:.62rem}

.opi-tabs{margin-bottom:1.4rem}
.opi-tabs .tab{border-color:color-mix(in srgb,var(--marfil) 28%,transparent);color:color-mix(in srgb,var(--marfil) 66%,transparent)}
.opi-tabs .tab:hover{border-color:var(--marfil)}
.opi-tabs .tab.is-on{background:var(--marfil);color:var(--verde);border-color:var(--marfil)}
.opi-tabs .tab.is-on::before{background:var(--naranja)}

.opi-grid{display:grid;gap:clamp(.9rem,2vw,1.3rem);grid-template-columns:1fr}
.opi{
  position:relative;margin:0;padding:clamp(1.4rem,3vw,1.9rem);border-radius:4px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--marfil) 8%,transparent),color-mix(in srgb,var(--marfil) 3%,transparent));
  border:1px solid color-mix(in srgb,var(--marfil) 13%,transparent);
  transition:border-color .5s var(--ease-out),transform .6s var(--ease-out);
}
.opi:hover{border-color:color-mix(in srgb,var(--naranja) 55%,transparent);transform:translateY(-4px)}
.opi::before{
  content:"“";position:absolute;right:.7rem;top:-.6rem;
  font-family:var(--serif);font-size:5rem;line-height:1;
  color:color-mix(in srgb,var(--naranja) 26%,transparent);pointer-events:none;
}
.opi p{font-size:clamp(.96rem,1.7vw,1.04rem);line-height:1.62;color:color-mix(in srgb,var(--marfil) 88%,transparent)}
.opi p em{font-family:var(--serif);font-style:italic;color:var(--amarillo)}
.opi footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid color-mix(in srgb,var(--marfil) 12%,transparent)}
.opi footer b{font-family:var(--display);font-size:1.02rem;letter-spacing:-.02em;color:var(--marfil)}
.opi footer span{color:color-mix(in srgb,var(--marfil) 45%,transparent);letter-spacing:.1em}
.opi-en{border-color:color-mix(in srgb,var(--oliva) 45%,transparent)}

.opi-pie{margin-top:1.8rem;color:color-mix(in srgb,var(--marfil) 45%,transparent);letter-spacing:.08em;text-transform:none;font-size:.7rem}
.opi-pie a{color:var(--naranja);border-bottom:1px solid color-mix(in srgb,var(--naranja) 45%,transparent)}

/* Sello 4,9 en el primer pantallazo */
.hero-nota{display:inline-flex;align-items:center;gap:.45rem;color:color-mix(in srgb,var(--marfil) 72%,transparent)}
.hero-nota b{font-family:var(--display);font-size:1.05rem;color:var(--marfil);letter-spacing:-.02em}
.hero-nota i{font-style:normal;color:var(--naranja)}
.hero-nota>span{display:inline;font-size:.56rem;letter-spacing:.06em}
@media (min-width:540px){.hero-nota>span{font-size:inherit;letter-spacing:inherit}}

/* --- 05 Eventos --- */
.sec-eventos{background:transparent;perspective:1400px}
.evt{position:relative;overflow:hidden;border-radius:4px;isolation:isolate;transition:transform .9s var(--ease-out)}
.evt-media{position:absolute;inset:-6%;z-index:-2}
.evt-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.evt-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(14,33,24,.95) 0%,rgba(14,33,24,.86) 44%,rgba(14,33,24,.5) 100%)}
.evt-body{padding:clamp(2.2rem,6vw,4.6rem);max-width:60ch}
.evt-body .btn{margin-top:2.1rem}
.ilu-brindis{width:min(300px,50vw);right:-1.5rem;bottom:-2rem;opacity:.18}

/* --- 06 Reserva --- */
.sec-reserva{background:var(--marfil);color:var(--verde);max-width:none;overflow:hidden}
.sec-reserva>*{max-width:var(--maxw);margin-inline:auto}
.ilu-amigos{width:min(280px,50vw);left:-2rem;bottom:-2rem;opacity:.12}
.rsv-grid{display:grid;gap:clamp(2.4rem,5vw,4rem)}

.rsv-online{margin-top:2.2rem;font-size:.82rem;padding:1.15rem 1.9rem}
.rsv-online-note{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--verde) 52%,transparent);margin-top:.85rem}
.rsv-direct{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--verde) 18%,transparent)}
.rsv-direct li{display:grid;grid-template-columns:1fr;gap:.25rem;align-items:start;padding:.95rem 0;border-bottom:1px solid color-mix(in srgb,var(--verde) 18%,transparent)}
.rsv-direct span{color:color-mix(in srgb,var(--verde) 50%,transparent)}
.rsv-direct b{font-family:var(--display);font-size:1.08rem;letter-spacing:-.02em;transition:color .3s var(--ease-out)}
.rsv-direct a:hover b{color:var(--naranja)}

.rsv-form{color-scheme:dark;background:var(--verde);color:var(--marfil);padding:clamp(1.5rem,4vw,2.4rem);border-radius:4px;display:grid;gap:.95rem;align-content:start;box-shadow:0 34px 70px -40px rgba(23,51,35,.8)}
.rsv-form-title{color:var(--amarillo);letter-spacing:.2em;margin-bottom:.3rem}
.fld{display:grid;gap:.4rem}
.fld>span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--marfil) 55%,transparent)}
.fld input,.fld select{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--marfil);
  background:color-mix(in srgb,var(--marfil) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--marfil) 18%,transparent);
  border-radius:3px;padding:.72rem .85rem;transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
  appearance:none;-webkit-appearance:none;
}
.fld select{background-image:linear-gradient(45deg,transparent 50%,#f6f2e6 50%),linear-gradient(135deg,#f6f2e6 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld option{background:var(--verde);color:var(--marfil)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--naranja);background:color-mix(in srgb,var(--marfil) 11%,transparent)}
.fld input::placeholder{color:color-mix(in srgb,var(--marfil) 32%,transparent)}
.fld input:invalid:not(:placeholder-shown){border-color:var(--naranja-soft)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.rsv-form .btn{justify-content:center;margin-top:.6rem}
.rsv-legal{color:color-mix(in srgb,var(--marfil) 42%,transparent);letter-spacing:.06em;text-transform:none;font-size:.66rem;line-height:1.6}
.rsv-status{color:var(--amarillo);min-height:1.2em;letter-spacing:.06em;text-transform:none;font-size:.7rem}
.rsv-form.is-sending .btn{opacity:.6;pointer-events:none}

/* --- Footer --- */
.foot{position:relative;background:rgba(14,33,24,.9);padding-top:clamp(3rem,7vw,5rem);overflow:hidden;z-index:2}
.foot-display{overflow:hidden;padding-bottom:clamp(2rem,5vw,3.4rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.foot-display-track{display:flex;align-items:center;gap:1.4rem;width:max-content;animation:tick 50s linear infinite}
.foot-display span{font-family:var(--display);font-size:clamp(3rem,11vw,8.5rem);line-height:.9;letter-spacing:-.045em;color:color-mix(in srgb,var(--marfil) 9%,transparent);white-space:nowrap}
.foot-display em{font-style:normal;font-size:clamp(1.4rem,4vw,3rem);color:color-mix(in srgb,var(--naranja) 45%,transparent)}

.foot-grid{display:grid;gap:2.4rem;padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto}
.foot-col p{font-size:.95rem;line-height:1.7;margin-bottom:.7rem;color:color-mix(in srgb,var(--marfil) 82%,transparent)}
.foot-h{color:var(--naranja);letter-spacing:.2em;margin-bottom:1.1rem}
.foot-col a{transition:color .3s var(--ease-out)}
.foot-col a:hover{color:var(--naranja)}
.foot-link{display:inline-block;margin-top:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);border-bottom:1px solid color-mix(in srgb,var(--naranja) 40%,transparent)}
.map-frame{position:relative;aspect-ratio:16/11;border-radius:3px;overflow:hidden;border:1px solid color-mix(in srgb,var(--marfil) 14%,transparent);background:var(--verde-800)}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}

/* Capa para abrir el mapa de un toque en móvil (evita que el iframe
   se "coma" el desplazamiento de la página) */
.map-tap{display:none;position:absolute;inset:0;z-index:2}
@media (hover:none),(pointer:coarse){.map-tap{display:block}}

/* Alternativa cuando Google no puede cargar el mapa
   (por ejemplo al abrir el archivo en local, sin servidor) */
.map-fallback{
  position:absolute;inset:0;z-index:3;display:flex;
  flex-direction:column;justify-content:center;gap:.35rem;
  padding:clamp(1.1rem,4vw,1.8rem);
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--naranja) 16%,transparent),transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 26px,color-mix(in srgb,var(--marfil) 5%,transparent) 26px 27px),
    repeating-linear-gradient(0deg,transparent 0 26px,color-mix(in srgb,var(--marfil) 5%,transparent) 26px 27px),
    var(--verde-800);
  transition:background .4s var(--ease-out);
}
/* Cuando el mapa de Google si carga, la tarjeta se aparta */
.map-frame.con-mapa .map-fallback{display:none}
.map-fallback:hover{background:
    linear-gradient(150deg,color-mix(in srgb,var(--naranja) 26%,transparent),transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 26px,color-mix(in srgb,var(--marfil) 7%,transparent) 26px 27px),
    repeating-linear-gradient(0deg,transparent 0 26px,color-mix(in srgb,var(--marfil) 7%,transparent) 26px 27px),
    var(--verde-800)}
.map-pin{width:34px;color:var(--naranja);margin-bottom:.5rem}
.map-pin svg{width:100%;height:auto}
.map-fallback b{font-family:var(--display);font-size:clamp(1.05rem,3.4vw,1.3rem);letter-spacing:-.02em;color:var(--marfil)}
.map-fallback i{font-style:normal;font-size:.9rem;color:color-mix(in srgb,var(--marfil) 62%,transparent)}
.map-fallback em{
  font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--naranja);margin-top:.7rem;
}
.ilu-perro{position:relative;display:block;width:min(190px,42vw);margin:2.6rem var(--gutter) 0 auto;opacity:.22}

.foot-legal{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  margin-top:2.4rem;padding:1.3rem var(--gutter);
  border-top:1px solid color-mix(in srgb,var(--marfil) 12%,transparent);
  color:color-mix(in srgb,var(--marfil) 45%,transparent);
}
.foot-legal a{transition:color .3s var(--ease-out)}
.foot-legal a:hover{color:var(--naranja)}

/* =============================================================
   7. EFECTOS (reveal)
   ============================================================= */
/* Por defecto TODO es visible. Sólo si el JS está vivo (.js en <html>)
   escondemos para animar. Si el JS falla, no desaparece nada. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
/* Defensivo extra */
.reveal[data-split],.js .reveal[data-split]{opacity:1;transform:none}

/* =============================================================
   8. RESPONSIVE
   ============================================================= */
@media (min-width:540px){
  .deflist>div{grid-template-columns:8.5rem 1fr;gap:1rem}
  .rsv-direct li{grid-template-columns:6.5rem 1fr;gap:1rem;align-items:center}
  .carta-grid{grid-template-columns:repeat(2,1fr)}
  .hero-foot>span:last-child{display:inline}
}
@media (min-width:560px){
  .ctl-3d{height:200px}
  .ctl-body,.dish-body{padding:1.2rem 1.1rem 1.35rem}
  .ctl h3,.dish-card h3{font-size:1.2rem}
  .ctl-sub,.dish-sub{font-size:.94rem}
  .ctl-foot b,.dish-foot b{font-size:1.2rem}
  .ctl-grid,.dish-grid{gap:1rem}
}
@media (min-width:720px){
  .opi-grid{grid-template-columns:repeat(2,1fr)}
  .ctl-3d{height:300px}
  .ctl-ing,.ctl-desc,.dish-desc{display:block}
  .ctl-body{padding:1.5rem 1.4rem 1.7rem}
  .dish-body{padding:1.4rem 1.3rem 1.6rem}
  .ctl h3{font-size:1.5rem}
  .dish-card h3{font-size:1.32rem}
  .ctl-sub,.dish-sub{font-size:1rem}
  .ctl-serie,.dish-serie{font-size:.6rem;margin-bottom:.65rem}
  .ctl-foot,.dish-foot{margin-top:1.3rem;padding-top:.95rem}
  .ctl-foot b,.dish-foot b{font-size:1.3rem}
  .ctl-foot span,.dish-foot span{font-size:.6rem}
  .ctl-grid,.dish-grid{gap:clamp(1rem,2.2vw,1.5rem)}
  .carta-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .local-collage{height:clamp(420px,52vw,600px)}
  .dish{grid-template-columns:22ch 1fr auto;gap:1.4rem}
  .dish span{grid-column:2/3}
  .dish i{grid-column:3/4}
}
@media (min-width:960px){
  :root{--nav-h:82px}
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .burger{display:none}
  .nav-logo-word{display:block}
  .mark-cha{width:30px}

  .local-grid{grid-template-columns:1.05fr .95fr;grid-template-areas:"collage copy" "aside copy";align-items:start;column-gap:clamp(2.4rem,4vw,4.4rem)}
  .local-collage{grid-area:collage}
  .local-copy{grid-area:copy}
  .local-aside{grid-area:aside}

  .rsv-grid{grid-template-columns:1.05fr .95fr;align-items:start;column-gap:clamp(2.6rem,5vw,5rem)}
  .dish-3d{height:250px}
  .foot-grid{grid-template-columns:1fr 1fr 1.15fr;gap:clamp(2rem,4vw,3.4rem)}
  .ctl-3d{height:340px}
}
@media (min-width:1280px){
  .nav-links{gap:1.5rem}
  .opi-grid{grid-template-columns:repeat(3,1fr)}
  .dish-grid{grid-template-columns:repeat(4,1fr)}
  .ctl-grid{grid-template-columns:repeat(4,1fr)}
  .ctl-3d{height:320px}
  .hero-body{padding-bottom:2.4rem}
}

/* =============================================================
   9. REDUCED-MOTION — sólo lo intrusivo (Windows lo trae activado
   por defecto: NO desactivamos hovers, fades ni micro-interacciones)
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aurora i{animation:none}
  .grain{animation:none;opacity:.04}
  .hero-scroll i::after{animation:none}
  .ticker-track,.foot-display-track,.lane-a .lane-track,.lane-b .lane-track,.lane-c .lane-track{animation-duration:180s}
  .spr{opacity:.92}
}