/*
  Cornelia Tulum — componentes.
  Depende de tokens.css y base.css. Ronda 2: reescrito para vestir los nombres de clase
  REALES de web/index.html, js/menu.js y js/resenas.js (ver DISENO.md §inventario — no son
  los que listaba el ENCARGO.md original). `.boton`/`.boton--*` es la familia canónica de
  botones; `.btn`/`.btn--*` queda como alias por si algo viejo los usa.

  Reglas de color: azul estructura, rosa acción, amarillo acento.
  Nunca los tres al mismo peso en un mismo bloque. Donde azul es FONDO el texto va en
  --cor-tinta, nunca --cor-papel (2,74:1 — falla AA; ver tokens.css).
*/

/* ===================== .contenedor — ancho de lectura ===================== */

.contenedor {
  position: relative; /* ronda 4: por encima del humo de su sección (ver §2.3) */
  z-index: 1;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(var(--esp-4), 6vw, var(--esp-7));
}

/* ===================== .nav — barra fija ===================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-alto);
  background: color-mix(in srgb, var(--cor-tinta) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--cor-azul) 25%, transparent);
  transition: background var(--dur-media) var(--curva),
    box-shadow var(--dur-media) var(--curva), height var(--dur-media) var(--curva);
}

.nav--compacta {
  height: calc(var(--nav-alto) - var(--esp-3));
  background: color-mix(in srgb, var(--cor-tinta) 94%, transparent);
  box-shadow: var(--sombra-sm);
}

.nav__interior {
  position: relative;
  height: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(var(--esp-4), 6vw, var(--esp-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

.nav__marca {
  font-family: var(--fuente-display);
  font-size: var(--tipo-md);
  letter-spacing: 0.04em;
  color: var(--cor-papel);
  white-space: nowrap;
}

.nav__marca span {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cor-humo);
  margin-left: 0.4em;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  font-size: var(--tipo-sm);
}

.nav__enlace {
  color: var(--cor-humo);
  font-weight: 600;
  transition: color var(--dur-rapida) var(--curva);
}

.nav__enlace:not(.nav__enlace--cta):hover {
  color: var(--cor-rosa);
}

.nav__enlace--activo:not(.nav__enlace--cta) {
  color: var(--cor-papel);
}

/* `.nav .nav__hamburguesa` y no `.nav__hamburguesa`: a11y.css carga después y su regla de
   objetivo táctil (`.nav button`, 0-1-1) vencía a este display por especificidad, así que
   las tres barras asomaban también en escritorio, al lado del menú completo. */
.nav .nav__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  width: 1.5rem;
  height: 1.1rem;
}

.nav__hamburguesa span {
  display: block;
  /* Ancho explícito, no por `stretch`: la regla de objetivo táctil de a11y.css pone
     `align-items: center` en los botones y eso colapsaba las tres barras a 0px de ancho.
     El botón existía, medía 44x44 y era invisible: en móvil no había forma de abrir el
     menú. Con un ancho propio deja de depender del alineado que herede. */
  width: 1.5rem;
  margin-inline: auto;
  height: 2px;
  background: var(--cor-papel);
  border-radius: 2px;
  transition: transform var(--dur-rapida) var(--curva), opacity var(--dur-rapida) var(--curva);
}

.nav__hamburguesa[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburguesa[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__hamburguesa[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .nav .nav__hamburguesa {
    display: flex;
  }

  .nav__lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
    padding: var(--esp-5);
    background: var(--cor-tinta-2);
    border-top: 1px solid color-mix(in srgb, var(--cor-azul) 25%, transparent);
    box-shadow: var(--sombra-md);
  }

  .nav__lista--abierta {
    display: flex;
  }
}

/* ===================== .boton (familia canónica) ===================== */

.boton,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-pill);
  font-size: var(--tipo-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-rapida) var(--curva),
    background var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva),
    border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}

.boton:active,
.btn:active {
  transform: scale(0.97);
}

/* Primario — rosa, es la acción (reservar, confirmar). Texto en tinta: papel sobre rosa
   falla contraste (2,63:1), ver AUDITORIA-A11Y.md */
.boton--primario,
.boton--whatsapp,
.btn--primario,
.btn--wa {
  background: var(--cor-rosa);
  color: var(--cor-tinta);
  box-shadow: var(--sombra-sm);
}

.boton--primario:hover,
.boton--whatsapp:hover,
.btn--primario:hover,
.btn--wa:hover {
  background: color-mix(in srgb, var(--cor-rosa) 85%, white);
  box-shadow: var(--sombra-md);
}

/* Secundario / fantasma — contorno, para acciones que no compiten con el CTA principal */
.boton--secundario,
.btn--fantasma {
  background: transparent;
  color: var(--cor-papel);
  border: 1px solid color-mix(in srgb, var(--cor-papel) 35%, transparent);
}

.boton--secundario:hover,
.btn--fantasma:hover {
  border-color: var(--cor-azul);
  color: var(--cor-azul);
  background: color-mix(in srgb, var(--cor-azul) 12%, transparent);
}

/* ===================== .portada — héroe del toro ===================== */

/* Ronda 5 (ENCARGO-5.md): el vídeo pasa a verse ENTERO (lo resuelve `frontend` con
   `object-fit:contain` + el envoltorio ajustado al ratio real de la pintura, 752/1200).
   Eso deja aire del mismo negro del cuadro a los lados (pantalla ancha) o arriba/abajo
   (pantalla angosta): `.portada` ya no es un fondo de interfaz, es el marco de la pieza,
   así que usa `--cor-negro-cuadro` (medido del propio vídeo), no `--cor-tinta`. El texto
   deja de montarse centrado ENCIMA de la pintura (eso exigía el velo de
   `.portada__marco::after`, ya retirado más abajo): ahora vive en el aire negro del
   `contain`, nunca sobre la cara.

   `--portada-aire-y` calcula EN GEOMETRÍA PURA (no a ojo) cuánto negro puro deja el
   `contain` arriba/abajo del encuadre cuando la pantalla es angosta — la misma fórmula
   de `frontend` (`--portada-banda`, altura del encuadre) despejada para la banda que
   sobra. Sirve de mínimo garantizado: por defecto (pantalla angosta) el bloque se ancla
   ABAJO (`margin-top:auto`), sobre esa banda — la franja inferior del lienzo además
   confirma a ojo ser la más pareja de negro de las dos (la superior tiene un reflejo del
   cuerno que la cruza en diagonal). En pantallas muy bajas (p. ej. un iPhone SE, donde
   la banda puede llegar a 0) el bloque cae sobre el borde oscuro del propio lienzo, no
   sobre la cara (que vive a 60%–78% de alto, muy por encima del borde inferior) — sigue
   cumpliendo "nunca sobre la cara" aunque dejé de tener banda pura. La tipografía de este
   caso se compacta (ver cada regla) para cumplir con cualquiera de las dos franjas. */
.portada {
  --portada-banda: calc(100svh - var(--nav-alto));
  --portada-alto-cuadro: min(var(--portada-banda), calc(100vw * 1200 / 752));
  --portada-aire-y: calc((100svh - var(--portada-alto-cuadro)) / 2 - var(--nav-alto) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: var(--cor-papel);
  /* Ronda 8: negro puro y opaco, el mismo del vídeo del dueño. Cualquier otro valor
     dibuja el canto del rectángulo del vídeo contra la página. El humo de la capa fija
     empieza por debajo del héroe: aquí el polvo ya lo levanta el toro del vídeo. */
  background: var(--cor-negro-video);
  cursor: pointer; /* toda la portada es el gesto — no sólo la diana vieja del hocico */
  /* El borde inferior cede 8px de la banda negra garantizada: a 390x844 el bloque de
     texto arrancaba a 2px de la frontera del hocico (78% del encuadre, §3 del brief) y
     cualquier reflujo de tipografía lo metía dentro de la cara. Con estos 8px el margen
     es real y la banda baja de 75 a 67px, diferencia que no se ve. */
  padding-block: calc(var(--nav-alto) + var(--esp-3))
    max(var(--esp-5), calc(var(--portada-aire-y) - var(--esp-2)));
  padding-inline: var(--esp-5);
  isolation: isolate; /* ronda 4 §2.3: contiene el apilado del humo a esta capa */
}

/* Ronda 4 (ENCARGO-4.md §2.3), caso especial de #portada: el humo va POR DEBAJO de la
   pintura, no de la interfaz entera. `.portada__marco` trae `z-index:0` en línea (no es
   mío, lo pone `frontend`) — en vez de pelear esa inline con `!important`, `.humo` se
   queda también en `z-index:0` (su valor de base, ver más abajo) y gana el empate el
   orden del DOM: `frontend` inserta `.humo` como primer hijo de la sección (§2.2), así
   que `.portada__marco` —que llega después— pinta encima sin que nadie toque una línea
   ajena. `.portada__contenido`/`.portada__flecha` ya traen `z-index:1` en línea, por
   encima de ambos. */

/* Sólo en pantalla ancha hay aire lateral real (banda ≳ el ancho de un bloque de texto):
   752/1200 es el ratio de la pintura; 4/3 deja margen de sobra antes de ese umbral para
   no caer en el tramo donde el aire lateral es demasiado angosto para el texto (una
   tableta en vertical, por ejemplo, sigue cayendo en la composición de abajo). Ahí la
   cabeza cae a la derecha del encuadre, así que el bloque se mueve al aire de la
   izquierda y se centra verticalmente como grupo. */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding-inline-start: var(--esp-8);
  }
}

/* Ronda 6, pantallas angostas: ahí la media cara ocupa casi todo el ancho y el bloque de
   texto no tiene banda negra donde apoyarse — cae sobre la pintura y «MEXICAN GRILL» y el
   horario se pierden sobre el pelaje. Un velo degradado SÓLO en el tercio inferior
   devuelve la legibilidad sin tapar la cara: arranca transparente a media altura y cierra
   en el negro del lienzo abajo. En pantalla ancha no hace falta, porque el texto vive en
   el aire negro de la izquierda. */
@media (max-width: 899px), (max-aspect-ratio: 4/3) {
  .portada::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 44%;
    z-index: 0;
    pointer-events: none; /* el clic en toda la portada tiene que seguir funcionando */
    background: linear-gradient(
      to top,
      var(--cor-negro-cuadro) 0%,
      color-mix(in srgb, var(--cor-negro-cuadro) 74%, transparent) 46%,
      transparent 100%
    );
  }
}

.portada__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pantalla angosta: huecos mínimos — el bloque compite por espacio con la banda negra
     garantizada (--portada-aire-y) antes de meterse en la zona del hocico (60%-78% de
     alto del encuadre). Cada rem que se ahorra aquí es margen de verdad contra la cara. */
  gap: var(--esp-1);
  max-width: 36rem;
  margin-top: auto; /* pantalla angosta: el bloque flota al fondo del héroe, junto a la flecha */
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__contenido {
    align-items: flex-start;
    gap: var(--esp-3);
    margin-top: 0; /* en el aire lateral el grupo se centra con justify-content, no abajo */
    /* Cabe en el aire de la izquierda en cualquier tamaño que cumpla el umbral de arriba:
       a 1440×900 (medida de verificación) el aire real mide ~438px; 26vw con el límite en
       rem deja margen de sobra sin acercarse al borde de la pintura. */
    max-width: min(26rem, 26vw);
  }
}

.portada__logo {
  font-family: var(--fuente-display);
  /* Pantalla angosta: bloque compacto para caber en la banda inferior del héroe (ver
     --portada-aire-y arriba). En el aire lateral de pantalla ancha hay sitio de sobra,
     así que ahí recupera el tamaño grande original. */
  font-size: var(--tipo-xl);
  line-height: var(--linea-ajustada);
  letter-spacing: 0.03em;
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__logo {
    font-size: var(--tipo-display);
  }
}

.portada__logo span {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: var(--tipo-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-humo);
  margin-top: var(--esp-1);
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__logo span {
    font-size: var(--tipo-md);
    margin-top: var(--esp-2);
  }
}

.portada__claim {
  font-size: var(--tipo-base);
  font-weight: 500;
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__claim {
    font-size: var(--tipo-lg);
  }
}

.portada__horario {
  font-size: var(--tipo-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-humo);
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__horario {
    font-size: var(--tipo-sm);
  }
}

.portada__flecha {
  margin-top: var(--esp-1); /* pantalla angosta: sigue justo debajo del bloque, ambos abajo */
  padding-top: var(--esp-1);
  color: var(--cor-papel);
  transition: color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
  animation: rebote-flecha 2.4s ease-in-out infinite;
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__flecha {
    margin-top: var(--esp-6);
    padding-top: 0;
  }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .portada__flecha {
    /* El margen automático ganaría siempre a `justify-content:center` del héroe (se
       lleva todo el espacio libre): se cancela para que contenido + flecha floten como
       un solo bloque centrado en el aire de la izquierda. */
    margin-top: var(--esp-6);
  }
}

.portada__flecha:hover {
  color: var(--cor-rosa);
}

@keyframes rebote-flecha {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ===================== .toro-hotspot — el punto interactivo ===================== */
/* Posición/tamaño (fracciones de §3 sobre la nariz) los pone frontend en línea sobre
   #toro-hotspot: aquí sólo vive el aspecto. No tocar left/top/width/height desde aquí. */

.toro-hotspot {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Ronda 5 (ENCARGO-5.md §3): "quitar ese círculo rosa" — el halo/pulso deja de pintar
   nada visible (ni relleno, ni borde, ni sombra, ni animación). El nodo se queda en el
   HTML (no es mío: lo pone `frontend`) pero aquí no renderiza nada; el `@keyframes` que
   le daba vida se borra entero, no se deja muerto en la hoja. El anillo de foco por
   teclado NO depende de esta regla — vive aparte en `a11y.css` (`#toro-hotspot:focus-visible`,
   de `auth`) y sigue intacto. */
.toro-hotspot__pulso {
  display: none;
}

/* "toca para ver el menú": única señal visible de que la portada se toca (ronda 5,
   ENCARGO-5.md §3). Posición sin cambios — sigue bajo el hocico (centro x ≈ 86%, borde
   inferior 78%, geometría §3 del brief) porque ahí es donde cae la mirada, aunque ahora
   el clic funcione en cualquier parte de la portada. Peso subido a propósito: letra un
   escalón más grande, fondo más opaco y borde más presente que antes de esta ronda —
   tiene que ganarle a la pintura sin competir con el claim, que sigue siendo más grande
   (--tipo-lg > --tipo-sm) y más arriba en la jerarquía visual. */
.pista-toro {
  position: absolute;
  left: 86%;
  top: 80%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: min(14rem, 60vw);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--cor-tinta) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-papel) 45%, transparent);
  box-shadow: var(--sombra-md);
  color: var(--cor-papel);
  font-size: var(--tipo-sm);
  font-weight: 600;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  animation: flotar-pista 2.6s ease-in-out infinite;
}

@keyframes flotar-pista {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

/* ===================== .brasas — el fondo de la página (ronda 9) ===================== */
/* Francisco: «el fondo, tanto de la carta como de todo, que sean estas cenizas». Es el
   vídeo del dueño, brasas encendidas con humo subiendo. Va FIJO detrás de todo para que
   acompañe el recorrido sin moverse a tirones, y la portada lo tapa con su negro opaco:
   los toros se quedan solos arriba. Sustituye a la capa de humo de CSS de las rondas 4-8,
   que intentaba simular con degradados lo que aquí es material real. */

.brasas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* CRÍTICO: cubre la pantalla entera; sin esto no hay botón clicable */
}

.brasas__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Las brasas son muy contrastadas y el texto se lee encima: el velo las apaga lo justo
   para que los titulares y los platos sigan legibles sin perder las ascuas. */
.brasas__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--cor-tinta) 86%, transparent) 0%,
    color-mix(in srgb, var(--cor-tinta) 72%, transparent) 45%,
    color-mix(in srgb, var(--cor-tinta) 88%, transparent) 100%
  );
}

/* ===================== Logotipo de la barra (ronda 9) ===================== */

.nav__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}

.nav__logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radio-pill);
  object-fit: cover;
  flex: none;
}

/* ===================== .encuentranos — mapa, dirección y contacto juntos ===================== */
/* Antes eran dos secciones separadas y Francisco pidió que no fueran «páginas distintas»:
   el mapa a un lado y, junto a él, la dirección, el enlace de Google Maps y el contacto. */

.encuentranos {
  position: relative;
  padding-block: clamp(var(--esp-7), 10vw, 7rem);
}

.encuentranos h2 {
  /* Un punto por debajo del display: el titular competía con el mapa y los datos. */
  font-size: var(--tipo-xl);
  text-align: center;
  margin-bottom: var(--esp-6);
}

.encuentranos__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--esp-5), 4vw, var(--esp-8));
  align-items: start;
}

@media (max-width: 860px) {
  .encuentranos__rejilla {
    grid-template-columns: 1fr;
  }
}

.encuentranos__mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  border: 1px solid color-mix(in srgb, var(--cor-azul) 28%, transparent);
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--cor-tinta-2);
}

.encuentranos__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.encuentranos__datos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

.dato h3 {
  font-family: var(--fuente-cuerpo);
  font-size: var(--tipo-xs);
  font-weight: 600;
  letter-spacing: var(--letra-ancha);
  text-transform: uppercase;
  color: var(--cor-humo);
  margin-bottom: var(--esp-3);
}

.dato p {
  margin: 0 0 var(--esp-4);
  max-width: none;
}

.dato__direccion {
  font-size: var(--tipo-md);
  font-weight: 500;
}

.dato__cerrado {
  color: var(--cor-humo);
}

/* Los botones de la columna de datos se ajustan a su contenido: a ancho completo, el de
   WhatsApp pesaba más que el propio mapa. */
.encuentranos .contacto__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}

.encuentranos .contacto__lista .boton {
  width: fit-content;
}

.encuentranos__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.encuentranos__redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--esp-4);
  border: 1px solid color-mix(in srgb, var(--cor-azul) 26%, transparent);
  border-radius: var(--radio-pill);
  font-size: var(--tipo-sm);
  color: var(--cor-humo);
}

.encuentranos__redes a:hover {
  color: var(--cor-papel);
  border-color: var(--cor-azul);
}

/* ===================== Secciones de contenido ===================== */

.menu,
.reserva,
.encuentranos {
  /* Sin fondo propio: el vídeo de brasas va fijo por detrás y se ve a través. */
  position: relative;
  /* Ronda 9: el aire vertical baja de 10vw/7rem a 7vw/5rem. Con cuatro secciones en vez
     de seis, aquel respiro dejaba franjas muertas entre bloque y bloque. */
  padding-block: clamp(var(--esp-6), 7vw, 5rem);
}

.menu h2 {
  font-size: var(--tipo-display);
  text-align: center;
  margin-bottom: var(--esp-5);
}

.menu > .contenedor > p {
  color: var(--cor-humo);
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--esp-4);
}

.aviso-provisional,
.menu__aviso-provisional {
  display: block;
  font-size: var(--tipo-sm);
  font-style: italic;
  color: var(--cor-humo);
  border-left: 2px solid var(--cor-amarillo);
  padding-left: var(--esp-3);
  margin-top: var(--esp-5);
  text-align: left;
}

.menu .contenedor > .boton {
  margin-top: var(--esp-6);
  display: flex;
  margin-inline: auto;
  width: fit-content;
}

/* ===================== Platos recomendados (ronda 10) ===================== */

/* El dueño pasó vídeo propio de tres platos y los quiere arriba del todo de la
   carta, antes de las pestañas. Tres tarjetas con el vídeo mandando y el texto
   debajo: la imagen es la que vende, pero el nombre y la descripción están
   siempre en texto, así que una tarjeta sin vídeo sigue sirviendo. */

.recomendados {
  /* El aviso de carta provisional queda justo encima y es una línea suelta
     alineada a la izquierda: sin este respiro el titular se le pega. */
  margin-block: var(--esp-7) var(--esp-8);
}

.recomendados__titulo {
  font-family: var(--fuente-display);
  font-size: var(--tipo-lg);
  text-align: center;
  color: var(--cor-papel);
  margin-bottom: var(--esp-2);
}

.recomendados__bajada {
  text-align: center;
  color: var(--cor-humo);
  font-size: var(--tipo-sm);
  max-width: 48ch;
  margin: 0 auto var(--esp-6);
}

.recomendados__rejilla {
  display: grid;
  /* auto-fit + minmax resuelve los tres cortes de una vez: tres columnas en
     escritorio, dos en tableta y una en móvil, sin una sola media query. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--esp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.recomendado {
  display: flex;
  flex-direction: column;
  /* Fondo propio y opaco: la tarjeta se apoya sobre el vídeo de brasas, y sin
     este negro elevado el texto quedaría leyéndose sobre las llamas. */
  background: var(--cor-tinta-2);
  border: 1px solid color-mix(in srgb, var(--cor-papel) 10%, transparent);
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-md);
  transition: transform var(--dur-media) var(--curva),
              box-shadow var(--dur-media) var(--curva),
              border-color var(--dur-media) var(--curva);
}

.recomendado:hover,
.recomendado:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-color: color-mix(in srgb, var(--cor-amarillo) 45%, transparent);
}

.recomendado__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cor-negro-video);
}

.recomendado__video {
  display: block;
  width: 100%;
  height: 100%;
  /* Al revés que la portada, que va en `contain` porque su composición son los
     dos toros pegados a los bordes. Aquí el plato está centrado en el encuadre
     y el recorte lateral no se lleva nada por delante. */
  object-fit: cover;
}

/* Sólo aparece cuando el visitante pide movimiento reducido: entonces nada
   arranca solo y este botón es la única forma de ver el vídeo. */
.recomendado__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cor-papel) 35%, transparent);
  border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--cor-tinta) 72%, transparent);
  color: var(--cor-papel);
  font-size: var(--tipo-md);
  line-height: 1;
  cursor: pointer;
}

.recomendado__play:hover {
  background: color-mix(in srgb, var(--cor-tinta) 86%, transparent);
  border-color: var(--cor-amarillo);
}

.recomendado__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
}

.recomendado__nombre {
  font-family: var(--fuente-display);
  font-size: var(--tipo-md);
  color: var(--cor-papel);
  margin: 0;
}

.recomendado__descripcion {
  font-size: var(--tipo-sm);
  line-height: var(--linea-normal);
  color: var(--cor-humo);
  margin: 0;
}

.recomendado__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  padding: 0;
  margin: var(--esp-1) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .recomendado,
  .recomendado:hover,
  .recomendado:focus-within {
    transition: none;
    transform: none;
  }
}

/* ===================== La carta — categorías, tabs, platos ===================== */

.categoria__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
  position: sticky;
  top: calc(var(--nav-alto) + var(--esp-3));
  z-index: 10;
  padding-block: var(--esp-2);
}

.tab {
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pill);
  font-size: var(--tipo-sm);
  font-weight: 600;
  color: var(--cor-humo);
  background: color-mix(in srgb, var(--cor-tinta-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-azul) 25%, transparent);
  transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva),
    border-color var(--dur-rapida) var(--curva);
}

.tab:hover {
  color: var(--cor-papel);
}

/* Fondo azul claro + texto tinta = 6,51:1 (antes papel/azul = 3,90:1, fallaba AA 4,5:1) */
.tab--activa {
  background: var(--cor-azul);
  border-color: var(--cor-azul);
  color: var(--cor-tinta);
}

.categoria__paneles {
  margin-top: var(--esp-6);
}

.categoria__titulo {
  font-family: var(--fuente-display);
  font-size: var(--tipo-lg);
  color: var(--cor-papel);
  margin-bottom: var(--esp-2);
}

.categoria__nota {
  font-size: var(--tipo-sm);
  color: var(--cor-humo);
  margin-bottom: var(--esp-4);
}

.categoria__lista {
  display: flex;
  flex-direction: column;
}

.plato {
  padding-block: var(--esp-4);
  border-bottom: 1px solid color-mix(in srgb, var(--cor-azul) 20%, transparent);
}

.plato:last-child {
  border-bottom: none;
}

.plato--no-disponible {
  opacity: 0.55;
}

.plato--no-disponible .plato__nombre {
  text-decoration: line-through;
}

.plato__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
}

.plato__nombre {
  font-family: var(--fuente-cuerpo);
  font-size: var(--tipo-md);
  font-weight: 600;
  color: var(--cor-papel);
}

.plato__precio {
  flex-shrink: 0;
  font-family: var(--fuente-display);
  font-size: var(--tipo-md);
  font-weight: 600;
  color: var(--cor-amarillo);
}

.plato__descripcion {
  font-size: var(--tipo-sm);
  color: var(--cor-humo);
  margin-top: var(--esp-1);
}

.plato__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--esp-2);
  border-radius: var(--radio-pill);
  font-size: var(--tipo-xs);
  font-weight: 600;
  text-transform: capitalize;
  background: color-mix(in srgb, var(--cor-papel) 10%, transparent);
  color: var(--cor-humo);
}

.etiqueta--recomendado {
  color: var(--cor-rosa);
  background: color-mix(in srgb, var(--cor-rosa) 15%, transparent);
}

.etiqueta--picante {
  color: var(--cor-amarillo);
  background: color-mix(in srgb, var(--cor-amarillo) 15%, transparent);
}

.etiqueta--vegetariano {
  color: var(--cor-azul);
  background: color-mix(in srgb, var(--cor-azul) 18%, transparent);
}

.plato__no-disponible {
  display: inline-block;
  margin-top: var(--esp-1);
  font-size: var(--tipo-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-humo);
}

.menu__mensaje {
  text-align: center;
  color: var(--cor-humo);
  padding-block: var(--esp-5);
}

.menu__mensaje--error {
  color: var(--cor-papel);
}

/* ===================== Reseñas ===================== */

.resenas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-5);
  margin-top: var(--esp-6);
}

.resena {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-6);
  background: var(--cor-tinta-2);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  text-align: left;
  height: 100%;
}

.resena__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
}

.resena__autor {
  font-size: var(--tipo-sm);
  font-weight: 700;
  color: var(--cor-papel);
}

.resena__estrellas {
  flex-shrink: 0;
  color: var(--cor-amarillo);
  font-size: var(--tipo-md);
  letter-spacing: 0.1em;
}

.resena__texto {
  font-size: var(--tipo-base);
  color: var(--cor-papel);
  line-height: var(--linea-holgada);
}

.resena__fecha {
  display: block;
  font-size: var(--tipo-xs);
  color: var(--cor-humo);
}

.resenas-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  text-align: center;
  padding-block: var(--esp-6);
}

.resenas-aviso {
  text-align: center;
  color: var(--cor-humo);
  padding-block: var(--esp-5);
}

/* ===================== Ubicación y contacto ===================== */

.ubicacion .contenedor,
.contacto .contenedor {
  text-align: center;
}

.ubicacion__direccion {
  font-size: var(--tipo-md);
  font-weight: 600;
  color: var(--cor-papel);
  margin-bottom: var(--esp-2);
}

.ubicacion__horario {
  font-size: var(--tipo-sm);
  color: var(--cor-humo);
  margin-bottom: var(--esp-5);
}

/* Ronda 3: la sección por la que llaman para reservar mesa salía como cinco pastillas
   oscuras idénticas, apiladas, sin jerarquía. `index.html` es de `frontend` (li planos, sin
   clases propias por enlace) — aquí se distingue por `data-enlace`, sin pedirle que renombre
   nada: WhatsApp es la acción principal (grande, rosa, cómoda con el pulgar), el teléfono es
   secundario, y las tres redes son terciarias y van juntas en una fila de pastillas pequeñas. */
.contacto__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
  max-width: 28rem;
  margin-inline: auto;
}

/* `li:has(...)` en vez de `display:contents` en el <li>: ese truco saca el <li> del árbol de
   accesibilidad en algunas versiones de Safari/VoiceOver. Así el <li> sigue siendo el grid
   item real (ancho completo para WhatsApp y teléfono) y el <a> sólo lo rellena. */
.contacto__lista li:has(a[data-enlace="whatsapp"]),
.contacto__lista li:has(a[data-enlace="telefono"]) {
  grid-column: 1 / -1;
}

.contacto__lista a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  width: 100%;
  height: 100%;
  text-align: center;
  transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva),
    border-color var(--dur-rapida) var(--curva);
}

/* 1) WhatsApp — acción principal: grande, rosa, el más visible de la sección */
.contacto__lista a[data-enlace="whatsapp"] {
  min-height: 56px;
  padding: var(--esp-4) var(--esp-5);
  background: var(--cor-rosa);
  color: var(--cor-tinta);
  border-radius: var(--radio-pill);
  font-size: var(--tipo-md);
  font-weight: 700;
  box-shadow: var(--sombra-md);
}

.contacto__lista a[data-enlace="whatsapp"]:hover {
  background: color-mix(in srgb, var(--cor-rosa) 85%, white);
}

/* 2) Teléfono — segundo nivel: contorno, ancho completo, menos peso que WhatsApp */
.contacto__lista a[data-enlace="telefono"] {
  padding: var(--esp-3) var(--esp-4);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cor-papel) 35%, transparent);
  color: var(--cor-papel);
  border-radius: var(--radio-pill);
  font-size: var(--tipo-base);
  font-weight: 600;
}

.contacto__lista a[data-enlace="telefono"]:hover {
  border-color: var(--cor-azul);
  color: var(--cor-azul);
  background: color-mix(in srgb, var(--cor-azul) 12%, transparent);
}

/* 3) Redes — terciarias: una fila de pastillas pequeñas, mismo peso entre ellas */
.contacto__lista a[data-enlace="instagram"],
.contacto__lista a[data-enlace="facebook"],
.contacto__lista a[data-enlace="threads"] {
  padding: var(--esp-2) var(--esp-2);
  background: var(--cor-tinta-2);
  color: var(--cor-humo);
  border-radius: var(--radio-md);
  font-size: var(--tipo-xs);
  font-weight: 600;
}

.contacto__lista a[data-enlace="instagram"]:hover,
.contacto__lista a[data-enlace="facebook"]:hover,
.contacto__lista a[data-enlace="threads"]:hover {
  background: var(--cor-rosa);
  color: var(--cor-tinta);
}

/* ===================== .pie — pie de página ===================== */

.pie {
  position: relative;
  /* Ronda 6: el fondo sólido tapaba la capa fija justo en la última pantalla de la web.
     Semitransparente, el humo llega hasta el final del recorrido como en todo lo demás. */
  background: color-mix(in srgb, var(--cor-tinta-2) 86%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--cor-azul) 25%, transparent);
  padding-block: var(--esp-7);
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
}

.pie__marca {
  font-family: var(--fuente-display);
  font-size: var(--tipo-md);
  color: var(--cor-papel);
}

.pie__marca span {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-humo);
  margin-left: 0.4em;
}

.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
}

.pie__redes a {
  font-size: var(--tipo-sm);
  font-weight: 600;
  color: var(--cor-humo);
  transition: color var(--dur-rapida) var(--curva);
}

.pie__redes a:hover {
  color: var(--cor-rosa);
}

.pie__derechos {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--tipo-xs);
  color: var(--cor-humo);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid color-mix(in srgb, var(--cor-papel) 10%, transparent);
}

/* ===================== Revelado de secciones al hacer scroll ===================== */
/* Nunca usa opacity:0. app.js marca `.revelar--visible` vía IntersectionObserver, que SÓLO
   dispara con scroll real — una captura de página completa (como pruebas/captura.js, que usa
   `captureBeyondViewport` sin scroll de verdad) nunca llega a disparar el observer. Con
   opacity:0 de partida esas secciones se habrían quedado invisibles para siempre en cualquier
   captura, lector sin JS o renderizado estático: el contenido NUNCA puede depender de que un
   script termine de ejecutarse para dejar de estar oculto. Por eso el único efecto es un
   desplazamiento vertical leve — el texto siempre se lee, con o sin JS, con o sin scroll. */
@media (scripting: enabled) {
  .revelar {
    transform: translateY(16px);
    transition: transform var(--dur-lenta) var(--curva);
  }

  .revelar--visible {
    transform: none;
  }
}

/* ===================== Ronda 8 — portada sobre el vídeo del dueño ===================== */
/* El rótulo «CORNELIA · Mexican Grill» ya va dentro del vídeo, así que aquí no se repite:
   la página sólo pone la bajada, el horario y las dos acciones. */

.portada__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  max-width: 42rem;
  margin-top: 0;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

.portada__flecha {
  margin-top: 0;
  padding-top: var(--esp-3);
}

/* ===================== .reserva — fecha, hora y comensales ===================== */

.reserva {
  position: relative;
  padding-block: clamp(var(--esp-7), 10vw, 7rem);
}

.reserva h2 {
  font-size: var(--tipo-display);
  text-align: center;
  margin-bottom: var(--esp-5);
}

.reserva > .contenedor > p {
  color: var(--cor-humo);
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--esp-6);
}

/* Rejilla de campos, no una tarjeta flotante: filos finos y fondo apenas elevado. */
.reserva__forma {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--esp-4);
  align-items: end;
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(var(--esp-6), 4vw, var(--esp-8));
  background: color-mix(in srgb, var(--cor-tinta-2) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-azul) 22%, transparent);
  border-radius: var(--radio-md);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

.campo label {
  font-size: var(--tipo-xs);
  letter-spacing: var(--letra-ancha);
  text-transform: uppercase;
  color: var(--cor-humo);
}

.campo input,
.campo select {
  width: 100%;
  min-height: 52px;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-tinta);
  color: var(--cor-papel);
  border: 1px solid color-mix(in srgb, var(--cor-azul) 32%, transparent);
  border-radius: var(--radio-sm);
}

.campo input:focus-visible,
.campo select:focus-visible {
  outline: 2px solid var(--cor-amarillo);
  outline-offset: 2px;
}

.campo input::placeholder {
  color: color-mix(in srgb, var(--cor-humo) 70%, transparent);
}

.reserva__enviar {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: var(--esp-2);
}

/* El aviso ocupa toda la fila para que no empuje los campos al aparecer. */
.reserva__aviso {
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  color: var(--cor-amarillo);
  font-size: var(--tipo-sm);
  border-left: 2px solid var(--cor-amarillo);
  padding-left: var(--esp-3);
}

.reserva__nota {
  margin-top: var(--esp-5);
  margin-inline: auto;
  text-align: center;
  font-size: var(--tipo-sm);
  color: var(--cor-humo);
}


/* Todo el contenido vive por encima del vídeo fijo de brasas (z-index 0).
   Ronda 11: `.nav` SALE de esta lista. Al entrar aquí en la ronda 9 (14a4bf0) pisaba, por
   venir después con la misma especificidad, el `position: fixed; z-index: 100` de la barra
   (línea 25): la barra dejó de ser fija —con `nav--compacta` y `scroll-margin-top:
   var(--nav-alto)` apuntando a una barra que ya no flotaba— y, con `main` empatado a
   z-index 1 pero más abajo en el DOM, `main` pintaba ENCIMA de la barra. En móvil eso dejó
   el menú de la hamburguesa abierto pero inerte: el toque sobre «Encuéntranos» caía en
   `#portada` (elementFromPoint devolvía SECTION#portada) y llevaba a otra parte. La barra
   ya está por encima del vídeo con su propio z-index: 100, no necesita esta regla. */
main,
.pie {
  position: relative;
  z-index: 1;
}


/* Pie: deja de repetir las redes, que ya viven en #encuentranos con su propio bloque. */
.pie__sitio {
  margin: 0;
  font-size: var(--tipo-sm);
  color: var(--cor-humo);
}

.pie__sitio a:hover {
  color: var(--cor-papel);
}

/* Respaldo del mapa cuando no hay JavaScript: un enlace útil, nunca una caja vacía. */
.encuentranos__sin-mapa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-5);
  text-align: center;
  color: var(--cor-humo);
}