/* Importar fuente Poppins desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

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

/* Estilo general */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: white;
}

/* Sección Descripción de la Empresa */
#descripcion-empresa {
    padding: 50px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

/* Contenedor principal */
#descripcion-empresa .contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Para ajustar en pantallas pequeñas */
}

/* Columna de la imagen */
#descripcion-empresa .imagen-empresa {
    flex: 1 1 50%; /* Ocupa el 50% del ancho */
    text-align: center;
}

#descripcion-empresa .imagen-empresa img {
    width: 90%; /* Ajusta la imagen al tamaño del contenedor */
    height: auto;
    border-radius: 10px;
}

/* Columna del texto */
#descripcion-empresa .texto-descripcion {
    flex: 1 1 50%; /* Ocupa el 50% del ancho */
    padding: 20px;
    text-align: left;
}

#descripcion-empresa .texto-descripcion h1 {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 20px;
}

#descripcion-empresa .texto-descripcion p {
    font-size: 1.1rem;
    color: #000;
    line-height: 1.6;
}

/* Sección Misión, Visión y Compromiso */
#mision-vision-compromiso {
    padding: 50px 20px;
    text-align: center;
    background-color: #ffffff;
}

/* Contenedor principal */
#mision-vision-compromiso .contenedor {
    display: flex;
    justify-content: space-around; /* Espacio uniforme entre columnas */
    flex-wrap: wrap; /* Permite ajustar elementos en pantallas pequeñas */
}

/* Columnas individuales */
#mision-vision-compromiso .columna {
    width: 30%; /* Cada columna ocupa 30% del ancho */
    background-color: #f9f9f9;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

/* Iconos */
#mision-vision-compromiso i {
    font-size: 3rem;
    color: #3498db;
    margin-bottom: 15px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.1));
}

/* Títulos de las columnas */
#mision-vision-compromiso h3 {
    font-size: 1.5rem;
    color: #34495e;
    margin-bottom: 10px;
}

/* Descripción */
#mision-vision-compromiso p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* Mapas */
.map-section {
    display: flex;
    width: 100%;
    height: 400px;
    padding: 0 40px; /* Añadir espacio a los lados */
    box-sizing: border-box; /* Asegura que el padding no afecte al ancho total */
    margin-bottom: 40px; /* Añadir espacio para separar del footer */
    flex-wrap: wrap; /* Permite que los elementos se ajusten cuando no haya suficiente espacio */
}

.map-container {
    flex: 1;
    height: 100%;
    margin-right: 20px; /* Espacio entre el mapa y el texto */
    margin-bottom: 20px; /* Añadir espacio para pantallas pequeñas */
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-container {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    background-color:  #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Evitar que se solape con el footer */
}

.info-container h3 {
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 1.2rem;
    color: #333;
}

.info-container p {
    font-size: 1rem;
    color: #666;
}

/* Media Queries para hacer el diseño responsivo */

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    #descripcion-empresa .contenedor {
        flex-direction: column; /* Apilar elementos en pantallas pequeñas */
        text-align: center;
    }

    #descripcion-empresa .imagen-empresa,
    #descripcion-empresa .texto-descripcion {
        flex: 1 1 100%; /* Ambos ocupan el 100% del ancho */
    }

    #descripcion-empresa .imagen-empresa img {
        width: 100%;
    }

    #descripcion-empresa .texto-descripcion h1 {
        font-size: 2rem;
    }

    #descripcion-empresa .texto-descripcion p {
        font-size: 1rem;
    }

    #mision-vision-compromiso .contenedor {
        flex-direction: column; /* Apilar columnas */
    }

    #mision-vision-compromiso .columna {
        width: 100%; /* Cada columna ocupa el 100% */
        margin: 10px 0;
    }

    .map-section {
        flex-direction: column; /* Coloca el mapa y la información una debajo de la otra */
        padding: 0;
        margin-bottom: 20px;
    }

    .map-container, 
    .info-container {
        width: 100%; /* Ocupan el 100% del ancho */
        margin-right: 0; /* Elimina espacio lateral */
        margin-bottom: 20px; /* Espaciado entre elementos */
    }

    .map-container iframe {
        height: 300px; /* Ajusta el tamaño del mapa */
    }

    .info-container h3 {
        font-size: 1.1rem;
    }
}

/* Pantallas medianas (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
    #descripcion-empresa .contenedor {
        flex-direction: row; /* Devolver a la disposición en filas */
    }

    #descripcion-empresa .imagen-empresa,
    #descripcion-empresa .texto-descripcion {
        flex: 1 1 50%; /* Ocupan el 50% */
    }

    #descripcion-empresa .imagen-empresa img {
        width: 80%; /* Ajustar imagen */
    }

    #descripcion-empresa .texto-descripcion h1 {
        font-size: 2.2rem;
    }

    #descripcion-empresa .texto-descripcion p {
        font-size: 1.2rem;
    }

    #mision-vision-compromiso .contenedor {
        flex-direction: row;
    }

    #mision-vision-compromiso .columna {
        width: 32%; /* 3 columnas de 32% */
    }
}

/* Pantallas grandes (escritorio) */
@media (min-width: 1025px) {
    #descripcion-empresa .contenedor {
        flex-direction: row; /* Mantener en filas */
    }

    #descripcion-empresa .imagen-empresa,
    #descripcion-empresa .texto-descripcion {
        flex: 1 1 50%; /* Ocupan el 50% */
    }

    #mision-vision-compromiso .contenedor {
        justify-content: space-around;
    }

    #mision-vision-compromiso .columna {
        width: 30%; /* 3 columnas de 30% */
    }
}