/* ==========================================================================
   LUJO — rediseño "new rich" del resto de la portada (18 de octubre de 2026)

   Raúl, audio de las 5:09 am: "me gustó, pero tiene mucho diseño anterior".
   Lo aprobado (portada en tinta, logo R2 oro, la cinemática del aguachile y
   "Arma tu torre") se dejó igual; todo lo demás se trae a ese lenguaje:
   tinta, oro y marfil; Cormorant grande y fina; fotos grandes; mucho aire.

   LA REGLA QUE ORDENA EL RITMO DE LA PÁGINA
   "Lo elegante va donde se impresiona; lo claro va donde se decide."
       tinta   portada · cinemática · jornada · la casa · torre · reservar · pie
       marfil  menú destacado · en tu mesa · visítanos   (aquí se leen precios y datos)

   Colores: SOLO variables de tokens.css. Sistema completo en
   DON CAMARON/design-system/don-camaron/MASTER.md.

   REUTILIZABLE: las piezas (jornada, casa con foto + detalle, platillo estrella,
   placa, reservar con foto a sangre, pie con logo) sirven para el siguiente
   restaurante cambiando textos e imágenes de img/lujo/.
   ========================================================================== */

/* ===================== MOVIMIENTO AL HACER SCROLL =====================
   Un solo momento con firma en la página: la cinemática. Aquí todo es discreto
   y distinto según lo que se mueve (direccion-de-arte: nada de "aparece y sube"
   igual en cada bloque):
     .revelar        texto: solo aparece, con 12 px de recorrido
     .revelar-foto   foto: se descubre de abajo hacia arriba (clip-path)
     .revelar-linea  el filo de oro de arriba se dibuja de izquierda a derecha
   Lo activa js/sitio.js. Sin JS, o con "reducir movimiento", todo se ve completo. */
.js .revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js .revelar.visible { opacity: 1; transform: none; }

.js .revelar-foto { clip-path: inset(18% 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
.js .revelar-foto img { transform: scale(1.06); transition: transform 1400ms var(--ease-out); }
.js .revelar-foto.visible { clip-path: inset(-12px); }  /* negativo: deja ver el margen de tinta de la foto chica */
.js .revelar-foto.visible img { transform: none; }

.revelar-linea { position: relative; }
.revelar-linea::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
}
.js .revelar-linea::before { transform: scaleX(0); transition: transform 1200ms var(--ease-in-out); }
.js .revelar-linea.visible::before { transform: none; }

/* Escalonado solo en lo que se ve como lista, con retraso total acotado. */
.js .jornada__paso:nth-child(2), .js .casa__cifras > div:nth-child(2),
.js .favoritos-lista li:nth-child(2), .js .mesa__pasos li:nth-child(2),
.js .visitanos__datos > div:nth-child(2) { transition-delay: 90ms; }
.js .jornada__paso:nth-child(3), .js .casa__cifras > div:nth-child(3),
.js .favoritos-lista li:nth-child(3), .js .mesa__pasos li:nth-child(3),
.js .visitanos__datos > div:nth-child(3) { transition-delay: 180ms; }
.js .visitanos__datos > div:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .js .revelar, .js .revelar-foto, .js .revelar-foto img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js .revelar-linea::before { transform: none; transition: none; }
}

/* Títulos de sección del rediseño: Cormorant ligera, grande, un solo color. */
.jornada__titulo, .casa__titulo, .menu-destacado__titulo, .mesa__titulo, .reservar__titulo {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

/* ===================== NAVEGACIÓN EN TINTA =====================
   Era azul marino, del logo anterior. Ahora es el negro de la portada, así la
   barra y el hero se leen como una sola pieza. */
.nav { background: var(--tinta); border-bottom: 1px solid var(--oro-linea); }
.nav--pegada {
  background: color-mix(in srgb, var(--tinta) 94%, transparent);
  border-bottom-color: var(--oro-linea);
  box-shadow: none;
}
.menu-movil { background: var(--tinta); border-top: 1px solid var(--oro-linea); }
.nav__logo { box-shadow: none; }

/* ===================== LA JORNADA (antes la franja de valor) ===================== */
.jornada {
  padding-block: clamp(5rem, 9vw, 8.5rem);
  border-top: 1px solid var(--oro-linea);
}
.jornada__titulo {
  font-size: var(--text-3xl);
  max-width: 18ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.jornada__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.jornada__lista::before { background: var(--oro-linea); }
.jornada__paso { position: relative; padding-top: var(--space-8); }
/* El punto de oro sobre la línea: marca la hora en el día. */
.jornada__paso::before {
  content: "";
  position: absolute; top: -3px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oro);
}
.jornada__hora {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--oro);
  margin-bottom: var(--space-5);
}
.jornada__paso h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}
.jornada__paso p:not(.jornada__hora) {
  color: var(--color-muted-foreground);
  font-size: var(--text-base);
  max-width: 36ch;
}

/* ===================== LA CASA ===================== */
.casa { padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; }
.casa__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  max-width: 1480px;
  margin-inline: auto;
  padding-right: clamp(1.25rem, 5vw, 3rem);
}
/* La foto grande sale a sangre por la izquierda; la chica se le encima abajo a
   la derecha, como dos fotos puestas una sobre otra en la mesa. */
.casa__fotos {
  grid-column: 1 / 8;
  position: relative;
  padding-bottom: 16%;
}
.casa__foto { margin: 0; overflow: hidden; aspect-ratio: 16 / 11; }
.casa__foto img, .casa__detalle img { width: 100%; height: 100%; object-fit: cover; }
.casa__detalle {
  position: absolute;
  right: -3%;
  bottom: 0;
  width: 46%;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* Un margen de tinta separa la foto chica de la grande sin sombra ni marco. */
  outline: 10px solid var(--tinta);
}
.casa__columna { grid-column: 8 / 13; padding-left: clamp(1rem, 4vw, 4rem); }
.casa__titulo { font-size: var(--text-3xl); margin-bottom: var(--space-8); }
.casa__parrafo {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-foreground);
  max-width: 44ch;
}
.casa__parrafo + .casa__parrafo { margin-top: var(--space-5); color: var(--color-muted-foreground); }

.casa__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-12) 0 0;
  padding-top: var(--space-6);
}
.casa__cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.casa__cifras dd {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--oro);
}
.casa__cifras dt { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted-foreground); }

/* ===================== MENÚ DESTACADO (marfil) ===================== */
.menu-destacado__encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.menu-destacado__titulo { font-size: var(--text-3xl); max-width: 16ch; }
.bloque-marfil .boton--linea { border-color: var(--linea-control); color: var(--tinta); }
.bloque-marfil .boton--linea:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); background: var(--marfil-2); }

/* El platillo estrella: foto grande y su ficha al lado. */
.estrella {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.estrella__foto {
  grid-column: 1 / 8;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--tinta);
}
.estrella__foto img { width: 100%; height: 100%; object-fit: cover; }
.estrella__texto { grid-column: 9 / 13; }
.estrella__nombre {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.estrella__desc { font-size: var(--text-base); color: var(--color-foreground); max-width: 40ch; }
.estrella__precio {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-block: var(--space-6) var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
}
.estrella__precio span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--oro-hondo);
}

/* Los otros favoritos: en renglón, como en una carta impresa. Sin fotos a
   propósito: no hay foto real de estos platillos, y una foto falsa juega en contra. */
.favoritos-lista {
  list-style: none;
  margin: 0 0 clamp(3.5rem, 7vw, 6rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.favoritos-lista::before { background: var(--tinta); }
.favoritos-lista li {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding-top: var(--space-6);
}
.favoritos-lista h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: 0;
}
.favoritos-lista p { font-size: var(--text-sm); color: var(--color-muted-foreground); max-width: 36ch; }
.favoritos-lista__precio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--oro-hondo);
}

/* La carta corrida (la llena js/sitio.js desde datos/menu.json). */
.menu-destacado__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
}
.grupo__titulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-foreground);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--tinta);
  margin-bottom: var(--space-2);
}
.platillo {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.platillo:last-child { border-bottom: none; }
.platillo__nombre { font-size: var(--text-base); font-weight: 500; flex-shrink: 1; min-width: 0; }
/* Puntos guía de carta impresa */
.platillo__guia {
  flex: 1;
  border-bottom: 1px dotted var(--linea-control);
  transform: translateY(-4px);
  min-width: var(--space-4);
}
.platillo__precio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--oro-hondo);
  flex-shrink: 0;
}
.menu-destacado__estado { color: var(--color-muted-foreground); font-size: var(--text-sm); }
.menu-destacado__nota {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
}

/* ===================== EN TU MESA (marfil) ===================== */
.mesa__interior {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.mesa__titulo { font-size: var(--text-3xl); max-width: 14ch; margin-bottom: var(--space-8); }
.mesa__parrafo { font-size: var(--text-lg); max-width: 50ch; color: var(--color-foreground); }

.mesa__pasos {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  counter-reset: paso;
  display: grid;
}
.mesa__pasos::before { background: var(--tinta); }
.mesa__pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
/* El número sí significa algo: es el orden de los pasos. */
.mesa__pasos li::before {
  content: counter(paso);
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--oro-hondo);
}
.mesa__pasos h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; }
.mesa__pasos p { font-size: var(--text-sm); color: var(--color-muted-foreground); }

.mesa__pagar { margin-top: var(--space-8); font-size: var(--text-base); }
.mesa__pagar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--oro-hondo);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.mesa__pagar a:hover { text-decoration-thickness: 2px; }

/* La placa: laca negra, filo de oro, el camarón coronado. */
.mesa__placa { display: flex; justify-content: center; }
.placa {
  width: min(340px, 100%);
  padding: var(--space-12) var(--space-8) var(--space-8);
  background: var(--tinta);
  color: var(--marfil);
  border-radius: var(--radius);
  text-align: center;
  outline: 1px solid var(--oro-linea);
  outline-offset: -12px;
  transform: rotate(-1.5deg);
}
.placa__logo { width: 64px; height: 64px; margin: 0 auto var(--space-5); border-radius: var(--radius-marca); }
.placa__mesa {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5rem;
  line-height: 1;
  color: var(--marfil);
  margin-bottom: var(--space-8);
}
.placa__mesa span {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--oro);
}
.placa__codigo { width: 156px; margin-inline: auto; padding: var(--space-3); background: var(--marfil); border-radius: var(--radius-sm); }
.placa__codigo svg { width: 100%; height: auto; }
.placa__qr-fondo { fill: var(--marfil); }
.placa__qr-tinta { fill: var(--tinta); }
.placa__pie {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--texto-2-oscuro);
}

/* ===================== RESERVAR (foto a sangre) ===================== */
.reservar {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  align-items: center;
  padding-block: clamp(6rem, 12vw, 10rem);
  overflow: hidden;
  isolation: isolate;
}
.reservar__fondo { position: absolute; inset: 0; z-index: -2; }
.reservar__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
/* El velo existe solo para que el texto se lea sobre la foto. */
.reservar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    var(--tinta) 0%,
    color-mix(in srgb, var(--tinta) 82%, transparent) 38%,
    color-mix(in srgb, var(--tinta) 10%, transparent) 72%);
}
.reservar__interior { width: 100%; }
.reservar__titulo { font-size: var(--text-3xl); max-width: 15ch; margin-bottom: var(--space-8); }
.reservar__apoyo { font-size: var(--text-lg); max-width: 40ch; color: var(--color-foreground); margin-bottom: var(--space-12); }
.reservar__telefono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 1.1;
  color: var(--oro);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--oro-linea);
  transition: color 200ms ease, border-color 200ms ease;
}
.reservar__telefono:hover { color: var(--oro-brillo); border-bottom-color: var(--oro); }
.reservar__nota { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-muted-foreground); max-width: 46ch; }

/* ===================== VISÍTANOS (marfil) ===================== */
.visitanos__direccion {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
}
.visitanos__direccion span {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted-foreground);
}
.visitanos__parrafo {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  max-width: 52ch;
  color: var(--color-foreground);
}
.visitanos__datos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-8);
}
.visitanos__datos::before { background: var(--tinta); }
.visitanos__datos dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--oro-hondo);
  margin-bottom: var(--space-2);
}
.visitanos__datos dd { font-size: var(--text-base); line-height: 1.7; color: var(--color-foreground); }
.visitanos__datos a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--oro-hondo);
  text-underline-offset: 5px;
}

/* ===================== PIE (tinta) ===================== */
.pie {
  padding-block: clamp(4.5rem, 8vw, 7rem) var(--space-8);
  border-top: 1px solid var(--oro-linea);
}
.pie__interior {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.pie__logo-img { width: clamp(160px, 16vw, 220px); height: auto; }
.pie__lema { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-muted-foreground); }
.pie__enlaces { display: grid; gap: var(--space-2); align-content: start; }
.pie__enlaces a {
  width: fit-content;
  font-size: var(--text-sm);
  color: var(--color-foreground);
  transition: color 200ms ease;
}
.pie__enlaces a:hover { color: var(--oro); }
.pie__contacto { display: grid; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-muted-foreground); }
.pie__contacto a { color: var(--oro); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--oro-linea);
  font-size: var(--text-xs);
  color: var(--color-muted-foreground);
}
.pie__credito a { color: var(--oro); text-decoration: underline; text-decoration-color: var(--oro-linea); text-underline-offset: 4px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .casa__rejilla { padding-right: 0; row-gap: var(--space-12); }
  .casa__fotos { grid-column: 1 / -1; padding-bottom: 22%; margin-right: clamp(1.25rem, 5vw, 3rem); }
  .casa__detalle { right: 0; width: 52%; }
  .casa__columna { grid-column: 1 / -1; padding-inline: clamp(1.25rem, 5vw, 3rem); }

  .estrella__foto, .estrella__texto { grid-column: 1 / -1; }
  .estrella__texto { margin-top: var(--space-8); }

  .mesa__interior { grid-template-columns: 1fr; }
  .mesa__placa { margin-top: var(--space-4); }

  .visitanos__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__interior { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

/* Reservar se apila desde tableta: a 768 px el texto ya pisaba la foto. */
@media (max-width: 900px) {
  .reservar { align-items: end; min-height: 0; padding-top: 0; }
  .reservar__fondo { bottom: auto; height: 62%; }
  .reservar__fondo img { object-position: center 40%; }
  .reservar::before {
    background: linear-gradient(0deg, var(--tinta) 40%, color-mix(in srgb, var(--tinta) 35%, transparent) 62%, transparent 80%);
  }
  .reservar__interior { padding-top: min(60vw, 26rem); }
}

@media (max-width: 760px) {
  .reservar__interior { padding-top: min(80vw, 26rem); }
  .jornada__lista { grid-template-columns: 1fr; gap: 0; padding-left: var(--space-6); }
  /* En celular la línea del día corre hacia abajo. */
  .jornada__lista::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; transform-origin: top; }
  .js .jornada__lista::before { transform: scaleY(0); }
  .js .jornada__lista.visible::before { transform: none; }
  .jornada__paso { padding: 0 0 var(--space-12); }
  .jornada__paso:last-child { padding-bottom: 0; }
  .jornada__paso::before { top: 0.6em; left: calc(-1 * var(--space-6) - 3px); }

  .favoritos-lista { grid-template-columns: 1fr; gap: 0; }
  .favoritos-lista li { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--space-4); }
  .favoritos-lista li h3 { grid-column: 1; }
  .favoritos-lista li p { grid-column: 1; grid-row: 2; }
  .favoritos-lista__precio { grid-column: 2; grid-row: 1; }

  .menu-destacado__encabezado .boton { width: 100%; }


  .pie__interior { grid-template-columns: 1fr; }
  .pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie__enlaces { gap: 0; }
  .pie__contacto a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 520px) {
  .casa__cifras dd { font-size: var(--text-xl); }
  .casa__fotos { margin-right: 0; }
  .casa__detalle { right: clamp(1.25rem, 5vw, 3rem); }
  .visitanos__datos { grid-template-columns: 1fr; }
  .visitanos__datos a { display: inline-flex; align-items: center; min-height: 44px; }
  .placa { transform: none; }
}

/* Parallax muy leve en la foto de reservar, solo donde el navegador lo hace
   sin JavaScript (animaciones ligadas al scroll). Donde no, la foto queda fija. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .reservar__fondo img {
      animation: deriva-foto linear both;
      animation-timeline: view();
      animation-range: cover;
      scale: 1.08;
    }
    @keyframes deriva-foto {
      from { transform: translateY(-3%); }
      to   { transform: translateY(3%); }
    }
  }
}

@media print {
  .reservar__fondo, .reservar::before { display: none; }
}

/* 19-oct-2026: la barra de arriba en UN renglón. Con "Pide a casa" los enlaces se doblaban
   ("LA / CASA"). Ninguno se dobla; en pantallas medianas se esconde "Carta digital"
   (sigue en el menú de hamburguesa y en "Menú") y antes de apretarse pasa a hamburguesa. */
.nav__enlaces a { white-space: nowrap; }
.nav__marca, .nav__acciones { flex-shrink: 0; }
@media (max-width: 1180px) {
  .nav__boton-carta { display: none; }
  .nav__enlaces { gap: 1.1rem; }
  .nav__interior { gap: 1.25rem; }
}
@media (max-width: 1000px) {
  .nav__enlaces, .nav__acciones { display: none; }
  .nav__hamburguesa { display: flex; }
}