/*==================================================
    HERO RESPONSIVE
==================================================*/

@media(max-width:900px){

    .hero{
        min-height:600px;
        padding:220px 16px 24px;
        min-height:85vh;
        align-items:flex-end;
        background-position:65% center;
    }

    .hero .container{
        width:100%;
        max-width:none;
        padding:0;
    }

    .hero-card{
        width:100%;
        max-width:none;
        margin:0;
        padding:32px 28px;
        border-radius:22px;
        background:rgba(247,246,242,.94);
        backdrop-filter:blur(6px);
        box-shadow:0 14px 35px rgba(22,52,59,.16);
    }

    .hero-kicker{
        margin-bottom:14px;
        font-size:.7rem;
        letter-spacing:.15rem;
    }

    .hero h1{
        margin-bottom:20px;
        font-size:clamp(2rem, 10vw, 2.65rem);
        line-height:1.06;
    }

    .hero p{
        margin-bottom:26px;
        font-size:1rem;
        line-height:1.65;
    }

    .hero-card .btn-primary{
        width:auto;
        padding:14px 24px;
    }

}

/*==================================================
   MENU
==================================================*/

@media(max-width:900px){

.nav-container{

    height:76px;

}

.menu-toggle{

    display:block;

    z-index:1002;

}

.main-nav{

    position:absolute;

    top:76px;

    left:0;

    width:100%;

}

.menu{

    display:none;

    flex-direction:column;

    background:#fff;

    width:100%;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.menu.open{

    display:flex;

}

.menu li{

    text-align:center;

}

.menu a{

    display:block;

    padding:18px;

}

.menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}
}

/*==================================================
    PROBLEMA
==================================================*/

@media (max-width:900px){

    .problem-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .impact-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
    DESAFÍO / PROBLEMA
==================================================*/

@media(max-width:900px){

    .challenge-section{
        padding:76px 0;
    }

    .challenge-header{
        text-align:left;
        margin-bottom:40px;
    }

    .challenge-image img{
        height:280px;
        border-radius:20px;
    }

    .challenge-points{
        grid-template-columns:1fr;
        gap:30px;
    }

}
/*==================================================
    INVESTIGACIÓN
==================================================*/

@media(max-width:900px){

    .research-section{
        padding:76px 0;
    }

    .research-header{
        text-align:left;
        margin-bottom:46px;
    }

    .research-map{
        display:flex;
        flex-direction:column;
        gap:34px;
        max-width:520px;
    }

    .research-center{
        position:relative;
        inset:auto;
        transform:none;
        order:-1;
        align-self:flex-start;
    }

    .center-circle{
        width:auto;
        height:auto;
        min-width:0;
        border-radius:999px;
        padding:16px 26px;
        font-size:1.35rem;
    }

    .station{
        max-width:none;
        width:100%;
        display:grid;
        grid-template-columns:92px 1fr;
        gap:20px;
        text-align:left;
        align-items:center;
    }

    .station img{
        width:92px;
        height:92px;
        margin:0;
    }

    .station::after{
        display:none;
    }

}

/*==================================================
    PARTICIPAR
==================================================*/

@media (max-width:900px){

    .participation-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
    PROYECTO
==================================================*/

@media(max-width:900px){

    .project-hero{
        padding:48px 0;
    }

    .project-hero-grid,
    .project-problem-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

    .project-hero h1{
        margin-bottom:22px;
        font-size:clamp(2.1rem, 9vw, 2.8rem);
        line-height:1.08;
    }

    .project-hero p{
        margin-bottom:18px;
        font-size:1rem;
        line-height:1.7;
    }

    .project-hero-image img,
    .project-problem-image img{
        height:220px;
        object-fit:cover;
        border-radius:20px;
    }

    .project-problem{
        padding:76px 0;
    }

}
/*==================================================
    PROYECTO / OBJETIVOS
==================================================*/

@media(max-width:900px){

    .project-goals{
        padding:76px 0;
    }

    .goals-header{
        text-align:left;
        margin-bottom:42px;
    }

    .goals-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

}

/*==================================================
    NUESTRA FORMA DE TRABAJAR
==================================================*/

@media(max-width:900px){

.project-approach{

    padding:76px 0;
}

.project-approach-grid{

    grid-template-columns:1fr;

    gap:42px;
}

.project-approach-image img{

    height:340px;
}

}

/*==================================================
EL PROYECTO EN ACCIÓN
==================================================*/

@media(max-width:900px){

.journey-grid{

    grid-template-columns:1fr;

}

.journey-card img{

    height:260px;
}

}

@media(max-width:900px){

.project-future{

    padding:80px 0;
}

.project-future-image img{

    height:320px;
}

}
/*==================================================
    COLABORACIÓN HOME RESPONSIVE
==================================================*/

@media(max-width:900px){

    .home-collaboration-section{
        padding:76px 0;
    }

    .home-collaboration-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .home-collaboration-content{
        max-width:none;
    }

    .home-collaboration-image{
        order:2;
    }

    .home-collaboration-image img{
        height:280px;
        border-radius:20px;
    }

    .home-collaboration-content h2{
        font-size:2rem;
    }

}
/*==================================================
    PROYECTO EN ACCIÓN
==================================================*/

@media(max-width:900px){

    .action-section{
        padding:76px 0;
    }

    .action-header{
        text-align:left;
        margin-bottom:42px;
    }

    .action-image img{
        height:280px;
        border-radius:20px;
    }

    .action-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

}

/*==================================================
    PARTICIPÁ
==================================================*/

@media(max-width:900px){

    .join-section{
        padding:76px 0;
    }

    .join-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .join-image img{
        height:300px;
        border-radius:20px;
    }

}

/*==================================================
    CÓMO CONSTRUIMOS CONOCIMIENTO
==================================================*/

@media(max-width:900px){

    .knowledge-section{
        padding:76px 0;
    }

    .knowledge-header{
        text-align:left;
        margin-bottom:42px;
    }

    .knowledge-grid{
        display:flex;
        flex-direction:column;
        gap:34px;
        margin-top:46px;
        align-items:stretch;
    }

    .knowledge-center{
        width:auto;
        height:auto;
        min-height:0;
        border-radius:28px;
        padding:34px 28px;
        order:-1;
    }

    .knowledge-center p{
        font-size:1.65rem;
    }

    .knowledge-center span{
        font-size:1.15rem;
    }

    .knowledge-evidence{
        max-width:none;
        text-align:left;
        margin-top:0;
    }

}

/*==================================================
    VOCES DEL TERRITORIO RESPONSIVE
==================================================*/

@media(max-width:900px){

    .voices-section{
        padding:60px 0 76px;
    }

    .voices-header{
        max-width:none;
        margin-bottom:38px;
        text-align:left;
    }

    .voices-header h2{
        font-size:2rem;
    }

    .voices-grid{
        grid-template-columns:1fr 1fr;
        gap:24px;
    }

}

@media(max-width:560px){

    .voices-grid{
        grid-template-columns:1fr;
    }

}
/*==================================================
    FOOTER RESPONSIVE
==================================================*/

@media(max-width:900px){

    .institution-strip{
        padding:42px 0;
    }

    .institution-group{
        margin-bottom:38px;
    }

    .institution-logos{
        gap:30px;
    }

    .institution-logos img{
        max-width:180px;
        height:auto;
        max-height:58px;
    }

    .footer{
        padding:56px 0 28px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .footer h3{
        font-size:1.55rem;
    }

    .footer-bottom{
        margin-top:36px;
    }
}

@media(max-width:520px){

    .institution-logos{
        flex-direction:column;
        gap:24px;
    }

    .institution-logos img{
        max-width:220px;
        max-height:54px;
    }
}

/*==================================================
    MAPA RESPONSIVE
==================================================*/

@media(max-width:900px){

    .page-hero{
        padding:56px 0 48px;
    }

    .page-hero h1{
        font-size:clamp(2.1rem, 9vw, 2.8rem);
        line-height:1.08;
    }

    .page-hero p{
        font-size:1rem;
        line-height:1.7;
    }


    /* INTRO */

    .map-intro{
        padding:60px 0;
    }

    .intro-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:30px;
    }

    .intro-grid h2{
        font-size:2rem;
        line-height:1.15;
    }

    .intro-grid p{
        font-size:1rem;
        line-height:1.7;
    }

    .intro-photo{
        width:100%;
    }

    .intro-photo img{
        width:100%;
        height:240px;
        object-fit:cover;
        display:block;
        border-radius:20px;
    }


    /* MAPA */

    .map-section{
        padding:60px 0;
    }

    #map{
        width:100%;
        height:420px;
        border-radius:20px;
    }


    /* SITIOS */

    .sites-section{
        padding:60px 0;
    }

    .sites-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:28px;
    }

    .site-card{
        width:100%;
    }

    .site-card img{
        width:100%;
        height:220px;
        object-fit:cover;
        display:block;
    }

    .site-content{
        padding:24px;
    }

    .site-content h3{
        font-size:1.35rem;
        line-height:1.3;
    }

    .site-content p{
        line-height:1.7;
    }


    /* PARTICIPAR */

    .participate-map{
        padding:60px 0;
    }

    .participate-box{
        padding:34px 26px;
        border-radius:22px;
    }

    .participate-box h2{
        font-size:2rem;
        line-height:1.15;
    }

}

/*==================================================
    HISTORIA RESPONSIVE
==================================================*/

@media(max-width:900px){

    .history-hero{
        padding:56px 0 48px;
        text-align:left;
    }

    .history-hero h1{
        margin:16px 0 18px;
        font-size:clamp(2.1rem, 9vw, 2.8rem);
        line-height:1.08;
    }

    .history-hero p{
        font-size:1rem;
        line-height:1.7;
    }

    .history-section{
        padding:56px 0;
    }

    .history-item{
        grid-template-columns:1fr;
        gap:22px;
    }

    .history-date{
        font-size:.78rem;
        letter-spacing:.1rem;
    }

    .history-content h2{
        font-size:1.8rem;
        line-height:1.18;
    }

    .history-content p{
        font-size:1rem;
        line-height:1.7;
        margin-bottom:24px;
    }

    .history-content img{
        width:100%;
        max-width:none;
        height:240px;
        border-radius:20px;
    }

    .history-gallery{
        grid-template-columns:1fr;
        gap:18px;
    }

    .history-gallery img{
        width:100%;
        height:240px;
        aspect-ratio:auto;
        object-fit:cover;
    }

    .history-call{
        margin-top:24px;
        font-size:1rem;
        line-height:1.7;
    }

    .history-link{
        font-size:1rem;
    }

}

/*==================================================
    EQUIPO RESPONSIVE
==================================================*/

@media(max-width:900px){

    /* RED DE COLABORACIÓN */

    .collaboration-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:32px 20px;
        margin-top:44px;
    }

    .collaboration-item{
        justify-content:flex-start;
    }

    .collaboration-icon{
        width:64px;
        height:64px;
        margin-bottom:14px;
    }

    .collaboration-icon img{
        width:54px;
        height:54px;
    }

    .collaboration-item h3{
        font-size:1.08rem;
        line-height:1.25;
    }


    /* PERSONAS DEL EQUIPO */

    .team-grid{
        grid-template-columns:1fr;
        gap:34px;
    }

    .team-member{
        gap:20px;
        padding-bottom:28px;
    }

    .team-member img{
        width:84px;
        height:84px;
    }

    .team-member h3{
        font-size:1.35rem;
    }

    .team-role{
        margin-bottom:10px;
        font-size:.95rem;
    }

    .team-member p{
        font-size:.98rem;
        line-height:1.65;
    }

    
}

@media(max-width:900px){

    .team-network-section{
        padding:60px 0;
    }

    .team-network-layout{
        grid-template-columns:1fr;
        gap:42px;
    }

    .team-network-intro{
        max-width:none;
    }

    .team-network-section .collaboration-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:30px 18px;
    }

    .team-network-section .collaboration-item{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .team-network-section .collaboration-icon{
        width:58px;
        height:58px;
    }

    .team-network-section .collaboration-icon img{
        width:48px;
        height:48px;
    }

    .team-network-section .collaboration-item h3{
        font-size:1rem;
    }

}

@media(max-width:520px){

    .collaboration-grid{
        gap:28px 14px;
    }

    .collaboration-icon{
        width:58px;
        height:58px;
    }

    .collaboration-icon img{
        width:48px;
        height:48px;
    }

    .collaboration-item h3{
        font-size:1rem;
    }

    .team-member{
        align-items:flex-start;
        gap:16px;
    }

    .team-member img{
        width:72px;
        height:72px;
    }

}

/*==================================================
    CONTACTO RESPONSIVE
==================================================*/

@media(max-width:900px){

    .contact-section{
        padding:56px 0;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:34px;
        margin-top:42px;
    }

    .contact-info{
        gap:18px;
    }

    .contact-card{
        padding:24px;
        border-radius:20px;
    }

    .contact-form{
        padding:28px 24px;
        border-radius:20px;
    }

    .form-group{
        margin-bottom:20px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        padding:13px 14px;
        font-size:16px;
    }

    .form-group textarea{
        min-height:150px;
    }

    .contact-form .btn-primary{
        width:100%;
        justify-content:center;
    }

}

@media(max-width:520px){

    .contact-section{
        padding:48px 0;
    }

    .contact-grid{
        gap:28px;
        margin-top:34px;
    }

    .contact-card{
        padding:22px 20px;
    }

    .contact-form{
        padding:24px 20px;
    }

}

/*==================================================
    TÍTULO CONTACTO
==================================================*/
@media(max-width:900px){

    .contact-section .section-header h2{
        font-size:clamp(2.1rem, 9vw, 2.8rem);
        line-height:1.08;
    }

}

@media(max-width:900px){

    .contact-section .section-header{
        max-width:none;
        text-align:left;
    }

}
/*==================================================
    TÍTULOS DE PÁGINAS INTERNAS
==================================================*/

@media(max-width:900px){

    .project-hero h1,
    .page-hero h1,
    .history-hero h1,
    .team-hero h1,
    .contact-section > .container > h1,
    .contact-hero h1{
        font-size:clamp(2.1rem, 9vw, 2.8rem);
        line-height:1.08;
    }

}

/*==================================================
    CUATRO COMPONENTES — RESPONSIVE
==================================================*/

@media(max-width:900px){

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

    .approach-card{
        padding:26px 22px 28px;
    }

    .approach-card h3{
        min-height:0;
        margin-bottom:12px;
    }

    .approach-card p{
        font-size:.95rem;
        line-height:1.6;
    }

}


@media(max-width:560px){

    .approach-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .approach-card{
        padding:25px 22px 27px;
    }

    .approach-number{
        margin-bottom:12px;
        font-size:2.15rem;
    }

    .approach-card h3{
        font-size:1.18rem;
        line-height:1.3;
    }

}



/*==================================================
    DOCUMENTAL — RESPONSIVE
==================================================*/

/*--------------------------------------------------
    TABLET
--------------------------------------------------*/

@media(max-width:900px){

    /* HERO */

    .documentary-hero{
        padding:80px 0 75px;
    }

    .documentary-hero-grid{
        grid-template-columns:1fr;
        gap:48px;
        align-items:start;
    }

    .documentary-hero-content{
        max-width:760px;
    }

    .documentary-hero h1{
        max-width:760px;
        margin:16px 0 24px;
        font-size:clamp(2.8rem, 7vw, 4.5rem);
        line-height:1;
    }

    .documentary-hero-lead{
        max-width:700px;
        margin-bottom:28px;
        font-size:1.05rem;
        line-height:1.75;
    }

    .documentary-hero-note{
        width:100%;
        max-width:620px;
        padding-top:24px;
    }


    /* APERTURA */

    .documentary-opening{
        padding:80px 0 90px;
    }

    .documentary-opening-header{
        grid-template-columns:1fr;
        gap:24px;
        margin-bottom:38px;
    }

    .documentary-opening-header > p{
        max-width:650px;
        justify-self:start;
    }

    .documentary-video-frame--vertical{
        max-width:380px;
    }


    /* CAPÍTULOS */

    .documentary-chapter{
        padding:85px 0 95px;
    }

    .documentary-chapter-header{
        grid-template-columns:1fr;
        gap:18px;

        margin-bottom:65px;
        padding-top:22px;
    }

    .documentary-chapter-number{
        display:block;
    }

    .documentary-chapter-header h2{
        margin-bottom:16px;
        font-size:clamp(2rem, 5vw, 3rem);
    }

    .documentary-chapter-header p{
        max-width:700px;
        font-size:1rem;
        line-height:1.75;
    }


    /* EPISODIOS */

    .documentary-episodes{
        gap:80px;
    }

    .documentary-episode,
    .documentary-episode--reverse{

        width:min(100%, 620px);

        grid-template-columns:280px minmax(0, 1fr);
        gap:42px;

    }

    .documentary-episode--reverse{
        grid-template-columns:minmax(0, 1fr) 280px;
    }

    .documentary-episode-media{
        max-width:280px;
    }


    /* TUTORIAL */

    .documentary-tutorial{
        grid-template-columns:minmax(280px, 380px) minmax(0, 1fr);
        gap:45px;
    }

    .documentary-tutorial-media{
        max-width:420px;
    }


    /* CIERRE */

    .documentary-closing{
        padding:90px 0;
    }

}


/*--------------------------------------------------
    MOBILE
--------------------------------------------------*/

@media(max-width:680px){

    /* HERO */

    .documentary-hero{
        padding:56px 0 64px;
    }

    .documentary-hero-grid{
        gap:38px;
    }

    .documentary-hero h1{
        margin:14px 0 22px;

        font-size:clamp(2.65rem, 12vw, 4rem);
        line-height:.98;
    }

    .documentary-hero-lead{
        margin-bottom:24px;

        font-size:1rem;
        line-height:1.72;
    }

    .documentary-start-link{
        font-size:.95rem;
    }


    /* ÍNDICE */

    .documentary-hero-note{
        max-width:none;
        padding-top:22px;
    }

    .documentary-hero-note > span{
        margin-bottom:12px;
    }

    .documentary-hero-note li{
        padding:10px 0 10px 34px;
        font-size:.95rem;
    }

    .documentary-hero-note li::before{
        top:11px;
    }


    /* APERTURA */

    .documentary-opening{
        padding:65px 0 75px;
    }

    .documentary-opening-header{
        gap:18px;
        margin-bottom:32px;
    }

    .documentary-opening-header h2{
        font-size:clamp(1.95rem, 9vw, 2.7rem);
        line-height:1.1;
    }

    .documentary-opening-header > p{
        font-size:.98rem;
        line-height:1.7;
    }

    .documentary-video-frame--vertical{
        width:100%;
        max-width:330px;
    }

    .documentary-featured-video figcaption{
        font-size:.78rem;
        line-height:1.5;
    }


    /* CAPÍTULOS */

    .documentary-chapter{
        padding:65px 0 75px;
    }

    .documentary-chapter-header{
        gap:14px;
        margin-bottom:48px;
        padding-top:20px;
    }

    .documentary-chapter-header h2{
        margin-bottom:14px;
        font-size:clamp(2rem, 9vw, 2.7rem);
        line-height:1.08;
    }

    .documentary-chapter-header p{
        font-size:.98rem;
        line-height:1.7;
    }


    /* EPISODIOS */

    .documentary-episodes{
        gap:62px;
    }

    .documentary-episode,
    .documentary-episode--reverse{

        width:100%;

        grid-template-columns:1fr;
        gap:28px;

    }

    /*
       En mobile todos los episodios siguen
       una única lectura vertical:
       video → texto.
    */

    .documentary-episode--reverse .documentary-episode-media,
    .documentary-episode--reverse .documentary-episode-content{
        order:initial;
    }

    .documentary-episode-media,
    .documentary-episode:not(.documentary-episode--reverse) .documentary-episode-media,
    .documentary-episode--reverse .documentary-episode-media{

        width:min(100%, 330px);
        max-width:330px;

        justify-self:center;

    }

    .documentary-episode-content,
    .documentary-episode:not(.documentary-episode--reverse) .documentary-episode-content,
    .documentary-episode--reverse .documentary-episode-content{

        width:100%;
        max-width:560px;

        justify-self:center;

    }

    .documentary-episode-content h3{
        margin:14px 0 17px;

        font-size:clamp(1.7rem, 7vw, 2.25rem);
        line-height:1.15;
    }

    .documentary-episode-content > p{
        margin-bottom:22px;

        font-size:.98rem;
        line-height:1.75;
    }

    .documentary-person{
        padding-top:18px;
    }

    .documentary-person strong{
        font-size:.92rem;
        line-height:1.4;
    }

    .documentary-person span{
        font-size:.8rem;
    }


    /* TUTORIAL */

    .documentary-tutorial{
        grid-template-columns:1fr;
        gap:30px;
    }

    .documentary-tutorial-content{
        width:100%;
        max-width:560px;
    }

    .documentary-tutorial-content h3{
        margin:14px 0 18px;

        font-size:clamp(1.9rem, 8vw, 2.5rem);
        line-height:1.1;
    }

    .documentary-tutorial-content > p{
        font-size:.98rem;
        line-height:1.7;
    }

    .documentary-warning{
        margin-top:24px;
        padding-top:17px;
        padding-left:17px;

        font-size:.87rem;
        line-height:1.65;
    }

    .documentary-tutorial-media{
        width:min(100%, 500px);
        max-width:500px;

        justify-self:center;

        border-radius:22px;
    }


    /* CIERRE */

    .documentary-closing{
        padding:75px 0;
    }

    .documentary-closing-content{
        max-width:560px;
    }

    .documentary-closing h2{
        margin:16px auto 22px;

        font-size:clamp(2rem, 8.5vw, 2.7rem);
        line-height:1.1;
    }

    .documentary-closing p{
        margin-bottom:28px;

        font-size:.98rem;
        line-height:1.7;
    }

}


/*--------------------------------------------------
    MOBILE PEQUEÑO
--------------------------------------------------*/

@media(max-width:480px){

    .documentary-hero{
        padding:48px 0 58px;
    }

    .documentary-hero h1{
        font-size:clamp(2.45rem, 13vw, 3.4rem);
    }

    .documentary-hero-lead{
        font-size:.96rem;
    }

    .documentary-opening{
        padding:56px 0 65px;
    }

    .documentary-chapter{
        padding:58px 0 68px;
    }

    .documentary-chapter-header{
        margin-bottom:42px;
    }

    .documentary-episodes{
        gap:56px;
    }

    .documentary-episode-media,
    .documentary-episode:not(.documentary-episode--reverse) .documentary-episode-media,
    .documentary-episode--reverse .documentary-episode-media{

        width:min(100%, 300px);
        max-width:300px;

    }

    .documentary-episode-content h3{
        font-size:1.75rem;
    }

    .documentary-video-frame--vertical{
        max-width:300px;
    }

    .documentary-closing{
        padding:65px 0;
    }

}