/* =====================================================================
   JaguarSystem — Capa de efectos (noviembre 2026)
   Se carga DESPUÉS de styles.css. Cada efecto se activa con una clase en
   <html> (fx-hero, fx-cifras, fx-luz, fx-planes, fx-flotante, fx-suave),
   así se puede apagar uno sin tocar el resto. Con prefers-reduced-motion
   todo queda quieto (ver el final del archivo).
   ===================================================================== */

/* ---------- 1. HERO ANIMADO ---------- */
.fx-hero .hero { isolation: isolate; }
.fx-aurora { display: none; }
.fx-hero .fx-aurora {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.fx-hero .fx-aurora i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  will-change: transform;
}
.fx-hero .fx-aurora i:nth-child(1) {
  width: 520px; height: 520px; left: -140px; top: -160px;
  background: radial-gradient(circle, #9fd0f7 0%, transparent 65%);
  animation: fx-drift-a 18s ease-in-out infinite alternate;
}
.fx-hero .fx-aurora i:nth-child(2) {
  width: 460px; height: 460px; right: 8%; top: 18%;
  background: radial-gradient(circle, #b9c9ff 0%, transparent 65%);
  animation: fx-drift-b 22s ease-in-out infinite alternate;
}
.fx-hero .fx-aurora i:nth-child(3) {
  width: 380px; height: 380px; left: 35%; bottom: -200px;
  background: radial-gradient(circle, #a8ecff 0%, transparent 65%);
  animation: fx-drift-a 26s ease-in-out infinite alternate-reverse;
}
@keyframes fx-drift-a { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes fx-drift-b { to { transform: translate(-110px, 60px) scale(.9); } }

/* Palabra que cambia en el título */
.fx-rotador { display: inline-block; position: relative; }
.fx-rotador .fx-palabra { display: inline-block; transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.fx-rotador .fx-palabra.fx-sale { opacity: 0; transform: translateY(-.35em); filter: blur(6px); }
.fx-rotador .fx-palabra.fx-entra { opacity: 0; transform: translateY(.35em); filter: blur(6px); transition: none; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tarjeta del logo con inclinación 3D y chips flotando */
.fx-hero .hero-visual { perspective: 1000px; }
.fx-hero .hero-visual-card {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  transform: translate(-50%, -50%) rotate(-4deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.fx-hero .hero-visual-orbit-one { animation: fx-girar 60s linear infinite; }
.fx-hero .hero-visual-chip { animation: fx-flotar 6s ease-in-out infinite; }
.fx-hero .hero-visual-chip-two { animation-delay: -2s; }
.fx-hero .hero-visual-chip-three { animation-delay: -4s; }
@keyframes fx-girar { from { transform: rotate(17deg); } to { transform: rotate(377deg); } }
@keyframes fx-flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Entrada escalonada del hero al cargar */
.fx-hero .hero-inner > .reveal:nth-child(2) { transition-delay: .08s; }
.fx-hero .hero-inner > .reveal:nth-child(3) { transition-delay: .16s; }
.fx-hero .hero-inner > .reveal:nth-child(4) { transition-delay: .24s; }

/* ---------- 2. CIFRAS QUE CUENTAN ---------- */
.fx-cifras .trust-num { font-variant-numeric: tabular-nums; }

/* ---------- 3. LUZ QUE SIGUE EL CURSOR + BRILLO EN BOTONES ---------- */
.fx-luz .card, .fx-luz .plan, .fx-luz .feature { position: relative; }
.fx-luz .card::after, .fx-luz .plan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(79,150,225,.13), transparent 45%);
  opacity: 0; transition: opacity .35s ease;
}
.fx-luz .card:hover::after, .fx-luz .plan:hover::after { opacity: 1; }
.fx-luz .card, .fx-luz .plan { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.fx-luz .card:hover, .fx-luz .plan:hover { transform: translateY(-6px); }
.fx-luz .card:hover .card-icon, .fx-luz .feature:hover .feature-icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
.fx-luz .card-icon, .fx-luz .feature-icon { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }

.fx-luz .btn-primary, .fx-luz .btn-light { position: relative; overflow: hidden; isolation: isolate; }
.fx-luz .btn-primary::before, .fx-luz .btn-light::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.fx-luz .btn-primary:hover::before, .fx-luz .btn-light:hover::before { left: 120%; }
.fx-luz .btn { transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.fx-luz .btn:active { transform: translateY(0) scale(.98); }

/* ---------- 4. PLANES REALES (4 planes, venta anual) ---------- */
.pricing-real { display: none; }
.fx-planes .pricing-real { display: grid; }
.fx-planes .pricing-demo, .fx-planes .billing-toggle { display: none; }
.pricing-real { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: stretch; }
.pricing-real .plan { padding: 1.7rem 1.5rem; }
.pricing-real .plan-price .amount { font-size: 2.6rem; }
.pricing-real .plan-price-note { display: block; }
.pricing-real .plan-features { font-size: .93rem; }
.pricing-real .reveal:nth-child(4) { transition-delay: .24s; }
@media (max-width: 1100px) { .pricing-real { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }
@media (max-width: 640px) { .pricing-real { grid-template-columns: 1fr; max-width: 460px; } }

/* ---------- 5. BOTÓN WHATSAPP FLOTANTE + BARRA DE PROGRESO ---------- */
.fx-wa, .fx-progreso { display: none; }
.fx-flotante .fx-progreso {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001;
  background: linear-gradient(90deg, #7fd3ff, #ffffff); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  pointer-events: none;
}
.fx-flotante .fx-wa {
  display: grid; place-items: center; position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%; color: #fff; background: #25d366;
  box-shadow: 0 10px 28px rgba(18, 140, 70, .35);
  transform: translateY(120px); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease, box-shadow .25s ease;
}
.fx-flotante .fx-wa.fx-visible { transform: none; opacity: 1; }
.fx-flotante .fx-wa:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(18, 140, 70, .45); }
.fx-flotante .fx-wa svg { width: 30px; height: 30px; }
.fx-flotante .fx-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366;
  animation: fx-pulso 2.6s ease-out infinite;
}
@keyframes fx-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.fx-wa-tip {
  position: absolute; right: 70px; white-space: nowrap; padding: .45rem .8rem; border-radius: 10px;
  background: #fff; color: #173e6b; font-size: .85rem; font-weight: 700;
  box-shadow: 0 8px 22px rgba(23, 62, 107, .16); opacity: 0; transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.fx-wa:hover .fx-wa-tip, .fx-wa:focus-visible .fx-wa-tip { opacity: 1; transform: none; }
@media (max-width: 640px) { .fx-flotante .fx-wa { right: 14px; bottom: 14px; width: 54px; height: 54px; } .fx-wa-tip { display: none; } }
body.modal-open .fx-wa { opacity: 0 !important; pointer-events: none; }

/* ---------- 6. TRANSICIONES SUAVES + APARICIONES MÁS FINAS ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.fx-suave .reveal { transform: translateY(28px) scale(.985); filter: blur(6px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.fx-suave .reveal.in { transform: none; filter: none; }
.fx-suave .hero .reveal, .fx-suave .page-hero .reveal { filter: none; transition-duration: .6s; } /* la portada aparece rápido */
.fx-suave .section-head .eyebrow { transition: letter-spacing .8s ease; }
.fx-suave .section-head:not(.in) .eyebrow { letter-spacing: .3em; }
html.fx-suave { scroll-behavior: smooth; }
/* Cuando ya apareció, el hover vuelve a ser ágil */
html .reveal.in.fx-listo { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }

/* ---------- 7. RED DE DATOS EN LA PORTADA (canvas) ---------- */
.fx-red-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fx-red-canvas.fx-listo-red { opacity: 1; }
html:not(.fx-red) .fx-red-canvas { display: none; }

/* ---------- MOVIMIENTO REDUCIDO: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.fx-suave { scroll-behavior: auto; }
  .fx-aurora i, .hero-visual-orbit-one, .hero-visual-chip, .fx-wa::after { animation: none !important; }
  .fx-suave .reveal { filter: none; transform: none; transition: none; }
  .fx-rotador .fx-palabra { transition: none; }
  .fx-hero .hero-visual-card { transition: none; transform: translate(-50%, -50%) rotate(-4deg); }
  .fx-luz .card:hover, .fx-luz .plan:hover { transform: none; }
  .fx-luz .btn-primary::before, .fx-luz .btn-light::before { display: none; }
  .fx-flotante .fx-wa { transition: none; }
}