/* ============================================================
   D'ASADA — Sitio de una página
   ============================================================ */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}
.envoltura--angosta {
  max-width: 52rem;
}

/* --- Rótulo: la etiqueta chica sobre cada título --- */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--letra-rotulo);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crema);
  margin: 0;
}
.rotulo::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--dorado);
  opacity: 0.6;
}

/* ============================================================
   Marca
   ============================================================ */


.marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.marca__logo {
  height: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
  width: auto;
  display: block;
}

/* ============================================================
   Botones
   ============================================================ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: var(--toque);
  padding: 0 var(--e-5);
  font-family: var(--letra-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
    color var(--transicion), transform var(--transicion);
}
.boton:active {
  transform: translateY(1px);
}
/* Negro puro, no el carbón de la página: sobre el naranja del logo el
   carbón da 4.43:1 y el CTA de la barra (15 px) se queda justo por debajo
   del mínimo. El negro lo sube a 4.82:1 y a simple vista es el mismo. */
.boton--fuego {
  background: var(--brasa);
  color: #000;
  border-color: var(--brasa);
}
.boton--fuego:hover {
  background: var(--brasa-viva);
  border-color: var(--brasa-viva);
}
.boton--linea {
  background: transparent;
  color: var(--crema);
  border-color: rgba(232, 228, 216, 0.34);
}
.boton--linea:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}
.boton--oro {
  background: transparent;
  color: var(--dorado);
  border-color: var(--borde-suave);
}
.boton--oro:hover {
  background: rgba(201, 169, 97, 0.1);
  border-color: var(--dorado);
}
.boton--ancho {
  width: 100%;
}
.boton--grande {
  min-height: 3.625rem;
  padding-inline: clamp(var(--e-5), 4vw, 2.125rem);
  font-size: 1.1875rem;
  letter-spacing: 0.1em;
}

/* ============================================================
   Barra de navegación
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid rgba(232, 228, 216, 0.14);
  transition: background var(--transicion), border-color var(--transicion);
}
.nav[data-fijo='true'] {
  background: rgba(16, 13, 11, 0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--borde);
}
.nav__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--alto-nav);
}
.nav__enlaces {
  display: none;
  align-items: center;
  gap: var(--e-6);
}
.nav__enlaces a {
  font-family: var(--letra-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--texto-apagado);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.nav__enlaces a:hover,
.nav__enlaces a[aria-current='true'] {
  color: var(--crema);
  border-bottom-color: var(--brasa);
}
.nav__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
/* En pantallas angostas el botón se abrevia para no comerse la hamburguesa. */
.solo-ancho {
  display: none;
}
@media (min-width: 26rem) {
  .solo-ancho {
    display: inline;
  }
}

@media (max-width: 30rem) {
  :root {
    --alto-nav: 4rem;
  }
  .nav__acciones .boton {
    font-size: 0.85rem;
    padding-inline: var(--e-4);
    min-height: 2.6rem;
  }
  .nav__menu {
    width: 2.6rem;
    height: 2.6rem;
  }
  .nav__fila {
    min-height: var(--alto-nav);
  }
}

/* Debajo de ~30rem, "Martes a viernes · hoy" y la hora ya no caben en
   una sola fila sin que el indicador "hoy" se rompa a media palabra.
   Se apilan: el día arriba, la hora abajo, sin línea punteada de por
   medio (no hace falta cuando ya son dos renglones). */
@media (max-width: 30rem) {
  .horario__fila {
    flex-wrap: wrap;
    row-gap: 0.15em;
  }
  .horario__linea {
    display: none;
  }
  .horario__hora {
    flex-basis: 100%;
  }
}
.nav__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  background: none;
  border: 1px solid var(--carbon-500);
  border-radius: 999px;
  cursor: pointer;
}
.nav__menu svg {
  width: 1.15rem;
  height: 1.15rem;
}
.nav__menu .cerrar {
  display: none;
}
.nav__menu[aria-expanded='true'] .abrir {
  display: none;
}
.nav__menu[aria-expanded='true'] .cerrar {
  display: block;
}

.nav__panel {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4) var(--canal) var(--e-6);
  border-top: 1px solid var(--borde);
  background: var(--carbon-800);
}
.nav__panel[hidden] {
  display: none;
}
.nav__panel a {
  font-family: var(--letra-display);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--crema);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borde);
}
.nav__panel a:last-of-type {
  border-bottom: 0;
}

/* --- Estado, como píldora en la barra --- */
.estado-pildora {
  display: none;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.8125rem;
  background: rgba(232, 228, 216, 0.1);
  border: 1px solid rgba(232, 228, 216, 0.18);
  border-radius: 100px;
  font-family: var(--letra-rotulo);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--crema);
  white-space: nowrap;
}
.estado-pildora .estado__punto {
  width: 7px;
  height: 7px;
}
.estado-pildora[data-abierto='true'] .estado__punto {
  background: var(--verde);
}
.estado-pildora .estado__punto {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ceniza);
}
.estado-pildora[data-abierto='true'] .estado__punto {
  background: #4ade80;
}

/* ============================================================
   Rescoldo — la firma, ahora hecha de luz y no de formas.
   ============================================================ */

.rescoldo {
  position: relative;
  height: 1px;
  pointer-events: none;
}
.rescoldo__linea {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--brasa-rgb), 0.35) 16%,
    rgba(var(--brasa-viva-rgb), 0.85) 50%,
    rgba(var(--brasa-rgb), 0.35) 84%,
    transparent 100%
  );
}
/* El calor que sube del filete. Sin bordes: solo aire caliente. */
.rescoldo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.5px;
  transform: translateX(-50%);
  width: min(120%, 68rem);
  height: 9rem;
  background: radial-gradient(
    ellipse 52% 100% at 50% 100%,
    rgba(var(--brasa-rgb), 0.15),
    rgba(var(--brasa-rgb), 0.05) 45%,
    transparent 72%
  );
  animation: rescoldo 9s ease-in-out infinite;
}
/* Bajo la portada el rescoldo es más ancho: viene de la parrilla entera. */
.rescoldo--lecho::after {
  height: 14rem;
  background: radial-gradient(
    ellipse 62% 100% at 50% 100%,
    rgba(var(--brasa-rgb), 0.26),
    rgba(var(--brasa-rgb), 0.08) 42%,
    transparent 74%
  );
}
@keyframes rescoldo {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

/* ============================================================
   Revelado al entrar en pantalla.
   Solo se activa si hay JavaScript: sin él, todo se ve de una vez.

   Tres tratamientos, porque no todo debe entrar igual:
     texto   — sube y aparece
     tarjeta — sube, aparece y se asienta desde un 98 %
     foto    — se descubre de abajo hacia arriba, como una cortina
   ============================================================ */

:root {
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-js] [data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 850ms var(--curva), transform 850ms var(--curva);
  transition-delay: var(--retraso, 0ms);
}
[data-js] [data-revelar][data-visible='true'] {
  opacity: 1;
  transform: none;
}

/* Tarjetas: además de subir, se asientan. */
[data-js] [data-revelar='tarjeta'] {
  transform: translateY(28px) scale(0.975);
}
[data-js] [data-revelar='tarjeta'][data-visible='true'] {
  transform: none;
}

/* Fotos: cortina de abajo hacia arriba. El zoom interior se resuelve
   en el propio contenedor para no pelearse con el hover de la imagen. */
[data-js] [data-revelar='foto'],
[data-js] [data-revelar='tarjeta'] .plato__foto {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms var(--curva), opacity 850ms var(--curva),
    transform 850ms var(--curva);
  transition-delay: var(--retraso, 0ms);
}
[data-js] [data-revelar='foto'][data-visible='true'],
[data-js] [data-revelar='tarjeta'][data-visible='true'] .plato__foto {
  clip-path: inset(0 0 0 0);
}
/* La cortina de la foto de la tarjeta entra un poco después que la tarjeta. */
[data-js] [data-revelar='tarjeta'] .plato__foto {
  transition-delay: calc(var(--retraso, 0ms) + 120ms);
}

/* El filete dorado del rótulo se dibuja solo. transform en vez de width:
   la barra ya mide su ancho final siempre, solo se escala desde el borde
   izquierdo — anima una propiedad compuesta, no layout. */
[data-js] [data-revelar] .rotulo::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--curva);
  transition-delay: calc(var(--retraso, 0ms) + 180ms);
}
[data-js] [data-revelar][data-visible='true'] .rotulo::before {
  transform: scaleX(1);
}

/* La marca de brasa sobre el título se dibuja igual que el filete
   del rótulo: mismo gesto, ahora sin texto que repetir. */
[data-js] [data-revelar] .seccion__titulo::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--curva);
  transition-delay: calc(var(--retraso, 0ms) + 180ms);
}
[data-js] [data-revelar][data-visible='true'] .seccion__titulo::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-js] [data-revelar],
  [data-js] [data-revelar='tarjeta'],
  [data-js] [data-revelar='foto'],
  [data-js] [data-revelar='tarjeta'] .plato__foto {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  [data-js] [data-revelar] .rotulo::before {
    transform: scaleX(1);
    transition: none;
  }
  [data-js] [data-revelar] .seccion__titulo::before {
    transform: scaleX(1);
    transition: none;
  }
}

/* ============================================================
   Portada — la foto manda, a sangre completa.
   El texto se sostiene sobre un degradado, no sobre un recuadro.
   ============================================================ */

.portada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(94svh, 54rem);
  /* Se mete bajo la barra para que la foto pase por detrás. */
  margin-top: calc(var(--alto-nav) * -1);
  padding-top: calc(var(--alto-nav) + var(--e-4));
  overflow: hidden;
  isolation: isolate;
}

.portada__fondo {
  position: absolute;
  /* Sobra por abajo para que el parallax no descubra el borde inferior. */
  inset: 0 0 -14% 0;
  z-index: -1;
  will-change: transform;
}
.portada__fondo picture,
.portada__fondo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Dos degradados: uno da suelo al texto, otro asienta la barra de datos. */
.portada__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0e0e0e 22%, rgba(14, 14, 14, 0.9) 42%, rgba(14, 14, 14, 0.28) 78%, rgba(14, 14, 14, 0.1) 100%),
    linear-gradient(180deg, rgba(14, 14, 14, 0) 55%, rgba(14, 14, 14, 0.85) 100%);
}
@media (max-width: 60rem) {
  /* Sin columna derecha libre, el texto necesita el degradado más cerrado. */
  .portada__fondo::after {
    background: linear-gradient(
      180deg,
      rgba(14, 14, 14, 0.9) 0%,
      rgba(14, 14, 14, 0.64) 26%,
      rgba(14, 14, 14, 0.7) 55%,
      rgba(14, 14, 14, 0.97) 100%
    );
  }
}

.portada__contenido .rotulo {
  letter-spacing: 0.36em;
}
.portada__contenido {
  display: grid;
  gap: 1.375rem;
  padding-block: var(--e-7) var(--e-6);
  max-width: 46rem;
}

.portada__titulo {
  font-size: var(--t-5);
  /* El canvas usa 0.86, pero su titular es de tres palabras cortas.
     Con «AL CARBÓN» encima de otra línea, la tilde choca con la de arriba:
     0.94 le da el aire justo sin perder el bloque compacto. */
  line-height: 0.94;
  letter-spacing: -0.01em;
  /* Dos topes, y gana el menor. Los 21 caracteres son los de «Con acento
     argentino.»; el tope en rem impide que en pantalla ancha el titular
     se estire hasta la mitad clara de la foto, donde el degradado ya no
     lo respalda y el texto pierde contraste. */
  max-width: min(21ch, 43rem);
  padding-top: 0.08em;
}

/* La segunda línea toma el naranja de la marca: el titular dice de dónde
   viene la cocina y el color lo subraya. Es texto de display sobre el
   negro del degradado, así que el contraste aguanta de sobra. */
.portada__titulo__acento {
  color: var(--brasa);
}

.portada__bajada {
  font-family: var(--letra-texto);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--texto-apagado);
  max-width: 33rem;
  text-wrap: pretty;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-2);
}

/* El segundo camino existe, pero no compite con «Ver el menú». */
.enlace-discreto {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--toque);
  font-family: var(--letra-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  color: var(--texto-apagado);
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.enlace-discreto svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--transicion);
}
.enlace-discreto:hover {
  color: var(--crema);
  border-bottom-color: var(--brasa);
}
.enlace-discreto:hover svg {
  transform: translateX(3px);
}

/* --- Barra de datos: precios y horario, con filetes --- */
.datos-barra {
  border-top: 1px solid rgba(240, 235, 225, 0.16);
  background: rgba(16, 13, 11, 0.55);
  backdrop-filter: blur(4px);
}
.datos-barra__reja {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dato-barra {
  display: grid;
  gap: 0.35rem;
  align-content: center;
  padding: var(--e-4) var(--e-4);
  border-right: 1px solid rgba(240, 235, 225, 0.12);
  border-bottom: 1px solid rgba(240, 235, 225, 0.12);
  min-height: 5.5rem;
}
.dato-barra:nth-child(2n) {
  border-right: 0;
}
.dato-barra:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.dato-barra dt {
  font-family: var(--letra-rotulo);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.dato-barra dd {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.dato-barra--horario dd {
  display: grid;
  gap: 0.1rem;
  font-family: var(--letra-rotulo);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* ============================================================
   Ritmo editorial: las secciones fluyen en orden normal, sin
   anclarse ni taparse entre sí. El fuego vive en los detalles —
   la costura de brasa entre secciones y la línea de progreso de
   lectura (.progreso) — no en un truco que se repite cada vez
   que cambias de sección.
   ============================================================ */

/* La costura de brasa y su luz viven en tres valores, juntos a
   propósito: se afinan juntos. Si la línea adelgaza, su halo la
   sigue; separados, se desincronizan a la primera corrección. */
:root {
  --costura-alto: clamp(32px, 4.2vw, 70px);
  --costura-nucleo: 115px;
  --costura-nucleo-alfa: 0.2;
  --costura-cola: 310px;
  --costura-cola-alfa: 0.16;
}

/* El fondo no es plano junto a la costura: la brasa ilumina lo que
   tiene cerca. Cada sección se calienta hacia sus dos cantos —núcleo
   corto y vivo, cola larga y tenue, como cae la luz de verdad— para
   que el carbón salga del fondo en vez de estar pegado encima. */
main > section {
  position: relative;
  background-color: var(--fondo);
  background-image:
    radial-gradient(ellipse 70% var(--costura-nucleo) at 50% 0%, rgba(var(--brasa-viva-rgb), var(--costura-nucleo-alfa)), transparent 70%),
    radial-gradient(ellipse 105% var(--costura-cola) at 50% 0%, rgba(var(--brasa-rgb), var(--costura-cola-alfa)), transparent 76%),
    radial-gradient(ellipse 70% var(--costura-nucleo) at 50% 100%, rgba(var(--brasa-viva-rgb), var(--costura-nucleo-alfa)), transparent 70%),
    radial-gradient(ellipse 105% var(--costura-cola) at 50% 100%, rgba(var(--brasa-rgb), var(--costura-cola-alfa)), transparent 76%);
  background-repeat: no-repeat;
}
main > section.seccion--tono {
  background-color: var(--superficie);
}

/* La costura entre secciones: una brasa real, no una línea simulada.
   Fotografía de carbón encendido, no un degradado — se pidió que se
   vea real, así que es real. Se centra sobre el límite de cada
   sección (mitad hacia arriba, mitad hacia abajo) y se funde al negro
   por arriba y por abajo con una máscara, para que no se note el
   borde rectangular de la foto. */
main > section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--costura-alto);
  transform: translateY(-50%);
  background-image: url('../img/textura-brasa-divisor.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
  z-index: 5;
}

/* Respira, no parpadea: el mismo pulso lento del rescoldo, aplicado
   a la foto real en vez de a un degradado. */
@keyframes brasa-respira {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.14) saturate(1.1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  main > section::after {
    animation: brasa-respira 7s ease-in-out infinite;
  }
}

.pie {
  position: relative;
  z-index: 90;
}

/* ============================================================
   Línea de brasa: progreso de lectura, fija arriba del todo.
   No decora — dice cuánto falta, con el mismo naranja del acento.
   ============================================================ */

.progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 150;
  background: rgba(232, 228, 216, 0.08);
  pointer-events: none;
}
.progreso::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(var(--progreso, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brasa), var(--brasa-viva));
  transition: transform 80ms linear;
}

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

/* ============================================================
   Secciones
   ============================================================ */

/* Fondo de apoyo para las secciones sin fotografía propia.
   Es una de las fotos del lugar, casi apagada: da profundidad sin
   competir con el texto.

   El desenfoque viene HECHO en el archivo: son imágenes de 64 px de ancho
   (menos de 700 bytes cada una) que el navegador reescala. Un filter:blur
   en tiempo real sobre cuatro secciones a pantalla completa costaba caro
   de componer, sobre todo en celular.

   La ruta es relativa a esta hoja, así que sirve igual desde la raíz
   que desde /deasada. */
.seccion--textura {
  /* Sin `position` aquí: la anularía sobre el `sticky` de la pila,
     que ya sirve de contexto para el ::before de la textura. */
  isolation: isolate;
}
.seccion--textura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--textura);
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 76%);
  pointer-events: none;
}

#platillos {
  --textura: url('../img/textura-corte.webp');
}
#porque {
  --textura: url('../img/textura-parrilla.webp');
}
#resenas {
  --textura: url('../img/textura-patio.webp');
}
#contacto {
  --textura: url('../img/textura-fachada.webp');
}

.seccion {
  padding-block: var(--e-9);
}
/* background-color, no el atajo: el atajo borraría los resplandores
   de canto que trae `main > section`. Sin filete tampoco: una línea
   dura de 1px partiría en seco el degradado que funde con la brasa. */
.seccion--tono {
  background-color: var(--superficie);
}

.seccion__cabeza {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
  max-width: var(--ancho-texto);
}
.seccion__titulo {
  font-size: var(--t-3);
}
/* La marca de brasa que reemplaza al rótulo repetido: un trazo, no una
   etiqueta. Un solo elemento por cabeza de sección, sin texto que se
   repita section tras section. */
.seccion__titulo::before {
  content: '';
  display: block;
  width: 2.75rem;
  height: 3px;
  border-radius: 2px;
  background: var(--brasa);
  margin-bottom: var(--e-4);
}
.seccion__texto {
  color: var(--texto-apagado);
  font-size: var(--t-1);
  line-height: 1.6;
}

/* ============================================================
   Platillos destacados — tarjetas grandes
   ============================================================ */

/* Bento, no reja pareja: un plato manda, otro cierra ancho, el resto
   llena huecos. Seis platos, seis celdas, ninguna vacía. */
.platos {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .platos {
    grid-template-columns: repeat(2, 1fr);
  }
  .plato--ancho {
    grid-column: span 2;
  }
}

@media (min-width: 60rem) {
  .platos {
    grid-template-columns: repeat(4, 1fr);
  }
  .plato--destacado {
    grid-column: span 2;
    grid-row: span 2;
  }
  .plato--destacado .plato__foto {
    aspect-ratio: 1 / 1;
  }
  .plato--destacado .plato__nombre {
    font-size: 1.85rem;
  }
  .plato--ancho {
    grid-column: span 4;
  }
  .plato.plato--ancho {
    flex-direction: row;
  }
  .plato--ancho .plato__foto {
    flex: 0 0 42%;
    aspect-ratio: auto;
  }
  .plato--ancho .plato__cuerpo {
    flex: 1;
    align-content: center;
  }
}

.plato {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  overflow: hidden;
  transition: border-color var(--transicion), transform var(--transicion);
}
.plato:hover {
  border-color: var(--borde-suave);
  transform: translateY(-3px);
}
.plato__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--carbon-600);
  overflow: hidden;
}
.plato__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
.plato:hover .plato__foto img {
  transform: scale(1.04);
}
.plato__categoria {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema);
  background: rgba(16, 13, 11, 0.8);
  backdrop-filter: blur(6px);
  padding: 0.35em 0.85em;
  border-radius: 999px;
}
.plato__cuerpo {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-5);
  flex: 1;
  align-content: start;
}
.plato__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}
.plato__nombre {
  font-size: 1.4rem;
}
/* El área de toque cubre la tarjeta entera, pero el nombre accesible
   sigue siendo el del platillo, no un «leer más» sin contexto. */
.plato__enlace {
  color: inherit;
  text-decoration: none;
}
.plato__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.plato__enlace:focus-visible {
  outline: none;
}
.plato__enlace:focus-visible::after {
  outline: 3px solid var(--brasa);
  outline-offset: 3px;
}
.plato:hover .plato__nombre {
  color: var(--brasa);
}
.plato__desc {
  font-size: var(--t--1);
  color: var(--texto-tenue);
  line-height: 1.5;
}

/* Los precios se leen. Sin lupa, de noche, con el brillo bajo. */
.precio {
  font-family: var(--letra-precio);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.precio__signo {
  font-size: 0.6em;
  color: var(--dorado);
  vertical-align: 0.35em;
  margin-right: 0.05em;
}
.precio__desde {
  display: block;
  font-family: var(--letra-texto);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: right;
  margin-bottom: 0.2em;
}

.platos__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
}
.platos__nota {
  font-size: var(--t--1);
  color: var(--texto-tenue);
  max-width: 42ch;
}

/* ============================================================
   La experiencia
   ============================================================ */

.experiencia__reja {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}
.experiencia__texto {
  display: grid;
  gap: var(--e-5);
}
.experiencia__parrafo {
  font-family: var(--letra-display);
  font-size: var(--t-2);
  font-weight: 400;
  line-height: 1.45;
  color: var(--crema);
}
.experiencia__nota {
  color: var(--texto-apagado);
  line-height: 1.7;
}
.experiencia__foto {
  margin: 0;
  border-radius: var(--radio-2);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.experiencia__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ============================================================
   Por qué elegirnos
   ============================================================ */

/* Secuencia, no reja de tres tarjetas iguales: el fuego lleva a la
   carta, la carta lleva al patio. Un hilo vertical hace ese orden
   visible en vez de dejar que tres cajas idénticas lo escondan. */
.beneficios {
  position: relative;
  display: grid;
  gap: var(--e-7);
  max-width: 40rem;
}
.beneficios::before {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 0.4rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--borde-suave), transparent 95%);
}
.beneficio {
  position: relative;
  display: grid;
  gap: var(--e-3);
  align-content: start;
  padding-left: var(--e-8);
}
.beneficio__num {
  position: absolute;
  left: 0;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--carbon-800);
  border: 1px solid var(--borde-suave);
  font-family: var(--letra-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  /* Brasa a 14.4px bold da 4.24:1 sobre el carbón de la insignia, bajo
     el mínimo de texto normal. El tono vivo da 7.1:1 sin cambiar de familia. */
  color: var(--brasa-viva);
  opacity: 1;
  letter-spacing: 0;
}
.beneficio__icono {
  width: 2rem;
  height: 2rem;
  color: var(--brasa);
}
.beneficio__titulo {
  font-size: 1.4rem;
}
/* Escalonado solo con espacio de sobra: en celular el hilo vertical
   ya ordena la secuencia sin necesitar el desplazamiento lateral. */
@media (min-width: 60rem) {
  .beneficio:nth-child(2) {
    margin-left: clamp(0px, 6vw, 3.5rem);
  }
  .beneficio:nth-child(3) {
    margin-left: clamp(0px, 3vw, 1.75rem);
  }
}
.beneficio__texto {
  font-size: var(--t--1);
  color: var(--texto-tenue);
  line-height: 1.6;
}

/* ============================================================
   Galería
   ============================================================ */

/* Tres fotos: una manda y dos la acompañan. En columna única van apiladas;
   en cuanto hay ancho, el patio ocupa la columna grande a toda su altura y
   las otras dos se reparten la chica. Con tres columnas —como estaba— la
   foto alta abarcaba dos filas y dejaba media retícula vacía. */
.galeria {
  display: grid;
  gap: var(--e-3);
}
.galeria figure {
  position: relative;
  margin: 0;
  border-radius: var(--radio-2);
  overflow: hidden;
  background: var(--carbon-700);
}
.galeria img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0, 0.2, 1);
}
.galeria figure:hover img {
  transform: scale(1.04);
}
/* Apiladas, las tres son apaisadas: la foto del patio es horizontal y
   recortarla a vertical se lleva la mitad del patio. */
.galeria img {
  aspect-ratio: 3 / 2;
}

/* El pie nombra lo que se ve. No es adorno: sin él, la fachada de noche
   es una foto oscura cualquiera; con él, es dónde queda el lugar. */
.galeria figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-7) var(--e-4) var(--e-3);
  font-family: var(--letra-rotulo);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crema);
  background: linear-gradient(
    to top,
    rgba(14, 14, 14, 0.88),
    rgba(14, 14, 14, 0.55) 45%,
    rgba(14, 14, 14, 0)
  );
  pointer-events: none;
}

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

/* La reseña real pesa más que los dos ejemplos: no son tres cajas
   iguales fingiendo el mismo peso de prueba social. */
.resenas {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .resenas {
    grid-template-columns: 1.3fr 1fr;
    grid-auto-rows: 1fr;
  }
  .resena--destacada {
    grid-row: span 2;
  }
}
.resena {
  display: grid;
  gap: var(--e-4);
  align-content: start;
  padding: var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
}
.resena--destacada {
  padding: var(--e-7);
  align-content: center;
}
.resena--destacada .resena__comillas {
  font-size: 3.5rem;
}
.resena--destacada .resena__texto {
  font-size: 1.15rem;
  line-height: 1.65;
}
.resena--ejemplo {
  position: relative;
  border-style: dashed;
  border-color: rgba(201, 169, 97, 0.35);
}
.resena__marca {
  position: absolute;
  top: -0.7rem;
  left: var(--e-5);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--carbon-900);
  background: var(--dorado);
  padding: 0.2em 0.7em;
  border-radius: 2px;
}
.resena--vacia {
  border-style: dashed;
  border-color: var(--carbon-500);
  background: transparent;
}
.resena__comillas {
  font-family: var(--letra-display);
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--dorado);
  opacity: 0.5;
}
.resena__texto {
  font-family: var(--letra-texto);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texto-apagado);
}
.resena--vacia .resena__texto {
  color: var(--texto-tenue);
  font-style: italic;
}
.resena__autor {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ============================================================
   Reservaciones
   ============================================================ */

.reservar__reja {
  display: grid;
  gap: var(--e-7);
}

.formulario {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
}
.formulario__par {
  display: grid;
  gap: var(--e-4);
}
.campo {
  display: grid;
  gap: 0.4rem;
}
.campo > span {
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.campo input,
.campo select,
.campo textarea {
  min-height: var(--toque);
  width: 100%;
  background: var(--carbon-900);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: 1rem;
  padding: 0.7rem var(--e-4);
  transition: border-color var(--transicion);
}
.campo textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--brasa);
}
.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'] {
  border-color: #e2574c;
}
.campo__error {
  font-size: var(--t--2);
  color: #f0857c;
  min-height: 1em;
}

.aviso {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  border: 1px solid var(--borde-suave);
  background: rgba(201, 169, 97, 0.08);
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--texto-apagado);
}
.aviso strong {
  color: var(--dorado);
}
.aviso[hidden] {
  display: none;
}
.aviso--ok {
  border-color: rgba(134, 239, 172, 0.35);
  background: rgba(74, 222, 128, 0.08);
}
.aviso--ok strong {
  color: #86efac;
}
.aviso__mensaje {
  white-space: pre-wrap;
  font-family: var(--letra-texto);
  color: var(--texto-tenue);
  border-left: 2px solid var(--borde);
  padding-left: var(--e-4);
  margin-top: var(--e-2);
}

.canales {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}
.canal {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  text-decoration: none;
  transition: border-color var(--transicion);
}
.canal:hover {
  border-color: var(--borde-suave);
}
.canal svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--dorado);
}
.canal__cuerpo {
  display: grid;
  gap: 0.1rem;
}
.canal__titulo {
  font-weight: 700;
  font-size: 1rem;
}
.canal__nota {
  font-size: var(--t--1);
  color: var(--texto-tenue);
}

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

.contacto__reja {
  display: grid;
  gap: var(--e-7);
  align-items: start;
}

.dato {
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}
.dato + .dato {
  margin-top: var(--e-5);
}
.dato__clave {
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-2);
}
.dato__valor {
  font-size: var(--t-1);
  line-height: 1.55;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--texto-apagado);
}
.estado__punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ceniza);
  flex: none;
}
.estado[data-abierto='true'] .estado__punto {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}
.estado[data-abierto='true'] b {
  color: #86efac;
}
.estado[data-abierto='false'] b {
  color: var(--texto-apagado);
}

.horario {
  display: grid;
  gap: 0.35em;
}
/* Línea punteada al centro, como los precios del menú digital: sin
   ella, el día quedaba pegado a la izquierda y la hora a la derecha,
   con un vacío entre los dos que no se leía como una fila. */
.horario__fila {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.35em 0;
  font-variant-numeric: tabular-nums;
  color: var(--texto-apagado);
}
.horario__linea {
  flex: 1;
  border-bottom: 1px dotted var(--carbon-500);
  transform: translateY(-0.25em);
}
.horario__hora {
  white-space: nowrap;
}
.horario__fila[data-hoy='true'] {
  color: var(--crema);
  font-weight: 700;
}
.horario__fila[data-hoy='true'] .horario__dia::after {
  content: ' · hoy';
  /* En el punto mínimo del clamp (17px) el peso bold no llega al piso de
     "texto grande", así que brasa (4.4:1) se queda corto. Brasa-viva da 7.4:1. */
  color: var(--brasa-viva);
}
.horario__fila[data-cerrado='true'] {
  color: var(--texto-tenue);
}

.acciones-visita {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-top: var(--e-6);
}

.mapa {
  position: relative;
  border-radius: var(--radio-2);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--carbon-700);
  aspect-ratio: 4 / 3;
}
.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mapa__previo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-3);
  width: 100%;
  background: var(--carbon-700);
  border: 0;
  cursor: pointer;
  text-align: center;
  padding: var(--e-5);
  background-image: radial-gradient(circle at 1px 1px, var(--carbon-500) 1px, transparent 0);
  background-size: 14px 14px;
}
.mapa__previo span {
  font-family: var(--letra-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--crema);
}
.mapa__previo small {
  color: var(--texto-tenue);
  font-size: var(--t--1);
  max-width: 26ch;
}

.aviso-pendiente {
  margin-top: var(--e-3);
  font-size: var(--t--1);
  color: var(--dorado);
  display: none;
}
.aviso-pendiente[data-visible='true'] {
  display: block;
}

/* ============================================================
   Pie
   ============================================================ */

/* El pie cierra igual que cualquier otra unión: su propia brasa y su
   propio resplandor. Antes tenía un filete de 1px; una costura de la
   casa y una línea genérica en el mismo canto se estorban. */
.pie {
  padding-block: var(--e-8) calc(var(--e-7) + 4rem);
  background-color: var(--carbon-800);
  background-image:
    radial-gradient(ellipse 70% var(--costura-nucleo) at 50% 0%, rgba(var(--brasa-viva-rgb), var(--costura-nucleo-alfa)), transparent 70%),
    radial-gradient(ellipse 105% var(--costura-cola) at 50% 0%, rgba(var(--brasa-rgb), var(--costura-cola-alfa)), transparent 76%);
  background-repeat: no-repeat;
}
.pie::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--costura-alto);
  transform: translateY(-50%);
  background-image: url('../img/textura-brasa-divisor.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
  z-index: 5;
}
@media (prefers-reduced-motion: no-preference) {
  .pie::before {
    animation: brasa-respira 7s ease-in-out infinite;
  }
}
.pie__reja {
  display: grid;
  gap: var(--e-6);
}
.pie__col h3 {
  font-size: var(--t--2);
  font-family: var(--letra-texto);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-3);
}
.pie__lista {
  display: grid;
  gap: 0.5rem;
}
.pie__lista a,
.pie__lista span {
  color: var(--texto-apagado);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transicion);
}
.pie__lista a:hover {
  color: var(--crema);
}
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  font-size: var(--t--1);
  color: var(--texto-tenue);
}
.pie__legal a {
  color: var(--texto-apagado);
}

/* --- Botón flotante de WhatsApp --- */
.wa {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  height: 3.5rem;
  padding: 0 1.35rem;
  border: 0;
  border-radius: 999px;
  background: #1fa855;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.45);
  transition: transform var(--transicion), background var(--transicion);
}
.wa:hover {
  background: #25c063;
  transform: translateY(-2px);
}
.wa svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}
.wa__texto {
  display: none;
}

/* --- Cinta de demo --- */
.cinta-demo {
  background: var(--brasa-honda);
  color: #ffe9d6;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 0.4rem var(--canal);
}
.cinta-demo b {
  color: #fff;
}

/* ============================================================
   Escritorio
   ============================================================ */

@media (min-width: 40rem) {
  .formulario__par {
    grid-template-columns: 1fr 1fr;
  }
  .galeria {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
  }
  .galeria__alta {
    grid-row: 1 / span 2;
  }
  /* La foto grande fija la altura de la retícula; las dos chicas se
     reparten esa misma altura, así que las dos columnas terminan a ras.
     Si a las tres se les quita la proporción, no queda quien la fije y
     las filas colapsan a cero. */
  .galeria__alta img {
    aspect-ratio: 6 / 5;
  }
  .galeria figure:not(.galeria__alta) img {
    aspect-ratio: auto;
  }
  .wa__texto {
    display: inline;
  }
}

@media (min-width: 60rem) {
  .nav__enlaces {
    display: flex;
  }
  .nav__menu {
    display: none;
  }

  .estado-pildora {
    display: inline-flex;
  }
  .datos-barra__reja {
    grid-template-columns: repeat(4, 1fr);
  }
  .dato-barra {
    padding: var(--e-5) var(--e-5);
    border-bottom: 0;
  }
  .dato-barra:nth-child(2n) {
    border-right: 1px solid rgba(240, 235, 225, 0.12);
  }
  .dato-barra:last-child {
    border-right: 0;
  }
  .portada__contenido {
    padding-block: var(--e-8) var(--e-7);
    /* Alineado con el logo y con la barra de datos: el titular arranca en
       el mismo canal que el resto de la página. Centrarlo en un bloque
       angosto dejaba media pantalla vacía a la izquierda. */
    max-width: var(--ancho);
  }

  .experiencia__reja {
    grid-template-columns: 1fr 0.85fr;
    gap: var(--e-9);
  }

  .reservar__reja {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--e-8);
  }

  .contacto__reja {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-8);
  }

  .pie__reja {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--e-7);
  }
}

/* La opinión real se distingue de los ejemplos por el sello, no por el marco.
   El sello es texto chico en mayúsculas: con el naranja del logo se queda en
   4.2:1, por debajo del mínimo. Usa el tono vivo, que da 7.4:1 sobre el
   fondo y sigue siendo el mismo naranja, solo más claro. */
.resena__marca--real {
  /* El comentario original de este sello ya pedía fondo oscuro (7.4:1);
     faltaba escribirlo. Sin esto el texto vivo caía sobre el dorado
     heredado de .resena__marca, en 1.1:1 — casi invisible. */
  background: var(--carbon-900);
  color: var(--brasa-viva);
  border-color: var(--brasa);
}
.resena__enlace {
  display: inline-block;
  margin-top: var(--e-3);
  font-size: var(--t--1);
  color: var(--texto-apagado);
  text-underline-offset: 0.25em;
}
.resena__enlace:hover {
  color: var(--crema);
}