/* ========================================== HERO ========================================== */
.hero{
    min-height:100vh;
    padding:130px 0 80px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden
}

.hero::before{
    content:"";
    position:absolute;
    right:-250px;
    top:-150px;
    width:700px;
    height:700px;
    background:radial-gradient(circle,rgba(0,180,255,.18),transparent 70%);
    filter:blur(60px);
    pointer-events:none
}

.hero .container{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
    align-items:center;
    gap:5rem;
    position:relative
}

.hero-content{
    position:relative;
    z-index:2
}

.hero-kicker{
    display:inline-block;
    margin-bottom:1.35rem;
    font-size:.82rem;
    letter-spacing:5px;
    text-transform:uppercase;
    color:var(--color-secondary);
    font-weight:700
}

.hero-title{
    font-size:clamp(3.1rem,5.4vw,5.8rem);
    font-weight:800;
    line-height:1;
    letter-spacing:-.05em;
    max-width:13ch;
}
.hero-title span{background:linear-gradient(100deg,#fff 10%,#60a5fa 55%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-description{margin-top:2rem;max-width:650px;font-size:1.08rem;line-height:1.8;color:rgba(255,255,255,.72)}
.hero-benefits{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.5rem;color:var(--text-secondary);font-size:.9rem;font-weight:600}
.hero-benefits span::first-letter{color:var(--color-secondary)}
.hero-buttons{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center;align-items:center;position:relative;z-index:2}
.hero-visual::before{content:"";position:absolute;width:480px;height:480px;background:#00bfff;filter:blur(180px);opacity:.16;border-radius:50%;z-index:-1}
.hero-card{width:100%;max-width:430px;padding:2.5rem;border:1px solid rgba(96,165,250,.22);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));backdrop-filter:blur(20px);box-shadow:0 28px 80px rgba(0,0,0,.28);transform:translateY(35px)}
.card-label{display:inline-flex;margin-bottom:1.25rem;padding:.45rem .8rem;border:1px solid rgba(34,211,238,.22);border-radius:999px;background:rgba(34,211,238,.06);color:var(--color-secondary);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero-card h3{margin-bottom:1rem;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1}
.hero-card p{color:var(--text-secondary);line-height:1.75}
.card-tech{margin-top:1.7rem;display:flex;gap:.65rem;flex-wrap:wrap}
.card-tech span{padding:.55rem .85rem;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid var(--border-color);font-size:.78rem;color:var(--text-secondary)}
.hero-card-link{display:inline-block;margin-top:1.8rem;color:var(--color-primary-light);font-weight:700;transition:transform .25s ease,color .25s ease}
.hero-card-link:hover{transform:translateX(4px);color:var(--color-secondary)}
@media(max-width:992px){.hero{padding:115px 0 65px;min-height:auto}.hero .container{grid-template-columns:1fr;gap:2.75rem}.hero-content{text-align:center}.hero-title{margin-inline:auto;max-width:12ch;font-size:clamp(3rem,9vw,5rem)}.hero-description{margin:1.5rem auto 0}.hero-benefits,.hero-buttons{justify-content:center}.hero-card{transform:none;margin:auto}.hero-visual{padding-bottom:1rem}}
@media(max-width:600px){.hero{padding-top:105px}.hero .container{width:min(var(--container),calc(100% - 32px))}.hero-kicker{font-size:.7rem;letter-spacing:3px}.hero-title{font-size:clamp(2.75rem,13vw,4.2rem);letter-spacing:-.06em}.hero-description{font-size:1rem;line-height:1.65}.hero-benefits{flex-direction:column;gap:.6rem}.hero-buttons{flex-direction:column}.hero-buttons .btn{width:100%;justify-content:center}.hero-card{padding:1.6rem;border-radius:20px}.hero-card h3{font-size:1.75rem}}


/* ==========================================
   CNA HERO — PREMIUM VISUAL EFFECTS
========================================== */



/* HERO — Fondo artístico equilibrado */

.hero {
    isolation: isolate;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 7, 20, 0.66) 0%,
            rgba(3, 7, 20, 0.48) 38%,
            rgba(3, 7, 20, 0.38) 65%,
            rgba(3, 7, 20, 0.52) 100%
        ),
        url("../../assets/images/hero-bg.png");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #050816;
}



/* Luz ambiental animada */
.hero::before {
    right: -180px;
    top: 0;
    width: 760px;
    height: 760px;
    background: radial-gradient(
        circle,
        rgba(0, 180, 255, 0.24),
        rgba(20, 85, 255, 0.08) 45%,
        transparent 72%
    );
    filter: blur(45px);
    animation: cnaAmbientGlow 12s ease-in-out infinite alternate;
}

@keyframes cnaAmbientGlow {
    from {
        transform: translate(-35px, -20px) scale(0.92);
        opacity: 0.65;
    }

    to {
        transform: translate(25px, 35px) scale(1.12);
        opacity: 1;
    }
}

/* Mantener el contenido delante del fondo */
.hero > .container {
    z-index: 1;
}

/* Iluminación detrás de la tarjeta */
.hero-visual::before {
    width: 520px;
    height: 520px;
    background: radial-gradient(
        circle,
        rgba(0, 195, 255, 0.32),
        rgba(38, 95, 255, 0.12) 45%,
        transparent 70%
    );
    filter: blur(65px);
    opacity: 0.7;
    animation: cnaCardAura 7s ease-in-out infinite alternate;
}

@keyframes cnaCardAura {
    from {
        transform: scale(0.85);
        opacity: 0.4;
    }

    to {
        transform: scale(1.12);
        opacity: 0.8;
    }
}

/* Tarjeta interactiva */
.hero-card {
    position: relative;
    overflow: hidden;
    transform:
        perspective(1000px)
        translateY(35px)
        rotateX(var(--card-rotate-x, 0deg))
        rotateY(var(--card-rotate-y, 0deg));

    transition:
        transform 0.25s ease-out,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

    border-color: rgba(96, 165, 250, 0.3);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 0 45px rgba(0, 153, 255, 0.06);
}

/* Resplandor que sigue el cursor */
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background: radial-gradient(
        320px circle at
        var(--mouse-x, 50%)
        var(--mouse-y, 50%),
        rgba(80, 190, 255, 0.15),
        transparent 70%
    );

    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-card:hover {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.4),
        0 0 55px rgba(0, 180, 255, 0.13);
}

.hero-card:hover::before {
    opacity: 1;
}

/* Adaptación móvil */
@media (max-width: 992px) {
    .hero-card {
        transform: none;
    }

}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero-visual::before {
        animation: none;
    }

    .hero-card {
        transition: none;
        transform: none;
    }
}


/* Ajustes de iluminación con el fondo artístico */
.hero::before { opacity: 0.25; }
.hero-visual::before { opacity: 0.35; }

@media (max-width: 768px) {
    .hero { background-position: 62% center; }
}

/* Sin máscaras sobre toda la sección: conservamos texto y botones nítidos. */

/* HERO — Desvanecimiento inferior */

.hero::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 250px;
    opacity: 1;

    background: linear-gradient(
        to bottom,
        rgba(5, 10, 27, 0) 0%,
        rgba(5, 10, 27, 0.40) 25%,
        rgba(5, 10, 27, 0.85) 55%,
        #050a1b 85%,
        #050a1b 100%
    );

    z-index: 2;
    pointer-events: none;
}

/* El contenido queda por encima del degradado */
.hero > .container {
    position: relative;
    z-index: 3;
}