/* Carta digital BIT
   Dirección visual: un afiche más de la casa, bar de shows nocturno. Ver
   CLAUDE.md §7.

   Regla de color que no se rompe (§7 y §10): el rojo es SUPERFICIE, nunca
   color de texto, y nunca lleva texto negro encima. Blanco sobre rojo da
   5,9:1 y negro sobre kraft 9,2:1; negro sobre rojo y rojo sobre negro dan
   3,6:1, que no alcanza. El logo rojo sobre negro es una imagen, no texto.
   Un contorno es decoración, nunca lo que sostiene la legibilidad. */

/* ------------------------------------------------------------------ fuentes */

/* Autoalojadas, WOFF2, subset latino (U+0000-00FF y puntuación): trae las
   tildes, la ñ y la ä de Jägermeister, pero no las flechas; por eso las
   flechas del sitio son SVG (js/menu.js). */
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-latin.woff2') format('woff2');
  font-weight: 200 700; /* variable, eje wght */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900; /* variable, eje wght */
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------- tokens */

:root {
  --negro: #000000;
  --rojo: #E20713;
  --rojo-afiche: #CB0903;
  --kraft: #D3B17F;
  --tinta: #000000;
  --blanco: #FFFFFF;
  /* Tinta sepia para las descripciones: 6,8:1 sobre kraft limpio y por encima
     de 5:1 donde el grano y la viñeta oscurecen el papel. Es la misma tinta
     que el negro, solo que impresa más suave. */
  --tinta-suave: #2E2314;

  /* Papel envejecido, sin descargas (§7): ruido de feTurbulence en un SVG en
     línea. El grano es fino y en tile chico; las manchas son ruido de baja
     frecuencia en un tile grande. Los dos tiñen de café, no de gris, para que
     el kraft se vea viejo y no sucio. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .05 0 0 0 1.5 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --manchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .27 0 0 0 0 .1 0 0 0 1.6 -.66'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23m)'/%3E%3C/svg%3E");

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 480px;
  --toque: 44px; /* objetivo táctil mínimo: se usa con una mano en la mesa */

  /* Unidad de alto de la portada (técnica de Otsu, "La portada entra en
     pantalla"): el contenido y el contenedor miden contra el MISMO viewport.
     `body` mide en dvh; si el contenido midiera en vh, al retraerse la barra
     del navegador el contenedor crece y el contenido no. Los navegadores sin
     dvh caen al vh clásico. */
  --uh: 1vh;
}

@supports (height: 1dvh) {
  :root { --uh: 1dvh; }
}

/* -------------------------------------------------------------------- base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Dos superficies (§7): la portada en negro, con la luz roja del local
   cayendo desde arriba; el índice y los platos en kraft. El negro es el
   valor por defecto porque es lo que se ve mientras carga y en el error. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--negro);
  background-image: radial-gradient(ellipse 95% 50% at 50% -6%, #E2071352, transparent 72%);
  background-repeat: no-repeat;
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  color-scheme: dark;
}

body:is([data-vista='rama'], [data-vista='categoria']) {
  background-color: var(--kraft);
  background-image: var(--grano), var(--manchas);
  background-repeat: repeat;
  color: var(--tinta);
  color-scheme: light;
}

/* Viñeta del papel: los bordes un poco más tostados. Capa fija por debajo de
   todo (z-index -1) y sin eventos; tope bajo para que la descripción siga
   arriba de 4,5:1 en las esquinas. */
body:is([data-vista='rama'], [data-vista='categoria'])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 58%, #5C340C2E 100%);
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

/* currentColor: negro sobre kraft, blanco sobre negro y sobre rojo. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Las tarjetas de la portada son kraft sobre negro: un anillo negro afuera
   no se vería. */
body[data-vista='portada'] .carta:focus-visible { outline-color: var(--kraft); }

/* La vista recibe el foco al cambiar de pantalla, pero no debe dibujar
   anillo: el usuario no navegó con teclado hasta ahí. */
#vista h2:focus,
#vista h2:focus-visible { outline: none; }

/* El título visible vive en la barra superior, pero el encabezado tiene que
   seguir existiendo en el orden del documento: es lo que anuncia el lector de
   pantalla y lo que recibe el foco al cambiar de vista. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ barra superior */

/* La franja roja de la carta, con el filete negro de los afiches. Texto en
   blanco (5,9:1). */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 16px;
  background: var(--rojo);
  color: var(--blanco);
  border-bottom: 3px solid var(--negro);
}

.barra[hidden] { display: none; }

.barra-volver {
  flex: none;
  width: var(--toque);
  height: var(--toque);
  display: grid;
  place-items: center;
  border: 2px solid var(--blanco);
  border-radius: 50%;
  color: var(--blanco);
  text-decoration: none;
}

.barra-volver-flecha {
  width: 22px;
  height: 22px;
  rotate: 180deg;
}

.barra-titulo {
  margin: 0;
  min-width: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* La silueta de la rama, en negro como sombra chinesca, parada en el filete:
   los pies cruzan la línea y asoman sobre el papel. */
.barra-figura {
  flex: none;
  align-self: flex-end;
  width: auto;
  height: 58px;
  margin: 0 2px -16px auto;
}

/* ------------------------------------------------------------------ layout */

main {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 24px 16px 8px;
}

/* ----------------------------------------------------------------- portada */

/* La portada entra completa en pantalla, sin scroll: es donde el cliente
   decide a dónde va. El alto se gana escalando con --uh, y el orden de
   sacrificio es deliberado: el sello absorbe casi toda la compresión y las
   tarjetas son las que menos ceden.

   OJO: main solo puede ser flex en la portada. Suelto, convierte la nota y la
   lista de ítems de una categoría en columnas paralelas. */
body[data-vista='portada'] main {
  display: flex;
  padding: clamp(10px, calc(2.4 * var(--uh)), 28px) 16px clamp(4px, calc(1 * var(--uh)), 10px);
}

.portada {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.portada-sello {
  flex: none;
  width: clamp(92px, calc(32 * var(--uh) - 84px), 200px);
  margin: 0 auto;
  font-size: inherit;
}

.portada-sello img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* Sin archivo de sello: el nombre en Oswald ligero, que es lo que más se
   parece al logo. En blanco: el rojo no puede ser texto. */
.portada-sello-texto {
  width: auto;
  font-family: var(--display);
  font-size: clamp(56px, calc(14 * var(--uh)), 112px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--blanco);
}

/* El claim va en kraft sobre negro (9,2:1): es la voz del papel en la
   portada oscura. */
.portada-claim {
  margin: clamp(10px, calc(2 * var(--uh)), 20px) 0 0;
  font-family: var(--display);
  font-size: clamp(13px, calc(2 * var(--uh)), 16px);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--kraft);
}

.portada-titulo {
  margin: clamp(14px, calc(5 * var(--uh) - 14px), 40px) 0 clamp(12px, calc(3 * var(--uh) - 6px), 26px);
  font-family: var(--display);
  font-size: clamp(30px, calc(6.4 * var(--uh) - 8px), 50px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cartas {
  display: grid;
  gap: clamp(12px, calc(2.6 * var(--uh) - 4px), 24px);
  text-align: left;
}

/* Cada carta es un recorte de papel kraft pegado sobre el negro, un poco
   torcido, como en el collage de los afiches. Al tocarla se vuelve el botón
   activo: rojo con texto blanco (§7). */
.carta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: clamp(62px, calc(10.5 * var(--uh)), 88px);
  padding: 10px 20px;
  background-color: var(--kraft);
  background-image: var(--grano);
  color: var(--tinta);
  border-radius: 2px;
  text-decoration: none;
  rotate: -0.8deg;
}

.carta:nth-child(even) { rotate: 0.7deg; }

/* La silueta sale por arriba de la tarjeta; el padding le guarda su sitio. */
.carta.con-figura { padding-right: 86px; }

.carta-nombre {
  font-family: var(--display);
  font-size: clamp(22px, calc(3.5 * var(--uh)), 28px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.carta-figura {
  position: absolute;
  right: 20px;
  bottom: 7px;
  width: auto;
  height: calc(100% + 16px);
  pointer-events: none;
}

.carta-flecha {
  flex: none;
  width: 28px;
  height: 28px;
}

/* -------------------------------------------------- índice de categorías */

/* El índice es un cartel de programación (el WEEKLY LINE UP de los afiches):
   filas en Oswald separadas por filetes, sin cajas. */
.categorias {
  border-top: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
}

.categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 8px;
  text-decoration: none;
}

.categoria + .categoria { border-top: 1px solid var(--tinta); }

.categoria-nombre {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Kraft sobre negro, 9,2:1. */
.categoria-conteo {
  flex: none;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 15px;
  background: var(--negro);
  color: var(--kraft);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Atajo a la carta de bebidas desde las otras, para no volver a la portada. */
.atajo-bebidas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  margin-top: 28px;
  padding: 12px 18px;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  rotate: -0.6deg;
}

.atajo-flecha { flex: none; width: 24px; height: 24px; }

/* ------------------------------------------------------------------- ítems */

.nota {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 4px solid var(--tinta);
  background: #FFF8EB33;
  font-size: 13.5px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
}

/* Subtítulo de un grupo dentro de una categoría fusionada (§5): una franja
   roja de afiche con el texto en blanco (más de 5,9:1 sobre el rojo profundo). */
.grupo-nombre {
  margin: 34px 0 6px;
  padding: 7px 12px 6px;
  background: var(--rojo-afiche);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El primero no despega de arriba. Va con combinador de hijo porque el nombre
   de un plato sin agrupar también es un h3, pero ese vive dentro de la lista. */
#vista > .grupo-nombre:first-of-type { margin-top: 0; }

.grupo-nombre + .nota { margin: 10px 0 4px; }

.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Como en la carta impresa: platos en renglones, sin cajas, separados por un
   filete fino. */
.item {
  padding: 14px 6px;
  border-bottom: 1px solid #00000040;
}

.item:last-child { border-bottom: 0; }

.item-linea {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.item-nombre {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
}

/* Guía punteada nombre → precio: convención de carta impresa. Se dibuja con
   ::after para que, cuando el nombre deja muy poco sitio, el punteado pueda
   seguir un poco más allá de la caja angosta de .guia aprovechando parte del
   gap hasta el precio, sin pedirle ancho de más al reparto flex (eso empujaría
   a partirse a nombres que hoy caben en una línea). La caja de .guia está
   vacía y apoya su base en la línea base del texto; `bottom` positivo sube el
   punteado. Ver el CLAUDE.md de Otsu para la medición original. */
.guia {
  position: relative;
  flex: 1;
  min-width: 14px;
}

.guia::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: calc(100% + 4px);
  border-bottom: 2px dotted #00000066;
}

/* La pastilla de precio es superficie roja con texto blanco (§7). Posicionada
   para pintarse encima de los puntos, nunca debajo. */
.precio {
  position: relative;
  flex: none;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.item-descripcion {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* Miniatura de plato, flotada a la derecha junto al precio. Al flotar,
   .item-linea (flex, o sea contexto de formato propio) se acorta sola a su
   lado y la descripción la envuelve y sigue a ancho completo por debajo.
   Todo cuelga de .con-foto: una fila sin foto no recibe ni una regla nueva. */
.item.con-foto { display: flow-root; /* contiene el flotado */ }

.item-miniatura {
  float: right;
  width: 72px; /* por encima del objetivo táctil de 44px */
  height: 72px;
  margin: 0 0 6px 12px;
  padding: 0;
  background: var(--kraft);
  border: 2px solid var(--tinta);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.item-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.variantes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.variante {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.variante-etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ visor de foto */

/* <dialog> nativo, sin padding: todo el contenido vive en .foto-cuerpo, así
   un clic cuyo objetivo es el dialog mismo fue en el fondo y cierra. Es una
   hoja de kraft con el mismo grano del papel. */
.foto {
  width: min(100% - 32px, var(--ancho));
  max-height: calc(100% - 32px);
  padding: 0;
  background-color: var(--kraft);
  background-image: var(--grano);
  color: var(--tinta);
  border: 3px solid var(--negro);
  border-radius: 3px;
  overflow: hidden auto; /* el gesto de deslizar no compite con un scroll horizontal */
  /* El deslizar horizontal es nuestro: con pan-y el navegador no arranca un
     gesto propio en ese eje. Sin esto, en Chromium un arrastre horizontal
     sobre una página sin scroll horizontal cuenta como "atrás", y el visor se
     cerraba solo al pasar de plato (probado en Otsu). */
  touch-action: pan-y;
  overscroll-behavior: contain; /* y el scroll vertical no se encadena al fondo */
}

.foto::backdrop {
  background: #000000c4;
}

.foto-cuerpo {
  position: relative;
}

.foto-imagen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* el marco ya está dibujado mientras baja la grande */
  object-fit: cover;
  border-bottom: 3px solid var(--negro);
}

/* La pareja del botón de volver: círculo con contorno, aquí sobre negro
   porque flota encima de la foto. */
.foto-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--toque);
  height: var(--toque);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--negro);
  border: 2px solid var(--blanco);
  border-radius: 50%;
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.foto-texto {
  padding: 16px 18px 18px;
}

.foto-nombre {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.foto-texto .item-descripcion[hidden] { display: none; }

/* Plato sin foto: el visor es la misma ficha, sin la imagen. El nombre deja
   sitio a la ×, que aquí ya no flota sobre una foto. */
.foto-imagen[hidden] { display: none; }

.foto.sin-foto .foto-texto { padding-top: 20px; }

.foto.sin-foto .foto-nombre {
  margin-right: 52px;
  min-height: 40px;
}

.foto-precios:not(:empty) {
  margin-top: 12px;
}

.foto-posicion {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  text-align: center;
}

.foto-posicion[hidden] { display: none; }

/* Aparece con un zoom corto; la regla global de prefers-reduced-motion lo
   apaga, y el fondo se suma abajo porque `*` no alcanza a ::backdrop. */
.foto[open] {
  animation: foto-entra 0.18s ease-out;
}

.foto[open]::backdrop {
  animation: foto-fondo 0.18s ease-out;
}

@keyframes foto-entra {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes foto-fondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Con el visor abierto el fondo no scrollea. */
body.foto-abierta {
  overflow: hidden;
}

/* Navegadores sin <dialog>: sin capa superior ni backdrop, se posiciona a
   mano. La clase la pone el JS solo cuando falta showModal, así el modal
   nativo no la ve. Centrado con márgenes y no con transform, que es lo que
   anima foto-entra. */
.foto.foto-respaldo[open] {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  margin: 0 auto;
  z-index: 20;
}

/* -------------------------------------------------------------------- pie */

footer {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 26px 16px 30px;
  text-align: center;
  font-size: 13px;
}

footer p {
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

footer p[hidden] { display: none; }

/* El letrero no aparece en la vista de platos: ahí el cliente está leyendo
   precios y decidiendo qué pedir, y verlo al final de cada categoría cansa. */
body[data-vista='categoria'] #instagram { display: none; }

/* En la portada el pie se aprieta para que todo entre en pantalla. */
body[data-vista='portada'] footer {
  padding: clamp(8px, calc(1.6 * var(--uh)), 16px) 16px clamp(12px, calc(2.2 * var(--uh)), 24px);
}

body[data-vista='portada'] footer p {
  margin-top: clamp(8px, calc(1.2 * var(--uh)), 14px);
  color: var(--kraft);
}

/* Letrero de Instagram: secundario a propósito. Es el único enlace que saca
   al cliente del sitio, así que no compite con las cartas: va en contorno, en
   el color del texto de cada superficie (kraft en la portada, negro en el
   índice). El contorno es decoración; el texto se lee solo. */
.instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque);
  padding: 7px 20px 7px 16px;
  border: 2px solid currentColor;
  border-radius: 999px;
  text-align: left;
  text-decoration: none;
}

body[data-vista='portada'] .instagram { color: var(--kraft); }

.instagram-icono { flex: none; width: 24px; height: 24px; }

.instagram-titulo {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.instagram-usuario {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ estado */

.error {
  margin: 0;
  padding: 18px;
  border: 2px solid currentColor;
  font-weight: 600;
  text-align: center;
}

.cargando {
  text-align: center;
  color: var(--kraft);
  font-weight: 500;
}

/* -------------------------------------------------------------- movimiento */

/* Al tocar, la carta, la categoría y el atajo se vuelven el botón activo:
   superficie roja y texto blanco (§7). El contador del índice se queda en su
   pastilla negra, que sigue leyéndose sobre el rojo. */
.carta:active,
.categoria:active,
.atajo-bebidas:active {
  background-color: var(--rojo);
  color: var(--blanco);
}

.carta,
.atajo-bebidas {
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.12s ease;
}

.carta:active,
.atajo-bebidas:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

.categoria { transition: background-color 0.12s ease; }

/* Todos los platos abren el visor al tocarlos, tengan foto o no: el renglón
   se oscurece un poco, como papel apretado. */
.item.se-toca {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.item.se-toca:active { background-color: #00000014; }

@media (hover: hover) {
  .carta:hover { transform: translateY(-3px); }
  .categoria:hover { background-color: #0000000F; }
  .item.se-toca:hover { background-color: #0000000A; }
  .atajo-bebidas:hover { transform: translateY(-2px); }
}

.barra-volver { transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }

.barra-volver:active {
  transform: scale(0.9);
  transition-duration: 0.08s;
}

/* Los encabezados entran con un desenfoque que se aclara, como el SHADOWS del
   afiche (§7): el título de la portada, el de la barra y los subtítulos de
   grupo. Solo filter, opacity y transform. */
.portada-titulo,
.barra-titulo,
.grupo-nombre {
  animation: sombra-entra 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.portada-titulo { animation-delay: 120ms; }
.grupo-nombre { animation-delay: 60ms; }

@keyframes sombra-entra {
  from { opacity: 0; filter: blur(10px); transform: scale(1.06); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* El resto de cada pantalla aparece y se desliza, una pieza detrás de otra.
   En la portada sube; en el índice y en los platos entra de lado, desde la
   derecha al avanzar y desde la izquierda al volver (`data-sentido` en
   <body>). El relleno es `backwards`: al terminar, la animación suelta el
   `transform` y el toque de arriba vuelve a mandar. */
body[data-sentido='atras'] { --entra-x: -18px; }

/* Para que lo que entra desde la derecha no asome fuera de la pantalla y deje
   deslizar la página de lado mientras dura. */
body[data-vista='rama'] main,
body[data-vista='categoria'] main { overflow-x: clip; }

.portada-sello,
.portada-claim,
.cartas > .carta {
  animation: entra-sube 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.portada-claim { animation-delay: 60ms; }
.cartas > .carta { animation-delay: 220ms; }
.cartas > .carta:nth-child(2) { animation-delay: 300ms; }
.cartas > .carta:nth-child(3) { animation-delay: 380ms; }

.categorias > .categoria,
.atajo-bebidas,
.nota,
.items > .item {
  animation: entra-lado 0.36s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* El letrero de Instagram vive en el pie y no se vuelve a pintar al cambiar
   de pantalla. Cada vista le pone una animación con nombre distinto, y con
   eso vuelve a correr. */
body[data-vista='portada'] .instagram {
  animation: entra-sube 0.5s cubic-bezier(0.22, 1, 0.36, 1) 440ms backwards;
}

body[data-vista='rama'] .instagram {
  animation: entra-lado 0.36s cubic-bezier(0.22, 1, 0.36, 1) 320ms backwards;
}

.categorias > .categoria:nth-child(2),
.items > .item:nth-child(2) { animation-delay: 40ms; }
.categorias > .categoria:nth-child(3),
.items > .item:nth-child(3) { animation-delay: 80ms; }
.categorias > .categoria:nth-child(4),
.items > .item:nth-child(4) { animation-delay: 120ms; }
.categorias > .categoria:nth-child(5),
.items > .item:nth-child(5) { animation-delay: 160ms; }
.categorias > .categoria:nth-child(6),
.items > .item:nth-child(6) { animation-delay: 200ms; }
.categorias > .categoria:nth-child(7),
.items > .item:nth-child(7) { animation-delay: 240ms; }
.categorias > .categoria:nth-child(n + 8),
.items > .item:nth-child(n + 8),
.atajo-bebidas { animation-delay: 280ms; }

@keyframes entra-lado {
  from { opacity: 0; transform: translate3d(var(--entra-x, 18px), 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes entra-sube {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .foto::backdrop { animation: none !important; }
}

/* --------------------------------------------------------- pantallas chicas */

/* 360px es el piso real de gama baja. Aquí NO se tocan el sello ni el nombre
   de las tarjetas: los gobiernan las clamp() de la portada, atadas al alto. */
@media (max-width: 380px) {
  main { padding: 20px 12px 6px; }
  .carta { padding-left: 16px; }
  .carta.con-figura { padding-right: 78px; }
  .categoria { padding: 12px 4px; }
  .categoria-nombre { font-size: 20px; }
  .barra-titulo { font-size: 22px; }
  .item { padding: 13px 2px; }
}