/* Comunidad Page Specific Styles */

.comunidad-header {
    text-align: center;
    padding: 120px 20px 40px;
    background: #ffffff;
}

.comunidad-title {
    font-size: 64px;
    margin-bottom: 20px;
    letter-spacing: -3px;
}

.comunidad-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 20px;
    color: var(--text-color);
}

/* News Carousel (Moxion-inspired) Styles */
.news-carousel-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.news-carousel-header {
    max-width: 1400px;
    margin: 0 auto 20px;
    padding: 0 40px;
    text-align: center;
}

.carousel-title {
    font-size: 84px;
    line-height: 0.9;
    letter-spacing: -5px;
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 900;
}

.carousel-title .highlight {
    color: var(--primary-green);
}

.carousel-subtitle {
    font-size: 18px;
    color: var(--text-color);
    font-weight: 500;
    letter-spacing: -0.5px;
}

/* Custom Ball Cursor */
.ball-cursor {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(var(--primary-green-rgb), 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid var(--primary-green);
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease;
    transform: translate(-50%, -50%) scale(0.8);
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-green);
}

.ball-cursor::after {
    content: 'VER';
    letter-spacing: 1px;
}

.ball-cursor.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Carousel Wrapper */
.news-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 20px 0 40px;
}

/* Carousel Section */
.news-carousel-section {
    position: relative;
}

/* Container for wrapper + arrows positioning */
.news-carousel-wrapper-container {
    position: relative;
}

.news-carousel-wrapper::-webkit-scrollbar {
    height: 6px;
}

.news-carousel-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin: 0 40px;
}

.news-carousel-wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 10px;
}

.news-carousel-track {
    display: flex;
    align-items: flex-start;
    /* Alineación al inicio para asegurar una línea base superior común */
    gap: 30px;
    padding: 40px 40px 80px;
    /* Padding equilibrado */
    width: max-content;
    height: 740px;
    /* Altura fija para el track para evitar saltos */
}

/* News Card */
.news-card {
    width: 420px;
    height: 620px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: none;
    flex-shrink: 0;
    margin-top: 0;
    /* Asegurar que no hay margen que las desplace */
}

.news-card:hover {
    transform: scale(1.03);
}

/* Card Background Colors - Different shades of green from the website palette */
.news-card:nth-child(7n + 1) {
    background: linear-gradient(135deg, #004D29 0%, #006B3A 100%);
    /* Dark forest green */
}

.news-card:nth-child(7n + 2) {
    background: linear-gradient(135deg, #007A3D 0%, #00A443 100%);
    /* Primary green */
}

.news-card:nth-child(7n + 3) {
    background: linear-gradient(135deg, #00A443 0%, #00C955 100%);
    /* Bright green */
}

.news-card:nth-child(7n + 4) {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    /* Emerald green */
}

.news-card:nth-child(7n + 5) {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    /* Light emerald */
}

.news-card:nth-child(7n + 6) {
    background: linear-gradient(135deg, #22C55E 0%, #4ADE80 100%);
    /* Fresh green */
}

.news-card:nth-child(7n + 7) {
    background: linear-gradient(135deg, #65A30D 0%, #84CC16 100%);
    /* Lime green */
}

/* Geometric Pattern Background */
.news-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px);
    opacity: 1;
    pointer-events: none;
}

/* Card Content Layout */
.news-card-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px;
    z-index: 2;
}

/* Date (Top) */
.news-card-date {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

/* Summary (Center) */
.news-card-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.news-card-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #ffffff;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.news-card-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Image */
.news-card-image {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Meta (Bottom) */
.news-card-meta {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.news-card-author {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 4px 0;
}

.news-card-source {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Link Button (Hover Only) */
.news-card-link {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.news-card:hover .news-card-link {
    opacity: 1;
    transform: scale(1);
}

.news-card-link svg {
    width: 20px;
    height: 20px;
    stroke: black;
}

/* Scroll Arrows - Positioned at center of carousel wrapper */
.scroll-indicators {
    position: absolute;
    right: 40px;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
    pointer-events: auto;
}

.scroll-arrow {
    pointer-events: auto;
    cursor: pointer !important;
    /* Ensure normal cursor on arrows */
}

.scroll-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f4f7fa;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-arrow:hover {
    background: var(--primary-green);
}

.scroll-arrow:hover svg {
    stroke: #ffffff;
}

.scroll-arrow svg {
    stroke: var(--heading-color);
    transition: stroke 0.3s ease;
}

.scroll-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.scroll-arrow:disabled:hover {
    background: #f4f7fa;
}

.scroll-arrow:disabled:hover svg {
    stroke: var(--heading-color);
}

/* Placeholder */
.news-card-placeholder {
    width: 420px;
    height: 620px;
    border-radius: 16px;
    background: #f4f7fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.placeholder-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.news-card-placeholder p {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .news-carousel-section {
        padding: 60px 0 80px;
    }

    .news-carousel-header {
        padding: 0 20px;
        margin-bottom: 40px;
    }

    .carousel-title {
        font-size: 48px;
        letter-spacing: -3px;
    }

    .carousel-subtitle {
        font-size: 16px;
    }

    .ball-cursor {
        display: none;
    }

    .news-carousel-wrapper {
        cursor: auto;
    }

    .news-carousel-track {
        gap: 20px;
        padding: 0 20px;
    }

    .news-card {
        width: 320px;
        height: 540px;
        cursor: pointer;
    }

    .news-card-content {
        padding: 24px;
    }

    .news-card-title {
        font-size: 24px;
    }

    .news-card-excerpt {
        font-size: 15px;
    }

    .news-card-image {
        height: 150px;
    }

    .news-card-link {
        opacity: 1;
        transform: scale(1);
    }

    .scroll-indicators {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        flex-direction: row;
        justify-content: flex-end;
        padding: 0 20px;
        margin-top: 30px;
    }

    .news-card-placeholder {
        width: 320px;
        height: 540px;
    }
}

/* Agenda Motion Redesign Styles */
.agenda-motion-section {
    position: relative;
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

.agenda-motion-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-height: 800px;
    /* Limit height for scroll */
    overflow-y: auto;
    /* Enable vertical scroll */
    width: 100%;
    /* Hide scrollbar for cleaner look like mobile */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.agenda-motion-container::-webkit-scrollbar {
    display: none;
}

.agenda-row {
    display: flex;
    align-items: center;
    gap: 100px;
}

/* Rotating Seal */
.rotating-seal {
    position: absolute;
    top: 60px;
    right: 40px;
    width: 120px;
    height: 120px;
    z-index: 10;
    pointer-events: none;
    animation: rotateSeal 20s linear infinite;
}

@keyframes rotateSeal {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.section-header-motion {
    max-width: 1400px;
    margin: 0 auto 80px;
    padding: 0 40px;
    z-index: 10000;
}

.section-header-motion-noticias {
    max-width: 1400px;
    z-index: 10000;
    position: absolute;
    text-align: center;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

/* Column 1: Visuals */
.agenda-visual-card {
    flex: 1.2;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    height: 500px;
    opacity: 0;
    transform: translateY(50px);
}

.card-media {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-media img,
.card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.agenda-visual-card:hover .card-media img,
.agenda-visual-card:hover .card-media video {
    transform: scale(1.05);
}

.date-overlay {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.date-overlay .day {
    display: block;
    font-size: 32px;
    font-weight: 900;
    color: var(--heading-color);
    line-height: 1;
}

.date-overlay .month {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-green);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Column 2: Narrative */
.narrative-item {
    flex: 1;
    max-width: 500px;
}

.motion-title {
    font-size: 84px;
    line-height: 0.9;
    letter-spacing: -5px;
    color: var(--heading-color);
    margin-bottom: 0;
}

.motion-title .highlight {
    color: var(--primary-green);
    display: block;
}

.narrative-item .cat {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-green);
    margin-bottom: 20px;
    display: block;
}

.narrative-item h3 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--heading-color);
}

.narrative-item p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-color);
}

@media (max-width: 1024px) {
    .agenda-row {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .motion-title {
        font-size: 64px;
        text-align: center;
    }

    .agenda-visual-card {
        width: 100%;
        height: 400px;
    }

    .narrative-item {
        max-width: 100%;
    }
}

/* Forum Section */
.forum-section {
    padding: 120px 20px;
    background: #ffffff;
}

.forum-header {
    text-align: center;
    margin-bottom: 60px;
}

.forum-header p {
    color: var(--text-color);
    font-size: 18px;
}

.forum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.forum-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 32px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.forum-card:hover {
    border-color: var(--primary-green);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

.forum-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.forum-meta .topic {
    color: var(--primary-green);
    font-weight: 800;
    font-size: 14px;
}

.forum-meta .time {
    color: #8898aa;
    font-size: 12px;
}

.forum-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--heading-color);
}

.forum-stats {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 20px;
    color: var(--text-color);
    font-size: 14px;
}

.forum-cta {
    margin-top: 60px;
    text-align: center;
}

@media (max-width: 768px) {

    /* ===== HEADER ===== */
    .comunidad-header {
        padding: 100px 20px 30px;
    }

    .comunidad-title {
        font-size: 40px;
        letter-spacing: -2px;
    }

    .comunidad-description {
        font-size: 18px;
    }

    /* ===== 3D NEWS SCROLL (FIXED FOR MOBILE) ===== */
    .news-scroll-container {
        height: auto !important;
        min-height: auto;
        padding: 40px 0;
    }

    .news-sticky-wrapper {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 20px;
    }

    /* Hide the complex 3D scene elements that don't translate well to mobile */
    .news-3d-scene {
        display: none !important;
    }

    /* Display news as a clean vertical list on mobile instead of the 3D scroll */
    /* We'll use the text content and maybe a simple image representation if possible, 
       but for now, let's make the existing elements work by disabling the GSAP dependency */

    .news-text-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 50px !important;
        padding: 0 !important;
        max-width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        height: auto !important;
        bottom: auto !important;
    }

    .text-side {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 20px;
        background: #f8f9fa;
        padding: 30px;
        border-radius: 24px;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .text-left h2 {
        font-size: 28px !important;
        opacity: 1 !important;
        transform: none !important;
        color: var(--heading-color) !important;
        margin-bottom: 15px !important;
    }

    .text-right p {
        font-size: 16px !important;
        opacity: 1 !important;
        transform: none !important;
        color: var(--text-color) !important;
    }

    .news-index {
        display: none !important;
    }

    /* Since the news is dynamically populated by JS, we need to ensure the JS 
       doesn't break the layout. If the JS expects the 3D elements, we need 
       to handle it. We will hide the JS-controlled elements on mobile 
       and show a mobile-only static version or adjust the JS. */

    /* ===== AGENDA MOTION ===== */
    .agenda-motion-section {
        padding: 80px 0;
    }

    .agenda-motion-container {
        padding: 0 20px;
        gap: 80px;
    }

    .section-header-motion {
        padding: 0 20px;
        margin-bottom: 50px;
    }

    .section-header-motion-noticias {
        z-index: 0;
        top: -2%;
    }

    .rotating-seal {
        top: 30px;
        right: 20px;
        width: 80px;
        height: 80px;
        animation-duration: 15s !important;
    }

    .agenda-row {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .agenda-visual-card {
        width: 100%;
        height: 350px;
        order: 2;
        /* Image after text on mobile */
    }

    .narrative-item {
        max-width: 100%;
        order: 1;
    }

    .motion-title {
        font-size: 48px;
        letter-spacing: -3px;
        text-align: center;
    }

    .motion-title .highlight {
        display: inline;
    }

    .narrative-item .cat {
        font-size: 11px;
    }

    .narrative-item h3 {
        font-size: 26px;
    }

    .narrative-item p {
        font-size: 16px;
    }

    .date-overlay {
        top: 20px;
        left: 20px;
        padding: 12px 16px;
    }

    .date-overlay .day {
        font-size: 28px;
    }

    .date-overlay .month {
        font-size: 12px;
    }

    /* ===== FORUM ===== */
    .forum-section {
        padding: 80px 20px;
    }

    .forum-header {
        margin-bottom: 40px;
    }

    .forum-header p {
        font-size: 16px;
    }

    .forum-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .forum-card {
        padding: 30px;
    }

    .forum-meta .topic {
        font-size: 13px;
    }

    .forum-meta .time {
        font-size: 11px;
    }

    .forum-card h3 {
        font-size: 20px;
    }

    .forum-stats {
        font-size: 13px;
        flex-wrap: wrap;
    }

    .forum-cta {
        margin-top: 40px;
    }
}

@media (max-width: 425px) {
    .comunidad-title {
        font-size: 32px;
    }

    .comunidad-description {
        font-size: 16px;
    }

    .news-3d-card {
        width: 280px;
        height: 400px;
    }

    .number-item {
        font-size: 100px;
        height: 400px;
    }

    .text-left h2 {
        font-size: 26px;
    }

    .text-right p {
        font-size: 14px;
    }

    .motion-title {
        font-size: 36px;
    }

    .narrative-item h3 {
        font-size: 22px;
    }

    .agenda-visual-card {
        height: 280px;
    }

    .forum-card {
        padding: 25px;
    }

    .forum-card h3 {
        font-size: 18px;
    }
}

/* News Detail Modal - Enhanced with zoom and blur */
.news-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 37, 64, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}

.news-detail-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-news-wrapper {
    /* El fondo dinámico se combinará con el patrón en JS */
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 24px;
    overflow-y: auto;
    position: relative;
    padding: 60px;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4);
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);

    /* Configuración para que el fondo cubra todo el área de scroll */
    background-attachment: local, local;
    background-position: center;
    background-size: auto;
}

.news-detail-modal.active .modal-news-wrapper {
    transform: scale(1);
}

/* El contenido debe ir con z-index para estar sobre el fondo */
.modal-news-wrapper>* {
    position: relative;
    z-index: 1;
}

.modal-news-wrapper::-webkit-scrollbar {
    width: 8px;
}

.modal-news-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.modal-news-header {
    margin-bottom: 40px;
}

.modal-news-day {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.modal-news-header h2 {
    font-size: 48px;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.modal-news-excerpt {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-weight: 500;
}

.modal-news-image-container {
    width: 100%;
    height: 450px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 40px;
}

.modal-news-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-news-body {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.modal-news-body p {
    white-space: pre-line;
    color: white;
}

.modal-event-disclaimer {
    font-size: 0.8rem;
    color: var(--primary-green);
    margin: 1rem 1rem;
    font-weight: bold;
}

.close-modal-news-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    z-index: 10;
}

.close-modal-news-btn:hover {
    background: var(--primary-green);
    color: #ffffff;
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .modal-news-wrapper {
        padding: 40px 25px;
    }

    .modal-news-header h2 {
        font-size: 32px;
    }

    .modal-news-image-container {
        height: 250px;
    }
}