/* ==========================================================================
   CARTA CINEMATOGRÁFICA — 18 de octubre de 2026
   Raúl: "la sección de la carta digital es muy genérica… quiero una tipo
   cinemática pero que sea fácil pedir". Es el sitio de referencia que se
   enseña a otros restaurantes, así que tiene que estar a la altura.

   Qué hace:
   - La carta pasa a TINTA con oro, como la portada, la cinemática y la torre.
   - Arriba, el camarón del logo R2 en oro y "Don Camarón" en la letra gótica
     del logo (fuentes/gotica, archivo local: funciona sin internet).
   - Cada categoría abre con su foto a lo ancho (img/carta/<categoria>-1600.webp),
     su número y su nombre grande. La foto se acerca al bajar.
   - Los platillos, como carta impresa: nombre · · · · precio, con la
     descripción debajo. El + va relleno de oro: se ve a la primera.
   Las hojas que suben desde abajo (pedido, mesa, cuenta) siguen en marfil:
   ahí se confirma y se paga, y es lo que ya está probado.

   Contrastes (tokens.css): marfil sobre tinta 17.25:1 · oro sobre tinta 8.87:1 ·
   #A7AFBD sobre tinta 8.87:1 · tinta sobre oro 8.87:1.
   Solo presentación: la lógica de pedidos y pago no cambió.
   ========================================================================== */

.carta-cine {
  /* El oro del logo, para la letra gótica (mismo degradado que logo-oficial-r2-oro) */
  --oro-logo-1: #F7E3A6;
  --oro-logo-2: #C9963F;
  --oro-logo-3: #8A5F1E;
  --oro-logo-4: #E6C372;
  --oro-logo-5: #FBEEC2;
  --degradado-oro: linear-gradient(180deg, var(--oro-logo-1) 0%, var(--oro-logo-2) 48%, var(--oro-logo-3) 55%, var(--oro-logo-4) 65%, var(--oro-logo-5) 100%);
  --carta-borde: max(clamp(1rem, 4vw, 2rem), calc((100vw - var(--ancho-max)) / 2 + clamp(1rem, 4vw, 2rem)));

  background: var(--tinta);
  overflow-x: clip;
}

/* La franja de "versión de muestra", en tinta para no partir la página. */
.carta-cine .banda-muestra {
  color: var(--marfil);   /* menu.js a veces escribe el aviso directo, sin <p> */
  background: var(--tinta-2);
  border-color: var(--oro-linea);
  border-left-color: var(--oro);
}
.carta-cine .banda-muestra p { color: var(--marfil); }
.carta-cine .banda-muestra svg { color: var(--oro); }

/* ===================== ENCABEZADO: EL LOGO Y "LA CARTA" ===================== */
.carta-cine .carta { padding-top: 0; }
.carta-cine .carta__encabezado {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: calc(50% - 50vw);
  padding: clamp(2.5rem, 7vw, 5rem) var(--carta-borde) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--oro-linea);
  background:
    radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--oro) 16%, transparent), transparent 70%),
    var(--tinta);
}
.carta__simbolo {
  width: min(70vw, 440px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.carta__marca {
  margin: clamp(0.25rem, 1vw, 0.75rem) 0 0;
  font-family: 'UnifrakturMaguntia', var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 1;
  background: var(--degradado-oro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.carta-cine .carta__titulo {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--oro);
}
.carta-cine .carta__subtitulo {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  color: var(--texto-2-oscuro);
}

/* Entrada al abrir: el camarón sube y se enfoca, luego el nombre. */
@media (prefers-reduced-motion: no-preference) {
  .carta__simbolo { animation: carta-sube 1.4s var(--ease-out) both; }
  .carta__marca { animation: carta-aparece 1.2s var(--ease-out) 0.45s both; }
  .carta-cine .carta__titulo,
  .carta-cine .carta__subtitulo { animation: carta-aparece 1s var(--ease-out) 0.8s both; }
}
@keyframes carta-sube {
  from { opacity: 0; transform: translateY(40px) scale(1.08); filter: blur(10px) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); }
  to   { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); }
}
@keyframes carta-aparece {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ===================== AVISOS DE ARRIBA, EN TINTA ===================== */
.carta-cine .aviso-solo-lectura {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--tinta-2);
  border-color: var(--oro-linea);
}
.carta-cine .aviso-solo-lectura h2 { color: var(--marfil); }
.carta-cine .aviso-solo-lectura p { color: var(--texto-2-oscuro); }
.carta-cine .carta .boton--linea { border-color: var(--oro-linea); color: var(--marfil); }
.carta-cine .carta .boton--linea:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); background: transparent; }

.carta-cine .carta .donde-come { margin-top: clamp(1.5rem, 4vw, 2.5rem); background: var(--tinta-2); border-color: var(--oro-linea); }
.carta-cine .carta .donde-come__pregunta { color: var(--texto-2-oscuro); }
.carta-cine .carta .donde-come__opcion { border-color: var(--oro-linea); }
.carta-cine .carta .donde-come__opcion:hover { border-color: var(--oro); }
.carta-cine .carta .donde-come__opcion.es-activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, transparent); }
.carta-cine .carta .donde-come__icono { color: var(--oro); }
.carta-cine .carta .donde-come__texto small { color: var(--texto-2-oscuro); }

/* ===================== PORTADA DE CADA CATEGORÍA ===================== */
.carta-cine .grupo-carta { margin-bottom: clamp(3rem, 7vw, 5rem); scroll-margin-top: 7.5rem; }

.portada-cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(260px, 46svh, 560px);
  padding: 0 var(--carta-borde) clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  isolation: isolate;
}
.portada-cat__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Negro de abajo hacia arriba: el texto siempre va sobre oscuro (AA garantizado
   aunque se cambie la foto). */
.portada-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--tinta) 0%, color-mix(in srgb, var(--tinta) 82%, transparent) 30%, transparent 75%),
    linear-gradient(90deg, color-mix(in srgb, var(--tinta) 55%, transparent) 0%, transparent 60%);
}
.portada-cat--sin-foto {
  min-height: auto;
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--oro-linea);
}

.portada-cat__texto { display: grid; gap: var(--space-1); }
.portada-cat__numero {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--oro);
}
.carta-cine .grupo-carta__titulo {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 8vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--marfil);
}
.portada-cat__cuenta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-2-oscuro);
}

/* ===================== LOS PLATILLOS: CARTA IMPRESA ===================== */
.carta-cine .item {
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--oro-linea);
}
.carta-cine .item:last-child { border-bottom: none; }

/* nombre · · · · · · precio, y lo demás a todo lo ancho debajo */
.carta-cine .item__datos {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(1.25rem, 1fr) auto;
  column-gap: var(--space-3);
  align-items: baseline;
}
.carta-cine .item__datos::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  height: 0.6em;
  border-bottom: 1px dotted color-mix(in srgb, var(--oro) 55%, transparent);
}
.carta-cine .item__datos > * { grid-column: 1 / -1; }
.carta-cine .item__nombre {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--marfil);
}
.carta-cine .item__precio {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  font-size: 1.5rem;
  color: var(--oro);
  font-variant-numeric: lining-nums tabular-nums;
}
.item__descripcion {
  margin: var(--space-2) 0 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--texto-2-oscuro);
}
.carta-cine .item__medida,
.carta-cine .item__opciones {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--oro);
  opacity: 0.85;
}
.carta-cine .item__opcion-select { background: var(--tinta-2); color: var(--marfil); border-color: var(--oro-linea); }

/* Cantidad: el − de línea, el + relleno de oro (es el que se busca) */
.carta-cine .carta .redondo { border-color: var(--oro-linea); color: var(--marfil); background: transparent; }
.carta-cine .carta .redondo:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); background: transparent; }
.carta-cine .carta .redondo--agregar { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.carta-cine .carta .redondo--agregar:hover:not(:disabled) { background: var(--oro-brillo); border-color: var(--oro-brillo); color: var(--tinta); }
.carta-cine .carta .item__cantidad { color: var(--marfil); }

/* La barra roja de "Ver mi pedido" se funde con negro, no con marfil. */
.carta-cine .barra-pedido { --color-background: var(--tinta); }

.carta-cine .carta__nota { border-top-color: var(--oro-linea); color: var(--texto-2-oscuro); }
.carta-cine .carta__legal { color: var(--texto-2-oscuro); }
.carta-cine .carta__legal a { color: var(--marfil); border-bottom-color: var(--oro); }

/* En computadora: una sola columna de categorías (la portada va a lo ancho) y
   los platillos de cada una en dos columnas debajo de su portada. Antes la
   lista entera iba en dos columnas de periódico (menu.css, ESCRITORIO). */
@media (min-width: 768px) {
  .carta-cine .lista-carta { column-count: auto; }
  .carta-cine .grupo-carta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .carta-cine .portada-cat { grid-column: 1 / -1; margin-bottom: var(--space-4); }
  .carta-cine .item:last-child { border-bottom: 1px solid var(--oro-linea); }
}

/* En el celular el control baja debajo del texto, alineado a la derecha:
   el nombre y la descripción respiran y el pulgar encuentra el + siempre igual. */
@media (max-width: 560px) {
  .carta-cine .item { flex-wrap: wrap; }
  .carta-cine .item__datos { flex-basis: 100%; }
  .carta-cine .item__control { margin-left: auto; }
}

/* ===================== MOVIMIENTO CON EL SCROLL ===================== */
/* Solo navegadores que lo hacen sin JS (Chrome, Edge, Safari reciente). En los
   demás todo se ve completo y quieto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .portada-cat__foto {
      animation: portada-acerca linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .portada-cat__texto {
      animation: portada-texto linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
    .carta-cine .item {
      animation: platillo-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}
@keyframes portada-acerca {
  from { transform: scale(1.16) translateY(-3%); }
  to   { transform: scale(1.02) translateY(3%); }
}
@keyframes portada-texto {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes platillo-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}