/* @import url('https://fonts.googleapis.com/css?family=Raleway:400,500,800'); */

@font-face {
        font-family: 'GFS_Didot';
        src: url('../fuentes/GFS_Didot/GFSDidot-Regular.ttf');
        /* font-style: normal; */
        /*  font-weight: 100;*/
    }

/* --- Estilos Generales y Reseteos --- */
/*
 * Se recomienda tener un reset CSS más completo al inicio
 * para asegurar la consistencia entre navegadores.
 * Ejemplo:
 * html { box-sizing: border-box; }
 * *, *:before, *:after { box-sizing: inherit; }
 * body { margin: 0; padding: 0; }
 */

/* --- Estilos del Menú Principal --- */

/* Contenedor principal de la navegación */
.main-menu {
    width: 100%;
    background-color: #ffffff;
    /* Fondo blanco para la versión web */
    position: fixed;
    /* Mantiene el menú en la parte superior al hacer scroll */
    top: 0;
    left: 0;
    z-index: 999;
    /* Asegura que el menú esté por encima de otros elementos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Sombra sutil para darle profundidad */
}

/* Contenedor interno para centrar y alinear elementos del menú */
.menu-container {
    max-width: 1000px;
    /* Ancho máximo para el contenido del menú */
    min-height: 4rem;
    /* Altura mínima del contenedor */
    margin: 0 auto;
    /* Centra el contenedor horizontalmente */
    display: flex;
    /* Utiliza Flexbox para alinear elementos */
    justify-content: space-between;
    /* Espacia el logo y la lista de menú */
    align-items: center;
    /* Centra verticalmente los elementos */
    padding: 0 20px;
    /* Espaciado interno horizontal */
}

.logo {
    /* [AJUSTE DE ANCHO DE LOGO EN DESKTOP] */
    width: 350px;
    /* Mantenemos el ancho para que el menú no se mueva */
    height: 90px;
    /* Mantenemos la altura para fijar el menú */
    display: flex;
    /* Ayuda a centrar la imagen si es más pequeña */
    align-items: center;
    margin-left: -120px;
}



/* Estilos para el logo dentro del menú */
.logo img {
    height: 90px;
    /* Altura Fija del contenedor. ¡Cualquier imagen se ajustará a 90px de alto! */
    width: 100%;
    /* El logo ocupará el 100% del ancho de su contenedor (350px) */
    object-fit: contain;
}

/* --- Estilos de la Lista de Navegación (versión de escritorio) --- */

/* Estilos generales para la lista ul, usando la clase snip1135 */
.snip1135 {
    font-family: 'GFS_Didot';
    /* Fuente principal para los ítems del menú */
    text-align: center;
    /* Alinea el texto al centro (útil en móvil) */
    font-weight: 500;
    /* Peso de la fuente */
    margin: 0;
    /* Elimina el margen por defecto de las listas */
    padding: 0;
    /* Elimina el padding por defecto de las listas */
}

/* Cada ítem de la lista (li) */
.snip1135 li {
    display: inline-block;
    /* Muestra los ítems en línea para el menú horizontal */
    list-style: none;
    /* Quita los puntos de lista */
    margin: 0 1.5em;
    /* Espaciado entre los ítems del menú */
}

/* Enlaces (a) dentro de los ítems de la lista */
.snip1135 a {
    padding: 0.5em 0;
    /* Espaciado interno vertical */
    color: #8A0303;
    /* Color del texto del enlace */
    position: relative;
    /* Necesario para las animaciones ::before y ::after */
    letter-spacing: 1px;
    /* Espaciado entre letras */
    text-decoration: none;
    /* Elimina el subrayado por defecto */
    display: inline-block;
    /* Permite aplicar padding y transformaciones */
    overflow: hidden;
    /* Oculta el contenido desbordado para la animación de texto */
    line-height: 1;
    /* Altura de línea para el texto */
    vertical-align: middle;
    /* Alineación vertical */
}

/* --- Animación al pasar el ratón (Hover) y para el elemento activo --- */

/* Pseudo-elementos ::before y ::after para la animación de hover */
.snip1135 a:before,
.snip1135 a:after {
    position: absolute;
    /* Posicionamiento absoluto relativo al enlace padre */
    transition: all 0.35s ease;
    /* Transición suave para todos los cambios */
}

/* Línea inferior que aparece al hover o al estar activo */
.snip1135 a:before {
    bottom: 0;
    /* Alineado a la parte inferior del enlace */
    display: block;
    /* Bloque para aplicar ancho y alto */
    height: 3px;
    /* Altura de la línea */
    width: 0%;
    /* Ancho inicial de 0% (invisible) */
    content: "";
    /* Contenido vacío para que el pseudo-elemento se renderice */
    background-color: #C1121F;
    /* Color de la línea (tu color de acento) */
}

/* Texto de hover/activo que se superpone */
.snip1135 a:after {
    left: 0;
    /* Alineado a la izquierda */
    top: 0;
    /* Alineado a la parte superior */
    width: 100%;
    /* Ancho completo */
    text-align: center;
    /* Centra el texto */
    padding: 0.5em 0;
    /* Mismo padding que el enlace para superposición exacta */
    content: attr(data-hover);
    /* El contenido es el valor del atributo data-hover */
    color: #b91c3c;
    /* Color del texto al hover/activo */
    white-space: nowrap;
    /* Evita que el texto se rompa en varias líneas */
    max-width: 0%;
    /* Ancho máximo inicial de 0% (invisible) */
    overflow: hidden;
    /* Oculta el texto que excede el max-width */
}

/* Estados al pasar el ratón (hover) o cuando el ítem está activo (current-active) */
/* La clase 'current-active' se añade/quita con JavaScript */
.snip1135 a:hover:before,
.snip1135 .current-active a:before {
    opacity: 1;
    /* Hace la línea visible */
    width: 100%;
    /* Expande la línea a todo el ancho */
}

.snip1135 a:hover:after,
.snip1135 .current-active a:after {
    max-width: 100%;
    /* Expande el texto superpuesto a todo el ancho */
}

/* --- Estilos del Botón Hamburguesa --- */

#btn-menu {
    display: none;
    /* Oculto por defecto en la versión de escritorio */
    background: none;
    /* Sin fondo */
    border: none;
    /* Sin borde */
    font-size: 2.4rem;
    /* Tamaño del icono */
    cursor: pointer;
    /* Cambia el cursor para indicar que es clickeable */
    color: #b91c3c;
    /* Color del icono */
}

/* [NUEVO] Ocultar contenedor de cierre en Desktop por defecto */
#btn-cerrar-container {
    display: none;
}


/* ======= Media Queries para Versión Móvil y Ajustes Generales ======= */

/* Estilos aplicados cuando el ancho de la pantalla es igual o menor a 768px (tablets y móviles) */
@media (max-width: 768px) {

    /* [AJUSTE SCROLL] Menú principal en móvil: Transparente por defecto */
    .main-menu {
        background-color: transparent;
        /* Fondo transparente por defecto */
        box-shadow: none;
        /* Sin sombra por defecto */
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        /* Transición suave para el cambio de fondo */
    }

    /* ESTADO AL HACER SCROLL (Activado por JS) */
    .main-menu.scrolled {
        /* 1. Fondo negro semitransparente ("mate") */
        background-color: rgba(0, 0, 0, 0.8); 
        
        /* 2. Añade sombra para contraste */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 
    }

    /* [AJUSTE COLOR BOTÓN - DEPENDIENTE DE SCROLL] */
    
    /* Color del botón hamburguesa es rojo cuando el fondo es transparente (no-scrolled) */
    .main-menu:not(.scrolled) #btn-menu {
        color: #b91c3c; 
    }

    /* Color del botón hamburguesa es blanco cuando el fondo es negro (scrolled) */
    .main-menu.scrolled #btn-menu {
        color: #8A0303; 
    }
    
    /* Ajustes para el contenedor del menú en móvil */
    .menu-container {
        flex-direction: row;
        /* Asegura que los elementos sigan en fila */
        justify-content: space-between;
        /* Espacia logo y botón hamburguesa */
        align-items: center;
        /* Centra verticalmente */
        padding: 1rem 20px;
        /* Mantiene el padding del contenedor */
    }

    .logo {
        /* [AJUSTE MÓVIL] Tamaño fijo y posición */
        width: 250px; 
        height: 60px;
        margin-left: 20px; /* Mueve el logo a la derecha */
    }

    .logo img {
        height: 60px;
        /* Altura Fija en móvil (60px) */
        width: 100%;
        /* El logo ocupará el 100% del ancho de su contenedor (150px) */
        object-fit: contain;
        margin-bottom: 10px;
    }

    /* Mostrar el botón hamburguesa en móvil */
    #btn-menu {
        display: block;
        /* Hace visible el botón hamburguesa */
        margin-right: 20px; /* Mueve el botón a la izquierda */
    }

    /* --- Estilos para la lista de menú desplegable en móvil --- */

    #menu-list {
        display: none;
        /* Oculto por defecto, se muestra con JS */
        
        /* [FONDO DESPLEGABLE] Fondo oscuro semitransparente (negro mate) */
        background: rgba(0, 0, 0, 0.9);
        
        backdrop-filter: blur(10px);
        /* Efecto de desenfoque para el fondo */
        -webkit-backdrop-filter: blur(10px);
        /* Compatibilidad con navegadores Webkit */
        border-radius: 10px;
        /* Bordes redondeados para el div del menú */
        
        /* [CRÍTICO] Padding ajustado */
        padding: 0.5rem 1rem 1rem 1rem; 
        
        /* [CRÍTICO] Position relative para anclar la X */
        position: relative; 
        
        /* [CRÍTICO] Position absolute para flotar el menú */
        position: absolute; 
        top: 4.8rem;
        /* Posiciona justo debajo del menú fijo */
        right: 20px;
        /* Alineado a la derecha */
        width: 100%;
        /* Ocupa todo el ancho disponible */
        max-width: 250px;
        /* Ancho máximo para el div del menú */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        /* Sombra para darle un efecto elevado */
        z-index: 1000;
        /* Asegura que esté por encima de todo */
        flex-direction: column;
        /* Organiza los ítems verticalmente */
    }
    
    /* Mostrar menú cuando la clase 'active' está presente (toggle con JS) */
    #menu-list.active {
        display: flex;
        /* Muestra el menú como un flex container */
    }
    
    /* [NUEVO y CRÍTICO] Contenedor del botón de cierre ('X') */
    #btn-cerrar-container {
        list-style: none;
        /* [CRÍTICO] Lo hacemos visible SOLO en móvil */
        display: block; 
        margin: 0;
        padding: 0;
        height: 0; 
    }

    /* [NUEVO y CRÍTICO] Estilo y POSICIÓN DEFINITIVA del botón de cierre ('X') */
    #btn-cerrar-menu {
        background: none;
        border: none;
        font-size: 2.5rem;
        cursor: pointer;
        line-height: 1;
        color: #8A0303; /* Blanco para contraste */
        
        /* [SOLUCIÓN FINAL] Posicionamiento ABSOLUTO respecto al #menu-list */
        position: absolute;
        top: 5px; /* Pegado al borde superior */
        right: 5px; /* Pegado al borde derecho */
        
        padding: 5px; /* Espacio para facilitar el clic */
        z-index: 1010;
    }


    /* Ítems de menú verticales en móvil */
    #menu-list li {
        display: block;
        /* Cada ítem ocupa su propia línea */
        margin: 0.5rem 0; /* [AJUSTE] Reducido de 0.8 a 0.5 para subirlos y juntarlos */
        /* Espaciado vertical entre ítems */
    }
    
    /* [AJUSTE FINAL] El primer enlace (Inicio) sube totalmente */
    #menu-list li:first-of-type {
        /* Quitamos margen extra para que suba a nivel de la X (pero a la izquierda) */
        margin-top: 0; 
    }

    /* [AJUSTE COLOR ENLACES] Conservar el color rojo dentro del menú desplegado */
    .snip1135 a {
        color: #8A0303; /* El color rojo que quieres mantener */
    }

    .snip1135 a:after {
        color: #b91c3c; /* Rojo de acento para hover/activo */
    }


    /* Ancho completo para la lista en móvil y alineación de texto a la izquierda */
    .snip1135 {
        width: 100%;
        /* Asegura que ocupe todo el ancho del #menu-list */
        text-align: left;
        /* Alinea el texto de los ítems a la izquierda */
        font-weight: 600;
        /* Peso de la fuente ligeramente más audaz */
    }
}

/* Ajustes para pantallas muy pequeñas (smartphones) */
@media (max-width: 480px) {

    /* Logo aún más pequeño para pantallas muy estrechas */
    .logo {
        height: 50px;
        /* Altura fija en pantallas muy pequeñas */
    }

    /* Logo aún más pequeño para pantallas muy estrechas */
    .logo img {
        height: 50px;
        /* Forzamos la altura a 50px */
    }

    /* Ajustes para el menú desplegable en pantallas muy pequeñas */
    #menu-list {
        max-width: 200px;
        /* Ancho máximo ligeramente menor */
        top: 4.5rem;
        /* Ajusta la posición superior */
        right: 10px;
        /* Ajusta la posición derecha */
        padding: 1rem;
        /* Ajusta el padding */
    }
}


/* --- CORRECCIÓN PARA ENLACES DE ANCLAJE (ANCHORS) --- */

/* * Aplica un margen superior a la sección de destino (aquella cuyo ID coincide
 * con el hash de la URL, es decir, el destino del enlace). 
 * Esto evita que la barra de navegación fija oculte la parte superior del contenido.
 * Se usa 90px porque es la altura del logo (90px) que domina la altura de la nav.
 */
#hero_main,
#quien_soy_main,
#mision_vision_main,
#combinada_main {
    scroll-margin-top: 90px;
}