/* =====================================================================
   GRUPO ENFOQUE PERÚ — CAPA DE EFECTOS ÚNICOS (aditiva, no destructiva)
   v2 — INTENSIFICADA. Carga DESPUÉS de styles.css. Gateado por body.fx-on
   para que sin JS el contenido quede 100% visible. Respeta reduce-motion.
   ===================================================================== */

/* ------- FIX RESPONSIVE: hamburguesa antes de que el nav se desborde ------- */
@media (max-width: 1180px) {
    .nav-menu { display: none; }
    .menu-toggle { display: block; }
}

/* ------- 1. BARRA DE PROGRESO DE SCROLL (top) ------- */
.fx-progress {
    position: fixed; top: 0; left: 0; height: 4px; width: 0%;
    z-index: 100000; pointer-events: none;
    background: linear-gradient(90deg, var(--naranja), var(--dorado), var(--cian), var(--naranja));
    background-size: 300% 100%;
    box-shadow: 0 0 16px rgba(232,101,42,.8);
    transition: width .08s linear;
    animation: fxBarFlow 4s linear infinite;
}
@keyframes fxBarFlow { to { background-position: 300% 0; } }

/* ------- 2. SPOTLIGHT / BLOB QUE SIGUE AL CURSOR (más visible) ------- */
.fx-cursor {
    position: fixed; top: 0; left: 0; width: 560px; height: 560px;
    margin: -280px 0 0 -280px; border-radius: 50%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle, rgba(43,165,199,.28) 0%, rgba(244,168,61,.16) 40%, transparent 70%);
    opacity: 0; transition: opacity .5s ease;
    will-change: transform; filter: blur(6px); mix-blend-mode: normal;
}
body.fx-on .fx-cursor.is-active { opacity: 1; }

/* ------- 3. SCROLL REVEAL (más notorio: + desplazamiento, blur-in, escala) ------- */
body.fx-on [data-reveal] {
    opacity: 0;
    transform: translateY(58px) scale(.97);
    filter: blur(6px);
    transition: opacity .8s cubic-bezier(.16,.84,.30,1),
                transform .8s cubic-bezier(.16,.84,.30,1),
                filter .8s ease;
    will-change: opacity, transform, filter;
}
body.fx-on [data-reveal].fx-in { opacity: 1; transform: none; filter: none; }
body.fx-on [data-reveal-left]  { transform: translateX(-70px) scale(.97); }
body.fx-on [data-reveal-right] { transform: translateX(70px) scale(.97); }
body.fx-on [data-reveal-zoom]  { transform: scale(.82); }
body.fx-on [data-reveal].fx-in[data-reveal-left],
body.fx-on [data-reveal].fx-in[data-reveal-right],
body.fx-on [data-reveal].fx-in[data-reveal-zoom] { transform: none; }

/* ------- 4. TILT 3D + BRILLO INTENSO en tarjetas ------- */
body.fx-on .fx-tilt {
    transform-style: preserve-3d;
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
    will-change: transform;
}
body.fx-on .fx-tilt .fx-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.55), rgba(255,255,255,.12) 30%, transparent 55%);
    opacity: 0; transition: opacity .3s ease; z-index: 4; mix-blend-mode: soft-light;
}
body.fx-on .fx-tilt.is-tilting {
    box-shadow: 0 30px 70px rgba(13,59,94,.32), 0 0 0 1px rgba(43,165,199,.25);
}
body.fx-on .fx-tilt.is-tilting .fx-glare { opacity: 1; }

/* ------- 5. BOTONES MAGNÉTICOS + GLOW PULSANTE + RIPPLE ------- */
body.fx-on .fx-magnetic { will-change: transform; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
body.fx-on .btn-primary, body.fx-on .btn-calcular { position: relative; overflow: hidden; }
body.fx-on .btn-primary::after, body.fx-on .btn-calcular::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 0; height: 0; border-radius: 50%; transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
    transition: width .55s ease, height .55s ease, opacity .6s ease;
    opacity: 0; pointer-events: none;
}
body.fx-on .btn-primary:hover::after, body.fx-on .btn-calcular:hover::after {
    width: 480px; height: 480px; opacity: 1;
}
body.fx-on .btn-primary:hover, body.fx-on .btn-calcular:hover {
    box-shadow: 0 0 28px rgba(232,101,42,.55), 0 10px 30px rgba(232,101,42,.35);
}

/* ------- 6. LOGO ANIMADO (giro + latido de las 4 figuras) ------- */
body.fx-on .logo .logo-svg { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
body.fx-on .logo:hover .logo-svg { transform: rotate(180deg) scale(1.1); }
body.fx-on .logo .logo-svg circle { transition: transform .5s ease; transform-origin: center; transform-box: fill-box; }
body.fx-on .logo:hover .logo-svg circle { animation: fxPetalo 1.2s ease-in-out infinite; }
@keyframes fxPetalo { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.28);} }

/* ------- 7. TÍTULOS: subrayado animado con glow + shimmer del <span> ------- */
body.fx-on .section-title { position: relative; }
body.fx-on .section-title::after {
    content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) scaleX(0);
    width: 110px; height: 5px; border-radius: 5px; transform-origin: center;
    background: linear-gradient(90deg, var(--naranja), var(--dorado), var(--cian));
    box-shadow: 0 0 16px rgba(244,168,61,.7);
    transition: transform .9s cubic-bezier(.16,.84,.30,1) .15s;
}
body.fx-on .section-title.fx-in::after { transform: translateX(-50%) scaleX(1); }
body.fx-on .section-title span,
body.fx-on .hero-content h1 span {
    background: linear-gradient(100deg, currentColor 0%, currentColor 38%, #ffffff 50%, currentColor 62%, currentColor 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: fxShimmer 5s linear infinite;
}
@keyframes fxShimmer { 0%{ background-position: 160% 0;} 100%{ background-position: -160% 0;} }

/* ------- 8. HERO: parallax + aurora intensa + orbes flotantes ------- */
body.fx-on .hero { position: relative; overflow: hidden; }
body.fx-on .hero .hero-content { will-change: transform; position: relative; z-index: 3; }
body.fx-on .hero::before {
    content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 38% at 15% 22%, rgba(43,165,199,.38), transparent 60%),
        radial-gradient(42% 42% at 85% 78%, rgba(232,101,42,.34), transparent 60%),
        radial-gradient(38% 38% at 62% 8%,  rgba(244,168,61,.30), transparent 60%);
    animation: fxAurora 14s ease-in-out infinite alternate;
    filter: blur(14px);
}
@keyframes fxAurora {
    0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(3%, 2.5%, 0) scale(1.12) rotate(2deg); }
    100% { transform: translate3d(-3%, -1.5%, 0) scale(1.06) rotate(-2deg); }
}
/* orbes flotantes (inyectados por JS) */
body.fx-on .fx-orb {
    position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; filter: blur(2px);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(43,165,199,.18) 60%, transparent 70%);
    opacity: .5; animation: fxFloat var(--dur,12s) ease-in-out infinite alternate;
}
@keyframes fxFloat {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(var(--dx,30px), var(--dy,-40px)) scale(1.25); }
}

/* ------- 9. TIMELINE: línea que se "dibuja" con glow ------- */
body.fx-on .timeline { position: relative; }
body.fx-on .timeline .fx-timeline-progress {
    position: absolute; top: 0; width: 4px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--naranja), var(--dorado), var(--cian)); height: 0%;
    z-index: 1; transition: height .15s linear; box-shadow: 0 0 18px rgba(43,165,199,.7);
}
@media (max-width: 768px) { body.fx-on .timeline .fx-timeline-progress { left: 20px; } }

/* ------- 10. BOTÓN VOLVER ARRIBA (con pulso) ------- */
.fx-top {
    position: fixed; bottom: 96px; right: 24px; width: 48px; height: 48px; border-radius: 50%;
    background: var(--azul-navy); color: #fff; border: none; cursor: pointer; z-index: 9998;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    box-shadow: 0 8px 24px rgba(13,59,94,.4);
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.8);
    transition: opacity .35s, visibility .35s, transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
}
.fx-top.is-show { opacity: 1; visibility: visible; transform: none; }
.fx-top:hover { background: var(--naranja); transform: translateY(-4px) scale(1.08); box-shadow: 0 0 24px rgba(232,101,42,.6); }

/* ------- 11. STATS: pop fuerte del ícono + del número al revelarse ------- */
body.fx-on .stat-card-new.fx-in .stat-icon-new { animation: fxPop .7s cubic-bezier(.18,.84,.30,1.4); }
body.fx-on .stat-card-new.fx-in .stat-number-new { animation: fxRise .8s cubic-bezier(.16,.84,.30,1); }
@keyframes fxPop { 0%{ transform: scale(.2) rotate(-12deg); opacity:0;} 60%{ transform: scale(1.25) rotate(4deg);} 100%{ transform: scale(1) rotate(0); opacity:1;} }
@keyframes fxRise { 0%{ transform: translateY(18px); opacity:0; letter-spacing: 2px;} 100%{ transform: none; opacity:1; letter-spacing: normal;} }
body.fx-on .stat-number-new.fx-bump { animation: fxBump .5s cubic-bezier(.18,.84,.30,1.5); }
@keyframes fxBump { 0%{ transform: scale(1);} 45%{ transform: scale(1.22);} 100%{ transform: scale(1);} }

/* ------- 12. TARJETAS DE UNIDAD/ALIADO: lift extra al hover (refuerza el tilt) ------- */
body.fx-on .unidad-card, body.fx-on .ally-card { transition: box-shadow .3s ease; }

/* ------- ACCESIBILIDAD: respetar reduce-motion ------- */
@media (prefers-reduced-motion: reduce) {
    body.fx-on [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
    .fx-cursor, .fx-progress, .fx-orb, body.fx-on .hero::before,
    body.fx-on .section-title span, body.fx-on .hero-content h1 span { animation: none !important; }
    body.fx-on .fx-tilt { transform: none !important; }
}