/* ═══════════════════════════════════════════════════════════════════
   PROTOTIPO "REEL" — scrollytelling de la landing
   Escena 2 · El caos: planillas/mails/WhatsApp que se ordenan en el sistema (hero)
   Escena 3 · La frase: se ilumina palabra por palabra con el scroll

   Regla: el CSS por defecto es el ESTADO FINAL (lo que ve quien no tiene JS
   o tiene "reducir movimiento"). Los estados iniciales los pone reel.js solo
   cuando <html> tiene la clase .reel-on.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ESCENA 2 · EL CAOS QUE SE ORDENA (vive dentro del hero) ─────── */
.rh-chaos { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.rh-cap { display: none; }
.reel-on .rh-chaos { display: block; }
.reel-on .rh-cap {
  display: block; position: absolute; left: 0; right: 0; top: -54px; z-index: 4;
  text-align: center; margin: 0;
  font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-muted, #6B7090);
  height: 1.4em;
}
.rh-cap span { position: absolute; inset: 0; }
.rh-cap .rh-cap-b { color: var(--neon-green, #059669); opacity: 0; }

.rh-st {
  position: absolute; top: var(--y); left: var(--x);
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 270px;
  padding: 9px 13px 9px 9px;
  background: #fff; border: 1px solid #dde2ee; border-radius: 12px;
  font: 600 13px/1.3 var(--font-body, sans-serif); color: #2b3558;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 34px -16px rgba(20,30,70,.35), 0 4px 10px -5px rgba(20,30,70,.18);
  transform: rotate(var(--r));
  white-space: nowrap;
}
.rh-st i {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-mono, monospace); font-style: normal; color: #fff;
}
.rh-st small { display: block; font-weight: 500; font-size: 11px; color: #7a83a6; }
.rh-st.xls i  { background: #1D7044; }
.rh-st.wsp i  { background: #25D366; }
.rh-st.mail i { background: #3B6FD6; }
.rh-st.pdf i  { background: #D93A2B; }
.rh-st.drv i  { background: #0F9D58; }
.rh-st.note i { background: #F2B705; color: #3a2d00; }
.rh-st.wsp    { border-radius: 14px 14px 14px 4px; }
.rh-st.postit {
  background: #FFE873; border-color: #F2D43D; color: #4a3b00;
  font-family: var(--font-serif, serif); font-style: italic; font-weight: 400; font-size: 17px;
  padding: 16px 18px; border-radius: 3px; white-space: normal; width: 150px;
  box-shadow: 0 20px 30px -18px rgba(90,70,0,.55);
}
@keyframes rhFloat { 50% { translate: 0 -7px; } }
.reel-on .rh-st { animation: rhFloat 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* Las barritas del mockup crecen desde abajo */
.reel-on .hero-browser .mm-bars span { transform-origin: 50% 100%; }

/* ── ESCENA 3 · LA FRASE QUE SE ILUMINA ───────────────────────────── */
.reel-words {
  background: #0B1436;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 96px 16px;
}
.rw-text {
  max-width: 1040px; margin: 0 auto;
  font-family: var(--font-head, sans-serif);
  font-size: clamp(30px, 4.6vw, 64px); font-weight: 600; line-height: 1.12; letter-spacing: -.025em;
  color: #fff; text-wrap: balance;
}
.rw-text em { font-family: var(--font-serif, serif); font-style: italic; font-weight: 400; color: #9DB0E6; }
.rw-strike { position: relative; display: inline-block; }
.rw-line {
  position: absolute; left: -2%; right: -2%; top: 54%; height: .09em;
  background: #EA580C; border-radius: 99px; transform-origin: 0 50%;
}
.rw-w { display: inline; }
.rw-kicker {
  display: block; margin-bottom: 28px;
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: #7B90CC;
}