/* ============================================================
   📖 LA REVISTA de la portada (rediseño §3.3) — home-revista.css
   ============================================================

   El panel #s-revista: la mesa de cuatro, la elección de la noche, las
   estanterías por rollo y los módulos curiosos. Lo enlaza la propia parcial
   _home_revista.php (igual que home.php enlaza portada.css): si la revista
   no se pinta, este fichero no se descarga.

   OJO CON EL NOMBRE: esto NO es el modo revista de cada ficha
   (/peli/{slug}/revista): por eso todos los prefijos son hrev-/h*, que no
   existen en ninguna otra hoja.

   CRITERIO VISUAL (§3.3): limpia. Un bloque por pantalla de móvil
   aproximadamente (375 px es el 95 % del uso), aire entre bloques y cero
   chips de configuración. Con el sistema visual de la casa: tokens de
   app.css (teal, rosa de acento, crema, papel) y titulares en Roboto Slab.

   Los únicos colores propios son los del TAPETE de la mesa (el verde
   oscuro de mesa de juego de la maqueta, que el resto de la web no usa) y
   el ORO de la carta boca abajo: se declaran aquí como variables locales. */

.hrev {
  --hrev-tapete: #0A4A44;       /* el tapete de la mesa (maqueta) */
  --hrev-carta: #0D2A26;        /* el dorso de las cajas sobre el tapete */
  --hrev-claro: #A8D8CE;        /* texto secundario sobre el tapete */
  --hrev-oro: #C89B3C;          /* la perla boca abajo */
  display: block;
  padding-bottom: 34px;
}

/* Los bloques respiran entre sí: la revista se hojea, no se escanea. */
.hrev > * + * { margin-top: 26px; }

/* En escritorio la revista es una columna de lectura, no un ancho de
   parrilla: 640 px y centrada, como los caminos de Ayúdame. */
@media (min-width: 700px) {
  .hrev { max-width: 640px; margin: 0 auto; }
}

/* ============================================================
   🃏 LA MESA DE CUATRO (§6.1)
   ============================================================

   El único bloque con fondo propio: el tapete a sangre en móvil (los
   -16px deshacen el padding del .container) para que se lea como «otra
   habitación» dentro de la portada. */
.hrev-mesa {
  margin: 0 -16px;
  padding: 20px 16px 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .08), transparent 60%),
    var(--hrev-tapete);
  color: #fff;
}
@media (min-width: 700px) {
  .hrev-mesa { margin: 0; border-radius: 16px; }
}

.hrev-mesa__quien {
  margin: 0 0 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFE8B3;
}
.hrev-mesa__t {
  margin: 0 0 2px;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: #fff;
}
.hrev-mesa__sub {
  margin: 0 0 14px;
  font-size: .82rem;
  color: var(--hrev-claro);
}

/* Las cuatro cartas: 2×2 SIEMPRE — la mesa es una mesa, no un carril. */
.hrev-tanda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hrev-tanda[hidden] { display: none; }

.hcarta {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hrev-carta);
  border: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
}
.hcarta:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* 📺 Con «solo las mías» ON, lo no disponible SE ATENÚA, no desaparece
   (rediseño §5): la misma regla que la parrilla, dicha con opacidad. La
   pone assets/js/home-revista.js leyendo psos.plataformas — y la aplica a
   la revista ENTERA: cartas de la mesa, elección de la noche y minis de
   las estanterías. La 💎 perla BOCA ABAJO queda exenta (el JS no le pone
   la clase): apagar el dorso chivaría el secreto; al revelarse entra en
   la regla como todas. */
.hcarta--fuera { opacity: .3; }
.hmini--fuera { opacity: .3; }
/* La noche es un héroe a toda pantalla con la frase de la casa dentro: se
   atenúa un punto menos que una carta para que la cita siga leyéndose,
   pero la señal de «esta no la puedes poner ya» se ve igual de rápida. */
.hnoche--fuera { opacity: .4; }

.hcarta__cupo {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(13, 148, 136, .92);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}
.hcarta--perla .hcarta__cupo { background: var(--hrev-oro); color: #fff; }

/* La caja del cartel: proporción de cartel y escenario del giro 3D. */
.hcarta__caja {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
}
.hcarta__cara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.hcarta__cara img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hcarta__t {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 26px 8px 8px;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: .82rem;
  line-height: 1.2;
  /* El degradado asienta el título sobre cualquier cartel. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.hcarta__por {
  padding: 7px 9px 9px;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--hrev-claro);
}

/* --- 💎 La perla, boca abajo SIEMPRE (es el mecanismo, PROMPT §7) --------
   Giro 3D de verdad: la caja rota y las dos caras esconden su reverso. El
   primer toque añade .revelada (home-revista.js); el segundo ya navega.
   Sin JS la carta es un enlace normal: revela llevando a la ficha. */
.hcarta--perla { perspective: 700px; }
.hcarta--perla .hcarta__caja {
  transform-style: preserve-3d;
  transition: transform .55s ease;
}
.hcarta--perla.revelada .hcarta__caja { transform: rotateY(180deg); }
.hcarta__dorso {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255, 232, 179, .12) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #B4832F, #7A5518);
}
.hcarta__dorso b {
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: .95rem;
}
.hcarta__dorso small { font-size: .7rem; color: #FFF3D6; }
.hcarta--perla .hcarta__cara {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* El porqué de la perla no se lee hasta que se le da la vuelta: diría el
   año y la vibra de una carta que aún es un secreto. El hueco se queda
   (visibility), para que la carta no pegue un salto al revelarse. */
.hcarta--perla .hcarta__por { visibility: hidden; }
.hcarta--perla.revelada .hcarta__por { visibility: visible; }

/* 🎲 La única acción rosa de esta pantalla (una primaria por pantalla, §7).
   Arranca hidden en el HTML: sin JS no hay nada que repartir. */
.hrev-mesa__dado {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: 0;
  border-radius: 11px;
  background: var(--c-accent);
  color: #fff;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hrev-mesa__dado:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hrev-mesa__dado[hidden] { display: none; }

/* ============================================================
   🌙 LA ELECCIÓN DE LA NOCHE (§6.3) — la frase, a lo grande
   ============================================================ */
.hrev-kicker {
  margin: 0 0 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.hnoche {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 430px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(20deg, #0a1418 30%, #31414b 90%);
  color: #fff;
}
.hnoche__cartel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hnoche__cuerpo {
  position: relative;
  z-index: 1;
  padding: 84px 16px 16px;
  /* El velo que hace legible la frase sobre cualquier cartel. */
  background: linear-gradient(180deg, rgba(10, 20, 24, 0) 0%, rgba(10, 20, 24, .62) 26%, rgba(10, 20, 24, .94) 70%);
}
.hnoche__sello {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-primary);
  color: #083A34;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hnoche__t {
  margin: 0 0 8px;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
}
.hnoche__frase {
  margin: 0 0 10px;
  padding-left: 11px;
  border-left: 3px solid var(--c-primary);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.45;
  color: #D9EAE5;
}
.hnoche__datos {
  margin: 0 0 12px;
  font-size: .74rem;
  color: #9FB8B2;
}
/* SECUNDARIA a propósito (§1/§7: máximo UNA acción rosa por pantalla).
   La maqueta pintaba este botón rosa como el 🎲, pero medido a 375×812 los
   dos caben ENTEROS en el mismo viewport en una franja de scroll de ~280 px
   — dos primarias a la vez, que es justo lo que la regla prohíbe. La rosa
   de la revista es el 🎲 de la mesa (el mecanismo estrella y el primero en
   pantalla); esta baja a botón fantasma sobre el héroe oscuro: borde y
   texto blancos, que en ese fondo se lee como botón sin gritar. */
.hnoche__ver {
  align-self: flex-start;
  display: inline-block;
  padding: 10px 17px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hnoche__ver:hover { background: rgba(255, 255, 255, .12); }
.hnoche__ver:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============================================================
   📚 LAS ESTANTERÍAS POR ROLLO (§6.4)
   ============================================================ */
.hrev-estante__cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hrev-estante__cab h2 {
  margin: 0;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  color: var(--c-ink);
}
.hrev-estante__ver {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  text-decoration: none;
  /* Diana táctil digna sin engordar la línea. */
  padding: 8px 0 8px 8px;
}
.hrev-estante__ver:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.hrev-estante__voz {
  margin: 2px 0 10px;
  font-size: .82rem;
  color: var(--c-ink-soft);
}

/* El carril desliza a sangre en móvil: los carteles asoman por el borde,
   que es la señal de que hay más. */
.hrev-carril {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 2px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hrev-carril::-webkit-scrollbar { display: none; }
@media (min-width: 700px) {
  .hrev-carril { margin: 0; padding-left: 0; padding-right: 0; }
}

.hmini {
  flex: 0 0 118px;
  display: flex;
  flex-direction: column;
  border-radius: 11px;
  overflow: hidden;
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
}
.hmini:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.hmini__c {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #31414b, #0e1b21);
}
.hmini__c img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hmini__np {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}
.hmini__t {
  padding: 6px 8px 0;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.25;
  /* Dos líneas y recorte: la estantería no baila por un título largo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hmini__v {
  padding: 2px 8px 8px;
  font-size: .68rem;
  color: var(--c-ink-soft);
}

/* ============================================================
   🎁 LOS MÓDULOS CURIOSOS (§3.3.4) — uno o dos por visita
   ============================================================ */
.hrev-modulo {
  padding: 16px 18px;
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: 14px;
}
.hrev-modulo__rot {
  margin: 0 0 10px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hrev-oro);
}

/* --- 🎞️ ¿La reconoces? (§6.5): el cartel REAL con blur, nunca una imagen
   generada. El primer toque quita el velo y destapa el título; el segundo
   navega (home-revista.js). --- */
.hquiz {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
}
.hquiz:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.hquiz__cartel {
  position: relative;
  flex: 0 0 84px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #223;
}
.hquiz__cartel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El velo del juego: borroso y un pelín desaturado. El scale evita que el
     blur enseñe los bordes limpios de la imagen (que serían una pista). */
  filter: blur(9px) saturate(.8);
  transform: scale(1.12);
  transition: filter .4s ease, transform .4s ease;
}
#hrev-quiz.revelada .hquiz__cartel img { filter: none; transform: none; }
.hquiz__frase {
  font-style: italic;
  font-size: .95rem;
  line-height: 1.5;
  quotes: "«" "»";
}
.hquiz__toca {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: .74rem;
  color: var(--c-ink-soft);
}
#hrev-quiz.revelada .hquiz__toca { display: none; }
.hquiz__t {
  display: block;
  margin-top: 6px;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: .95rem;
  color: var(--c-primary-dark);
}
.hquiz__t[hidden] { display: none; }
.hquiz__t span { font-weight: 400; color: var(--c-ink-soft); font-size: .8rem; }

/* --- 🧬 Este ADN: la receta como texto, sin carteles (enseña el mezclador
   sin explicarlo). --- */
.hadn {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: .92rem;
  line-height: 1.5;
}
.hadn li + li { margin-top: 4px; }
.hadn__cierre {
  margin: 10px 0 0;
  font-size: .92rem;
}
.hadn__cierre a {
  font-weight: 700;
  color: var(--c-primary-dark);
  text-decoration: none;
}
.hadn__cierre a:hover { text-decoration: underline; }
.hadn__cierre a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* --- 🔢 La cifra: un dato pequeño dicho en grande. --- */
.hcifra {
  margin: 0;
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--c-ink);
}

/* ============================================================
   Quien pide menos movimiento, menos movimiento
   ============================================================
   La perla NO deja de girar conceptualmente (boca abajo → boca arriba):
   sencillamente cambia sin animación. El juego es el mismo. */
@media (prefers-reduced-motion: reduce) {
  .hcarta,
  .hcarta--perla .hcarta__caja,
  .hquiz__cartel img { transition: none; }
}

/* 🎲 (026) ¿Una pista? — la frase descriptiva como pista opcional del quiz.
   El botón habla el lenguaje de los enlaces pequeños de la casa; la pista
   sale debajo de la adivinanza con el mismo cuerpo, un poco más apagada, para
   que se lea como «segunda pista» y no como otra adivinanza. */
.hquiz__pista-btn {
  display: inline-block; margin: 6px 0 0; padding: 4px 10px;
  border: 1.5px solid var(--c-border, #EADFD0); border-radius: 999px;
  background: transparent; color: var(--c-primary-dark, #0D9488);
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.hquiz__pista-btn:hover { border-color: var(--c-primary-dark, #0D9488); }
.hquiz__pista-btn[hidden] { display: none; }
.hquiz__pista {
  display: block; margin: 8px 0 0; font-style: italic;
  color: var(--c-ink-soft, #6B7A80); quotes: "«" "»";
}
.hquiz__pista[hidden] { display: none; }