/* ══════════════════════════════════════════════════════════════════════════
   catalogo.css · la página que ve el cliente: la revista, a toda pantalla

   Los colores salen de `tokens.css`. Ninguno suelto acá.

   ESTA SUPERFICIE NO ES LA APP EN USO. La app la maneja un cajero con la cola
   encima y ahí manda la velocidad. Esto lo mira alguien parado en la vereda
   con el celular, decidiendo si entra. Tiene que verse bien.

   Pero sigue siendo una página que carga con mala conexión: la revista se
   dibuja con el texto y las fotos van cayendo después (`js/catalogo.js`).

   ── LA REVISTA (Canu, 12/09 13:2x) ──────────────────────────────────────
   Ocupa toda la pantalla: la página no hace scroll, la cabeza y el pie son
   un renglón cada uno y lo que queda es el libro. Cada cara mide lo que le
   pone `js/revista.js` (`--revista-cara-ancho` y `--revista-cara-alto`,
   medidos sobre la escena). El libro tiene dos caras de ancho; cerrado
   --en la tapa o en la contratapa-- se corre media cara para que lo que
   se ve quede al medio.

   EL GIRO. La hoja que gira (`.revista-hoja-girando`) es un papel de dos
   caras apoyado sobre el lado que se va: el frente mira al cliente y el
   dorso está dado vuelta (`rotateY(180deg)`), cada uno sin cara de atrás
   (`backface-visibility: hidden`). Gira 180° sobre el lomo y el dorso
   aparece del otro lado, encima de lo que ya esperaba debajo. La
   perspectiva vive en el libro, que es lo que ve la hoja como padre.

   Las caras en sí (la tapa, el índice, la grilla…) están en
   `css/revista-caras.css`.
   ══════════════════════════════════════════════════════════════════════════ */

.catalogo-cuerpo {
  margin: 0;
  height: 100dvh;
  /* Con la cinta del demo el cuerpo se corre 22px (`js/sello-demo.js`):
     el alto la incluye y no aparece scroll. */
  box-sizing: border-box;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra, system-ui, -apple-system, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  /* Que la hoja no se vaya con un dedo que quiso pasar la hoja. */
  overscroll-behavior: none;
}

.catalogo {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* Lo que dura el giro; `js/revista.js` espera un poco más. */
  --revista-giro: 700ms;
  --revista-curva: cubic-bezier(.42, .04, .3, 1);
}

/* ── LA CABEZA: ya no es un renglón ────────────────────────────────────────
   Canu, 14/09 (captura 2): la revista ocupa la pantalla completa y del
   fondo no se ve nada; los botones pueden flotar, el fondo no. Entonces la
   marca y el nombre del local (que ya están en la tapa y en el índice)
   quedan sólo para el lector de pantalla, y lo que elige quien mira flota
   abajo a la derecha, sobre la hoja. */
.catalogo-cabeza { display: contents; }

.catalogo-marca,
.catalogo-local {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lo que elige quien mira: dos interruptores de texto, que dicen su estado
   en la palabra y no en un ícono. Flotan sobre la hoja, abajo a la derecha,
   lejos de las solapas. */
.catalogo-gustos {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  z-index: 6;
  display: flex;
  gap: var(--e-2);
}
.catalogo-gusto {
  min-height: 30px;
  padding: 0 var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: color-mix(in oklch, var(--fondo) 80%, transparent);
  backdrop-filter: blur(6px);
  color: var(--texto-3);
  font: inherit;
  font-size: var(--txt-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--rapido), color var(--rapido);
}
.catalogo-gusto:hover { border-color: var(--acento); color: var(--texto); }
.catalogo-gusto:focus-visible { outline: none; box-shadow: var(--foco); }
.catalogo-gusto[aria-pressed="true"] { color: var(--acento-texto); border-color: var(--borde-acento); }

/* Arranca oculto y lo muestra el JS sólo si hay algo que decir. */
.catalogo-aviso {
  margin: var(--e-6) 0 0;
  font-size: var(--txt-base);
  color: var(--texto-2);
}
.catalogo-aviso[hidden] { display: none; }

/* ── EL LIBRO ─────────────────────────────────────────────────────────── */
.revista {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  /* Por si la escena todavía no se midió (una pestaña escondida mide 0). */
  --revista-cara-ancho: 300px;
  --revista-cara-alto: 420px;
}
.revista[hidden] { display: none; }

.revista-escena {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
}

.revista-libro {
  position: relative;
  flex: none;
  width: calc(var(--revista-cara-ancho) * 2);
  height: var(--revista-cara-alto);
  perspective: 2600px;
  transition: transform var(--revista-giro) var(--revista-curva);
}
.revista-libro-una { width: var(--revista-cara-ancho); }
/* Cerrado: se corre para que la única cara a la vista quede al medio. */
.revista-cerrado-adelante { transform: translateX(calc(var(--revista-cara-ancho) / -2)); }
.revista-cerrado-atras    { transform: translateX(calc(var(--revista-cara-ancho) / 2)); }

/* Los dos lugares fijos: la cara de la izquierda y la de la derecha. */
.revista-lugar {
  position: absolute;
  top: 0;
  width: var(--revista-cara-ancho);
  height: 100%;
}
.revista-lugar-izq { left: 0; }
.revista-lugar-der { left: var(--revista-cara-ancho); }
.revista-libro-una .revista-lugar-der { left: 0; }

/* Una cara: el papel. De borde a borde de la pantalla (14/09): sin
   redondeo ni sombra afuera, que no hay afuera; pegada al lomo del lado de
   adentro, con la sombra del pliegue. */
.revista-cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--e-5) var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0;
  overflow: hidden;
}
.revista-libro-dos .revista-lugar-izq .revista-cara,
.revista-libro-dos .revista-hoja-dorso .revista-cara { border-right: 0; }
.revista-libro-dos .revista-lugar-der .revista-cara,
.revista-libro-dos .revista-hoja-frente .revista-cara { border-left: 0; }
/* La sombra del lomo, sobre las caras fijas: más honda cerca del pliegue. */
.revista-libro-dos .revista-lugar-izq .revista-cara::before,
.revista-libro-dos .revista-lugar-der .revista-cara::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  pointer-events: none;
  z-index: 1;
}
.revista-libro-dos .revista-lugar-izq .revista-cara::before {
  right: 0;
  background: linear-gradient(to left, rgb(0 0 0 / .28), transparent);
}
.revista-libro-dos .revista-lugar-der .revista-cara::before {
  left: 0;
  background: linear-gradient(to right, rgb(0 0 0 / .28), transparent);
}
/* La tapa cerrada es un solo papel: sin lomo. */
/* Cerrada, la tapa (o la contratapa) es un objeto sobre la mesa: con sus
   bordes redondeados y su sombra. Abierta, las hojas son la pantalla. */
.revista-cerrado-adelante .revista-lugar-der .revista-cara,
.revista-cerrado-atras .revista-lugar-izq .revista-cara { border-width: 1px; border-radius: var(--radio-lg); box-shadow: var(--sombra-3); }
.revista-cerrado-adelante .revista-lugar-der .revista-cara::before,
.revista-cerrado-atras .revista-lugar-izq .revista-cara::before { display: none; }

/* ── LA HOJA QUE GIRA ─────────────────────────────────────────────────── */
.revista-hoja-girando {
  position: absolute;
  top: 0;
  width: var(--revista-cara-ancho);
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--revista-giro) var(--revista-curva);
  z-index: 3;
  pointer-events: none;
}
.revista-hoja-frente,
.revista-hoja-dorso {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.revista-hoja-dorso { transform: rotateY(180deg); }
/* Mientras gira, el papel se oscurece del lado del lomo (se levanta). */
.revista-hoja-frente::after,
.revista-hoja-dorso::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--revista-giro) ease-in;
}
.revista-hoja-frente::after { background: linear-gradient(to right, rgb(0 0 0 / .45), transparent 55%); }
.revista-hoja-dorso::after  { background: linear-gradient(to left,  rgb(0 0 0 / .45), transparent 55%); }
.revista-gira .revista-hoja-frente::after,
.revista-gira .revista-hoja-dorso::after { opacity: 1; }

/* La de la derecha gira sobre el lomo (su borde izquierdo) hacia la
   izquierda, viniendo hacia quien mira. */
.revista-hoja-der { left: var(--revista-cara-ancho); transform-origin: left center; }
.revista-hoja-der.revista-gira { transform: rotateY(-180deg); }
/* La de la izquierda, al revés. */
.revista-hoja-izq { left: 0; transform-origin: right center; }
.revista-hoja-izq.revista-gira { transform: rotateY(180deg); }
/* Con una sola cara, la hoja gira sobre el borde izquierdo alejándose, y
   lo que pasa del borde se corta: el libro es sólo esa cara. */
.revista-libro-una { overflow: hidden; }
.revista-hoja-una { left: 0; transform-origin: left center; }
.revista-hoja-una.revista-gira,
.revista-hoja-una.revista-vuelve { transform: rotateY(180deg); }
.revista-hoja-una.revista-vuelve { transition: none; }
/* El dorso vacío de esa hoja: papel. */
.revista-hoja-una .revista-hoja-dorso { background: var(--superficie-alta); border-radius: var(--radio-lg); }

@media (prefers-reduced-motion: reduce) {
  .revista-libro, .revista-hoja-girando { transition: none; }
}

/* ── LOS BORDES QUE PASAN LA HOJA ─────────────────────────────────────────
   Altos como el libro, angostos, con la flecha apagada hasta que se pasa el
   mouse. En el celular el dedo desliza y el borde queda como pista. */
/* Las flechas flotan abajo a la izquierda, con «página tal de tantas»: el
   borde derecho es de las solapas, y tocar la hoja o deslizar sigue siendo
   la forma principal de pasar. */
.revista-margen {
  position: absolute;
  bottom: var(--e-3);
  z-index: 6;
  width: 2.2rem;
  height: 30px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: color-mix(in oklch, var(--fondo) 80%, transparent);
  backdrop-filter: blur(6px);
  color: var(--texto-2);
  font-family: var(--letra-titulo);
  font-size: var(--txt-lg);
  line-height: 1;
  cursor: pointer;
  transition: color var(--rapido), border-color var(--rapido);
}
.revista-margen-izq { left: var(--e-3); }
.revista-margen-der { left: calc(var(--e-3) + 2.5rem); }
.revista-margen:hover:not(:disabled) { color: var(--acento); border-color: var(--acento); }
.revista-margen:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio); }
.revista-margen:disabled { opacity: .25; cursor: default; }
@media (max-width: 640px) {
  /* En el celular el dedo desliza: las flechas no hacen falta a la vista. */
  .revista-margen { display: none; }
  /* Los interruptores dejan de flotar sobre la hoja: a 375 tapaban el
     último renglón de cada cara («Tocá para abrir» en la tapa, «Los precios
     pueden cambiar» adentro; medido el 17/09 con Tienda Almendra en
     producción). Pasan a ser un renglón propio, debajo del libro, que se
     achica lo que ellos miden. La píldora «Página 3 de 9» flotaba abajo a
     la izquierda con el mismo problema, y arriba tapa el título del índice:
     en el celular no se muestra, las solapas ya dicen dónde se está. */
  .revista-donde { display: none; }
  .catalogo-gustos {
    position: static;
    order: 9;
    justify-content: flex-end;
    padding: var(--e-2) var(--e-3);
  }
}

/* ── EL PIE: ya no es un renglón ────────────────────────────────────────
   Las solapas van por el borde derecho; «página tal de tantas» flota abajo
   a la izquierda; la nota de los precios ya está en la hoja interior. */
.catalogo-pie { display: contents; }

/* LAS SOLAPAS (161): los marcadores de colores de un cuaderno. Una columna
   pegada al borde derecho, cada una con el color de su categoría y el
   nombre escrito de arriba hacia abajo. La que está a la vista sale entera;
   las otras quedan medio metidas en el borde. */
.revista-indice {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 88%;
  overflow: hidden;
  transform: translateY(-50%);
}
.revista-indice[hidden] { display: none; }
.revista-indice-item {
  --revista-solapa: var(--acento);
  flex: none;
  writing-mode: vertical-rl;
  max-height: 11rem;
  padding: var(--e-3) 5px var(--e-3) 7px;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: var(--revista-solapa);
  color: #fff;
  font: inherit;
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / .35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: -2px 0 6px rgb(0 0 0 / .35);
  cursor: pointer;
  opacity: .78;
  transform: translateX(7px);
  transition: transform var(--rapido), opacity var(--rapido);
}
.revista-indice-item:hover { opacity: 1; transform: translateX(3px); }
.revista-indice-item:focus-visible { outline: none; box-shadow: var(--foco), -2px 0 6px rgb(0 0 0 / .35); }
.revista-indice-actual { opacity: 1; transform: translateX(0); box-shadow: -3px 0 10px rgb(0 0 0 / .45); }

.revista-donde {
  position: absolute;
  left: calc(var(--e-3) + 5.2rem);
  bottom: var(--e-3);
  z-index: 6;
  margin: 0;
  padding: 0 var(--e-3);
  min-height: 30px;
  line-height: 30px;
  border-radius: var(--radio-full);
  background: color-mix(in oklch, var(--fondo) 80%, transparent);
  backdrop-filter: blur(6px);
  font-size: var(--txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
  white-space: nowrap;
}
.revista-donde:empty { display: none; }
.catalogo-pie-nota { display: none; }

/* ── EL DETALLE ───────────────────────────────────────────────────────── */
.revista-detalle {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
  background: rgb(0 0 0 / .72);
  backdrop-filter: blur(6px);
}
.revista-detalle[hidden] { display: none; }
.revista-con-detalle { overflow: hidden; }

.revista-detalle-caja {
  position: relative;
  width: min(100%, 52rem);
  max-height: 100%;
  overflow: auto;
  padding: var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde-acento);
  border-radius: var(--radio-lg);
  box-shadow: 0 24px 60px rgb(0 0 0 / .5);
}
.revista-cerrar {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  width: var(--toque-min);
  height: var(--toque-min);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--superficie-alta);
  color: var(--texto);
  font: inherit;
  font-size: var(--txt-lg);
  cursor: pointer;
  transition: border-color var(--rapido);
}
.revista-cerrar:hover { border-color: var(--acento); }
.revista-cerrar:focus-visible { outline: none; box-shadow: var(--foco); }

.revista-detalle-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--e-6);
  align-items: start;
}
@media (max-width: 640px) {
  .revista-detalle-cuerpo { grid-template-columns: 1fr; }
  .revista-detalle-caja { padding: var(--e-4); }
}

.revista-detalle-foto {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  background: var(--superficie-alta);
  overflow: hidden;
}
.revista-detalle-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El crédito de la foto (179): una línea chica sobre el borde de abajo. */
.revista-detalle-foto { position: relative; }
.revista-detalle-credito {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: var(--e-1) var(--e-2);
  /* La misma pareja que la solapa de arriba (texto claro sobre una superficie
     oscura), con los tokens en vez de un color suelto. */
  background: var(--texto);
  color: var(--fondo);
  opacity: .85;
  font-size: var(--txt-xs);
  line-height: 1.3;
}
.revista-detalle-foto-vacia {
  font-family: var(--letra-titulo);
  font-size: var(--txt-total);
  color: var(--texto-3);
}

.revista-detalle-texto { min-width: 0; padding-right: var(--e-8); }
.revista-detalle-nombre {
  margin: 0 0 var(--e-1);
  font-family: var(--letra-titulo);
  font-size: var(--txt-xl);
  line-height: 1.15;
  font-weight: var(--peso-medio);
}
.revista-detalle-precio {
  margin: 0 0 var(--e-4);
  font-size: var(--txt-lg);
  font-variant-numeric: tabular-nums;
  color: var(--acento-texto);
}

/* ── EL SELECTOR DE COLOR (Canu, 03/10) ───────────────────────────────────
   Una fila de globitos y, abajo, los talles DEL COLOR ELEGIDO. El globito es
   la miniatura de la foto de ese color y no un círculo, porque `color` es
   texto libre y un tercio de los valores cargados no son colores
   (`Dinosaurio`, `Unicornio`, `Floreada`). Los que no tienen foto van con el
   nombre en una pastilla. */
.revista-globos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}
.revista-globo {
  flex: none;
  padding: 0;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  line-height: 0;
  /* El borde del elegido crece hacia adentro: sin esto la fila se mueve 2px
     cada vez que se cambia de color, y el salto se ve más que el cambio. */
  outline-offset: 2px;
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
.revista-globo:hover { border-color: var(--acento-fuerte); }
.revista-globo:focus-visible { outline: none; box-shadow: var(--foco); }
.revista-globo-foto {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: calc(var(--radio-sm) - 1px);
}
/* Sin foto: el nombre en una pastilla, de la misma altura que la miniatura
   para que la fila no quede desparejada. */
.revista-globo-pastilla {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--e-3);
  line-height: 1.2;
}
.revista-globo-texto { font-size: var(--txt-sm); }
/* ELEGIDO: borde de acento Y un anillo. Con sólo el color del borde, quien no
   distingue esos dos tonos no sabe cuál eligió. */
.revista-globo-elegido {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-suave);
}
/* Sin stock en ningún talle de ese color: apagado Y con el borde cortado,
   igual que un talle agotado. El color solo no alcanza. */
.revista-globo-sin { opacity: .55; border-style: dashed; }

.revista-color-talles { display: grid; gap: var(--e-2); }
.revista-color-nombre {
  margin: 0;
  font-weight: var(--peso-medio);
}
.revista-talles { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.revista-talle {
  padding: 2px var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--txt-sm);
  font-variant-numeric: tabular-nums;
}
/* Agotado: tachado ADEMÁS de apagado. Con sólo el color, quien no distingue
   dos grises ve una lista donde están todos. */
.revista-talle-sin {
  border-style: dashed;
  color: var(--texto-3);
  text-decoration: line-through;
}