/*
==========================================================
 Portal ICEC GYE
 Archivo: hero.css
 Versión: 0.2.0
==========================================================
*/

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

.hero{

    padding:70px 0 90px;

    background:linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef4ff 100%
    );

}

.hero .container{

    max-width:1100px;

    margin:auto;

}

/* ==========================================
BANNER
========================================== */

.hero-banner{

    margin-bottom:50px;

}

.hero-banner img{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

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

.hero-text{

    text-align:center;

    max-width:900px;

    margin:auto;

}

.hero-text h2{

    font-size:4rem;

    line-height:1.15;

    margin-bottom:30px;

    color:#114fa6;

}

.hero-text h2 span{

    display:block;

    color:var(--color-primary);

}

.hero-text p{

    max-width:760px;

    margin:0 auto 35px;

    font-size:1.25rem;

    line-height:1.8;

    color:#666;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

}

.hero-buttons .btn{

    min-width:240px;

}

.hero-social{
    margin-top:35px;
    text-align:center;
}

.hero-social p{
    font-size:1.4rem;
    margin-bottom:22px;
    color:#666;
}

.hero-social a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 22px;     /* ← aquí separas Facebook de YouTube */
    text-decoration:none;
    color:#333;
    font-weight:500;
}

.hero-social i{
    font-size:1.25rem;
}