/* ==========================================================================
   EL LIBRO · la carta de Sushi Plus Chicken

   Esto lo cargan LAS DOS superficies —`sushipluschicken.com` y la página
   suelta de `/carta/`— y es el único sitio donde vive el aspecto de la carta.
   Vino de la sección 15 de `sitio/css/style.css`, que ya no la tiene: se
   movió aquí entera el 30 de agosto de 2026, cuando las dos cartas pasaron a
   ser una sola. Editar aquí cambia las dos; no hay una copia que se pueda
   quedar atrás.

   No trae tokens ni reset a propósito. El sitio ya los tiene y la página
   suelta los pone en `suelta.css`: si estuvieran aquí, cargar el libro dentro
   del sitio le pisaría la tipografía a la página entera.

   ⚠️ Al tocar este archivo o `libro.js`, subir el `?v=` en los DOS sitios que
      los nombran: `carta/index.html` y `sitio/index.html` (+ `_sedes.py`).
      Cloudflare los cachea cuatro horas, cabeceras incluidas.
   ========================================================================== */

/* --- El libro ----------------------------------------------------------- */
.carta { background: var(--surface); }

/* Arrastrar pasa la hoja; no selecciona.
   Pasar página es arrastrar en horizontal con el botón pulsado — o sea, el
   mismo gesto con el que el navegador selecciona texto—, así que al soltar
   media carta quedaba resaltada encima del papel. No se puede arreglar desde
   el JS: el `preventDefault()` del `pointermove` llega tarde, la selección la
   empezó el `mousedown`. Se apaga aquí, que es donde se decide.

   Va en el libro, las pestañas y el paginador, y NO en `.carta`: en el sitio
   esa clase envuelve también el título de la sección, que es texto de la
   página y sí se copia. */
.carta__pestanas,
#panelesCarta,
.carta__paso {
  -webkit-user-select: none;
  user-select: none;
}

.carta__pestanas {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  display: flex;
  gap: .38rem;
  padding: .55rem 0;
  margin-bottom: clamp(1.8rem, 1rem + 2vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(var(--surface) 76%, transparent);
  -ms-overflow-style: none;
}
.carta__pestanas::-webkit-scrollbar { display: none; }

.pestana {
  position: relative;
  flex: none;
  padding: .62em 1.25em;
  border-radius: 99px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta-2);
  white-space: nowrap;
  transition: color var(--d-rapido) var(--ease);
  isolation: isolate;
}
.pestana::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--crema-2);
  transform: scale(.82);
  opacity: 0;
  transition: transform var(--d-rapido) var(--ease), opacity var(--d-rapido) var(--ease);
  z-index: -1;
}
.pestana:hover::before { transform: scale(1); opacity: 1; }
.pestana.activa { color: var(--crema); }
.pestana.activa::before {
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  transform: scale(1);
  opacity: 1;
}

/* --- El libro ------------------------------------------------------------
   La carta se lee como se lee un libro: un pliego de dos páginas, un lomo en
   medio, y hojas que se pasan. Nada de bajar y bajar — **el libro cabe entero
   en la pantalla** y el JS reparte los platos para que cada página se llene
   justo hasta el borde.

   El tamaño lo pone el JS en `--pw`/`--ph`, y con ellos `--esc`: la tipografía
   de dentro va en píxeles multiplicados por esa escala, así que el libro crece
   y encoge como un objeto y no como una página web. Por eso las páginas se
   miden con la misma escala con la que se pintan (`.pagina--probeta`): medir
   de otra forma sería medir otra cosa.

   Lo que gira es `.giro`, una hoja con el eje en el lomo que recorre los 180°
   de un lado al otro. Va partida en tiras (`.giro__tira`) encajadas una dentro
   de otra: cada una hereda el giro de la anterior y añade el suyo, y de esa
   suma sale la comba del papel. Aquí está la escenografía; los ángulos y las
   sombras los pone el JS, porque la comba hay que sumarla tira por tira. */
#panelesCarta {
  position: relative;               /* la probeta con la que se mide cuelga de aquí */
  display: flex;
  justify-content: center;
  touch-action: pan-y;              /* el arrastre horizontal es nuestro; el vertical, de la página */
  -webkit-tap-highlight-color: transparent;
}
#panelesCarta:focus-visible { outline: none; }

.libro {
  position: relative;
  perspective: calc(var(--ph, 700px) * 2.1);
  perspective-origin: 50% 45%;
  /* Al combarse, la hoja se sale del libro por los lados —la barriga del papel
     con la perspectiva encima llega a asomar unos 35 px—. El relleno le deja
     ese sitio, y el recorte evita que en una sola página barra media sección al
     irse. Va aquí y no en `.libro__mesa` a propósito: la mesa lleva el 3D, y un
     `overflow` sobre `preserve-3d` aplanaría el volumen de la hoja. */
  padding: 0 clamp(10px, 2.4vw, 44px);
  overflow: hidden;
}

.libro__mesa {
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  transform-style: preserve-3d;
  cursor: pointer;
}
.libro--suelto .libro__mesa { width: var(--pw); }

.libro__hueco {
  position: absolute;
  top: 0;
  width: var(--pw);
  height: var(--ph);
}
.libro__hueco--izq { left: 0; }
.libro__hueco--der { left: var(--pw); }
.libro--suelto .libro__hueco--der { left: 0; }

/* El lomo: la sombra del pliegue encuadernado. Es lo que hace que dos páginas
   se lean como un libro y no como dos hojas puestas al lado. */
.libro__lomo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pw) - 44px);
  width: 88px;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(42, 29, 24, 0)    0%,
      rgba(42, 29, 24, .055) 34%,
      rgba(42, 29, 24, .16)  49%,
      rgba(90, 62, 50, .05)  50%,
      rgba(42, 29, 24, .16)  51%,
      rgba(42, 29, 24, .055) 66%,
      rgba(42, 29, 24, 0)    100%);
}
.libro--suelto .libro__lomo { display: none; }

/* Lo que la hoja levantada proyecta sobre la página de debajo. La opacidad la
   lleva el JS: crece al despegar del lado que deja y otra vez al llegar al que
   va a ocupar. */
.libro__sombra {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--pw);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.libro__sombra--izq {
  left: 0;
  background: linear-gradient(270deg, rgba(42, 29, 24, .85), rgba(42, 29, 24, .12) 42%, transparent 72%);
}
.libro__sombra--der {
  left: var(--pw);
  background: linear-gradient(90deg, rgba(42, 29, 24, .85), rgba(42, 29, 24, .12) 42%, transparent 72%);
}
.libro--suelto .libro__sombra--der { left: 0; }
.libro--suelto .libro__sombra--izq { display: none; }

/* --- La página ---------------------------------------------------------- */
.pagina {
  /* Toda la tipografía del libro sale de aquí: píxeles por la escala. `--esc`
     baja heredada del `.libro` —o la pone a mano la probeta al medir—, así que
     aquí no se declara: declararla la pisaría y el libro saldría siempre al
     mismo tamaño. */
  --p-xs:   calc(11px   * var(--esc));
  --p-sm:   calc(13px   * var(--esc));
  --p-base: calc(15.5px * var(--esc));
  --p-lg:   calc(21px   * var(--esc));
  --p-xl:   calc(31px   * var(--esc));
  --p-pad:  calc(38px   * var(--esc));

  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: var(--pw, auto);
  height: var(--ph, auto);
  padding: var(--p-pad) calc(var(--p-pad) * .92) calc(var(--p-pad) * 1.25);
  overflow: hidden;
  font-size: var(--p-base);
  /* Papel: crema con un poco de grano de fibra y el canto tostado. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #FFFCF6, #FBF2E3);
  color: var(--tinta);
  backface-visibility: hidden;
}

/* El papel se oscurece hacia el pliegue, y cada página lleva ese tostado por
   el lado que da al lomo: la izquierda por la derecha y la derecha por la
   izquierda. Va en la propia página y no en el libro a propósito, porque las
   caras de la hoja que gira son páginas también —la cara es una página derecha
   y el dorso una izquierda— y así el lomo viaja con el papel en vez de quedarse
   pintado en el sitio. */
.libro__hueco--der .pagina,
.giro__cara .pagina {
  background-image:
    linear-gradient(90deg, rgba(169, 144, 124, .20), transparent 16%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #FFFCF6, #FBF2E3);
}
.libro__hueco--izq .pagina,
.giro__dorso .pagina {
  background-image:
    linear-gradient(270deg, rgba(169, 144, 124, .20), transparent 16%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #FFFCF6, #FBF2E3);
}

.pagina--vacia { background: linear-gradient(180deg, #FDF7EC, #F7EDDC); }

/* El folio cierra la página por abajo: el aire que sobra al final se lee
   entonces como margen y no como un corte. Va fuera del flujo para que no le
   quite sitio a los platos —el hueco lo reserva el relleno de la página. */
.pagina__folio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--p-pad) * .48);
  text-align: center;
  font-family: var(--display);
  font-size: var(--p-sm);
  font-variant-numeric: tabular-nums;
  color: var(--arena);
}

/* La copia con la que se mide: fuera de la vista, con el ancho y la escala de
   una página de verdad y las mismas tipografías. El alto lo pone el contenido
   —es justo lo que se quiere saber—, así que aquí `inset` va antes que `left`
   y `top`: al revés los anularía. */
.pagina--probeta {
  position: absolute;
  inset: auto;
  left: 0;
  top: 0;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
  background: none;
}

/* --- Portada y cierre ---------------------------------------------------- */
.pagina--portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--esc));
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(240, 144, 30, .12), transparent 62%),
    linear-gradient(180deg, #FFFCF6, #F6E9D4);
}
.portada__marca {
  width: calc(96px * var(--esc));
  height: auto;
  margin-bottom: calc(6px * var(--esc));
}
.portada__kicker {
  font-family: var(--sans);
  font-size: var(--p-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arena);
}
.portada__titulo {
  font-family: var(--display);
  font-size: calc(var(--p-xl) * 1.5);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--rojo-osc);
}
.portada__pie {
  font-family: var(--script);
  font-size: calc(var(--p-lg) * 1.05);
  line-height: 1.25;
  color: var(--tinta-2);
}

.pagina--cierre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(18px * var(--esc));
}
.cierre__foto {
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(14px * var(--esc));
  box-shadow: var(--sombra-m);
}
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; }
.cierre__pie {
  text-align: center;
  font-family: var(--script);
  font-size: var(--p-lg);
  line-height: 1.3;
  color: var(--tinta-2);
}

/* --- La hoja que gira ----------------------------------------------------
   Va en 3D de verdad (preserve-3d) para que la perspectiva del contenedor
   alcance a todas las tiras; por eso nada de opacidad ni de filtros aquí
   dentro salvo en los velos, que son las hojas del árbol: en cualquier punto
   intermedio aplanarían el volumen. */
.giro {
  position: absolute;
  top: 0;
  left: var(--pw);
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 6;
}
.libro--suelto .giro { left: 0; }

.giro__tira {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
}

/* Cada cara es una ventana con la página entera corrida por debajo, para que
   asome justo la franja que le toca. Entre tiras se pisan un pelo para que la
   curva no enseñe las juntas. */
.giro__cara,
.giro__dorso {
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;          /* las tiras se pisan un pelo: sin él, la curva enseña las juntas */
  bottom: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.giro__dorso { transform: rotateY(180deg); }

.giro__lienzo {
  position: absolute;
  top: 0;
  height: var(--ph);
}

/* --- La luz de la hoja ---------------------------------------------------
   **Dos velos por cara, no uno.** Uno pegado al lomo y otro al canto, cada uno
   desvaneciéndose hacia el contrario, y el JS le pone a cada uno la luz que le
   toca a *su borde*. Así el valor con el que termina una tira es exactamente
   el que estrena la siguiente y la sombra sale continua de punta a punta.

   Con un solo velo por tira —un valor plano para toda su anchura— cada junta
   era un escalón de luz, y las seis juntas seguidas se leían como arrugas
   verticales: la hoja parecía un acordeón. */
.giro__velo {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* En la cara, el lomo queda a la izquierda y el canto a la derecha */
.giro__cara  > .giro__velo--dentro { background: linear-gradient(to right, rgb(42, 29, 24), rgba(42, 29, 24, 0)); }
.giro__cara  > .giro__velo--fuera  { background: linear-gradient(to left,  rgb(42, 29, 24), rgba(42, 29, 24, 0)); }
/* El dorso va volteado: lo que allí se escribe a la izquierda sale a la
   derecha, así que los dos degradados van al revés. */
.giro__dorso > .giro__velo--dentro { background: linear-gradient(to left,  rgb(42, 29, 24), rgba(42, 29, 24, 0)); }
.giro__dorso > .giro__velo--fuera  { background: linear-gradient(to right, rgb(42, 29, 24), rgba(42, 29, 24, 0)); }

/* Mientras pasa una hoja, las páginas quietas no responden al ratón: el hover
   de un precio a medio tapar delata que debajo hay otra cosa. */
.escena--girando .pagina { pointer-events: none; }

/* --- Pasapáginas --------------------------------------------------------- */
.carta__paso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: clamp(1.1rem, .8rem + .9vw, 1.7rem);
}
.carta__flecha {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--linea);
  border-radius: 99px;
  color: var(--tinta);
  transition: background var(--d-rapido) var(--ease),
              color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease),
              transform var(--d-rapido) var(--ease-suave),
              opacity var(--d-rapido) var(--ease);
}
.carta__flecha svg { width: 17px; height: 17px; }
.carta__flecha:hover:not(:disabled) {
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  border-color: transparent;
  color: var(--crema);
}
.carta__flecha[data-paso="-1"]:hover:not(:disabled) { transform: translateX(-3px); }
.carta__flecha[data-paso="1"]:hover:not(:disabled)  { transform: translateX(3px); }
.carta__flecha:disabled { opacity: .28; cursor: default; }

.carta__folio {
  min-width: 17ch;
  text-align: center;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* --- Lo que va impreso en la página -------------------------------------- */
.carta__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(8px * var(--esc));
  padding-bottom: calc(11px * var(--esc));
  margin-bottom: calc(15px * var(--esc));
  border-bottom: 1.5px solid var(--linea);
}
.carta__encabezado h3 {
  font-size: var(--p-xl);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.carta__encabezado span {
  font-family: var(--script);
  font-size: calc(var(--p-lg) * .95);
  line-height: 1.1;
  color: var(--arena);
}

/* La primera cabecera de la página abre; las de las categorías que entran
   después necesitan aire por arriba. */
.pagina > .carta__encabezado:not(:first-child) { margin-top: calc(26px * var(--esc)); }

/* La cabecera repetida cuando una categoría parte de página: la misma, más
   callada, para que se vea que es la de antes y no una nueva. */
.carta__encabezado--sigue {
  padding-bottom: calc(8px * var(--esc));
  margin-bottom: calc(11px * var(--esc));
  border-bottom-width: 1px;
  border-bottom-style: dashed;
}
.carta__encabezado--sigue h3 { font-size: var(--p-lg); color: var(--tinta-2); }
.carta__encabezado--sigue span { font-size: calc(var(--p-base) * 1.1); }

/* La nota de una categoría —hoy sólo el bar, que va únicamente en la sede sur.
   Ocupa la fila entera (`flex-basis: 100%`) debajo del título y el kicker, que
   van uno a cada lado; sin eso se metería como una tercera columna del flex y
   partiría la cabecera. Va en rojo de marca y en versalitas: es una condición
   de servicio, no un adorno, y tiene que leerse antes que los precios. */
.carta__nota {
  flex: 1 0 100%;
  margin-top: calc(6px * var(--esc));
  font-family: var(--sans);
  font-size: calc(var(--p-xs) * 1.05);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.35;
  color: var(--rojo);
}
/* En la cabecera repetida se dice más corto y más bajito: ya se leyó entera
   en la primera hoja de la categoría, aquí sólo hace de recordatorio. */
.carta__encabezado--sigue .carta__nota {
  margin-top: calc(3px * var(--esc));
  font-weight: 500;
  opacity: .8;
}

.linea-plato {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(4px * var(--esc)) calc(10px * var(--esc));
  align-items: baseline;
  padding-block: calc(11px * var(--esc));
  border-bottom: 1px dashed var(--linea-sutil);
  transition: background var(--d-rapido) var(--ease);
}
.linea-plato:hover { background: linear-gradient(90deg, rgba(253, 244, 231, .9), transparent); }
.linea-plato__nombre {
  font-family: var(--display);
  font-size: var(--p-base);
  font-weight: 600;
  letter-spacing: -.014em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(6px * var(--esc));
}
.linea-plato__extra {
  font-family: var(--sans);
  font-size: var(--p-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--arena);
  padding: .18em .6em;
  border-radius: 99px;
}
/* --- La tira de la categoría --------------------------------------------
   La foto que abre un grupo, cortada en diagonal por abajo. Es la tira de la
   carta impresa —donde las fotos van en bandas inclinadas— traída a la hoja
   con el mismo ángulo del motivo del sitio.

   El corte va con `clip-path`, que no cambia la caja: el bloque mide lo mismo
   con foto y sin ella, y el reparto de hojas se calcula bien aunque la imagen
   todavía no haya llegado. Por eso también el alto va en el CSS.

   `aria-hidden` en la imagen y `alt` vacío: la cabecera ya dice de qué grupo
   es, y un lector de pantalla no gana nada oyendo «foto de Entradas» detrás
   del título «Entradas». */
.carta__foto {
  /* La cabecera es un flex, no una rejilla: la tira ocupa su propio renglón
     con la base al 100%, igual que hace la nota del grupo. */
  flex: 0 0 100%;
  margin: calc(11px * var(--esc)) 0 calc(3px * var(--esc));
  height: calc(94px * var(--esc));
  overflow: hidden;
  border-radius: calc(7px * var(--esc));
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  background: var(--crema-2);
}
.carta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- La portadilla de un grupo -------------------------------------------
   La hoja en la que sólo cupo la cabecera. En vez de media hoja en blanco, la
   foto del grupo crece y la hoja se vuelve la que abre la sección.

   El alto sale de `--ph`, el de la hoja, que el JS ya fijó antes de repartir:
   la foto crece sin que nada mida distinto. Y se le quita la raya de abajo al
   encabezado, que ahí ya no separa de nada. */
.pagina--portadilla .carta__encabezado {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.pagina--portadilla .carta__foto {
  height: calc(var(--ph, 600px) * .55);
  margin-top: calc(18px * var(--esc));
  border-radius: calc(10px * var(--esc));
}

/* La invitación a seguir. Sólo en la portadilla: en una hoja con platos
   debajo, una flecha que dice «desliza» apuntaría a lo que ya se está
   leyendo. Acá no hay nada más en la hoja, y sin ella la portadilla parece
   el final de algo. */
/* `.carta__encabezado .carta__sigue` y no `.carta__sigue` a secas: el bloque de
   pantalla angosta trae un `.carta__encabezado span { display: block }` —para
   que el gancho baje de renglón— que le gana en especificidad a una sola clase.
   Con la flecha visible en TODAS las cabeceras, y su SVG sin medida propia
   ocupando los 300×150 de reserva del navegador, la cabecera medía 502 px en
   vez de 175: no cabía con ningún plato y cada categoría abría con una
   portadilla que nadie pidió. */
.carta__encabezado .carta__sigue { display: none; }
.pagina--portadilla .carta__encabezado .carta__sigue {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7px * var(--esc));
  margin-top: calc(16px * var(--esc));
  font-family: var(--sans);
  font-size: var(--p-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--arena);
}
.carta__sigue svg {
  width:  calc(17px * var(--esc));
  height: calc(17px * var(--esc));
  flex: none;
}
.pagina--portadilla .carta__sigue svg {
  animation: sigue-flecha 1.9s var(--ease-io) infinite;
}
@keyframes sigue-flecha {
  0%, 100% { transform: translateX(-2px); opacity: .55; }
  50%      { transform: translateX(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .carta__sigue svg { animation: none; opacity: 1; }
}
.pagina--portadilla .carta__nota { margin-bottom: calc(2px * var(--esc)); }

/* --- La foto del plato ---------------------------------------------------
   Una foto pequeña, cuadrada y ladeada: puesta sobre la hoja como se pone una
   foto impresa, no incrustada como la fila de una app de domicilios. El ángulo
   es la mitad de la diagonal del sitio (`--diag: 4.6deg`), que es el motivo
   que recorre la marca entera.

   El tamaño va en píxeles por `--esc`, como toda la tipografía del libro: así
   la foto crece con la página y el bloque mide lo mismo antes y después de que
   la imagen cargue. Que sea `transform` y no un ancho torcido importa: una
   rotación no cambia la caja, así que el reparto de hojas no se entera.

   Las imágenes que guarda el panel son cuadradas —`fit: cover` a 400 y 1200
   px—, por eso el hueco es un cuadrado y la foto nunca se deforma. */
.linea-plato--foto {
  grid-template-columns: auto 1fr auto;
  column-gap: calc(13px * var(--esc));
}
.linea-plato__f {
  position: relative;
  display: block;
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  width:  calc(62px * var(--esc));
  height: calc(62px * var(--esc));
  border-radius: calc(8px * var(--esc));
  border: calc(2.5px * var(--esc)) solid #FFFDF8;
  box-shadow: 0 calc(2px * var(--esc)) calc(9px * var(--esc)) rgba(42, 29, 24, .26);
  transform: rotate(calc(var(--diag) * -.5));
  transition: transform var(--d-rapido) var(--ease);
  background: var(--crema-2);
}
.linea-plato__f img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* La lupa: la pista de que el plato se toca. En la esquina y pequeña —es una
   pista, no un botón: lo que se toca es la ficha entera—. Se sale un poco de
   la foto a propósito, para que se lea como una pegatina encima y no como
   parte del plato. */
.linea-plato__lupa {
  position: absolute;
  right:  calc(-5px * var(--esc));
  bottom: calc(-5px * var(--esc));
  width:  calc(21px * var(--esc));
  height: calc(21px * var(--esc));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  color: var(--crema);
  box-shadow: 0 calc(1px * var(--esc)) calc(5px * var(--esc)) rgba(42, 29, 24, .45);
}
.linea-plato__lupa svg { width: 62%; height: 62%; }

/* Al pasar el cursor la foto se endereza, como si se levantara de la hoja. */
.linea-plato:hover .linea-plato__f { transform: rotate(0deg) scale(1.06); }
.linea-plato--foto .linea-plato__desc { grid-column: 2 / -1; }
.linea-plato--hoy-no .linea-plato__f { filter: grayscale(.85); opacity: .5; }

/* La ficha que se abre. El foco visible no es un adorno: la ficha es
   `role="button"` y se llega a ella tabulando. */
.linea-plato--abre { cursor: pointer; }
.linea-plato--abre:focus-visible {
  outline: 2.5px solid var(--rojo);
  outline-offset: calc(3px * var(--esc));
  border-radius: calc(6px * var(--esc));
}
.linea-plato--abre:active .linea-plato__f { transform: rotate(0deg) scale(.96); }

/* En la hoja que gira no hay hover ni transición que valga: el papel ya se
   está moviendo. */
.giro .linea-plato__f { transition: none; }

.linea-plato__desc {
  grid-column: 1 / -1;
  font-size: var(--p-sm);
  color: var(--tinta-2);
  line-height: 1.5;
  max-width: 52ch;
}

/* --- Lo que trae un kit de decoración ------------------------------------
   Renglón por renglón, como en el volante: la ficha de un kit es una lista, no
   un párrafo. Misma letra que la descripción, y es solo texto —nada que cargue
   después—, así que `medir()` la cuenta bien desde el principio. Con foto, la
   lista va bajo el nombre y no bajo la foto, igual que la descripción. */
.linea-plato__incluye {
  grid-column: 1 / -1;
  margin: calc(2px * var(--esc)) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--p-sm);
  color: var(--tinta-2);
  line-height: 1.45;
  max-width: 52ch;
}
.linea-plato__incluye li {
  position: relative;
  padding-left: 1.05em;
}
.linea-plato__incluye li::before {
  content: '';
  position: absolute;
  left: .18em;
  top: .6em;
  width: .34em;
  height: .34em;
  border-radius: 50%;
  background: var(--rojo);
  opacity: .7;
}
.linea-plato__notas {
  grid-column: 1 / -1;
  font-size: var(--p-xs);
  color: var(--tinta-2);
  line-height: 1.45;
  max-width: 52ch;
  opacity: .85;
}
.linea-plato--foto .linea-plato__incluye,
.linea-plato--foto .linea-plato__notas { grid-column: 2 / -1; }

/* Los avisos que cierran la sección —traer la decoración propia, que las fotos
   son de referencia— no tienen precio: el nombre es un rótulo y el texto se lee
   entero. */
.linea-plato--aviso .linea-plato__nombre {
  font-size: var(--p-sm);
  color: var(--rojo-osc);
}

/* --- El precio de la carta ------------------------------------------------
   Es lo que la gente viene a mirar, así que aquí no es la pastilla apagada del
   resto de la página: papel crema con filo rojo, la cifra en la tipografía de
   los títulos y un brillo que la cruza una sola vez al posarse la hoja. La
   pastilla de las otras secciones (portada, promos, destacados) no se toca. */
.precio--carta {
  padding: .34em .95em;
  background: linear-gradient(150deg, #FFFDF8, var(--crema-2));
  color: var(--rojo-osc);
  font-family: var(--display);
  font-size: var(--p-base);
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1px solid rgba(176, 30, 36, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
              0 3px 10px -6px rgba(42, 29, 24, .5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-rapido) var(--ease),
              border-color var(--d-rapido) var(--ease),
              transform var(--d-rapido) var(--ease-suave),
              box-shadow var(--d-rapido) var(--ease);
}

/* El fondo rojo del hover vive en una capa aparte: así entra por opacidad sin
   arrastrar el degradado del papel ni el brillo. */
.precio--carta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
  opacity: 0;
  transition: opacity var(--d-rapido) var(--ease);
}
.linea-plato:hover .precio--carta {
  color: var(--crema);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(176, 30, 36, .75);
}
.linea-plato:hover .precio--carta::before { opacity: 1; }

/* El destello: una franja de luz que cruza la pastilla. Va en ::after para que
   el `overflow: hidden` de la pastilla la recorte y no se salga por los lados. */
.precio--carta::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent);
  transform: translateX(-260%) rotate(8deg);
  opacity: 0;
}

/* Al posarse la hoja, un brillo recorre los precios escalonados —`--n` es el
   sitio del plato en su página, lo pone el JS—. Sólo el brillo: el precio no
   aparece ni desaparece, siempre está puesto. Tope a los catorce para que el
   último no llegue tarde. */
@keyframes precio-brillo {
  from { opacity: 0; transform: translateX(-260%) rotate(8deg); }
  25%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(360%) rotate(8deg); }
}
.pagina.entrando .precio--carta::after {
  animation: precio-brillo .85s var(--ease-io) backwards;
  animation-delay: calc(min(var(--n, 0), 14) * 34ms);
}

/* En la hoja que gira no: ahí el papel ya está pasando y el brillo se pisaría
   con el movimiento. Los precios de la hoja van quietos. */
.giro .precio--carta::after { animation: none; }
.giro .linea-plato { transition: none; }

/* --- «Premios»: la misma pastilla, en puntos ---------------------------------
   La última sección del libro. La cifra va igual que un precio —es lo que se
   viene a mirar— y la palabra, pequeña y en versalitas como la letra pequeña
   del plato. Todo en `--esc`: el libro lo mide antes de repartir, y un tamaño
   que no escalara con la hoja mediría una cosa y pintaría otra. */
.precio--puntos { white-space: nowrap; }
.precio__pts {
  font-family: var(--sans);
  font-size: var(--p-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: .15em;
}

/* --------------------------------------------------------------------------
   EL VISOR — las fotos del plato
   --------------------------------------------------------------------------
   Cuelga del `<body>`, así que acá no hay nada del libro: ni `--esc`, ni
   `--pw`, ni la perspectiva de la hoja. Todo en `rem` y en viewport, que es lo
   que hay fuera.

   Varias fotos se pasan deslizando con `scroll-snap`: lo hace el navegador, es
   el gesto que la gente ya trae aprendido y no hay un carrusel que mantener.
   -------------------------------------------------------------------------- */
.spc-visor {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(.8rem, .4rem + 2vw, 2.4rem);
  background: rgba(16, 11, 9, .93);
  backdrop-filter: blur(4px);
  animation: visor-entra .26s var(--ease) both;
  overscroll-behavior: contain;
}
@keyframes visor-entra { from { opacity: 0 } to { opacity: 1 } }
.spc-visor--fuera { opacity: 0; transition: opacity .25s var(--ease); }

.spc-visor__x {
  position: absolute;
  top: clamp(.7rem, .4rem + 1.4vw, 1.6rem);
  right: clamp(.7rem, .4rem + 1.4vw, 1.6rem);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--crema);
  background: rgba(255, 255, 255, .12);
}
.spc-visor__x svg { width: 1.15rem; height: 1.15rem; }
.spc-visor__x:hover { background: rgba(255, 255, 255, .2); }

.spc-visor__caja {
  width: min(100%, 46rem);
  margin: 0 auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* El marco sólo existe para que las flechas se centren en la FOTO y no en la
   caja entera, que lleva debajo el nombre y el precio. */
.spc-visor__marco { position: relative; }

.spc-visor__ir {
  position: absolute;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -1.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--crema);
  background: rgba(16, 11, 9, .55);
  backdrop-filter: blur(4px);
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.spc-visor__ir[data-paso="-1"] { left: .6rem; }
.spc-visor__ir[data-paso="1"]  { right: .6rem; }
.spc-visor__ir[data-paso="-1"] svg { transform: scaleX(-1); }
.spc-visor__ir svg { width: 1.15rem; height: 1.15rem; }
.spc-visor__ir:hover:not(:disabled) { background: rgba(16, 11, 9, .8); }
.spc-visor__ir:disabled { opacity: 0; pointer-events: none; }

.spc-visor__tira {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
}
.spc-visor__tira::-webkit-scrollbar { display: none; }
.spc-visor__tira figure {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.spc-visor__tira img {
  display: block;
  width: 100%;
  /* Alto acotado por la pantalla: una foto vertical no puede empujar el pie
     fuera de la vista, que es donde está el precio. */
  max-height: min(62vh, 34rem);
  object-fit: contain;
  margin: 0 auto;
}

.spc-visor__puntos { display: flex; justify-content: center; gap: .4rem; }
.spc-visor__puntos i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.spc-visor__puntos i.es { background: var(--crema); transform: scale(1.25); }

.spc-visor__pie { color: var(--crema); text-align: center; }
.spc-visor__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
}
.spc-visor__pie h3 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.spc-visor__pie p {
  margin-top: .5rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--crema-3);
  max-width: 44ch;
  margin-inline: auto;
}
.spc-visor__extra {
  display: inline-block;
  margin-top: .5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crema);
  background: rgba(255, 255, 255, .16);
  padding: .22em .7em;
  border-radius: 99px;
}
.spc-visor__extra--no { background: var(--rojo); }

/* --------------------------------------------------------------------------
   «Desliza para pasar la hoja»
   --------------------------------------------------------------------------
   La enciende `suelta.js` y sólo sale en la carta suelta: en el sitio la carta
   vive dentro de una página que ya se está leyendo. Va por encima del libro,
   sin recibir clics —`pointer-events: none`— para no robarle el primer gesto
   justo al que la está leyendo.
   -------------------------------------------------------------------------- */
.spc-pista {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ph, 600px) * .06);
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.1rem .62rem .9rem;
  border-radius: 99px;
  background: rgba(22, 16, 13, .82);
  color: var(--crema);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(42, 29, 24, .7);
  backdrop-filter: blur(6px);
  pointer-events: none;
  animation: pista-entra .5s var(--ease) both;
}
.spc-pista__mano { display: block; width: 22px; height: 22px; flex: none; }
.spc-pista__mano svg { width: 100%; height: 100%; }

/* La mano hace el gesto que se pide: cruza de derecha a izquierda y vuelve.
   Es la única manera de que «desliza» se entienda sin leerlo. */
@keyframes pista-mano {
  0%, 12%  { transform: translateX(5px) rotate(6deg); }
  46%      { transform: translateX(-5px) rotate(-6deg); }
  80%, 100%{ transform: translateX(5px) rotate(6deg); }
}
.spc-pista__mano svg { animation: pista-mano 1.9s var(--ease-io) infinite; }

@keyframes pista-entra {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.spc-pista--fuera {
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* Con «menos movimiento» la pista se queda quieta, pero se queda: es una
   instrucción, no un adorno. */
@media (prefers-reduced-motion: reduce) {
  .spc-pista, .spc-pista__mano svg { animation: none; }
}

/* --------------------------------------------------------------------------
   Cargando y roto — nunca una carta inventada
   --------------------------------------------------------------------------
   Esto lo abre gente desde Google Maps creyendo que ve el precio real. Si la
   API no contesta, la página lo dice y no pinta nada: una carta de respaldo es
   exactamente el error que sirvió precios viejos durante meses.
   -------------------------------------------------------------------------- */
.carta__aviso {
  max-width: 34rem;
  margin: clamp(2rem, 1rem + 4vw, 4rem) auto;
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  border-radius: var(--radio-s);
  background: linear-gradient(180deg, #FFFCF6, #FBF2E3);
  box-shadow: var(--sombra-s);
  text-align: center;
}
.carta__aviso h3 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  margin-bottom: .5rem;
}
.carta__aviso p { color: var(--tinta-2); font-size: var(--t-sm); }
.carta__aviso button {
  margin-top: 1.1rem;
  padding: .7em 1.5em;
  border-radius: 99px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--crema);
  background: linear-gradient(140deg, var(--rojo), var(--rojo-osc));
}
/* Mientras carga, el sitio del libro se guarda: sin esto la página da un
   salto de medio metro cuando llegan los platos. */
.carta__aviso--cargando { opacity: .75; }

/* --------------------------------------------------------------------------
   «Hoy no hay» — el agotado, que en la carta impresa no existe
   --------------------------------------------------------------------------
   En el sitio esto lo pinta `js/carta-viva.js`: mete «Hoy no hay» en el campo
   `extra` —que el libro ya sabe pintar como pastilla— y tiñe la línea con
   clases que NO cambian el tamaño de ninguna caja. Acá el dato llega de la API
   con el plato, así que basta la tinta; pero la disciplina es la misma y por el
   mismo motivo: cambiar el alto de una línea después de medir haría repaginar
   el libro entero.
   -------------------------------------------------------------------------- */
.linea-plato--hoy-no .linea-plato__nombre {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(176, 30, 36, .7);
  opacity: .55;
}
.linea-plato--hoy-no .linea-plato__desc { opacity: .45; }
.linea-plato--hoy-no .precio--carta { opacity: .5; filter: grayscale(.7); }
.linea-plato--hoy-no .linea-plato__extra {
  background: rgba(176, 30, 36, .12);
  color: var(--rojo);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Adaptación — las mismas reglas de la sección 21 del sitio que tocan al libro
   --------------------------------------------------------------------------
   Con la página estrecha la cabecera en línea no entra —el «Para abrir el
   apetito» se salía por el borde—, así que el gancho baja a su propio renglón.
   Los tamaños siguen saliendo de `--esc`: acá sólo cambia la disposición,
   nunca la escala, o el libro dejaría de medir lo que el JS creyó que medía al
   repartir los platos.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .carta__encabezado {
    display: block;
    padding-bottom: calc(8px * var(--esc));
    margin-bottom: calc(12px * var(--esc));
  }
  .carta__encabezado span {
    display: block;
    margin-top: calc(1px * var(--esc));
  }
  .pagina > .carta__encabezado:not(:first-child) { margin-top: calc(21px * var(--esc)); }

  .linea-plato__extra { letter-spacing: .06em; }
  .carta__paso { gap: .8rem; }
  .libro { padding: 0 8px; }
}


@media (max-width: 620px) {
  :root { --nav-h: 46px; }
}