@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*
COLORES DE LA EMPRESA

#16b1e0  #dfe4e8  #04142c  #077aba  #1b6086  #06436b  #0b3654  #04294e 
#087aba  #16b1e0  #04142c  #dfe4e8  #1b6086  #06436b 
#05152c  #087aba  #16b1e0  #dfe4e8 
#05152d  #087aba 



DARK THEME:

Fondo oscuro: #0c142a
Texto claro: #e0e5e9
Detalles destacados: #65cdf3

LIGHT THEME:
Fondo claro: #e0e5e9
Texto oscuro: #0c142a
Detalles destacados: #10afdf


-----------------------------


ALTERNATIVA Dark

Fondo oscuro: #1b1e23
Texto claro: #f0f0f0
Detalles destacados: #ffae42

ALTERNATIVA Light

Fondo claro: #f0f0f0
Texto oscuro: #1b1e23
Detalles destacados: #4a90e2

-----------------------------
*/

body.light-theme {
    background-color: #e0e5e9;
    color: #0c142a;
}

body.dark-theme {
    background-color: #0c142a;
    color: #e0e5e9;
}



body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #dfe4e8 ;
}

header {
    background-color: #0c142a;
    color: #e0e5e9;
    padding: 5px 0;
    text-align: center;
}

/* Agregar espacio para el footer */
main {
    padding-bottom: 85px; /* Ajustar según el tamaño del footer */    
}



.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 70px;
    margin-right: 10px;
}

.logo h1 {
    font-size: 20px;
    margin: 0;
}

nav {
    text-align: center;
    margin-bottom:8px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    padding: 3px 8px;
    border-radius: 30px;
    opacity: 0.7;
}

nav a:hover {
    background-color: #555;
    opacity: 1;
}

/*----------------------------------------------------------*/







/*----------------------------------------------------------*/

/*index*/

.encabezado-main {
    height: 235px;
    display: flex;
    background-size: contain;
    background-position: 3%;
    background-image: url('img/mainLogo.jpg');   

}

.parrafo {
    margin-top: 70px;
    margin-bottom: 70px;
    text-align: justify;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: large;
}

/*----------------------------------------------------------*/





/*----------------------------------------------------------*/

/* Principios corporativos */
.about-services {
    padding: 50px 0;
    background-color: #f2f2f2;
    text-align: center;
}

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* Centra los elementos */
}

.servicio-cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.servicio-ind {
    width: 250px; /* Ancho fijo de cada caja */
    margin: 5px; /* Margen reducido */
    padding: 15px; /* Padding reducido */
    background-color: #ffffff7c;
    text-align: justify;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: inline-block; /* Mostrar en línea */
    vertical-align: top; /* Alinear arriba */
}

.servicio-ind img {
    max-width: 150px;
    margin-bottom: 10px; /* Margen inferior reducido */
}

.servicio-ind h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.servicio-ind p {
    font-size: 16px;
    color: #000000;
}

.about-services h1 {
    text-align: center;
    margin-bottom: 30px;
    padding: 10px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 2px;
}


@media screen and (max-width: 768px) {
    .servicio-ind {
        width: calc(50% - 10px); /* Dos columnas en pantallas más pequeñas */
    }
}

@media screen and (max-width: 480px) {
    .servicio-ind {
        width: calc(100% - 10px); /* Una columna en pantallas aún más pequeñas */
    }
}

/*----------------------------------------------------------*/







/*----------------------------------------------------------*/

.politicas-calidad {
    padding: 50px 0;
    background-color: #ffffff;
    text-align: center;
}

.contenedorPC {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #;
}

.contenido {
    flex: 1;
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    background-color: # ;
}

.contenido h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.contenido p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Estilos para imágenes responsivas */
.imagen img {
    max-width: 100%;
    height: auto;
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .contenedor {
        flex-direction: column;
    }
    .contenido, .imagen {
        width: 100%;
        padding: 0 20px;
    }
}

/*----------------------------------------------------------*/













/*----------------------------------------------------------*/

/*sobre nosotros*/
.encabezado-sn {
    /* Ajustes para la imagen de fondo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 80px; /* Altura ajustable según tus necesidades */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    margin-bottom: 10px;
}

/*----------------------------------------------------------*/

/*----------------------------------------------------------*/

.misionvision {
    position: relative; 
    background-image: url('img/mula.jpeg'); 
    background-size: cover;
    background-position: center;
    height: calc(100vh - 100px); /* Altura ajustada para dejar espacio para el footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff; 
    overflow: hidden; 
    filter: brightness(80%); 
}

.misionvision:before {
    content: ''; 
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(37, 37, 37, 0.7);  
}

.mision, .vision {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    z-index: 1;
    text-align: justify;
    overflow: auto; /* Revertimos overflow a auto para permitir el desplazamiento del contenido si es necesario */
}

.mision h2, .vision h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    white-space: normal;
    text-align: center; /* Centra el título dentro de la caja */

}

.mision p, .vision p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
    overflow: auto; /* Revertimos overflow a auto para permitir el desplazamiento del contenido si es necesario */
}

/* Estilo específico para PC´s */
@media screen and (min-width: 768px) {
    .mision, .vision {
        overflow: hidden; /* Oculta el desplazamiento automático en pantallas grandes */
    }
}

/*----------------------------------------------------------*/

/*---------------------------------------------------------*/

/* Estilos para la sección "NUESTROS SERVICIOS" */
.our-services {
    text-align: center;
    padding: 50px 20px;
}

.our-services h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #333;
}

.our-services .rectangle {
    width: 100px;
    height: 5px;
    background-color: #333;
    margin: 20px auto;
}

.our-services p {
    font-size: 18px;
    margin-bottom: 40px;
}

/* Estilos para pantallas grandes (desktop) */
@media screen and (min-width: 768px) {
    .our-services {
        max-width: 800px;
        margin: 0 auto;
    }

    .our-services h1 {
        font-size: 48px;
    }

    .our-services p {
        font-size: 20px;
    }
}

/* Estilos para tablets y dispositivos móviles */
@media screen and (max-width: 767px) {
    .our-services h1 {
        font-size: 32px;
    }

    .our-services p {
        font-size: 16px;
    }
}

/*----------------------------------------------------------*/




/*Lista de servicios */
.containerServicios {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.listaServicios {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
}

.columna {
    width: 48%;
}

.columna li {
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 20px; /* Espacio para la viñeta */
    position: relative; /* Posición relativa para la viñeta personalizada */
}

.columna li:before {
    content: "\2022"; /* Código de la viñeta (•) */
    color: #000000; /* Color de la viñeta */
    font-size: 1.4em; /* Tamaño de la viñeta */
    position: absolute;
    left: 0;
    top: 0;
}

@media screen and (max-width: 768px) {
    .containerServicios {
        padding: 10px;
    }
    .columna {
        width: 100%;
    }
}

/*----------------------------------------------------------*/



















/*----------------------------------------------------------*/

.encabezado-conta {
    /* Ajustes para la imagen de fondo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 80px; /* Altura ajustable según tus necesidades */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    margin-bottom: 10px;
}

/* Ajustes para el contenedor sección de contacto */
.contacto {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en dispositivos pequeños */
    justify-content: center;
}

/* Estilos para el mapa */
.mapa {
    margin-right: 20px; /* Separación entre el mapa y la información */
    padding-left: 50px;
    flex: 1 1 300px; /* Fuerza al mapa a tener un ancho mínimo */
}

.mapa iframe {
    width: 100%; /* Asegura que el mapa sea completamente visible */
    height: 100%; /* Ajusta la altura del mapa */  
}

/* Estilos para la información de contacto */
.informacion {
    flex: 1 1 300px; /* Fuerza a la información a tener un ancho mínimo */
    margin-top: 20px; /* Espaciado superior */
    text-align: center;
}
.informacion h2 {
    margin-bottom: 10px; /* Espaciado inferior para el título */
}
.informacion ul {
    list-style: none;
    padding: 0;
}
.informacion ul li {
    margin-bottom: 5px; /* Espaciado inferior para cada elemento de la lista */
}







/* Estilos para la sección "NUESTROS CLIENTES" */
.our-clients {
    text-align: center;
    padding: 20px 40px; 
    
}

.our-clients h3 {
    font-size: 26px;
    margin-bottom: 20px;
    color: #333;
}

.our-clients .rectangle {
    width: 100px;
    height: 5px;
    background-color: #333;
    margin: 20px auto;
}

/* Estilos para pantallas grandes (desktop) */
@media screen and (min-width: 768px) {
    .our-clients {
        max-width: 800px;
        margin: 0 auto;
    }

    .our-clients h3 {
        font-size: 48px;
    }
}

/* Estilos para tablets y dispositivos móviles */
@media screen and (max-width: 767px) {
    .our-services h3 {
        font-size: 32px;
    }
}

.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background-color: #f7f7f7ee;
}

.logo-container {
    width: 250px; /* Ajusta el tamaño según tus necesidades */
    height: 200px; /* Ajusta el tamaño según tus necesidades */
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta el tamaño de la imagen sin deformarla */
}






/* Estilos para la sección "NUESTROS SERVICIOS" */
.porqueElegirnos {
    text-align: center;
    padding: 80px 13px;
}

.porqueElegirnos h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #333;
}

.porqueElegirnos .rectangle {
    width: 100px;
    height: 5px;
    background-color: #333;
    margin: 20px auto;
}

.porqueElegirnos p {
    font-size: 18px;
    margin-bottom: 40px;
}

/* Estilos para pantallas grandes (desktop) */
@media screen and (min-width: 768px) {
    .porqueElegirnos {
        max-width: 800px;
        margin: 0 auto;
    }

    .porqueElegirnos h1 {
        font-size: 48px;
    }

    .porqueElegirnos p {
        font-size: 20px;
    }
}

/* Estilos para tablets y dispositivos móviles */
@media screen and (max-width: 767px) {
    .porqueElegirnos h1 {
        font-size: 32px;
    }

    .porqueElegirnos p {
        font-size: 16px;
    }
}






/*----------------------------------------------------------*/





/*----------------------------------------------------------*/





footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed; /* Fija el footer en la parte inferior de la pantalla */
    bottom: 0;
    width: 100%; /* Ocupa todo el ancho de la pantalla */
}

/* Estilos para el párrafo dentro del footer */
footer p {
    margin: 0;
}





@media only screen and (max-width: 768px) {
    .encabezado-img h1 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 480px) {
    .encabezado-img h1 {
        font-size: 16px;
    }
    .parrafo {
        padding: 0 10px;
    }
}