/* ══════════════════════════════════════════════════════════════════════════
   revista-caras.css · cada página de la revista

   Lo que dibuja `js/revista-caras.js`: la tapa, su interior, el índice,
   la grilla de una categoría, la reseña, el relleno y la contratapa. El
   papel en sí (`.revista-cara`) y cómo se da vuelta viven en
   `css/catalogo.css`.

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

/* El folio: el número de página, en la esquina de afuera. */
.revista-folio {
  position: absolute;
  bottom: var(--e-3);
  font-family: var(--letra-titulo);
  font-size: var(--txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
  z-index: 2;
}
.revista-cara.es-izq .revista-folio { left: var(--e-4); }
.revista-cara.es-der .revista-folio { right: var(--e-4); }

.revista-cara-titulo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: var(--txt-lg);
  font-weight: var(--peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── LA TAPA ──────────────────────────────────────────────────────────────
   Con foto: la foto entera, de borde a borde, y el texto abajo sobre un
   degradé que la oscurece --así se lee sobre cualquier foto--. Sin foto: el
   logo grande sobre el fondo de la marca. */
.revista-tapa {
  justify-content: flex-end;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--acento-suave), transparent 60%),
    var(--superficie);
}
.revista-tapa-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.revista-tapa-logo {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  max-width: 220px;
  aspect-ratio: 1;
  object-fit: contain;
}
.revista-tapa-texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-12) var(--e-6) var(--e-6);
  text-align: center;
}
.revista-tapa-con-foto .revista-tapa-texto {
  background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .55) 55%, transparent 100%);
  color: #faf9f7;
}
.revista-tapa-marca {
  margin: 0;
  font-size: var(--txt-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.revista-tapa-con-foto .revista-tapa-marca { color: var(--acento-brillo); }
.revista-tapa-nombre {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: clamp(1.5rem, 0.8rem + 3vw, 2.8rem);
  line-height: 1.05;
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}
.revista-tapa-subtitulo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-style: italic;
  font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.25rem);
  line-height: 1.3;
  color: var(--texto-2);
}
.revista-tapa-con-foto .revista-tapa-subtitulo { color: rgb(250 249 247 / .85); }
.revista-tapa-domicilio {
  margin: var(--e-1) 0 0;
  font-size: var(--txt-sm);
  letter-spacing: .04em;
  color: var(--texto-3);
}
.revista-tapa-con-foto .revista-tapa-domicilio { color: rgb(250 249 247 / .7); }
.revista-tapa-pista {
  margin: var(--e-4) 0 0;
  font-size: var(--txt-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.revista-tapa-con-foto .revista-tapa-pista { color: rgb(250 249 247 / .6); }

/* ── EL INTERIOR DE LA TAPA ─────────────────────────────────────────────── */
.revista-interior {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-6);
  background: var(--superficie-alta);
}
.revista-interior-logo {
  width: 30%;
  max-width: 160px;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: var(--e-2);
}
.revista-interior-subtitulo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-style: italic;
  font-size: var(--txt-lg);
  line-height: 1.3;
}
.revista-interior-domicilio {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.revista-interior-cuantos {
  margin: var(--e-2) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.revista-interior-pista {
  margin: var(--e-4) 0 0;
  max-width: 22rem;
  font-size: var(--txt-xs);
  line-height: 1.5;
  color: var(--texto-3);
}
.revista-interior-pie {
  position: absolute;
  bottom: var(--e-3);
  left: var(--e-4);
  right: var(--e-4);
  margin: 0;
  font-size: var(--txt-xs);
  color: var(--texto-3);
}

/* ── EL ÍNDICE: cada categoría con su página, con puntos hasta el número ─ */
.revista-indice-cara { padding: var(--e-6); gap: var(--e-4); }
.revista-indice-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-1);
  overflow: auto;
  min-height: 0;
}
/* Más de doce categorías: dos columnas donde entran (en el celular sigue
   siendo una), y lo que no entra igual se desliza adentro de la página. */
.revista-indice-larga {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  column-gap: var(--e-6);
}
.revista-indice-ir {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-2) 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radio-sm);
  transition: color var(--rapido);
}
.revista-indice-ir:hover { color: var(--acento-texto); }
.revista-indice-ir:focus-visible { outline: none; box-shadow: var(--foco); }
.revista-indice-nombre {
  flex: none;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--letra-titulo);
  font-size: var(--txt-base);
}
.revista-indice-puntos {
  flex: 1;
  min-width: var(--e-4);
  border-bottom: 1px dotted var(--texto-3);
  transform: translateY(-0.3em);
}
.revista-indice-pagina {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}

/* ── UNA CATEGORÍA: la grilla ─────────────────────────────────────────── */
/* El papel lleva una tinta suave del color de la categoría (161) --el mismo
   de su solapa-- y el título subrayado con el color entero: se sabe en qué
   parte del cuaderno se está sin mirar el borde. */
.revista-categoria {
  --revista-solapa: var(--acento);
  background: color-mix(in oklch, var(--superficie) 90%, var(--revista-solapa) 10%);
}
.revista-categoria .revista-cara-cabeza { border-bottom: 2px solid var(--revista-solapa); }
.revista-cara-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde-suave);
}
.revista-cara-parte {
  font-size: var(--txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
  white-space: nowrap;
}

/* LA GRILLA. Tantas columnas como manda la cara; las filas se reparten el
   alto que queda, así una cara de 5 y una de 80 llenan el mismo papel con
   modelos de distinto tamaño. El texto achica con las columnas. */
.revista-grilla {
  flex: 1;
  min-height: 0;
  margin-bottom: var(--e-4);   /* el folio va abajo */
  display: grid;
  grid-template-columns: repeat(var(--revista-cols, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--e-2);
  --revista-letra: clamp(0.55rem, calc(1.1rem - var(--revista-cols, 3) * 0.08rem), 0.9rem);
}

/* La celda llena su fila; el botón de adentro mide lo que ocupan la foto y
   el texto, y no más: el resto de la celda es papel, y tocarlo pasa la hoja. */
.revista-item {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: var(--revista-letra);
}
.revista-item-boton {
  width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--rapido);
}
.revista-item-boton:hover { transform: translateY(-2px); }
.revista-item-boton:focus-visible { outline: none; box-shadow: var(--foco); }
.revista-item-boton:hover .revista-item-foto { border-color: var(--acento); }

/* La foto es 3:4 como mucho: con pocos modelos en una cara alta, el lugar
   sobra abajo y no se estira la foto (una remera sin mangas). Con muchos,
   se achica hasta entrar. */
.revista-item-foto {
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  background: var(--superficie-alta);
  overflow: hidden;
  transition: border-color var(--rapido);
}
.revista-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.revista-item-foto-vacia {
  font-family: var(--letra-titulo);
  font-size: calc(var(--revista-letra) * 1.8);
  color: var(--texto-3);
}
/* El nombre y el precio no se achican: cuando el lugar no alcanza, cede la
   foto (si no, el nombre queda cortado por la mitad). */
.revista-item-nombre, .revista-item-precio { flex: none; }
.revista-item-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--peso-medio);
  line-height: 1.2;
}
.revista-item-precio {
  font-variant-numeric: tabular-nums;
  color: var(--acento-texto);
  line-height: 1.2;
}
/* Agotado entero: se apaga, no se esconde, y lo dice en una cinta. */
.revista-item-sin .revista-item-foto { opacity: .45; }
.revista-item-agotado {
  position: absolute;
  top: var(--e-1);
  left: var(--e-1);
  padding: 1px var(--e-2);
  border-radius: var(--radio-sm);
  background: var(--fondo);
  color: var(--texto-3);
  font-size: calc(var(--revista-letra) * 0.85);
}

/* ── LA RESEÑA: «contanos cómo te fue» ────────────────────────────────── */
.revista-resena {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
}
.revista-resena-titulo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: clamp(1.2rem, 0.9rem + 1.4vw, 1.8rem);
  line-height: 1.15;
  font-weight: var(--peso-medio);
}
.revista-resena-form {
  width: 100%;
  max-width: 22rem;
  display: grid;
  gap: var(--e-3);
  justify-items: center;
}
.revista-estrellas { display: flex; gap: var(--e-1); }
.revista-estrella {
  width: var(--toque-min);
  height: var(--toque-min);
  border: 0;
  background: transparent;
  color: var(--texto-3);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--rapido), transform var(--rapido);
}
.revista-estrella:hover { transform: scale(1.15); }
.revista-estrella:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-sm); }
.revista-estrella-llena { color: var(--acento); }
.revista-resena-texto, .revista-resena-nombre {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: var(--txt-sm);
}
.revista-resena-texto { resize: vertical; }
.revista-resena-texto:focus-visible, .revista-resena-nombre:focus-visible { outline: none; box-shadow: var(--foco); }
.revista-resena-aviso { margin: 0; min-height: 1.2em; font-size: var(--txt-xs); color: var(--atencion); }
.revista-resena-boton {
  min-height: var(--toque-min);
  padding: 0 var(--e-6);
  border: 0;
  border-radius: var(--radio-full);
  background: var(--acento);
  color: var(--sobre-acento);
  font: inherit;
  font-weight: var(--peso-medio);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background var(--rapido);
}
.revista-resena-boton:hover { background: var(--acento-fuerte); }
.revista-resena-boton:focus-visible { outline: none; box-shadow: var(--foco); }
.revista-resena-boton:disabled { opacity: .6; cursor: default; }
.revista-resena-google { background: transparent; border: 1px solid var(--borde-acento); color: var(--acento-texto); }
.revista-resena-gracias { margin: 0; font-family: var(--letra-titulo); font-size: var(--txt-lg); color: var(--texto); }

/* ── EL RELLENO Y LA CONTRATAPA ──────────────────────────────────────────── */
.revista-relleno {
  justify-content: center;
  align-items: center;
  background: var(--superficie-alta);
}
.revista-relleno-marca {
  margin: 0;
  font-family: var(--letra-titulo);
  letter-spacing: .3em;
  color: var(--texto-3);
}
.revista-contratapa {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  cursor: pointer;
  background:
    radial-gradient(120% 80% at 50% 100%, var(--acento-suave), transparent 60%),
    var(--superficie);
}
.revista-contratapa-logo {
  width: 24%;
  max-width: 120px;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: var(--e-2);
}
.revista-contratapa-titulo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: clamp(1.4rem, 0.9rem + 2vw, 2.2rem);
  line-height: 1.1;
  font-weight: var(--peso-medio);
}
.revista-contratapa .revista-resena-boton { margin-top: var(--e-4); }
.revista-contratapa-pie {
  position: absolute;
  bottom: var(--e-3);
  left: 0;
  right: 0;
  margin: 0;
  font-size: var(--txt-xs);
  color: var(--texto-3);
}
/* La marca dentro del pie: el wordmark de `marca.css` (Playfair, la «Fire»
   roja, la chapa «Tienda»), un poco más grande que el «Hecho con» que lo
   presenta. */
.revista-contratapa-pie .marca-kfb { font-size: var(--txt-base); vertical-align: -.1em; }