/* ============================================================
   LANDING — secciones. Móvil primero.
   ============================================================ */

/* ------------------------------------------------- encabezado ---------- */
/* Aviso y navegación viajan juntos en un solo bloque fijo: así el aviso
   nunca queda debajo del logotipo, sin importar en cuántas líneas caiga. */
.barra-superior { position: fixed; inset: 0 0 auto 0; z-index: 100; }

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) clamp(1.25rem, 4vw, 3rem);
  color: var(--c-hueso);
  transition: background var(--ms-medio) var(--curva),
              color var(--ms-medio) var(--curva),
              padding var(--ms-medio) var(--curva),
              box-shadow var(--ms-medio) var(--curva);
}
.barra-superior:has(.cabecera.compacta) {
  background: color-mix(in srgb, var(--c-hueso) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cabecera.compacta {
  color: var(--c-tinta);
  padding-block: var(--e-3);
  box-shadow: 0 1px 0 var(--borde);
}
.cabecera__logo { display: block; width: clamp(4.5rem, 10vw, 6rem); }
.cabecera__logo svg, .cabecera__logo img { width: 100%; height: auto; color: currentColor; }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
  .nav a {
    font-size: var(--t-micro); letter-spacing: var(--espaciado-versal);
    text-transform: uppercase; position: relative; padding-block: .35rem;
  }
  .nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform var(--ms-medio) var(--curva-salida);
  }
  .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
  .cabecera__menu { display: none; }
}

.cabecera__menu {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: var(--toque-min); padding: .5rem .9rem;
  background: none; border: 1px solid currentColor; border-radius: var(--radio-redondo);
  font-size: var(--t-micro); letter-spacing: var(--espaciado-versal);
  text-transform: uppercase; cursor: pointer;
}

/* Panel de navegación en móvil */
.panel {
  position: fixed; inset: 0; z-index: 150;
  background: var(--c-tinta); color: var(--c-hueso);
  display: grid; place-content: center; gap: var(--e-5);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ms-medio) var(--curva), visibility var(--ms-medio);
}
.panel[data-abierto="true"] { opacity: 1; visibility: visible; }
.panel a { font-family: var(--f-display); font-size: var(--t-h3); }
.panel__cerrar {
  position: absolute; top: var(--e-4); right: clamp(1.25rem, 4vw, 3rem);
  min-height: var(--toque-min); min-width: var(--toque-min);
  background: none; border: 0; color: inherit; font-size: 1.75rem; cursor: pointer;
}

/* ---------------------------------------------------- portada ---------- */
.portada {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding: 0; color: var(--c-hueso); isolation: isolate;
}
.portada__fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.portada__fondo picture { display: block; width: 100%; height: 100%; }
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Con una fotografía de verdad detrás, el velo suave no alcanzaba: el texto
     se perdía sobre el plato. Se oscurece de abajo hacia arriba, que es donde
     va el titular, y se deja respirar la parte de arriba de la imagen. */
  background:
    linear-gradient(to bottom,
      rgba(22,21,15,.62) 0%, rgba(22,21,15,.30) 26%,
      rgba(22,21,15,.66) 62%, rgba(22,21,15,.92) 100%),
    linear-gradient(to right, rgba(22,21,15,.45) 0%, rgba(22,21,15,0) 62%);
}
.portada__cuerpo {
  width: var(--ancho-ancho); margin-inline: auto;
  padding-block: clamp(4rem, 14vh, 9rem);
  display: grid; gap: var(--e-5); justify-items: start;
}
.portada__titulo {
  font-size: var(--t-gigante); line-height: var(--interlinea-apretada);
  letter-spacing: -0.02em; max-width: 14ch;
}
.portada__pie {
  color: color-mix(in srgb, var(--c-hueso) 90%, transparent);
  max-width: 46ch;
  text-shadow: 0 1px 12px rgba(22,21,15,.55);
}
.portada__titulo { text-shadow: 0 2px 24px rgba(22,21,15,.45); }
.portada .versalita { color: color-mix(in srgb, var(--c-hueso) 72%, transparent); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.bajar {
  position: absolute; bottom: var(--e-5); left: 50%; translate: -50% 0;
  display: grid; justify-items: center; gap: .5rem;
  font-size: var(--t-micro); letter-spacing: var(--espaciado-versal);
  text-transform: uppercase; opacity: .7;
}
.bajar__linea {
  width: 1px; height: 2.75rem; background: currentColor; transform-origin: top;
  animation: bajar 2.6s var(--curva-suave) infinite;
}
@keyframes bajar {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(2.75rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bajar__linea { animation: none; } }

/* ------------------------------------------------ aviso ejemplo -------- */
.aviso-ejemplo {
  background: var(--c-tinta); color: var(--c-hueso);
  text-align: center; padding: .7rem 1.25rem;
  font-size: var(--t-micro); letter-spacing: .08em;
}
.aviso-ejemplo strong { color: var(--c-acento-claro); font-weight: var(--peso-medio); }

/* ------------------------------------------------ encabezados ---------- */
.tituloSeccion { display: grid; gap: var(--e-3); margin-bottom: var(--e-7); max-width: 46ch; }
.tituloSeccion p { color: var(--texto-suave); margin: 0; }

/* ----------------------------------------------------- menú ------------ */
.menu { background: var(--fondo); }

/* Barra de tiempos: pegajosa, se desplaza sola al ir bajando */
.menu__tiempos {
  position: sticky; top: var(--alto-barra, 7rem); z-index: 60;
  margin-bottom: var(--e-7);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--borde);
}
.menu__tiemposLista {
  display: flex; gap: clamp(1rem, 3vw, 2.25rem);
  overflow-x: auto; scrollbar-width: none;
  padding: .85rem clamp(1.25rem, 4vw, 3rem);
  width: min(100%, 82rem); margin-inline: auto;
}
.menu__tiemposLista::-webkit-scrollbar { display: none; }
.menu__tiempo {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  padding: .6rem .1rem; min-height: 2.75rem;   /* 44 px: el mínimo para el dedo */
  font-size: var(--t-micro); letter-spacing: var(--espaciado-versal);
  text-transform: uppercase; color: var(--texto-suave);
  white-space: nowrap;      /* "Platos fuertes" no debe partirse en dos renglones */
  border-bottom: 1px solid transparent;
  transition: color var(--ms-medio) var(--curva), border-color var(--ms-medio) var(--curva);
}
.menu__tiempo[aria-current="true"] { color: var(--texto); border-bottom-color: var(--acento); }

/* Cada tiempo es un <section>, así que heredaba el relleno vertical de las
   secciones de la página: 176 px arriba y abajo por cada tiempo, más de dos
   mil píxeles de aire muerto en la carta. Aquí se cancela. */
.tiempo {
  padding-block: 0;
  margin-bottom: var(--e-9);
  scroll-margin-top: calc(var(--alto-barra, 7rem) + 4.5rem);
}
.tiempo__encabezado {
  display: grid; gap: var(--e-2);
  padding-bottom: var(--e-4); margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--borde);
}
.tiempo__nombre { font-size: var(--t-h2); }
.tiempo__nota { color: var(--texto-suave); font-size: var(--t-menor); margin: 0; }

.platillos { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .platillos { grid-template-columns: repeat(2, 1fr); gap: var(--e-7) var(--e-6); } }
@media (min-width: 78rem) { .platillos { grid-template-columns: repeat(3, 1fr); } }

/* Ficha de platillo */
.platillo {
  display: grid; gap: var(--e-3);
  text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; color: inherit; width: 100%;
}
.platillo__foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radio-2); background: var(--fondo-hundido);
}
.platillo__foto picture { display: block; width: 100%; height: 100%; }
.platillo__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ms-muy-lento) var(--curva-salida),
              filter var(--ms-lento) var(--curva);
}
@media (hover: hover) {
  .platillo:hover .platillo__foto img { transform: scale(1.05); }
}
.platillo__cabeza {
  display: flex; align-items: baseline; gap: .75rem;
}
.platillo__nombre {
  font-family: var(--f-display); font-size: var(--t-mayor);
  line-height: 1.2; flex: 0 1 auto;
}
/* Puntos guía entre el nombre y el precio, como en una carta impresa */
.platillo__guia {
  flex: 1 1 auto; height: 1px; margin-bottom: .35em;
  background-image: radial-gradient(circle, var(--borde) 1px, transparent 1px);
  background-size: 5px 1px; background-repeat: repeat-x;
  min-width: 1.5rem;
}
.platillo__precio {
  flex: 0 0 auto; font-size: var(--t-menor); font-variant-numeric: tabular-nums;
  color: var(--texto-suave); letter-spacing: .02em;
}
.platillo__precio--pendiente { font-style: italic; opacity: .75; }
.platillo__desc { color: var(--texto-suave); font-size: var(--t-menor); margin: 0; }
.platillo__marcas { display: flex; flex-wrap: wrap; gap: .4rem; }
.marca-dieta {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); border: 1px solid var(--borde);
  border-radius: var(--radio-redondo); padding: .18rem .6rem;
}

/* Detalle del platillo */
.detalle {
  border: 0; padding: 0; width: min(100% - 2rem, 46rem); max-width: none;
  background: var(--fondo-elevado); color: var(--texto);
  border-radius: var(--radio-3); overflow: hidden;
}
.detalle::backdrop { background: rgba(20,17,15,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.detalle[open] { animation: entra var(--ms-medio) var(--curva-salida); }
@keyframes entra { from { opacity: 0; transform: translateY(1.5rem) scale(.985); } }
.detalle__foto { aspect-ratio: 16 / 10; }
.detalle__foto img { width: 100%; height: 100%; object-fit: cover; }
.detalle__cuerpo { padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; gap: var(--e-3); }
.detalle__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  min-width: var(--toque-min); min-height: var(--toque-min);
  border: 0; border-radius: var(--radio-redondo); cursor: pointer;
  background: color-mix(in srgb, var(--c-hueso) 90%, transparent);
  color: var(--c-tinta); font-size: 1.35rem; line-height: 1;
}
.detalle__datos { display: grid; gap: .35rem; font-size: var(--t-menor); color: var(--texto-suave); }

/* --------------------------------------------------- historia ---------- */
.historia { background: var(--fondo-hundido); }
.historia__rejilla { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 60rem) {
  .historia__rejilla { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
}
.historia__foto { border-radius: var(--radio-2); overflow: hidden; aspect-ratio: 4/5; }
.historia__foto picture { display: block; width: 100%; height: 100%; }
.historia__foto img { width: 100%; height: 100%; object-fit: cover; }
.historia__texto p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------- galería ---------- */
.galeria__rejilla {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 60rem) {
  .galeria__rejilla { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .galeria__rejilla > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galeria__rejilla > :nth-child(6) { grid-column: span 2; }
}
.galeria__pieza { overflow: hidden; border-radius: var(--radio-2); background: var(--fondo-hundido); }
.galeria__pieza picture { display: block; width: 100%; height: 100%; }
.galeria__pieza img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
@media (min-width: 60rem) { .galeria__rejilla > :nth-child(1) img { aspect-ratio: 1; } }

/* -------------------------------------------------- ubicación ---------- */
.ubicacion { background: var(--c-tinta); color: var(--c-hueso); }
.ubicacion .versalita, .ubicacion .tituloSeccion p { color: var(--c-piedra-clara); }
.ubicacion__rejilla { display: grid; gap: var(--e-6); }
@media (min-width: 60rem) { .ubicacion__rejilla { grid-template-columns: 1fr 1.15fr; gap: var(--e-8); } }
.horarios { display: grid; gap: .1rem; margin-bottom: var(--e-5); }
.horario {
  display: flex; justify-content: space-between; gap: var(--e-4);
  padding-block: .7rem; border-bottom: 1px solid rgba(247,244,239,.14);
  font-size: var(--t-menor);
}
.horario dt { color: var(--c-piedra-clara); }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.horario[data-hoy="true"] dt, .horario[data-hoy="true"] dd { color: var(--c-acento-claro); }
.mapa {
  position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radio-2); background: var(--c-tinta-suave);
  display: grid; align-content: end;
  border: 1px solid rgba(247,244,236,.12);
}
/* Una retícula sobria que sugiere un plano sin fingir ser un mapa real. */
.mapa__retícula {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(247,244,236,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,244,236,.07) 1px, transparent 1px),
    linear-gradient(rgba(247,244,236,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,244,236,.045) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.mapa__pin {
  position: absolute; top: 38%; left: 50%; translate: -50% -50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-acento-claro);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-acento-claro) 22%, transparent),
              0 0 0 20px color-mix(in srgb, var(--c-acento-claro) 10%, transparent);
}
.mapa__pie {
  position: relative; padding: var(--e-5);
  display: grid; gap: .6rem; justify-items: start;
  background: linear-gradient(to top, rgba(22,21,15,.92) 55%, transparent);
}
.mapa__dir { font-size: var(--t-menor); color: var(--c-piedra-clara); margin: 0; }
.mapa__botones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.mapa__botones .boton { padding: .65rem 1.2rem; min-height: 2.75rem; font-size: var(--t-micro); }
.ubicacion__datos { display: grid; gap: var(--e-2); font-size: var(--t-menor); }
/* El teléfono y «Cómo llegar» medían 17 px de alto: en un celular son los dos
   enlaces que más se tocan y no se atinaban. Se les da un área de toque
   decente sin cambiar cómo se ven, con el subrayado pegado al texto. */
.ubicacion__datos a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-block: .25rem;
  border-bottom: 0;
  text-decoration: underline; text-decoration-color: rgba(247,244,239,.35);
  text-underline-offset: .3em;
}

/* Lo mismo en el pie: teléfono, correo y redes. */
.pie__rejilla a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-block: .25rem;
  text-decoration: underline; text-decoration-color: rgba(247,244,239,.3);
  text-underline-offset: .3em;
}

/* ------------------------------------------------ reservación ---------- */
.reservar__rejilla { display: grid; gap: var(--e-6); }
/* Los hijos de una rejilla no se encogen por debajo de su contenido si no se
   les dice. Es la causa más común de que una página se desborde a lo ancho. */
.reservar__rejilla > *, .ubicacion__rejilla > *, .historia__rejilla > *,
.galeria__rejilla > *, .platillos > * { min-width: 0; }
@media (min-width: 60rem) { .reservar__rejilla { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.formulario { display: grid; gap: var(--e-4); }
.campo { display: grid; gap: .4rem; }
.campo > span { font-size: var(--t-micro); letter-spacing: var(--espaciado-versal); text-transform: uppercase; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  /* Los campos de fecha y hora traen un ancho mínimo propio del navegador.
     Sin esto no se dejan encoger y desbordan la página en un teléfono de
     320 px, que es el más chico que se sigue usando. */
  width: 100%; min-width: 0;
  min-height: var(--toque-min);
  padding: .8rem 1rem;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde); border-radius: var(--radio-2);
  transition: border-color var(--ms-rapido) var(--curva);
}
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); }
.campo-doble {
  display: grid; gap: var(--e-4);
  /* Se parten en dos sólo si de verdad caben. Debajo de eso, uno encima del otro. */
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
}
.formulario__aviso { font-size: var(--t-micro); color: var(--texto-suave); }
.formulario__estado { font-size: var(--t-menor); min-height: 1.5em; }
.formulario__estado[data-tipo="ok"]    { color: var(--c-ok); }
.formulario__estado[data-tipo="error"] { color: var(--c-urgente); }

/* --------------------------------------------------- pie de página ----- */
.pie {
  background: var(--c-tinta); color: var(--c-piedra-clara);
  padding-block: var(--e-7) var(--e-5); font-size: var(--t-menor);
  border-top: 1px solid rgba(247,244,239,.1);
}
.pie__rejilla { display: grid; gap: var(--e-5); }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-6); } }
.pie h3 { font-family: var(--f-texto); font-size: var(--t-micro); letter-spacing: var(--espaciado-versal); text-transform: uppercase; color: var(--c-hueso); margin-bottom: var(--e-3); }
.pie__logo { width: 6.5rem; color: var(--c-hueso); margin-bottom: var(--e-3); }
.pie__logo img { width: 100%; height: auto; }
.pie__legal { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid rgba(247,244,239,.1); font-size: var(--t-micro); display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); justify-content: space-between; }

/* ------------------------------------------------ WhatsApp fijo -------- */
.wasap {
  position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--toque-comodo); padding: 0 1.25rem;
  background: var(--c-ok); color: #fff;
  border-radius: var(--radio-redondo); box-shadow: var(--sombra-3);
  font-size: var(--t-menor); font-weight: var(--peso-medio);
  opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity var(--ms-medio) var(--curva), transform var(--ms-medio) var(--curva-salida);
}
.wasap.visible { opacity: 1; transform: none; pointer-events: auto; }
.wasap svg { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.wasap span { display: none; }
@media (min-width: 30rem) { .wasap span { display: inline; } }

/* En escritorio manda la navegación completa; el botón "Menú" sobra.
   Va al final a propósito: la regla base de .cabecera__menu se declara
   después de su consulta de medios y si no, la sobrescribiría. */
@media (min-width: 62rem) {
  .cabecera__menu { display: none; }
}

/* ------------------------------------------------ video de portada ----- */
/*
 * El video va ENCIMA de la fotografía, no en su lugar. La foto se ve al
 * instante y es lo que ve quien entra con datos contados, quien pidió menos
 * movimiento y quien tiene un navegador que no lo reproduce. El video se
 * funde encima cuando ya está listo, y si nunca llega no se nota.
 */
.portada__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms var(--curva-salida);
  pointer-events: none;
}
.portada__video.puesto { opacity: 1; }

/* Quien pide menos movimiento se queda con la fotografía quieta. Un fondo en
   movimiento a pantalla completa es justo lo que esa preferencia evita. */
@media (prefers-reduced-motion: reduce) {
  .portada__video { display: none; }
}