/* css/global.css - Estilos globales para todo el sitio */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Oswald:wght@400;700&display=swap');

/* Reseteo básico y box-sizing */
html {
    box-sizing: border-box;
    background-color: #A9B4C2; /* Fondo para el html */
    height: 100%;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* Estilos generales del cuerpo */
body {
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Fondo por defecto para páginas internas */
    color: #333333;           
    min-height: 100vh; 
    display: flex;
    flex-direction: column; 
}

/* Estilos para Encabezados Globales */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif; 
    font-weight: 700; 
    margin-top: 0; 
}

/* Estilos para el encabezado de la página */
header {
    background-color: #0A2463; /* Azul Oscuro sólido */
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.encabezado-pagina-interna {
    text-align: center;
    margin-top: 0; /* Reducimos de 20px a 0, ya que .contenido-pagina ahora tiene padding-top */
    margin-bottom: 40px; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #EAEAEA; 
}

.encabezado-pagina-interna h1 {
    /* font-family: 'Oswald', sans-serif; Ya es global para h1 */
    /* font-weight: 700; Ya es global para h1 */
    font-size: 2.6em; /* Tamaño consistente para títulos de página interna */
    color: #0A2463;   /* Azul Oscuro */
    margin-bottom: 10px; /* Espacio entre el H1 y el párrafo */
}

.encabezado-pagina-interna p {
    /* font-family: 'Lato', sans-serif; Ya es global para p */
    font-size: 1.15em; /* Tamaño consistente para la descripción */
    color: #555555;    /* Un gris más suave para el texto descriptivo */
    line-height: 1.6;
    max-width: 750px;  /* Limita el ancho de la descripción para mejor lectura */
    margin-left: auto; /* Centra el párrafo si es más estrecho que max-width */
    margin-right: auto;
    margin-top: 0; /* Asegura que no haya margen superior extra */
}
/* Estilos para la barra de navegación */
.barra-navegacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; 
    position: relative; 
    /* No max-width ni margin:0 auto aquí para que sea full-width de la ventana */
}

.barra-navegacion .logo a {
    text-decoration: none;
}
.barra-navegacion .logo a img#logoCabecera {
    max-height: 45px;
    width: auto;      
    display: block;  
}

/* --- ESTILOS DEL MENÚ HAMBURGUESA (BOTÓN) --- */
.menu-hamburguesa {
    display: none; 
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; 
}
.menu-hamburguesa .barra {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #FFFFFF;
    margin: 6px 0;
    transition: all 0.3s ease-in-out;
}

/* --- ESTILOS DEL MENÚ PRINCIPAL (UL) PARA ESCRITORIO --- */
.barra-navegacion ul#menuPrincipal {
    list-style-type: none;
    margin: 0; 
    padding: 0;
    display: flex; 
    align-items: center; 
    margin-left: auto; 
}
.barra-navegacion ul#menuPrincipal li {
    margin-left: 20px; 
}
.barra-navegacion ul#menuPrincipal li:first-child {
    margin-left: 0; 
}
.barra-navegacion ul#menuPrincipal li a {
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 15px;
    display: block; 
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative; 
}
.barra-navegacion ul#menuPrincipal li a:hover {
    background-color: #FFC107;
    color: #0A2463;
}
.barra-navegacion ul#menuPrincipal li.pagina-activa a {
    color: #FFC107; 
    font-weight: 700; 
}
.barra-navegacion ul#menuPrincipal li.pagina-activa a:hover {
    color: #FFC107; 
    background-color: transparent; 
}

/* --- ESTILOS PARA SUBMENÚ DESPLEGABLE (ESCRITORIO) --- */
.barra-navegacion ul#menuPrincipal li.tiene-submenu {
    position: relative; 
}
.barra-navegacion ul#menuPrincipal li.tiene-submenu > a .flecha-submenu { 
    font-size: 0.7em; 
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease; 
}
.barra-navegacion ul#menuPrincipal .submenu { /* Estilo base del submenú para escritorio */
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;   
    background-color: #071c4a; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-top: none; 
    list-style: none;
    padding: 8px 0; 
    margin: 0;
    min-width: 230px; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1100; 
    border-radius: 0 0 8px 8px; 
}
.barra-navegacion ul#menuPrincipal li.tiene-submenu:hover > .submenu {
    display: block;
}
.barra-navegacion ul#menuPrincipal li.tiene-submenu:hover > a .flecha-submenu {
     transform: rotate(180deg);
}
.barra-navegacion ul#menuPrincipal .submenu li {
    margin-left: 0; 
    width: 100%; 
}
.barra-navegacion ul#menuPrincipal .submenu li a {
    padding: 10px 20px; 
    font-size: 0.95em;  
    font-weight: 400;  
    color: #E0E0E0;    
    white-space: nowrap; 
    display: block; 
    border-radius: 0; 
    border-bottom: none; 
    transition: background-color 0.2s ease, color 0.2s ease; 
}
.barra-navegacion ul#menuPrincipal .submenu li a:hover {
    background-color: #FFC107; 
    color: #0A2463;       
}

/* Contenedor principal */
main {
    padding-top: 0px; 
    flex-grow: 1;     
}

/* Estilos para los botones genéricos */
.btn {
    display: inline-block;
    padding: 12px 28px;
    margin: 10px 5px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif; 
    font-weight: 400; 
    font-size: 1em; 
    letter-spacing: 0.5px; 
    text-transform: uppercase; 
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-primary { background-color: #FFC107; color: #0A2463; }
.btn-primary:hover { background-color: #e6ac00; color: #0A2463; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.btn-secondary { background-color: transparent; color: #FFFFFF; border: 2px solid #FFC107; }
.btn-secondary:hover { background-color: #FFC107; color: #0A2463; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

/* Estilos para tarjetas de contenido genéricas y secciones de página */
.contenido-pagina {
    padding: 20px 20px 40px 20px; /* Reducimos padding-top de 40px a 20px */
    margin: 20px auto 40px auto;  /* Reducimos margin-top de 40px a 20px */
    max-width: 2000px; 
}
.tarjeta-contenido { 
    background-color: rgba(0, 0, 0, 0.65); 
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.tarjeta-contenido h1, 
.tarjeta-contenido h2 { 
    font-family: 'Oswald', sans-serif; 
    color: #FFC107; 
}
.tarjeta-contenido p, 
.tarjeta-contenido ul li { 
    color: #FFFFFF; 
    font-family: 'Lato', sans-serif; 
    font-size: 1.1em;
    line-height: 1.6;
}
.tarjeta-contenido ul li { margin-bottom: 8px; }
.tarjeta-contenido ul li strong { font-weight: 700; }

/* Estilos básicos para el pie de página */
footer {
    text-align: center;
    padding: 30px 20px;
    background-color: #0A2463; 
    color: #A9B4C2; 
    margin-top: 0; 
    position: relative; 
    z-index: 10; 
}
footer p { margin: 8px 0; font-family: 'Lato', sans-serif; }
footer a { color: #FFC107; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 700; }
footer a:hover { color: #FFFFFF; text-decoration: underline; }

/* ======== MEDIA QUERIES GLOBALES ======== */
@media (max-width: 768px) { /* Tablets y móviles grandes */
    .barra-navegacion { padding: 0 15px; }
    .barra-navegacion .logo a img#logoCabecera { max-height: 40px; }
    .menu-hamburguesa { display: block; }
    .barra-navegacion ul#menuPrincipal {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0; 
        width: 100%;
        background-color: rgba(10, 36, 99, 0.98); 
        padding: 10px 0;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .barra-navegacion ul#menuPrincipal.menu-abierto { display: flex; }
    
    /* Flecha y Submenú en Móvil */
    .barra-navegacion ul#menuPrincipal li.tiene-submenu > a .flecha-submenu {
        display: inline-block; 
        transition: transform 0.3s ease; 
    }
    .barra-navegacion ul#menuPrincipal li.tiene-submenu.submenu-activo-movil > a .flecha-submenu {
        transform: rotate(180deg); 
    }
    .barra-navegacion ul#menuPrincipal li.tiene-submenu .submenu {
        position: static; 
        display: block;   
        width: auto;      
        background-color: rgba(0,0,0,0.15); 
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding-left: 25px; 
        margin-top: 0; /* Inicialmente sin margen superior */
        padding-top: 0; /* Inicialmente sin padding superior */
        padding-bottom: 0; /* Inicialmente sin padding inferior */
        max-height: 0; 
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, visibility 0s linear 0.4s, 
                    margin-top 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
    }
    .barra-navegacion ul#menuPrincipal li.tiene-submenu.submenu-activo-movil > .submenu {
        max-height: 500px; 
        margin-top: 5px;
        /* padding-top: 5px; Opcional si necesitas padding en el UL del submenú */
        /* padding-bottom: 5px; Opcional */
        visibility: visible;
        opacity: 1;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, visibility 0s linear 0s, 
                    margin-top 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
    }
    .barra-navegacion ul#menuPrincipal li.tiene-submenu .submenu li a {
        padding: 10px 15px;
        font-size: 0.9em; 
        text-align: left; 
        color: #DADADA; 
    }
    .barra-navegacion ul#menuPrincipal li.tiene-submenu .submenu li a:hover {
        color: #0A2463; 
    }

    .barra-navegacion ul#menuPrincipal.menu-abierto li.pagina-activa a { color: #FFC107; font-weight: 700; }
    .barra-navegacion ul#menuPrincipal li { margin-left: 0; width: 100%; text-align: center; }
    .barra-navegacion ul#menuPrincipal li a { padding: 15px; width: 100%; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .barra-navegacion ul#menuPrincipal li:last-child a { border-bottom: none; }
    .menu-hamburguesa.activo .barra:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-hamburguesa.activo .barra:nth-child(2) { opacity: 0; }
    .menu-hamburguesa.activo .barra:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .tarjeta-contenido h1, .tarjeta-contenido h2 { font-size: 1.8em; }
    .tarjeta-contenido p { font-size: 1em; }
    .btn { font-size: 0.95em; padding: 10px 24px; }
}

@media (max-width: 480px) { /* Móviles pequeños */
    header { padding: 8px 0; }
    .barra-navegacion .logo a img#logoCabecera { max-height: 35px; }
    .barra-navegacion ul#menuPrincipal li a { padding: 14px; }
    
    .barra-navegacion ul#menuPrincipal li.tiene-submenu .submenu { padding-left: 20px; }
    .barra-navegacion ul#menuPrincipal .submenu li a { font-size: 0.85em; padding: 8px 15px; }

    .btn { padding: 12px 20px; display: block; width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; }
    .btn:not(:last-child) { margin-bottom: 12px; }
    .contenido-pagina { padding: 25px 15px; margin: 25px auto; }
    .tarjeta-contenido { padding: 20px; }
    .tarjeta-contenido h1, .tarjeta-contenido h2 { font-size: 1.6em; }
    .tarjeta-contenido p { font-size: 0.9em; }
    footer { padding: 20px 15px; }
    footer p { font-size: 0.85em; }
}