/* reset para rems */

html {
    font-size: 62.5%;
    font-family: 'Source Sans Pro', sans-serif;
}

/* #0081DA color principal */

/* globales */

.contenedor {
    max-width: 1180px;
    width: 94%;
    margin: auto;
}

img {
    max-width: 100%;
    max-height: 100%;
}

h2 {
    margin: 2rem;
    font-size: 4rem;
    text-align: center;
}

.h2 {
    display: inline;
    margin: 2rem;
}

/* header */

.barra {
    background-color: #0081DA;
    text-align: center;
}

.barra img {
    max-width: 30rem;
    margin: 2.5rem 0 2.5rem;
}

@media (max-width: 768px) {
    .barra img {
        margin: 4rem 0 4rem;
        max-width: 28rem;
    }
}

.datos {
    color: white;
}

@media (min-width: 768px) {
    .datos {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }
}

.iconos i {
    margin: 1rem;
    font-size: 30px;
}
.iconos a{
    color: white;
}

.iconos span {
    font-size: 20px;
}

@media (max-width: 768px) {
    .iconos {
        display: flex;
        justify-content: space-between;
        margin: 0 3rem 0;
    }
}

.navegacion {
    color: #0081DA;
    font-size: 2rem;
}

.navegacion a {
    text-align: center;
    padding: 1rem;
    min-width: 160px;
}

.navegacion a:hover {
    background-color: #0081DA;
    text-decoration: none;
    color: white;
    transition: background-color .9s ease;
}

@media (min-width: 768px) {
    .navegacion {
        display: flex;
        justify-content: space-between;
        margin: 0 6rem 0;
    }
}

@media (max-width: 768px) {
    .navegacion a {
        display: block;
        text-align: center;
        margin: 1.5rem 0 1.5rem;
        background-color: #0081DA;
        color: white;
        text-decoration: none;
    }
}

hr#linea {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #0081DA;
}



/* FOOTER */

.iconos2 {
    color: white;
    padding: 3rem;
}

.iconos2 p {
    display: inline;
}

.iconos2 i {
    margin: 1rem;
    font-size: 30px;
}

.iconos2 span {
    font-size: 20px;
}

@media (max-width: 768px) {
    .iconos2 p {
        display: block;
        align-items: center;
    }
}

.barra2 {
    background-color: #104da3;
}

.barra2 img {
    max-height: 20rem;
}

.pagos-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.pagos-barra p {
    font-size: 1.5rem;
    text-align: right;
    color: white
}

/* PROCESOS DESERVICIOS ........................................................................... */

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .servicios-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

.serv {
    text-align: center;
}

.serv img {
    padding: 2.5rem;
}

.serv h3 {
    font-size: 2rem;
}

/* NOSOTROS.HTML .................................................................................*/

.nosotros-texto {
    display: flex;
    text-align: center;
    max-width: 100rem;
    font-size: 1.5rem;
    margin: 5rem auto 9rem;
    line-height: 30px;
}

.informacion {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 0;
    padding: 0;
}

.informacion p {
    background-color: #0081DA;
    font-size: 1.8rem;
    padding: 5rem;
    margin: 0;
    color: white;
}

@media (max-width: 768px) {
    .informacion {
        display: block;
        align-items: center;
    }
}

.valores {
    display: grid;
    grid-template-columns: 50% 50%;
}
@media (max-width: 768px){
    .valores{
        grid-template-columns: 100%;
    }
}

.valores p {
    text-align: center;
    margin: auto;
    font-size: 1.8rem;
    padding: 4rem;
    line-height: 30px;
}

/* servicios2.................................................................................. */

.volante {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3rem;
    padding: 5rem 0 5rem;
}

@media (min-width: 768px) {
    .volante {
        grid-template-columns: repeat(3, 1fr);
    }
}

.servicio-img:hover img {
    -webkit-transform: scale(1.1);
}

/* contacto ................................................................................. */

.contac-info {
    margin: 3rem 0 6rem;
}

.contactenos-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #0081DA;
    margin: 2rem 0 5rem;
}
@media (max-width: 768px){
    .contactenos-info{
        display: grid;
        grid-template-columns: 1fr;
    }
}

.c-info {
    color: white;
    margin: 5rem;
}

.c-info span {
    font-size: 4rem;
}

.c-info li {
    font-size: 2rem;
    padding: 0.6rem;
}

/* fin */