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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    min-height:clamp(420px,60vw,560px);

    padding-block:clamp(70px,8vw,120px);

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.92) 0%,

            rgba(0,0,0,.82) 28%,

            rgba(0,0,0,.52) 55%,

            rgba(0,0,0,.15) 78%,

            rgba(0,0,0,0) 100%

        ),

        url("../img/hero.webp");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:center 25%;

}

/*==================================================
                CONTAINER
==================================================*/

.hero-container{

    position:relative;

    z-index:2;

    width:min(1280px,100%);

    margin:auto;

    padding-inline:clamp(18px,3vw,30px);

}


/*==================================================
                CONTENT
==================================================*/

.hero-content{

    width:min(620px,100%);

    margin-top:clamp(16px,1.5vw,30px);

    /* margin-left:clamp(24px,2vw,40px); */

    position:relative;

    z-index:10;

    opacity:0;

    transform:translateY(40px) scale(.98);

    animation:heroContent 1s cubic-bezier(.22,1,.36,1) forwards;

    animation-delay:.25s;

}


/*==================================================
                TAG
==================================================*/

.hero-tag{

    display:inline-block;

    margin-bottom:clamp(10px,2vw,14px);

    font-size:clamp(.78rem,.85vw,.9rem);

    font-weight:700;

    letter-spacing:clamp(2px,.3vw,4px);

    text-transform:uppercase;

    color:#16a34a;

}


/*==================================================
                TITULO
==================================================*/

.hero h1{

    font-size:clamp(2rem,5.1vw,4.5rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:clamp(18px,3vw,28px);

    text-wrap:balance;

}

.hero h1 span{

    color:#16a34a;

}


/*==================================================
                TEXTO
==================================================*/

.hero p{

    width:min(560px,100%);

    font-size:clamp(1rem,1.55vw,1.375rem);

    line-height:1.7;

    color:#d8d8d8;

}


/*==================================================
                BOTONES
==================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:clamp(12px,2vw,18px);

    margin-top:clamp(26px,4vw,40px);

    margin-bottom:clamp(40px,6vw,60px);

}


/*==================================================
            BOTONES BASE
==================================================*/

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        clamp(14px,1vw,18px)

        clamp(20px,2vw,34px);

}




/*==================================================
            LÍNEA DECORATIVA
==================================================*/

.hero-line{

    display:flex;

    align-items:center;

    margin:

        clamp(18px,2.5vw,22px)

        0

        clamp(28px,4vw,38px);

}

.hero-line .line{

    position:relative;

    width:clamp(70px,9vw,120px);

    height:2px;

    background:#16a34a;

    overflow:hidden;

}

.hero-line .dot{

    width:clamp(10px,1vw,12px);

    height:clamp(10px,1vw,12px);

    border-radius:50%;

    border:2px solid #16a34a;

    background:#050505;

    transition:.3s;

}

.hero-line .dot.active{

    background:#16a34a;

    box-shadow:

        0 0 8px #16a34a,

        0 0 18px rgba(22,163,74,.7);

}

.hero-line .pulse{

    position:absolute;

    left:-12px;

    top:50%;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#6cff96;

    transform:translateY(-50%);

    box-shadow:

        0 0 10px #6cff96,

        0 0 22px rgba(22,163,74,.45);

    animation:pulseMove 3s linear infinite;

}



/*==================================================
                HERO FEATURES
==================================================*/

.hero-features{

    display:flex;

    align-items:flex-start;

    gap:clamp(14px,2vw,20px);

    margin-top:8px;

}

.feature{

    flex:1;

    display:flex;

    align-items:flex-start;

    gap:clamp(12px,2vw,18px);

    position:relative;

    padding:clamp(12px,1.5vw,14px);

    border-radius:12px;

    transition:

        transform .35s ease,

        background .35s ease;

}



/*==================================================
                ICONO
==================================================*/

.feature-icon{

    width:clamp(42px,5vw,52px);

    height:clamp(42px,5vw,52px);

    border:1px solid rgba(22,163,74,.45);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#16a34a;

    font-size:clamp(18px,2vw,22px);

    flex-shrink:0;

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}



/*==================================================
                CONTENIDO
==================================================*/

.feature-content{

    flex:1;

}

.feature-content h3{

    font-size:clamp(1.05rem,1.9vw,1.5rem);

    line-height:1.35;

    margin-bottom:clamp(6px,1vw,10px);

    font-weight:700;

    color:#fff;

    transition:.35s;

}

.feature-content p{

    font-size:clamp(.90rem,1.2vw,1.06rem);

    line-height:1.7;

    color:#b9b9b9;

    transition:.35s;

}



/*==================================================
                DIVISOR
==================================================*/

.divider{

    width:1px;

    align-self:stretch;

    background:rgba(255,255,255,.12);

    margin:

        0

        clamp(12px,2vw,28px);

}



/*==================================================
                HOVER
==================================================*/

.feature:hover{

    transform:translateY(-4px);

    background:rgba(22,163,74,.05);

}

.feature:hover .feature-icon{

    background:#16a34a;

    color:#fff;

    transform:scale(1.08);

    box-shadow:

        0 0 18px rgba(22,163,74,.45);

}

.feature:hover h3{

    color:#16a34a;

}

.feature:hover p{

    color:#fff;

}




/*==================================================
                BOTÓN PRIMARIO
==================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:

        clamp(14px,1vw,18px)

        clamp(20px,2vw,34px);

    background:#16a34a;

    color:#fff;

    text-decoration:none;

    font-size:clamp(.92rem,1vw,1rem);

    font-weight:700;

    border-radius:4px;

    transition:

        background .3s ease,

        transform .3s ease,

        box-shadow .3s ease;

}

.btn-primary:hover{

    background:#1cc15b;

    transform:translateY(-2px);

    box-shadow:

        0 12px 28px rgba(22,163,74,.30);

}



/*==================================================
                BOTÓN SECUNDARIO
==================================================*/

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:

        clamp(14px,1vw,18px)

        clamp(20px,2vw,34px);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    text-decoration:none;

    font-size:clamp(.92rem,1vw,1rem);

    font-weight:600;

    border-radius:4px;

    transition:

        background .3s ease,

        border-color .3s ease,

        transform .3s ease,

        color .3s ease;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.05);

    border-color:#16a34a;

    color:#16a34a;

    transform:translateY(-2px);

}



/*==================================================
                ANIMACIONES
==================================================*/

@keyframes heroContent{

    from{

        opacity:0;

        transform:

            translateY(40px)

            scale(.98);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}



@keyframes pulseMove{

    0%{

        left:-12px;

        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        opacity:1;

    }

    100%{

        left:100%;

        opacity:0;

    }

}



/*==================================================
                MEJORAS
==================================================*/

.hero h1,
.hero p{

    text-wrap:balance;

}

.hero img{

    max-width:100%;

    height:auto;

}

.hero-content>*{

    position:relative;

    z-index:2;

}



/*==================================================
            RESPONSIVE ESTRUCTURAL
==================================================*/

@media (max-width:992px){

    .hero{

        min-height:auto;

        padding-bottom:80px;

        background-position:70% center;

    }

    .hero-container{

        min-height:auto;

    }

    .hero-features{

        display:grid;

        grid-template-columns:1fr;

    }

    .divider{

        display:none;

    }

}



@media (max-width:768px){

    .container{

         padding-inline:clamp(20px,4vw,70px);

    }

    .hero{

        background-position:72% center;

    }

}

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

}



@media (max-width:576px){

    .hero{

        background-position:78% center;

    }

}