/* HEADER FIJO CON TRANSPARENCIA */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    backdrop-filter: blur(15px); /* Ajuste del desenfoque */
    background: rgba(255, 255, 255, 0.85); /* Mayor transparencia */
    border-bottom: 2px solid #0000FF; /* Línea inferior sutil */
    z-index: 1000;
    transition: background 0.3s ease-in-out;
}

/* Para evitar que el contenido quede detrás del header */
body {
    padding-top: 100px; /* Ajusta este valor según la altura real del header */
}

.custom-logo {
    height: 70px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-branding,
.menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos básicos para los enlaces del menú */
.menu li a {
    margin: 10px;
    transition: color 0.3s, border-bottom 0.3s; /* Transición suave */
    border-bottom: 2px solid #ffffff;
    color: inherit; /* Color base heredado */
}

/* Enlaces visitados se muestran en azul */
.menu li a:visited {
    color: #0000FF; /* Azul */
}

/* Estado hover: se cambia a azul marino y se añade un borde inferior */
.menu li a:hover {
    color: #73b0f7; /* Azul marino */
    border-bottom: 2px solid #0505f7;
}

/* Elemento activo/seleccionado: mantiene el borde inferior fijo */
.menu li.current-menu-item a {
    color: #000080; /* Azul marino para el texto */
    border-bottom: 2px solid #000080; /* Borde inferior fijo */
}