/* 1. Contenedor principal del artículo (respeta el flujo de YOOtheme) */
/* Previene que la técnica 100vw genere scrollbar horizontal en la página */
html, body, .joomla-custom-article {
    max-width: 100%;
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden !important;
}

.joomla-custom-article {
    font-family: inherit;
    color: #333;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

/* 2. Reset de caja únicamente dentro de nuestro artículo */
.joomla-custom-article *,
.joomla-custom-article *::before,
.joomla-custom-article *::after {
    box-sizing: border-box;
}

.joomla-custom-article {
    overflow-x: visible !important;
}

/* 3. Ajuste de seguridad para el contenedor nativo de Joomla/YOOtheme */
.tm-article-content,
.uk-article {
    overflow: visible; /* Permite que los íconos flotantes se muestren correctamente */
}

/* 4. Títulos alineados al estilo del sitio */
.joomla-custom-article .title-section {
    text-align: center;
    margin-bottom: 45px;
}

.joomla-custom-article .title-section h2 {
    color: #008001;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
}
/*=========================================
SECCIÓN HERO INTERACTIVO
=========================================*/
.hero-interactive {
    position: relative;
    
    /* 1. Técnica para forzar Full Width rompiendo contenedores */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    min-height: auto; 
    padding: 2.5rem 5% 4.5rem 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    
    /* 2. Ruta y estilos de fondo */
    background-image: url('/images/proyectos/democracia/wallpaper_democracia.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important; 
}

.hero-content {
    flex: 1 1 0%;
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(12px);          
    -webkit-backdrop-filter: blur(12px);  
    padding: 2.5rem;                       
    border-radius: 20px;                   
    border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); 
}

.hero-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-content {
    flex: 1;
}


.hero-content h1 {
    font-size: 32px;
    color: #008001;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
    font-weight: 800;
}

.hero-content h2 {
    font-size: 24px;
    color: #093509;
    margin-bottom: 25px;
    font-weight: 500;
}

.hero-content p {
   font-weight: 400;
    line-height: 1.8;
    max-width: 620px;
}

/* Tarjeta Flip */
.hero-card-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.flip-card {
    width: 100%;
    max-width: 420px;
    /* Usamos una altura fija adecuada en lugar de vh */
    height: 480px;
    perspective: 1800px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.flip-card-front {
    background: #ffffff;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.flip-card:hover img {
    transform: scale(1.05);
}

.flip-card-back {
    transform: rotateY(180deg);
    /* Imagen de fondo con filtro oscuro para mejorar legibilidad del texto */
    background: linear-gradient(rgba(9, 53, 9, 0.75), rgba(0, 0, 0, 0.75)), 
                url('/images/banners/Group_1.png') no-repeat center center / cover;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.flip-card-back h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #ffffff;
}

.flip-card-back p {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/*=========================================
SECCIÓN GALERÍA Y CARRUSEL 3D
=========================================*/
.gallery-section {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 60px 0;
    box-sizing: border-box;
    overflow: hidden;
}



.gallery-background {
    position: absolute;
    inset: -20px; /* Compensamos el blur para que no deje bordes blancos */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.15);
    filter: blur(35px) brightness(0.35) saturate(1.2);
    transition: background-image 0.8s ease, transform 0.8s ease;
    z-index: 0;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 14, 26, 0.45), rgba(5, 14, 26, 0.88));
    z-index: 1;
}

.gallery-container {
    position: relative;
    z-index: 2;
    width: min(1400px, 92%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.gallery-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem auto; /* Reducimos el margen inferior */
}

.gallery-tag {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    backdrop-filter: blur(10px);
    margin-bottom: 1.2rem;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}

.gallery-header h2 {
    color: #ffffff;
    font-size: 32px; /* Escala suave */
    line-height: 1.2;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.gallery-header p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

/* Carrusel y Pista */
.gallery-carousel {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gallery-track {
    position: relative;
    height: 520px; /* Reducido para encajar cómodamente junto con el header e indicadores */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1800px;
    overflow: visible; 
}

.carousel-btn {
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.carousel-btn:hover {
    transform: translateY(-3px);
    background: #ffffff;
    color: #111111;
}

/* Tarjetas Dinámicas */
.gallery-card {
    position: absolute;
    width: 320px; /* Ajuste sutil de ancho */
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.85s ease, filter 0.85s ease;
    will-change: transform, opacity, filter;
}

.gallery-card-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.45s ease;
}

.gallery-card.active .gallery-card-title {
    opacity: 1;
    transform: translateY(0);
}

.gallery-image {
    width: 100%;
    height: 280px; /* Dimension fija para mostrar la foto */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #1a1a1a; /* Fondo mientras carga la imagen */
}

.gallery-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Botón de la Tarjeta */
.gallery-button {
    margin-top: 1.5rem;
    border: none;
    border-radius: 999px;
    padding: 0.9rem 2rem;
    background: #ffffff;
    color: #111111;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: all 0.45s ease;
}

.gallery-card.active .gallery-button {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.gallery-card.active .gallery-button:hover {
    transform: translateY(-3px);
    background: #0d7f49;
    color: #ffffff;
}

/* Estados 3D de Tarjetas */
.gallery-card.active {
    transform: translateX(0) translateZ(100px) rotateY(0deg) scale(1);
    opacity: 1;
    filter: none;
    z-index: 10;
}

.gallery-card.active img {
    transform: scale(1.03);
}

.gallery-card.left {
    transform: translateX(-320px) translateZ(-150px) rotateY(30deg) scale(0.75);
    opacity: 0.4;
    filter: blur(4px);
    z-index: 3;
    pointer-events: none;
}

.gallery-card.right {
    transform: translateX(320px) translateZ(-150px) rotateY(-30deg) scale(0.75);
    opacity: 0.4;
    filter: blur(4px);
    z-index: 3;
    pointer-events: none;
}

.gallery-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) translateZ(-350px) scale(0.5);
}

/* Indicators */
.gallery-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.5rem; /* Ajustado */
}

.gallery-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.35s ease;
}

.gallery-indicator.active {
    width: 36px;
    border-radius: 999px;
    background: #ffffff;
}

/* FORZADO BRUTO PARA IMÁGENES DE GALERÍA */
.gallery-card {
    min-height: 380px !important;
}




/*=========================================
VENTANA MODAL
=========================================*/
.gallery-modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
}

.gallery-modal.active {
    opacity: 1;
    visibility: visible;
}

.gallery-modal-content {
    position: relative;
    width: min(720px, 90vw); /* Tamaño más controlado */
    margin: 0 auto;
    /* Paneo de entrada: inicia desplazado hacia abajo y con menor escala */
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-modal.active .gallery-modal-content {
    /* Estado final: centrado perfecto */
    transform: translateY(0) scale(1);
    opacity: 1;
}

.gallery-modal img {
    width: 100%;
    max-height: 55vh; /* Evita que la imagen sea excesivamente grande */
    object-fit: contain;
    display: block;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    background: #000000;
}

#modalTitle {
    color: #ffffff;
    text-align: center;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Botón de Cierre */
.modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: #ffffff;
    color: #111111;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.modal-close:hover {
    transform: rotate(90deg) scale(1.1);
    background: #111111;
    color: #ffffff;
}


/*=========================================
ADAPTACIÓN RESPONSIVA (MEDIA QUERIES)
=========================================*/

/* Pantallas medianas y Laptops pequeñas (<= 1200px) */
@media (max-width: 1200px) {
    .gallery-card.left {
        transform: translateX(-200px) translateZ(-150px) rotateY(25deg) scale(0.75);
    }
    .gallery-card.right {
        transform: translateX(200px) translateZ(-150px) rotateY(-25deg) scale(0.75);
    }
}

@media (min-width: 993px) {
    .gallery-nav-buttons {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        pointer-events: none; /* Permite hacer clic en las tarjetas */
        z-index: 10;
    }

    .carousel-btn {
        pointer-events: auto; /* Reactiva clics solo en los botones */
    }
}

/* Tablets (<= 992px) */
@media (max-width: 992px) {
    /* --- HERO TABLET --- */
    .hero-interactive {
        min-height: auto;
        padding: 4rem 1.5rem;
    }

    .hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
    }

    .hero-content {
        width: 100%;
        max-width: 650px;
    }

    .hero-card-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .flip-card {
        height: 420px;
        width: 100%;
        max-width: 340px;
    }

    /* --- GALERÍA TABLET --- */
    .gallery-section {
        padding: 3.5rem 0;
    }

    .gallery-carousel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .gallery-track {
        height: 440px;
        width: 100%;
    }

    .gallery-card {
        width: 280px;
    }

    .gallery-card.left {
        transform: translateX(-140px) translateZ(-100px) scale(0.7);
        opacity: 0.4;
    }

    .gallery-card.right {
        transform: translateX(140px) translateZ(-100px) scale(0.7);
        opacity: 0.4;
    }
}

/* Dispositivos Móviles (<= 600px) */
@media (max-width: 600px) {
    /* --- HERO MÓVIL --- */
    .hero-interactive {
        padding: 2.5rem 1rem;
    }

    .hero-content {
        padding: 1.5rem 1.2rem;
        border-radius: 16px;
    }

    .hero-content h1 {
        font-size: 1.75rem;
    }

    .hero-content h2 {
        font-size: 1.05rem;
    }

    .hero-card-container {
        width: 100%;
    }

    .flip-card {
        height: 380px;
        max-width: 100%;
        margin: 0 auto;
    }

    .flip-card-back {
        padding: 1.2rem;
    }

    /* --- GALERÍA MÓVIL --- */
    .gallery-section {
        padding: 2.5rem 0;
    }

    .gallery-carousel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .gallery-track {
        height: 360px;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .gallery-card {
        width: 85vw;
        max-width: 290px;
    }

    .gallery-image {
        height: 200px;
    }

    .gallery-card.left,
    .gallery-card.right {
        opacity: 0 !important;
        pointer-events: none;
        transform: scale(0.5) !important;
    }

    /* CONTROLES DE BOTONES DEBAJO DE LA TARJETA Y CENTRADOS */
    #prevBtn, #nextBtn {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: 44px;
        height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Alineación horizontal de las flechas y puntos */
    .gallery-controls-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 100%;
        margin-top: 0.5rem;
    }

    .gallery-nav-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem; /* Espacio entre la flecha izquierda y derecha */
    }

    /* Modal */
    .gallery-modal {
        padding: 1rem;
    }

    .gallery-modal-content {
        width: 95vw;
    }

    .gallery-modal img {
        max-height: 50vh;
    }
}