/* Estilos para la página "Quiénes Somos" */

/* Contenedor principal del contenido */
.contenedor-principal {
    max-width: 800px; /* Ancho máximo del contenedor */
    margin: 120px auto 40px auto; /* Aumenta el margen superior para bajar el contenedor */
    padding: 20px; /* Espacio interno del contenedor */
    background-color: #f9f9f9; /* Fondo gris claro para el contenedor */
    border-radius: 16px; /* Bordes redondeados para el contenedor */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
    text-align: center; /* Centra el texto dentro del contenedor */
    border: 1px solid #e0e0e0; /* Borde gris claro para mayor definición */
}

/* Estilo para el título */
.contenedor-principal h1 {
    font-size: 28px; /* Tamaño de fuente del título */
    color: #008080; /* Color verde agua para el título */
    margin-bottom: 20px; /* Espacio debajo del título */
    font-weight: bold; /* Negrita para el título */
}

/* Estilo para el párrafo */
.contenedor-principal p {
    font-size: 16px; /* Tamaño de fuente del párrafo */
    color: #555555; /* Color gris oscuro para el texto */
    line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
    margin-top: 20px; /* Espacio encima del párrafo */
    text-align: justify; /* Justifica el texto para un aspecto más ordenado */
}

/* Estilo para la imagen con bordes redondeados */
.imagen-redondeada {
    margin: 20px 0; /* Espacio arriba y abajo de la imagen */
}

.imagen-redondeada img {
    width: 100%; /* Ancho completo del contenedor */
    max-width: 600px; /* Ancho máximo de la imagen */
    border-radius: 12px; /* Bordes redondeados para la imagen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
    object-fit: cover; /* Mantiene la proporción de la imagen sin distorsión */
}

/* Estilo para la imagen con resplandor exterior */
.imagen-resplandor {
    margin: 20px 0; /* Espacio arriba y abajo de la imagen */
}

.imagen-resplandor img {
    width: 100%; /* Ancho completo del contenedor */
    max-width: 600px; /* Ancho máximo de la imagen */
    border-radius: 12px; /* Bordes redondeados para la imagen */
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.3); /* Resplandor exterior verde agua para la imagen */
    object-fit: cover; /* Mantiene la proporción de la imagen sin distorsión */
}

/* Estilo para la sección de Misión y Visión */
.misvision {
    margin-top: 40px; /* Espacio encima de la sección */
    text-align: left; /* Alinea el texto a la izquierda */
}

.misvision h2 {
    font-size: 24px; /* Tamaño de fuente para los subtítulos */
    color: #008080; /* Color verde agua para los subtítulos */
    margin-bottom: 10px; /* Espacio debajo de los subtítulos */
    font-weight: bold; /* Negrita para los subtítulos */
}

.misvision p {
    font-size: 16px; /* Tamaño de fuente del párrafo */
    color: #555555; /* Color gris oscuro para el texto */
    line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
    margin-bottom: 20px; /* Espacio debajo de los párrafos */
}

/* Estilo para la cita filosófica */
.cita-filozofica {
    margin-top: 40px; /* Espacio encima de la cita */
    padding: 20px; /* Espacio interno de la cita */
    background-color: #ffffff; /* Fondo blanco para la cita */
    border-radius: 12px; /* Bordes redondeados para la cita */
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.3); /* Resplandor exterior verde agua para la cita */
    font-style: italic; /* Estilo en cursiva para la cita */
    text-align: center; /* Centra el texto de la cita */
}

.cita-filozofica blockquote {
    margin: 0; /* Elimina el margen del bloque de cita */
    font-size: 18px; /* Tamaño de fuente para la cita */
    color: #333333; /* Color gris oscuro para la cita */
}