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

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

.hero{

    padding-top:70px;
    padding-right:0;
    padding-bottom:90px;
    padding-left:0;

    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);
}

.hero.hero-banner-only{
    min-height:auto;
    padding-top:70px;
    padding-right:0;
    padding-bottom:20px;
    padding-left:0;
}

/* ==========================================
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;
}