/* =============================================================
   Animaciones — entrada del hero, aparición al deslizar,
   micro-interacciones de botones y tarjetas.
   Todo usa transform/opacity (fluido) y se desactiva con
   «reducir movimiento». Sin JavaScript, todo se ve igual (sin animar).
   ============================================================= */

:root {
  --duration-reveal: 600ms;          /* aparición al deslizar */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger: 90ms;
}

/* ---------- Aparición al deslizar ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal="izq"] { transform: translateX(-32px); }
.js [data-reveal="der"] { transform: translateX(32px); }
.js [data-reveal="zoom"] { transform: scale(0.94); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Entrada del hero (landing) ---------- */
@keyframes subeEntra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lineaEntra { from { opacity: 0; transform: translateY(0.6em) rotate(2deg); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
@keyframes logoEntra { 0% { opacity: 0; transform: scale(0.8) rotate(-6deg); } 70% { opacity: 1; transform: scale(1.04) rotate(1deg); } 100% { transform: none; } }
@keyframes cartaEntra { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes orbe { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }
@keyframes subrayado { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.js .hero .announce      { animation: subeEntra 600ms var(--ease) both 100ms; }
.js .hero .hero-logo     { animation: logoEntra 800ms var(--ease) both 200ms; }
.js .hero .hero-tagline .linea { display: inline-block; animation: lineaEntra 700ms var(--ease) both; }
.js .hero .hero-tagline .linea:nth-child(1) { animation-delay: 380ms; }
.js .hero .hero-tagline .linea:nth-child(2) { animation-delay: 480ms; }
.js .hero .hero-tagline .linea:nth-child(3) { animation-delay: 580ms; }
.js .hero .hero-lead     { animation: subeEntra 600ms var(--ease) both 720ms; }
.js .hero .hero-ctas     { animation: subeEntra 600ms var(--ease) both 820ms; }
.js .hero .trust         { animation: subeEntra 600ms var(--ease) both 950ms; }
.js .hero .fc-back  { animation: cartaEntra 900ms var(--ease) both 900ms, flota 7s ease-in-out 1.8s infinite; }
.js .hero .fc-front { animation: cartaEntra 900ms var(--ease) both 1000ms, flota 6s ease-in-out 1.9s infinite; }
.js .hero .fc-side  { animation: cartaEntra 900ms var(--ease-spring) both 1150ms, flota 5s ease-in-out 2.1s infinite; }

/* «ACTÚA.» con subrayado lima que se dibuja */
.hero-tagline em, .cta-title em { position: relative; }
.hero-tagline em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.08em;
  border-radius: var(--radius-full); background: var(--color-accent);
  transform-origin: left; transform: scaleX(1);
}
.js .hero-tagline em::after { animation: subrayado 700ms var(--ease) both 1100ms; }

/* Orbe que respira */
.hero-orb, .hero-orb-app { animation: orbe 14s ease-in-out infinite; }

/* Parallax suave de las tarjetas del hero (lo mueve JS) */
.hero-stage { transform: translateY(var(--parallax, 0)); will-change: transform; }

/* ---------- Navegación al deslizar ---------- */
.nav { transition: box-shadow var(--duration) var(--ease), min-height var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.nav-wrap.is-scrolled .nav { box-shadow: var(--shadow-float); background: var(--color-white); }

/* ---------- Botones ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease),
              color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
@media (hover: hover) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn-ghost:hover { box-shadow: none; }
  /* Destello que cruza los botones principales */
  .btn-primary::before, .btn-accent::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  .btn-primary:hover::before, .btn-accent:hover::before { transform: translateX(120%); transition: transform 700ms var(--ease); }
  /* La flecha / icono final se desplaza un poco */
  .btn:hover .icon:last-child:not(:first-child), .announce:hover .icon { transform: translateX(3px); }
  .btn .icon, .announce .icon { transition: transform var(--duration) var(--ease); }
  .btn:hover .icon:first-child { transform: scale(1.12) rotate(-6deg); }
}
.btn:not(:disabled):active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: var(--duration-fast); }

/* Onda al pulsar (la crea JS) */
.onda {
  position: absolute; z-index: -1; border-radius: var(--radius-full);
  background: currentColor; opacity: 0.22; pointer-events: none;
  transform: scale(0); animation: onda 550ms var(--ease) forwards;
}
@keyframes onda { to { transform: scale(1); opacity: 0; } }

/* Botón principal del hero: latido suave para invitar a pulsar */
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }
.js .hero-ctas .btn-accent, .js .cta-final .btn-accent { animation: latido 2.6s ease-in-out 2.2s infinite; }
.js .hero-ctas .btn-accent:hover, .js .cta-final .btn-accent:hover { animation: none; }

/* ---------- Tarjetas y elementos interactivos ---------- */
@media (hover: hover) {
  .how-step, .benefits .card, .trust-points li, .price-card, .metodo, .card-link, .pain-list li {
    transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease), border-color var(--duration-slow) var(--ease);
  }
  .how-step:hover, .benefits .card:hover, .trust-points li:hover, .price-card:hover, .metodo:hover, .card-link:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary);
  }
  .price-card.is-featured:hover { transform: translateY(-6px); }
  .how-step:hover .card-icon, .benefits .card:hover .card-icon, .metodo:hover .card-icon { transform: scale(1.1) rotate(-6deg); }
  .how-step:hover .how-num { color: var(--color-primary); }
  .card-icon { transition: transform var(--duration-slow) var(--ease-spring); }
  .how-num { transition: color var(--duration-slow) var(--ease); }
  .demo-result { transition: transform 500ms var(--ease); }
  .feature-stage:hover .demo-result { transform: rotate(0deg) scale(1.01); }
  .feature-stage:hover .demo-tilt { transform: rotate(2deg) translateY(-6px); }
  .demo-tilt { transition: transform 500ms var(--ease); }
  .chip { transition: all var(--duration) var(--ease); }
  .chip:hover { transform: translateY(-1px); }
  .trust-list li { transition: opacity var(--duration) var(--ease); }
  .trust-list li:hover { opacity: 1; }
}

/* Etiqueta «Recomendado» con brillo */
@keyframes brilloTag { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.price-card.is-featured .tag { animation: brilloTag 2.4s ease-in-out infinite; }

/* FAQ: el contenido se despliega suave */
.details[open] .details-body { animation: subeEntra 300ms var(--ease); }

/* ---------- Acceso ---------- */
.js .acceso-card { animation: subeEntra 600ms var(--ease) both 100ms; }
.js .acceso-marca > img, .js .acceso-marca > a { animation: logoEntra 800ms var(--ease) both 150ms; }
.js .acceso-lema { animation: subeEntra 700ms var(--ease) both 300ms; }
.js .acceso-puntos li { animation: subeEntra 500ms var(--ease) both; }
.js .acceso-puntos li:nth-child(1) { animation-delay: 500ms; }
.js .acceso-puntos li:nth-child(2) { animation-delay: 600ms; }
.js .acceso-puntos li:nth-child(3) { animation-delay: 700ms; }

/* ---------- App ---------- */
.vista .home-hero h1 { animation: subeEntra 600ms var(--ease) both 80ms; }
.vista .home-hero .muted { animation: subeEntra 600ms var(--ease) both 160ms; }
/* Listas: los elementos entran escalonados */
.vista .list > *, .vista .metodos > *, .vista .steps > *, .vista .home-actions > *, .vista .pricing > *, .vista .temas > * {
  animation: subeEntra 450ms var(--ease) both;
}
.vista .list > *:nth-child(2), .vista .metodos > *:nth-child(2), .vista .steps > *:nth-child(2), .vista .home-actions > *:nth-child(2), .vista .pricing > *:nth-child(2) { animation-delay: 60ms; }
.vista .list > *:nth-child(3), .vista .metodos > *:nth-child(3), .vista .steps > *:nth-child(3), .vista .home-actions > *:nth-child(3), .vista .pricing > *:nth-child(3) { animation-delay: 120ms; }
.vista .list > *:nth-child(4), .vista .steps > *:nth-child(4) { animation-delay: 180ms; }
.vista .list > *:nth-child(n+5), .vista .steps > *:nth-child(n+5) { animation-delay: 240ms; }
.vista .q-card, .vista .source { animation: subeEntra 450ms var(--ease) both; }
.vista .res-p > *:nth-child(2) { animation-delay: 80ms; }
.vista .res-p > *:nth-child(3) { animation-delay: 140ms; }

/* Barra de progreso: se llena al aparecer */
@keyframes llena { from { transform: scaleX(0); } }
.progress > span { transform-origin: left; animation: llena 800ms var(--ease) both 200ms; }

/* Paso completado: el número salta */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.step.is-done .step-num { animation: pop 400ms var(--ease-spring); }

/* Botón central «Analizar» con halo */
@keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent), var(--shadow-md); } 100% { box-shadow: 0 0 0 14px transparent, var(--shadow-md); } }
.fab { animation: halo 2.4s ease-out infinite; transition: transform var(--duration) var(--ease-spring); }
.bottom-fab:active .fab { transform: scale(0.9); }
.bottom-nav a .icon { transition: transform var(--duration) var(--ease-spring); }
.bottom-nav a[aria-current="page"] .icon { transform: translateY(-2px) scale(1.1); }
.side-nav a .icon { transition: transform var(--duration) var(--ease-spring); }
.side-nav a:hover .icon { transform: scale(1.12); }

/* Tarjeta de fecha límite: el reloj relativo late si es urgente */
@keyframes aviso { 0%, 100% { transform: none; } 50% { transform: scale(1.05); } }
.deadline-rel { animation: aviso 2s ease-in-out 3; }

/* Estado de análisis: cada paso entra al completarse */
.analisis-paso { transition: all 350ms var(--ease); }
.analisis-paso.is-hecho { transform: translateX(4px); border-color: var(--color-success); }

/* Pantalla vacía / error: icono con rebote */
.state-icon { animation: logoEntra 600ms var(--ease) both; }

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-orb, .hero-orb-app, .fab, .price-card.is-featured .tag, .deadline-rel,
  .js .hero-ctas .btn-accent, .js .cta-final .btn-accent { animation: none !important; }
  .js .hero .fc-back, .js .hero .fc-front, .js .hero .fc-side { animation: cartaEntra 1ms both !important; }
  .hero-stage { transform: none; }
}