/* ============================================================
   NOUMBU — Capa de profundidad 3D
   Se carga DESPUÉS de styles.css. No modifica el diseño base:
   sólo añade perspectiva, relieve y luz sobre las clases existentes.
   Para revertir: eliminar el <link> de este archivo en index.html.
   ============================================================ */

:root {
    --n3d-gold: 201, 169, 97;
    --n3d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------
   1. HERO — escena con profundidad
   ------------------------------------------------------------ */

.hero-new {
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

/* Rejilla en fuga (suelo 3D) */
.hero-new-bg::before {
    content: '';
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -8%;
    height: 62%;
    background-image:
        linear-gradient(rgba(var(--n3d-gold), 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--n3d-gold), 0.16) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(560px) rotateX(74deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
    animation: n3dGrid 22s linear infinite;
    pointer-events: none;
    /* .hero-new-bg tiene z-index:-1 => es contexto de apilamiento propio.
       Sin este z-index la rejilla quedaría bajo el fondo opaco del hero. */
    z-index: 1;
}

@keyframes n3dGrid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 64px, 0 0; }
}

/* Halo superior */
.hero-new-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 420px at 50% -12%, rgba(var(--n3d-gold), 0.20) 0%, transparent 68%),
        radial-gradient(600px 380px at 88% 8%, rgba(18, 18, 18, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 3;
}

/* Esferas flotantes desenfocadas — dan capas de profundidad */
.hero-new-gradient::before,
.hero-new-gradient::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    pointer-events: none;
    /* .hero-new-gradient no crea contexto propio (z-index:auto), así que
       estas esferas se ordenan dentro de .hero-new-bg: por encima de la rejilla. */
    z-index: 2;
}

.hero-new-gradient::before {
    width: 380px;
    height: 380px;
    top: 4%;
    left: -6%;
    background: radial-gradient(circle at 35% 35%, rgba(var(--n3d-gold), 0.34), rgba(var(--n3d-gold), 0) 68%);
    animation: n3dFloatA 16s ease-in-out infinite;
}

.hero-new-gradient::after {
    width: 300px;
    height: 300px;
    top: 34%;
    right: -4%;
    background: radial-gradient(circle at 60% 40%, rgba(212, 181, 116, 0.28), rgba(212, 181, 116, 0) 70%);
    animation: n3dFloatB 20s ease-in-out infinite;
}

@keyframes n3dFloatA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(40px, -32px, 0) scale(1.10); }
}

@keyframes n3dFloatB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-34px, 30px, 0) scale(0.92); }
}

/* Parallax del contenido del hero (variables las mueve depth-3d.js) */
.hero-new-content {
    transform: translate3d(var(--n3d-hx, 0px), var(--n3d-hy, 0px), 0);
    transition: transform 400ms var(--n3d-ease);
    will-change: transform;
}

/* Titular con relieve */
.hero-new-title {
    text-shadow:
        0 1px 0 rgba(18, 18, 18, 0.10),
        0 2px 0 rgba(18, 18, 18, 0.08),
        0 3px 0 rgba(18, 18, 18, 0.06),
        0 4px 1px rgba(18, 18, 18, 0.05),
        0 10px 24px rgba(18, 18, 18, 0.16);
}

/* El span dorado usa background-clip:text — la sombra se vería a través del glifo */
.hero-new-title-gold {
    text-shadow: none;
    filter: drop-shadow(0 5px 14px rgba(var(--n3d-gold), 0.45));
}

/* Badge elevado */
.hero-new-badge {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 6px 18px rgba(var(--n3d-gold), 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Botones con volumen real */
.hero-new-btn-primary {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 10px 22px rgba(18, 18, 18, 0.32),
        0 3px 6px rgba(18, 18, 18, 0.22);
}

.hero-new-btn-primary:active,
.hero-new-btn-secondary:active {
    transform: translateY(1px) !important;
}

.hero-new-btn-secondary {
    box-shadow: 0 6px 14px rgba(18, 18, 18, 0.08);
}

/* ------------------------------------------------------------
   2. TARJETAS — perspectiva + inclinación con el cursor
   ------------------------------------------------------------ */

.hero-new-stats,
.why-us-grid,
.features-grid,
.modules-grid,
.pricing-grid {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.n3d-tilt {
    transform-style: preserve-3d;
    transition: transform 420ms var(--n3d-ease), box-shadow 420ms ease;
}

/* Mientras el puntero está encima seguimos el movimiento sin retardo.
   will-change sólo aquí: promover ~30 tarjetas a capa propia de forma
   permanente cuesta memoria de GPU sin ganar nada. */
.n3d-tilt.n3d-active {
    will-change: transform;
    transition: transform 90ms linear, box-shadow 300ms ease;
}

/* Reposo: sombra en capas para que la tarjeta "flote" sobre el fondo */
.why-us-card.n3d-tilt,
.feature-card.n3d-tilt,
.module-card.n3d-tilt,
.pricing-card.n3d-tilt,
.hero-new-stat-card.n3d-tilt {
    box-shadow:
        0 1px 1px rgba(18, 18, 18, 0.04),
        0 4px 8px rgba(18, 18, 18, 0.05),
        0 12px 24px rgba(18, 18, 18, 0.05);
}

/* Inclinación 3D — !important para ganar a los :hover ya existentes */
.why-us-card.n3d-tilt:hover,
.feature-card.n3d-tilt:hover,
.module-card.n3d-tilt:hover,
.pricing-card.n3d-tilt:hover,
.hero-new-stat-card.n3d-tilt:hover {
    transform:
        perspective(1000px)
        rotateX(var(--n3d-rx, 0deg))
        rotateY(var(--n3d-ry, 0deg))
        translate3d(0, -12px, 26px) !important;
    box-shadow:
        0 2px 4px rgba(18, 18, 18, 0.06),
        0 12px 24px rgba(18, 18, 18, 0.10),
        0 28px 56px rgba(18, 18, 18, 0.14),
        0 18px 44px rgba(var(--n3d-gold), 0.20) !important;
    border-color: rgba(var(--n3d-gold), 0.85) !important;
}

/* Brillo especular que sigue al cursor (elemento inyectado por JS) */
.n3d-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
    background: radial-gradient(
        280px circle at var(--n3d-mx, 50%) var(--n3d-my, 50%),
        rgba(var(--n3d-gold), 0.22) 0%,
        rgba(var(--n3d-gold), 0.06) 38%,
        transparent 68%
    );
    z-index: 2;
}

.n3d-tilt:hover > .n3d-sheen {
    opacity: 1;
}

/* El contenido interno se despega del plano de la tarjeta */
.n3d-tilt .feature-icon,
.n3d-tilt .why-us-icon,
.n3d-tilt .module-header,
.n3d-tilt .pricing-price,
.n3d-tilt .hero-new-stat-number {
    transform-style: preserve-3d;
    transition: transform 420ms var(--n3d-ease), text-shadow 420ms ease;
}

.n3d-tilt:hover .feature-icon {
    transform: translateZ(42px) scale(1.14) rotate(6deg);
    box-shadow: 0 14px 30px rgba(var(--n3d-gold), 0.38);
}

.n3d-tilt:hover .why-us-icon {
    transform: translateZ(46px) scale(1.16);
    text-shadow: 0 12px 22px rgba(18, 18, 18, 0.22);
}

.n3d-tilt:hover .feature-title,
.n3d-tilt:hover .module-header,
.n3d-tilt:hover .pricing-price,
.n3d-tilt:hover .hero-new-stat-number,
.n3d-tilt:hover .why-us-card h3 {
    transform: translateZ(26px);
}

.n3d-tilt .feature-title,
.n3d-tilt .why-us-card h3 {
    transition: transform 420ms var(--n3d-ease);
}

/* Módulo destacado: siempre un paso al frente */
.module-card.featured.n3d-tilt {
    transform: translate3d(0, -6px, 18px);
    box-shadow:
        0 10px 20px rgba(18, 18, 18, 0.07),
        0 24px 48px rgba(var(--n3d-gold), 0.16);
}

/* Plan destacado: idem */
.pricing-card.featured.n3d-tilt,
.pricing-card-popular.n3d-tilt {
    transform: translate3d(0, -8px, 22px);
    box-shadow:
        0 12px 24px rgba(18, 18, 18, 0.08),
        0 30px 60px rgba(var(--n3d-gold), 0.22) !important;
}

/* ------------------------------------------------------------
   3. CTA — profundidad sobre fondo oscuro
   ------------------------------------------------------------ */

.cta {
    perspective: 1000px;
}

.cta::after {
    content: '';
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -12%;
    height: 58%;
    background-image:
        linear-gradient(rgba(var(--n3d-gold), 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--n3d-gold), 0.22) 1px, transparent 1px);
    background-size: 58px 58px;
    transform: perspective(520px) rotateX(76deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    animation: n3dGrid 26s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.cta-content {
    z-index: 2;
}

.cta-content h2 {
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 14px 30px rgba(0, 0, 0, 0.45);
}

.cta .btn-white {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 26px rgba(0, 0, 0, 0.35);
    transition: transform 300ms var(--n3d-ease), box-shadow 300ms ease;
}

.cta .btn-white:hover {
    transform: translate3d(0, -4px, 20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   4. Aparición con profundidad al hacer scroll
   ------------------------------------------------------------ */

.n3d-reveal {
    opacity: 0;
    transform: perspective(1000px) translate3d(0, 34px, -60px) rotateX(7deg);
    transition: opacity 700ms ease, transform 700ms var(--n3d-ease);
    will-change: opacity, transform;
}

.n3d-reveal.n3d-in {
    opacity: 1;
    transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0deg);
}

/* ------------------------------------------------------------
   5. Flotante de WhatsApp con volumen
   ------------------------------------------------------------ */

.whatsapp-float {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 10px 24px rgba(37, 211, 102, 0.42),
        0 4px 8px rgba(0, 0, 0, 0.20);
    transition: transform 300ms var(--n3d-ease), box-shadow 300ms ease;
}

.whatsapp-float:hover {
    transform: translate3d(0, -5px, 30px) scale(1.06);
    box-shadow:
        0 18px 38px rgba(37, 211, 102, 0.5),
        0 8px 14px rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------
   6. Móvil / accesibilidad
   El tilt sólo se activa por JS en punteros finos; aquí desactivamos
   los efectos costosos para no penalizar el rendimiento en móvil.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    .hero-new-bg::before,
    .cta::after {
        display: none;
    }

    .hero-new-gradient::before,
    .hero-new-gradient::after {
        filter: blur(44px);
        animation: none;
        opacity: 0.75;
    }

    .hero-new-title {
        text-shadow: 0 2px 0 rgba(18, 18, 18, 0.08), 0 6px 16px rgba(18, 18, 18, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-new-bg::before,
    .cta::after,
    .hero-new-gradient::before,
    .hero-new-gradient::after {
        animation: none !important;
    }

    .n3d-tilt,
    .n3d-tilt:hover,
    .n3d-reveal,
    .hero-new-content {
        transform: none !important;
        transition: none !important;
    }

    .n3d-reveal {
        opacity: 1 !important;
    }

    .n3d-sheen {
        display: none;
    }
}