/* 

Para el Home

Las imágenes circulares de Investigación pueden salir del mismo archivo.

Si las hacés de:

800 × 800 px

después CSS las recorta perfecto.

Para el Hero

Si alguna vez querés una imagen horizontal grande:

1600 × 900 px

(relación 16:9)

Logos

PNG con fondo transparente.

Altura uniforme.

Por ejemplo:

400 px de alto

El ancho el que necesiten.

Miniaturas del mapa

Si algún día aparecen fotos al hacer clic en un sitio:

600 × 450 px

Mi recomendación para TODO ACACIO
Uso	Tamaño
Fotografías generales	1200 × 900 px
Hero	1600 × 900 px
Imágenes circulares	800 × 800 px
Logos	PNG transparente (≈400 px de alto)
Miniaturas mapa	600 × 450 px */


/*=========================================
    SCROLL SUAVE
=========================================*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Inter', sans-serif;

    background: var(--background);

    color: var(--text);

    line-height: 1.7;

}

img {

    max-width: 100%;

    display: block;

}

a {

    text-decoration: none;

    color: inherit;

}

.container {

    width: min(92%, var(--max-width));

    margin: auto;

}

h1,
h2,
h3 {

    font-family: 'DM Serif Display', serif;

    font-weight: 400;

    color: var(--primary);

}

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

.project-hero h1,
.page-hero h1,

/* .team-hero h1, */
.contact-section > .container > h1,
.contact-hero h1{
    font-size:clamp(2.6rem, 4vw, 3.6rem);
    line-height:1.08;
}
/*///////////////////////////////////////////
///////////NAVBAR //////////////////////////
/////////////////////////////////////////// */

.navbar {

    background: white;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);

}

.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 84px;

}

.logo img {

    height: 52px;

}

.menu {

    display: flex;

    gap: 38px;

    list-style: none;

}

.menu a {

    font-weight: 500;

    transition: .25s;

    position:relative;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;
}

.menu a:hover {

    color: var(--secondary);

}

.menu a:hover::after{

    width:100%;
}

.menu a.active{

    color:var(--primary);

    font-weight:600;
}

.menu a.active::after{

    width:100%;
}

.menu-highlight{

    color:var(--secondary) !important;

    font-weight:600;
}

.menu-highlight:hover{

    color:var(--primary) !important;
}

.menu-toggle{

    display:none;

    width:42px;

    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;
}

.menu-toggle span{

    display:block;

    width:28px;

    height:2px;

    margin:6px auto;

    background:var(--primary);

    transition:.3s;
}

.btn-nav {

    background: var(--secondary);

    padding: 14px 24px;

    border-radius: 50px;

    font-weight: 600;

    transition: .25s;

}

.btn-nav:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}

/*==================================================
    FRANJA INSTITUCIONAL
==================================================*/

.institution-strip{

    background:#ffffff;

    padding:55px 0;

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;
}

.institution-group{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-bottom:55px;
}

.institution-group:last-child{

    margin-bottom:0;
}

.institution-group:last-child{

    margin-bottom:0;
}

.institution-title{

    margin:0;

    color:#7b7b7b;

    font-size:.80rem;

    letter-spacing:.18rem;

    text-transform:uppercase;
}

.institution-logos {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    flex-wrap: wrap;

}


.institution-logos img {

    display: block;

    width: 100%;
    height: 75px;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: .65;

    transition:
        filter .35s ease,
        opacity .35s ease,
        transform .35s ease;

}

.institution-logos:hover img{

    filter:grayscale(100%);

    opacity:.55;
}

.institution-logos a {

    width: 180px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

}
.institution-logos img:hover{

    filter:none;

    opacity:1;

    transform:translateY(-3px);
}

/* Logos de las instituciones impulsoras */

.institution-group:first-child .institution-logos a {

    width: 150px;
    height: 65px;

}

.institution-group:first-child .institution-logos img {

    height: 65px;

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

.footer{

    background:var(--primary);

    color:#fff;

    padding:70px 0 30px;
}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:70px;
}

.footer h3{

    margin-bottom:20px;

    font-size:1.9rem;

    color:#fff;
}

.footer h4{

    margin-bottom:20px;

    color:#fff;
}

.footer p{

    color:rgba(255,255,255,.75);

    line-height:1.8;
}

.footer ul{

    list-style:none;

    padding:0;

    margin:0;
}

.footer li{

    margin-bottom:12px;
}

.footer a{

    color:rgba(255,255,255,.75);

    text-decoration:none;

    transition:.25s;
}

.footer a:hover{

    color:#fff;
}

.footer-bottom{

    margin-top:55px;

    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.10);

    text-align:center;

    color:rgba(255,255,255,.45);

    font-size:.9rem;
}
/* Botón copiar correo — footer */

.footer-copy-email {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    padding: 0;

    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .7);

    cursor: pointer;
    transition:
        color var(--transition),
        background var(--transition);
}

.footer-copy-email svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-copy-email:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .1);
}

.footer-copy-email:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.footer-copy-email.copied {
    color: var(--secondary);
}

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

.problem-section {

    background: #FFFFFF;

}

.problem-grid {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 80px;

    align-items: center;

    margin-top: 70px;

}

/*=========================================
    IMAGEN
=========================================*/

.problem-image img {

    width: 100%;

    display: block;

    border-radius: 24px;

    box-shadow: var(--shadow);

    aspect-ratio: 4/5;

    object-fit: cover;

}

/*=========================================
    TEXTO
=========================================*/

.problem-text .lead {

    font-size: 1.35rem;

    line-height: 1.7;

    color: var(--primary);

    margin-bottom: 30px;

}

.problem-text p {

    color: var(--text-light);

    line-height: 1.8;

}


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

.challenge-section {
    padding: 110px 0;
    background: #fff;
}

.challenge-header {
    max-width: 900px;
    margin: 0 auto 56px;
    text-align: center;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--secondary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .16rem;
    text-transform: uppercase;
}

.challenge-header h2 {
    max-width: 780px;
    margin: 0 auto 22px;
    color: var(--primary);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.15;
}

.challenge-header p {
    max-width: 820px;
    margin: 0 auto;
    color: #536164;
    font-size: 1.08rem;
    line-height: 1.8;
}

.challenge-image {
    margin: 0 0 54px;
}

.challenge-image img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
    border-radius: 26px;
}

.challenge-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    align-items: start;
}

.challenge-point {
    border-top: 1px solid rgba(22, 52, 59, .22);
    padding-top: 26px;
}

.challenge-point span {
    display: block;
    margin-bottom: 10px;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(40, 90, 70, .12);
    user-select: none;
}

.challenge-point h3 {
    margin-bottom: 14px;
    color: var(--primary);
    font-size: 1.35rem;
    margin-top: -8px;
}

.challenge-point p {
    color: #536164;
    line-height: 1.7;
}

/*=========================================
    TARJETAS
=========================================*/

.impact-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

    margin-top: 45px;

}

.impact-card {

    background: var(--background);

    border-radius: 18px;

    padding: 28px;

    border-top: 4px solid var(--secondary);

    transition: .3s;

    box-shadow: var(--shadow);

}

.impact-card:hover {

    transform: translateY(-6px);

}

.impact-card h3 {

    margin-bottom: 14px;

    color: var(--primary);

    font-size: 1.2rem;

}

.impact-card p {

    font-size: .95rem;

    line-height: 1.7;

}

/*=========================================
    TRANSICIÓN
=========================================*/

.section-next {

    text-align: center;

    max-width: 700px;

    margin: 90px auto 0;

}

.section-next p {

    font-family: 'DM Serif Display', serif;

    font-size: 1.6rem;

    color: var(--primary);

    margin-bottom: 12px;

}

.section-next span {

    color: var(--secondary);

    font-weight: 600;

    letter-spacing: .02em;

}


/*====================================
    SECTION GENERAL
====================================*/

section {

    padding: 120px 0;

}

.section-header {

    max-width: 720px;

    margin: 0 auto 70px auto;

    text-align: center;

}

.section-label {

    display: inline-block;

    text-transform: uppercase;

    letter-spacing: .22rem;

    color: var(--secondary);

    font-size: .8rem;

    font-weight: 700;

    margin-bottom: 18px;

}

.section-header h2 {

    font-size: 3rem;

    line-height: 1.15;

    margin-bottom: 25px;

}

.section-header p {

    font-size: 1.15rem;

    color: var(--text-light);

}
/*==================================================
    ACACIA NEGRA / FICHA DE ESPECIE
==================================================*/

.species-section{
    padding:80px 0 80px;
    background:#fff;
}

.species-layout{
    display:grid;
    grid-template-columns:minmax(390px, 470px) minmax(0, 1fr);
    gap:70px;
    align-items:start;
}


/*==================================================
    FICHA VISUAL
==================================================*/

.species-visual{
    position:relative;
    width:100%;
    max-width:470px;
    min-height:650px;
    margin:0;
    padding:18px 34px 120px;
}


/*==================================================
    FOTO PRINCIPAL
==================================================*/

.species-main-image{
    position:relative;
    width:100%;
    aspect-ratio:4 / 5;
    overflow:hidden;

    background:#e8ece8;
    border-radius:24px;

    box-shadow:0 18px 44px rgba(22,52,59,.13);
}

.species-main-image::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        transparent 64%,
        rgba(13,40,43,.42) 100%
    );

    pointer-events:none;
}

.species-main-image > img{
    width:100%;
    height:100%;
    display:block;

    object-fit:cover;
    object-position:center 38%;

    transition:transform .7s ease;
}

.species-visual:hover .species-main-image > img{
    transform:scale(1.02);
}


/*==================================================
    CRÉDITO DE LA FOTO
==================================================*/

.species-photo-credit{
    position:absolute;
    left:14px;
    bottom:12px;
    z-index:3;

    max-width:calc(100% - 28px);
    margin:0;
    padding:5px 8px;

    color:rgba(255,255,255,.94);
    background:rgba(13,40,43,.72);
    border-radius:5px;

    font-size:.55rem;
    line-height:1.35;
}

.species-photo-credit a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}

.species-photo-credit a:hover{
    color:var(--secondary);
}


/*==================================================
    DETALLES DIAGNÓSTICOS
==================================================*/

.species-detail{
    position:absolute;
    z-index:6;

    width:124px;

    overflow:hidden;

    background:#fff;
    border:4px solid #fff;
    border-radius:16px;

    box-shadow:
        0 16px 34px rgba(13,40,43,.20),
        0 0 0 1px rgba(22,52,59,.07);
}

.species-detail img{
    width:100%;
    aspect-ratio:1 / 1;
    display:block;
    object-fit:cover;
}


/* Hojas: mitad superior izquierda */

.species-detail--leaves{
    top:132px;
    left:-8px;
}

.species-detail--leaves img{
    object-position:center;
}


/* Espinas: esquina superior derecha */

.species-detail--thorns{
    top:-8px;
    right:-8px;
}

.species-detail--thorns img{
    object-position:54% 50%;
}


/* Vainas: mitad inferior derecha */

.species-detail--pods{
    right:-8px;
    bottom:112px;
}

.species-detail--pods img{
    object-position:50% 46%;
}


/*==================================================
    ETIQUETAS DE LOS DETALLES
==================================================*/

.species-detail-label{
    display:flex;
    align-items:center;
    gap:7px;

    padding:8px 9px;

    color:var(--primary);
    background:#fff;

    font-size:.68rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.045rem;
    text-transform:uppercase;
}

.species-detail-label small{
    color:var(--secondary);
    font-size:.61rem;
    font-weight:800;
}


/*==================================================
    NOMBRE CIENTÍFICO
==================================================*/

.species-caption{
    position:absolute;
    left:88px;
    bottom:20px;
    z-index:5;

    width:310px;
    max-width:calc(100% - 90px);
    padding:20px 23px;

    display:flex;
    flex-direction:column;
    gap:3px;

    background:rgba(255,255,255,.97);
    backdrop-filter:blur(7px);

    border-left:4px solid var(--secondary);
    border-radius:4px 15px 15px 4px;

    box-shadow:0 15px 36px rgba(22,52,59,.15);
}

.species-caption-label{
    margin-bottom:4px;

    color:var(--secondary);

    font-size:.65rem;
    font-weight:800;
    letter-spacing:.13rem;
    text-transform:uppercase;
}

.species-caption strong{
    color:var(--primary);

    font-family:'DM Serif Display', serif;
    font-size:1.35rem;
    font-weight:400;
    line-height:1.2;
}

.species-caption > span:last-child{
    color:#687477;
    font-size:.84rem;
}


/*==================================================
    CONTENIDO
==================================================*/

.species-content{
    width:100%;
    max-width:650px;
    padding-top:0;
}

.species-content h2{
    margin:10px 0 18px;

    color:var(--primary);

    font-size:clamp(2.35rem,4vw,3.55rem);
    line-height:1.08;
}

.species-content p{
    margin-bottom:17px;

    color:#536164;

    font-size:1.01rem;
    line-height:1.8;
}

.species-content .species-lead{
    margin-bottom:21px;

    color:var(--primary);

    font-size:1.22rem;
    line-height:1.62;
}


/*==================================================
    FICHA DE DATOS
==================================================*/

.species-facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    margin:24px 0 0;

    border-top:1px solid rgba(22,52,59,.16);
    border-bottom:1px solid rgba(22,52,59,.16);
}

.species-fact{
    min-height:86px;
    padding:18px 20px 17px 0;
}

.species-fact:nth-child(even){
    padding-left:25px;
    border-left:1px solid rgba(22,52,59,.16);
}

.species-fact:nth-child(-n + 2){
    border-bottom:1px solid rgba(22,52,59,.16);
}

.species-fact dt{
    margin-bottom:7px;

    color:var(--secondary);

    font-size:.68rem;
    font-weight:800;
    letter-spacing:.11rem;
    text-transform:uppercase;
}

.species-fact dd{
    margin:0;

    color:var(--primary);

    font-size:.97rem;
    font-weight:600;
    line-height:1.48;
}


/*==================================================
    RASGOS DE IDENTIFICACIÓN
==================================================*/

.species-traits{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin-top:42px;

    border-top:1px solid rgba(22,52,59,.17);
    border-bottom:1px solid rgba(22,52,59,.17);
}

.species-trait{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:18px;

    padding:28px 31px;
}

.species-trait + .species-trait{
    border-left:1px solid rgba(22,52,59,.17);
}

.species-trait-number{
    color:rgba(40,90,70,.27);

    font-family:'DM Serif Display', serif;
    font-size:1.16rem;
    line-height:1.2;
}

.species-trait h3{
    margin-bottom:7px;

    color:var(--primary);

    font-family:'Inter', sans-serif;
    font-size:.98rem;
    font-weight:700;
    line-height:1.35;
}

.species-trait p{
    margin:0;

    color:#687477;

    font-size:.88rem;
    line-height:1.62;
}


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

@media(max-width:1050px){

    .species-layout{
        grid-template-columns:minmax(350px,410px) minmax(0,1fr);
        gap:55px;
    }

    .species-visual{
        max-width:410px;
        min-height:590px;
        padding-right:28px;
    }

    .species-detail{
        width:108px;
    }

    .species-detail--leaves{
        left:-4px;
        top:118px;
    }

    .species-detail--thorns{
        right:-4px;
    }

    .species-detail--pods{
        right:-4px;
        bottom:122px;
    }

    .species-caption{
        left:55px;
        width:285px;
    }
}


@media(max-width:820px){

    .species-section{
        padding:80px 0;
    }

    .species-layout{
        grid-template-columns:1fr;
        gap:55px;
    }

    .species-visual{
        width:min(100%,450px);
        max-width:450px;
        min-height:630px;
        margin:0 auto;
    }

    .species-content{
        max-width:none;
    }

    .species-traits{
        grid-template-columns:1fr;
        margin-top:55px;
    }

    .species-trait{
        padding:24px 0;
    }

    .species-trait + .species-trait{
        border-left:0;
        border-top:1px solid rgba(22,52,59,.17);
    }
}


@media(max-width:520px){

    .species-section{
        padding:68px 0;
    }

    .species-visual{
        width:100%;
        min-height:auto;
        padding:12px 8px 112px;
    }

    .species-main-image{
        border-radius:20px;
    }

    .species-detail{
        width:94px;
        border-width:3px;
        border-radius:13px;
    }

    .species-detail--leaves{
        left:0;
        top:112px;
    }

    .species-detail--thorns{
        top:4px;
        right:0;
    }

    .species-detail--pods{
        right:0;
        bottom:118px;
    }

    .species-detail-label{
        padding:6px 7px;
        gap:5px;
        font-size:.59rem;
    }

    .species-detail-label small{
        font-size:.55rem;
    }

    .species-caption{
        left:20px;
        bottom:14px;

        width:calc(100% - 40px);
        max-width:none;

        padding:18px 20px;
    }

    .species-caption strong{
        font-size:1.24rem;
    }

    .species-content h2{
        font-size:2.35rem;
    }

    .species-content .species-lead{
        font-size:1.12rem;
    }

    .species-facts{
        grid-template-columns:1fr;
    }

    .species-fact{
        min-height:auto;
        padding:18px 0;
        border-bottom:1px solid rgba(22,52,59,.16);
    }

    .species-fact:nth-child(even){
        padding-left:0;
        border-left:0;
    }

    .species-fact:nth-child(-n + 2){
        border-bottom:1px solid rgba(22,52,59,.16);
    }

    .species-fact:last-child{
        border-bottom:0;
    }
}



/*==================================================
    CÓMO ABORDAMOS ESTE DESAFÍO
==================================================*/

.approach-section{
    padding:80px 0 85px;
    background:var(--background);
}

.approach-header{
    max-width:850px;
    margin:0 auto 48px;
    text-align:center;
}

.approach-header h2{
    margin:12px 0 18px;
    color:var(--primary);
    font-size:clamp(2.1rem, 3.4vw, 3.1rem);
    line-height:1.12;
}

.approach-header p{
    max-width:780px;
    margin:0 auto;
    color:#536164;
    font-size:1.02rem;
    line-height:1.7;
}


/*==================================================
    CUATRO COMPONENTES
==================================================*/

.approach-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:28px;
    align-items:stretch;
}

.approach-card{
    position:relative;
    padding:28px 26px 30px;
    background:#fff;
    border-top:3px solid var(--secondary);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(22, 52, 59, .07);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.approach-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 36px rgba(22, 52, 59, .11);
}

.approach-number{
    display:block;
    margin-bottom:15px;
    color:rgba(40, 90, 70, .17);
    font-size:2.35rem;
    font-weight:800;
    line-height:1;
}

.approach-card h3{
    min-height:2.7em;
    margin-bottom:13px;
    color:var(--primary);
    font-size:1.18rem;
    line-height:1.35;
}

.approach-card p{
    margin:0;
    color:#536164;
    font-size:.93rem;
    line-height:1.65;
}


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

.participate-section {

    background: #FFFFFF;

}

/*=========================================
    GRID
=========================================*/

.participation-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

    margin-top: 70px;

}

/*=========================================
    TARJETAS
=========================================*/

.participation-card {

    padding: 35px;

    background: #fff;

    /* border-bottom:3px solid var(--secondary); */

    transition: .3s;

}

.participation-card::before {

    content: "";

    display: block;

    width: 55px;

    height: 3px;

    background: var(--secondary);

    margin-bottom: 22px;

}

.participation-card:hover {

    transform: translateY(-6px);

}

.participation-card h3 {

    color: var(--primary);

    margin-bottom: 18px;

    font-size: 1.45rem;

    line-height: 1.3;

}

.participation-card p {

    color: var(--text-light);

    line-height: 1.8;

}

/*=========================================
    CTA
=========================================*/

.participation-cta {

    margin-top: 70px;

    text-align: center;

}

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--primary);

    font-size: 1.2rem;

    font-weight: 600;

    transition: .3s;

}

.text-link span {

    transition: .3s;

    color: var(--secondary);

}

.text-link:hover {

    color: var(--secondary);

}

.text-link:hover span {

    transform: translateX(8px);

}

.btn-primary {

    display: inline-block;

    padding: 16px 38px;

    background: var(--primary);

    color: #fff;

    text-decoration: none;

    border-radius: 50px;

    transition: .3s;

    font-weight: 600;

}

.btn-primary:hover {

    background: var(--secondary);

    transform: translateY(-3px);

}


/*=========================================
    ENLACES DE RECORRIDO
=========================================*/

.scroll-link {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    text-decoration: none;

    color: var(--secondary);

    font-weight: 600;

    transition: .3s;

}

.scroll-link:hover {

    color: var(--primary);

}

.scroll-link span {

    font-size: 1.4rem;

    transition: .3s;

}

.scroll-link:hover span {

    transform: translateY(6px);

}

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

.contact-section {
    background: var(--background);
}

.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
    margin-top: 70px;
}

.contact-info {
    display: grid;
    gap: 24px;
}

.contact-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    border-top: 4px solid var(--secondary);
    box-shadow: var(--shadow);
}

.contact-label {
    display: block;
    margin-bottom: 10px;
    color: var(--secondary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16rem;
    text-transform: uppercase;
}

.contact-card a {
    color: var(--primary);
    font-weight: 600;
}

.contact-card p {
    color: var(--text-light);
    line-height: 1.8;
}

.contact-form {
    background: var(--white);
    padding: 42px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(36, 78, 87, .18);
    border-radius: 12px;
    font: inherit;
    color: var(--text);
    background: #fff;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(212, 166, 70, .18);
}

/*==================================================
    CONTACTO DIRECTO
==================================================*/

.contact-direct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: start;

    width: 100%;
    padding: 48px;

    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.contact-direct-label {
    margin-bottom: 12px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--secondary);
}

.contact-direct-email {
    margin-bottom: 28px;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-direct-email:hover {
    text-decoration: underline;
}

.contact-copy {
    border: 0;
    cursor: pointer;
}

.contact-copy-status {
    min-height: 1.5em;
    margin-top: 14px;
    font-size: .9rem;
    color: var(--text-light);
}

@media (max-width: 768px) {

    .contact-direct {
        padding: 32px 24px;
    }

}
.contact-social {
    width: 100%;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(36, 78, 87, .12);
}

.contact-instagram {
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.contact-instagram:hover {
    text-decoration: underline;
}
/*==================================================
    TÍTULO CONTACTO
==================================================*/

.contact-section .section-header h2{
    font-size:clamp(2.6rem, 4vw, 3.6rem);
    line-height:1.08;
}

.contact-section .section-header{
    max-width:820px;
    margin:0 auto;
    text-align:center;
}
/*==================================================
    HERO
==================================================*/

.hero{
    position:relative;
    min-height:calc(100vh - 84px);
    display:flex;
    align-items:center;
    padding:90px 0;
    background:url("../img/hero.png") center center/cover no-repeat;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(247,246,242,.18) 0%,
        rgba(247,246,242,.06) 38%,
        rgba(247,246,242,0) 100%
    );
    pointer-events:none;
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero-card{
    max-width:440px;
    padding:38px 42px;
    margin-left:-20px;
    background:rgba(247,246,242,.86);
    backdrop-filter:blur(7px);
    border-radius:24px;
    box-shadow:0 18px 45px rgba(22,52,59,.14);
}

.hero-kicker{
    display:inline-block;
    margin-bottom:18px;
    color:var(--secondary);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.18rem;
    text-transform:uppercase;
}

.hero h1{
    margin-bottom:22px;
    color:var(--primary);
    font-size:clamp(2.1rem, 3.4vw, 3.35rem);
    line-height:1.08;
}

.hero p{
    margin-bottom:30px;
    color:#536164;
    font-size:1rem;
    line-height:1.75;
}
/*==================================================
    PAGE HERO
==================================================*/

.page-hero {

    padding: 140px 0 100px;

    background: var(--background);

    text-align: center;

}

.page-hero h1 {

    max-width: 700px;

    margin: 20px auto;

}

.page-hero p {

    max-width: 700px;

    margin: auto;

    color: var(--text-light);

}


/*==================================================
    INTRO
==================================================*/

.map-intro {

    padding: 120px 0;
    background-color: #FFFFFF;

}

.intro-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 70px;

    align-items: center;

}

.intro-photo img {

    width: 100%;

    border-radius: 24px;

    display: block;

    box-shadow: var(--shadow);

}


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

.map-section {

    background: #F8F6F2;

}

#map {

    width: 100%;

    height: 650px;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow);

    margin-top: 60px;

}


/*==================================================
    SITIOS
==================================================*/

.sites-section {

    padding: 120px 0;
    background-color: #FFFFFF;

}

.sites-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    margin-top: 70px;

}

.site-card {

    background: white;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: .3s;

}

.site-card:hover {

    transform: translateY(-8px);

}

.site-card img {

    width: 100%;

    height: 230px;

    object-fit: cover;

}

.site-content {

    padding: 30px;

}

.site-content h3 {

    margin-bottom: 15px;

}

.site-content p {

    color: var(--text-light);

    margin-bottom: 25px;

}

.site-content a {

    text-decoration: none;

    color: var(--secondary);

    font-weight: 600;

}


/*==================================================
    CTA
==================================================*/

.participate-map {

    background: var(--primary);

    color: white;

    padding: 120px 0;

}

.participate-box {

    max-width: 800px;

    margin: auto;

    text-align: center;

}

.participate-box h2 {

    color: white;

    margin-bottom: 25px;

}

.participate-box p {

    color: rgba(255, 255, 255, .8);

    margin-bottom: 40px;

}


/*==================================================
    ¿QUE ES ACACIO?
==================================================*/

.about-project {

    padding: 120px 0;

}

.about-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 80px;

    align-items: center;

}

.about-image img {

    width: 100%;

    border-radius: 24px;

    display: block;

    box-shadow: var(--shadow);

}

.about-grid h2 {

    margin: 15px 0 30px;

}

.about-grid p {

    margin-bottom: 22px;

    color: var(--text-light);

}


/*==================================================
    COMO TRABAJAMOS
==================================================*/

.workflow-section {

    background: #F8F6F2;

}

.workflow {

    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 25px;

    margin-top: 70px;

    flex-wrap: wrap;

}

.step {

    flex: 1;

    min-width: 220px;

    max-width: 260px;

    background: white;

    border-radius: 20px;

    padding: 35px;

    text-align: center;

    box-shadow: var(--shadow);

    transition: .3s;

}

.step:hover {

    transform: translateY(-8px);

}

.step h3 {

    margin-bottom: 18px;

}

.step p {

    color: var(--text-light);

}

.arrow {

    display: flex;

    align-items: center;

    font-size: 2rem;

    color: var(--secondary);

    font-weight: bold;

}


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

.project-goals{
    padding:110px 0;
    background:#fff;
}

.goals-header{
    max-width:860px;
    margin:0 auto 64px;
    text-align:center;
}

.goals-header h2{
    margin:18px 0 22px;
    color:var(--primary);
    font-size:clamp(2rem,3.4vw,3rem);
    line-height:1.15;
}

.goals-header p{
    max-width:760px;
    margin:0 auto;
    color:#536164;
    font-size:1.08rem;
    line-height:1.8;
}

.goals-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:34px;
}

.goal-item{
    padding-top:26px;
    border-top:1px solid rgba(22,52,59,.18);
}

.goal-item span{
    display:block;
    margin-bottom:10px;
    font-size:3.4rem;
    font-weight:800;
    line-height:1;
    color:rgba(40,90,70,.13);
}

.goal-item h3{
    margin:-4px 0 14px;
    color:var(--primary);
    font-size:1.35rem;
}

.goal-item p{
    color:#536164;
    line-height:1.7;
}


/*==================================================
    INSTITUCIONES
==================================================*/

.institutions-section {

    background: #F8F6F2;

}

.logos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 60px;

    align-items: center;

    justify-items: center;

    margin-top: 70px;

}

.logos-grid img {

    max-width: 170px;

    width: 100%;

    filter: grayscale(100%);

    opacity: .75;

    transition: .3s;

}

.logos-grid img:hover {

    filter: none;

    opacity: 1;

}


/*==================================================
    FINANCIAMIENTO
==================================================*/

.funding-section {

    padding: 120px 0;

}

.funding-box {

    max-width: 900px;

    margin: auto;

    background: var(--primary);

    color: white;

    border-radius: 28px;

    padding: 70px;

    text-align: center;

}

.funding-box h2 {

    color: white;

    margin-bottom: 25px;

}

.funding-box p {

    color: rgba(255, 255, 255, .85);

}


/*==================================================
    PUBLICACIONES
==================================================*/

.publications-section {

    background: #F8F6F2;

}

.publications-section .section-header {

    margin-bottom: 40px;

}


/*==================================================
    BANDA DE INDICADORES
==================================================*/
.project-stats {

    background: white;

    padding: 60px 0;

    border-top: 1px solid #ececec;

    border-bottom: 1px solid #ececec;

}

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    text-align: center;

}

.number {

    display: block;

    font-size: 3rem;

    font-family: 'DM Serif Display', serif;

    color: var(--primary);

}

.label {

    display: block;

    margin-top: 10px;

    color: var(--text-light);

    font-size: .95rem;

}

/*==================================================
    COLABORACIÓN HOME
==================================================*/

.home-collaboration-section{
    padding:120px 0;
    background:#fff;
}

.home-collaboration-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.home-collaboration-image{
    margin:0;
}

.home-collaboration-image img{
    width:100%;
    height:360px;
    object-fit:cover;
    display:block;
    border-radius:28px;
}

.home-collaboration-content{
    max-width:560px;
}

.home-collaboration-content h2{
    margin:18px 0 24px;
    color:var(--primary);
    font-size:clamp(2rem, 3.4vw, 3rem);
    line-height:1.15;
}

.home-collaboration-intro{
    margin-bottom:34px;
    color:#536164;
    font-size:1.06rem;
    line-height:1.8;
}

.home-collaboration-items{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.home-collaboration-item{
    padding-left:22px;
    border-left:3px solid var(--secondary);
}

.home-collaboration-item h3{
    margin-bottom:8px;
    color:var(--primary);
    font-size:1.22rem;
}

.home-collaboration-item p{
    color:#536164;
    line-height:1.7;
}

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

.action-section{
    padding:120px 0;
    background:var(--background);
}

.action-header{
    max-width:880px;
    margin:0 auto 56px;
    text-align:center;
}

.action-header h2{
    max-width:760px;
    margin:0 auto 22px;
    color:var(--primary);
    font-size:clamp(2rem, 3.6vw, 3.1rem);
    line-height:1.15;
}

.action-header p{
    max-width:760px;
    margin:0 auto;
    color:#536164;
    font-size:1.08rem;
    line-height:1.8;
}

.action-image{
    margin:0 0 58px;
}

.action-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
    border-radius:26px;
}

.action-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:34px;
}

.action-item{
    border-top:1px solid rgba(22,52,59,.18);
    padding-top:24px;
}

.action-item span{
    display:block;
    margin-bottom:14px;
    font-size:3.2rem;
    font-weight:800;
    line-height:1;
    color:rgba(40,90,70,.12);
}

.action-item h3{
    margin:-4px 0 12px;
    color:var(--primary);
    font-size:1.18rem;
    line-height:1.25;
}

.action-item p{
    color:#536164;
    line-height:1.7;
}



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

.join-section{
    padding:120px 0;
    background:#fff;
}

.join-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:center;
}

.join-content{
    max-width:560px;
}

.join-content h2{
    margin:18px 0 24px;
    color:var(--primary);
    font-size:clamp(2rem, 3.6vw, 3.2rem);
    line-height:1.12;
}

.join-content p{
    margin-bottom:18px;
    color:#536164;
    font-size:1.08rem;
    line-height:1.8;
}

.join-actions{
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
    margin-top:36px;
}

.btn-text{
    color:var(--primary);
    font-weight:700;
    border-bottom:1px solid rgba(22,52,59,.35);
    padding-bottom:4px;
    transition:.25s;
}

.btn-text:hover{
    color:var(--secondary);
    border-color:var(--secondary);
}

.join-image{
    margin:0;
}

.join-image img{
    width:100%;
    height:460px;
    object-fit:cover;
    display:block;
    border-radius:26px;
}

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

.knowledge-section{
    padding:120px 0;
    background:var(--background);
}

.knowledge-header{
    max-width:940px;
    margin:0 auto 70px;
    text-align:center;
}

.knowledge-header h2{
    max-width:820px;
    margin:0 auto 22px;
    color:var(--primary);
    font-size:clamp(2rem, 3.6vw, 3.1rem);
    line-height:1.15;
}

.knowledge-header p{
    max-width:820px;
    margin:0 auto;
    color:#536164;
    font-size:1.08rem;
    line-height:1.8;
}

.knowledge-grid{
    display:grid;
    grid-template-columns:1fr 320px 1fr;
    grid-template-areas:
        "questions center decisions"
        ". evidence .";
    gap:46px 64px;
    align-items:center;
    margin-top:72px;
}

.knowledge-questions{
    grid-area:questions;
}

.knowledge-center{
    grid-area:center;
}

.knowledge-decisions{
    grid-area:decisions;
}

.knowledge-evidence{
    grid-area:evidence;
    max-width:620px;
    justify-self:center;
    text-align:center;
    margin-top:-15px;
}

.knowledge-block{
    position:relative;
}


.knowledge-block h3{

    margin-bottom:16px;

    color:var(--primary);

    font-size:1.65rem;
}

.knowledge-block p{
    color:#536164;
    line-height:1.75;
}

.knowledge-center{
    grid-area:center;

    width:320px;
    height:320px;

    border-radius:50%;
    border:1px solid rgba(184,138,68,.42);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:42px;

    text-align:center;
    background:#fff;

    transform:translateY(-20px);
}

.knowledge-center p{
    margin:0;
    color:var(--primary);
    font-family:'DM Serif Display', serif;
    font-size:2rem;
    line-height:1.05;
}

.knowledge-center strong{
    display:block;
    font-weight:400;
}

.knowledge-center span{
    display:block;
    margin-top:8px;
    color:var(--secondary);
    font-family:inherit;
    font-size:1.35rem;
    font-weight:400;
}


/*==================================================
    PROYECTO / HERO
==================================================*/

.project-hero{
    padding:120px 0 90px;
    background:var(--background);
}

.project-hero-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:80px;
    align-items:center;
}

.project-hero-text{
    max-width:560px;
}

.project-hero-text h1{
    margin:18px 0 28px;
    color:var(--primary);
    font-size:clamp(2.7rem, 5vw, 4.4rem);
    line-height:1.05;
}

.project-hero-text p{
    margin-bottom:18px;
    color:#536164;
    font-size:1.12rem;
    line-height:1.8;
}

.project-hero-image{
    margin:0;
}

.project-hero-image img{
    width:100%;
    height:520px;
    object-fit:cover;
    display:block;
    border-radius:28px;
}


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

.project-problem{
    padding:120px 0;
    background:#fff;
}

.project-problem-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:90px;
    align-items:center;
}

.project-problem-image{
    margin:0;
}

.project-problem-image img{
    width:100%;
    height:560px;
    object-fit:cover;
    display:block;
    border-radius:28px;
}

.project-problem-content{
    max-width:560px;
}

.project-problem-content h2{
    margin:18px 0 28px;
    color:var(--primary);
    font-size:clamp(2rem, 3.4vw, 3rem);
    line-height:1.15;
}

.project-problem-content p{
    margin-bottom:18px;
    color:#536164;
    font-size:1.06rem;
    line-height:1.8;
}

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

.project-approach{

    padding:120px 0;

    background:var(--background);
}

.project-approach-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;
}

.project-approach-image{

    margin:0;
}

.project-approach-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:28px;

    display:block;
}

.project-approach-content{

    max-width:560px;
}

.project-approach-content h2{

    margin:18px 0 26px;

    color:var(--primary);

    font-size:clamp(2rem,3vw,3rem);

    line-height:1.15;
}

.project-approach-content>p{

    color:#536164;

    line-height:1.8;

    margin-bottom:40px;
}

.approach-items{

    display:flex;

    flex-direction:column;

    gap:28px;
}

.approach-item{

    padding-left:24px;

    border-left:3px solid var(--secondary);
}

.approach-item h3{

    margin-bottom:8px;

    color:var(--primary);

    font-size:1.25rem;
}

.approach-item p{

    color:#536164;

    line-height:1.7;
}

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

.project-journey{

    padding:120px 0;

    background:#fff;
}

.journey-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;
}

.journey-header h2{

    margin:18px 0 22px;

    color:var(--primary);

    font-size:clamp(2rem,3vw,3rem);

    line-height:1.15;
}

.journey-header p{

    color:#536164;

    line-height:1.8;
}

.journey-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;
}

.journey-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:20px;

    margin-bottom:22px;
}

.journey-card h3{

    margin-bottom:12px;

    color:var(--primary);

    font-size:1.35rem;
}

.journey-card p{

    color:#536164;

    line-height:1.7;
}

/*==================================================
    CIERRE PROYECTO
==================================================*/

.project-future{

    padding:120px 0;

    background:var(--background);
}

.project-future-content{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;
}

.project-future-content h2{

    margin:18px 0 28px;

    color:var(--primary);

    font-size:clamp(2rem,3vw,3rem);

    line-height:1.15;
}

.project-future-content p{

    margin-bottom:18px;

    color:#536164;

    font-size:1.08rem;

    line-height:1.85;
}

.project-future-image{

    margin:0;
}

.project-future-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

    border-radius:28px;
}

/*==================================================
    VOCES DEL TERRITORIO
==================================================*/
/* 
.voices-section{
    padding:100px 0 120px;
    background:#fff;
}

.voices-header{
    max-width:760px;
    margin:0 0 56px;
    text-align:left;
}

.voices-header h2{
    margin:16px 0 20px;
    color:var(--primary);
    font-size:clamp(2rem, 3vw, 2.8rem);
    line-height:1.15;
}

.voices-header p{
    max-width:680px;
    color:#536164;
    line-height:1.8;
}

.voices-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
}
.voice-media{
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:24px;
    background:#000;
}

.voice-media video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:#000;
} */

/*==================================================
    DOCUMENTAL / PÁGINA
==================================================*/

.documentary-page{
    background:#fff;
}


/*==================================================
    HERO DOCUMENTAL
==================================================*/

.documentary-hero{
    padding:125px 0 110px;
    background:var(--background);
}

.documentary-hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(280px, .65fr);
    gap:110px;
    align-items:end;
}

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

.documentary-hero h1{
    max-width:760px;
    margin:18px 0 28px;
    color:var(--primary);
    font-size:clamp(3rem, 5.8vw, 5.6rem);
    line-height:.98;
}

.documentary-hero-lead{
    max-width:720px;
    margin-bottom:35px;
    color:#536164;
    font-size:1.16rem;
    line-height:1.85;
}

.documentary-start-link{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:var(--primary);
    font-weight:700;
    transition:.25s;
}

.documentary-start-link span{
    color:var(--secondary);
    font-size:1.25rem;
    transition:.25s;
}

.documentary-start-link:hover{
    color:var(--secondary);
}

.documentary-start-link:hover span{
    transform:translateY(5px);
}


/*==================================================
    ÍNDICE DEL DOCUMENTAL
==================================================*/

.documentary-hero-note{
    padding:30px 0 4px;
    border-top:1px solid rgba(22, 52, 59, .2);
}

.documentary-hero-note > span{
    display:block;
    margin-bottom:18px;

    color:var(--secondary);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.14rem;
    text-transform:uppercase;
}

.documentary-hero-note ol{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:documentary-index;
}

.documentary-hero-note li{
    position:relative;
    padding:12px 0 12px 38px;
    color:var(--primary);
    line-height:1.45;
    counter-increment:documentary-index;
}

.documentary-hero-note li::before{
    content:"0" counter(documentary-index);
    position:absolute;
    left:0;
    top:13px;

    color:rgba(40, 90, 70, .36);
    font-size:.76rem;
    font-weight:800;
}


/*==================================================
    APERTURA DESTACADA
==================================================*/

.documentary-opening{
    padding:110px 0 125px;
    background:#fff;
}

.documentary-opening-header{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:80px;
    align-items:end;
    margin-bottom:48px;
}

.documentary-opening-header h2{
    max-width:690px;
    margin-top:12px;
    color:var(--primary);
    font-size:clamp(2.2rem, 4vw, 3.6rem);
    line-height:1.08;
}

.documentary-opening-header > p{
    max-width:440px;
    justify-self:end;
    color:#536164;
    line-height:1.8;
}

.documentary-episode-label{
    display:block;
    color:var(--secondary);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.14rem;
    text-transform:uppercase;
}

.documentary-featured-video{
    margin:0;
}

.documentary-video-frame{
    overflow:hidden;
    background:#071416;
    border-radius:26px;
}

.documentary-video-frame video,
.documentary-episode-media video,
.documentary-tutorial-media video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:#071416;
}

.documentary-video-frame--square{
    width:min(100%, 720px);
    aspect-ratio:1 / 1;
    margin:0 auto;
}
.documentary-featured-video figcaption{
    padding-top:15px;
    color:#7a8486;
    font-size:.84rem;
}
.documentary-video-frame--vertical{
    width:100%;
    max-width:420px;
    margin:0 auto;

    aspect-ratio:9 / 16;

    overflow:hidden;
    border-radius:var(--radius);

    background:#111;
}

.documentary-video-frame--vertical video{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
}



/*==================================================
    CAPÍTULOS
==================================================*/

.documentary-chapter{
    padding:120px 0 135px;
    background:var(--background);
}

.documentary-chapter--alternate{
    background:#fff;
}

.documentary-chapter--final{
    background:#e9eeea;
}

.documentary-chapter-header{
    display:grid;
    grid-template-columns:180px minmax(0, 760px);
    gap:70px;
    align-items:start;

    margin-bottom:90px;
    padding-top:28px;
    border-top:1px solid rgba(22, 52, 59, .2);
}

.documentary-chapter-number{
    color:var(--secondary);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.14rem;
    text-transform:uppercase;
}

.documentary-chapter-header h2{
    margin-bottom:20px;
    color:var(--primary);
    font-size:clamp(2.3rem, 4vw, 3.5rem);
    line-height:1.08;
}

.documentary-chapter-header p{
    max-width:690px;
    color:#536164;
    font-size:1.05rem;
    line-height:1.82;
}

/*==================================================
    EPISODIOS DOCUMENTAL
==================================================*/

.documentary-episodes{
    display:flex;
    flex-direction:column;
    gap:110px;
}


/* Cada episodio queda centrado dentro del container */

.documentary-episode{
    width:min(100%, 930px);
    margin:0 auto;

    display:grid;
    grid-template-columns:360px minmax(0, 470px);
    gap:80px;

    align-items:center;
    justify-content:center;
}


/* En los episodios invertidos, cambia el orden,
   no la posición general de toda la grilla */

.documentary-episode--reverse{
    grid-template-columns:minmax(0, 470px) 360px;
}

.documentary-episode--reverse .documentary-episode-content{
    order:1;
}

.documentary-episode--reverse .documentary-episode-media{
    order:2;
}


/*==================================================
    VIDEO VERTICAL 9:16
==================================================*/

.documentary-episode-media{
    width:100%;
    max-width:360px;
    aspect-ratio:9 / 16;

    overflow:hidden;

    background:#071416;
    border-radius:22px;

    box-shadow:0 18px 42px rgba(22,52,59,.10);
}

.documentary-episode-media video{
    width:100%;
    height:100%;

    display:block;
    object-fit:contain;

    background:#071416;
}


/* Alineación del video en cada variante */

.documentary-episode:not(.documentary-episode--reverse)
.documentary-episode-media{
    justify-self:end;
}

.documentary-episode--reverse
.documentary-episode-media{
    justify-self:start;
}


/*==================================================
    TEXTO DEL EPISODIO
==================================================*/

.documentary-episode-content{
    width:100%;
    max-width:470px;
}

.documentary-episode:not(.documentary-episode--reverse)
.documentary-episode-content{
    justify-self:start;
}

.documentary-episode--reverse
.documentary-episode-content{
    justify-self:end;
}

.documentary-episode-content h3{
    margin:15px 0 20px;

    color:var(--primary);

    font-size:clamp(1.8rem, 3vw, 2.65rem);
    line-height:1.15;
}

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

    color:#536164;

    font-size:1.02rem;
    line-height:1.82;
}
/*==================================================
    PERSONA / ROL
==================================================*/

.documentary-person{
    padding-top:22px;
    border-top:1px solid rgba(22, 52, 59, .17);
}

.documentary-person strong{
    display:block;
    margin-bottom:3px;
    color:var(--primary);
    font-size:.96rem;
}

.documentary-person span{
    color:#758083;
    font-size:.84rem;
    line-height:1.5;
}


/*==================================================
    TUTORIAL FINAL
==================================================*/

.documentary-tutorial{
    display:grid;
    grid-template-columns:minmax(300px, 450px) minmax(300px, 500px);
    gap:75px;
    align-items:center;
    justify-content:center;
}

.documentary-tutorial-content{
    max-width:480px;
}

.documentary-tutorial-content h3{
    margin:15px 0 22px;
    color:var(--primary);
    font-size:clamp(2rem, 3.6vw, 3rem);
    line-height:1.1;
}

.documentary-tutorial-content > p{
    margin-bottom:20px;
    color:#536164;
    line-height:1.8;
}

.documentary-warning{
    margin-top:30px;
    padding:20px 0 0 22px;
    border-top:1px solid rgba(22, 52, 59, .2);
    border-left:3px solid var(--secondary);
    font-size:.91rem;
}

.documentary-tutorial-media{
    overflow:hidden;
    aspect-ratio:1 / 1;
    background:#071416;
    border-radius:26px;
    box-shadow:0 22px 55px rgba(22, 52, 59, .12);
    width:100%;
    max-width:500px;
    aspect-ratio:1 / 1;

}


/*==================================================
    CIERRE
==================================================*/

.documentary-closing{
    padding:125px 0;
    background:var(--primary);
}

.documentary-closing-content{
    max-width:850px;
    text-align:center;
}

.documentary-closing h2{
    margin:18px auto 25px;
    color:#fff;
    font-size:clamp(2.25rem, 4vw, 3.6rem);
    line-height:1.12;
}

.documentary-closing p{
    max-width:700px;
    margin:0 auto 35px;
    color:rgba(255, 255, 255, .76);
    font-size:1.06rem;
    line-height:1.8;
}

.documentary-closing .btn-primary{
    background:#fff;
    color:var(--primary);
}

.documentary-closing .btn-primary:hover{
    background:var(--secondary);
    color:#fff;
}


/*==================================================
    RESPONSIVE
==================================================*/
@media(max-width:900px){

    .documentary-episode,
    .documentary-episode--reverse{
        width:min(100%, 620px);

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

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

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



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

.history-hero{

    padding:140px 0 90px;

    background:var(--background);

    text-align:center;
}

.history-hero h1{

    margin:20px 0;

    color:var(--primary);

    font-size:clamp(2.8rem,4vw,4.3rem);
}

.history-hero p{

    max-width:760px;

    margin:auto;

    color:#536164;

    line-height:1.8;
}

.history-section{

    padding:80px 0;

    background:#fff;
}

.history-item{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:70px;
}

.history-date{

    font-weight:700;

    color:var(--secondary);

    text-transform:uppercase;

    letter-spacing:.12rem;
}

.history-tag{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    background:#eef4ef;

    color:var(--primary);

    font-size:.75rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;
}

.history-content h2{

    margin-bottom:20px;

    color:var(--primary);

    font-size:2rem;
}

.history-content p{

    color:#536164;

    line-height:1.8;

    margin-bottom:30px;
}

.history-content img{

    width:100%;

    max-width:700px;

    height:420px;

    object-fit:cover;

    border-radius:22px;

    display:block;
}

.history-gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;
}

.history-gallery img{

    aspect-ratio:1;

    object-fit:cover;
}

.history-call{

    margin-top:28px;
    margin-bottom:18px;

    color:var(--primary);

    font-size:1.05rem;

    line-height:1.8;
}

.history-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--secondary);

    font-weight:700;

    text-decoration:none;

    transition:.25s;
}

.history-link:hover{

    color:var(--primary);

    transform:translateX(4px);
}

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


/*==================================================
    INTRO
==================================================*/

.team-intro-section{
    padding:90px 0;
    background:#fff;
}

.team-intro-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:100px;
    align-items:start;
}

.team-intro-heading{
    max-width:470px;
}

.team-intro-heading h2{
    margin:14px 0 0;

    color:var(--primary);

    font-size:clamp(2.1rem,3.4vw,3.1rem);
    line-height:1.1;
}

.team-intro-text{
    max-width:630px;
}

.team-intro-text p{
    margin:0 0 18px;

    color:#536164;

    font-size:1.05rem;
    line-height:1.8;
}

.team-intro-text p:last-child{
    margin-bottom:0;
}



/*==================================================
    ENCABEZADOS
==================================================*/

.team-section-header{
    max-width:760px;
    margin-bottom:58px;
}

.team-section-header h2{
    margin:12px 0 20px;

    color:var(--primary);

    font-size:clamp(2.2rem,3.5vw,3.15rem);
    line-height:1.1;
}

.team-section-header > p{
    max-width:690px;
    margin:0;

    color:#536164;

    font-size:1.04rem;
    line-height:1.8;
}



/*==================================================
    EQUIPO / RED DE PERSONAS
==================================================*/

.team-members-section{
    padding:100px 0 110px;

    background:var(--background);

    border-top:1px solid rgba(22,52,59,.08);
}

.team-network-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    column-gap:78px;
}


/*==================================================
    PERSONA
==================================================*/

.team-person{
    position:relative;

    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    gap:23px;
    align-items:center;

    min-height:136px;
    padding:25px 0;

    border-top:1px solid rgba(22,52,59,.14);
}


/* línea vertical sutil de la red */

.team-person::before{
    content:"";

    position:absolute;

    left:33px;
    top:0;
    bottom:0;

    width:1px;

    background:rgba(36,78,87,.11);

    z-index:0;
}


/*==================================================
    NODO
==================================================*/

.team-node{
    position:relative;
    z-index:2;

    width:68px;
    height:68px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    color:var(--primary);
    background:var(--background);

    border:1px solid rgba(36,78,87,.27);
    border-radius:50%;

    font-family:'DM Serif Display',serif;
    font-size:1.16rem;
    line-height:1;

    box-shadow:
        0 0 0 7px var(--background),
        0 7px 22px rgba(22,52,59,.07);

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.team-node::after{
    content:"";

    position:absolute;

    width:8px;
    height:8px;

    right:-5px;
    bottom:8px;

    border-radius:50%;

    background:var(--secondary);

    border:2px solid var(--background);
}

.team-person:hover .team-node{
    transform:scale(1.045);

    color:#fff;
    background:var(--primary);

    border-color:var(--primary);
}



/*==================================================
    CONTENIDO DE CADA PERSONA
==================================================*/

.team-person-content{
    position:relative;
    z-index:2;

    padding-right:16px;
}

.team-person h3{
    margin:0 0 5px;

    color:var(--primary);

    font-size:1.28rem;
    line-height:1.25;
}

.team-area{
    margin:0 0 4px;

    color:var(--secondary);

    font-size:.8rem;
    font-weight:700;
    line-height:1.45;
}

.team-affiliation{
    margin:0;

    color:#747f82;

    font-size:.8rem;
    line-height:1.5;
}



/*==================================================
    ETIQUETAS ESPECIALES
==================================================*/

.team-person-badge{
    display:inline-block;

    margin:0 0 7px;

    color:var(--secondary);

    font-size:.62rem;
    font-weight:800;
    line-height:1.3;

    letter-spacing:.09rem;
    text-transform:uppercase;
}



/*==================================================
    SOCIOS EXTERNOS
==================================================*/

.team-partners-section{
    padding:100px 0 110px;

    background:#fff;

    border-top:1px solid rgba(22,52,59,.08);
}

.team-partners-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:70px;
}

.team-partner{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;

    padding-top:28px;

    border-top:1px solid rgba(22,52,59,.19);
}

.team-partner-number{
    color:rgba(36,78,87,.22);

    font-family:'DM Serif Display',serif;
    font-size:1.35rem;
    line-height:1.2;
}

.team-partner h3{
    margin:0 0 4px;

    color:var(--primary);

    font-size:1.65rem;
    line-height:1.2;
}

.team-partner-name{
    margin:0 0 15px !important;

    color:var(--secondary) !important;

    font-size:.8rem !important;
    font-weight:700;
    line-height:1.45 !important;
}

.team-partner p{
    margin:0;

    color:#536164;

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



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

@media(max-width:900px){

    .team-intro-section{
        padding:72px 0;
    }

    .team-intro-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .team-intro-heading,
    .team-intro-text{
        max-width:none;
    }

    .team-members-section{
        padding:76px 0 85px;
    }

    .team-network-grid{
        column-gap:42px;
    }

    .team-partners-section{
        padding:76px 0 85px;
    }

    .team-partners-grid{
        gap:45px;
    }

}


@media(max-width:700px){

    .team-section-header{
        margin-bottom:42px;
    }

    .team-network-grid{
        grid-template-columns:1fr;
    }

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

}


@media(max-width:480px){

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

    .team-members-section,
    .team-partners-section{
        padding:65px 0 72px;
    }

    .team-person{
        grid-template-columns:58px minmax(0,1fr);
        gap:18px;

        min-height:112px;
        padding:21px 0;
    }

    .team-person::before{
        left:28px;
    }

    .team-node{
        width:58px;
        height:58px;

        font-size:1rem;

        box-shadow:
            0 0 0 5px var(--background),
            0 6px 18px rgba(22,52,59,.07);
    }

    .team-node::after{
        width:7px;
        height:7px;

        right:-4px;
        bottom:7px;
    }

    .team-person h3{
        font-size:1.16rem;
    }

    .team-area,
    .team-affiliation{
        font-size:.76rem;
    }

    .team-person-badge{
        margin-bottom:5px;
        font-size:.56rem;
        letter-spacing:.07rem;
    }

    .team-partner{
        gap:18px;
    }

}

/*==================================================
    PÁGINA 404
==================================================*/

.error-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
}

.error-section {
    width: 100%;
    padding: 90px 0 110px;
    overflow: hidden;
}

.error-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.error-label {
    display: inline-block;
    margin-bottom: 24px;

    color: var(--secondary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18rem;
    text-transform: uppercase;
}

.error-content h1 {
    margin: 0 0 28px;

    color: var(--primary);
    font-family: "DM Serif Display", serif;
    font-size: clamp(3.2rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: 1.02;
}

.error-content p {
    max-width: 470px;
    margin: 0 0 34px;

    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.8;
}

.error-content .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Paisaje */

.error-landscape {
    position: relative;

    width: 100%;
    height: 190px;
    margin-top: 70px;

    border-bottom: 1px solid rgba(36, 78, 87, .18);

    overflow: hidden;
}

.error-sky {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 75% 20%,
            rgba(212, 166, 70, .13),
            transparent 42%
        );
}

.error-horizon {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 55px;

    height: 95px;

    background: var(--primary);

    clip-path: polygon(
        0 72%,
        8% 62%,
        17% 68%,
        27% 48%,
        37% 60%,
        48% 42%,
        58% 57%,
        69% 35%,
        80% 52%,
        91% 40%,
        100% 48%,
        100% 100%,
        0 100%
    );

    opacity: .9;
}

.error-field {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 0;

    height: 75px;

    background: var(--secondary);

    clip-path: polygon(
        0 35%,
        12% 22%,
        24% 38%,
        37% 18%,
        50% 34%,
        64% 15%,
        77% 32%,
        89% 20%,
        100% 30%,
        100% 100%,
        0 100%
    );

    opacity: .22;
}

/* Alambrado */

.error-fence {
    position: absolute;
    left: 4%;
    right: 3%;
    bottom: 48px;

    height: 72px;
}

.error-fence::before,
.error-fence::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(47, 52, 55, .45);
}

.error-fence::before {
    top: 24px;
}

.error-fence::after {
    top: 47px;
}

.error-fence span {
    position: absolute;
    bottom: 0;

    width: 3px;
    height: 72px;

    background: rgba(47, 52, 55, .5);

    transform: rotate(2deg);
}

.error-fence span:nth-child(1) {
    left: 8%;
}

.error-fence span:nth-child(2) {
    left: 48%;
}

.error-fence span:nth-child(3) {
    right: 8%;
}

/* Acacios */

.error-plant {
    position: absolute;
    bottom: 38px;

    width: 90px;
    height: 120px;
}

.error-plant-left {
    left: 15%;
    transform: rotate(-12deg);
}

.error-plant-right {
    right: 12%;
    transform: rotate(10deg);
}

.error-plant::before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 3px;
    height: 105px;

    background: var(--primary);

    transform: translateX(-50%) rotate(8deg);
    transform-origin: bottom;
}

.error-plant i {
    position: absolute;

    width: 38px;
    height: 18px;

    border-radius: 100% 0 100% 0;

    background: var(--primary);
    opacity: .85;
}

.error-plant i:nth-child(1) {
    top: 28px;
    left: 4px;
    transform: rotate(28deg);
}

.error-plant i:nth-child(2) {
    top: 48px;
    right: 2px;
    transform: rotate(-28deg);
}

.error-plant i:nth-child(3) {
    top: 68px;
    left: 0;
    transform: rotate(28deg);
}

.error-plant i:nth-child(4) {
    top: 88px;
    right: 8px;
    transform: rotate(-28deg);
}

/* Responsive */

@media (max-width: 768px) {

    .error-section {
        padding: 70px 0 80px;
    }

    .error-content h1 {
        font-size: clamp(2.8rem, 12vw, 4.5rem);
    }

    .error-content p {
        font-size: 1rem;
    }

    .error-landscape {
        height: 150px;
        margin-top: 55px;
    }

    .error-fence {
        left: -5%;
        right: -5%;
    }

    .error-plant-left {
        left: 5%;
    }

    .error-plant-right {
        right: 2%;
    }

}