/* Colores personalizados para igualar el wireframe */
/* Azul intermedio (usado en la imagen grande) */
.bg-info {
    background-color: #8FD8E8 !important;
}

/* Azul muy pálido (usado en fondos de sección y cabecera) */
.bg-info-subtle {
    background-color: #BBE6F0 !important;
}

/* Gris azulado pálido (usado en las cajas de imágenes pequeñas) */
.bg-light-blue {
    background-color: #E2EFF3 !important;
}

/* Ajustes generales */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.card {
    border-radius: 0; /* Para que se vea cuadrado como el wireframe */
}

/* Asegurar que las cajas de imagen tengan altura consistente */
.p-5 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}