/* --- RESET Y ESTILOS GLOBALES --- */
:root {
    --color-principal: #00A98F;
    --color-texto: #333;
    --color-fondo: #f8f9fa;
    --color-acento-claro: #e6f6f4;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.7;
}

/* --- Header y Navegación --- */
.page-header {
    background-color: #fff;
    padding: 0.7rem 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-content {
    width: 100%;
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo { height: 50px; flex-shrink: 0; }
.main-nav {
    /* Clave para que el menú absoluto se posicione correctamente */
    position: relative; 
}
.nav-links { display: flex; list-style: none; align-items: center; gap: 2rem; }
.nav-links a { text-decoration: none; color: var(--color-texto); font-weight: 600; padding: 0.5rem 0; position: relative; transition: color 0.3s; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-principal); transition: width 0.3s ease; }
.nav-links a:hover,
.nav-links a.active {
    color: var(--color-principal);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}
.nav-toggle { display: none; background: none; border: none; font-size: 1.8rem; cursor: pointer; }

/* ========================================================= */
/* --- NAVEGACIÓN SECUNDARIA PARA CATEGORÍAS (VERSIÓN FINAL) --- */
/* ========================================================= */
.subsection-nav {
    text-align: center;
    /* Reducimos aún más el margen inferior para máxima compactación */
    margin-bottom: 0.9rem; 
}

.subsection-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap; /* Esta es la clave para el comportamiento responsive */
    list-style: none;
    padding: 0;
    margin: 0;
}

.subsection-nav a {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: #868e96;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.subsection-nav a:hover {
    color: var(--color-principal);
}

.subsection-nav a.active {
    color: var(--color-principal);
    font-weight: 700;
    border-bottom-color: var(--color-principal);
}

/* ========================================================= */
/* --- INICIO: Optimización para móviles del menú secundario --- */
/* ========================================================= */
@media (max-width: 600px) {
    .subsection-nav ul {
        /* Reducimos el espacio entre los ítems en pantallas pequeñas */
        gap: 1.5rem; 
    }
}

/* --- Contenido y Footer (sin cambios) --- */
main { padding: 2rem; }
.article-container {
    max-width: 800px;
    margin: 2rem auto;
    background-color: #fff;
    /* ¡AJUSTE PRECISO AQUÍ! */
    /* top | left & right | bottom */
    padding: 1.5rem 2.5rem 2.5rem; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1.5rem; color: var(--color-principal); }
h2 { font-size: 1.6rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; border-left: 4px solid var(--color-principal); padding-left: 1rem; }
p, li { font-size: 1rem; margin-bottom: 1rem; }
strong { font-weight: 600; }
ul { list-style-position: inside; padding-left: 1rem; }
blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; background-color: var(--color-fondo); border-left: 5px solid var(--color-principal); font-style: italic; color: #555; }

/* --- ESTILO GLOBAL PARA ENLACES DENTRO DEL CONTENIDO --- */
.article-container a {
    color: var(--color-principal);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.article-container a:hover {
    color: #fff;
    background-color: var(--color-principal);
    text-decoration: none;
}

.summary-box { background-color: var(--color-acento-claro); border: 1px solid var(--color-principal); border-radius: 8px; padding: 1.5rem; margin: 2rem 0; }
.summary-box h3 { font-size: 1.2rem; color: var(--color-principal); margin-bottom: 1rem; display: flex; align-items: center; }
.summary-box h3::before { content: '✅'; margin-right: 0.75rem; font-size: 1.5rem; }
.summary-box p { margin-bottom: 0.5rem; line-height: 1.6; }
.page-footer { text-align: center; padding: 3rem 2rem; background-color: #fff; border-top: 1px solid #eee; }
.footer-copyright { margin-bottom: 2rem; font-size: 0.9rem; color: #777; }
.footer-copyright p { margin: 0.25rem 0; }
.footer-powered-by p { margin-bottom: 0.75rem; font-size: 0.9rem; color: #777; }
.powered-by-logo { height: 45px; transition: opacity 0.3s; }
.powered-by-logo:hover { opacity: 0.8; }

/* --- ESTILOS PARA LA NAVEGACIÓN SECUENCIAL DE ARTÍCULOS --- */
.article-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* ¡ELIMINADO! Quitamos padding, margin y border para pegarlo a los bordes */
    margin-bottom: 1.5rem; /* Dejamos solo el margen necesario para separar del título */
}

.article-nav--bottom {
    margin-top: 2.5rem; /* Dejamos solo el margen necesario para separar del contenido */
    margin-bottom: -1rem; /* Margen negativo para pegarlo más al borde inferior */
}

.article-nav a {
    color: var(--color-principal);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 0; /* Solo padding vertical para área de clic, sin padding horizontal */
    border-radius: 6px;
    transition: color 0.2s ease;
    font-size: 0.9rem; /* ¡AJUSTE PRECISO AQUÍ! (10% más pequeño) */
}

.article-nav a:hover {
    color: #00796B; /* Un verde un poco más oscuro para el hover */
    /* ¡ELIMINADO! Quitamos el fondo en el hover para un look más limpio */
}

/* /css/style.css */

/* ========================================================= */
/* --- ESTILOS PARA EL NUEVO FOOTER CON SOCIOS           --- */
/* ========================================================= */

/* Contenedor principal que agrupa a los socios */
.footer-partners {
    display: flex; /* La base para el layout de columnas */
    justify-content: center; /* Centra los items horizontalmente */
    align-items: center; /* Alinea los items verticalmente */
    gap: 4rem; /* Espacio generoso entre los logos en desktop */
    margin-top: 2rem; /* Espacio para separar de la sección de copyright */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no caben */
}

/* Estilos para cada bloque de socio (texto + logo) */
.partner-item {
    text-align: center; /* Centra el texto y el logo dentro de su bloque */
}

/* Estilo para el texto "Un desarrollo de:" y "Coordinado por:" */
.partner-label {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #777;
    font-weight: 600;
}

/* Estilo unificado para los logos de los socios */
.partner-logo {
    height: 50px; /* Mantenemos la misma altura que tenías antes */
    transition: opacity 0.3s;
}

.partner-logo:hover {
    opacity: 0.8;
}

/* ========================================================= */
/* --- AJUSTE RESPONSIVE PARA EL FOOTER (MÓVILES)      --- */
/* ========================================================= */

/* Aplicamos estos estilos en pantallas de 600px o menos */
@media (max-width: 600px) {
    .footer-partners {
        /* Cambiamos la dirección de flexbox a columna para apilarlos */
        flex-direction: column;
        /* Reducimos el espacio entre ellos en la vista móvil */
        gap: 2rem;
    }
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    main { padding: 1rem; }
    .article-container { padding: 1.5rem; margin-top: 1rem; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }

    /* === REESCRITO DESDE CERO: Navegación Móvil Simple === */
    .nav-toggle {
        display: block;
    }

    .header-content {
        /* Hacemos que el contenedor del header sea el punto de referencia */
        position: relative;
    }

    .nav-links {
        /* Por defecto, los links en móvil están ocultos y apilados */
        display: none;
        flex-direction: column;
        gap: 0;

        /* Posicionamiento del menú desplegable */
        position: absolute;
        top: 100%; /* Justo debajo de su contenedor padre (.header-content) */
        right: -2rem; /* Alineado a la derecha del header */
        width: 100vw; /* Ocupa todo el ancho de la pantalla */
        
        /* Estilos visuales */
        background-color: white;
        box-shadow: 0 3px 5px rgba(0,0,0,0.1);
        padding-bottom: 1rem;
    }

    .nav-links.nav-active {
        display: flex; /* La clase que añade el JS para mostrar el menú */
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }
    
    .nav-links a {
        display: block;
        width: 100%;
        padding: 1rem 2rem;
        border-top: 1px solid #f0f0f0;
    }

    .nav-links a::after {
        display: none; /* Quitamos el efecto de subrayado en móvil */
    }
}