/* ============================================================
   Mi Sueñito — Embudo Quiz (v3)
   El cuerpo usa estilos INLINE (fidelidad al diseño importado).
   Este archivo solo aporta: tokens, base, los keyframes que el
   markup/JS referencian (msTwinkle/msSpin/msScreenIn), el input
   del nombre, el overlay legal y accesibilidad.
   Fuentes: Fredoka + Hanken Grotesk (en index.html).
   ============================================================ */

:root {
  --maxw: 430px;
  --bg: #081227;
  --font-head: 'Fredoka', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --card-border: rgba(140,175,235,.1);
  --card-border-2: rgba(140,175,235,.12);

  /* Tema del diseño del quiz (defaults: acento Azul, crema Marfil cálido) */
  --ms-cream: #f4f1ea;
  --ms-accent: #3f6ad6;
  --ms-accent-tint: rgba(63,106,214,.10);

  /* Sistema de movimiento (un solo gesto: fade-up; todo sale de aquí) */
  --anim-dur: 500ms;
  --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-dist: 14px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
}
a { color: #9cc4f6; text-decoration: none; }
a:hover { color: #c3d9f7; }
::selection { background: rgba(150,190,250,.3); }
img { display: block; max-width: 100%; }

/* Las pantallas del quiz se muestran/ocultan con el atributo hidden */
[hidden] { display: none !important; }

/* Input del nombre (P6, estilos del diseño) */
.ms-name { caret-color: #8fb4ee; }
.ms-name::placeholder { color: #7f93b7; }
.ms-name:focus { outline: none; }

/* ---------- Keyframes que usan los estilos inline / el motor del quiz ---------- */
@keyframes msTwinkle  { 0%,100% { opacity: .12; } 50% { opacity: .9; } }
@keyframes msSpin     { to { transform: rotate(360deg); } }

/* ---------- Apariciones (módulo 2): fade-up único con tokens ---------- */
.ms-anim { opacity: 0; transform: translateY(var(--anim-dist)); }
.ms-anim-in { opacity: 1; transform: none; transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); }
/* Variante reduced-motion (la aplica el JS): posición final, solo fade corto */
.ms-anim-rm { opacity: 0; }
.ms-anim-rm.ms-anim-in { opacity: 1; transform: none; transition: opacity .15s ease; }
@keyframes msBarIn { from { opacity: 0; transform: translateX(-50%) translateY(var(--anim-dist)); } to { opacity: 1; transform: translateX(-50%); } }
.ms-bar-in { animation: msBarIn .35s var(--anim-ease); }

/* ---------- Gates (P8 testimonio · P16 oferta): SOLO JS ----------
   Aquí ya no hay relojes: la versión anterior (animation-delay en la clase
   base) contaba desde el LOAD en WebKit — corre las animaciones aunque el
   subtree esté display:none — y el dueño llegaba con el gate ya abierto.
   Ahora el ocultamiento es [hidden] en el contenedor data-offer-rest (P16,
   altura cero: nada de lo de arriba se mueve) y la barra Continuar oculta
   (P8, position:fixed = cero layout shift); los tiempos viven como constantes
   al inicio de main.js y los timers JS son la única fuente del reloj
   (arrancan al MOSTRAR cada pantalla, con timer de seguridad +
   visibilitychange como redes). */

/* Feedback táctil al presionar (150 ms, cambio de estado — no es fade-up) */
[data-options] button:active, [data-next]:active, #ms-continue:enabled:active,
[data-screen] a[href^="https://pay.hotmart.com/"]:active { transform: scale(.985); }

/* ---------- Videos (P8 testimonio · P16 VSL) ----------
   Autoplay MUDO al mostrar la pantalla; el overlay "Toca para el sonido"
   reinicia el video con audio (lo maneja el módulo 2). El overlay cubre el
   video para que el toque caiga en cualquier parte; al activar el sonido se
   oculta y aparecen los controles nativos. */
.ms-vidwrap { -webkit-tap-highlight-color: transparent; }
.ms-unmute {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(8,18,40,.12) 42%, rgba(8,18,40,.58));
  color: #f2f7ff; font-family: var(--font-head); font-weight: 600;
}
.ms-unmute[hidden] { display: none; }
.ms-unmute__ic {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(63,106,214,.92); box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.ms-unmute__tx {
  font-size: 13.5px; padding: 6px 14px; border-radius: 999px;
  background: rgba(8,14,30,.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ============================================================
   Overlay legal (políticas dentro de la misma página)
   ============================================================ */
.legal-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.legal-modal.is-open { pointer-events: auto; }
.legal-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 6, 14, .62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.legal-modal.is-open .legal-modal__backdrop { opacity: 1; }
.legal-modal__sheet {
  position: relative;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  height: 92vh; height: 92dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--card-border-2);
  box-shadow: 0 -18px 55px rgba(0, 0, 0, .5);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}
.legal-modal.is-open .legal-modal__sheet { transform: translateY(0); }
.legal-modal__bar {
  position: relative; flex: none;
  display: flex; align-items: center;
  padding: 17px 14px 12px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(8, 14, 30, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.legal-modal__grip {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px; background: rgba(150, 175, 235, .3);
}
.legal-modal__close {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px 8px 11px; border-radius: 999px;
  background: rgba(150, 185, 245, .1); border: 1px solid rgba(150, 185, 245, .22);
  color: #cfe0f7; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.legal-modal__frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
body.legal-open { overflow: hidden; }

/* ============================================================
   Accesibilidad: movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  /* Sin translateY: todo aparece en su posición final (el JS usa .ms-anim-rm,
     que solo hace un fade de 150 ms; esta regla es la red por si algo quedó
     con la variante completa). */
  .ms-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Los gates (P8/P16) SE MANTIENEN con reduced-motion: son timing de
     producto, no movimiento — y viven 100% en los timers JS del módulo 2. */
  .legal-modal__sheet, .legal-modal__backdrop { transition: none; }
}