/* ============================================================
   CLUB AMERICANO · SITE02 · LA PLANCHA
   Arquitectura nueva (24 ago 2026), sistema gráfico heredado.

   El encargo de Beto: "imágenes grandes, sin mucha información,
   ni botones, ni scratch, ni andarle ahí dando vuelta a la
   página, y te explica muy breve, y el tema de reservas ahí se
   mantiene presente."

   De ahí la unidad de construcción: la PLANCHA. Una pantalla
   completa, una foto grande, un rótulo, una línea, un párrafo
   corto y una liga. Nada más. Las planchas se apilan y la
   página se recorre de un tirón.

   Lo que se hereda intacto del sitio anterior: paleta, escala
   tipográfica, las cuatro voces, el filete dorado, los rombos,
   los aros de las fotos, la barra, el footer y las páginas
   legales. Lo que cambia es la arquitectura, no el estilo.
   ============================================================ */

/* Libre Baskerville se carga con <link> desde el <head> de cada página:
   con @import el navegador tendría que descargar esta hoja completa antes
   de descubrir siquiera la petición de la fuente. */

/* Nautica (display de marca) — pendiente de licencia.
   Al licenciarla, declarar aquí su @font-face con family "Nautica"
   y tomará el relevo sola en --font-display, sin tocar nada más.
   @font-face { font-family: "Nautica"; src: url("../fonts/nautica.woff2") format("woff2"); font-style: italic; font-display: swap; } */

:root {
  /* Paleta oficial — valores definidos por el cliente, mandan sobre el brand book */
  --forest: #002a06;   /* verde de marca */
  --cream: #e6dcb9;    /* crema de marca */
  --white: #ffffff;
  --black: #000000;
  /* El "gold finish" es un acabado metálico: tiene un punto oscuro y uno claro.
     --gold      #876743  grafismo: filetes, anillos, bordes, rombos, marcos.
                          Nunca como texto sobre fondo oscuro (3.4:1).
     --gold-ink  #B0976F  el mismo dorado en su punto luminoso: tipografía,
                          links y rellenos de botón (6.4:1 sobre la página).
                          Sobre crema no alcanza AA: ahí el rótulo va en verde. */
  --gold: #876743;
  --gold-ink: #b0976f;
  --wine: #581a1f;
  --wine-deep: #340f12;

  /* Escalera de verdes — mismo tono, bajando luz.
       --forest      #002A06  superficies y bandas de marca
       --night       #001D04  fondo de página
       --night-deep  #001402  bandas que interrumpen, cierre */
  --night: #001d04;
  --night-deep: #001402;

  /* Cuánto verde se le pone encima a las fotos. Todo el tinte de la casa pasa
     por los velos de .plate-bg, así que este factor los escala a todos de una
     vez: los dos giros de la portada, las planchas interiores y los horarios.
     Beto (2 sep 2026) lo pidió más limpio: entró en 0.85 y ahora se prueba en
     0.80, o sea 20% menos verde encima de la foto. Las paradas de arranque y
     cierre de los degradados quedan fuera a propósito: ésas son las que funden
     la foto con la página, y sin ellas aparece la costura. */
  --verde: 0.50;
  --foot-bg: var(--black);

  /* CUATRO VOCES
       1 · Slogan   → itálica en VERSALITAS, tracking muy amplio. Exclusiva de
                      las frases de marca. Fuera de esta voz no hay itálicas.
       2 · Titular  → redonda, caja normal, tracking casi nulo. h1, h2, h3.
       3 · Rótulo   → redonda en VERSALITAS, tracking amplio, tamaño chico.
                      Nombra planchas; nunca crece.
       4 · Cuerpo   → redonda. Todo lo que se lee de corrido.

     ESCALA TIPOGRÁFICA — cinco pasos. Todo cae en uno de ellos. */
  --t-xs: 0.65rem;      /* rótulos y pies */
  --t-sm: 0.75rem;      /* rótulos grandes, gramajes, botones */
  --t-md: 0.8125rem;    /* notas y texto secundario */
  --t-base: 0.9375rem;  /* cuerpo */
  --t-lg: 1.0625rem;    /* cuerpo destacado y subtítulos */

  --h1: clamp(1.8rem, 4.2vw, 3rem);
  --h2: clamp(1.35rem, 2.9vw, 1.95rem);
  --h3: clamp(1.1rem, 2.1vw, 1.35rem);

  --font-display: "Nautica", "Libre Baskerville", "Baskerville", Georgia, serif;
  --font-serif: "Libre Baskerville", "Baskerville", Georgia, serif;

  /* Medidas de la plancha. El marco es el grafismo que las cose a todas:
     un filete dorado a un mismo aire de la orilla en cada pantalla. */
  --gutter: clamp(1rem, 3vw, 2.4rem);
  --frame-inset: clamp(0.75rem, 2.2vw, 1.8rem);
  /* Alto real de la barra transparente: sus dos paddings más el logo, que
     mide 466/1282 de su ancho. Lo usa el marco de la primera plancha para
     arrancar por debajo de ella en vez de cruzarle el logo por encima. */
  --bar-h: calc(2 * var(--gutter) + clamp(120px, 13vw, 168px) * 0.364);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-synthesis: none; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-serif);
  color: var(--cream);
  background: var(--night);
}

/* height:auto es obligatorio junto a los atributos width/height del HTML:
   sin él el atributo height se aplica como alto literal y la imagen se estira
   cuando el CSS le cambia el ancho. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--wine); color: var(--cream); }
button { font-family: var(--font-serif); }

/* salto al contenido: sólo aparece con el teclado */
.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.9rem 1.4rem;
  background: var(--cream);
  color: var(--forest);
  font-size: var(--t-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

/* ============================================================
   BARRA
   Heredada del sitio anterior sin cambios de comportamiento:
   transparente sobre la foto, con franja al hacer scroll.
   ============================================================ */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, padding 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}
.bar.is-stuck {
  padding-top: clamp(0.6rem, 1.4vw, 0.9rem);
  padding-bottom: clamp(0.6rem, 1.4vw, 0.9rem);
  background: color-mix(in srgb, var(--night) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
.bar .logo img { width: clamp(120px, 13vw, 168px); transition: width 300ms ease, opacity 420ms ease; }
.bar.is-stuck .logo img { width: clamp(96px, 9vw, 124px); }

/* Home: la marca ya está grande al centro de la primera plancha, así que la
   de la barra espera a que esa plancha se vaya. El atributo lo pone el JS
   (sólo si el <body> lo pidió): sin JS el logo se queda visible siempre. */
.bar[data-hero]:not(.is-stuck) .logo img { opacity: 0; }
.bar[data-hero]:not(.is-stuck) .logo { pointer-events: none; }
.bar[data-hero]:not(.is-stuck) .logo:focus-visible img { opacity: 1; }

.bar nav {
  display: flex;
  /* Reservar es un botón y los demás son ligas: la hilera se alinea por la
     línea del texto, que es lo que se lee, no por la caja. */
  align-items: baseline;
  gap: clamp(1rem, 2.6vw, 2rem);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.bar nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.bar nav a:hover { border-bottom-color: var(--gold-ink); color: var(--gold-ink); }
.bar nav a:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.bar nav .gold { color: var(--gold-ink); }

/* Reservar es la única acción de la barra, así que se ve como acción: filete
   completo en vez de un subrayado. El relleno espera al hover para no competir
   con la marca sobre la portada. */
.bar nav a.nav-cta {
  padding: 0.5rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--gold-ink) 70%, transparent);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.bar nav a.nav-cta:hover {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  color: var(--night);
}

/* Inicio existe sólo dentro del panel móvil: en escritorio el logo es la
   puerta al home, en el panel el logo queda tapado. */
.bar nav .nav-home { display: none; }

/* La página en la que estás se marca con el filete, no con color: el dorado
   es de la acción (Reservar) y si también dijera "estás aquí" dejaría de
   señalar una sola cosa. */
.bar nav a[aria-current="page"] {
  border-bottom-color: color-mix(in srgb, var(--gold) 60%, transparent);
}
@media (max-width: 820px) {
  .bar[data-nav] nav > a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent);
    text-underline-offset: 0.45em;
    text-decoration-thickness: 1px;
  }
}

/* Conmutador de idioma — el más callado del sitio, pero legible.
   El activo va en crema plena; el otro en 62%, que es lo mínimo que aguanta
   AA sobre el negro del footer (5.9:1). Por debajo de ~53% no pasa, y este
   par de ligas es un control, no un ornamento. */
.lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lang .is-on { color: var(--cream); }
.lang a {
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  text-decoration: none;
  border-bottom: 0;
  transition: color 200ms ease;
}
.lang a:hover { color: var(--gold-ink); }
.lang a:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.lang .sep { color: color-mix(in srgb, var(--cream) 55%, transparent); }
.bar .lang {
  margin-left: clamp(0.2rem, 1.6vw, 1rem);
  padding-left: clamp(0.7rem, 2vw, 1.2rem);
  border-left: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
}

/* ---------- hamburguesa (sólo móvil) ----------
   Tres filetes de 1px, del mismo grosor que los del sistema. Al abrir, el de
   en medio se apaga y los otros dos se cruzan. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 70;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--cream);
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: background-color 220ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms ease;
}
.nav-toggle .bars { top: 50%; margin-left: -12px; }
.nav-toggle .bars::before,
.nav-toggle .bars::after { content: ""; left: 0; margin-left: 0; }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.nav-toggle:hover { color: var(--gold-ink); }
.nav-toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.bar.is-open .nav-toggle .bars { background: transparent; }
.bar.is-open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
.bar.is-open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 820px) {
  /* Todo esto depende de que el script haya marcado la barra. Sin JS no hay
     botón que abra el panel, así que el menú se queda como hilera normal:
     apretada, pero navegable. Nunca oculta y sin puerta. */
  .bar { flex-wrap: wrap; }
  .bar[data-nav] { flex-wrap: nowrap; }
  .bar[data-nav] .nav-toggle { display: block; }
  .bar[data-nav] nav .nav-home { display: flex; }
  /* con el panel abierto la marca vuelve, aunque el home la tenga en pausa */
  .bar[data-hero].is-open .logo img { opacity: 1; }

  .bar[data-nav] nav {
    position: fixed;
    inset: 0;
    z-index: 65;
    flex-direction: column;
    align-items: center;
    /* NO usar justify-content:center junto con overflow: al centrar, lo que se
       sale por arriba queda inalcanzable. El centrado lo hacen los márgenes
       auto de más abajo, que ceden solos cuando el contenido no cabe. */
    justify-content: flex-start;
    gap: clamp(1.5rem, 4.5vh, 2.4rem);
    padding: max(6rem, 14vh) 1.5rem 3rem;
    background: color-mix(in srgb, var(--night) 96%, transparent);
    backdrop-filter: blur(16px);
    font-size: var(--t-md);
    letter-spacing: 0.3em;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 380ms ease, visibility 380ms;
  }
  .bar[data-nav].is-open nav { opacity: 1; visibility: visible; }

  .bar[data-nav] .lang {
    margin: clamp(0.6rem, 2vh, 1.2rem) 0 0;
    padding: clamp(1.4rem, 4vh, 2rem) 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    width: min(220px, 60vw);
    justify-content: center;
  }

  /* Centrado que cede: los auto reparten el sobrante; cuando no hay sobrante
     valen cero y el panel se vuelve una lista que arranca arriba y scrollea.
     El margen de arriba lo carga el primero visual, que en el panel es
     Reservar, no el primero del DOM. */
  .bar[data-nav] nav > :first-child { margin-top: 0; }
  .bar[data-nav] nav > :last-child { margin-bottom: auto; }

  /* Blanco táctil: el texto es chico a propósito, pero el área que responde
     al dedo no puede medir 20px. */
  .bar[data-nav] nav > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.3rem 1.4rem;
    border-bottom: 0;
  }
  /* En el panel el botón conserva su caja: es la única acción de la lista, y
     encabeza. En escritorio Reservar cierra la hilera porque ahí la marca
     manda; abierto el panel, lo primero que se ve tiene que ser la reserva.
     Se mueve con order y no en el HTML para no alterar la barra de arriba. */
  .bar[data-nav] nav > a.nav-cta {
    order: -1;
    margin-top: auto;
    border: 1px solid color-mix(in srgb, var(--gold-ink) 70%, transparent);
    padding: 0.6rem 2rem;
  }
  .bar[data-nav] nav .lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .bar[data-nav] nav > * {
    transform: translateY(10px);
    opacity: 0;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
  }
  /* La escalera entra de arriba hacia abajo, así que corre por orden visual:
     Reservar abre y el resto la sigue corrido un escalón. */
  .bar[data-nav].is-open nav > * { transform: none; opacity: 1; }
  .bar[data-nav].is-open nav > a.nav-cta { transition-delay: 90ms; }
  .bar[data-nav].is-open nav > :nth-child(1) { transition-delay: 150ms; }
  .bar[data-nav].is-open nav > :nth-child(2) { transition-delay: 210ms; }
  .bar[data-nav].is-open nav > :nth-child(3) { transition-delay: 270ms; }
  .bar[data-nav].is-open nav > :nth-child(4) { transition-delay: 330ms; }
  .bar[data-nav].is-open nav > :nth-child(5) { transition-delay: 390ms; }
  .bar[data-nav].is-open nav > :nth-child(6) { transition-delay: 450ms; }
  .bar[data-nav].is-open nav > :nth-child(7) { transition-delay: 510ms; }

  .bar.is-open.is-stuck { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .bar[data-nav] nav,
  .bar[data-nav] nav > * { transition: none; }
}

/* El freno de verdad lo pone CAScrollLock en el JS (position:fixed): a
   overflow:hidden a secas iOS Safari lo ignora. Esto queda como refuerzo. */
body.nav-open { overflow: hidden; }

/* ============================================================
   LAS VOCES
   ============================================================ */

/* VOZ 1 · SLOGAN — la única itálica del sistema */
.plate-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}

/* VOZ 2 · TITULAR — redonda, caja normal */
.engraved {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.28;
  text-wrap: balance;
}

/* VOZ 3 · RÓTULO — redonda en versalitas, siempre pequeña */
.block-kicker,
.legal h2,
.menu-group h2,
.hora h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}
.block-kicker {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  color: var(--gold-ink);
}

/* filete con rombos — el remate de la casa */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
}
.divider::before,
.divider::after {
  content: "";
  width: clamp(2rem, 5vw, 3.2rem);
  height: 1px;
  background: color-mix(in srgb, var(--gold) 50%, transparent);
}
.divider .d { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

/* ============================================================
   ACCIONES
   Beto pidió "ni botones". El sitio conserva uno solo, el de
   reservar, porque es la única cosa que la página tiene que
   lograr. Todo lo demás avanza con .go: una liga en versalitas
   con filete, que pesa la mitad.
   ============================================================ */

.go {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--cream) 74%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 32%, transparent);
  padding-bottom: 3px;
  transition: color 200ms ease, border-color 200ms ease;
}
.go:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.go:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

/* sobre crema el dorado claro no alcanza AA: el verde toma su lugar */
.go--dark { color: color-mix(in srgb, var(--forest) 78%, transparent); border-bottom-color: color-mix(in srgb, var(--forest) 40%, transparent); }
.go--dark:hover { color: var(--forest); border-bottom-color: var(--forest); }
.go--dark:focus-visible { outline-color: var(--forest); }

.btn {
  font-size: var(--t-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.9rem 2rem;
  border: 1px solid var(--gold-ink);
  background: var(--gold-ink);
  color: var(--night);
  transition: background-color 200ms ease, color 200ms ease;
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--gold-ink); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
/* sobre crema el relleno se invierte: verde de marca, que sí contrasta */
.btn--dark { border-color: var(--forest); background: var(--forest); color: var(--cream); }
.btn--dark:hover { background: transparent; color: var(--forest); }
.btn--dark:focus-visible { outline-color: var(--forest); }

/* ============================================================
   LA PLANCHA
   Una pantalla, una foto, cuatro líneas. La unidad de todo el
   sitio: el home son cuatro planchas apiladas, y las páginas
   interiores abren con una.
   ============================================================ */

.plate {
  /* El velo no es una decisión de layout, es una propiedad de la foto: las de
     la casa van de muy oscuras (la barra, el salón) a muy claras (el corte, la
     mesa servida). Medidas en luminancia media: 28-38 las oscuras, 57-62 las
     claras. Con un solo valor, o se tiñen las oscuras o el texto se pierde
     sobre las claras, así que cada plancha declara el suyo. */
  --plate-veil: 30;   /* sin unidad: el % se lo pone el color-mix de abajo */
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(5rem, 12vh, 7rem);
}

/* la foto y su velo */
.plate-bg { position: absolute; inset: 0; z-index: -1; }
.plate-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Arriba y abajo cierra en el verde de la página para que la foto se funda
   con lo que viene antes y después; el centro se deja limpio y sólo lleva un
   velo ligero, el justo para sostener el texto. */
.plate-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      var(--night),
      color-mix(in srgb, var(--night) calc(26% * var(--verde)), transparent) 24%,
      color-mix(in srgb, var(--night) calc(26% * var(--verde)), transparent) 62%,
      var(--night)
    ),
    radial-gradient(100% 78% at 50% 50%, transparent 28%, color-mix(in srgb, var(--night) calc(66% * var(--verde)), transparent) 94%),
    color-mix(in srgb, var(--night) calc(var(--plate-veil) * var(--verde) * 1%), transparent);
}

/* Plancha sobre foto clara. Sin esto el texto se apoya sobre el brillo de la
   loza o del mantel y deja de leerse. */
.plate--bright { --plate-veil: 56; }

/* El marco: un filete dorado a un mismo aire de la orilla en cada plancha.
   Es lo único que se repite de arriba abajo y lo que hace que el sitio se
   lea como una serie de láminas impresas y no como un scroll. */
.plate-frame {
  position: absolute;
  inset: var(--frame-inset);
  z-index: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
/* las esquinas se marcan un punto más: el filete respira, las esquinas fijan */
.plate-frame::before,
.plate-frame::after {
  content: "";
  position: absolute;
  width: clamp(14px, 2.4vw, 26px);
  height: clamp(14px, 2.4vw, 26px);
  border: 1px solid color-mix(in srgb, var(--gold) 78%, transparent);
}
.plate-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate-frame::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* La primera pantalla de cada página vive debajo de la barra fija, que es
   transparente: si el marco arranca en la orilla, su filete superior le pasa
   por encima al logo y el rótulo se lee pegado a la retícula. Aquí el marco
   empieza donde termina la barra, y así enmarca el contenido, no el chrome. */
main > *:first-child > .plate-frame { top: calc(var(--bar-h) + clamp(0.6rem, 1.6vw, 1.2rem)); }

/* El contenido se levanta por encima del marco: sin esto el filete dorado, que
   es un elemento posicionado, se pintaría encima del texto. La foto y el marco
   quedan fuera de la regla a propósito — a los dos les cambiaría el position y
   dejarían de estar anclados a la plancha. */
.plate > *:not(.plate-bg):not(.plate-frame):not(.reel-ui) { position: relative; z-index: 1; }

/* Todo lo que sigue va con hijo directo a propósito: el contenido de una
   plancha cuelga siempre de ella, mientras que el carrete de la portada vive
   anidado dentro de .reel-ui. Sin el `>`, las medidas de la plancha le caían
   encima al carrete y le recortaban la caja al título del slide. */
.plate > .divider { margin-bottom: clamp(1.2rem, 3vh, 1.8rem); }
/* el rótulo es el texto más chico de la plancha y va en dorado: sin su propia
   sombra desaparece en cuanto la foto tiene una zona clara detrás */
.plate > .block-kicker {
  margin-bottom: clamp(0.9rem, 2.4vh, 1.4rem);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 75%, transparent),
               0 2px 14px color-mix(in srgb, var(--black) 70%, transparent);
}
.plate > h1,
.plate > h2 {
  font-size: var(--h1);
  max-width: 20ch;
  line-height: 1.25;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--black) 62%, transparent),
               0 2px 22px color-mix(in srgb, var(--black) 68%, transparent);
}
.plate > p {
  max-width: 50ch;
  margin-top: clamp(1.1rem, 2.8vh, 1.6rem);
  font-size: var(--t-lg);
  line-height: 1.85;
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 70%, transparent),
               0 2px 18px color-mix(in srgb, var(--black) 62%, transparent);
}
/* el remate de la plancha respira igual, sea liga o botón */
.plate > .go,
.plate > .btn { margin-top: clamp(1.8rem, 4.4vh, 2.6rem); }

/* dos fotos redondas como remate de plancha, el gesto que ya era de la casa */
.plate-medals { display: flex; justify-content: center; margin-bottom: clamp(1.4rem, 3.4vh, 2rem); }
.plate-medals img {
  width: clamp(96px, 12vw, 132px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 6px var(--night),
    0 0 0 7px color-mix(in srgb, var(--gold) 60%, transparent),
    0 16px 34px color-mix(in srgb, var(--black) 42%, transparent);
}
.plate-medals img + img { margin-left: -1.1rem; }

/* ---------- la plancha de portada ---------- */

.plate--cover { padding-top: clamp(8rem, 18vh, 11rem); }

/* La marca al centro: en la portada el logo es el titular, no un adorno.
   Por eso la barra guarda el suyo hasta que esta plancha se va. */
.plate-mark { width: clamp(190px, 26vw, 340px); margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.plate--cover > h1 { line-height: 1.3; }

/* ---------- la fila baja de la portada ----------
   Hasta el 31 ago 2026 aquí vivía un carrete de cinco fotos con su mando. Se
   retiró: la portada es una sola foto, y en la celda que ocupaba el mando va
   ahora el botón de reservar. La capa y su rejilla se quedan tal cual, que es
   lo que sostiene los rieles de la fila. */
.reel-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* El marco dorado corre por dentro del gutter, así que la última línea del
     carrete necesita más aire abajo del que gasta el resto de la plancha: con
     el padding a secas, el slogan y el "desliza" quedaban pegados al filete. */
  padding: var(--gutter) var(--gutter) clamp(2.4rem, 5.5vh, 3.6rem);
  pointer-events: none;
  /* La plancha centra su contenido; el carrete no. Sin esto el slogan quedaba
     centrado dentro de su celda en vez de arrancar en el mismo riel que el
     logo de la barra, y la fila de abajo se leía descuadrada. */
  text-align: left;
}
.reel-ui button { pointer-events: auto; }

/* Dos rieles: el slogan abre donde el logo de la barra y la invitación a
   bajar cierra donde el conmutador de idioma. */
.reel-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--black) 75%, transparent);
}
.reel-foot > :last-child { justify-self: end; text-align: right; }
.reel-foot .plate-slogan { color: var(--gold-ink); }
.plate-slogan { font-size: var(--t-xs); }

/* La única acción de la portada va pegada al tagline, no al pie: es lo
   primero que se hace después de leerlo. */
.cover-cta { margin-top: clamp(1.8rem, 4.5vh, 2.8rem); }

@media (max-width: 760px) {
  /* En vertical las dos celdas no caben en una línea: se apilan al centro. */
  .reel-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(0.8rem, 2.2vh, 1.2rem); }
  .reel-foot > :last-child { justify-self: center; text-align: center; }
}

/* ---------- planchas de página interior ----------
   Mismo objeto, una talla menos: la portada de una página interior no compite
   con la del home. */
.plate--inner { min-height: 86svh; }
.plate--inner > h1 { max-width: 24ch; }
.plate--inner > p { max-width: 54ch; }
/* ============================================================
   EL DESCANSO
   La excepción a la plancha. Entre la portada y la carta, un
   bloque a dos columnas —foto a la izquierda, texto a la
   derecha— sobre el verde de la página. Todo lo demás es foto a
   sangre; aquí la foto se enmarca y el ojo descansa antes de
   volver a pantalla completa.
   ============================================================ */

.rest {
  display: grid;
  grid-template-columns: minmax(260px, 480px) 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 8rem) var(--gutter);
}
/* mismo cuadrado con filete dorado que el mapa: es el trato de la casa para
   todo lo que es rectángulo, igual que el aro lo es para todo lo redondo */
.rest-photo { margin: 0; }
.rest-photo img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  outline: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset: 8px;
}
.rest-copy h2 { font-size: var(--h2); margin-top: 0.7rem; }
.rest-copy p {
  max-width: 34ch;
  margin-top: clamp(1.1rem, 2.8vh, 1.6rem);
  font-size: var(--t-lg);
  line-height: 1.85;
  color: color-mix(in srgb, var(--cream) 84%, transparent);
}

@media (max-width: 820px) {
  .rest { grid-template-columns: 1fr; gap: 2.4rem; }
  .rest-photo { max-width: 420px; }
  .rest-copy p { max-width: 46ch; }
}

/* ============================================================
   LA PLANCHA DE UBICACIÓN
   Inversión tonal: crema de marca sobre el verde del sitio. Es
   la única pantalla del sitio donde hay datos duros, y el
   cambio de fondo es lo que la anuncia sin necesidad de un
   letrero.
   ============================================================ */

.locate {
  position: relative;
  background: var(--cream);
  color: var(--forest);
  padding: clamp(4.5rem, 12vh, 7rem) var(--gutter);
  /* la barra es fija: el ancla se detiene antes para no quedar debajo */
  scroll-margin-top: clamp(4.5rem, 8vw, 6.5rem);
}
.locate .plate-frame { border-color: color-mix(in srgb, var(--forest) 24%, transparent); }
.locate .plate-frame::before,
.locate .plate-frame::after { border-color: color-mix(in srgb, var(--forest) 62%, transparent); }

.locate-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 460px) 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* mapa: el mismo cuadrado con aro dorado que las fotos de la casa */
.locate-map {
  position: relative;
  aspect-ratio: 1;
  outline: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  outline-offset: 8px;
}
.locate-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.72) brightness(0.97);
}

.locate .block-kicker { color: color-mix(in srgb, var(--forest) 70%, transparent); }
.locate .divider::before,
.locate .divider::after { background: color-mix(in srgb, var(--forest) 34%, transparent); }
.locate .divider .d { background: color-mix(in srgb, var(--forest) 70%, transparent); }
.locate-copy .divider,
.rest-copy .divider { margin: 0 0 clamp(1rem, 2.6vh, 1.5rem); justify-content: flex-start; }
.locate-copy .divider::before,
.rest-copy .divider::before { display: none; }

.locate .addr { font-size: var(--h2); margin-top: 0.7rem; }
/* copiar dirección: acción callada, con la voz de rótulo */
.copy-addr {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--forest) 78%, transparent);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--forest) 40%, transparent);
  padding: 0 0 3px;
  margin-top: 1.2rem;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.copy-addr:hover { color: var(--forest); border-bottom-color: var(--forest); }
.copy-addr:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.copy-addr.is-copied { color: var(--forest); border-bottom-color: transparent; cursor: default; }

.locate-actions {
  display: flex;
  /* sin esto la liga se estira al alto del botón y su filete cae al fondo */
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(1.8rem, 4vh, 2.4rem);
}

@media (max-width: 860px) {
  .locate-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .locate-copy { order: -1; }
  .locate-map { aspect-ratio: 4 / 3; }
}

/* ============================================================
   HORARIOS
   El ritmo del día, no una tabla. El concepto declara que el
   club no se siente igual a todas horas, así que la banda
   nombra las tres personalidades y remite a Google y OpenTable
   para la hora exacta, que es donde siempre está al día.
   Va sobre foto, como el resto de los bloques grandes. El velo
   sube a 48% —la del comedor mide 52 de luminancia, justo en
   medio— porque aquí hay tres columnas de texto chico y ninguna
   se puede perder.
   ============================================================ */

.horas {
  --plate-veil: 48;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(5.5rem, 14vh, 8rem) var(--gutter);
  text-align: center;
}
.horas > *:not(.plate-bg):not(.plate-frame) { position: relative; z-index: 1; }
.horas .plate-frame { inset: var(--frame-inset); }

.horas-head { max-width: 46ch; margin: 0 auto; }
.horas-head .divider { margin-bottom: clamp(1.2rem, 3vh, 1.8rem); }
.horas-head .block-kicker {
  margin-bottom: clamp(0.9rem, 2.4vh, 1.4rem);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 75%, transparent);
}
.horas-head h2 {
  font-size: var(--h2);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--black) 62%, transparent),
               0 2px 22px color-mix(in srgb, var(--black) 68%, transparent);
}

/* Tres columnas, no tres renglones: las franjas son hermanas, ninguna manda
   sobre las otras, y en fila se leen de un vistazo. */
.horas-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  max-width: 1000px;
  margin: clamp(2.4rem, 6vh, 3.4rem) auto 0;
  text-align: left;
}
.hora { padding-top: clamp(1rem, 2.4vh, 1.4rem); border-top: 1px solid color-mix(in srgb, var(--gold-ink) 72%, transparent); }
.hora h3 {
  font-weight: 400;
  font-size: var(--t-sm);
  letter-spacing: 0.24em;
  color: var(--gold-ink);
  margin-bottom: 0.6rem;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--black) 75%, transparent);
}
/* La hora es el dato: va en la voz de titular y en crema plena, un escalón
   por encima de la línea que la acompaña. */
.hora .hh {
  font-family: var(--font-display);
  font-size: var(--h3);
  line-height: 1.35;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.hora p {
  font-size: var(--t-base);
  line-height: 1.85;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--black) 70%, transparent),
               0 2px 18px color-mix(in srgb, var(--black) 62%, transparent);
}

/* Dos franjas, dos columnas: con la reja de tres quedaba una celda vacía a la
   derecha y la fila se leía descuadrada. */
.horas-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }

@media (max-width: 780px) {
  .horas-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .horas-row--pair { grid-template-columns: 1fr; }
}

/* ============================================================
   LA CARTA
   Un solo bloque corrido. Sin tiempos, sin tour, sin pausas:
   quien abre la carta viene a leer qué hay.
   ============================================================ */

.menu-sheet {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(4rem, 11vh, 6.5rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}
.menu-group + .menu-group { margin-top: clamp(3rem, 8vh, 4.6rem); }
.menu-group h2 {
  font-weight: 400;
  font-size: var(--t-sm);
  letter-spacing: 0.3em;
  color: var(--gold-ink);
  text-align: center;
}
.menu-group > .divider { margin-bottom: clamp(1rem, 2.6vh, 1.5rem); }
/* La nota de grupo existe cuando informa —cómo se sirve, cuánto se madura,
   qué hay en la cava—, no cuando adorna. Por eso "Para empezar" no lleva:
   el rótulo ya decía todo lo que había que decir. */
.menu-note {
  text-align: center;
  font-size: var(--t-md);
  line-height: 1.9;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  max-width: 52ch;
  margin: 0.9rem auto 0;
}

/* La letra chica que la carta impresa trae al pie: crudos, gramaje en crudo,
   alérgenos. Va más apagada que la nota de grupo porque no se lee, se
   consulta; pero tiene que estar, y tiene que poderse leer si alguien la
   busca. Las dos líneas de precios del PDF quedan fuera: el sitio no los da. */
.menu-legal {
  margin: clamp(2.6rem, 7vh, 4rem) auto 0;
  padding-top: clamp(1.4rem, 3.4vh, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  max-width: 62ch;
  font-size: var(--t-xs);
  line-height: 2;
  text-align: center;
  /* 56% es el piso: por debajo de ahí la crema sobre el verde cae de 4.5:1 y
     el QA lo tumba. La letra chica también se tiene que poder leer. */
  color: color-mix(in srgb, var(--cream) 56%, transparent);
}

.dishes { list-style: none; margin-top: clamp(1.4rem, 3.4vh, 2rem); }
.dishes li { padding: 0.95rem 0; border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); }
.dishes li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); }
.dishes .dish { display: flex; align-items: baseline; gap: 0.8rem; }
.dishes .name { white-space: nowrap; }
.dishes .dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--cream) 30%, transparent); transform: translateY(-0.3em); }
.dishes .weight { font-size: var(--t-sm); letter-spacing: 0.1em; white-space: nowrap; color: var(--gold-ink); }
.dishes .desc {
  font-size: var(--t-md);
  line-height: 1.8;
  color: color-mix(in srgb, var(--cream) 66%, transparent);
  margin-top: 0.3rem;
}
.sub {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--cream) 58%, transparent);
  margin: clamp(1.8rem, 4vh, 2.4rem) 0 0;
}

/* La barra: solo las familias. La carta impresa lleva las casas; el sitio
   se queda con el gesto —qué hay en la cava— y no con el inventario.

   El rótulo es VOZ 3 (versalitas doradas, chico) y la línea de familias es
   VOZ 4: redonda, caja normal, crema. Antes las dos iban en versalitas y el
   ojo las leía como un mismo rótulo partido en dos renglones; la diferencia
   de caja, color y tamaño es la que dice cuál nombra y cuál informa. */
.familias {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
  max-width: 40ch;
  margin: clamp(1.1rem, 2.6vh, 1.5rem) auto 0;
  padding-bottom: clamp(1.4rem, 3.4vh, 2rem);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}

@media (max-width: 600px) {
  .dishes .dish { flex-wrap: wrap; }
  .dishes .dots { display: none; }
}

/* ============================================================
   FOOTER
   El cierre baja un grado de tono: el color separa, no una línea.
   ============================================================ */

/* Beto (7 sep 2026): el footer se queda solo con el renglón legal. Se fueron
   el logo, el párrafo de cocina con el slogan, las columnas de dirección y
   reservas, y la banda de I AM Hospitality. La dirección y la reserva siguen
   vivas arriba —en la barra y en la plancha de ubicación—, así que el cierre
   ya no repite: firma y se calla. */
.site-foot {
  background: var(--foot-bg);
  padding: 0 var(--gutter);
  font-size: var(--t-base);
  line-height: 1.8;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
}

.site-foot a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 26%, transparent);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.site-foot a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.site-foot a:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

.foot-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4.5vh, 2.6rem) 0;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}
.foot-legal-end { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.foot-legal-nav { display: flex; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.foot-legal-nav a { border-bottom-color: transparent; }

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */

.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(7rem, 18vh, 10rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}
.legal h1 { font-size: var(--h2); margin-top: 0.6rem; }
.legal .legal-date {
  font-size: var(--t-md);
  color: color-mix(in srgb, var(--cream) 55%, transparent);
  margin-top: 0.8rem;
}
.legal h2 {
  font-weight: 400;
  letter-spacing: 0.26em;
  font-size: var(--t-sm);
  color: var(--gold-ink);
  margin-top: clamp(2.2rem, 6vh, 3rem);
}
.legal p {
  margin-top: 1rem;
  font-size: var(--t-base);
  line-height: 1.9;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
}
.legal strong { font-weight: 400; color: var(--cream); }
.legal a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: color-mix(in srgb, var(--gold-ink) 55%, transparent); }
.legal a:hover { color: var(--cream); text-decoration-color: var(--cream); }
.legal .legal-back { margin-top: clamp(2.6rem, 7vh, 3.6rem); }

/* ============================================================
   ENTRADAS
   Un solo gesto en todo el sitio: lo que entra en pantalla
   sube un dedo y se enciende. Nada rebota, nada gira.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
/* escalón entre hermanos de una misma plancha */
.reveal[data-step="1"] { transition-delay: 120ms; }
.reveal[data-step="2"] { transition-delay: 240ms; }
.reveal[data-step="3"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
}