/*==============================================================
    TOP BAR
==============================================================*/

.top-bar{

    width:100%;

    background:#003E7E;

    color:#FFFFFF;

}

.top-bar .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:42px;

    font-family: 'Roboto', Arial, sans-serif;

}

.top-bar-left,
.top-bar-right{

    display:flex;

    align-items:center;

    gap:28px;

}

.top-bar a{

    color:#FFFFFF;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    transition:0.3s;

}

.top-bar a:hover{

    color:#F4C400;

}

.top-bar i{

    margin-right:8px;

    color:#FFFFFF;

}

/* Responsive */

@media (max-width:768px){

    .top-bar{

        display:none;

    }

}

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

@media screen and (max-width:768px){

    .top-bar{

        display:none;

    }

}

/*==============================================================
    MÓDULO 02
    HEADER PRINCIPAL
==============================================================*/

.header{

    width:100%;

    background:#FFFFFF;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    position:sticky;

    top:0;

    left:0;

    z-index:999;

    transition:all .35s ease;

}

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

.btn-marketplace{

    display:flex;

    justify-content:center;

    align-items:center;

    width:45px;

    height:45px;

    background:#003E7E;

    color:#FFFFFF;

    border-radius:50%;

    text-decoration:none;

    font-size:22px;

    transition:background .30s ease;

}

.btn-marketplace:hover{

    background:#D71920;

}

.btn-marketplace i{

    color:#FFFFFF;

    font-size:18px;

}

/*==============================================================
    BOTÓN MARKETPLACE RESPONSIVE
==============================================================*/

@media (max-width:992px){

    .btn-marketplace{

        padding:10px 18px;

        font-size:.90rem;

    }

}

@media (max-width:768px){

    .btn-marketplace{

        width:48px;

        height:48px;

        min-height:48px;

        padding:0;

        border-radius:50%;

    }

    .btn-marketplace span{

        display:none;

    }

}

@media (max-width:480px){

    .btn-marketplace{

        width:44px;

        height:44px;

        min-height:44px;

    }

}

/*==============================================================
    HEADER SCROLL
==============================================================*/

.header{

    transition:transform .35s ease,
               box-shadow .35s ease;

}

.header.hide{

    transform:translateY(-100%);

}

.header.show{

    transform:translateY(0);

}

.header .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==============================================================
    LOGOTIPO
==============================================================*/

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:72px;

    width:auto;

    display:block;

    transition:.35s;

}

/*==============================================================
    MENÚ PRINCIPAL
==============================================================*/

.navbar{

    display:flex;

    align-items:center;

}

.nav-menu{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-menu li{

    list-style:none;

}

.nav-menu a{

    display:block;

    width:100%;

    color:#003E7E;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    padding:6px 0;

    transition:all .30s ease;

}

.nav-menu a:hover{

    color:#D71920;

    padding-left:12px;

}

.nav-menu a{

    font-family:'Roboto', sans-serif;

    color:#222222;

    text-decoration:none;

    font-size:16px;

    font-weight:00;

    transition:.30s ease;

}

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

.header-actions{

    display:flex;

    align-items:center;

    gap:20px;
    
}

.btn-donar{

    display:flex;

    justify-content:center;

    align-items:center;

    width:110px;

    height:48px;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.30s ease;

    font-family:'Roboto', sans-serif;

}

.btn-donar:hover{

    background:#003E7E;

}

/*==============================================================
    MENÚ HAMBURGUESA
==============================================================*/

.menu-toggle{

    display:none;

    border:none;

    background:none;

    cursor:pointer;

    font-size:34px;

    color:#003E7E;

}

.menu-toggle.active{

    transform:rotate(90deg);

}


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

@media (max-width:992px){

    .header .container{

        padding:0 30px;

    }

    .nav-menu{

        gap:22px;

    }

    .nav-menu a{

        font-size:15px;

    }

    .logo img{

        height:64px;

    }

}

/*==============================================================
    MOBILE
==============================================================*/

@media (max-width:768px){

    .header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

    height:90px;

}

    /*==============================================================
        HEADER ACTIONS
    ==============================================================*/

    .header-actions{

    position:absolute;

    top:50%;

    right:55px;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    gap:14px;

    margin-right:0px;

}

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

    .btn-marketplace{

        width:46px;

        height:46px;

        font-size:20px;

    }

    /*==============================================================
        MENÚ HAMBURGUESA
    ==============================================================*/

    .menu-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

    width:46px;

    height:46px;

    font-size:22px;

    margin-left:20px;

}

/*==============================================================
        LOGO FUNDAHEROES
    ==============================================================*/

    .logo{

    display:flex;

    align-items:center;

    width:auto;

    margin-left:-10px;

    flex-shrink:0;

}

.logo img{

    height:72px;

    width:auto;

}

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

    .btn-donar{

        display:none;

    }

        .navbar{

        position:absolute;

        top:100px;

        left:-100%;

        width:100%;

        background:#FFFFFF;

        box-shadow:0 10px 20px rgba(0,0,0,.08);

        transition:left .35s ease;

    }

    .navbar.active{

        left:0;

    }

    .nav-menu{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        gap:30px;

        padding:40px;

    }

}

/*==============================================================
    MÓDULO 03
    CABEZOTE PROMOCIONAL
==============================================================*/

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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:url("../images/hero/hero-fundaheroes.jpg");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:center center;

}

/*==============================================================
    CAPA OSCURA
==============================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,62,126,.88) 0%,
        rgba(0,62,126,.70) 45%,
        rgba(0,62,126,.15) 100%
    );

}

/*==============================================================
    CONTENEDOR
==============================================================*/

.hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:80px 40px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    min-height:100vh;

}

/*==============================================================
    COLUMNA IZQUIERDA
==============================================================*/

.hero-text{

    color:#FFFFFF;

    max-width: 560px px;

    padding-left:40px;

    font-family: 'Poppins', Arial, sans-serif;

}

/*==============================================================
    BADGE
==============================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 24px;

    margin-bottom:30px;

    border-radius:50px;

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

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

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*==============================================================
    TÍTULO
==============================================================*/

.hero h1{

    font-size:72px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:35px;

    max-width:680px;

}

/*==============================================================
    DESCRIPCIÓN
==============================================================*/

.hero p{

    font-size:22px;

    line-height:1.8;

    margin-bottom:45px;

    max-width:600px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

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

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 36px;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    font-weight:700;

    transition:all .35s ease;

    font-family: 'Roboto', Arial, sans-serif;

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:#B81219;

}

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

.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 36px;

    border-radius:50px;

    border:2px solid #FFFFFF;

    color:#FFFFFF;

    font-weight:700;

    transition:all .35s ease;

    font-family: 'Roboto', Arial, sans-serif;

}

.btn-secondary:hover{

    background:#FFFFFF;

    color:#003E7E;

}

/*==============================================================
    COLUMNA DERECHA
==============================================================*/

.hero-image{

    width:100%;

    min-height:650px;

}

body{

    margin:0 !important;

    padding:0 !important;

    background:rgb(255, 255, 255) !important;

}

/*==============================================================
    MÓDULO 04
    NUESTRO ECOSISTEMA DE TRANSFORMACIÓN SOCIAL
==============================================================*/

/*==============================================================
    SECCIÓN PRINCIPAL
==============================================================*/

.ecosistema{

    width:100%;

    padding:120px 0;

    background:#FFFFFF;

}

.ecosistema .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

}


/*==============================================================
    ENCABEZADO
==============================================================*/

.section-header{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.section-badge{

    display:inline-block;

    padding:12px 28px;

    margin-bottom:25px;

    border-radius:50px;

    background:#EAF3FC;

    color:#003E7E;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    font-family: 'Montserrat', Arial, sans-serif;

}

.section-header h2{

    margin-bottom:30px;

    font-size:45px;

    font-weight:800;

    color:#003E7E;

    line-height:1.2;

    font-family: 'Montserrat', Arial, sans-serif;

}

.section-header p{

    font-size:18px;

    line-height:1.9;

    color:#606D80;

    font-family: 'Roboto', Arial, sans-serif;

}


/*==============================================================
    GRID
==============================================================*/

.ecosistema-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.ecosistema-card{

    background:#FFFFFF;

    padding:45px 35px;

    border-radius:22px;

    text-align:center;

    border:1px solid #E7EDF5;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.ecosistema-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,62,126,.15);

}

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

.card-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#003E7E;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFFFFF;

    font-size:34px;

    transition:.35s;

}

.ecosistema-card:hover .card-icon{

    background:#D71920;

    transform:scale(1.10);

}

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

.ecosistema-card h3{

    margin-bottom:20px;

    color:#003E7E;

    font-size:26px;

    font-weight:700;

    line-height:1.3;
    
    font-family: 'Roboto', Arial, sans-serif;

}


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

.ecosistema-card p{

    color:#606D80;

    font-size:17px;

    line-height:1.8;

    font-family: 'Roboto', Arial, sans-serif;

}


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

.ecosistema-card::after{

    content:"";

    display:block;

    width:0;

    height:4px;

    margin:35px auto 0;

    background:#003E7E;

    border-radius:30px;

    transition:.35s;

}

.ecosistema-card:hover::after{

    width:70px;

}

/*==============================================================
    RESPONSIVE
    MÓDULO 04 - ECOSISTEMA
==============================================================*/

/*--------------------------
    TABLET
---------------------------*/

@media (max-width:1024px){

    .ecosistema-grid{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

}

/*--------------------------
    MÓVIL
---------------------------*/

@media (max-width:768px){

    .ecosistema{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:60px;

        padding:0 20px;

    }

    .section-header h2{

        font-size:38px;

    }

    .section-header p{

        font-size:18px;

    }

    .ecosistema-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .ecosistema-card{

        padding:35px 25px;

    }

}

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

@media (max-width:1200px){

    .ecosistema-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .ecosistema{

        padding:90px 0;

    }

    .section-header{

        margin-bottom:60px;

        padding:0 20px;

    }

    .section-header h2{

        font-size:36px;

    }

    .section-header p{

        font-size:18px;

    }

    .ecosistema-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

}

/*==============================================================
    MÓDULO 05
    QUIÉNES SOMOS
==============================================================*/

.quienes-somos{

    width:100%;

    padding:20px 0 120px;

    background:#F8F9FA;

}

.quienes-somos .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/*==============================================================
    IMAGEN
==============================================================*/

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

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

.about-content{

    max-width:620px;

}

/*==============================================================
    BADGE
==============================================================*/

.about-content .section-badge{

    font-family:'Montserrat', sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*==============================================================
    TÍTULO
==============================================================*/

.about-content h2{

    margin:30px 0;

    font-family:'Montserrat', sans-serif;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    color:#003E7E;

}

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

.about-content p{

    margin-bottom:28px;

    font-family:'Roboto', sans-serif;

    font-size:18px;

    font-weight:400;

    line-height:1.9;

    color:#606D80;

}

/*==============================================================
    PILARES
==============================================================*/

.about-values{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin:45px 0;

}

.value-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:'Roboto', sans-serif;

    font-size:17px;

    font-weight:500;

    color:#003E7E;

}

.value-item i{

    color:#D71920;

    font-size:18px;

}

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

.about-content .btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:20px 42px;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    text-decoration:none;

    font-family:'Roboto', sans-serif;

    font-size:16px;

    font-weight:700;

    transition:all .35s ease;

}

.about-content .btn-primary:hover{

    background:#B6151B;

    transform:translateY(-3px);

}

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

@media (max-width:1024px){

    .quienes-somos .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        max-width:100%;

    }

}

@media (max-width:768px){

    .quienes-somos{

        padding:80px 0;

    }

    .quienes-somos .container{

        padding:0 20px;

    }

    .about-content h2{

        font-size:38px;

    }

    .about-content p{

        font-size:17px;

    }

    .about-values{

        grid-template-columns:1fr;

    }

}

/*==============================================================
    MÓDULO 06
    PROGRAMA SOCIAL
==============================================================*/

.programa-social{

    width:100%;

    padding:20px 0 120px;

    background:#FFFFFF;

}

.programa-social .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

}


/*==============================================================
    IMAGEN
==============================================================*/

.programa-image{

    margin:70px 0;

}

.programa-image img{

    width:100%;

    border-radius:25px;

    display:block;

    object-fit:cover;

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}


/*==============================================================
    GRID
==============================================================*/

.programa-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}


/*==============================================================
    TARJETAS
==============================================================*/

.programa-card{

    background:#FFFFFF;

    padding:40px;

    border-radius:22px;

    text-align:center;

    border:1px solid #E7EDF5;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.programa-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,62,126,.15);

}


/*==============================================================
    ICONOS
==============================================================*/

.programa-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#003E7E;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFFFFF;

    font-size:34px;

    transition:.35s;

}

.programa-card:hover .programa-icon{

    background:#D71920;

    transform:scale(1.08);

}


/*==============================================================
    TITULOS
==============================================================*/

.programa-card h3{

    margin-bottom:20px;

    font-family:'Montserrat', sans-serif;

    font-size:28px;

    font-weight:700;

    color:#003E7E;

}


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

.programa-card p{

    font-family:'Roboto', sans-serif;

    font-size:17px;

    line-height:1.8;

    color:#606D80;

}


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

.programa-cta{

    margin-top:70px;

    text-align:center;

}

.programa-cta .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:20px 42px;

    background:#D71920;

    color:#FFFFFF;

    border-radius:50px;

    text-decoration:none;

    font-family:'Roboto', sans-serif;

    font-weight:700;

    transition:.35s;

}

.programa-cta .btn-primary:hover{

    background:#B6151B;

    transform:translateY(-3px);

}


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

@media (max-width:992px){

    .programa-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .programa-social{

        padding:90px 0;

    }

    .programa-social .container{

        padding:0 20px;

    }

    .programa-image{

        margin:50px 0;

    }

}

/*==============================================================
    MÓDULO 07
    CONVENIOS ESTRATÉGICOS
==============================================================*/

.convenios{

    width:100%;

    padding:20px 0 120px;

    background:#F8F9FA;

}

.convenios .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.convenios-content{

    max-width:620px;

}

.convenios-content h2{

    margin:30px 0;

    font-family:'Montserrat', sans-serif;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    color:#003E7E;

}

.convenios-content p{

    margin-bottom:25px;

    font-family:'Roboto', sans-serif;

    font-size:18px;

    line-height:1.9;

    color:#606D80;

}

/*==============================================================
    LISTA
==============================================================*/

.convenios-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:45px 0;

}

.convenios-list .item{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:'Roboto', sans-serif;

    font-size:17px;

    font-weight:500;

    color:#003E7E;

}

.convenios-list i{

    color:#D71920;

    font-size:18px;

}

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

.convenios-content .btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:20px 42px;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    text-decoration:none;

    font-family:'Roboto', sans-serif;

    font-weight:700;

    transition:.35s ease;

}

.convenios-content .btn-primary:hover{

    background:#B6151B;

    transform:translateY(-3px);

}

/*==============================================================
    IMAGEN
==============================================================*/

.convenios-image{

    position:relative;

}

.convenios-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

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

@media (max-width:1024px){

    .convenios .container{

        grid-template-columns:1fr;

        gap:60px;

    }

}

@media (max-width:768px){

    .convenios{

        padding:90px 0;

    }

    .convenios .container{

        padding:0 20px;

    }

    .convenios-content{

        max-width:100%;

    }

    .convenios-content h2{

        font-size:38px;

    }

    .convenios-content p{

        font-size:17px;

    }

    .convenios-list{

        grid-template-columns:1fr;

    }

}

/*==============================================================
    MÓDULO 08
    PLATAFORMA DIGITAL
==============================================================*/

.plataforma{

    width:100%;

    padding:20px 0 120px;

    background:#FFFFFF;

}

.plataforma .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

}

/*==============================================================
    IMAGEN
==============================================================*/

.plataforma-image{

    margin:70px 0;

}

.plataforma-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/*==============================================================
    GRID
==============================================================*/

.plataforma-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==============================================================
    TARJETAS
==============================================================*/

.plataforma-card{

    background:#FFFFFF;

    padding:40px 35px;

    border-radius:22px;

    text-align:center;

    border:1px solid #E8EDF4;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.plataforma-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,62,126,.15);

}

/*==============================================================
    ICONOS
==============================================================*/

.plataforma-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#003E7E;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFFFFF;

    font-size:34px;

    transition:.35s;

}

.plataforma-card:hover .plataforma-icon{

    background:#D71920;

    transform:scale(1.08);

}

/*==============================================================
    TÍTULOS
==============================================================*/

.plataforma-card h3{

    margin-bottom:20px;

    font-family:'Montserrat', sans-serif;

    font-size:28px;

    font-weight:700;

    color:#003E7E;

}

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

.plataforma-card p{

    font-family:'Roboto', sans-serif;

    font-size:17px;

    line-height:1.8;

    color:#606D80;

}

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

.plataforma-cta{

    margin-top:70px;

    text-align:center;

}

.plataforma-cta .btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:20px 42px;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    text-decoration:none;

    font-family:'Roboto', sans-serif;

    font-weight:700;

    transition:.35s ease;

}

.plataforma-cta .btn-primary:hover{

    background:#B6151B;

    transform:translateY(-3px);

}

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

@media (max-width:1100px){

    .plataforma-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .plataforma{

        padding:90px 0;

    }

    .plataforma .container{

        padding:0 20px;

    }

    .plataforma-image{

        margin:50px 0;

    }

    .plataforma-grid{

        grid-template-columns:1fr;

    }

    .plataforma-card{

        padding:35px 25px;

    }

    .plataforma-card h3{

        font-size:24px;

    }

    .plataforma-card p{

        font-size:16px;

    }

}

/*==============================================================
    MÓDULO 09
    DONACIONES
==============================================================*/

.donaciones{

    width:100%;

    padding:20px 0 120px;

    background:#F8F9FA;

}

.donaciones .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.donaciones-content{

    max-width:620px;

}

.donaciones-content h2{

    margin:30px 0;

    font-family:'Montserrat', sans-serif;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    color:#003E7E;

}

.donaciones-content p{

    margin-bottom:25px;

    font-family:'Roboto', sans-serif;

    font-size:18px;

    line-height:1.9;

    color:#606D80;

}

/*==============================================================
    LISTA DE DONACIONES
==============================================================*/

.donaciones-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:45px 0;

}

.donaciones-list .item{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:'Roboto', sans-serif;

    font-size:17px;

    font-weight:500;

    color:#003E7E;

}

.donaciones-list i{

    color:#D71920;

    font-size:18px;

}

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

.donaciones-content .btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:20px 42px;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    text-decoration:none;

    font-family:'Roboto', sans-serif;

    font-size:16px;

    font-weight:700;

    transition:all .35s ease;

}

.donaciones-content .btn-primary:hover{

    background:#B6151B;

    transform:translateY(-3px);

}

/*==============================================================
    IMAGEN
==============================================================*/

.donaciones-image{

    position:relative;

}

.donaciones-image img{

    width:100%;

    display:block;

    border-radius:25px;

    object-fit:cover;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

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

@media (max-width:1024px){

    .donaciones .container{

        grid-template-columns:1fr;

        gap:60px;

    }

}

@media (max-width:768px){

    .donaciones{

        padding:90px 0;

    }

    .donaciones .container{

        padding:0 20px;

    }

    .donaciones-content{

        max-width:100%;

    }

    .donaciones-content h2{

        font-size:38px;

    }

    .donaciones-content p{

        font-size:17px;

    }

    .donaciones-list{

        grid-template-columns:1fr;

    }

}

/*==============================================================
    MÓDULO 10
    CONTACTO
==============================================================*/

.contacto{

    width:100%;

    padding:20px 0 120px;

    background:#FFFFFF;

}

.contacto .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}

/*==============================================================
    INFORMACIÓN
==============================================================*/

.contacto-info{

    max-width:600px;

}

.contacto-info h2{

    margin:30px 0;

    font-family:'Montserrat', sans-serif;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    color:#003E7E;

}

.contacto-info p{

    margin-bottom:40px;

    font-family:'Roboto', sans-serif;

    font-size:18px;

    line-height:1.9;

    color:#606D80;

}

/*==============================================================
    DATOS
==============================================================*/

.contacto-datos{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.dato{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.dato i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#003E7E;

    color:#FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    transition:.35s;

}

.dato:hover i{

    background:#D71920;

}

.dato h4{

    margin-bottom:6px;

    font-family:'Montserrat', sans-serif;

    font-size:20px;

    color:#003E7E;

}

.dato span{

    font-family:'Roboto', sans-serif;

    font-size:17px;

    color:#606D80;

}

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

.contacto-form{

    background:#F8F9FA;

    padding:45px;

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.form-group{

    margin-bottom:22px;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:18px 22px;

    border:1px solid #DCE3EB;

    border-radius:12px;

    font-family:'Roboto', sans-serif;

    font-size:16px;

    color:#606D80;

    outline:none;

    transition:.35s;

    background:#FFFFFF;

}

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

    border-color:#003E7E;

    box-shadow:0 0 0 4px rgba(0,62,126,.08);

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

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

.contacto-form .btn-primary{

    width:100%;

    padding:20px;

    border:none;

    border-radius:50px;

    background:#D71920;

    color:#FFFFFF;

    cursor:pointer;

    font-family:'Roboto', sans-serif;

    font-size:17px;

    font-weight:700;

    transition:.35s;

}

.contacto-form .btn-primary:hover{

    background:#B6151B;

    transform:translateY(-3px);

}

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

@media (max-width:1024px){

    .contacto .container{

        grid-template-columns:1fr;

        gap:60px;

    }

}

@media (max-width:768px){

    .contacto{

        padding:90px 0;

    }

    .contacto .container{

        padding:0 20px;

    }

    .contacto-info{

        max-width:100%;

    }

    .contacto-info h2{

        font-size:38px;

    }

    .contacto-info p{

        font-size:17px;

    }

    .contacto-form{

        padding:30px;

    }

}

/*==============================================================
    FOOTER INSTITUCIONAL
    FUNDAHEROES
==============================================================*/

.footer{

    width:100%;

    background:#002C5F;

    color:#FFFFFF;

    padding:90px 0 0;

}

.footer .container{

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.2fr;

    gap:60px;

}

/*==============================================================
    LOGO
==============================================================*/

.footer-brand img{

    width:190px;

    margin-bottom:30px;

}

.footer-brand h3{

    font-family:'Montserrat',sans-serif;

    font-size:30px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:25px;

    color:#FFFFFF;

}

.footer-brand p{

    font-family:'Roboto',sans-serif;

    font-size:17px;

    line-height:1.9;

    color:rgba(255,255,255,.80);

}

/*==============================================================
    TÍTULOS
==============================================================*/

.footer h4{

    margin-bottom:30px;

    font-family:'Montserrat',sans-serif;

    font-size:22px;

    font-weight:700;

    color:#FFFFFF;

}

/*==============================================================
    MENÚ
==============================================================*/

.footer-links ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:18px;

}

.footer-links a{

    text-decoration:none;

    font-family:'Roboto',sans-serif;

    font-size:17px;

    color:rgba(255,255,255,.80);

    transition:.30s;

}

.footer-links a:hover{

    color:#FFD54F;

    padding-left:8px;

}

/*==============================================================
    CONTACTO
==============================================================*/

.footer-contact p{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;

    font-family:'Roboto',sans-serif;

    font-size:17px;

    color:rgba(255,255,255,.80);

}

.footer-contact i{

    color:#FFD54F;

    font-size:18px;

    margin-top:3px;

}

/*==============================================================
    REDES
==============================================================*/

.footer-social{

    display:flex;

    gap:15px;

    margin-top:35px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFFFFF;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#D71920;

    transform:translateY(-4px);

}

/*==============================================================
    COPYRIGHT
==============================================================*/

.footer-bottom{

    margin-top:70px;

    padding:35px 20px;

    border-top:1px solid rgba(255,255,255,.10);

    text-align:center;

}

.footer-bottom p{

    margin:8px 0;

    font-family:'Roboto',sans-serif;

    font-size:15px;

    color:rgba(255,255,255,.65);

}

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

@media (max-width:1100px){

    .footer .container{

        grid-template-columns:repeat(2,1fr);

        gap:50px;

    }

}

@media (max-width:768px){

    .footer{

        padding-top:70px;

    }

    .footer .container{

        grid-template-columns:1fr;

        padding:0 20px;

        gap:45px;

        text-align:center;

    }

    .footer-brand img{

        margin:auto;

        margin-bottom:25px;

    }

    .footer-contact p{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

}