/* layout.css — responsivo, cabecera, navegación y pie. */

/* ════════════════════════════════════════════
   RESPONSIVO
════════════════════════════════════════════ */
@media (max-width:1024px) {
    .container { width: 88%; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .main-navigation ul.nav-menu { gap:16px; }
}
@media (max-width:768px) {
    /* En un teléfono el header se achica. Se cambia la variable y el header se
       mide solo: si acá se fijara height:80px a mano —como estaba antes del
       2026-09-16—, .site-main reservaría los 96px de escritorio y quedaría una
       franja vacía de 16px arriba de cada página. */
    :root { --header-h: 80px; }
    .container { width: 92%; }
    .site-header { padding: 8px 0; }
    .site-header .site-branding img { height:80px; }
    .site-header.is-scrolled { padding:6px 0; }
    .site-header.is-scrolled .site-branding img { height:60px; }
    /* Acá había `.main-navigation { display:none; }` — quitado el 2026-10-07
       (P-114, C-03). Era del menú del prototipo; el panel lateral de ui.css
       (≤980px) no redeclara display, así que por debajo de 768 px el botón
       oscurecía la pantalla y el menú no aparecía nunca. El panel ya se oculta
       solo (transform + visibility) mientras está cerrado. */
    .footer-grid { grid-template-columns:1fr; gap:36px; }
    .footer-sitemap { grid-template-columns:1fr 1fr; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .footer-legal { justify-content:center; }
    .footer-social { justify-content:center; }
    .logo-interes-group { flex-direction:column; align-items:flex-start; }
    .logo-cipdh-footer { height:auto; max-height:70px; }
    .logo-interes { height:auto; max-height:40px; }
    .page-hero {
    padding-bottom: 40px; height:380px; }
}

/* ════════════════════════════════════════════
   MOBILE NAV — menú hamburguesa + drawer
   El botón .mobile-menu-toggle vive en el header;
   está oculto en desktop y aparece ≤768px.
════════════════════════════════════════════ */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 1100;
}
.mobile-menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: var(--color-primary);
    transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
/* Header con gradiente (no scrolled): barras blancas */
.site-header:not(.is-scrolled) .mobile-menu-toggle span { background: #fff; }
/* Estado abierto → X */
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--color-primary); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--color-primary); }

/* Drawer */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100%;
    background: #fff;
    box-shadow: -8px 0 40px rgba(35,45,79,.18);
    z-index: 1090;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    padding: 88px 0 40px;
    display: flex;
    flex-direction: column;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-primary);
}
.mobile-menu__header img { height: 44px; }

.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    transition: background .2s, color .2s, padding-left .2s;
}
.mobile-menu a:hover,
.mobile-menu a:focus {
    background: var(--color-bg-alt);
    color: var(--color-accent);
    padding-left: 30px;
}
/* Submenú: indentado y fondo suave */
.mobile-menu .sub-menu a {
    padding-left: 40px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-text-muted);
    background: #fafafc;
}
.mobile-menu .sub-menu a:hover { color: var(--color-accent); padding-left: 46px; }

.mobile-menu__tools {
    margin-top: auto;
    display: flex;
    gap: 18px;
    padding: 24px;
    font-size: 1.3rem;
}
.mobile-menu__tools a { color: var(--color-primary); padding: 0; border: none; }
.mobile-menu__tools a:hover { color: var(--color-accent); background: none; padding: 0; }

/* Overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35,45,79,.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }

/* Bloquea scroll del body cuando el menú está abierto */
body.mobile-nav-open { overflow: hidden; }

@media (max-width: 768px) {
    .mobile-menu-toggle { display: flex; }
}
@media (min-width: 769px) {
    .mobile-menu, .mobile-menu-overlay { display: none; }
}

/* ════════════════════════════════════════════
   PAGE: HOME (home-new.html)
════════════════════════════════════════════ */

.scroll-icon {
    width: 35px;
    height: 35px;
    border: 2px solid var(--blanco);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
    font-size: 0.9rem;
}

        /* --- 4. HERO FULLSCREEN CON SWIPER SLIDER --- */
        .hero {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: var(--azul);
        }

        .swiper-hero {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .swiper-hero .swiper-wrapper {
            width: 100% !important;
        }

        .swiper-hero .swiper-slide {
            position: relative;
            width: 100% !important;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .swiper-hero .swiper-slide img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            top: 0;
            left: 0;
            animation: kenBurns 4s ease-in-out forwards;
        }

        .swiper-hero .swiper-slide-active img {
            animation: kenBurns 4s ease-in-out forwards;
        }

        @keyframes kenBurns {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.05);
            }
        }

        .swiper-hero .swiper-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(35, 45, 79, 0.5);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            color: var(--blanco);
            max-width: 900px;
            text-align: center;
            padding: 0 40px;
        }

        .hero-content h1 {
            margin-bottom: 20px;
            text-shadow: 0 4px 15px rgba(0,0,0,0.3);
            font-weight: 600 !important;
            letter-spacing: 10px !important;
        }

        .hero-bottom-cta {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
        }

        .hero-scroll-cta {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            animation: float 2s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(8px); }
        }

        .scroll-icon-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.9);
            gap: 0;
        }

        .scroll-icon-container i:nth-child(1) {
            font-size: 1.5rem;
            margin-bottom: 4px;
        }

        .scroll-icon-container i:nth-child(2) {
            font-size: 0.85rem;
            animation: chevron-down 1s ease-in-out infinite;
        }

        .scroll-icon-container i:nth-child(3) {
            font-size: 0.85rem;
            margin-top: -8px;
            animation: chevron-down 1s ease-in-out infinite;
            animation-delay: 0.2s;
            opacity: 0.6;
        }

        @keyframes chevron-down {
            0%, 100% { opacity: 1; transform: translateY(0); }
            50% { opacity: 0.3; transform: translateY(5px); }
        }

        .scroll-text {
            color: var(--blanco);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 700;
            opacity: 0.9;
        }

        /* Barra de progreso */
        .swiper-progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: var(--amarillo);
            width: 0%;
            transition: width 0.3s ease;
            z-index: 15;
        }

        /* Controles Swiper personalizados */
        .swiper-hero .swiper-button-next,
        .swiper-hero .swiper-button-prev {
            color: var(--blanco);
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .swiper-hero .swiper-button-next:hover,
        .swiper-hero .swiper-button-prev:hover {
            background: rgba(0, 0, 0, 0.6);
        }

        .swiper-hero .swiper-button-next::after,
        .swiper-hero .swiper-button-prev::after {
            font-size: 18px;
        }

        .swiper-hero .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }

        .swiper-hero .swiper-pagination-bullet.swiper-pagination-bullet-active {
            background: var(--amarillo);
        }

        /* --- 5. SECCIÓN DERECHOS HUMANOS --- */
        .ddhh-section {
            padding: 120px 0;
            background: var(--color-bg-alt);
            position: relative;
        }

        .ddhh-section::before {
            display: none;
        }

        .ddhh-section > .container {
            padding: 0;
        }

        .ddhh-section .heading-secundario {
            color: var(--color-primary);
        }

        .ddhh-section .texto-destacado {
            color: var(--color-primary);
        }

        .ddhh-section .delgada-divisor {
            background: rgba(35, 45, 79, 0.2);
        }

        .ddhh-section .link-arrow-section {
            color: var(--color-primary);
        }

        .ddhh-section .link-arrow-section:hover {
            color: var(--color-gold);
        }

        .ddhh-section .arrow-icon g {
            stroke: var(--color-primary);
        }

        .ddhh-section .link-arrow-section:hover .arrow-icon g {
            stroke: var(--color-gold);
        }
        .ddhh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
        .ddhh-texto .link-arrow {
            display: inline-flex; align-items: center; gap: 10px;
            margin-top: 30px; font-weight: 800; font-size: 12px; text-transform: uppercase;
            letter-spacing: 1px; color: var(--azul); border-bottom: 1px solid var(--azul); padding-bottom: 5px; transition: all 0.3s;
        }
        .ddhh-texto .link-arrow:hover { color: var(--color-gold); border-color: var(--color-gold); gap: 15px; }