/* =============================================================
   AYERZA — "Tradición en buen comer" · desde 1985
   Hoja de estilos única. Identidad aplicada según
   "Ayerza - Manual de marca" (Identidad visual v1, abril 2024).

   Estructura del archivo:
     1. TOKENS DE MARCA
     2. Contexto oscuro (.on-dark)
     3. Reset y base
     4. Tipografía y utilidades
     5. Componentes (botones, sellos, reveal)
     6. Header y navegación
     7. Hero
     8. Institucional
     9. Cenas Especiales
    10. Nuestros Platos
    11. Carta + visor
    12. Sedes
    13. Footer
    14. WhatsApp flotante
    15. Accesibilidad / motion
   ============================================================= */


/* =============================================================
   1. TOKENS DE MARCA
   -------------------------------------------------------------
   Los tres colores de marca y las cuatro tipografías salen de acá.
   Todo lo demás del archivo se deriva de estos valores.
   ============================================================= */
:root{

  /* ---- Paleta oficial (manual de marca, pág. 6) ----
     Marrones y azules: "la calidez, la familiaridad y la
     autenticidad de lo tradicional, lo acogedor y lo casero."   */
  --brand-ocre: #975F1D;   /* R151 G95  B29   — acento, CTA      */
  --brand-navy: #082141;   /* R8   G33  B65   — base oscura      */
  --brand-ice:  #D9FFFF;   /* R217 G255 B255  — claro de marca   */

  /* Versiones rgb() sueltas, para scrims y transparencias */
  --rgb-navy: 8 33 65;
  --rgb-ice:  217 255 255;
  --rgb-ocre: 151 95 29;

  /* ---- Roles semánticos — contexto CLARO (por defecto) ----
     El estilo fotográfico de la marca es luminoso y limpio sobre
     fondos claros, así que el sitio es claro por defecto y usa
     el navy para bloques de contraste.                          */
  --c-bg:            #FFFFFF;
  --c-bg-alt:        var(--brand-ice);
  --c-surface:       #FFFFFF;
  --c-ink:           var(--brand-navy);
  /* Las opacidades están calibradas para cumplir WCAG AA (≥4.5:1)
     sobre blanco. Bajarlas rompe el contraste de los rótulos. */
  --c-ink-soft:      rgb(var(--rgb-navy) / .74);   /* 6.9:1 */
  --c-ink-mute:      rgb(var(--rgb-navy) / .62);   /* 4.7:1 */
  --c-primary:       var(--brand-ocre);
  --c-primary-hover: #7C4E17;
  --c-on-primary:    #FFFFFF;
  --c-accent:        var(--brand-ocre);
  --c-line:          rgb(var(--rgb-navy) / .14);
  --c-line-strong:   rgb(var(--rgb-navy) / .32);
  --c-scrim:         var(--rgb-navy);   /* base de los degradados sobre foto */
  --c-wa:            #25D366;           /* verde WhatsApp, fijo */

  /* ---- Tipografías (manual de marca, págs. 11–14) ----
     Las fuentes de marca van PRIMERO en cada stack: al subir los
     .woff2 licenciados a assets/fonts/ y declararlos con
     @font-face, toman el control solas y los sustitutos de Google
     Fonts quedan como respaldo. Ver README.

       Espiritu Condensed  → titulares, SIEMPRE en mayúsculas
       Trade Gothic Next…  → bajadas y datos, mayúsculas, +75 tracking
       Espiritu Script     → textos complemento, cursiva minúscula
       Aileron Regular     → cajas de texto                       */
  --font-display: 'Espiritu Condensed', 'Staatliches', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-meta:    'Trade Gothic Next LT Pro Bold Compressed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-script:  'Espiritu Script', 'Yellowtail', 'Segoe Script', cursive;
  --font-text:    'Aileron', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Interletrado +75 pt del manual ≈ .075em */
  --tracking-meta:    .075em;
  --tracking-eyebrow: .16em;
  --tracking-btn:     .09em;

  /* ---- Escala tipográfica fluida ---- */
  --fs-h1:      clamp(3rem, 10vw, 7rem);
  --fs-h2:      clamp(2.1rem, 5.2vw, 3.75rem);
  --fs-h3:      clamp(1.4rem, 2.6vw, 2rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:   .875rem;
  --fs-eyebrow: .75rem;

  /* ---- Espaciado y layout ---- */
  --container:  1280px;
  --gutter:     1.25rem;
  --section-y:  clamp(4rem, 9vw, 8.5rem);
  --radius:     2px;   /* el manual prohíbe deformar: bordes casi rectos */
  --radius-lg:  3px;
  --radius-btn: 8px;   /* redondeo de botones (subir a 999px = tipo píldora) */
  --header-h:   74px;

  /* ---- Transiciones y sombras ---- */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --t-fast: .22s var(--ease);
  --t-slow: .55s var(--ease);
  --t-reveal: 1.5s var(--ease);   /* aparición al scrollear (más lento = más suave) */
  --shadow: 0 18px 50px -22px rgb(var(--rgb-navy) / .45);
}

@media (min-width: 768px){
  :root{ --gutter: 2rem; --header-h: 92px; }
}


/* =============================================================
   2. CONTEXTO OSCURO
   -------------------------------------------------------------
   .on-dark redefine los mismos roles sobre navy. Como todo el
   archivo lee tokens, cualquier componente puesto adentro se
   adapta solo: no hay reglas de color duplicadas.
   ============================================================= */
/* Sólo redefine tokens. El header, el nav mobile y el menú del FAB
   viven siempre sobre navy pero manejan su propio fondo (degradado,
   panel deslizante), así que toman los tokens sin heredar el
   background. */
.on-dark,
.site-header,
.nav,
.wa-fab__menu{
  --c-bg:          var(--brand-navy);
  --c-bg-alt:      #0C2A4F;
  --c-surface:     #0C2A4F;
  --c-ink:         var(--brand-ice);
  --c-ink-soft:    rgb(var(--rgb-ice) / .76);   /* 9.3:1 sobre navy */
  --c-ink-mute:    rgb(var(--rgb-ice) / .60);   /* 5.3:1 sobre navy */
  --c-accent:      #C98A34;   /* ocre aclarado: el #975F1D no contrasta sobre navy */
  --c-line:        rgb(var(--rgb-ice) / .18);
  --c-line-strong: rgb(var(--rgb-ice) / .36);
}

.on-dark{
  background:var(--c-bg);
  color:var(--c-ink);
}


/* =============================================================
   3. RESET Y BASE
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; }

/* El recorte horizontal va en <html>, NO en <body>: `overflow-x` en
   el body lo convierte en contenedor de scroll y rompe window.scrollY
   (se caen el header sticky y las animaciones de entrada). `clip`
   recorta sin crear un scroller nuevo; `hidden` es el fallback para
   Safari < 16. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  overflow-x:hidden;
}
@supports (overflow:clip){
  html{ overflow-x:clip; }
}

/* Bloqueo de scroll (nav mobile abierto / visor de la carta).
   Va sobre <html> porque ahí vive el scroll de la página. */
html.is-locked,
html.is-locked body{ overflow:hidden; }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

h1,h2,h3,h4,p,dl,dd,figure,address{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }

::selection{ background:var(--brand-ocre); color:#fff; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--brand-ice); }

/* --- Recursos gráficos decorativos (manual: "Recursos gráficos") ---
   Ilustraciones duotono de la marca (sartén, palote, morrones, mortero,
   cuchara) usadas como acento sutil de fondo, imitando el gesto de foto
   vieja. Van DETRÁS del contenido y no son interactivas. `overflow:clip`
   en el host evita que asomen fuera de la sección o generen scroll-x. */
.has-deco{ position:relative; overflow:clip; }
.has-deco > .container,
.has-deco > .cenas__grid,
.has-deco > .platos__viewport{ position:relative; z-index:1; }
.deco{
  position:absolute; z-index:0;
  pointer-events:none; user-select:none;
  height:auto; opacity:.12;
}
.on-dark .deco{ opacity:.16; }
@media (max-width:640px){
  .deco{ opacity:.07; }
  .deco--hide-mobile{ display:none; }
}

.icon{ width:1.25em; height:1.25em; fill:currentColor; flex:none; }


/* =============================================================
   4. TIPOGRAFÍA Y UTILIDADES
   ============================================================= */

/* Titulares: Espiritu Condensed, siempre en mayúsculas (manual pág. 11) */
.h1,.h2,.h3{
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.005em;
}
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); }

/* Bajadas y datos: mayúsculas + interletrado +75 (manual pág. 12) */
.meta{
  font-family:var(--font-meta);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--tracking-meta);
}

/* Textos complemento: cursiva minúscula (manual pág. 13) */
.script{
  font-family:var(--font-script);
  font-style:italic;
  text-transform:lowercase;
  font-weight:400;
  letter-spacing:0;
}

.eyebrow{
  margin-bottom:.9rem;
  color:var(--c-accent);
  font-family:var(--font-meta);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}

.section-head{
  max-width:60ch; margin-inline:auto;
  margin-bottom:clamp(2.5rem,5vw,4rem);
  text-align:center;
}
.section-head__text{ margin-top:1.1rem; color:var(--c-ink-soft); }

/* Variante con controles (platos): título centrado y la navegación debajo. */
.section-head--row{
  display:flex; flex-direction:column; align-items:center;
  gap:1.25rem; max-width:60ch;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--brand-ocre); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{ left:0; }


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

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.7rem;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  font-family:var(--font-meta);
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:var(--tracking-btn);
  text-transform:uppercase;
  text-align:center;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--c-primary); color:var(--c-on-primary); }
.btn--primary:hover{ background:var(--c-primary-hover); }

.btn--ghost{ border-color:var(--c-line-strong); color:var(--c-ink); }
.btn--ghost:hover{ border-color:currentColor; background:rgb(var(--rgb-ocre) / .08); }
.on-dark .btn--ghost:hover{ background:rgb(var(--rgb-ice) / .1); }

/* En el hero el botón ghost se apoya sobre la foto: le damos un fondo
   translúcido y borde más marcado para que se lea siempre. */
.hero__actions .btn--ghost{
  border-color:rgb(var(--rgb-ice) / .55);
  background:rgb(var(--rgb-navy) / .30);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.hero__actions .btn--ghost:hover{
  border-color:var(--brand-ice);
  background:rgb(var(--rgb-navy) / .5);
}

.btn--lg{ padding:1.05rem 2.2rem; }

/* ---- Sello ----
   Recurso gráfico del manual (pág. 15): frases distintivas dentro
   de una guarda ovalada, con el "19 · 85" flanqueando el texto.   */
.sello{
  display:grid; place-items:center; gap:.15rem;
  width:min(100%, 300px);
  padding:2rem 1.75rem;
  border:1.5px solid currentColor;
  border-radius:50%/28%;
  color:var(--c-accent);
  text-align:center;
}
.sello__line{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  text-transform:uppercase;
  line-height:1;
}
.sello__year{
  font-family:var(--font-display);
  font-size:.95rem;
  border-bottom:1px solid currentColor;
  padding-bottom:.1rem;
}
.sello__text{
  font-family:var(--font-meta);
  font-size:.7rem;
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  line-height:1.4;
}
.sello__script{ font-size:1.1rem; margin-top:.35rem; }

/* Línea protagonista del sello (palabra/s grandes) */
.sello__big{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.35rem;
  text-transform:uppercase;
  line-height:1.02;
}
/* --- Variantes de color (según el manual) --- */
.sello--navy{ background:var(--brand-navy); color:var(--brand-ice); border-color:transparent; }
.sello--ocre{ background:var(--brand-ocre); color:var(--brand-ice); border-color:rgb(var(--rgb-ice) / .7); }
.sello--ice{  background:var(--brand-ice);  color:var(--brand-ocre); border-color:transparent; }

/* --- Variantes de forma --- */
.sello--oval{ border-radius:50% / 38%; }
.sello--pill{ border-radius:44% / 24%; }
.sello--diamond{
  position:relative;
  border:none; border-radius:0;
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Puntitos en las puntas laterales del rombo */
.sello--diamond::before,
.sello--diamond::after{
  content:''; position:absolute; top:50%;
  width:5px; height:5px; border-radius:50%;
  background:currentColor; transform:translateY(-50%);
}
.sello--diamond::before{ left:12%; }
.sello--diamond::after{ right:12%; }

/* Versión compacta del sello (para esquinas de fotos) */
.sello--sm{ width:min(52%, 172px); padding:1.05rem .9rem; }
.sello--sm .sello__line{ font-size:.9rem; gap:.35rem; }
.sello--sm .sello__year{ font-size:.62rem; }
.sello--sm .sello__big{ font-size:.92rem; }
.sello--sm .sello__text{ font-size:.54rem; }
.sello--sm .sello__script{ font-size:.8rem; margin-top:.15rem; }

/* Ajustes por forma en tamaño compacto */
.sello--sm.sello--pill{ width:min(42%,136px); padding:2.4rem .8rem 2.1rem; }
.sello--sm.sello--diamond{ width:min(62%,205px); padding:2.5rem 1.1rem; }
.sello--sm.sello--diamond .sello__big{ font-size:.8rem; }
.sello--sm.sello--diamond .sello__text{ font-size:.5rem; }
.sello--sm.sello--diamond .sello__script{ font-size:.72rem; }

/* ---- Animación de entrada ---- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-reveal), transform var(--t-reveal);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---- Foco visible ---- */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
}


/* =============================================================
   6. HEADER Y NAVEGACIÓN
   -------------------------------------------------------------
   El header vive siempre en contexto oscuro (transparente sobre
   el hero navy, o navy sólido al scrollear), así que hereda .on-dark.
   ============================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:box-shadow var(--t-fast);
}
/* Dos capas de fondo para una transición fluida al scrollear:
   no se puede animar de un degradado a un color sólido, así que
   dejamos el degradado siempre y hacemos aparecer el navy sólido
   por encima con opacidad. */
.site-header::before,
.site-header::after{
  content:''; position:absolute; inset:0;
  transition:opacity var(--t-fast);
  pointer-events:none;
}
.site-header::before{
  /* Degradado del hero (contenido en el header). */
  background:linear-gradient(to bottom,
    rgb(var(--rgb-navy) / 1) 0%,
    rgb(var(--rgb-navy) / .92) 40%,
    rgb(var(--rgb-navy) / .6) 72%,
    rgb(var(--rgb-navy) / 0) 100%);
}
.site-header::after{
  background:var(--brand-navy);
  opacity:0;
}
.site-header.is-stuck::after{ opacity:1; }
.site-header.is-stuck{ box-shadow:0 1px 0 rgb(var(--rgb-ice) / .14); }

.header__inner{
  position:relative; z-index:1;   /* el contenido va por encima de las capas de fondo */
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}

/* El logo del header no se muestra en el inicio (el hero ya tiene el logo
   grande); aparece al scrollear, cuando el header se fija. */
.header__logo{
  color:var(--c-ink); flex:none;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-fast), visibility var(--t-fast);
}
.site-header.is-stuck .header__logo{ opacity:1; visibility:visible; }
.header__logo img{ height:40px; width:auto; }
@media (min-width:768px){ .header__logo img{ height:50px; } }

/* --- Nav mobile: panel deslizante --- */
.nav{
  position:fixed; inset:0 0 0 auto;
  width:min(88vw, 380px);
  padding:calc(var(--header-h) + .5rem) var(--gutter) 2rem;
  background:var(--brand-navy);
  border-left:1px solid var(--c-line);
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:1.5rem;
  transform:translateX(100%);
  transition:transform var(--t-slow);
  overflow-y:auto;
  pointer-events:none;   /* cerrado: no intercepta toques (deja libre la hamburguesa) */
}
.nav.is-open{ transform:none; pointer-events:auto; }

.nav__list{ display:flex; flex-direction:column; gap:.15rem; }

.nav__link{
  display:block; padding:.42rem 0;
  font-family:var(--font-display);
  font-size:1.5rem;
  text-transform:uppercase;
  color:var(--c-ink);
  transition:color var(--t-fast);
}
.nav__link:hover,
.nav__link.is-active{ color:var(--c-accent); }

.nav__aside{ display:flex; flex-direction:column; gap:1.5rem; }

.social{ display:flex; gap:.5rem; }
.social a{
  display:grid; place-items:center;
  width:40px; height:40px;
  color:var(--c-ink);
  border:1.5px solid var(--c-line-strong);
  border-radius:50%;
  transition:color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.social a:hover{
  color:var(--brand-navy);
  background:var(--brand-ice);
  border-color:var(--brand-ice);
}
.social .icon{ width:21px; height:21px; }

/* --- Botón hamburguesa --- */
.nav-toggle{
  position:relative; z-index:101;
  width:44px; height:44px;
  display:grid; place-content:center; gap:6px;
  margin-right:-.5rem;
  color:var(--brand-ice);
}
.nav-toggle span{
  display:block; width:26px; height:1.5px;
  background:currentColor;
  transition:transform var(--t-fast), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* --- Nav desktop --- */
@media (min-width:1080px){
  /* Logo a la izquierda, links de secciones CENTRADOS en la barra, y
     Reservas/redes a la derecha. Con grid 1fr auto 1fr los links quedan
     centrados respecto de toda la barra (no importa el ancho del logo). */
  .header__inner{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  }
  .nav{ display:contents; pointer-events:auto; }   /* los links y el aside pasan a ser columnas */
  .header__logo{ justify-self:start; }
  .nav__list{
    justify-self:center;
    flex-direction:row; align-items:center; gap:1.6rem;
  }
  .nav__link{
    padding:0;
    font-family:var(--font-meta);
    font-size:var(--fs-small);
    letter-spacing:var(--tracking-meta);
    color:var(--c-ink-soft);
  }
  /* Iconos de redes + botón Reservas: igual que el logo, no se muestran en
     el hero (header transparente, se ven lavados); aparecen al scrollear,
     cuando el header se fija en navy sólido. Solo desktop: en mobile este
     bloque vive dentro del menú hamburguesa y debe seguir siempre visible. */
  .nav__aside{
    justify-self:end; flex-direction:row; align-items:center; gap:1.25rem;
    opacity:0; visibility:hidden;
    transition:opacity var(--t-fast), visibility var(--t-fast);
  }
  .site-header.is-stuck .nav__aside{ opacity:1; visibility:visible; }
  .social a{ width:34px; height:34px; }
  .nav-toggle{ display:none; }
}

/* Backdrop del nav mobile */
.nav-backdrop{
  position:fixed; inset:0; z-index:99;
  background:rgb(var(--rgb-navy) / .65);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-fast);
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
@media (min-width:1080px){ .nav-backdrop{ display:none; } }


/* =============================================================
   7. HERO
   ============================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding-block:calc(var(--header-h) + 3rem) clamp(4rem,10vh,7rem);
  overflow:hidden;
}

.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,
.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    /* Degradado desde la izquierda: oscurece el lado del slogan y deja
       ver la foto (la pared de vinos) hacia la derecha. */
    /* Oscurecimiento centrado detrás del slogan, dejando ver la foto
       (la pared de vinos) hacia los bordes. */
    radial-gradient(ellipse 82% 72% at 50% 50%,
      rgb(var(--rgb-navy) / .82) 0%,
      rgb(var(--rgb-navy) / .42) 55%,
      rgb(var(--rgb-navy) / .12) 100%),
    /* Toques superior e inferior para asegurar la lectura. */
    linear-gradient(to top,
      rgb(var(--rgb-navy) / .45) 0%,
      rgb(var(--rgb-navy) / 0) 28%);
}

.hero__content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}

/* Logo grande de marca en el hero (reemplaza al slogan). */
.hero__logo{ margin:0; line-height:0; }
.hero__logo img{
  width:clamp(240px, 44vw, 470px);
  height:auto;
  filter:drop-shadow(0 8px 28px rgb(var(--rgb-navy) / .55));
}

.hero__eyebrow{
  margin-bottom:1.25rem;
  color:var(--c-accent);
  font-family:var(--font-meta);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}

.hero__title{
  max-width:18ch;
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h1);
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:.005em;
}

.hero__script{
  display:block;
  margin-top:.35rem;
  color:var(--c-accent);
  font-size:clamp(1.75rem,4.5vw,3rem);
  line-height:1;
}

.hero__text{
  max-width:42ch;
  margin-top:1.4rem;
  color:var(--c-ink-soft);
  font-size:clamp(1rem,1.6vw,1.15rem);
}

.hero__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;
  margin-top:2.25rem;
}

.hero__scroll{
  position:absolute; z-index:1; left:50%; bottom:1.5rem;
  transform:translateX(-50%);
  width:1px; height:56px;
  background:var(--c-line-strong);
  overflow:hidden;
}
.hero__scroll span{
  display:block; width:100%; height:100%;
  background:var(--c-accent);
  animation:scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}
@media (max-width:767px){ .hero__scroll{ display:none; } }


/* =============================================================
   8. INSTITUCIONAL
   ============================================================= */
.institucional__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (min-width:900px){
  .institucional__grid{ grid-template-columns:1fr 1fr; }
}

/* Marco navy alrededor de la foto: un "passe-partout" que la enmarca
   y una sombra suave para que tenga peso y no parezca pegada. */
.institucional__media{
  position:relative;
  padding:.85rem;
  background:var(--brand-navy);
  border-radius:calc(var(--radius-lg) + .55rem);
  box-shadow:var(--shadow);
}
.institucional__media img{
  display:block;
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-lg);
}

/* El sello se apoya sobre la esquina de la foto (color desde la variante) */
.institucional__sello{
  position:absolute; right:-.25rem; bottom:-2rem;
  width:min(40%, 185px);
  padding:1.2rem .9rem;
  box-shadow:var(--shadow);
  transform:scale(.72);
  transform-origin:bottom right;   /* se achica sin despegarse de la esquina */
}

.institucional__body p{ margin-top:1.15rem; color:var(--c-ink-soft); }

.feature-list{
  margin-top:2rem;
  display:grid; gap:.75rem;
  border-top:1px solid var(--c-line);
  padding-top:1.5rem;
}
.feature-list li{
  position:relative; padding-left:1.6rem;
  font-family:var(--font-meta);
  font-size:var(--fs-small);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
}
.feature-list li::before{
  content:''; position:absolute; left:0; top:.68em;
  width:10px; height:1px; background:var(--c-accent);
}


/* =============================================================
   9. CENAS ESPECIALES
   ============================================================= */
/* Pocas cenas (a lo sumo una por sede): centramos las cards en lugar de una
   grilla que las estira o las deja pegadas a la izquierda. */
.cenas__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,3vw,2.25rem); }
.cena-card{ flex:1 1 340px; max-width:400px; }

/* Botón "Ver cenas pasadas" (centrado, debajo de las cenas actuales). */
.cenas__past{ margin-top:clamp(1.75rem,4vw,2.75rem); display:flex; justify-content:center; }
.cenas__past .btn{ display:inline-flex; align-items:center; gap:.5rem; }
.cenas__past .icon{ width:20px; height:20px; }

/* Estados de carga / vacío (ocupan toda la fila) */
.cenas__loading{ flex-basis:100%; text-align:center; color:var(--c-ink-mute); }

.cenas__empty{
  flex-basis:100%;
  display:grid; place-items:center; gap:.85rem;
  padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;
  text-align:center;
  border:1px dashed rgb(var(--rgb-ice) / .28);
  border-radius:var(--radius-lg);
  background:rgb(var(--rgb-ice) / .04);
}
.cenas__empty-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem,4vw,2.75rem);
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--c-accent);
}
.cenas__empty-text{
  max-width:46ch;
  color:var(--c-ink-soft);
  font-size:var(--fs-small);
}

.cena-card{
  display:flex; flex-direction:column;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--t-fast), transform var(--t-fast);
}
.cena-card:hover{ border-color:var(--c-line-strong); transform:translateY(-4px); }

.cena-card__media{ position:relative; }
.cena-card__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

.cena-card__date{
  position:absolute; top:1rem; left:1rem;
  display:grid; place-items:center;
  padding:.55rem .8rem;
  background:var(--brand-ocre); color:#fff;
  border-radius:var(--radius);
  line-height:1;
}
.cena-card__day{
  font-family:var(--font-display);
  font-size:1.6rem;
}
.cena-card__month{
  margin-top:.22rem;
  font-family:var(--font-meta);
  font-size:.625rem;
  letter-spacing:var(--tracking-meta);
}

.cena-card__body{
  display:flex; flex-direction:column; gap:.8rem;
  padding:clamp(1.25rem,2.5vw,1.75rem);
}
.cena-card__body > p{ color:var(--c-ink-soft); font-size:var(--fs-small); }
/* Descripción con markdown mínimo (párrafos, saltos y negrita). */
.cena-card__desc{ display:flex; flex-direction:column; gap:.6rem; color:var(--c-ink-soft); font-size:var(--fs-small); }
.cena-card__desc p{ margin:0; }
.cena-card__desc strong{ color:var(--c-ink); font-weight:700; }
.cena-card__desc em{ font-style:italic; }
.cena-card__meta{
  color:var(--c-accent);
  font-family:var(--font-meta);
  font-size:.75rem;
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
}
.cena-card__body .btn{ margin-top:auto; align-self:flex-start; }

/* Fila de acciones (Reservar + Ver flyer si hay) */
.cena-card__actions{
  margin-top:auto;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.cena-card__actions .btn{ margin-top:0; align-self:auto; }


/* =============================================================
   10. NUESTROS PLATOS  (carrusel scroll-snap)
   ============================================================= */
.carousel-nav{ display:none; gap:.5rem; flex:none; }
@media (min-width:900px){ .carousel-nav{ display:flex; } }

.carousel-btn{
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid var(--c-line-strong);
  border-radius:50%;
  color:var(--c-ink);
  transition:background var(--t-fast), border-color var(--t-fast);
}
.carousel-btn:hover{
  background:rgb(var(--rgb-ocre) / .1);
  border-color:var(--c-accent);
}

/* Marquee continuo: el viewport recorta y el track se desplaza con
   transform (ver main.js §8). El track se duplica por JS para lograr
   el loop sin costuras y se puede arrastrar con el mouse. */
.platos__viewport{ overflow:hidden; }

.platos__track{
  display:flex;
  gap:1rem;
  width:max-content;
  will-change:transform;
  transform:translateZ(0);     /* fuerza capa de compositor (GPU) en móvil */
  backface-visibility:hidden;
  cursor:grab;
  touch-action:pan-y;          /* el scroll vertical sigue funcionando */
  user-select:none;
}
.platos__track.is-dragging{ cursor:grabbing; }

@media (min-width:1000px){ .platos__track{ gap:1.25rem; } }

.plato{
  flex:0 0 auto;
  width:78vw;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--c-bg-alt);
}
@media (min-width:600px){  .plato{ width:44vw; } }
@media (min-width:1000px){ .plato{ width:min(26vw, 360px); } }

.plato img{ -webkit-user-drag:none; user-select:none; }
.plato img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform var(--t-slow);
}
.plato:hover img{ transform:scale(1.04); }

/* El scrim se mantiene sólido bajo el texto y sólo se difumina en el
   padding superior. Un degradado lineal hasta 0 deja el nombre del
   plato sobre ~36% de opacidad: contra una foto clara y luminosa
   —el estilo fotográfico de la marca— eso da 2:1 de contraste. */
.plato figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:2.75rem 1.25rem 1.25rem;
  color:var(--brand-ice);
  background:linear-gradient(to top,
    rgb(var(--rgb-navy) / .95) 0%,
    rgb(var(--rgb-navy) / .95) 62%,
    rgb(var(--rgb-navy) / 0)   100%);
}
.plato__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.35rem;
  text-transform:uppercase;
  line-height:1;
}
.plato__desc{
  margin-top:.4rem;
  color:rgb(var(--rgb-ice) / .78);
  font-size:var(--fs-small);
}

.platos__foot{ margin-top:2.5rem; text-align:center; }


/* =============================================================
   11. CARTA + VISOR
   ============================================================= */
.carta__grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .carta__grid{ grid-template-columns:repeat(4,1fr); gap:1.25rem; } }

/* Cartas por sede: dos portadas grandes, centradas. */
.carta__grid--sedes{
  grid-template-columns:1fr;
  gap:1.5rem;
  max-width:720px;
  margin-inline:auto;
}
@media (min-width:640px){ .carta__grid--sedes{ grid-template-columns:repeat(2,1fr); } }
.carta__grid--sedes .carta__item img{ aspect-ratio:1400/1980; }
.carta__label.carta__label--sede{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-size:.9rem; letter-spacing:.06em;
}
/* Cantidad de páginas: pastilla ocre para que se note a simple vista. */
.carta__pages{
  flex:none;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.34rem .62rem;
  border-radius:999px;
  background:var(--brand-ocre); color:var(--brand-ice);
  font-size:.74rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; line-height:1;
}
.carta__pages svg{ width:.85em; height:.85em; flex:none; }

.carta__item{
  display:block; position:relative;
  padding:0; overflow:hidden;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  background:var(--c-surface);
  transition:border-color var(--t-fast), transform var(--t-fast);
}
.carta__item:hover{ border-color:var(--c-accent); transform:translateY(-4px); }
.carta__item img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

/* Hint "tocá para ver": pastilla sobre la portada, para que se note que es clickeable. */
.carta__hint{
  position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  max-width:calc(100% - 1.75rem);
  padding:.7rem 1.15rem;
  border-radius:1.1rem;
  background:rgb(var(--rgb-navy) / .82);
  color:var(--brand-ice);
  font-family:var(--font-meta);
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
  white-space:normal; text-align:center; line-height:1.2;
  box-shadow:var(--shadow);
  backdrop-filter:blur(2px);
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.carta__hint svg{ width:19px; height:19px; flex:none; }
/* En pantallas con hover (desktop), se agranda un poco al pasar el mouse. */
@media (hover:hover){
  .carta__item:hover .carta__hint{ transform:translate(-50%,-50%) scale(1.06); }
}

.carta__label{
  display:block;
  padding:.9rem 1rem;
  color:var(--c-ink-soft);
  font-family:var(--font-meta);
  font-size:.75rem;
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  text-align:left;
}

/* --- Visor --- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgb(var(--rgb-navy) / .97);
  animation:fadeIn .2s var(--ease);
}
/* El JS muestra/oculta el visor con el atributo `hidden`. Sin esta regla,
   `.lightbox{display:flex}` le gana al `display:none` de `[hidden]` y el
   overlay navy tapa TODA la página desde que carga (se ve "todo azul"). */
.lightbox[hidden]{ display:none; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.lightbox__img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:var(--radius);
  /* Zoom/pan: el JS aplica transform; el navegador no debe secuestrar el gesto. */
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  transform-origin:center center;
  transition:transform .2s var(--ease);
  cursor:zoom-in;
  will-change:transform;
}
.lightbox.is-zoomed .lightbox__img{ cursor:grab; }
.lightbox.is-zoomed .lightbox__img:active{ cursor:grabbing; }

/* Botón de zoom (esquina superior izquierda). */
.lightbox__zoom{ position:absolute; top:1rem; left:1rem; z-index:1; }
.lightbox__zoom .icon--zoom-out{ display:none; }
.lightbox.is-zoomed .lightbox__zoom .icon--zoom-in{ display:none; }
.lightbox.is-zoomed .lightbox__zoom .icon--zoom-out{ display:block; }

.lightbox__close,
.lightbox__nav,
.lightbox__zoom{
  display:grid; place-items:center;
  width:48px; height:48px;
  flex:none;
  color:var(--brand-ice);
  border:1px solid rgb(var(--rgb-ice) / .36);
  border-radius:50%;
  background:rgb(var(--rgb-navy) / .8);
  transition:background var(--t-fast);
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__zoom:hover{ background:rgb(var(--rgb-ice) / .14); }

.lightbox__close{ position:absolute; top:1rem; right:1rem; z-index:1; }

@media (max-width:600px){
  .lightbox{ flex-direction:column; }
  .lightbox__nav{ position:absolute; bottom:1.25rem; }
  .lightbox__nav--prev{ left:25%; }
  .lightbox__nav--next{ right:25%; }
}


/* =============================================================
   12. SEDES
   ============================================================= */
.sedes__grid{ display:grid; gap:clamp(1.75rem,3.5vw,2.5rem); align-items:start; }
@media (min-width:860px){ .sedes__grid{ grid-template-columns:repeat(2,1fr); } }

.sede{
  display:flex; flex-direction:column;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.sede__media{ position:relative; overflow:hidden; }
.sede__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
}
.sede__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgb(var(--rgb-navy) / .96), rgb(var(--rgb-navy) / .12) 62%);
}

.sede__name{
  position:absolute; z-index:1; inset:auto 0 0 0;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  color:var(--brand-ice);
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.75rem,3.6vw,2.5rem);
  text-transform:uppercase;
  line-height:1;
}

/* Sello sobre la esquina de la foto (el color lo pone la variante). */
.sede__sello{
  position:absolute; z-index:2; top:1rem; right:1rem;
  box-shadow:var(--shadow);
  transform:rotate(4deg);
}
@media (max-width:640px){
  .sede__sello{ top:.6rem; right:.6rem; transform-origin:top right; transform:rotate(4deg) scale(.62); }
  /* El rombo (Leloir) es el más ancho: lo achicamos un poco más. */
  .sede__sello.sello--diamond{ transform:rotate(4deg) scale(.55); }
}

.sede__body{
  display:flex; flex-direction:column; gap:1.5rem;
  padding:clamp(1.25rem,2.5vw,1.75rem);
}

.sede__data{ display:grid; gap:1.15rem; }
.sede__data dt{
  margin-bottom:.3rem;
  color:var(--c-ink-mute);
  font-family:var(--font-meta);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
}
.sede__data dd{ color:var(--c-ink); font-size:var(--fs-small); }
.sede__data a{ border-bottom:1px solid var(--c-line-strong); }
.sede__data a:hover{ border-color:var(--c-accent); color:var(--c-accent); }

.hours{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-small);
}
.hours th,
.hours td{
  padding:.5rem 0;
  border-bottom:1px solid var(--c-line);
  text-align:left;
  font-weight:400;
}
.hours th{ color:var(--c-ink-mute); }
.hours td{ text-align:right; color:var(--c-ink); }

.sede__actions{
  display:flex; flex-wrap:wrap; gap:.65rem;
  margin-top:auto;
  padding-top:.5rem;
  border-top:1px solid var(--c-line);
}
.sede__actions .btn{ flex:1 1 auto; }


/* =============================================================
   13. FOOTER
   ============================================================= */
.footer{ padding-top:clamp(3.5rem,7vw,6rem); }

.footer__grid{
  display:grid; gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:700px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }

.footer__logo{ height:56px; width:auto; color:var(--c-ink); }
.footer__tagline{
  margin-top:1.25rem;
  color:var(--c-ink-soft);
  font-family:var(--font-meta);
  font-size:var(--fs-small);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
}
.footer__script{
  display:block; margin-top:.5rem;
  color:var(--c-accent);
  font-size:1.35rem;
}
.social--footer{ margin-top:1.5rem; }

.footer__title{
  margin-bottom:1.1rem;
  color:var(--c-accent);
  font-family:var(--font-meta);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}

.footer__nav ul{ display:grid; gap:.55rem; }
.footer__nav a,
.footer__col a{
  color:var(--c-ink-soft);
  font-size:var(--fs-small);
  transition:color var(--t-fast);
}
.footer__nav a:hover,
.footer__col a:hover{ color:var(--c-ink); }
.footer__col address{ color:var(--c-ink-soft); font-size:var(--fs-small); line-height:1.9; }

.footer__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between; align-items:center;
  padding-block:1.5rem;
  border-top:1px solid var(--c-line);
  color:var(--c-ink-mute);
  font-size:.8125rem;
}
/* Data Fiscal AFIP */
.footer__fiscal{ display:inline-flex; flex:none; }
.footer__fiscal img{ display:block; width:56px; height:auto; border-radius:4px; }


/* =============================================================
   14. WHATSAPP FLOTANTE
   ============================================================= */
.wa-fab{
  position:fixed; z-index:150;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:.75rem;
}

.wa-fab__btn{
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--c-wa); color:#fff;
  box-shadow:var(--shadow);
  transition:transform var(--t-fast);
}
.wa-fab__btn svg{ width:30px; height:30px; fill:currentColor; }
.wa-fab__btn:hover{ transform:scale(1.06); }

.wa-fab__menu{
  width:min(78vw, 280px);
  padding:1.1rem;
  background:var(--brand-navy);
  color:var(--brand-ice);
  border:1px solid rgb(var(--rgb-ice) / .22);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  animation:fabIn .22s var(--ease);
}
@keyframes fabIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.wa-fab__title{
  margin-bottom:.85rem;
  color:rgb(var(--rgb-ice) / .76);
  font-family:var(--font-meta);
  font-size:.7rem;
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
}
.wa-fab__menu a{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem .85rem;
  border:1px solid rgb(var(--rgb-ice) / .18);
  border-radius:var(--radius);
  font-family:var(--font-meta);
  font-size:var(--fs-small);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.wa-fab__menu a + a{ margin-top:.5rem; }
.wa-fab__menu a:hover{ border-color:var(--c-wa); background:rgb(37 211 102 / .12); }
.wa-fab__menu a svg{ width:18px; height:18px; fill:var(--c-wa); flex:none; }


/* =============================================================
   15. ACCESIBILIDAD / MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.wa-fab,.hero__scroll,.carousel-nav{ display:none!important; }
  body{ background:#fff; color:#000; }
}