/* =========================================
   PÁGINA INTERIOR: SU FUNCIÓN (IMÁGENES DOBLES)
======================================== */

.texto-institucional {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

/* Contenedor para alinear 2 imágenes lado a lado */
.galeria-doble {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Espacio entre las dos fotos */
    margin-bottom: 25px; /* Espacio abajo de las fotos */
    margin-top: 10px;
    width: 100%;
}

/* Estilos de las imágenes */
.img-institucional {
    flex: 1; /* Esto hace que cada foto ocupe exactamente el 50% del espacio disponible */
    width: 100%;
    aspect-ratio: 4/3; /* Fuerza a que ambas fotos sean idénticas en altura y proporción */
    object-fit: cover; /* Evita que las fotos se deformen si son de distinto tamaño original */
    border-radius: 8px;
    border: 3px solid var(--gris-borde);
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}

/* Ajustes finos para celulares */
@media (max-width: 768px) {
    .galeria-doble {
        gap: 10px; /* Juntamos un poquito más las fotos en pantallas chicas */
    }
    
    .img-institucional {
        border-width: 0px; /* Borde más fino para no comer espacio de foto en el celular */
    }
}