/* ============================================================
   PlanWeb Pro — Animaciones
   ─────────────────────────────────────────────────────────────
   Todas las animaciones de la web en un solo archivo.
   Se desactivan automáticamente si el usuario tiene configurado
   "preferir movimiento reducido" en su sistema operativo.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   SISTEMA DE REVEAL (aparición al hacer scroll)
   ─────────────────────────────────────────────────────────────
   Los elementos empiezan invisibles (opacity:0 + desplazados).
   Cuando entran en el viewport, JavaScript les añade la clase
   .revealed y aparecen con transición suave.

   Clases disponibles:
   - .reveal-up    → aparece subiendo
   - .reveal-left  → aparece desde la izquierda
   - .reveal-right → aparece desde la derecha
   ════════════════════════════════════════════════════════════ */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.reveal-up    { transform: translateY(32px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

/* Estado final: visible y en posición */
.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Retrasos escalonados para que los elementos de una misma
   sección no aparezcan todos a la vez, sino uno tras otro */
.servicios__grid .reveal-up:nth-child(1) { transition-delay: 0ms; }
.servicios__grid .reveal-up:nth-child(2) { transition-delay: 80ms; }
.servicios__grid .reveal-up:nth-child(3) { transition-delay: 160ms; }
.servicios__grid .reveal-up:nth-child(4) { transition-delay: 240ms; }
.servicios__grid .reveal-up:nth-child(5) { transition-delay: 320ms; }
.servicios__grid .reveal-up:nth-child(6) { transition-delay: 400ms; }

.testimonios__grid .reveal-up:nth-child(1) { transition-delay: 0ms; }
.testimonios__grid .reveal-up:nth-child(2) { transition-delay: 100ms; }
.testimonios__grid .reveal-up:nth-child(3) { transition-delay: 200ms; }

/* El hero aparece más rápido porque es lo primero que ve el usuario */
.hero__content .reveal-up:nth-child(1) { transition-delay: 0ms; }
.hero__content .reveal-up:nth-child(2) { transition-delay: 120ms; }
.hero__content .reveal-up:nth-child(3) { transition-delay: 240ms; }
.hero__content .reveal-up:nth-child(4) { transition-delay: 360ms; }
.hero__content .reveal-up:nth-child(5) { transition-delay: 480ms; }


/* ════════════════════════════════════════════════════════════
   ANIMACIÓN DEL PRECIO EN EL FORMULARIO
   (para si en el futuro añades un selector de importe)
   ════════════════════════════════════════════════════════════ */
.plan-card__amount {
  display: inline-block;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.plan-card__amount.is-changing {
  transform: translateY(-8px);
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════
   ANIMACIÓN DEL MENÚ HAMBURGUESA
   Controlada también via JavaScript (clase .is-open)
   ════════════════════════════════════════════════════════════ */
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ════════════════════════════════════════════════════════════
   DESACTIVAR ANIMACIONES SI EL USUARIO LO PREFIERE
   (configuración del sistema operativo: "reducir movimiento")
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}