{% load static %}
/* Enlace "saltar al contenido": invisible hasta recibir foco con Tab. */
.skip-link {
    position: absolute;
    left: -9999px;
    transition: none;   /* sin animar 'left': debe aparecer al instante */
    top: 0;
    z-index: 3000;
    padding: 10px 18px;
    background: #0e668d;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    }

.skip-link:focus {
    left: 0;
    }

/* ================= VARIABLES ================= */
:root {
    --gef-blue-dark: #0D4E75;      /* Azul oscuro GEF */
    --gef-green-light: #98D066;    /* Verde claro bordes/detalles */
    --gef-text-white: #FFFFFF;
    --gef-text-body: #C5D8E3;
    --font-main: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-main);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* ================= LOADER (Corregido) ================= */
.site-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1A4381 0%, #143c77 50%, #153769 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.site-loader.loaded {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
  position: relative;
}

.loader-logo {
  width: 260px;
  height: auto;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 2;
}

.loader-text {
  margin-top: 30px;
  color: white;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  animation: pulse 2s ease-in-out infinite;
}

/* Animaciones */
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

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

@keyframes pulse {
  0%, 100% {
      opacity: 1;
  }
  50% {
      opacity: 0.5;
  }
}

@keyframes pulse2 {
0%, 100% {
    transform: scale(1);
}
50% {
    transform: scale(1.05);
}
}

/* Responsive */
@media (max-width: 768px) {
  .loader-logo {
      width: 180px;
  }
  
  .loader-text {
      font-size: 1rem;
      margin-top: 25px;
  }
}

@media (max-width: 576px) {
    .loader-logo {
        width: 180px;
    }
    
    .loader-text {
        font-size: 0.9rem;
        margin-top: 20px;
    }
    .hero-image-side {
        height: 150px; /* Aún más corto en celulares pequeños */
    }
    .brand-logo img {
        width: 110px;  /* Logo proporcional */
    }
    .hero-title {
        font-size: 1.8rem;
    }

}


/* ================= HERO (SPLIT DESIGN) ================= */
.gef-hero-wrapper {
    display: flex;
    /* min-height: 100vh; */
    position: relative;
    flex-wrap: wrap; /* Para responsive */
}

/* Izquierda: Imagen Playa */
.hero-image-side {
width: 30%;
    background-image: url("../img/left_banner.23af95d830fd.jpg");
    background-size: cover;
    background-position: center;
    min-height: 300px;
    
    /* NUEVAS PROPIEDADES PARA ALINEAR EL LOGO */
    display: flex;
    justify-content: center; /* Centra el logo horizontalmente */
    align-items: flex-start; /* Alínea el logo arriba */
    padding-top: 40px;       /* Mismo padding superior que el lado derecho para igualar altura */
}

/* Derecha: Contenido Azul */
.hero-content-side {
    width: 70%;
    background: linear-gradient(135deg, var(--gef-blue-dark) 30%, #15668a 100%);
    padding: 40px 60px; /* Este 40px dicta la altura inicial, por eso pusimos 40px a la izq */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Navbar dentro del Hero */
.gef-navbar { margin-bottom: 60px; z-index: 10; width: 100%;}
.brand-logo img { width: 300px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.nav-links { gap: 30px; }
.nav-links a {
    color: var(--gef-text-white);
    font-size: 0.85rem; font-weight: 700;
    /* Objetivo táctil de al menos 24px (WCAG 2.5.8) sin alterar el layout:
       el padding agranda el área de clic y el margin negativo lo compensa. */
    display: inline-block;
    padding: 10px 8px;
    margin: -10px -8px;
}

/* Textos Hero */
.hero-text-container {
    max-width: 800px; z-index: 5; margin-top: 20px;
}
.hero-title {
    font-size: 3.5rem; font-weight: 800; color: white;
    line-height: 1.1; margin-bottom: 30px;
}
.hero-description {
    color: var(--gef-text-body); font-size: 1rem; line-height: 1.6;
    max-width: 90%; text-align: justify;
}

/* Decoración Red de fondo */
.geometric-overlay {
    position: absolute; bottom: -50px; right: -50px;
    width: 400px; height: 400px;
    background-image: radial-gradient(circle, rgba(152, 208, 102, 0.2) 2px, transparent 2px);
    background-size: 20px 20px; /* Simula puntos */
    opacity: 0.5; pointer-events: none;
}

/* ================= CARDS SECTION ================= */
.gef-cards-section {
    padding: 80px 0; background-color: #fff;
}
.section-title {
    color: #4A6F85; font-weight: 800; margin-bottom: 50px;
}
.gef-card-item {
    display: flex; flex-direction: column; align-items: center;
}
.gef-card-item:hover .gef-card-circle { transform: translateY(-5px); border-color: var(--gef-blue-dark); }

.gef-card-circle {
    width: 130px; height: 130px;
    border-radius: 50%;
    background-color: #DAE4F0;
    border: 6px solid #aace7777; /* Borde verde característico */
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.gef-card-circle img { width: 65%; height: auto; opacity: 0.8; }
.gef-card-label {
    color: #3F7C99; font-weight: 700; font-size: 0.9rem;
}

/* ---- Portada: bloque de estatales vs integral ----
   Móvil: apilados (5 círculos en una fila + integral debajo, separados por
   una línea horizontal). Escritorio: dos columnas con separador vertical. */
.cards-split {
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.cards-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cards-group-title {
    color: #4A6F85;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    margin-bottom: 30px;
}
.cards-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 30px;
    margin-bottom: 25px;
}
/* Racimo de 5 círculos en 3 + 2 (cada uno mide 142px con borde incluido) */
.cards-group--estatales .cards-circles { max-width: 510px; }
.cards-group-text {
    color: #3F7C99;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto;
}
.cards-divider {
    align-self: stretch;
    background-color: #DAE4F0;
    height: 2px;            /* móvil: línea horizontal */
    border-radius: 2px;
}
/* Texto PAE: va entre el título de la sección y los dos bloques de
   tarjetas, centrado y separado de estos. */
.cards-pae-text { margin: 0 auto 75px; }

@media (min-width: 992px) {
    .cards-split {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    .cards-group { padding: 0 40px; }
    .cards-group--estatales { flex: 1.5; }
    .cards-group--integral { flex: 1; }
    /* Los 5 círculos estatales en los vértices de un pentágono (vértice
       arriba, en el sentido de las agujas del reloj). Posiciones calculadas
       para un radio de 165px con círculos de 142px (borde incluido); el
       radio deja sitio a la etiqueta de cada círculo sin encimarse. */
    .cards-group--estatales .cards-circles {
        position: relative;
        display: block;
        width: 470px;
        height: 485px;
        max-width: none;
        margin: 0 auto 25px;
    }
    .cards-group--estatales .gef-card-item {
        position: absolute;
        width: 142px;
    }
    .cards-group--estatales .gef-card-item:nth-child(1) { left: 164px; top: 5px; }
    .cards-group--estatales .gef-card-item:nth-child(2) { left: 321px; top: 119px; }
    .cards-group--estatales .gef-card-item:nth-child(3) { left: 261px; top: 304px; }
    .cards-group--estatales .gef-card-item:nth-child(4) { left: 67px;  top: 304px; }
    .cards-group--estatales .gef-card-item:nth-child(5) { left: 7px;   top: 119px; }
    .cards-divider {
        width: 2px;         /* escritorio: línea vertical */
        height: auto;
    }
    /* Círculo integral más grande, como en el esquema */
    .cards-group--integral .gef-card-circle { width: 170px; height: 170px; }
    /* Círculo y texto centrados en el alto de la columna; el título se
       queda arriba, alineado con el de estatales (márgenes auto de flex). */
    .cards-group--integral .cards-circles { margin-top: auto; }
    .cards-group--integral .cards-group-text { margin-bottom: auto; }
}

@media (max-width: 575px) {
    /* Círculos estatales de dos en dos; el quinto queda centrado
       (el max-width impide que en pantallas anchas quepan tres) */
    .cards-group--estatales .cards-circles {
        gap: 20px 24px;
        max-width: 280px;
    }
    .cards-group--estatales .gef-card-circle {
        width: 105px;
        height: 105px;
    }
    .cards-group--estatales .gef-card-label {
        font-size: 0.75rem;
    }
    .cards-group--integral .gef-card-circle {
        width: 110px;
        height: 110px;
    }
}

/* ================= GEOPORTAL SECTION ================= */
.gef-geoportal-section {
    background-color: #1A3E52; /* Azul oscuro mate */
    padding: 30px 0;
    border-top: 4px solid #3FBCC9; /* Linea superior cyan */
    color: white; overflow: hidden;
}
.geoportal-map-img { height: 300px; }
.geoportal-title { font-weight: 800; font-size: 2.2rem; line-height: 1.1; }
.dotted-separator {
    height: 3px; background-color: var(--gef-green-light);
    width: 50px; margin: 20px 0 20px auto;
}

/* ================= FOOTER ================= */
.gef-footer {
    background-color: var(--gef-blue-dark);
    padding: 60px 0; color: white; position: relative; overflow: hidden;
}
.footer-brand { font-weight: 800; margin-bottom: 20px; }
.footer-list li { margin-bottom: 8px; }
.footer-list a { color: #B0C4D1; font-size: 0.9rem; }
.footer-list a:hover { color: white; }
.footer-heading { font-size: 0.9rem; font-weight: 700; margin-bottom: 15px; }
.social-icons { display: flex; gap: 15px; }
.footer-corner-logo {
    position: absolute; bottom: -30px; right: -30px; opacity: 0.1; width: 200px;
}

/* ================= MOBILE MENU TOGGLE ================= */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Separa las líneas uniformemente */
    /* Objetivo táctil >= 24px (WCAG 2.5.8): el padding agranda el área de
       clic a 44x43px y el margin negativo mantiene el layout; las líneas
       siguen midiendo 30x21. */
    box-sizing: content-box;
    width: 30px;
    height: 21px;
    padding: 11px 7px;
    margin: -11px -7px;
    background: transparent; /* IMPORTANTE: Quita el fondo gris */
    border: none;     /* IMPORTANTE: Quita el borde de botón */
    cursor: pointer;
    position: relative; /* Necesario para que z-index funcione */
    z-index: 10000;     /* Debe ser mayor que el menú (.nav-links tiene 999) */
    outline: none;    /* Quita el recuadro azul de selección en algunos navegadores */
}

/* Estilo de las 3 líneas */
.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;      /* Grosor de la línea */
    background-color: white; /* Color de las líneas */
    border-radius: 3px;
    transition: all 0.3s ease; /* Suaviza la animación si agregas JS después */
}

/* Opcional: Efecto hover para UX */
.mobile-menu-toggle:hover span {
    background-color: var(--gef-green-light);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
    
    .gef-hero-wrapper { 
        flex-direction: column; 
    }

    /* BANNER SUPERIOR (Imagen recortada) */
    .hero-image-side { 
        width: 100%;
        height: 180px;          /* Altura fija del banner (ajusta si lo quieres más delgado) */
        min-height: 0;          /* ¡CRÍTICO! Elimina el min-height de 300px del escritorio */
        padding-top: 0;         /* Sin padding extra */
        
        /* Alineación del logo */
        display: flex;
        align-items: center;    /* Centra el logo verticalmente */
        justify-content: center;/* Centra el logo horizontalmente */
        
        /* Comportamiento de la imagen de fondo */
        background-size: cover;    /* Cubre todo el ancho */
        background-position: 0% 0%; /* Se recorta arriba y abajo automáticamente */
    }
    
    /* Logo ajustado para el banner */
    .brand-logo img {
        width: 320px;           /* Tamaño ideal para banner de 160px */
        filter: drop-shadow(0 4px 4px rgba(0,0,0,0.6)); /* Sombra fuerte para legibilidad */
    }

    /* Contenido (Texto) */
    .hero-content-side { 
        width: 100%; 
        padding: 40px 25px;     /* Menos padding lateral en móvil */
        min-height: auto;       /* Dejar que crezca según el texto */
    }
    
    .hero-title { 
        font-size: 2rem; 
        text-align: center;
    }
    
    .hero-description {
        text-align: center;
    }

    /* Ajustes generales móvil */
    .gef-navbar {
        margin-bottom: 20px;
        justify-content: flex-end !important; /* Mantiene botón hamburguesa a la derecha */
    }

    .geoportal-text-col { 
        text-align: center !important; 
        margin-top: 25px; 
    }
    
    .dotted-separator { 
        margin: 20px auto; 
    }

    /* Estilos del menú cuando está oculto en móvil */
    .nav-links {
        /* Se convierte en un menú superpuesto de pantalla completa */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #103348; /* Fondo oscuro sólido para el menú */
        z-index: 999;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* Ocultar inicialmente, mover fuera del viewport */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out; 
    }

    /* Estado ACTIVO: el menú entra en la pantalla */
    .nav-links.nav-active {
        transform: translateX(0);
        display: flex; /* Asegura que los elementos se muestren */
    }
    
    /* Estilos de los enlaces del menú activo */
    .nav-links li {
        margin: 20px 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gef-text-white);
        opacity: 0; /* Ocultar enlaces inicialmente para animarlos después */
        transition: opacity 0.5s ease 0.3s; /* Retrasar la aparición de los enlaces */
    }
    
    .nav-links.nav-active a {
        opacity: 1; /* Mostrar enlaces cuando el menú está activo */
    }
    
    /* Animación del botón hamburguesa para transformarse en X */
    .mobile-menu-toggle span:nth-child(1) {
        transform-origin: 0% 100%;
    }
    .mobile-menu-toggle span:nth-child(3) {
        transform-origin: 0% 0%;
    }

    .mobile-menu-toggle.toggle-active span:nth-child(1) {
        transform: rotate(40deg) translate(0px, -1px);
    }
    .mobile-menu-toggle.toggle-active span:nth-child(2) {
        opacity: 0; /* Oculta la línea central */
    }
    .mobile-menu-toggle.toggle-active span:nth-child(3) {
        transform: rotate(-40deg) translate(0px, 1px);
    }

}

/* ============================================================
   CARRUSELES PAE - Agregar a style2.css
   ============================================================ */

/* Sección contenedor */
.pae-carousel-section {
    padding: 3rem 0 2rem;
    background: #f4f8fb;
}
/* Fondos alternados: tarjetas (blanco) → infografías (azulado) →
   webinarios (blanco) → galería (azulado) → geoportal (oscuro). */
.pae-carousel-section--white {
    background: #fff;
}
.pae-carousel-section--gallery {
    background: #f4f8fb;
    padding-bottom: 3rem;
}

.pae-carousel-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #3F7C99;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
}

/* Wrapper con botones a los lados */
.pae-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Contenedor con overflow oculto */
.pae-carousel-track-container {
    overflow: hidden;
    flex: 1;
}

/* Track deslizable */
.pae-carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* ---- Botones de navegación ---- */
.pae-carousel-btn {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid #3F7C99;
    background: transparent;
    color: #3F7C99;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.pae-carousel-btn:hover {
    background: #3F7C99;
    color: #fff;
}
.pae-carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   CARRUSEL 1: VIDEO CARDS
   Desktop: 4 visibles | Tablet: 2 | Mobile: 1.2
   ============================================================ */
.pae-video-card {
    flex: 0 0 calc((100% - 3rem) / 3);  /* 3 visibles con 3 gaps de 1rem */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background: #fff;
    height: 360px;          /* Altura fija para todas las cards */
    display: flex;
    flex-direction: column;
}

.pae-video-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.pae-video-card__link:hover .pae-video-card__thumb img {
    transform: scale(1.04);
}
.pae-video-card__link:hover .pae-video-card__play {
    background: rgba(63, 124, 153, 0.85);
}

.pae-video-card__thumb {
    position: relative;
    flex: 0 0 72%;       /* La miniatura ocupa el 72% de la altura */
    overflow: hidden;
    background: #000;
}
.pae-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pae-video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: rgba(0,0,0,0.35);
    transition: background 0.2s;
}

.pae-video-card__body {
    flex: 1;
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
}
.pae-video-card__title {
    margin: 0;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #2c5f74;
    line-height: 1.3;
    /* Limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   CARRUSEL 2: GALERÍA
   Desktop: 5 visibles | Tablet: 3 | Mobile: 1.5
   ============================================================ */
.pae-gallery-item {
    flex: 0 0 calc((100% - 4rem) / 5);  /* 5 visibles con 4 gaps */
    height: 200px;           /* Altura fija */
    border-radius: 6px;
    overflow: hidden;
    background: #ddd;
}
.pae-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.pae-gallery-item:hover img {
    transform: scale(1.05);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 991px) {
    .pae-video-card {
        flex: 0 0 calc((100% - 1rem) / 2);  /* 2 visibles */
    }
    .pae-gallery-item {
        flex: 0 0 calc((100% - 2rem) / 3);  /* 3 visibles */
    }
}

@media (max-width: 575px) {
    .pae-video-card {
        flex: 0 0 82%;  /* 1.2 visibles - da pista de que hay más */
        height: 220px;
    }
    .pae-gallery-item {
        flex: 0 0 65%;  /* ~1.5 visibles */
        height: 160px;
    }
}

/* ---- Lightbox ---- */
.pae-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.pae-lightbox.active {
    display: flex;
}
.pae-lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}
.pae-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}
.pae-lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    padding: 0 1rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.pae-lightbox__btn:hover { opacity: 1; }
.pae-lightbox__btn--prev { left: 0; }
.pae-lightbox__btn--next { right: 0; }

#carousel-gallery .pae-gallery-item img { cursor: zoom-in; }

/* ============================================================
   CARRUSEL: INFOGRAFÍAS Y STORYTELLING
   Las portadas ocupan todo el ancho de la tarjeta y se recortan
   por arriba y abajo, centradas: heredan el object-fit: cover de
   las miniaturas de video y solo cambian el fondo que se ve
   mientras cargan (claro en vez de negro).
   ============================================================ */
.pae-info-card__thumb {
    background: linear-gradient(135deg, #DAE4F0 0%, #f4f8fb 100%);
}
/* En escritorio este carrusel muestra 4 tarjetas por línea (el de
   webinarios sigue en 3), así que son más angostas. Va dentro del
   media query para no pisar los anchos de tablet y móvil. */
@media (min-width: 992px) {
    .pae-info-card {
        flex: 0 0 calc((100% - 3rem) / 4);  /* 4 visibles con 3 gaps de 1rem */
    }
}