/* =========================================
   VARIABLES Y RESET
========================================= */
:root {
    --verde-oscuro: #005B31;
    --verde-claro: #008f4c;
    --gris-fondo: #f5f5f5;
    --gris-borde: #cccccc;
    --texto-oscuro: #222222;
    --blanco: #ffffff;
    --negro-footer: #000000;
    --gris-oscuro: #444444;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }

/* FIX STICKY FOOTER */
body { 
    background-color: var(--blanco); 
    color: var(--texto-oscuro); 
    line-height: 1.4; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

.img-fluida { width: 100%; height: auto; display: block; }
.mt-1 { margin-top: 15px; }
.mt-2 { margin-top: 30px; }

/* =========================================
   CABECERA PRINCIPAL
========================================= */
.barra-superior {
    background-color: var(--verde-oscuro); color: var(--blanco);
    text-align: center; padding: 6px; font-size: 0.75rem; font-weight: 600;
}
.header-principal { position: relative; background-color: var(--blanco); z-index: 100; }

.header-contenido {
    display: flex; justify-content: flex-end; align-items: center; /* flex-end empuja el menú hamburguesa a la derecha */
    padding: 10px 20px; max-width: 1300px; margin: 0 auto; position: relative;
    min-height: 70px; /* Mantiene la altura para que el botón hamburguesa quede centrado */
}

/* EFECTO FLOTANTE PARA MÓVIL Y PC */
.caja-logo-flotante { 
    position: absolute; 
    top: 0; 
    left: 15px; 
    background-color: var(--blanco);
    padding: 5px 15px 15px 15px; /* Tamaños reducidos para celular */
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px; 
    z-index: 105;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* Una leve sombra ayuda a que no se pierda en la foto */
}
.caja-logo-flotante img { width: 85px; display: block; }

.menu-derecha-pc { display: none; }
.franja-verde-header {
    height: 10px; background-color: var(--verde-oscuro); width: 100%; position: relative; z-index: 90;
}

/* =========================================
   MENÚ MÓVIL Y BOTONES
========================================= */
.controles-mobile { display: flex; align-items: center; gap: 10px; }
.texto-menu-mobile { font-weight: 800; font-size: 0.9rem; }
.btn-hamburguesa {
    background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.btn-hamburguesa span { display: block; width: 35px; height: 5px; background-color: var(--verde-oscuro); }

.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: var(--verde-oscuro); z-index: 9999;
    display: none; flex-direction: column; align-items: center; padding-top: 60px;
    overflow-y: auto; /* Permite scroll si el menú es muy largo */
}
.menu-overlay.activo { display: flex; }
.btn-cerrar {
    position: absolute; top: 20px; right: 30px; background: none; border: none;
    color: var(--blanco); font-size: 3rem; cursor: pointer; line-height: 1; z-index: 10000;
}
.menu-overlay nav { display: flex; flex-direction: column; gap: 25px; text-align: center; margin-top: 80px; margin-bottom: 40px; width: 100%; }
.menu-overlay nav > a { color: var(--blanco); text-decoration: none; font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; }

.redes-sociales-mobile { display: flex; gap: 15px; margin-bottom: 40px; }
.redes-sociales-mobile .icono-red { width: 40px; height: 40px; font-size: 1.2rem; }
.icono-red {
    display: inline-flex; justify-content: center; align-items: center;
    width: 30px; height: 30px; border-radius: 50%; color: white; font-weight: bold; font-size: 0.8rem; cursor: pointer;
}
.icono-red.fb { background-color: #3b5998; }
.icono-red.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.icono-red.yt { background-color: #c4302b; }

/* =========================================
   BANNER SLIDER Y OLAS ANIMADAS
========================================= */
.slider-contenedor {
    position: relative; width: 100%; height: 35vh; min-height: 220px; max-height: 400px;
    overflow: hidden; background-color: var(--gris-fondo); z-index: 1;
}
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0;
    transform: scale(1.05); transition: opacity 1.5s ease-in-out, transform 3s ease-out;
}
.slide.activo { opacity: 1; transform: scale(1); }

/* === BANNER INTERIOR PEQUEÑO === */
.banner-interior {
    position: relative;
    width: 100%;
    height: 20vh;
    min-height: 120px;
    overflow: hidden;
    background-color: var(--gris-fondo);
    z-index: 1;
}
.img-banner-interior {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- Estilos Comunes Olas --- */
.olas-contenedor { position: absolute; bottom: -5px; left: 0; width: 100%; z-index: 10; }
.slider-contenedor .olas-contenedor { height: 80px; }
.banner-interior .olas-contenedor { height: 40px; } 

.olas-svg { width: 100%; height: 100%; }
.parallax-olas > use { animation: mover-olas 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.parallax-olas > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax-olas > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax-olas > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax-olas > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes mover-olas { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } }

/* =========================================
   GRILLA PRINCIPAL Y CONTENIDO
========================================= */
.contenedor-principal { 
    max-width: 1200px; 
    margin: 20px auto 40px auto; 
    padding: 0 20px; 
    flex: 1; 
    width: 100%; 
}

.grilla-contenidos { display: flex; flex-direction: column; gap: 40px; }
.columna-lateral { display: flex; flex-direction: column; gap: 30px; }
.order-movil-2 { order: 1; } .order-movil-3 { order: 2; } .order-movil-4 { order: 3; }

.titulo-seccion {
    color: var(--verde-oscuro); font-size: 1.3rem; font-weight: 800; position: relative; padding-bottom: 10px; margin-bottom: 20px;
}
.titulo-seccion::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: var(--gris-borde); }
.titulo-seccion::before {
    content: ""; position: absolute; bottom: -4px; left: 15px; width: 8px; height: 8px; background-color: var(--gris-borde); transform: rotate(45deg); z-index: 1;
}

.contenido-destacado { display: flex; flex-direction: column; gap: 15px; font-size: 0.9rem; }
.item-novedad { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; }
.item-novedad img { width: 150px; object-fit: cover; }
.info-novedad p { font-size: 0.85rem; margin-top: 5px; }

/* === PAGINADOR === */
.paginacion {
    display: flex; gap: 8px; justify-content: center; margin-top: 20px;
}
.btn-pagina {
    background-color: var(--blanco); border: 1px solid var(--gris-borde); color: var(--texto-oscuro);
    width: 35px; height: 35px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.3s;
}
.btn-pagina:hover { background-color: #e0e0e0; }
.btn-pagina.activa {
    background-color: var(--verde-oscuro); color: var(--blanco); border-color: var(--verde-oscuro);
}

.grilla-autoridades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center; }
.autoridad img { width: 100%; margin-bottom: 10px; }
.autoridad p { font-size: 0.85rem; }

.caja-borde-verde { border: 2px solid var(--verde-oscuro); border-radius: 6px; padding: 15px; background-color: var(--blanco); }
.acta-interior { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.icono-pdf { background-color: var(--verde-oscuro); color: white; padding: 25px 15px; font-weight: bold; border-radius: 4px; }
.datos-acta { text-align: center; display: flex; flex-direction: column; }
.numero-grande { color: var(--verde-oscuro); font-size: 3rem; line-height: 1; }
.acta-botones { display: flex; flex-direction: column; gap: 5px; }

.btn-verde, .btn-blanco, .btn-oscuro {
    padding: 8px 15px; font-weight: bold; border-radius: 4px; cursor: pointer; text-align: center; border: none; font-family: 'Montserrat', sans-serif;
}
.btn-verde { background-color: var(--verde-oscuro); color: white; }
.btn-blanco { background-color: white; color: var(--texto-oscuro); border: 1px solid #aaa; }
.btn-oscuro { background-color: var(--gris-oscuro); color: white; padding: 12px; transition: 0.3s; }
.btn-oscuro:hover { background-color: #222; }
.full-width { width: 100%; display: block; }

.caja-buscador { display: flex; align-items: center; gap: 20px; justify-content: center; padding: 20px; }
.texto-buscador strong { font-size: 1.2rem; color: var(--texto-oscuro); }
.texto-buscador p { font-size: 0.9rem; font-weight: bold; color: var(--verde-oscuro); }

/* =========================================
   FOOTER Y CARRUSEL SITIOS DE INTERÉS
========================================= */
.footer-principal {
    background-color: var(--negro-footer); color: var(--blanco);
    position: relative; border-bottom: 15px solid var(--verde-oscuro); margin-top: 40px;
}
.btn-whatsapp { position: absolute; top: -30px; right: 40px; }
.sitios-interes-container { padding: 30px 20px; max-width: 1200px; margin: 0 auto; }
.titulo-interes { font-size: 0.9rem; font-weight: bold; margin-bottom: 20px; }

/* === ESTRUCTURA CARRUSEL === */
.carrusel-sitios-wrapper {
    display: flex; align-items: center; position: relative; padding: 0 30px;
}
.btn-flecha {
    background: none; border: none; color: var(--blanco); font-size: 2rem; cursor: pointer;
    position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); opacity: 0.7; transition: 0.3s;
}
.btn-flecha:hover { opacity: 1; }
.btn-flecha.prev { left: -10px; }
.btn-flecha.next { right: -10px; }

.carrusel-sitios-ventana {
    overflow: hidden; width: 100%;
}
.carrusel-sitios-track {
    display: flex; transition: transform 0.4s ease-in-out;
}

/* En Móvil: 3 por pantalla = 33.333% de ancho cada uno */
.logo-sitio {
    flex: 0 0 33.333%; padding: 0 10px; text-align: center; box-sizing: border-box;
}
.logo-sitio img { max-width: 100%; border-radius: 5px; }

.copyright { background-color: var(--verde-oscuro); color: white; text-align: center; padding: 15px; font-size: 0.85rem; }

/* =========================================
   PÁGINA INTERIOR: HISTORIAL DE AUTORIDADES
========================================= */
.seccion-historial {
    max-width: 900px; 
    margin: 0 auto;
}

.acordeon-item {
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: var(--blanco);
}

.acordeon-cabecera {
    width: 100%;
    background-color: var(--gris-fondo);
    color: var(--verde-oscuro);
    border: none;
    padding: 20px;
    text-align: left;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.acordeon-cabecera:hover, .acordeon-cabecera.activo {
    background-color: var(--verde-oscuro);
    color: var(--blanco);
}

.icono-toggle {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.3s;
}

.acordeon-cabecera.activo .icono-toggle {
    transform: rotate(45deg); 
}

.acordeon-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.acordeon-interior {
    padding: 30px 20px;
}

.bloque-ano {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--gris-borde);
}
.bloque-ano:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.etiqueta-ano {
    display: inline-block;
    background-color: var(--verde-claro);
    color: white;
    padding: 6px 18px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

/* === GRILLA HISTORIAL DE PRESIDENTES (MÓVIL FIRST) === */
.grilla-presidentes-ano {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas en celulares */
    gap: 10px; /* Espacio más pequeño para que entren en móvil */
    text-align: center;
    align-items: start; /* Alinea los nombres si uno ocupa más líneas */
}

.autoridad-historial img {
    width: 100%;
    max-width: 80px; /* Límite en celular para no desproporcionarse */
    aspect-ratio: 1/1; /* Mantiene la foto redonda perfectamente */
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--verde-oscuro);
    margin-bottom: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.autoridad-historial p { 
    font-size: 0.7rem; /* Letra más chica para el móvil */
    line-height: 1.2; 
    word-wrap: break-word;	
}

/* =========================================
   ESTILO PARA ÍTEM DE MENÚ ACTIVO (BARRA PRINCIPAL)
========================================= */
.navegacion-pc a.menu-activo,
.navegacion-pc .dropbtn.menu-activo {
    color: #005B31 !important; 
}

/* =========================================
   ESTILO PARA SUB-ÍTEM ACTIVO (DESPLEGABLE)
========================================= */
.dropdown-content a.submenu-activo {
    color: #005B31 !important; /* Texto en verde institucional */
    font-weight: 800 !important; /* Letra bien negrita */
    background-color: #f8f9fa; /* Un fondo gris muuuuy sutil */
    border-left: 4px solid #005B31; /* Una elegante línea verde a la izquierda */
}

/* =========================================
   ESTILO PARA ÍTEM DE MENÚ INACTIVO (PC)
========================================= */
.navegacion-pc a.menu-inactivo,
.navegacion-pc .dropbtn.menu-inactivo {
    color: #000 !important; 
    font-weight: bold;
}

/* =========================================
   VIDEO DE FONDO (PC / PANTALLAS GRANDES)
========================================= */
.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
    z-index: -1;
    pointer-events: none;
}

/* =========================================
   VIDEO DE FONDO (MÓVIL / CELULARES)
========================================= */
@media (max-width: 768px) {
    
    /* 1. Achicamos la altura del banner solo en celulares. 
       Al ser menos alto, el video no necesita hacer tanto "zoom" 
       y mostrará más imagen de los lados. */
    .slider-contenedor {
        height: 25vh; 
        min-height: 200px;
    }

    .video-slide {
        /* 2. Si lo necesitas, puedes mover el enfoque del video.
           Por defecto está en el centro. Si lo importante del video 
           está más arriba o a un lado, puedes cambiar este valor:
           Ejemplo: object-position: center top; */
        object-position: center; 
        
        /* 3. OPCIONAL: Si no te molesta que queden franjas grises 
           arriba y abajo con tal de que el video se vea 100% completo 
           de lado a lado, cambia 'cover' por 'contain' descomentando esto: */
        /* object-fit: contain; */
    }
}

/* =========================================
   MEDIA QUERIES GENERALES (VERSIÓN PC)
========================================= */
@media (min-width: 768px) {
    /* Grilla de acordeones (Autoridades PC) */
    .grilla-presidentes-ano {
        gap: 20px;
    }
    .autoridad-historial img {
        max-width: 130px; /* Recupera el tamaño original en PC */
        border-width: 3px;
        margin-bottom: 15px;
    }
    .autoridad-historial p { 
        font-size: 0.95rem; 
    }
}


@media (min-width: 1024px) {
    .header-contenido { justify-content: flex-end; height: 100px; }
    .controles-mobile { display: none; }
    .menu-derecha-pc { display: flex; align-items: center; gap: 30px; }
    .navegacion-pc { display: flex; gap: 25px; }
    .navegacion-pc a { text-decoration: none; color: var(--texto-oscuro); font-weight: 800; font-size: 0.95rem; }
    .redes-sociales-pc { display: flex; gap: 8px; }

    /* Logo Flotante (Tamaño PC) */
    .caja-logo-flotante {
        left: 20px; 
        padding: 10px 15px 25px 15px; 
        border-bottom-left-radius: 30px; 
        border-bottom-right-radius: 30px; 
    }
    .caja-logo-flotante img { width: 140px; }

    /* Olas y Slider PC */
    .olas-contenedor { height: 120px; }
    .slider-contenedor { height: 60vh; min-height: 350px; max-height: 600px; }

    /* Olas y Banner Interior PC (Pequeño) */
    .banner-interior { height: 200px; }
    .banner-interior .olas-contenedor { height: 60px; }

    .grilla-contenidos { display: grid; grid-template-columns: 2fr 1.2fr; gap: 60px; align-items: start; }
    .contenido-destacado { flex-direction: row; }
    .contenido-destacado img { width: 350px; }

    .order-movil-2 { order: 0; } .order-movil-3 { order: 0; } .order-movil-4 { order: -1; }
    
    /* En PC: 5 logos por pantalla = 20% de ancho cada uno */
    .logo-sitio { flex: 0 0 20%; padding: 0 15px; }
}

/* =========================================
   SUBMENÚS (DROPDOWNS) PC
========================================= */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: -15px; /* Lo centramos un poco mejor bajo el texto */
    background-color: var(--blanco);
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 200;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    border-top: 3px solid var(--verde-oscuro);
}

.dropdown-content a {
    color: var(--texto-oscuro) !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--gris-fondo);
    transition: background 0.3s, color 0.3s;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: var(--verde-oscuro);
    color: var(--blanco) !important;
}

/* Al pasar el mouse, se muestra el submenú */
.dropdown:hover .dropdown-content {
    display: block;
}

/* =========================================
   SUBMENÚS (DROPDOWNS) MÓVIL
========================================= */
.dropdown-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dropbtn-mobile {
    background: none;
    border: none;
    color: var(--blanco);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

.dropdown-content-mobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Cuando le damos clic con JS, se expande la altura */
.dropdown-mobile.activo .dropdown-content-mobile {
    max-height: 500px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.dropdown-content-mobile a {
    font-size: 1.1rem !important;
    color: #a5d6a7 !important; /* Un verde clarito para diferenciar de los títulos principales */
    font-weight: 600 !important;
}