/* =============================================================================
   cine.css — la demostración que se cuenta sola (Ctrl + Alt + Shift + T)
   =============================================================================
   Solo vive en la portada. No es una pantalla nueva: es la portada de siempre
   recorriéndose a sí misma, con las mismas animaciones que ya tiene, pero
   disparadas en orden y a un ritmo que se puede mirar de lejos — para una
   exposición, una pantalla de fondo o una grabación.

   Por eso aquí abajo hay poquísimo dibujo propio: casi todo es apagar cosas
   (la barra, el botón de ayuda) y poner en pausa lo que se mueve solo, para
   que el guion de cine.js decida cuándo se mueve cada cosa.
   ============================================================================= */

/* ---- Mientras dura ------------------------------------------------------- */

/* Nada de barras ni de botones flotantes: lo que se enseña es la página. */
body.rb-cine .rb-nav,
body.rb-cine .rb-help,
body.rb-cine .rb-help-tip { opacity: 0; pointer-events: none; transition: opacity .5s var(--rb-ease); }

/* La rueda del ratón pelearía contra el recorrido. Se deja el teclado, que es
   por donde se sale. */
body.rb-cine { overscroll-behavior: none; }

/* ---- Que todo quepa en la pantalla --------------------------------------- */
/*
   Dos cosas, y las dos solo mientras dura la demostración:

   1. Las secciones respiran menos. La portada está pensada para leerse con el
      dedo en la rueda, y sus 96 px de aire arriba y abajo son justo lo que
      sobra cuando lo que hace falta es que la sección entera se vea de una
      vez. Recortarlos es gratis y muchas veces ya basta para que quepa.

   2. Lo que aun así no cabe, se encoge. Lo mide y lo decide plantar() en
      cine.js; aquí solo está el zoom. Se aplica al .rb-wrap de dentro y no a
      la sección, para que el fondo —el negro de «¿Cómo funciona?», la foto de
      Fusalmo— siga llenando la pantalla de borde a borde.

   La transición es la misma que dura el viaje de la cámara: así encoger y
   llegar pasan a la vez y se ve como un solo movimiento, no como un salto
   antes de moverse.
*/

body.rb-cine .rb-section { padding: 54px 0; }
body.rb-cine .rb-section-head { margin-bottom: 36px; }
body.rb-cine .rb-vota { padding: 26px 0 40px; }
body.rb-cine .rb-gracias { padding: 54px 0 0; }
body.rb-cine .rb-gracias .rb-section-head { margin-bottom: 30px; }

/* La franja de agradecimientos: se aprieta por arriba pero NO por abajo. El
   botón de NetherHost es lo último de su columna y con 52 px caía dentro del
   desvanecido del borde, que también es blanco: el botón se quedaba sin
   contorno. Con 80 px por debajo se apoya en negro y el desvanecido solo
   suaviza el corte, que es su único trabajo. */
body.rb-cine .rb-duo-rejilla { padding-top: 56px; padding-bottom: 80px; }

/* ---- Los precios, apretados para que no haga falta encogerlos ------------ */
/*
   Los tres planes más la banda de escuelas más la nota legal miden 1 060 px:
   en una ventana de 890 eso obligaba a plantar() a encogerlo todo al 83 %, y
   al 83 % la letra de las viñetas se queda en 12 px — desde la tercera fila
   del salón, ilegible. Encoger es el último recurso, no el primero.

   Así que primero se le quita el aire que sobra: los planes en una portada
   están pensados para leerse con calma y con el dedo en la rueda, y ese
   respiro es justo lo que no hace falta cuando lo que se quiere es ver los
   tres de una vez desde lejos. Quitando relleno y márgenes la sección baja a
   caber casi entera, y el zoom que queda por aplicar es de los que no se
   notan.

   Lo que NO se toca: la nota de que los precios son ficticios. Es lo único de
   toda la portada que hay que poder leer aunque estorbe.
*/
body.rb-cine .rb-prices .rb-section-head { margin-bottom: 20px; }
body.rb-cine .rb-prices .rb-section-head h2 { margin: 10px 0 10px; }
body.rb-cine .rb-cycle-switch { padding: 4px; gap: 2px; margin-top: 16px; }
body.rb-cine .rb-cycle-switch button { padding: 9px 16px; font-size: 13.5px; }

body.rb-cine .rb-price { padding: 30px 26px; }
body.rb-cine .rb-price .amount { font-size: 40px; margin: 8px 0 4px; }
body.rb-cine .rb-price .for { margin-bottom: 18px; }
body.rb-cine .rb-price ul { margin-bottom: 20px; }
body.rb-cine .rb-price li { margin-bottom: 9px; }
body.rb-cine .rb-price .rb-price-cycle { margin-bottom: 14px; }

body.rb-cine .rb-price-schools { padding: 20px 28px; margin-top: 20px; }
body.rb-cine .rb-price-schools p { line-height: 1.5; max-width: 74ch; }
body.rb-cine .rb-price-note { margin-top: 16px; }
/* Por arriba no se aprieta tanto como el resto: ahí es donde se asoma el
   Robin de la banda, y si el relleno baja de lo que el pájaro sobresale, se
   sale de su sección y le entra a la franja de agradecimientos. */
body.rb-cine .rb-cta { padding: 50px 0 40px; }

.rb-cine-encuadre {
  transform: scale(var(--rb-cine-zoom, 1));
  transform-origin: top center;
  transition: transform .9s var(--rb-ease);
}

/* ---- El cartel de arriba ------------------------------------------------- */

.rb-cine-hud {
  position: fixed; z-index: 9500;
  top: max(16px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px 9px 16px;
  background: rgba(20, 20, 20, .82); color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  animation: rb-cine-hud-in .5s var(--rb-ease) both .3s;
}
@keyframes rb-cine-hud-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rb-cine-hud i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rb-red);
  animation: rb-pulse 2.2s var(--rb-ease) infinite;
}
.rb-cine-hud button {
  border: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff;
  padding: 6px 13px; border-radius: 999px;
  transition: background .2s var(--rb-ease);
}
.rb-cine-hud button:hover { background: var(--rb-red); }

/* A los cinco segundos el cartel se aparta solo: ya dijo lo que tenía que
   decir y lo que se enseña es la página, no él. Vuelve en cuanto el ratón se
   acerca al borde de arriba (ver cine.js).

   La animación de entrada se apaga en cuanto termina —.rb-cine-quieto, que lo
   pone cine.js— porque deja el cartel congelado en sus valores finales y eso
   le gana a cualquier transición: sin esto, el cartel se iría de golpe. */
.rb-cine-hud.rb-cine-quieto {
  animation: none;
  transition: opacity .4s var(--rb-ease), transform .4s var(--rb-ease);
}
.rb-cine-hud.rb-cine-escondido {
  opacity: 0; transform: translate(-50%, -18px);
  pointer-events: none;
}

/* La barra de abajo dice por dónde va el recorrido: sin ella, una pantalla
   que se mueve sola no deja saber si va a acabar pronto o nunca. */
.rb-cine-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
  height: 3px; background: rgba(20, 20, 20, .1);
}
.rb-cine-barra i {
  display: block; height: 100%; width: 0;
  background: var(--rb-red);
  box-shadow: 0 0 14px rgba(255, 46, 46, .7);
}

/* ---- La entrada: el logo que baja ---------------------------------------- */

.rb-cine-telon {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  background-image: radial-gradient(rgba(255, 46, 46, .13) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.rb-cine-telon.fuera { animation: rb-cine-telon-fuera .9s var(--rb-ease) both; }
@keyframes rb-cine-telon-fuera { to { opacity: 0; visibility: hidden; } }

/* El logo entra desde arriba, se planta en medio y después baja hasta donde
   está el logo de verdad en la barra. Ahí es donde el telón se va: el ojo
   sigue el movimiento y aterriza en la página ya empezada. */
.rb-cine-logo {
  font-size: clamp(38px, 8vw, 92px); font-weight: 800; letter-spacing: -.045em;
  color: var(--rb-ink); line-height: 1;
  animation: rb-cine-logo-entra 1.5s var(--rb-spring) both;
}
.rb-cine-logo b { color: var(--rb-red); }
.rb-cine-logo.baja { animation: rb-cine-logo-baja 1.1s var(--rb-ease) both; }

@keyframes rb-cine-logo-entra {
  0%   { opacity: 0; transform: translateY(-120px) scale(.72); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rb-cine-logo-baja {
  0%   { transform: none; }
  100% { transform: translateY(26vh) scale(.42); opacity: 0; }
}

/* El destello que acompaña al aterrizaje */
.rb-cine-telon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 46, 46, .22), transparent 66%);
  animation: rb-cine-destello 2.6s var(--rb-ease) infinite;
}
@keyframes rb-cine-destello {
  0%, 100% { transform: scale(.85); opacity: .5; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ---- El camino de los pasos --------------------------------------------- */
/* Los cuatro números de «¿Cómo funciona?» no salen a la vez: salen uno detrás
   de otro, y la línea que los une se dibuja entre medias. La línea ya existe
   en landing.css; aquí solo se marca cuál es el paso que acaba de encenderse,
   que es lo que convierte cuatro tarjetas en un camino. */

body.rb-cine .rb-steps .rb-step.rb-cine-ahora .rb-step-n {
  background: var(--rb-red); color: #fff;
  box-shadow: 0 0 0 0 rgba(255, 46, 46, .55);
  animation: rb-cine-latido 1.2s var(--rb-ease) 2;
}
@keyframes rb-cine-latido {
  0%   { box-shadow: 0 0 0 0 rgba(255, 46, 46, .55); }
  100% { box-shadow: 0 0 0 26px rgba(255, 46, 46, 0); }
}

/* ---- Las materias, una por una ------------------------------------------ */
/* La cinta se queda quieta y vacía, y cada materia hace pop en su turno.
   Cuando terminan, se quita esta clase y la cinta vuelve a correr sola. */

.rb-marquee.rb-cine-pop .rb-marquee-track { animation-play-state: paused; }
.rb-marquee.rb-cine-pop span { opacity: 0; transform: scale(.55); }
.rb-marquee.rb-cine-pop span.rb-cine-visible {
  animation: rb-cine-materia .5s var(--rb-spring) both;
}
@keyframes rb-cine-materia {
  0%   { opacity: 0; transform: scale(.55) translateY(10px); }
  70%  { opacity: 1; transform: scale(1.09) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- El chat, más despacio ---------------------------------------------- */
/* El ritmo del guion lo lleva landing.js (ver RB_CINE_LENTO). Lo único que
   cambia aquí es el marco: mientras se cuenta la conversación, la maqueta se
   agranda un punto para que se lea de lejos. */

body.rb-cine .rb-chat {
  transition: transform .8s var(--rb-ease), box-shadow .8s var(--rb-ease);
}
body.rb-cine .rb-chat.rb-cine-mira {
  transform: scale(1.035);
  box-shadow: 0 30px 70px rgba(255, 46, 46, .18);
}

/* ---- El final ------------------------------------------------------------ */
/* La banda roja se queda un rato en pantalla: es donde acaba el recorrido y
   desde donde vuelve a empezar. */

body.rb-cine .rb-cta-band.rb-cine-mira {
  animation: rb-cine-final 1.4s var(--rb-spring) both;
}
@keyframes rb-cine-final {
  0%   { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* ---- Movimiento reducido ------------------------------------------------- */
/* El sistema pide menos movimiento: el recorrido sigue, porque es el sentido
   entero de esto, pero sin nada que rebote ni que tiemble. */
@media (prefers-reduced-motion: reduce) {
  .rb-cine-logo, .rb-cine-logo.baja { animation-timing-function: ease; }
  .rb-cine-telon::after { animation: none; opacity: .6; }
  body.rb-cine .rb-steps .rb-step.rb-cine-ahora .rb-step-n { animation: none; }
  .rb-marquee.rb-cine-pop span.rb-cine-visible { animation: rb-cine-materia-quieta .4s ease both; }
  @keyframes rb-cine-materia-quieta { from { opacity: 0; } to { opacity: 1; transform: scale(1); } }
}

/* ---- En una pantalla de teléfono ---------------------------------------- */
@media (max-width: 560px) {
  .rb-cine-hud { font-size: 12px; padding: 8px 8px 8px 13px; gap: 9px; max-width: calc(100vw - 24px); }
  .rb-cine-hud span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-cine-hud button { padding: 6px 11px; font-size: 12px; }
}