/* Utilidades globales accesibles desde todas las páginas */
:root {
    --nexabit-navy: #003f8a; /* color azul marino base */
    --nexabit-navy-shadow: rgba(0,63,138,0.22);
}

/* Clase utilitaria para esquinas redondeadas y sombra azul marino */
.rounded-navy {
    border-radius: 12px; /* esquinas redondeadas */
    box-shadow: 0 8px 24px var(--nexabit-navy-shadow);
    -webkit-box-shadow: 0 8px 24px var(--nexabit-navy-shadow);
    -moz-box-shadow: 0 8px 24px var(--nexabit-navy-shadow);
    background-clip: padding-box; /* evita que la sombra afecte el fondo interno */
}

/* Variantes */
.rounded-navy-sm { border-radius: 8px; box-shadow: 0 4px 12px var(--nexabit-navy-shadow); }
.rounded-navy-lg { border-radius: 16px; box-shadow: 0 12px 32px var(--nexabit-navy-shadow); }

/* Uso típico: aplicar a contenedores .card, imágenes, o secciones */

/* Ejemplo: si quieres aplicar padding y fondo por defecto */
.rounded-navy-box {
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--nexabit-navy-shadow);
}

/* Utilidades de sombra para texto */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.text-shadow-md {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.text-shadow-lg {
    /* sombra más difusa con tono azul marino */
    text-shadow: 0 6px 18px rgba(0, 63, 138, 0.20);
}

.text-shadow-navy {
    /* sombra sutil azulada para títulos */
    text-shadow: 0 4px 12px rgba(0, 63, 138, 0.25);
}

.caption-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    
}
.caption-image {
    width: 100%;
    height: auto; /* Automático en móvil para que no se deforme */
    object-fit: cover;
}

/* Solo para computadoras (Pantallas desde 992px de ancho, igual al -lg- de Bootstrap) */
@media (min-width: 992px) {
    .caption-image {
        height: 350px !important; /* Altura fija específica para PC */
    }
}
.icon-shape {
    width: 64px !important;
    height: 64px !important;
    /* CAMBIO: "contain" asegura que el icono se encoja para mostrarse 100% completo */
    object-fit: contain !important;
    display: inline-block;
}