/*==================================================
    HERO - SMAR
==================================================*/

.hero-slider{
    position:relative;
    min-height:68vh;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    padding:110px 0 30px;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1.5s ease-in-out;
}

.hero-slide.active{
    opacity:1;
    z-index:1;
}

.hero-slide img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-slide img{

    transform:scale(1);

    transition:transform 8s ease;

}

.hero-slide.active img{

    transform:scale(1.08);

}
/* Overlay */

.hero-slider::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
    linear-gradient(
        100deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.25) 100%
    );

    animation:heroOverlay 14s ease-in-out infinite;

}

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

.hero-content{
    position:relative;
    z-index:3;

    width:100%;
    max-width:1300px;

    margin:auto;

    padding:20px 20px 30px;

    color:#fff;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:start;

    gap:50px;
}

.hero-title{
    font-size:3.1rem;
    font-weight:800;
    line-height:1.15;
    margin-bottom:18px;
}

.hero-subtitle{
    font-size:1.05rem;
    line-height:1.6;
    max-width:650px;
    margin-bottom:20px;
}

.hero-buttons{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    gap:15px;
    margin-top:20px;
    width:100%;
}

.hero-cta{
    background:#0071BC;
    color:#fff;
    padding:15px 32px;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

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

.hero-cta-brochure{
    background:#3b3b3b;
    margin-left:0;
    align-self:flex-start;
}

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

.hero-left{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.hero-right{
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.hero-badge{

    display:inline-flex;
    align-items:center;

    width:max-content;

    padding:8px 18px;

    margin-bottom:25px;

    border-radius:50px;

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

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

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:.95rem;

    font-weight:600;
}

.hero-features{

    list-style:none;

    padding:0;

    margin:22px 0;

}

.hero-features li{

    margin-bottom:14px;

    font-size:1.08rem;

    display:flex;

    align-items:center;

    gap:12px;

}

.hero-features i{

    color:#6BCB4A;

    font-size:1.2rem;

}

.hero-card{
    width:100%;
    max-width:350px;
    padding:22px;
    border-radius:18px;

    /* Mismo estilo visual del footer */
    background:linear-gradient(180deg,#0f2a44,#0a1e33);

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 20px rgba(0,113,188,.15);

    color:#fff;
}

.hero-card h3{

    font-size:1.2rem;

    margin-bottom:10px;

    text-align:center;

}

.hero-card p{

    line-height:1.5;

    opacity:.9;

    text-align:center;

    margin-bottom:20px;

    font-size:.98rem;

}

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

.hero-form{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:25px;

}

.hero-form input,
.hero-form textarea{

    width:100%;

    padding:11px 14px;

    border:none;

    border-radius:10px;

    outline:none;

    font-size:15px;

    font-family:inherit;

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

    transition:.3s;

}

.hero-form input:focus,
.hero-form textarea:focus{

    background:#ffffff;

    box-shadow:0 0 0 3px rgba(0,113,188,.25);

}

.hero-form textarea{

    resize:none;

    min-height:80px;

}

.hero-submit{
    width:100%;
    padding:13px;
    border:none;
    border-radius:10px;
    background:#D96A3A;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 8px 20px rgba(217,106,58,.25);
}

.hero-submit:hover{
    background:#C75B32;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(217,106,58,.35);
}

@keyframes heroOverlay{

    0%{
        opacity:.95;
    }

    50%{
        opacity:.82;
    }

    100%{
        opacity:.95;
    }

}

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