/* =========================================================
   effects.css — Efectos avanzados (los mueve js/effects.js)

   Regla de oro para que la web siga siendo rapidísima:
   solo se animan "transform" y "opacity", que el navegador
   mueve en la tarjeta gráfica sin recalcular la página.
   ========================================================= */

/* ---------- 1. Aurora: manchas de luz que se mueven despacio ---------- */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
/* Cada mancha tiene su color, posición y ritmo */
.aurora span:nth-child(1) {
  top: -45vmax;
  right: -25vmax;
  background: radial-gradient(circle, rgb(255 184 77 / 0.2), transparent 62%);
}
.aurora span:nth-child(2) {
  top: -20vmax;
  left: -35vmax;
  background: radial-gradient(circle, rgb(255 154 118 / 0.13), transparent 62%);
  animation-duration: 28s;
  animation-delay: -8s;
}
.aurora span:nth-child(3) {
  bottom: -50vmax;
  left: 10vmax;
  background: radial-gradient(circle, rgb(140 194 255 / 0.08), transparent 62%);
  animation-duration: 34s;
  animation-delay: -14s;
}
/* En las páginas interiores la aurora es más pequeña y discreta */
.page-head .aurora span { width: 50vmax; height: 50vmax; }

@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 7vmax, 0) scale(0.95); }
}

/* ---------- 2. Retícula de cuadrados (canvas que pinta effects.js) ---------- */
.square-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Se desvanece hacia los bordes para no competir con el texto */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 45%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 65% 45%, #000 30%, transparent 75%);
}

/* ---------- 3. Titular que se "enciende" palabra a palabra ----------
   Cada palabra se anima sola al crearse (con un retraso según su número --i).
   Empiezan tenues (no invisibles) para que el navegador las pinte desde
   el primer momento: así no empeora la carga (LCP). */
.js .split-ready .word {
  display: inline-block;
  animation: word-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 75ms + 150ms);
}
@keyframes word-in { from { opacity: 0.16; transform: translateY(0.18em); } }
/* Palabras resaltadas con el degradado ámbar → coral:
   antes de separarlas lo lleva el bloque entero; después, cada palabra */
.hl:not(.is-split), .hl .word {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 4. Tarjetas de pruebas que flotan junto a la foto ---------- */
.proof { animation: float 7s ease-in-out infinite; }
.proof-2 { animation-duration: 8s; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Puntito "disponible" que late: una onda (pseudo-elemento) que crece y se desvanece.
   Solo anima transform y opacity, así la mueve la tarjeta gráfica. */
.pill-dot { position: relative; }
.pill-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(3); } }

/* ---------- 5. Proceso: línea que se dibuja al hacer scroll ----------
   ::before es el carril y ::after la línea ámbar, que crece según --progress.
   Un punto de luz (.process-head) viaja por la punta de la línea y cada paso
   se enciende al llegar: el último encendido (.is-current) brilla más.
   effects.js actualiza --progress, la posición del punto y las clases. */
.process::before, .process::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
}
.process::before { background: var(--line); }
/* Capas: la línea y el punto de luz van por debajo de las tarjetas,
   así el punto "atraviesa" los números de cada paso */
.process-list { position: relative; z-index: 2; }
.process::after {
  background: linear-gradient(var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgb(255 184 77 / 0.45);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
html:not(.js) .process::after { transform: none; }

/* Punto de luz: un cuadradito ámbar (guiño a la marca) con halo */
.process-head {
  position: absolute;
  z-index: 1;
  /* (la línea no lleva z-index: queda debajo del punto y de las tarjetas) */
  left: 13px;
  top: 1px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgb(255 184 77 / 0.16), 0 0 26px 6px rgb(255 184 77 / 0.5);
  opacity: 0;
  transition: opacity 0.4s;
  will-change: transform;
}
.process.is-running .process-head { opacity: 1; }
html:not(.js) .process-head { display: none; }

/* Los pasos esperan "apagados" y algo desplazados; al encenderse se colocan en su sitio.
   Se apagan con colores más suaves (no con transparencia) para que el texto
   siga cumpliendo el contraste mínimo de accesibilidad (WCAG AA). */
.js .step {
  transform: translateX(18px);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.5s, background 0.5s, box-shadow 0.5s;
}
.js .step h3, .js .step p { transition: color 0.5s; }
.js .step:not(.is-active) h3 { color: var(--muted); }
.js .step:not(.is-active) p { color: #8592ad; } /* contraste 5,6:1 */
.js .step.is-active { transform: none; }
/* El paso en el que está la línea ahora mismo */
.step.is-current {
  border-color: rgb(255 184 77 / 0.45);
  background: var(--bg-soft);
  box-shadow: 0 22px 48px rgb(0 0 0 / 0.32), 0 0 0 1px rgb(255 184 77 / 0.1);
}
.step.is-active .step-num {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  animation: num-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Onda que sale del número del paso actual */
.step.is-current .step-num::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  animation: ring 1.8s ease-out infinite;
}
@keyframes num-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ring { from { opacity: 0.8; transform: scale(0.85); } to { opacity: 0; transform: scale(1.35); } }

@media (max-width: 680px) {
  .process::before, .process::after { left: 17px; }
  .process-head { left: 11px; }
}

/* ---------- Menos movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora span, .proof, .pill-dot::after { animation: none !important; }
  .js .split-ready .word { opacity: 1; transform: none; }
  .js .step { transform: none; }
  .process::after { transform: none; }
  .process-head { display: none; }
}

/* ---------- 6. Entrada suave de la portada ----------
   La foto solo se mueve (no cambia su opacidad) para no retrasar la carga (LCP). */
.hero-in { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-buttons.hero-in { animation-delay: 0.45s; }
.hero-trust.hero-in { animation-delay: 0.6s; }
.hero-visual.hero-in { animation-name: hero-zoom; animation-duration: 1.2s; animation-delay: 0.15s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes hero-zoom { from { transform: scale(0.94) translateY(14px); } }

/* ---------- 7. Cabeceras de las páginas interiores ----------
   Suben suavemente al cargar, solo con CSS (no esperan a JavaScript)
   y sin tocar la opacidad, así el título se pinta desde el primer momento. */
.rise { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise:nth-child(2) { animation-delay: 0.06s; }
.rise:nth-child(3) { animation-delay: 0.12s; }
.rise:nth-child(4) { animation-delay: 0.18s; }
@keyframes rise { from { transform: translateY(18px); } }