/* ========================================
   HERO V2
======================================== */

.hero-v2{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    min-height:100vh;
    padding:150px 0 90px;
    background:
        radial-gradient(
            circle at 12% 38%,
            rgba(0,198,255,.14),
            transparent 33%
        ),
        radial-gradient(
            circle at 88% 32%,
            rgba(140,36,255,.25),
            transparent 39%
        ),
        linear-gradient(
            115deg,
            #020914 0%,
            #03050d 46%,
            #110020 100%
        );
}

/* Fondos luminosos */

.hero-v2__glow{
    position:absolute;
    z-index:-1;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
}

.hero-v2__glow--left{
    top:24%;
    left:-220px;
    width:520px;
    height:520px;
    background:rgba(0,198,255,.17);
}

.hero-v2__glow--right{
    top:10%;
    right:-230px;
    width:680px;
    height:680px;
    background:rgba(137,37,255,.25);
}

/* Contenedor independiente */

.hero-v2__container{
    position:relative;
    z-index:2;
    width:min(1220px, calc(100% - 40px));
    margin-inline:auto;
}

/* Bloque principal */

.hero-v2__main{
    display:grid;
    grid-template-columns:minmax(0, 560px) minmax(0, 1fr);
    gap:72px;
    align-items:center;
}

.hero-v2__content{
    position:relative;
    z-index:3;
    min-width:0;
    max-width:560px;
}

/* Eyebrow */

.hero-v2__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:0 18px;
    border:1px solid rgba(34,201,255,.42);
    border-radius:999px;
    background:rgba(5,15,31,.62);
    color:#89e2ff;
    font-size:13px;
    font-weight:800;
    line-height:1;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 35px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.hero-v2__eyebrow span{
    color:#61dfff;
}

/* Título */

.hero-v2__title{
    max-width:560px;
    margin:34px 0 0;
    color:#fff;
    font-size:clamp(54px, 5vw, 78px);
    font-weight:850;
    line-height:1.04;
    letter-spacing:-.058em;
}

.hero-v2__title span{
    display:block;
    margin-top:14px;
    padding-bottom:.18em;
    line-height:1.08;
    background:
        linear-gradient(
            90deg,
            #16d7ff 0%,
            #397cff 48%,
            #b72eff 100%
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* Descripción */

.hero-v2__description{
    max-width:535px;
    margin:28px 0 0;
    color:#aeb8ca;
    font-size:17px;
    line-height:1.75;
}

/* Botones */

.hero-v2__actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:32px;
}

.hero-v2__button{
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:0 26px;
    border-radius:16px;
    color:#fff;
    font-size:15px;
    font-weight:800;
    text-decoration:none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.hero-v2__button:hover{
    transform:translateY(-3px);
}

.hero-v2__button--primary{
    min-width:190px;
    border:1px solid rgba(77,204,255,.58);
    background:
        linear-gradient(
            110deg,
            #16d2ff 0%,
            #3c79ff 52%,
            #ac2dff 100%
        );
    box-shadow:
        0 16px 38px rgba(37,105,255,.30),
        0 0 34px rgba(154,45,255,.18);
}

.hero-v2__button--primary:hover{
    box-shadow:
        0 20px 45px rgba(37,105,255,.38),
        0 0 42px rgba(154,45,255,.24);
}

.hero-v2__button--secondary{
    min-width:220px;
    border:1px solid rgba(255,255,255,.17);
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}

.hero-v2__button--secondary:hover{
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.075);
}

.hero-v2__whatsapp-icon{
    width:23px;
    height:23px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid currentColor;
    border-radius:50%;
    font-size:10px;
}

/* Imagen */

.hero-v2__visual{
    position:relative;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.hero-v2__image-glow{
    position:absolute;
    top:8%;
    right:-2%;
    width:88%;
    height:84%;
    border-radius:42%;
    background:
        radial-gradient(
            circle,
            rgba(126,45,255,.42),
            rgba(26,98,255,.17) 46%,
            transparent 72%
        );
    filter:blur(60px);
    pointer-events:none;
}

.hero-v2__hero-image{
    position:relative;
    z-index:2;
    width:100%;
    max-width:650px;
    height:auto;
    display:block;
    margin:0;
    border-radius:26px;
    object-fit:cover;
    box-shadow:
        0 38px 85px rgba(0,0,0,.48),
        0 0 48px rgba(100,52,255,.16);
    animation:heroImageFloat 6s ease-in-out infinite;
}

/* ========================================
   BENEFICIOS INFERIORES
======================================== */

.hero-v2__benefits{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    margin-top:58px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:26px;
    background:
        linear-gradient(
            110deg,
            rgba(8,16,32,.9),
            rgba(14,11,37,.92)
        );
    box-shadow:
        0 28px 75px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.hero-v2__benefit{
    position:relative;
    min-width:0;
    min-height:136px;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:20px;
    align-items:center;
    padding:27px 34px;
}

.hero-v2__benefit:not(:first-child)::before{
    content:"";
    position:absolute;
    top:28px;
    bottom:28px;
    left:0;
    width:1px;
    background:rgba(255,255,255,.1);
}

.hero-v2__benefit-icon{
    width:62px;
    height:62px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(72,192,255,.32);
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(21,208,255,.15),
            rgba(164,45,255,.2)
        );
    color:#54cfff;
    font-size:20px;
    font-weight:900;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 28px rgba(51,70,255,.14);
}

.hero-v2__benefit:nth-child(2) .hero-v2__benefit-icon{
    color:#6680ff;
}

.hero-v2__benefit:nth-child(3) .hero-v2__benefit-icon{
    color:#bb45ff;
}

.hero-v2__benefit strong,
.hero-v2__benefit div > span{
    display:block;
}

.hero-v2__benefit strong{
    color:#dff8ff;
    font-size:19px;
    font-weight:850;
}

.hero-v2__benefit div > span{
    margin-top:7px;
    color:#9ca6ba;
    font-size:13px;
    line-height:1.5;
}

/* ========================================
   TABLET
======================================== */

@media(max-width:1080px){

    .hero-v2{
        min-height:auto;
        padding:140px 0 85px;
    }

    .hero-v2__main{
        grid-template-columns:1fr;
        gap:52px;
    }

    .hero-v2__content{
        max-width:760px;
    }

    .hero-v2__title{
        max-width:760px;
    }

    .hero-v2__visual{
        justify-content:center;
    }

    .hero-v2__hero-image{
        width:100%;
        max-width:820px;
        margin-inline:auto;
    }

    .hero-v2__benefit{
        grid-template-columns:56px minmax(0,1fr);
        gap:16px;
        padding:24px 22px;
    }

    .hero-v2__benefit-icon{
        width:54px;
        height:54px;
        border-radius:16px;
        font-size:18px;
    }

}

/* ========================================
   MÓVIL
======================================== */

@media(max-width:700px){

    .hero-v2{
        padding:118px 0 70px;
    }

    .hero-v2__container{
        width:min(100% - 28px, 1220px);
    }

    .hero-v2__main{
        gap:38px;
    }

    .hero-v2__content{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    .hero-v2__eyebrow{
        max-width:100%;
        justify-content:center;
        padding:10px 14px;
        line-height:1.35;
    }

    .hero-v2__title{
        width:100%;
        max-width:100%;
        margin-top:27px;
        font-size:clamp(43px, 12.5vw, 62px);
        line-height:1.02;
    }

    .hero-v2__title span{
        margin-top:10px;
        padding-bottom:.2em;
    }

    .hero-v2__description{
        margin:22px auto 0;
        font-size:16px;
        line-height:1.65;
    }

    .hero-v2__actions{
        flex-direction:column;
        margin-top:27px;
    }

    .hero-v2__button{
        width:100%;
        min-width:0;
    }

    .hero-v2__hero-image{
        width:100%;
        max-width:none;
        border-radius:20px;
    }

    .hero-v2__benefits{
        grid-template-columns:1fr;
        margin-top:40px;
        border-radius:22px;
    }

    .hero-v2__benefit{
        min-height:auto;
        grid-template-columns:56px minmax(0,1fr);
        padding:22px;
        text-align:left;
    }

    .hero-v2__benefit:not(:first-child)::before{
        top:0;
        right:22px;
        bottom:auto;
        left:22px;
        width:auto;
        height:1px;
    }

    .hero-v2__benefit strong{
        font-size:18px;
    }

}

/* ========================================
   ANIMACIÓN
======================================== */

@keyframes heroImageFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

@media(prefers-reduced-motion:reduce){

    .hero-v2__hero-image{
        animation:none;
    }

}