/* =====================================
   ESTILOS GENERALES IMMNA
===================================== */


:root{

    --imm-morado:#7a1fa2;
    --imm-rosa:#f06292;
    --imm-lila:#caa4e8;
    --imm-gris:#f8f6fa;

}



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


.banner-imm{

    height:380px;

    background:
    linear-gradient(
        rgba(122,31,162,.75),
        rgba(240,98,146,.45)
    ),
    url("../images/portadaimm2.jpg");


    background-size:cover;
    background-position:center;


    display:flex;
    align-items:center;

}



.banner-imm h1{

    font-size:48px;
    font-weight:800;

}



.banner-imm p{

    font-size:20px;

}




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


.titulo-imm{

    color:var(--imm-morado);
    font-weight:800;

}


.subtitulo-imm{

    color:var(--imm-rosa);
    font-weight:700;
    letter-spacing:2px;

}




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


.card-imm{

    border:none;

    border-radius:25px;

    padding:35px 25px;

    background:white;


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


    transition:.4s;

}



.card-imm:hover{

    transform:translateY(-10px);


    box-shadow:
    0 20px 40px rgba(0,0,0,.15);

}




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


.icon-imm{


    width:80px;

    height:80px;


    margin:auto;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:
    linear-gradient(
        135deg,
        var(--imm-morado),
        var(--imm-rosa)
    );


    color:white;


    font-size:35px;


}




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


.btn-imm{


    background:
    linear-gradient(
        45deg,
        var(--imm-morado),
        var(--imm-rosa)
    );


    color:white;


    border-radius:30px;


    padding:12px 35px;


    border:none;


}



.btn-imm:hover{

    color:white;

    opacity:.9;

}




/* =====================================
   VALORES
===================================== */


.valor{


    background:white;


    padding:25px;


    border-radius:20px;


    text-align:center;


    box-shadow:
    0 5px 20px rgba(0,0,0,.07);


}



.valor i{


    font-size:35px;


    color:var(--imm-morado);


}






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


@media(max-width:768px){


.banner-imm{

    height:300px;

}



.banner-imm h1{

    font-size:32px;

}


.banner-imm p{

    font-size:16px;

}


}

.objetivo-imm{

background:white;
padding:40px;
border-radius:25px;

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

}

/* =====================================
   BANNER INTERNO PAGINAS
===================================== */


.banner-interno-imm{


height:220px;


background:

linear-gradient(
rgba(122,31,162,.85),
rgba(240,98,146,.65)
),

url("../images/portadaimm2.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;


}



.banner-interno-imm h1{

color:white;

font-size:45px;

font-weight:800;


}



.banner-interno-imm p{

color:white;

font-size:18px;


}