/* ════════════════════════════════════════════════════════════════
   CALÉNDULA by Fuego & Limón — Sistema visual
   Basado en la Guía de marca v1.0 (agosto 2026)
   Radio 0 · sin sombras difusas · todo alineado a la izquierda
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Paleta oficial */
  --ink:#201E1D;
  --paper:#F3F2F2;
  --white:#FFFFFF;
  --fuego:#EC3013;
  --fuego-hover:#C8250C;
  --fuego-active:#9C1B07;
  --fuego-text:#9C1B07;
  --limon:#DFC64B;
  --madera:#6E5238;
  --line:#DAD7D5;
  --mute:#8A8481;
  --body:#4A4543;

  /* Tipografía */
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Archivo','Segoe UI',system-ui,sans-serif;

  /* Retícula */
  --radius:0;
  --max:1280px;
  --gutter:24px;
  --pad:40px;

  /* Escala de espaciado (única permitida) */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --rule:2px solid var(--ink);
  --rule-paper:2px solid var(--paper);
  --hd-h:104px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

@media (max-width:860px){
  :root{ --pad:20px; --hd-h:72px; }
}

/* ─────────────── Reset ─────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,figure,ul,li,blockquote{ margin:0; padding:0; }
ul{ list-style:none; }
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

html{ scroll-behavior:auto; }

body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--body);
  background:var(--paper);
  overflow-x:hidden;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
/* Bloquear el scroll sin colapsar el alto: con height:100svh el navegador
   cree que todo el contenido esta cerca del viewport y descarga las
   imagenes diferidas en la primera carga. */
body.is-loading{ overflow:hidden; }
html:has(body.is-loading){ overflow:hidden; }
body.nav-open{ overflow:hidden; }

::selection{ background:var(--fuego); color:var(--white); }

/* Scrollbar nativa: fina, sin radio, en la paleta */
html{ scrollbar-width:thin; scrollbar-color:var(--ink) var(--line); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--line); }
::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--fuego); }

/* Foco visible obligatorio: contorno 2px Fuego con 2px de separación */
:focus-visible{
  outline:2px solid var(--fuego);
  outline-offset:2px;
}
.on-dark :focus-visible,
.day :focus-visible,
.hero :focus-visible,
.mob :focus-visible{ outline-color:var(--limon); }

/* ─────────────── Tipografía base ─────────────── */
.kicker{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--body);   /* #8A8481 no alcanza AA a 12px sobre Papel */
  display:flex;
  align-items:center;
  gap:var(--s3);
}
.kicker b{ color:var(--fuego); font-weight:600; }
.kicker--paper{ color:rgba(243,242,242,.62); }
.kicker--paper b{ color:var(--fuego); }

.h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,4.2vw,44px);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
}
.h2--paper{ color:var(--paper); }

.lead{ max-width:62ch; }
p{ text-wrap:pretty; }

/* ─────────────── Botones ─────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--s3);
  min-height:48px;
  padding:0 var(--s5);
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:0;
  border:2px solid transparent;
  position:relative;
  overflow:hidden;
  transition:background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
  isolation:isolate;
}
.btn--sm{ min-height:44px; padding:0 var(--s4); font-size:12px; }
.btn--fuego{ background:var(--fuego); color:var(--white); }
.btn--fuego:hover{ background:var(--fuego-hover); }
.btn--fuego:active{ background:var(--fuego-active); }
.btn--paper{ background:transparent; color:var(--paper); border-color:var(--paper); }
.btn--paper:hover{ background:var(--paper); color:var(--ink); }
.btn--ink{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ink:hover{ background:var(--ink); color:var(--paper); }

/* Enlace de texto con subrayado de 2px que barre */
.lnk{
  display:inline-block;
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--fuego-text);
  padding-bottom:var(--s1);
  background-image:linear-gradient(var(--fuego),var(--fuego));
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:0 100%;
  transition:background-size .4s var(--ease-out);
}
.lnk:hover{ background-size:0% 2px; background-position:100% 100%; }
.lnk--paper{ color:var(--limon); background-image:linear-gradient(var(--limon),var(--limon)); }


/* ════════════════════════════════════════════════════════════════
   PRELOADER
   ════════════════════════════════════════════════════════════════ */
.preloader{
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  color:var(--paper);
  display:flex; align-items:flex-end;
  padding:var(--pad);
}
.preloader__inner{ width:100%; max-width:var(--max); margin:0 auto; }
.preloader__mark{
  margin-bottom:var(--s7);
  overflow:hidden;
}
.preloader__logo{
  width:clamp(190px,28vw,340px);
  height:auto;
  clip-path:inset(100% 0 0 0);
}
.preloader__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s5);
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,242,242,.55);
  padding-bottom:var(--s4);
}
.preloader__count i{
  font-style:normal;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
}
.preloader__bar{
  height:2px; width:100%;
  background:rgba(243,242,242,.18);
}
.preloader__bar i{
  display:block; height:100%; width:0%;
  background:var(--fuego);
}

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.hd{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--hd-h);
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--pad);
  background:var(--paper);
  border-bottom:var(--rule);
  transform:translateY(-101%);
  will-change:transform;
}
.hd.is-in{ transform:translateY(0); transition:transform .7s var(--ease-out); }
.hd.is-hidden{ transform:translateY(-101%); transition:transform .45s var(--ease); }

/* El lockup es un bloque de 3 líneas, casi cuadrado (680×637). Para que
   cumpla el ancho mínimo de 96 px de la guía, el header sube a 96 px. */
.hd__logo{
  display:block;
  flex:0 0 auto;
  line-height:0;
}
.hd__logo img{
  width:96px; height:auto;
}

.hd__nav{
  margin-left:auto;
  display:flex; align-items:center; gap:var(--s6);
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.hd__nav a{
  color:var(--ink);
  position:relative;
  padding:var(--s2) 0;
}
.hd__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--fuego);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease-out);
}
.hd__nav a:hover::after,
.hd__nav a.is-active::after{ transform:scaleX(1); }
.hd__nav a.is-active{ color:var(--fuego-text); }

.hd__act{ display:flex; align-items:center; gap:var(--s3); }

.hd__burger{
  display:none;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.hd__burger i{
  display:block; width:22px; height:2px; background:var(--ink);
  transition:transform .35s var(--ease), width .35s var(--ease);
}
.hd__burger i:last-child{ width:14px; }
body.nav-open .hd__burger i:first-child{ transform:translateY(4px) rotate(45deg); }
body.nav-open .hd__burger i:last-child{ width:22px; transform:translateY(-4px) rotate(-45deg); }

@media (max-width:860px){
  .hd__nav{ display:none; }
  .hd__act{ margin-left:auto; }
  .hd__burger{ display:flex; }
  .hd__logo img{ width:62px; }
}

/* ─────────────── Menú móvil ─────────────── */
.mob{
  position:fixed; inset:0; z-index:790;
  background:var(--ink);
  color:var(--paper);
  padding:calc(var(--hd-h) + var(--s7)) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0);
}
.mob[hidden]{ display:none; }
.mob__nav{ display:flex; flex-direction:column; }
.mob__nav a{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,9vw,48px);
  line-height:1.1;
  letter-spacing:-.03em;
  padding:var(--s4) 0;
  border-bottom:1px solid rgba(243,242,242,.18);
  display:flex; align-items:baseline; gap:var(--s4);
  transform:translateY(20px); opacity:0;
}
.mob__nav a em{
  font-family:var(--font-body);
  font-style:normal; font-weight:600;
  font-size:12px; letter-spacing:.18em;
  color:var(--fuego);
}
.mob__foot{
  font-size:13px; color:rgba(243,242,242,.6);
  display:flex; flex-direction:column; gap:var(--s1);
  padding-top:var(--s6);
}
.mob__foot a{ color:var(--limon); font-weight:600; margin-top:var(--s2); }

/* ════════════════════════════════════════════════════════════════
   RAIL DE SCROLL PERSONALIZADO
   ════════════════════════════════════════════════════════════════ */
.rail{
  position:fixed; right:calc(var(--pad) / 2); top:50%;
  transform:translateY(-50%);
  z-index:700;
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  opacity:0;
  pointer-events:none;
  color:var(--ink);
  transition:color .4s var(--ease);
}
.rail.is-dark{ color:var(--paper); }
.rail__label,.rail__pct{
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  writing-mode:vertical-rl;
  font-variant-numeric:tabular-nums;
}
.rail__label{ transform:rotate(180deg); }
.rail__track{
  width:2px; height:26vh; min-height:120px;
  background:rgba(32,30,29,.22);
  position:relative;
  transition:background-color .4s var(--ease);
}
.rail.is-dark .rail__track{ background:rgba(243,242,242,.32); }
.rail__track i{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:var(--fuego);
}
.rail.is-dark .rail__track i{ background:var(--limon); }
@media (max-width:860px){ .rail{ display:none; } }

/* ════════════════════════════════════════════════════════════════
   01 · HERO
   ════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:0; }
.hero__img,
.hero__gl{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* La foto del lugar va en blanco y negro de alto contraste (guía, punto 07) */
.hero__img{
  filter:grayscale(1) contrast(1.28) brightness(.92);
  transform:scale(1.06);
}
.hero__gl{ opacity:0; transition:opacity .8s var(--ease); }
.hero.gl-on .hero__gl{ opacity:1; }
.hero.gl-on .hero__img{ opacity:0; }
.hero__grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.16;
  pointer-events:none;
  mix-blend-mode:overlay;
}

/* Banda plana obligatoria detrás del texto (guía, punto 07) */
.hero__band{
  position:absolute;
  left:0; bottom:0;
  width:min(100%,880px);
  color:var(--paper);
  padding:clamp(28px,4vw,56px) clamp(20px,4vw,64px) clamp(24px,3vw,40px);
}
.hero__wipe{
  position:absolute; inset:0;
  background:var(--ink);
  transform-origin:left bottom;
  will-change:transform;
  z-index:0;
}
.hero__content{ position:relative; z-index:1; }
.hero__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(27px,7.2vw,72px);
  line-height:.95;
  letter-spacing:-.03em;
  margin:var(--s5) 0 var(--s5);
  color:var(--paper);
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln i{ display:block; font-style:normal; }
.hero__sub{
  font-size:clamp(15px,1.3vw,18px);
  max-width:48ch;
  color:rgba(243,242,242,.78);
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:var(--s3);
  margin-top:var(--s6);
}
.hero__scroll{
  display:flex; align-items:center; gap:var(--s3);
  margin-top:var(--s7);
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,242,242,.5);
}
.hero__scrollline{
  display:block; width:56px; height:2px;
  background:rgba(243,242,242,.25);
  overflow:hidden;
}
.hero__scrollline i{
  display:block; width:40%; height:100%;
  background:var(--fuego);
  animation:scrollsweep 2.4s var(--ease) infinite;
}
@keyframes scrollsweep{
  0%{ transform:translateX(-110%); }
  60%,100%{ transform:translateX(260%); }
}
@media (max-width:640px){
  .hero__scroll{ margin-top:var(--s5); }
  .hero__cta .btn{ flex:1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════
   FRANJA DE DATOS
   ════════════════════════════════════════════════════════════════ */
.strip{
  background:var(--ink);
  color:rgba(243,242,242,.72);
  border-top:2px solid var(--fuego);
  overflow:hidden;
  position:relative;
  z-index:2;
}
.strip__track{
  display:flex;
  width:max-content;
  animation:marquee 52s linear infinite;
  will-change:transform;
}
.strip:hover .strip__track,
.strip:focus-within .strip__track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.strip__row{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) 0 var(--s4) var(--pad);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
.strip__row > *{ margin-right:var(--s4); }
.strip__row > *:last-child{ margin-right:var(--s8); }
.strip__sep{ color:rgba(243,242,242,.3); }
.strip__status{
  display:inline-flex; align-items:center; gap:var(--s2);
  color:var(--ink); background:var(--limon);
  padding:var(--s1) var(--s3);
  font-weight:600;
}
.strip__status i{
  width:6px; height:6px; background:var(--ink);
  animation:pulse 2s ease-in-out infinite;
}
.strip__status.is-closed{ background:var(--line); color:var(--body); }
.strip__status.is-closed i{ animation:none; background:var(--mute); }
.strip__status em{ font-style:normal; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

@media (prefers-reduced-motion:reduce){
  .strip{ overflow-x:auto; }
  .strip__track{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════
   02 · EL DÍA
   ════════════════════════════════════════════════════════════════ */
.day{
  background:var(--ink);
  color:var(--paper);
  padding:var(--s9) 0;
  border-bottom:2px solid var(--fuego);
}
@media (max-width:860px){ .day{ padding:56px 0; } }

.day__head{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s5) var(--gutter);
  align-items:end;
}
.day__head .kicker{ grid-column:1 / -1; }
.day__lead{
  color:rgba(243,242,242,.7);
  max-width:62ch;
  font-size:16px;
  padding-bottom:var(--s2);
}
@media (max-width:860px){
  .day__head{ grid-template-columns:1fr; }
}

.day__stage{
  max-width:var(--max); margin:var(--s8) auto 0;
  padding:0 var(--pad);
}

/* ─────────────── Regla horaria ─────────────── */
.ruler{
  position:relative;
  border-top:1px solid rgba(243,242,242,.28);
  padding-top:var(--s3);
  margin-bottom:var(--s7);
  user-select:none;
}
.ruler__ticks{
  position:absolute; top:0; left:0; right:0; height:14px;
  pointer-events:none;
}
.ruler__ticks span{
  position:absolute; top:0;
  width:1px; height:6px;
  background:rgba(243,242,242,.35);
}
.ruler__ticks span.is-major{ height:12px; background:rgba(243,242,242,.6); }
.ruler__ticks span b{
  position:absolute; top:14px; left:0;
  font-family:var(--font-body);
  font-weight:600; font-size:10px; letter-spacing:.1em;
  color:rgba(243,242,242,.4);
  font-variant-numeric:tabular-nums;
}
.ruler__zones{
  display:flex;
  margin-top:var(--s6);
  border-left:1px solid rgba(243,242,242,.28);
}
.zone{
  flex:0 0 auto;
  border-right:1px solid rgba(243,242,242,.28);
  padding:var(--s4) var(--s3) var(--s4);
  text-align:left;
  color:rgba(243,242,242,.5);
  position:relative;
  transition:color .35s var(--ease), background-color .35s var(--ease);
  min-height:72px;
}
.zone::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height:2px; background:var(--fuego);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.zone:hover{ color:var(--paper); }
.zone.is-active{ color:var(--paper); background:rgba(243,242,242,.06); }
.zone.is-active::before{ transform:scaleX(1); }
.zone b{
  display:block;
  font-family:var(--font-display);
  font-weight:700; font-size:clamp(13px,1.3vw,17px);
  letter-spacing:-.01em; line-height:1.2;
  margin-bottom:var(--s1);
}
.zone em{
  font-style:normal; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  opacity:.7;
}
.ruler__now{
  position:absolute; top:-1px; bottom:0;
  width:2px; background:var(--limon);
  pointer-events:none;
  transition:left .6s var(--ease-out);
}
.ruler__now i{
  position:absolute; top:-4px; left:-3px;
  width:8px; height:8px; background:var(--limon);
}
.ruler__now span{
  position:absolute; top:-22px; left:0;
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--limon);
  padding:2px 6px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ─────────────── Panel del día ─────────────── */
.day__panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s8);
  align-items:start;
  border-top:1px solid rgba(243,242,242,.28);
  padding-top:var(--s7);
}
@media (max-width:900px){
  .day__panel{ grid-template-columns:1fr; gap:var(--s6); }
}
/* En móvil las franjas se apilan en dos columnas: la regla de arriba
   sigue mostrando la proporción real del día. */
@media (max-width:700px){
  .ruler__zones{
    display:grid; grid-template-columns:1fr 1fr;
    border-left:0; border-top:1px solid rgba(243,242,242,.28);
    margin-top:var(--s7);
  }
  .zone{
    flex-basis:auto !important;
    border-right:1px solid rgba(243,242,242,.28);
    border-bottom:1px solid rgba(243,242,242,.28);
    min-height:0;
  }
  .zone:nth-child(2n){ border-right:0; }
  .ruler{ margin-bottom:var(--s6); }
}
.day__num{
  font-size:11px; font-weight:600; letter-spacing:.18em;
  color:var(--fuego);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--s4);
}
.day__num b{ color:rgba(243,242,242,.3); font-weight:600; }
.day__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.05; letter-spacing:-.03em;
  color:var(--paper);
}
.day__hours{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--limon);
  margin-top:var(--s3);
  font-variant-numeric:tabular-nums;
}
.day__desc{
  color:rgba(243,242,242,.7);
  margin-top:var(--s5);
  max-width:52ch;
}
.day__list{
  margin:var(--s6) 0 var(--s6);
  border-top:1px solid rgba(243,242,242,.2);
}
.day__list li{
  display:flex; align-items:baseline; gap:var(--s4);
  padding:var(--s3) 0;
  border-bottom:1px solid rgba(243,242,242,.2);
}
.day__list b{
  font-family:var(--font-display);
  font-weight:700; font-size:17px; letter-spacing:-.01em;
  color:var(--paper);
  flex:1 1 auto;
}
.day__list u{
  text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--limon);
  padding:2px 6px;
}
.day__list span{
  font-weight:600; font-variant-numeric:tabular-nums;
  color:rgba(243,242,242,.85);
  flex:0 0 auto;
}

/* La comida va a color pleno: es el primer color de la página */
.day__figure{ margin:0; }
.day__imgwrap{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#100F0F;
}
.day__imgwrap img{
  width:100%; height:100%; object-fit:cover;
}
.day__mask{
  position:absolute; inset:0;
  background:var(--ink);
  transform-origin:right;
}
.day__figure figcaption{
  margin-top:var(--s3);
  font-size:12px; letter-spacing:.02em;
  color:rgba(243,242,242,.5);
}
@media (max-width:900px){
  .day__imgwrap{ aspect-ratio:3/2; }
}

/* ─────────────── Utilidades de animación ─────────────── */
[data-hero]{ will-change:transform,opacity; }
.rev{ opacity:0; transform:translateY(26px); }
.rev--in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rev,.rev--in{ opacity:1; transform:none; }
  .hero__img{ transform:none; }
}

/* ════════════════════════════════════════════════════════════════
   UTILIDADES DE LAYOUT
   ════════════════════════════════════════════════════════════════ */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--s4); top:-100px; z-index:9500;
  background:var(--ink); color:var(--paper);
  padding:var(--s3) var(--s4);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{ top:var(--s4); }

.btn--blanco{ background:var(--white); color:var(--ink); }
.btn--blanco:hover{ background:var(--ink); color:var(--paper); }
.btn--linea{ background:var(--ink); color:var(--paper); }
.btn--linea:hover{ background:var(--white); color:var(--ink); }

/* ─────────────── WhatsApp flotante (móvil) ─────────────── */
.wa{
  position:fixed; right:var(--s4); bottom:var(--s4); z-index:750;
  width:56px; height:56px;
  display:none; align-items:center; justify-content:center;
  background:var(--fuego); color:var(--white);
  transform:translateY(120%);
}
.wa svg{ width:28px; height:28px; }
.wa.is-in{ transform:translateY(0); transition:transform .5s var(--ease-out); }
@media (max-width:860px){ .wa{ display:flex; } }

/* ════════════════════════════════════════════════════════════════
   03 · LA CARTA
   ════════════════════════════════════════════════════════════════ */
.carta{
  background:var(--paper);
  padding:var(--s9) 0;
  border-top:var(--rule);
}
@media (max-width:860px){ .carta{ padding:56px 0; } }

.carta__head{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--gutter);
  align-items:end;
}
.carta__head .kicker{ grid-column:1 / -1; }
.carta__lead{ color:var(--body); padding-bottom:var(--s2); }
@media (max-width:860px){ .carta__head{ grid-template-columns:1fr; } }

/* Destacados con foto */
.dest{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--gutter);
  margin-top:var(--s8);
}
@media (max-width:900px){ .dest{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .dest{ grid-template-columns:1fr; } }

.dcard{ display:block; }
.dcard__img{
  position:relative; overflow:hidden;
  aspect-ratio:4/5; background:var(--line);
}
.dcard__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.001);
  transition:transform .8s var(--ease-out);
}
.dcard:hover .dcard__img img{ transform:scale(1.05); }
.dcard__cat{
  margin-top:var(--s3);
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fuego-text);
}
.dcard__n{
  font-family:var(--font-display); font-weight:700;
  font-size:19px; line-height:1.2; letter-spacing:-.01em;
  color:var(--ink); margin-top:var(--s2);
}
.dcard__d{ font-size:14px; color:var(--body); margin-top:var(--s2); }
.dcard__p{
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink);
}

/* Controles */
/* Buscador y contador: parte del flujo, se van al hacer scroll */
.carta__tools{
  margin-top:var(--s9);
  padding:var(--s5) 0 var(--s4);
  border-top:var(--rule);
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
}

/* Lo unico que queda fijo es la fila de categorias: 56 px de alto
   siempre, para que no tape la carta al navegarla. El offset sigue
   al header, que se esconde al bajar. */
.carta__ctrl{
  padding:var(--s3) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:sticky; top:var(--sticky-top,var(--hd-h)); z-index:60;
  background:var(--paper);
  transition:top .45s var(--ease);
}
.chips{
  display:flex; gap:var(--s2); flex-wrap:nowrap;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--s2);
  /* El degradado del borde avisa que la fila sigue hacia el lado */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.chips::-webkit-scrollbar{ display:none; }
.chip{ scroll-snap-align:start; }
.chip{
  min-height:40px; padding:0 var(--s4);
  border:1px solid var(--line);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--body); background:var(--white);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.buscar{ position:relative; flex:0 0 auto; width:min(320px,100%); }
.buscar__in{
  width:100%; height:40px;
  border:1px solid var(--line); background:var(--white);
  padding:0 var(--s7) 0 var(--s3);
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  min-width:0;
  border-radius:0; -webkit-appearance:none;
}
.buscar__in::placeholder{ color:var(--mute); }
.buscar__in:focus{ outline:2px solid var(--fuego); outline-offset:2px; border-color:var(--fuego); }
.buscar__x{
  position:absolute; right:0; top:0; width:40px; height:40px;
  font-size:20px; line-height:1; color:var(--body);
}
.buscar__x:hover{ color:var(--fuego); }

.carta__count{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
}
/* El primer grupo arranca despues del contador, no pegado a la barra */
.menu{ scroll-margin-top:calc(var(--hd-h) + 80px); }
.grupo{ scroll-margin-top:calc(var(--hd-h) + 80px); }

/* Listado */
.menu{ margin-top:var(--s5); }
.grupo{ margin-top:var(--s8); }
.grupo__cat{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s5);
  border-top:var(--rule); padding-top:var(--s4);
  flex-wrap:wrap;
}
.grupo__cat h3{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(22px,2.6vw,30px); line-height:1.1; letter-spacing:-.02em;
  color:var(--ink);
}
.grupo__nota{ font-size:14px; color:var(--body); max-width:52ch; }
.grupo__sub{
  margin-top:var(--s6);
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fuego-text);
}
.grupo__items{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:var(--s8);
  margin-top:var(--s3);
}
.grupo__items::before{
  content:''; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:var(--line);
}
@media (max-width:860px){
  .grupo__items{ grid-template-columns:1fr; }
  .grupo__items::before{ display:none; }
}
.plato{
  display:grid; grid-template-columns:1fr auto;
  gap:var(--s2) var(--s4);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.plato__n{
  font-family:var(--font-display); font-weight:700;
  font-size:17px; line-height:1.25; letter-spacing:-.01em;
  color:var(--ink);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
}
.plato__p{
  font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--ink); white-space:nowrap;
}
.plato__d{
  grid-column:1 / 2;
  font-size:14px; line-height:1.5; color:var(--body);
  max-width:56ch;
}
.tag{
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:2px 6px; white-space:nowrap;
}
.tag--dieta{ background:var(--ink); color:var(--paper); }
.tag--dest{ background:var(--limon); color:var(--ink); }
.tag--dato{ border:1px solid var(--ink); color:var(--ink); }

.carta__vacio{
  padding:var(--s8) 0; border-top:var(--rule);
  font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink);
}
.carta__nota{
  margin-top:var(--s8); padding-top:var(--s4);
  border-top:var(--rule);
  font-size:14px; color:var(--body);
}
.carta__nota b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   04 · EL PATIO  (única sección en Madera)
   ════════════════════════════════════════════════════════════════ */
.patio{
  background:var(--madera);
  color:var(--paper);
  padding:var(--s9) 0;
}
@media (max-width:860px){ .patio{ padding:56px 0; } }
.patio__head{ margin-bottom:var(--s8); }
.patio__head .h2{ margin-top:var(--s5); }

.patio__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s8);
  align-items:start;
}
.patio__fig{ margin:0; overflow:hidden; }
/* El lugar y las personas van en blanco y negro de alto contraste */
.patio__fig img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.24) brightness(.98);
}
.patio__fig--a{ grid-column:1; aspect-ratio:4/3; }
.patio__fig--b{ grid-column:1; aspect-ratio:3/4; }
.patio__texto{ grid-column:2; grid-row:1 / span 2; position:sticky; top:calc(var(--hd-h) + var(--s6)); }
@media (max-width:900px){
  .patio__grid{ grid-template-columns:1fr; gap:var(--s6); }
  .patio__fig--a,.patio__fig--b{ grid-column:1; }
  .patio__texto{ grid-column:1; grid-row:auto; position:static; }
  .patio__fig--b{ aspect-ratio:4/3; }
}
.patio__p{ font-size:17px; color:var(--paper); max-width:56ch; }
.patio__p--sec{ margin-top:var(--s4); color:rgba(243,242,242,.88); }

.hechos{ margin:var(--s7) 0 var(--s6); border-top:1px solid rgba(243,242,242,.35); }
.hechos li{
  padding:var(--s4) 0;
  border-bottom:1px solid rgba(243,242,242,.35);
  display:grid; grid-template-columns:minmax(150px,.5fr) 1fr; gap:var(--s4);
  align-items:baseline;
}
.hechos b{
  font-family:var(--font-display); font-weight:700; font-size:17px;
  letter-spacing:-.01em; color:var(--paper);
}
.hechos span{ font-size:15px; color:rgba(243,242,242,.88); }
@media (max-width:520px){ .hechos li{ grid-template-columns:1fr; gap:var(--s1); } }

/* ════════════════════════════════════════════════════════════════
   05 · CÓMO LLEGAR
   ════════════════════════════════════════════════════════════════ */
.llegar{ background:var(--paper); padding:var(--s9) 0; }
@media (max-width:860px){ .llegar{ padding:56px 0; } }
.llegar__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--s8);
  align-items:start;
}
@media (max-width:900px){ .llegar__grid{ grid-template-columns:1fr; gap:var(--s6); } }
.llegar__info .h2{ margin-top:var(--s5); }
.llegar__acc{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6); }
.llegar__acc .btn{ flex:0 1 auto; }

.horario{
  width:100%; margin-top:var(--s7);
  border-collapse:collapse;
  border-top:var(--rule);
}
.horario th,.horario td{
  text-align:left; padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.horario th{ font-weight:600; color:var(--ink); }
.horario td{ color:var(--body); font-variant-numeric:tabular-nums; text-align:right; }

.llegar__mapa{
  aspect-ratio:4/3; border:var(--rule); background:var(--line);
  overflow:hidden;
}
.llegar__mapa iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(1.06);
}
@media (max-width:520px){ .llegar__mapa{ aspect-ratio:1/1; } }

/* ════════════════════════════════════════════════════════════════
   06 · RESERVA
   ════════════════════════════════════════════════════════════════ */
.reserva{
  background:var(--paper); padding:var(--s9) 0;
  border-top:var(--rule);
}
@media (max-width:860px){ .reserva{ padding:56px 0; } }
.reserva__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s8);
  align-items:start;
}
@media (max-width:900px){ .reserva__grid{ grid-template-columns:1fr; gap:var(--s7); } }
.reserva__intro .h2{ margin-top:var(--s5); }
.reserva__lead{ color:var(--body); margin-top:var(--s5); }
.reglas{ margin-top:var(--s6); border-top:1px solid var(--line); }
.reglas li{
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
  font-size:15px; color:var(--body);
  display:flex; gap:var(--s3);
}
.reglas li::before{ content:'—'; color:var(--fuego); flex:0 0 auto; }

.form{ border-top:var(--rule); padding-top:var(--s6); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
@media (max-width:420px){ .form__row{ grid-template-columns:1fr; } }
.campo{ display:block; margin-bottom:var(--s4); }
.campo label{
  display:block; margin-bottom:var(--s2);
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
}
.campo label span{ color:var(--body); letter-spacing:.1em; }
.campo input,.campo select{
  width:100%; height:48px;
  border:1px solid var(--line); background:var(--white);
  padding:0 var(--s3);
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23201E1D' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:var(--s7);
}
.campo input:focus,.campo select:focus{
  outline:2px solid var(--fuego); outline-offset:2px; border-color:var(--fuego);
}
.campo.is-error input,.campo.is-error select{ border:2px solid var(--fuego); }
.form__error{
  color:var(--fuego-text); font-size:14px; font-weight:600;
  margin-bottom:var(--s4);
}
.form__send{ width:100%; margin-top:var(--s2); }
.form__nota{
  margin-top:var(--s4); font-size:13px; color:var(--body);
  border-left:2px solid var(--line); padding-left:var(--s3);
  min-height:1px;
}

/* ════════════════════════════════════════════════════════════════
   CARTEL DE CIERRE  (única sección en Fuego, a sangre)
   ════════════════════════════════════════════════════════════════ */
.cartel{ background:var(--fuego); color:var(--white); padding:var(--s9) 0; }
@media (max-width:860px){ .cartel{ padding:56px 0; } }
.cartel__t{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(34px,6vw,72px); line-height:.98; letter-spacing:-.03em;
  color:var(--white);
}
.cartel__p{
  margin-top:var(--s5);
  font-size:20px; font-weight:700; line-height:1.45;
  color:var(--white); max-width:46ch;
}
.cartel__cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s7); }
.cartel :focus-visible{ outline-color:var(--white); }

/* ════════════════════════════════════════════════════════════════
   PIE
   ════════════════════════════════════════════════════════════════ */
.pie{ background:var(--ink); color:rgba(243,242,242,.88); padding:var(--s8) 0 var(--s6); }
.pie__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--s6) var(--gutter);
  padding-bottom:var(--s7);
  border-bottom:1px solid rgba(243,242,242,.28);
}
@media (max-width:860px){ .pie__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .pie__grid{ grid-template-columns:1fr; } }
.pie__logo{ width:132px; height:auto; }
.pie__k{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(243,242,242,.6); margin-bottom:var(--s3);
}
.pie__col p{ font-size:15px; line-height:1.6; }
.pie__col a{ color:var(--limon); font-weight:600; }
.pie__col a:hover{ color:var(--white); }
.pie__base{
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  padding-top:var(--s5);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,242,242,.55);
}
.llegar__ref{
  margin-top:var(--s5);
  font-size:15px; color:var(--body);
}

/* ════════════════════════════════════════════════════════════════
   FAVORITOS · carrusel coverflow 3D
   Port del componente React a JS plano, re-estilado al sistema:
   radio 0, sin sombras difusas, sin degradados dorados, texto a la
   izquierda. El ambiente de fondo va en B/N y la comida a color.
   ════════════════════════════════════════════════════════════════ */
.fav{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:var(--s9) 0 var(--s8);
  overflow:hidden;
  border-top:2px solid var(--fuego);
  user-select:none;
}
@media (max-width:860px){ .fav{ padding:56px 0 var(--s7); } }

/* Ambiente: la misma foto, en blanco y negro, muy oscura y fuera de foco */
.fav__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.fav__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.26) blur(30px);
  transform:scale(1.18);
  opacity:.55;
  transition:opacity .9s var(--ease);
}
.fav__bg::after{
  content:''; position:absolute; inset:0;
  background:var(--ink);
  opacity:.55;
}

.fav__inner{ position:relative; z-index:1; }
.fav__head{ margin-bottom:var(--s8); }
.fav__head .h2{ margin-top:var(--s5); }
.fav__head .lead{ color:rgba(243,242,242,.72); margin-top:var(--s4); }

/* ─────────────── Escenario 3D ─────────────── */
.fav__stage{
  position:relative;
  height:clamp(420px,62vh,520px);
  display:flex; align-items:center; justify-content:center;
  perspective:1400px;
  margin-bottom:var(--s7);
  touch-action:pan-y;
}
.fav__stage:focus-visible{ outline:2px solid var(--limon); outline-offset:6px; }

.fcard{
  position:absolute;
  width:clamp(250px,72vw,330px);
  height:clamp(420px,62vh,500px);
  overflow:hidden;
  background:#141110;
  border:1px solid rgba(243,242,242,.16);
  transform-origin:center center;
  transition:transform .8s cubic-bezier(.25,1,.5,1),
             opacity .8s cubic-bezier(.25,1,.5,1),
             filter .8s cubic-bezier(.25,1,.5,1);
  will-change:transform,opacity;
  cursor:pointer;
}
.fcard.is-center{ cursor:default; }
/* La comida va a color pleno: solo las tarjetas del fondo se apagan */
.fcard__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.fcard__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(32,30,29,.55) 0%,
    rgba(32,30,29,.05) 26%,
    rgba(32,30,29,.72) 62%,
    rgba(32,30,29,.97) 100%);
}
.fcard__body{
  position:relative; z-index:2;
  height:100%;
  padding:var(--s4);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.fcard.is-center .fcard__body{ opacity:1; transform:none; pointer-events:auto; }

.fcard__top{ display:flex; }
.fcard__t{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,3.4vw,30px);
  line-height:.98; letter-spacing:-.03em;
  color:var(--paper);
}
.fcard__t em{
  display:block; font-style:normal; font-weight:700;
  font-size:.72em; color:rgba(243,242,242,.82);
  margin-top:2px;
}
.fcard__rule{
  display:block; width:34px; height:2px;
  background:var(--fuego);
  margin:var(--s3) 0;
}
.fcard__d{
  font-size:14px; line-height:1.45;
  color:rgba(243,242,242,.86);
  margin-bottom:var(--s3);
}
.fcard__p{
  font-weight:600; font-size:17px;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
  margin-bottom:var(--s3);
}
.fcard__cta{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:40px; padding:0 var(--s4);
  background:var(--fuego); color:var(--white);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  align-self:flex-start;
  transition:background-color .25s var(--ease);
}
.fcard__cta:hover{ background:var(--fuego-hover); }
.fcard__cta svg{ width:13px; height:13px; }

/* ─────────────── Controles ─────────────── */
.fav__ctrl{
  display:flex; align-items:center; gap:var(--s4);
  border-top:1px solid rgba(243,242,242,.28);
  padding-top:var(--s5);
}
.fav__arrow{
  width:48px; height:48px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(243,242,242,.4);
  color:var(--paper);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.fav__arrow:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.fav__arrow svg{ width:20px; height:20px; }

.fav__dots{ display:flex; align-items:center; gap:var(--s2); flex:1 1 auto; }
.fav__dot{
  height:4px; width:18px;
  background:rgba(243,242,242,.28);
  transition:background-color .3s var(--ease), width .3s var(--ease);
}
.fav__dot.is-on{ background:var(--fuego); width:40px; }
.fav__dot:hover{ background:rgba(243,242,242,.6); }

.fav__num{
  font-size:12px; font-weight:600; letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  color:rgba(243,242,242,.62);
  flex:0 0 auto;
}
.fav__num b{ color:var(--paper); font-weight:600; }

@media (max-width:640px){
  .fav__dots{ display:none; }
  .fav__ctrl{ justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  .fcard{ transition:none; }
  .fav__bg img{ filter:grayscale(1) brightness(.26); }
}

.pie__nomine{
  padding-top:var(--s4);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,242,242,.55);
}
.pie__nomine a{ color:var(--limon); }
.pie__nomine a:hover{ color:var(--white); }
.pie__nomine span[aria-hidden]{ letter-spacing:0; }