/* ═══════════════════════════════════════════════
   premium.css — capa visual editorial
   Se carga después de base.css (y de pages.css/test.css si aplican).
   Afecta: grano global, hovers editoriales, focus AAA,
           duotone en imágenes, magnetismo en CTAs (apoyo JS).
   ═══════════════════════════════════════════════ */

/* ── 1. Grano SVG global — siempre visible, no anima ──
   Se pone en body::after con mix-blend-mode overlay.
   El SVG lleva <feTurbulence> estático generando ruido.
   Opacity baja (0.06) para que sea textura sutil, no dominante.
*/
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  background-size: 220px 220px;
}

/* Kill switch: si el usuario pide menos movimiento, el grano se mantiene
   (es estático, no molesta), pero bajamos aún más la opacidad. */
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.04; }
}


/* ── 2. Focus AAA global ──
   Todos los elementos interactivos con focus visible, nunca se quita.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ── 3. Text balance en titulares ──
   Evita huérfanas en H1/H2. Soporte Chrome 114+, Safari 17.4+, FF 121+.
*/
h1, h2, .hero__titulo, .cl-titulo, .test-intro__titulo,
.section__titulo, .hist-tit, .tt {
  text-wrap: balance;
}


/* ── 4. Hover editorial en imágenes de cards ──
   Transiciones lentas (800ms), cubic-bezier cinematográfico.
   Pensado para .reto-card, .card-imagen, etc.
*/
.reto-card__imagen,
.card-imagen,
.retos-img {
  overflow: hidden;
}
.reto-card__imagen img,
.card-imagen img,
.retos-img img {
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: grayscale(15%) contrast(1.04);
  will-change: transform, filter;
}
.reto-card:hover .reto-card__imagen img,
.card-imagen:hover img,
.retos-img:hover img {
  transform: scale(1.04);
  filter: grayscale(0%) contrast(1.02);
}


/* ── 5. SplitText helper classes ──
   El JS añade <span class="split-word"> por palabra. Las iniciamos
   con translateY(100%) y opacity:0. GSAP anima la entrada.
   Si el JS no corre (reduced-motion o error), fallback a visible.

   IMPORTANTE: los elementos con [data-split] se muestran visibles
   por defecto. Solo cuando el JS los marca con clase `.js-split-ready`
   les aplicamos la animación inicial. Así, si el JS falla o tarda,
   el texto se ve normal — no fantasma permanente.
*/
.split-title {
  overflow: hidden;
  display: block;
}
.split-title .split-word {
  display: inline-block;
}

/* Estado "animando": solo se aplica cuando el JS añade la clase */
.js-split-ready .split-word {
  opacity: 0;
  transform: translateY(100%);
  will-change: transform, opacity;
}

/* Fallback: si no hay JS o prefers-reduced-motion, se muestra normal */
@media (prefers-reduced-motion: reduce) {
  .split-title .split-word,
  .js-split-ready .split-word {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ── 6. Magnetismo — apoyo visual al JS ──
   El JS aplica transform; aquí solo añadimos transition cuando el
   cursor sale (clase quitada) para que vuelva con easing.
*/
.magnetic {
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.magnetic.is-tracking {
  transition: none; /* JS controla frame a frame */
}


/* ── 7. Flotación sutil — para el "libro" del hero del checklist ──
   Oscila -4 → 4 → -4 en 6s. Muy lento. Se desactiva con reduced-motion.
*/
@keyframes float-soft {
  0%, 100% { transform: rotate(-3deg) translateY(-3px); }
  50%      { transform: rotate(-3deg) translateY(3px); }
}
.cl-book {
  animation: float-soft 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cl-book { animation: none; }
}


/* ── 8. Progress bar editorial (para test.html loading) ──
   Reemplaza los 3 puntos por una línea fina que llena lento.
*/
.editorial-progress {
  width: 260px;
  height: 2px;
  background: rgba(255,255,255,0.10);
  margin: 32px auto;
  position: relative;
  overflow: hidden;
}
.editorial-progress__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--naranja);
  animation: progress-fill 1.8s ease-out forwards;
}
@keyframes progress-fill {
  from { width: 0%; }
  to   { width: 100%; }
}


/* ── 9. Fade+slide entre preguntas del test ──
   Aplica a .test-body cuando se cambia de pregunta.
   El JS añade .is-exit antes, y .is-enter cuando entra.
*/
.test-body {
  transition: opacity 280ms ease-out, transform 280ms ease-out;
}
.test-body.is-exit {
  opacity: 0;
  transform: translateY(-12px);
}
.test-body.is-enter {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: reduce) {
  .test-body,
  .test-body.is-exit,
  .test-body.is-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ── 10. Scroll — nativo, sin librería ──
   Con scroll-behavior smooth para links internos solamente.
*/
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}