/* =========================================
   REGLAS GLOBALES
========================================= */
/* Ajuste para que el menú fijo no tape los títulos al hacer scroll */
section {
    scroll-margin-top: 140px; 
}

/* =========================================
   MENÚ SUPERIOR (Fondo Blanco)
========================================= */
/* Letras negras por defecto, azules al pasar el cursor o estar activas */
.top-nav a {
    color: #1a1a1a; 
    transition: color 0.3s ease;
}

.top-nav a:hover, 
.top-nav a.active {
    color: #223b87; 
}

/* Triángulo azul superior (Tu diseño original intacto) */
.top-nav a.active::after {
    content: '';
    position: absolute;
    width: 34px; 
    height: 34px; 
    background-color: #223b87; 
    transform: translateX(-50%) rotate(45deg);
    border-radius: 6px 0 0 0; 
    bottom: -45px; 
    left: 50%;
    z-index: 30;
}
/* =========================================
   MENÚS INFERIORES (Franjas Azules)
========================================= */
.sub-nav a, 
.bottom-nav a {
    color: #ffffff;
    position: relative; 
    transition: opacity 0.3s ease;
}

.sub-nav a:hover,
.bottom-nav a:hover {
    opacity: 0.8;
}

.sub-nav a.active,
.bottom-nav a.active {
    color: #ffffff;
    opacity: 1;
    font-weight: bold;
}

/* Flecha blanca inferior - Ajuste de tamaño a 8px para mayor elegancia */
.sub-nav a.active::after,
.bottom-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -22px; 
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px; /* Tamaño reducido de 15px a 8px */
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    z-index: 30;
}
/* =========================================
   SPINNER DE CARGA (Tu diseño original)
========================================= */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 4px solid #223B87;
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}