/* Estilos para la sección "Quienes Somos" */
.quienes-somos {
    display: flex; /* Muestra los elementos en una fila */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: flex-start; /* Alinea los elementos al principio de la línea */
    margin: 40px 90px; /* Margen externo */
}

/* Estilos para el contenido de la sección */
.contenido {
    background-color: #fff; /* Color de fondo blanco */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    padding: 20px; /* Relleno interior */
    flex: 1; /* Toma todo el espacio disponible */
    margin-right: 20px; /* Espaciado derecho entre el contenido y la imagen */
}

/* Estilos para el título de la sección */
.quienes-somos h2 {
    font-size: 35px; /* Tamaño de la fuente */
    text-align: center; /* Alineación del texto al centro */
    font-weight: bold; /* Negrita */
    color: #002766; /* Color del texto */
    margin-top: 24px; /* Margen superior */
}

/* Estilos para la imagen en la sección */
.quienes-somos img {
    max-width: 55%; /* Ancho máximo del 55% */
    height: 580px; /* Altura fija */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    margin-left: -20px; /* Espaciado izquierdo entre el contenido y la imagen */
}

/* Estilos para la sección "Misión - Visión" */
.sobre-nosotros {
    display: grid; /* Utiliza el diseño de cuadrícula */
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
    grid-template-rows: auto auto; /* Filas automáticas */
    gap: 0; /* Sin espacio entre las cuadrículas */
    padding: 20px; /* Relleno interno */
    margin-left: 70px; /* Margen izquierdo */
    margin-right: 70px; /* Margen derecho */
}

/* Estilos para las imágenes a la izquierda y derecha */
.img-izquierda,
.img-derecha {
    display: flex; /* Flexbox para centrar contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    margin: 20px; /* Margen exterior */
}

/* Estilos generales para las imágenes dentro de img-izquierda y img-derecha */
.img-izquierda img,
.img-derecha img {
    max-width: 100%; /* Ancho máximo del 100% del contenedor */
    height: auto; /* Altura automática para mantener proporciones */
}

/* Ajuste específico para la imagen izquierda */
.img-izquierda img {
    width: 100%; /* Ancho completo del contenedor */
    height: auto; /* Altura automática */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra alrededor de la imagen */
}

/* Ajuste específico para la imagen derecha */
.img-derecha img {
    width: 100%; /* Ancho completo del contenedor */
    height: auto; /* Altura automática */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra alrededor de la imagen */
}

/* Estilos para las secciones de visión y misión */
.vision,
.mision {
    background-color: #fff; /* Fondo blanco */
    padding: 20px; /* Relleno interno */
    margin: 20px; /* Margen exterior */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Estilos para los títulos en visión, misión y himno */
.vision h2,
.mision h2,
.himno h2 {
    color: #122746; /* Color del texto */
    text-align: center; /* Alineación central */
    font-size: 35px; /* Tamaño de la fuente */
    margin-top: 24px; /* Margen superior */
}

/* Estilos para los párrafos en visión, misión y contenido */
.vision p, 
.mision p, 
.contenido p {
    color: #555; /* Color del texto */
    text-align: justify; /* Justificación del texto */
    font-size: 20px; /* Tamaño de la fuente */
    padding: 18px; /* Relleno interno */
}

/* Posicionamiento de la sección de visión en la cuadrícula */
.vision {
    grid-column: 2 / 3; /* Ocupa la segunda columna */
    grid-row: 1 / 2; /* Ocupa la primera fila */
    margin-left: -25px; /* Margen izquierdo negativo para ajustar posición */
}

/* Posicionamiento de la sección de misión en la cuadrícula */
.mision {
    grid-column: 1 / 2; /* Ocupa la primera columna */
    grid-row: 2 / 3; /* Ocupa la segunda fila */
    margin-right: -25px; /* Margen derecho negativo para ajustar posición */
}

/* Sección "Himno" */
.himno-letra {
    text-align: center; /* Alinea el texto al centro */
    margin-bottom: 20px; /* Margen inferior */
}

.himno-letra p {
    color: #555; /* Color del texto */
    font-size: 20px; /* Tamaño de fuente */
    flex: 1; /* Ocupa todo el espacio disponible dentro de un contenedor flex */
    margin-right: 20px; /* Margen derecho */
    line-height: 1.6; /* Altura de línea, para mejorar la legibilidad */
}

@media screen and (max-width: 850px) {
    .quienes-somos {
        flex-direction: column;
        margin: 20px; /* Ajuste del margen para dispositivos móviles */
    }
    .contenido {
        margin-right: 0; /* Eliminar el margen derecho en dispositivos móviles */
        margin-bottom: 20px; /* Espaciado inferior entre el contenido y la imagen */
    }
    .quienes-somos h2 {
        font-size: 28px; /* Reducir el tamaño del título en dispositivos móviles */
        margin-top: 12px; /* Ajustar el margen superior del título */
        text-align: left; /* Alinear el texto a la izquierda en dispositivos móviles */
    }
    .quienes-somos img {
        max-width: 100%; /* Hacer que la imagen ocupe todo el ancho disponible */
        height: auto; /* Permitir que la altura de la imagen se ajuste automáticamente */
        margin-left: 0; /* Eliminar el margen izquierdo en dispositivos móviles */
    }
    .sobre-nosotros {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    .img-izquierda, .img-derecha {
        margin: 10px 0; /* Reducir márgenes superior e inferior */
    }
    .vision, .mision {
        margin: 10px 0; /* Reducir márgenes superior e inferior */
        padding: 15px; /* Reducir padding */
        width: 100%; /* Asegurarse de que el ancho sea del 100% */
        box-sizing: border-box; /* Asegurar que el padding se incluya en el ancho */
    }
    .vision h2, .mision h2 {
        font-size: 28px; /* Reducir tamaño de fuente */
        margin-top: 20px; /* Ajustar margen superior */
    }
    .vision p, .mision p {
        font-size: 16px; /* Reducir tamaño de fuente */
        padding: 10px; /* Reducir padding */
    }
    .img-izquierda img, .img-derecha img {
        width: 100%; /* Asegurar que las imágenes ocupen todo el ancho disponible */
        height: auto;
    }
    .himno h2 {
        font-size: 28px; /* Reducir el tamaño del título */
        margin-top: 20px; /* Ajustar el margen superior */
    }
    .himno-letra p {
        font-size: 16px; /* Reducir el tamaño de la fuente del párrafo */
        margin-right: 10px; /* Reducir el margen derecho */
        line-height: 1.4; /* Reducir la altura de línea */
    }
    .himno-letra {
        padding: 0 10px; /* Agregar padding para mejorar el espaciado */
    }
    audio {
        width: 100%; /* Hacer que el elemento de audio ocupe todo el ancho disponible */
    }
}