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

html {
    scroll-behavior: smooth;
}

/* Blur-up LQIP placeholders (see scripts/generate-lqip.mjs) */
.img-lqip {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: transparent;
}

.img-lqip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--lqip);
    background-size: cover;
    background-position: center;
    filter: blur(16px);
    transform: scale(1.12);
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.img-lqip.is-loaded::before {
    opacity: 0;
}

.img-lqip__full {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.img-lqip.is-loaded .img-lqip__full {
    opacity: 1;
}

.img-art.img-lqip,
.img-art.img-lqip .img-lqip__full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-figure .img-lqip,
.vccb-fig .img-lqip,
.vccb-cifra-frame .img-lqip {
    width: 100%;
}

.parallax .descanso .vccb-cifra-frame .img-lqip {
    display: block;
    width: 100%;
    max-width: 100%;
}

.single-portada .img-lqip,
.single-portada .img-lqip .img-lqip__full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.img-clip .img-lqip {
    width: 100%;
}

.parallax .descanso .img-lqip {
    display: inline-block;
    width: auto;
    max-width: 100%;
    background-color: transparent;
}

.parallax .descanso .img-lqip .img-lqip__full {
    max-width: 100%;
    max-height: 75vh;
    width: auto;
}

.parallax-image-wrap.has-lqip {
    overflow: hidden;
}

.parallax-image-wrap.has-lqip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--lqip);
    background-size: cover;
    background-position: center;
    filter: blur(16px);
    transform: scale(1.12);
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

.parallax-image-wrap.has-lqip.is-loaded::before {
    opacity: 0;
}

.parallax-image-wrap.has-lqip .parallax-image {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .img-lqip::before,
    .img-lqip__full,
    .parallax-image-wrap.has-lqip::before {
        transition: none;
    }
}

@font-face {
    font-family: 'Exo';
    src: url('assets/fonts/Exo-RegularVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Asap';
    src: url('assets/fonts/Asap-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/JetBrains Mono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-optical-sizing: auto;
}

@font-face {
    font-family: 'GT America Condensed';
    src: url('assets/fonts/GTAmerica-CondensedMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}




:root {
    /* Colores */
    --blanco: #ffffff;
    --verde-2: #d6df74;
    --verde-3: #a0d0ac;
    --turquesa: #3f888f;
    --turquesa-gris: #5d7683;
    --agua: #67c3cd;
    --gris-1: #e4e9e3;
    --grafito: #6a7c85;
    --transferencia: #2b5267;
    --negro: #000000;

    /* Escala tipográfica */
    --base: 16px;
    --h1: calc(var(--base) * 3);
    --h2: calc(var(--base) * 2.5);
    --h3: calc(var(--base) * 2);
    --h4: calc(var(--base) * 1.75);
    --h5: calc(var(--base) * 1.4);
    --h6: calc(var(--base) * 1.2);
    --micro: calc(var(--base) * 0.8);

    /* Familias */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Exo', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-condensed: 'GT America Condensed', sans-serif;

    /* Interlineados */
    --line-height-default: 1.3em;
    --line-height-spaced: 1.5em;
    --line-height-tight: 0.8em;
    --tracking-spaced: 0.05em;

    /* Botones */
    --btn-padding: 10px;
    --btn-radius: 8px;
    --btn-border: solid 1px var(--negro);
    --btn-transition: all 0.3s ease;
    --header-height: 180px;
}

a {
    text-decoration: none;
    color: currentColor;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--verde-3);
}

body {
    font-family: var(--font-sans);
    font-size: var(--base);
    font-weight: 400;
    line-height: 1.3em;
    font-style: normal;
    color: var(--negro);
    background-color: var(--verde-3);
    font-variation-settings: 'opsz' 16;
}

h1, h2, h3, h4{
    font-family: var(--font-display);
    line-height: var(--line-height-tight);
    font-weight: 300;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
    font-weight: 400;
}

h5 {
    font-family: var(--font-sans);
    font-size: var(--h5);
    font-weight: 300;
    line-height: var(--line-height-default);
}

h6 {
    font-family: var(--font-sans);
    font-size: var(--h6);
    font-weight: 600;
    line-height: var(--line-height-default);
}


p {
    text-wrap: pretty;
}

.micro {
    font-family: var(--font-sans);
    font-size: var(--micro);
    font-weight: 800;
    letter-spacing: var(--tracking-spaced);
    line-height: var(--line-height-default);
    text-transform: uppercase;
}


.underline {
    width: auto;
    position: relative;
}

.underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1px;
    background: var(--negro);
    transition: width 300ms ease-in;
  }

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
    width: auto;
  }

#logo-hero {
    width: 10rem;
    max-width: 100%;
}

.mobile-only {
    display: none;
}

nav#access {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
}

.menu-principal-container {
    width: auto;
    margin-left: auto;
}

#menu-principal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 1em;
    font-weight: 400;
    text-transform: none;
    line-height: 1.4;
    color: var(--negro);
}

#menu-principal > li {
    position: relative;
    white-space: nowrap;
    list-style: none;
}

#menu-principal > li > a {
    display: block;
    padding: 1em 0;
    color: inherit;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

#menu-principal > li > a:hover,
#menu-principal .current-menu-item > a,
#menu-principal .current-menu-parent > a,
#menu-principal a[aria-current="page"] {
    text-decoration: underline;
    color: inherit;
}

#menu-principal > li:not(:last-of-type) {
    margin-right: 1.5em;
}


main {
    background-color: var(--gris-1);
  }


#hero {
    display: flex;
    padding-left: 5vw;
    padding-bottom: 10vw;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2vw;
    align-items: left;
    width: 100%;
    height: calc(100vh - var(--header-height));
    transform: translateY(var(--header-height));
    background-color: var(--verde-3);
}

#hero h5 {
    width: 60%;
}


#titulo-hero {
    font-size: 14vw;
    line-height: var(--line-height-tight);
    transform: translateX(-0.1ex);
}

#fake-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: fixed;
    overflow: visible;
    width: 100%;
    background-color: var(--blanco);
    height: var(--header-height);
    z-index: 1000;
}

body:not(.single) #fake-header {
    justify-content: center;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    padding: 20px 5vw;
}

#archivo-artículos {
    width: 100%;
    height: auto;
    background-color: var(--gris-1);
    border-top: 1px solid var(--negro);
}

#archivo-artículos h2 {
    line-height: 1.15;
}

li.row {
    display: flex;
    flex-direction: row nowrap;
    justify-content: space-between;
    align-items: center;
    justify-items: left;
    gap: 2vw;
    padding: 3vw 0;
    border-bottom: 1px solid var(--negro);
    cursor: pointer;
}

li.row:last-child {
    border-bottom: none;
}

li.row > a {
    display: contents;
    color: inherit;
    text-decoration: none;
}


.row {
    display: flex;
    width: 100%;
    flex-direction: row nowrap;
    justify-content: space-between;
    align-items: center;
    justify-items: left;
    gap: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.row:hover {
    background-color: var(--verde-2);
}

.article-btn {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    font-family: var(--font-sans);
    font-size: var(--micro);
    font-weight: 400;
    color: var(--negro);
    background-color: var(--gris-1);
    border: 1px solid var(--negro);
    padding: 10px 20px;
    transition: all 0.3s ease;
    text-wrap: nowrap;
}

li.row:hover .article-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-index {
    position: fixed;
    left: 5vw;
    bottom: 5vw;
    z-index: 250;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: var(--micro);
    font-weight: 400;
    color: var(--negro);
    background-color: var(--agua);
    border: 1px solid var(--negro);
    padding: 8px 10px;
    text-decoration: none;
    text-transform: uppercase;
    text-wrap: nowrap;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.back-to-index.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-index:hover,
.back-to-index a:hover {
    color: var(--negro);
}

.article-pager-index {
    padding: 0 0.75em;
    margin: 0 0.1em;
    border-left: 1px solid var(--negro);
    border-right: 1px solid var(--negro);
    line-height: 1;
}

.article-pager-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45em;
    height: 1.45em;
    flex: 0 0 auto;
    color: inherit;
}

.article-pager-arrow svg {
    display: block;
    width: 0.85em;
    height: 0.85em;
}

.article-pager-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.back-to-index-arrow {
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-left: 0.15em;
    vertical-align: -0.12em;
}

.back-to-index-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.col-1 {
    width: calc(100% / 12 * 1);
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--h3);
}


.col-2 {
    width: calc(100% / 12 * 5);
    padding-left: 5vw;

}

.col-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2vw;
    padding: 0 2vw;
    width: calc(100% / 12 * 6);

}

.col-3 h2 {
    width: 80%;
    font-weight: 400;
}

.col-3 p.bajada {
    font-family: var(--font-mono);
    font-size: var(--base);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--negro);
    text-wrap: balance;
    line-height: 1.3em;
}

button {
    font-family: var(--font-sans);
    font-size: var(--micro);
    font-weight: 400;
    color: var(--negro);
    background-color: var(--gris-1);
    border: 1px solid var(--negro);
    padding: 10px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}


.img-art {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.img-art.img-lqip {
    height: auto;
}

.img-art.img-lqip .img-lqip__full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

footer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    bottom: 0;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    overflow: hidden;
    background-color: var(--agua);
    color: var(--negro);
    border-top: 1px solid var(--negro);
    z-index: 200;
    width: 100%;
}

#footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 180px;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

body:not(.single) #footer-content,
footer.is-home #footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 5vw;
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 3vw;
    grid-column: 2;
}

.footer-nav--prev {
    grid-column: 1;
}

.footer-nav--next {
    grid-column: 3;
}

.footer-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#logo-footer {
    max-width: clamp(6.5rem, 11vw, 9rem);
    max-height: 96px;
    width: auto;
    height: auto;
    filter: brightness(0);
}

.footer-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.footer-socials a {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    transition: opacity 0.25s ease;
}

.footer-socials a:hover {
    opacity: 0.55;
}

.footer-socials img {
    display: block;
    width: 100%;
    height: 100%;
}

.footer-nav {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
}

.footer-nav[hidden] {
    display: none;
}

.footer-nav-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 0;
    color: var(--negro);
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.footer-nav--prev .footer-nav-card {
    border-right: 1px solid var(--negro);
}

.footer-nav--next .footer-nav-card {
    border-left: 1px solid var(--negro);
}

a.footer-nav-card:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--transferencia);
}

.footer-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: var(--micro);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

.footer-nav--next .footer-nav-label {
    flex-direction: row-reverse;
}

.footer-nav-label svg {
    display: block;
    width: 0.9em;
    height: 0.9em;
    flex: 0 0 auto;
}

.footer-nav-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.7rem 1rem;
    text-align: left;
}

.footer-nav-image {
    --footer-img-h: 180px;
    position: relative;
    flex: 0 0 calc(var(--footer-img-h) * 1.6);
    width: calc(var(--footer-img-h) * 1.6);
    height: 100%;
    max-width: 46%;
    align-self: stretch;
    overflow: hidden;
    background-color: var(--gris-1);
}

.footer-nav-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-right: 1px solid black;
}

.footer-nav-title {
    font-family: var(--font-display);
    font-size: calc(var(--base) * 1.2);
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1rem;

}

.footer-nav-card.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.footer-nav-card.is-disabled:hover {
    background-color: transparent;
    color: var(--negro);
}

/* Single */

.single {
    --header-height: 140px;
}

.single #fake-header {
    position: absolute;
    top: 0;
    left: 0;
    justify-content: flex-start;
    height: var(--header-height);
    /* Keep the bar from forming a stacking context so .single-titulo can
       overlap it, while .sub-menu (higher z-index) can still paint above. */
    z-index: auto;
}

.single-content {
    position: relative;
    z-index: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    width: 100%;
    height: auto;
    /* Margin, not padding: padding painted over the absolute header
       (nav invisible on .fondo-turquesa) and stole its clicks. */
    margin-top: var(--header-height);
    padding-top: 0;
    container-type: inline-size;
}

.single-portada {
    width: calc(100% - 10vw);
    margin: 0 5vw;
    aspect-ratio: 1363 / 599;
    overflow: hidden;
    padding: 0;
}

.single-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.single-titulo {
    /* Title aims for ~64px, number is 3/4 of the title */
    --titulo-num-ratio: 0.75;
    --titulo-text-size: clamp(2rem, min(9vw, 6.25cqi), 64px);
    --titulo-num-size: calc(var(--titulo-text-size) * var(--titulo-num-ratio));
    --titulo-line-height: 1.1;
    /* Number on the left, text as an independent centered block */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    font-family: var(--font-display);
    font-weight: 300;
    line-height: var(--titulo-line-height);
    text-transform: uppercase;
    padding: 0px 5vw;
    /* Sit slightly over the header in layout only; scrolls away with the page */
    margin-top: -0.5rem;
    position: relative;
    z-index: 2;
    /* Full-width box + epígrafe translateY overlap the nav; let clicks through. */
    pointer-events: none;
    font-variant-numeric: slashed-zero;
}

.single-titulo-num {
    flex: 0 0 auto;
    font-size: var(--titulo-num-size);
    line-height: 1;
    /* Center the number on the first line of the title text */
    transform: translateY(calc((var(--titulo-text-size) * var(--titulo-line-height) - var(--titulo-num-size)) / 2));
}

.single-titulo-text {
    flex: 0 1 auto;
    margin: 0;
    font-size: var(--titulo-text-size);
    line-height: var(--titulo-line-height);
    font-weight: 400;
    text-align: center;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    text-wrap: balance;
}

.single-epigrafe {
    font-size: var(--h5);
    font-family: var(--font-mono);
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 1.3em;
    width: 100%;
    transform: translateY(-0.4rem);
}

.single-bajada {
    margin: 0;
    text-align: left;
    width: 100%;
    padding: 0;
    text-transform: uppercase;
    text-decoration: underline;
    text-wrap: balance;
    line-height: 1.3em;
    font-size: var(--h4);
    font-weight: 400;
    font-family: var(--font-display);
}

.single-articulo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5vw;
    width: 100%;
    height: auto;
    padding: 0 5vw 0vw 5vw;
}

.single-col-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 10%;
    width: 100%;
    height: auto;
}

.single-col-2.align-start {
    align-items: flex-start;
    justify-content: flex-start;
}

/* Desktop: bajada on the left, lead paragraph on the right */
.lead-row > .single-col-33 {
    order: 2;
}

.lead-row > .single-col-66 {
    order: 1;
}

.single-col-2 > .single-col-66 {
    align-self: stretch;
}

.single-col-2.align-start > .single-col-66 {
    align-self: flex-start;
}

.img-figure {
    margin: 0;
    width: 50%;
}

.single-col-2 > .img-figure {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.img-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.img-figure--sm img,
.img-figure--sm .img-lqip {
    width: 70%;
}

.img-figure figcaption {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 0.75em;
    width: 100%;
}

.single-col-33 {
    width: 40%;
    height: auto;
    font-size: var(--h6);
    font-weight: 300;
    line-height: var(--line-height-spaced);
}

.single-col-66 {
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: auto;
}

.titulo-parrafo {
    font-size: var(--h4);
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    text-align: left;
    line-height: 1.3em;
    width: 100%;
    margin-bottom: 1vw;
}

.img-col {
    display: flex;
    flex-direction: column;
    width: 48%;
}

.img-col-1 {
    align-self: flex-end;
}

.img-col-2 {
    align-self: flex-start;
    justify-content: flex-end;

}

.img-clip {
    width: 100%;
    overflow: hidden;
}

.img-col img,
.img-col .img-lqip {
    width: 80%;
    height: auto;
    object-fit: cover;
    display: block;
}

.img-col-1 img,
.img-col-1 .img-lqip {
    margin-left: auto;
}

.num {
    font-family: var(--font-display);
    font-size: var(--h5);
    font-weight: 400;
    line-height: var(--h1);
    width: 100%;
    margin-top: 1.5ex;
}

.img-col-1 .num {
    text-align: right;
}

.img-col-2 .num {
    text-align: left;
}

.num > span {
    background-color: var(--verde-3);
    padding: 0 0.15em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.num .num-number {
    font-size: calc(var(--base) * 4);
    font-weight: 200;
    font-variant-numeric: tabular-nums slashed-zero;
}


.fondo-blanco img{
    background-color: var(--blanco);
    width: 100% !important;
    height: auto;
}

.ltser-map-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ltser-map-svg,
.ltser-map-wrap img,
.ltser-map-wrap .img-lqip,
.ltser-map-img {
    display: block;
    width: 100%;
    height: auto;
}

.ltser-map-img--horiz {
    aspect-ratio: 821.58 / 347.24;
}

.ltser-map-img--vert {
    aspect-ratio: 503.64 / 1155.28;
}

.ltser-map-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.ltser-map-svg:not(.is-ready) {
    background-color: #e8eeef;
}

.ltser-map-wrap .ltser-map-img--vert {
    display: none;
}

.single-col-2.fondo-blanco {
    background-color: var(--blanco);
    padding: 5vw;
}

/* —— Site-wide article grid (SVG overlay) —— */
.site-grid {
    --site-grid-stroke: var(--turquesa-gris);
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.site-grid--white,
.colaboracion .site-grid {
    --site-grid-stroke: var(--blanco);
}

.site-grid svg,
.site-grid path {
    pointer-events: none;
}

.site-grid svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}



/* White card fill below the site grid; content raised above it. */
.single:has(.site-grid) .single-col-2.fondo-blanco,
.single:has(.site-grid) .parallax {
    background-color: transparent;
}

.single:has(.site-grid) .single-col-2.fondo-blanco {
    position: relative;
}

.single:has(.site-grid) .single-col-2.fondo-blanco::before,
.single:has(.site-grid) .parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--blanco);
    pointer-events: none;
}

.single:has(.site-grid) .single-col-2.fondo-blanco > *,
.single:has(.site-grid) .parallax-text-col,
.single:has(.site-grid) .parallax-step,
.single:has(.site-grid) .descanso,
.single:has(.site-grid) .descanso.descanso-gallery,
.single:has(.site-grid) .descanso-gallery figure,
.single:has(.site-grid) .vccb-terreno-inner,
.single:has(.site-grid) .vccb-terreno figure,
.single:has(.site-grid) .lib-cifra-gallery,
.single:has(.site-grid) .lib-cifra-gallery figure,
.single:has(.site-grid) .esquema-block,
.single:has(.site-grid) .esquema-container,
.single:has(.site-grid) .esquema-float-title,
.single:has(.site-grid) .img-figure,
.single:has(.site-grid) .h2-articulo,
.single:has(.site-grid) .colaboracion-sud-pajarito,
.single:has(.site-grid) .lib-cifra-copy,
.single:has(.site-grid) .lib-ver-mas {
    position: relative;
    z-index: 2;
}

/* Raise any element above the site-wide article grid (z-index: 1). */
.single:has(.site-grid) .above-grid {
    position: relative;
    z-index: 2;
}

/* Keep existing absolute placement; only raise above the site grid */
.single:has(.site-grid) .mapa-colaboracion-num,
.single:has(.site-grid) .lista-sud,
.single:has(.site-grid) .mapa-instituciones-card {
    z-index: 2;
}

.single:has(.site-grid) .mapa-colaboracion > .lista-redes,
.single:has(.site-grid) .mapa-colaboracion-steps {
    position: relative;
    z-index: 2;
}

/* Photos sit above the grid by default — do not override sticky/absolute positioning */
.single:has(.site-grid) .parallax-image-col,
.single:has(.site-grid) .parallax-image-wrap {
    z-index: 10;
}

/* Linked SVG maps stay under the grid */
.investigaciones .parallax-image-col,
.investigaciones .parallax-image-wrap,
.investigaciones .parallax-image,
.colaboracion .mapa-svg-host {
    position: relative;
    z-index: 0;
}

/* Sud map bitmap must stay below the site grid; overlays keep z-index 2.
   Do not set position here — mobile relies on absolute fill. */
.colaboracion .colaboracion-sud-map > img {
    z-index: 0;
}

@media (min-width: 1201px) {
    .colaboracion .colaboracion-sud-map > img {
        position: relative;
    }
}

.colaboracion .colaboracion-sud-media,
.colaboracion .colaboracion-sud-map,
.colaboracion .colaboracion-sud-copy {
    /* Avoid a stacking context that would trap the map above the site grid */
    z-index: auto;
}

.investigaciones .ltser-map {
    position: relative;
    z-index: 2;
    isolation: isolate;
    background-color: var(--blanco);
}

.investigaciones .ltser-map-wrap,
.investigaciones .ltser-map-svg,
.investigaciones .ltser-map-img {
    position: relative;
    z-index: 2;
}

.investigaciones .single-col-2.fondo-blanco,
.vccb-terreno {
    width: calc(100% - 10vw);
    margin: 0 5vw;
    box-sizing: border-box;
}

.investigaciones .colectores-panel:has(+ .vccb-terreno) {
    padding-bottom: 0;
    margin-bottom: -2vw;
}

.investigaciones .colectores-panel:has(+ .colectores-panel) {
    margin-bottom: -2vw;
    padding-bottom: 2.5vw;
}

.investigaciones .colectores-panel + .colectores-panel {
    padding-top: 2.5vw;
}

.single-col-2.fondo-blanco.lib-lead-media {
    margin-bottom: 5vw;
}

/* LIB post-parallax article blocks */
.lib-invasoras-panel,
.lib-cifra-panel,
.lib-bd-panel,
.lib-cierre,
.single-col-2.fondo-blanco.lib-lead-media {
    width: calc(100% - 10vw);
    margin-left: 5vw;
    margin-right: 5vw;
    box-sizing: border-box;
}

.lib-invasoras-panel .single-col-66,
.lib-cierre .single-col-66 {
    min-width: 0;
}

.lib-invasoras-panel .single-col-66 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.lib-invasoras-panel .single-col-66 .img-figure {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.lib-cierre .single-col-66 .img-figure {
    width: 130%;
    max-width: none;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.lib-invasoras-panel .single-col-66 .img-figure img,
.lib-invasoras-panel .single-col-66 .img-figure .img-lqip,
.lib-invasoras-panel .single-col-66 .img-figure .img-lqip__full,
.lib-cierre .single-col-66 .img-figure img,
.lib-cierre .single-col-66 .img-figure .img-lqip {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.lib-especies-heading {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: var(--base);
    font-weight: 600;
}

.lib-invasoras-panel .lib-especies-heading,
.lib-invasoras-panel .lib-especies-lista {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lib-invasoras-panel h5.lib-especies-heading {
    margin: 1.5rem 0 0;
}

.lib-especies-lista {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.78em;
    line-height: 1.55;
    font-weight: 400;
}

.lib-especies-lista li {
    break-inside: avoid;
    margin: 0 0 0.35rem;
    overflow-wrap: anywhere;
}

.lib-especies-lista i {
    font-style: italic;
    font-weight: 400;
}

.lib-cifra-panel {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding-bottom: 2vw;
}

.lib-cifra-panel .num {
    margin-top: 0;
    margin-left: 0;
    max-width: 28rem;
    line-height: 1.15;
}

.lib-cifra-panel .num > span {
    padding: 0.12em 0.15em;
}

.lib-cifra-panel .num-number {
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 0.95;
}

.lib-cifra-copy {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin-top: 0;
    margin-left: 8vw;
    padding-left: 0;
}

.lib-cifra-gallery {
    --grid-size: clamp(96px, 12vw, 160px);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 2vw;
    width: 100%;
    padding: calc(var(--grid-size) * 0.35) 0 calc(var(--grid-size) * 0.4);
    overflow: visible;
}

.lib-cifra-gallery figure {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.lib-cifra-gallery figure:nth-child(1) {
    margin-top: 0;
    max-width: 48%;
}

.lib-cifra-gallery figure:nth-child(2) {
    margin-top: calc(var(--grid-size) * 1.15);
    max-width: 42%;
}

.lib-cifra-gallery figure img {
    width: 100%;
    height: auto;
    display: block;
}

.lib-cifra-gallery figure.gallery-figure-lg img {
    width: 115%;
    max-width: none;
}

.lib-cifra-gallery figcaption {
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.lib-bd-media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    gap: 1.25rem;
}

.lib-bd-media .img-figure {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.lib-bd-media .img-figure img {
    width: 80% !important;
    max-width: none;
    height: auto;
    display: block;
}

/* Phone below the laptop, horizontally centered with it */
.lib-bd-media .img-figure--sm {
    position: static;
    width: 26%;
    margin: 0;
    transform: none;
    background: transparent;
}

.lib-bd-media .img-figure--sm img,
.lib-bd-media .img-figure--sm .img-lqip {
    width: 100% !important;
    max-width: none;
    margin: 0;
    background-color: transparent !important;
    filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.18));
}

.lib-ver-mas {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.65rem 1.15rem;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--negro);
    text-decoration: none;
    background-color: var(--agua);
    border: 1px solid var(--negro);
    text-transform: uppercase;
}

.lib-ver-mas:hover {
    color: white;
}

/* Local section grids replaced by .site-grid where present */
.single:has(.site-grid) .parallax-image-col::before,
.single:has(.site-grid) .colectores-panel .single-col-66::before,
.single:has(.site-grid) .parallax .descanso.descanso-gallery::before,
.single:has(.site-grid) .single-articulo .single-col-66:has(.img-col)::before {
    content: none;
    display: none;
}

.single:has(.site-grid) .img-col,
.single:has(.site-grid) .img-col .num,
.single:has(.site-grid) .single-articulo .single-col-33 {
    position: relative;
    z-index: 2;
}

.colectores-panel {
    gap: 10%;
}

.colectores-panel .single-col-33 {
    font-size: var(--base);
    font-weight: 300;
    line-height: var(--line-height-spaced);
}

.colectores-panel .titulo-parrafo {
    margin: 0 0 2vw;
    font-weight: 600;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: var(--tracking-spaced);
    line-height: var(--line-height-default);
}

.colectores-panel .titulo-parrafo--plain {
    font-size: var(--h5);
    text-decoration: none;
    letter-spacing: 0;
}

.colectores-panel .single-col-33 p {
    margin: 0;
    font-size: var(--base);
    line-height: var(--line-height-spaced);
}

.colectores-panel .single-col-33 p.titulo-parrafo {
    margin: 0 0 1.25rem;
    font-size: var(--h4);
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0;
    line-height: 1.3em;
}

.colectores-panel .single-col-66 {
    --grid-size: clamp(96px, 12vw, 160px);
    --grid-offset-x: 2.5vw;
    position: relative;
    overflow: visible;
}

.colectores-panel .single-col-66::before {
    /* Keep open on the right; never flush with the panel edge */
    right: var(--grid-offset-x, 2.5vw);
}

.colectores-panel .img-figure {
    position: relative;
    z-index: 1;
}

.colectores-panel .single-col-66:has(.img-figure + .img-figure) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
}

.colectores-panel .single-col-66:has(.img-figure + .img-figure) .img-figure {
    width: 70%;
}

.colectores-panel .single-col-66:has(.img-figure + .img-figure) .img-figure--half {
    width: 50%;
}

.colectores-panel .single-col-66:has(.img-figure + .img-figure) .img-figure--smaller {
    width: 49%;
}

/* Biodata scheme (inlined SVG) */
.esquema-container {
    width: 100%;
    height: auto;
}

.esquema-container svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.bajada-destacada {
    font-size: var(--h6);
    font-weight: 800;
    text-decoration: none;
    text-align: left;
    line-height: 1.3em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 2em;
    overflow-wrap: break-word;
    margin: 0 0 1.25em 0 !important;
}

/* Hide everything until JS has measured stroke lengths and set up the timeline,
   so the user never sees the finished scheme flash before the animation runs. */
.esquema-container:not(.is-ready) svg .anim-title,
.esquema-container:not(.is-ready) svg .anim-text,
.esquema-container:not(.is-ready) svg .anim-draw,
.esquema-container:not(.is-ready) svg .anim-fade,
.esquema-container:not(.is-ready) svg .anim-arrow,
.esquema-container:not(.is-ready) svg .anim-arrow-line {
    visibility: hidden;
}

.parallax {
    position: relative;
    width: 100%;
    overflow: visible;
    background-color: var(--blanco);
    padding: 10vw 5vw 0 5vw;
}

/* —— LIB dual-band scrollytelling —— */
.lib-scrolly {
    --parallax-lib-pad: 5vw;
    --parallax-lib-pad-parallel: clamp(0.75rem, 1.5vw, 1.25rem);
    --lib-scrolly-gutter: 5vw;
    /* Scroll length: one viewport-sized beat per step. */
    --lib-scroll-height: 700vh;
    position: relative;
    display: block;
    width: calc(100% - 2 * var(--lib-scrolly-gutter));
    margin: 0 var(--lib-scrolly-gutter);
    height: var(--lib-scroll-height);
    overflow: visible;
    background-color: transparent;
    box-sizing: border-box;
}

.lib-scrolly-sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    isolation: isolate;
    background-color: var(--blanco);
}

.parallax-lib-band {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--parallax-lib-pad);
    overflow: hidden;
    box-sizing: border-box;
}

.parallax-lib-band--process {
    --lib-zoom: 0.75;
    --lib-fit: 1;
    /* Map takes leftover viewport after the content-sized blue band */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    background-color: var(--blanco);
    background-image: url("assets/04/fondo-parallax.webp");
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
}

.lib-pan-viewport {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.lib-pan-layer {
    position: absolute;
    top: 50%;
    left: 0;
    height: calc(100% * var(--lib-fit, 1));
    width: calc(100% * var(--lib-zoom, 1.25));
    will-change: transform;
    transform: translate3d(0, -50%, 0);
}

.lib-pan-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.lib-pan-art > svg,
.lib-pan-art > img,
.lib-pan-art > .lib-pan-scheme {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.lib-pan-art > img {
    object-fit: cover;
    object-position: center center;
}

.lib-pan-labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.lib-pan-labels .parallax-lib-step.is-active {
    pointer-events: auto;
}

.lib-scrolly-steps {
    display: none;
}

.parallax-lib-band--parallel {
    /* Between too-tight content and a 55vh slab: hug copy with a soft floor */
    flex: 0 0 auto;
    min-height: clamp(11rem, 28vh, 36vh);
    background-color: var(--agua);
    border-bottom: none;
    padding: var(--parallax-lib-pad-parallel) var(--parallax-lib-pad);
    padding-bottom: calc(var(--parallax-lib-pad-parallel) + 22px);
}

.parallax-lib-band--parallel::after {
    content: "";
    position: absolute;
    left: var(--parallax-lib-pad);
    right: var(--parallax-lib-pad);
    bottom: var(--parallax-lib-pad-parallel);
    height: 2px;
    background-color: #000;
    pointer-events: none;
}

.parallax-lib-grid {
    /* Module size + phase synced to .site-grid in initLibScrolly */
    --parallax-lib-grid-size: clamp(96px, 12vw, 160px);
    --parallax-lib-grid-offset: var(--lib-scrolly-gutter, 5vw);
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M100 0H0M0 0V100' fill='none' stroke='%235bc6cc' stroke-width='1' stroke-dasharray='6 6'/%3E%3C/svg%3E");
    background-size: var(--parallax-lib-grid-size) var(--parallax-lib-grid-size);
    /* Align dashed columns with the page-wide site-grid module */
    background-position: calc(0px - var(--parallax-lib-grid-offset)) 0;
    background-repeat: repeat;
}

.parallax-lib-title {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin: 0 0 1rem;
    max-width: 40rem;
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.45;
    pointer-events: none;
    text-transform: uppercase;
}

.parallax-lib-title span {
    font-weight: 500;
}
.parallax-lib-band--process > .parallax-lib-title {
    margin-top: -0.85rem;
    transform: translateY(-0.35rem);
}

.parallax-lib-title--parallel {
    color: var(--negro, #000);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 1.6rem;
    max-width: 36rem;
    text-transform: none;

}

.parallax-lib-band--parallel .parallax-lib-viewport {
    flex: 0 1 auto;
    min-height: 0;
}

.parallax-lib-viewport {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Process: one step of copy at its scheme place; map pans behind */
.parallax-lib-track--process {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.parallax-lib-track--process .parallax-lib-series {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.parallax-lib-track--process .parallax-lib-series.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.parallax-lib-track--process .parallax-lib-step {
    /* Place copy at original Textos coords inside the 1148×455 scheme. */
    --lib-scheme-w: 1148;
    --lib-scheme-h: 455;
    position: absolute;
    left: calc(var(--lib-x, 0) / var(--lib-scheme-w) * 100%);
    top: calc(var(--lib-y, 0) / var(--lib-scheme-h) * 100%);
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    width: min(34%, 20rem);
    max-width: 20rem;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.parallax-lib-track--process .parallax-lib-step.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Step 2: copy sits to the right of its icon; wider so it clears step 3 */
.parallax-lib-track--process .parallax-lib-step[data-step="2"] {
    width: min(40%, 19rem);
    max-width: 19rem;
}

/* Step 7: only pull left on narrow desktops */
.parallax-lib-track--process .parallax-lib-step[data-step="7"] {
    width: min(32%, 15rem);
    max-width: 15rem;
}

@media (max-width: 900px) {
    .parallax-lib-track--process .parallax-lib-step[data-step="7"] {
        transform: translateX(-100%);
        width: min(36%, 13.5rem);
        max-width: 13.5rem;
    }
}

@media (max-width: 1100px) {
    .parallax-lib-track--process .parallax-lib-step {
        width: min(38%, 15rem);
        max-width: 15rem;
    }

    .parallax-lib-track--process .parallax-lib-step[data-step="2"] {
        width: min(42%, 17rem);
        max-width: 17rem;
    }

    .parallax-lib-title {
        line-height: 1.55;
        max-width: min(28rem, 55%);
    }
}

/* Parallel: series fade in place */
.parallax-lib-track--parallel {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
}

.parallax-lib-track--parallel .parallax-lib-series {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: clamp(0.85rem, 2vw, 2rem);
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.parallax-lib-track--parallel .parallax-lib-series:not(.is-active) {
    position: absolute;
    inset: 0;
}

.parallax-lib-track--parallel .parallax-lib-series.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.parallax-lib-step-body {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.45rem;
    align-items: start;
    width: 100%;
}

.parallax-lib-num {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 36px;
    font-weight: 200;
    line-height: 1;
    color: inherit;
}

.parallax-lib-step-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.parallax-lib-step-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

.parallax-lib-step-copy p,
.parallax-lib-step-copy ul {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    max-width: none;
}

.parallax-lib-step-copy ul {
    padding-left: 1.1em;
}

.parallax-lib-step-copy li {
    margin-bottom: 0.25em;
}

.parallax-lib-parallel-step {
    flex: 1 1 0;
    min-width: 0;
    max-width: 22rem;
}

.parallax-lib-parallel-step h6 {
    margin: 0 0 0.3rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.parallax-lib-parallel-step p,
.parallax-lib-parallel-step ul {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

.parallax-lib-parallel-step ul {
    margin-top: 0.35rem;
    padding-left: 1.1em;
}

.parallax-lib-parallel-step li {
    margin-bottom: 0.2em;
}

/* Reduced-motion / static fallback */
.lib-scrolly.is-static {
    height: auto;
}

.lib-scrolly.is-static .lib-scrolly-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
}

.lib-scrolly.is-static .parallax-lib-band--process {
    height: auto;
    min-height: 0;
}

.lib-scrolly.is-static .lib-pan-viewport {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 1148 / 455;
}

.lib-scrolly.is-static .lib-pan-layer {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none;
}

.lib-scrolly.is-static .lib-pan-art {
    position: absolute;
}

.lib-scrolly.is-static .parallax-lib-track--process .parallax-lib-series,
.lib-scrolly.is-static .parallax-lib-track--parallel .parallax-lib-series {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-bottom: 2rem;
}

.lib-scrolly.is-static .parallax-lib-track--process .parallax-lib-step {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile: step buttons + paged map (no scroll scrub) */
@media (max-width: 768px) {
    .lib-scrolly.is-paged {
        height: auto;
        width: calc(100% - 2.5rem);
        margin: 0 1.25rem;
    }

    .single-epigrafe {
        transform: translateY(0);

    }

    .lib-scrolly.is-paged .lib-scrolly-sticky {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
    }

    .lib-scrolly.is-paged .parallax-lib-band--process {
        --lib-zoom: 1.11;
        flex: 0 0 auto;
        height: min(72vh, 34rem);
        min-height: 22rem;
        aspect-ratio: auto;
        padding-bottom: 0;
    }

    .lib-scrolly.is-paged .lib-pan-layer {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .lib-scrolly.is-paged .lib-pan-art {
        position: absolute;
        inset: auto;
        top: 0;
        left: 0;
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .lib-scrolly.is-paged .lib-pan-art > .lib-pan-scheme {
        width: 100%;
        height: 100%;
    }

    /* Shared copy panel above the step buttons; map pans independently */
    .lib-scrolly.is-paged .lib-pan-labels {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        max-height: 46%;
        overflow: auto;
        padding: 1.35rem 0.85rem 0.85rem;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.98) 72%,
            rgba(255, 255, 255, 0.9) 88%,
            rgba(255, 255, 255, 0)
        );
        -webkit-overflow-scrolling: touch;
    }

    .lib-scrolly.is-paged .parallax-lib-track--process {
        height: auto;
    }

    .lib-scrolly.is-paged .parallax-lib-track--process .parallax-lib-series {
        position: relative;
        inset: auto;
        height: auto;
    }

    /* Only the active step stays in flow so copy always sits just above the selector */
    .lib-scrolly.is-paged .parallax-lib-track--process .parallax-lib-series:not(.is-active),
    .lib-scrolly.is-paged .parallax-lib-track--process .parallax-lib-step:not(.is-active) {
        display: none;
    }

    .lib-scrolly.is-paged .parallax-lib-track--process .parallax-lib-step {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: none;
        gap: 0.45rem;
        opacity: 1;
        visibility: visible;
    }

    .lib-scrolly.is-paged .parallax-lib-track--process .parallax-lib-step[data-step="7"] {
        transform: none !important;
        width: 100%;
        max-width: none;
    }

    .lib-scrolly.is-paged .parallax-lib-step-body {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.65rem;
        width: 100%;
    }

    .lib-scrolly.is-paged .parallax-lib-step-copy {
        min-width: 0;
        width: 100%;
    }

    .lib-scrolly.is-paged .parallax-lib-step-copy p,
    .lib-scrolly.is-paged .parallax-lib-step-copy ul {
        max-width: none;
        width: 100%;
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }

    .lib-scrolly.is-paged .parallax-lib-step-copy ul {
        padding-left: 1.15em;
    }

    .lib-scrolly.is-paged .parallax-lib-step-title {
        font-size: 13px;
    }

    .lib-scrolly.is-paged .parallax-lib-num {
        font-size: 32px;
    }

    .lib-scrolly.is-paged .parallax-lib-title {
        max-width: 100%;
        margin-bottom: 0.35rem;
        font-size: 1.1em;
    }

    .lib-scrolly.is-paged .parallax-lib-band--process > .parallax-lib-title {
        margin-top: 0;
        transform: translateY(20px);
    }

    .lib-scrolly.is-paged .lib-scrolly-steps {
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.35rem 0.55rem;
        padding: 0.65rem 0.25rem 0.35rem;
        background-color: var(--blanco);
    }

    .lib-scrolly.is-paged .lib-scrolly-steps button {
        appearance: none;
        border: 0;
        margin: 0;
        min-width: 2.15rem;
        padding: 0.45rem 0.6rem;
        background: transparent;
        color: var(--negro, #000);
        font-family: var(--font-mono, var(--font-sans));
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.04em;
        line-height: 1.2;
        cursor: pointer;
        opacity: 0.45;
        border-bottom: 2px solid transparent;
    }

    .lib-scrolly.is-paged .lib-scrolly-steps button[aria-current="true"] {
        opacity: 1;
        border-bottom-color: var(--negro, #000);
    }

    .lib-scrolly.is-paged .parallax-lib-band--parallel {
        padding-top: 0.65rem;
        padding-bottom: calc(0.65rem + 22px);
        min-height: 0;
    }

    .lib-scrolly.is-paged .parallax-lib-track--parallel .parallax-lib-series {
        flex-direction: column;
        gap: 0.85rem;
    }

    .lib-scrolly.is-paged .parallax-lib-parallel-step {
        max-width: none;
        width: 100%;
    }

    .lib-scrolly.is-paged .parallax-lib-parallel-step p,
    .lib-scrolly.is-paged .parallax-lib-parallel-step ul {
        font-size: 12px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


.investigaciones .parallax {
    width: calc(100% - 10vw);
    margin: 0 5vw;
    box-sizing: border-box;
}

.esquema-biodata-panel + .parallax {
    width: calc(100% - 10vw);
    margin: 0 5vw;
    box-sizing: border-box;
}

.parallax-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    width: 100%;
    align-items: start;
}

.parallax-text-col {
    display: flex;
    flex-direction: column;
}

.parallax-step {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.parallax-step h4 {
    margin: 0 0 1rem;
    font-weight: 600;
    font-size: var(--h5);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-spaced);
    line-height: var(--line-height-default);
}

.parallax-step p {
    margin: 0;
    font-size: var(--base);
    line-height: var(--line-height-spaced);
}

.parallax-step h4 span {
    font-weight: 200;
    color: var(--grafito)
}

.parallax-image-col {
    --grid-size: clamp(96px, 12vw, 160px);
    --grid-offset-x: 2.5vw;
    align-self: start;
    position: sticky;
    top: 10vw;
    height: 60vh;
    overflow: visible;
}

/* Open-left grid behind images; inset from the section’s right edge. */
.parallax-image-col::before,
.single-articulo .single-col-66:has(.img-col)::before,
.parallax .descanso.descanso-gallery::before,
.colectores-panel .single-col-66::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* Inset from the section’s right edge — grid must not meet it */
    right: var(--grid-offset-x, 2.5vw);
    z-index: 0;
    pointer-events: none;
    box-sizing: border-box;
    border-right: none;
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--grid-size, 120px) - 0.5px),
            var(--turquesa-gris) calc(var(--grid-size, 120px) - 0.5px),
            var(--turquesa-gris) var(--grid-size, 120px)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--grid-size, 120px) - 0.5px),
            var(--turquesa-gris) calc(var(--grid-size, 120px) - 0.5px),
            var(--turquesa-gris) var(--grid-size, 120px)
        );
    background-position: calc(100% - var(--grid-offset-x, 2.5vw)) top;
    background-repeat: repeat;
}

/* Parallax grid stays open on the right — no closing vertical stroke. */
.parallax-image-col::before {
    border-right: none;
}

.single-articulo .single-col-66:has(.img-col) {
    --grid-size: clamp(96px, 12vw, 160px);
    --grid-offset-x: 2.5vw;
    position: relative;
    overflow: visible;
}

.single-articulo .single-col-66:has(.img-col) > .img-col {
    position: relative;
    z-index: 1;
}

.parallax-image-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.parallax-image {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    opacity: 0;
    transform: translateX(-50%) scale(1.03);
    transition: opacity 0.45s ease, transform 0.6s ease;
}

.parallax-image.is-active {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.parallax-story--static {
    align-items: start;
}

.parallax-story--static .parallax-step {
    min-height: 0;
}

.parallax-story--static .parallax-image-col {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
}

/* Grid taller than the map so it sticks out past the top and bottom edges. */
.parallax-story--static .parallax-image-col::before {
    top: -8%;
    bottom: -8%;
    height: auto;
}

.parallax-story--static .parallax-image-wrap {
    height: auto;
    overflow: visible;
}

.parallax-story--static .parallax-image {
    position: relative;
    top: auto;
    left: auto;
    max-width: 80%;
    max-height: none;
    width: 80%;
    height: auto;
    opacity: 1;
    transform: none;
}

.parallax-story--static .parallax-image.is-active {
    transform: none;
}

.parallax .descanso {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax .descanso img,
.parallax .descanso .img-lqip {
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
}

.parallax .descanso.descanso-gallery {
    --grid-size: clamp(96px, 12vw, 160px);
    --grid-offset-x: 2.5vw;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 2vw;
    padding: calc(var(--grid-size) * 0.5) 0 calc(var(--grid-size) * 1.5);
    overflow: visible;
}

.parallax .descanso.descanso-gallery::before {
    border-right: none;
}

.descanso-gallery figure {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Same order, different vertical grid zones */
.descanso-gallery figure:nth-child(1) {
    margin-top: 0;
}

.descanso-gallery figure:nth-child(2) {
    margin-top: calc(var(--grid-size) * 1.25);
}

.descanso-gallery figure:nth-child(3) {
    margin-top: calc(var(--grid-size) * 0.5);
}

.parallax .descanso.descanso-gallery figure img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    display: block;
}

.descanso-gallery figure.gallery-figure-lg {
    flex: 1.2 1 0;
}

.descanso-gallery figure.gallery-figure-lg img {
    width: 120%;
    max-width: none;
}

.parallax .descanso.descanso-gallery figure.gallery-figure-sm img {
    width: 60%;
    max-width: 60%;
}

.parallax .descanso.descanso-gallery figure.gallery-figure-sm .gallery-detalle {
    width: 60%;
    max-width: 60%;
    height: auto;
    display: block;
    margin-top: calc(var(--grid-size) * 0.35);
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.descanso-gallery figcaption {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.vccb-cifras-gallery figure {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.85rem;
}

.vccb-cifra-frame {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.parallax .descanso.descanso-gallery.vccb-cifras-gallery figure img,
.parallax .descanso.descanso-gallery.vccb-cifras-gallery figure.gallery-figure-sm img {
    width: 100%;
    max-width: 100%;
}

.vccb-cifras-gallery .vccb-cifra {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 100%;
    margin: 0;
    line-height: 1.15;
}

.vccb-cifras-gallery figure.gallery-figure-sm .vccb-cifra {
    width: auto;
    max-width: 100%;
}

.vccb-cifras-gallery .vccb-cifra > span {
    background-color: var(--negro);
    color: var(--verde-2);
    padding: 0.08em 0.2em;
}

.vccb-cifras-gallery .vccb-cifra .num-number {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 300;
    color: var(--verde-2);
}

.vccb-cifras-gallery .vccb-cifra .num-label {
    display: inline;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--verde-2);
}

.vccb-cifras-gallery figcaption {
    flex: 0 1 42%;
    width: auto;
    max-width: 42%;
    margin-top: 0;
}

.single:has(.site-grid) .parallax.vccb-cifras::before {
    background-color: transparent;
}

.single:has(.site-grid) .vccb-cifras .descanso,
.single:has(.site-grid) .vccb-cifras .descanso.descanso-gallery,
.single:has(.site-grid) .vccb-cifras .descanso-gallery figure,
.single:has(.site-grid) .vccb-cifras .vccb-cifra {
    z-index: 2;
}

.parallax.vccb-cifras {
    --vccb-cifras-grid-size: clamp(96px, 12vw, 160px);
    --vccb-cifras-grid-offset-x: 5vw;
    --vccb-cifras-grid-offset-y: 0px;
    overflow: hidden;
    background-color: transparent;
}

.parallax.vccb-cifras::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(var(--vccb-cifras-grid-size) - 1px),
            var(--blanco) calc(var(--vccb-cifras-grid-size) - 1px),
            var(--blanco) var(--vccb-cifras-grid-size)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--vccb-cifras-grid-size) - 1px),
            var(--blanco) calc(var(--vccb-cifras-grid-size) - 1px),
            var(--blanco) var(--vccb-cifras-grid-size)
        );
    background-size:
        var(--vccb-cifras-grid-size) var(--vccb-cifras-grid-size);
    background-position:
        calc(0px - var(--vccb-cifras-grid-offset-x))
        calc(0px - var(--vccb-cifras-grid-offset-y));
    background-repeat: repeat;
}

.vccb-cifras-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.vccb-cifras-bg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

/* VCCB: schematic background + scattered field photos */
.vccb-terreno {
    --grid-size: clamp(96px, 12vw, 160px);
    --vccb-bg-zoom: 1;
    position: relative;
    overflow: visible;
    background-color: #e7eee6;
}

.vccb-terreno-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.vccb-terreno-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: 48% 42%;
    transform: translate(-50%, -50%) scale(var(--vccb-bg-zoom));
    pointer-events: none;
    user-select: none;
}

.vccb-terreno-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.75rem);
    width: 100%;
    padding: 5vw;
    box-sizing: border-box;
}

.vccb-terreno-scatter,
.vccb-terreno-mid,
.vccb-terreno-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.vccb-fig {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vccb-fig img {
    width: 100%;
    height: auto;
    display: block;
}

.vccb-terreno figcaption {
    width: 100%;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.vccb-terreno-scatter {
    gap: 2vw;
}

.vccb-fig--nido {
    width: 11%;
    margin-top: 0;
}

.vccb-fig--agua {
    width: 10%;
    margin-top: calc(var(--grid-size) * 0.45);
}

.vccb-fig--corredor {
    width: 20%;
    margin-top: calc(var(--grid-size) * 0.12);
}

.vccb-terreno-mid {
    gap: 4vw;
    align-items: flex-start;
}

.vccb-terreno-copy {
    width: 36%;
}

.vccb-terreno-copy h5 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}


.vccb-terreno h4 {
    margin: 0 0 1rem;
    font-weight: 600;
    font-size: var(--h4);
    text-transform: uppercase;
    letter-spacing: var(--tracking-spaced);
    line-height: var(--line-height-default);
}

.vccb-terreno p {
    margin: 0;
    font-size: var(--base);
    font-weight: 300;
    line-height: var(--line-height-spaced);
}

.vccb-terreno p + p {
    margin-top: 1em;
}

.vccb-fig--zorro {
    width: 22%;
    margin-top: 0;
}

.vccb-terreno-bottom {
    gap: 0;
    justify-content: flex-start;
    padding: 0;
}

.vccb-fig--condominio {
    width: 17%;
    margin-top: 0;
}

.vccb-fig--arboles {
    width: 19%;
    margin-top: calc(var(--grid-size) * 0.4);
    margin-left: calc(50% - 17% - 9.5%);
}

.vccb-terreno-guia {
    width: auto;
    align-self: stretch;
    box-sizing: border-box;
    margin: 0 -5vw -5vw;
    padding: 1.5rem 5vw 1.75rem;
    background-color: var(--negro);
    color: var(--blanco);
}

.vccb-terreno-guia h5,
.vccb-terreno-guia p {
    width: 36%;
    color: var(--blanco);
}

.vccb-terreno-guia p {
    font-size: 14px;
    line-height: 1.45;
}

.esquema-block {
    width: 100%;
    padding: 5vw 0;
}

.esquema-block > h4 {
    margin: 0 0 2vw;
    font-weight: 600;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: var(--tracking-spaced);
    line-height: var(--line-height-default);
}

.esquema-biodata-panel {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    z-index: 2;
    width: calc(100% - 10vw);
    margin-left: 5vw;
    margin-right: 5vw;
    box-sizing: border-box;
}

.esquema-float-title {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: var(--h5);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

.esquema-biodata-panel .esquema-container {
    width: 100%;
}

.parallax > .esquema-float-title {
    margin: 0 0 1.25rem;
}

.esquema-container:not(.is-ready) svg #data,
.esquema-container:not(.is-ready) svg #Layer_2,
.esquema-container:not(.is-ready) svg [id$="-Layer_2"] {
    visibility: hidden;
}

.ftr-articulo {
    position: relative;
    align-self: center;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    overflow: hidden;
    background-color: var(--verde-2);
    box-sizing: border-box;
}

.ftr-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 42%;
    padding: 5vw;
    box-sizing: border-box;
    color: var(--transferencia);
}

.ftr-content .single-col-33 {
    width: 100%;
}

.ftr-content p {
    margin: 0;
    font-size: var(--base);
    font-weight: 300;
    line-height: var(--line-height-spaced);
}

.ftr-content--split {
    flex-direction: column;
    max-width: 100%;
    padding-right: clamp(6.5rem, 14vw, 11rem);
}

.ftr-copy-cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10%;
    width: 100%;
}

.ftr-copy-cols .lead-flecha {
    width: 45%;
    margin: 0;
    font-size: var(--h6);
    font-weight: 300;
    line-height: var(--line-height-spaced);
}

.ftr-articulo-title {
    margin: 0 0 1rem;
    font-size: var(--h4);
    font-weight: 600;
    letter-spacing: var(--tracking-spaced);
    text-transform: uppercase;
}

/* Tall mark: slightly past the right edge */
.ftr-articulo .ftr-mark {
    position: absolute;
    right: -1.8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    width: clamp(4.5rem, 9vw, 7.5rem);
    height: auto;
    line-height: 0;
    pointer-events: none;
}

.ftr-articulo .ftr-mark img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right center;
}

.fondo-turquesa {
    background-color: var(--turquesa);
}

.mapa-colaboracion {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0 5vw;
    box-sizing: border-box;
}

.mapa-colaboracion-map {
    position: relative;
    width: 100%;
}

.mapa-colaboracion-num {
    position: absolute;
    top: 8%;
    right: 8%;
    z-index: 2;
    width: auto;
    max-width: min(280px, 42%);
    margin-top: 0;
    text-align: left;
    line-height: 1.15;
    pointer-events: none;
}

.mapa-colaboracion-num > span {
    background-color: var(--blanco);
    color: var(--negro);
}

.mapa-colaboracion-num .num-label {
    display: inline-block;
    font-size: 16px;
    line-height: 1.25;
}

.mapa-colaboracion-num .num-number {
    font-weight: 300;
}

.mapa-colaboracion-num .num-label-1 {
    margin-top: 0.35em;
    margin-left: -0.55em;
}

.mapa-colaboracion-num .num-label-2 {
    margin-left: 0.85em;
}

/* Sud map: keep clear of lista-sud (top-right overlay) */
.mapa-colaboracion-num--sud {
    top: auto;
    right: auto;
    bottom: 8%;
    left: 6%;
}

.mapa-svg-host {
    width: 100%;
    line-height: 0;
}

.mapa-svg-host svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Country label chips inside the inlined map.
   Chip fill class names change on SVG re-export — style via .mapa-label. */
.mapa-svg-host .mapa-label {
    cursor: pointer;
    pointer-events: auto;
}

.mapa-svg-host .mapa-label rect {
    fill: var(--turquesa-gris);
    animation: mapa-label-pulse 2.8s ease-in-out infinite;
}

.mapa-svg-host .mapa-label:hover rect,
.mapa-svg-host .mapa-label:focus-visible rect {
    animation: none;
    fill: var(--verde-3);
}

.mapa-svg-host .mapa-label.is-active rect {
    animation: none;
    fill: var(--verde-2);
}

@keyframes mapa-label-pulse {
    0%,
    100% {
        fill: var(--turquesa-gris);
    }
    50% {
        fill: var(--verde-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapa-svg-host .mapa-label rect {
        animation: none;
    }
}

.mapa-instituciones-card {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 4%;
    z-index: 2;
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--blanco);
    box-sizing: border-box;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

.colaboracion-sud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    width: 100%;
    padding: 4vw 5vw 6vw;
    box-sizing: border-box;
    align-items: start;
}

.colaboracion-sud-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2vw;
    min-height: 100%;
}

.h2-articulo {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--h4), 2.4vw + 0.85rem, var(--h1));
    font-weight: 300;
    line-height: 1.2;
    color: var(--blanco);
    text-wrap: pretty;
}

.colaboracion-sud-pajarito {
    position: relative;
    z-index: 0;
    align-self: flex-end;
    margin-top: auto;
    width: min(220px, 48%);
    height: auto;
    display: block;
    flex-shrink: 0;
}

.colaboracion-sud-media {
    position: relative;
    display: block;
    min-width: 0;
}

.colaboracion-sud-map {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: visible;
}

.colaboracion-sud-map > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.colaboracion-sud .lista-sud {
    position: absolute;
    top: 4%;
    right: 3%;
    z-index: 2;
    width: max-content;
    max-width: min(46%, 20rem);
    max-height: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    background: none;
    border-radius: 0;
    pointer-events: auto;
    font-size: 10px;
}

.colaboracion-sud .lista-sud ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    font-size: 10px;
}

.colaboracion-sud .lista-sud li {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0.15em 0.4em;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--negro);
    background-color: var(--verde-2);
    text-indent: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

@media (max-width: 1200px) {

     .article-btn {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    
    .colaboracion-sud {
        grid-template-columns: 1fr;
        padding: 6vw 20px 8vw;
        gap: 8vw;
        overflow: visible;
    }

    .colaboracion-sud-copy {
        gap: 6vw;
    }

    .h2-articulo {
        font-size: var(--h4);
    }

    .colaboracion-sud-pajarito {
        width: min(180px, 42%);
    }

    /* Mobile: list stacks below map; map height matches list */
    .colaboracion-sud-media {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5vw;
    }

    .colaboracion-sud-map {
        display: block;
        position: relative;
        overflow: hidden;
        height: var(--sud-list-h, auto);
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .colaboracion-sud-map > img {
        position: absolute;
        top: 0;
        left: 0;
        inset: auto;
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: 28% center;
    }

    .colaboracion-sud .lista-sud {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        z-index: 1;
        width: max-content;
        max-width: 100%;
        margin: 0;
        align-self: flex-start;
        font-size: 10px;
    }

    .colaboracion-sud .lista-sud ul,
    .colaboracion-sud .lista-sud li {
        font-size: 10px;
    }
}

.mapa-instituciones-card .span-lista {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: var(--micro);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.3;
    margin: 0 0 0.75em;
    color: var(--verde-2);
}

.mapa-instituciones-card ul {
    list-style-type: disc;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.mapa-instituciones-card li {
    font-family: var(--font-mono);
    font-size: var(--micro);
    font-weight: 400;
    line-height: 1.35;
    text-indent: -1em;
    padding-left: 1em;
}

.mapa-colaboracion > .lista-redes {
    width: 100%;
    max-width: 90rem;
    margin: 3vw auto 0;
    padding: 0 5vw;
    box-sizing: border-box;
    color: var(--blanco);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw 4vw;
}

.mapa-colaboracion > .lista-redes ul {
    list-style-type: disc;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.mapa-colaboracion > .lista-redes li {
    font-family: var(--font-mono);
    font-size: var(--micro);
    font-weight: 400;
    line-height: 1.35;
    text-indent: -1em;
    padding-left: 1em;
}

.mapa-colaboracion > .lista-redes .span-lista {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: var(--micro);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.3;
    margin-top: 0.35em;
    margin-bottom: 0.2em;
    list-style: none;
    text-indent: 0;
    padding-left: 0;
}

.mapa-colaboracion-steps {
    display: none;
}

@media (max-width: 1200px) {
    .mapa-colaboracion {
        padding: 0 0 8vw;
    }

    .mapa-instituciones-card {
        left: 20px;
        right: 20px;
        bottom: 3%;
        max-width: none;
        padding: 1rem 1.15rem;
    }

    .mapa-colaboracion > .lista-redes {
        grid-template-columns: 1fr;
        padding: 0 20px;
        margin-top: 6vw;
        gap: 6vw;
    }
}

/* Mobile: world map as three vertical pages (Américas / Europa–África / Oceanía) */
@media (max-width: 768px) {
    .mapa-colaboracion-map.is-paged {
        overflow: hidden;
        /* One third of the SVG width, full height */
        aspect-ratio: calc(2487.1 / 3) / 1288.1;
    }

    .mapa-colaboracion-map.is-paged .mapa-svg-host {
        position: absolute;
        top: 0;
        left: 0;
        width: 300%;
        height: 100%;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        touch-action: pan-y;
    }

    .mapa-colaboracion-map.is-paged .mapa-svg-host svg {
        width: 100%;
        height: 100%;
    }

    .mapa-colaboracion-map.is-paged[data-mapa-step="0"] .mapa-svg-host {
        transform: translateX(0);
    }

    .mapa-colaboracion-map.is-paged[data-mapa-step="1"] .mapa-svg-host {
        transform: translateX(-33.3333%);
    }

    .mapa-colaboracion-map.is-paged[data-mapa-step="2"] .mapa-svg-host {
        transform: translateX(-66.6667%);
    }

    .mapa-colaboracion-map.is-paged .mapa-colaboracion-num {
        top: 4%;
        right: 4%;
        max-width: min(200px, 48%);
    }

    .mapa-colaboracion-map.is-paged .mapa-colaboracion-num .num-label {
        font-size: 12px;
    }

    .mapa-colaboracion-steps {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        margin: 1rem 20px 0;
    }

    .mapa-colaboracion-steps button {
        appearance: none;
        border: 0;
        margin: 0;
        padding: 0.45rem 0.75rem;
        background: transparent;
        color: var(--blanco);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1.2;
        cursor: pointer;
        opacity: 0.55;
        border-bottom: 2px solid transparent;
    }

    .mapa-colaboracion-steps button[aria-current="true"] {
        opacity: 1;
        border-bottom-color: var(--verde-2);
    }

    .mapa-colaboracion-map.is-paged .mapa-instituciones-card {
        bottom: 2%;
        max-height: 42%;
        overflow: auto;
    }
}

.single-titulo.largo {
    width: 80%;
}

@media (max-width: 1200px) {
    .single-articulo {
        padding: 0 5vw;
        gap: 8vw;
    }

    .single-articulo > .single-col-2 {
        flex-direction: column;
        align-items: stretch;
        gap: 8vw;
    }

    .colectores-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 8vw;
    }

    .lib-lead-media {
        flex-direction: column;
        align-items: stretch;
        gap: 8vw;
    }

    .lib-invasoras-panel .single-col-66 .img-figure,
    .lib-cierre .single-col-66 .img-figure,
    .lib-invasoras-panel .lib-especies-heading,
    .lib-invasoras-panel .lib-especies-lista {
        width: 100%;
    }

    .lib-bd-media {
        width: 100%;
        align-items: center;
        gap: 1rem;
    }

    .lib-bd-media .img-figure img {
        width: 80% !important;
    }

    .lib-bd-media .img-figure--sm {
        position: static;
        width: 28%;
        transform: none;
    }

    .lib-bd-media .img-figure--sm img,
    .lib-bd-media .img-figure--sm .img-lqip {
        width: 100% !important;
    }

    .lib-cifra-copy {
        margin-left: -1rem;
    }

    .lib-cifra-gallery {
        flex-direction: column;
        align-items: stretch;
        gap: 8vw;
        padding-top: 0;
    }

    .lib-cifra-gallery figure:nth-child(1),
    .lib-cifra-gallery figure:nth-child(2) {
        margin-top: 0;
        max-width: 100%;
    }

    .lib-cifra-gallery figure.gallery-figure-lg img {
        width: 100%;
    }

    .vccb-terreno {
        --vccb-bg-zoom: 1;
    }

    .vccb-terreno-inner {
        gap: 4.5vw;
        padding: 5vw;
    }

    .vccb-terreno-scatter,
    .vccb-terreno-mid,
    .vccb-terreno-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 4.5vw;
    }

    .vccb-fig--nido,
    .vccb-fig--agua,
    .vccb-fig--corredor,
    .vccb-fig--zorro,
    .vccb-fig--condominio,
    .vccb-fig--arboles,
    .vccb-terreno-copy {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .vccb-terreno-guia {
        width: auto;
        align-self: stretch;
        margin: 0 -5vw -5vw;
        box-sizing: border-box;
    }

    .vccb-terreno-guia h4,
    .vccb-terreno-guia h5,
    .vccb-terreno-guia p {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .vccb-terreno-bottom {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1.25vw;
        padding: 0;
    }

    .vccb-terreno-guia h5,
    .vccb-terreno-guia p {
        width: 100%;
    }

    .vccb-fig--nido,
    .vccb-fig--agua,
    .vccb-fig--condominio {
        width: 40%;
    }

    .vccb-fig--corredor,
    .vccb-fig--zorro,
    .vccb-fig--arboles {
        width: 50%;
    }

    .vccb-fig--agua,
    .vccb-fig--arboles {
        align-self: flex-end;
    }

    .lib-especies-lista {
        columns: 1;
    }

    .colectores-panel .single-col-33,
    .colectores-panel .single-col-66 {
        width: 100%;
    }

    /* Mobile/tablet: bajada first (DOM order), then lead */
    .lead-row > .single-col-33,
    .lead-row > .single-col-66 {
        order: 0;
    }

    .single-articulo .single-col-33 {
        width: 100%;
    }

    .single-articulo .single-col-66 {
        width: 100%;
        flex-direction: column;
        gap: 8vw;
    }

    .single-articulo .img-col,
    .single-articulo .img-col-1,
    .single-articulo .img-col-2 {
        width: 100%;
        align-self: stretch;
    }

    .single-articulo .img-col img,
    .single-articulo .img-col .img-lqip {
        width: 60%;
    }
}

@media screen and (max-width: 1024px) {
    .mobile-only {
        display: none;
    }

    .menu-trigger {
        display: none;
    }

    nav#access {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-end;
    }

    .menu-principal-container {
        position: static;
        z-index: auto;
        background: none;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        overflow: visible;
        padding: 0;
        font-size: inherit;
        color: inherit;
    }

    .menu-principal-container::before {
        content: none;
    }

    ul#menu-principal {
        flex-direction: row;
        align-items: center;
        max-width: none;
        text-align: right;
        font-family: var(--font-sans);
        font-size: 0.95em;
        font-weight: 400;
        color: var(--negro);
        gap: 0;
    }

    ul#menu-principal li {
        margin-right: 0 !important;
        white-space: nowrap;
        text-transform: none;
        margin-bottom: 0;
    }

    ul#menu-principal li:not(:last-of-type) {
        margin-right: 1em !important;
    }

    ul#menu-principal li a {
        padding: 0.75em 0;
        color: inherit;
    }

    ul#menu-principal li a:hover {
        color: inherit;
    }
}

@media (max-width: 768px) {

    #titulo-hero {

        transform: translate(0, 0);
    }

    .col-3 h2{
        font-size: var(--h3);
        margin-bottom: 20px;
    }

    #hero {
        padding: 10vw 20px;
    }

    #logo-hero {
        width: 8rem;
    }

    :root {
        --header-height: 130px;
    }

    #fake-header {
        height: var(--header-height);
    }

    ul#menu-principal {
        font-size: 0.9em;
    }

    #menu-principal > li:not(:last-of-type),
    ul#menu-principal li:not(:last-of-type) {
        margin-right: 0.85em !important;
    }

    footer,
    footer * {
        font-size: var(--micro);
    }

    footer {
        height: 180px;
        min-height: 180px;
        max-height: 180px;
        overflow: hidden;
    }

    #footer-content,
    body.single #footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        flex-direction: unset;
        align-items: stretch;
        justify-content: unset;
        height: 100%;
        min-height: 0;
        max-height: 180px;
        padding: 0;
    }

    footer.is-home #footer-content,
    body:not(.single) #footer-content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        max-height: 180px;
    }

    .footer-center {
        order: 0;
        grid-column: 2;
        padding: 8px 6px;
        gap: 0.35rem;
    }

    .footer-brand {
        justify-content: center;
        align-self: center;
        width: auto;
    }

    #logo-footer {
        display: block;
        max-width: clamp(3.6rem, 22vw, 6rem);
        max-height: 72px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-socials {
        gap: 0.4rem;
    }

    .footer-socials a {
        width: 0.95rem;
        height: 0.95rem;
    }

    .footer-nav {
        width: auto;
    }

    .footer-nav-card {
        min-height: 0;
        padding: 0;
    }

    .footer-nav--prev .footer-nav-card {
        border-right: 1px solid var(--negro);
        border-left: none;
        border-top: none;
    }

    .footer-nav--next .footer-nav-card {
        border-left: 1px solid var(--negro);
        border-right: none;
        border-top: none;
    }

    .footer-nav-copy {
        padding: 0.55rem 0.65rem;
        gap: 0.45rem;
    }

    .footer-nav-image {
        display: none;
    }

    .footer-nav-label {
        font-size: var(--micro);
    }

    .footer-nav-title {
        font-size: var(--micro);
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    li.row {
        padding: 40px 20px;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        row-gap: 32px;
    }

    .col-1 {
        order: 1;
        width: calc(100% / 12 * 2);
    }

    .col-2 {
        order: 2;
        width: 100%;
        padding-left: 0;
    }

    .col-3 {
        order: 3;
        width: 100%;
        padding: 0;
        margin-left: 0;
    }

    #hero h5 {
        font-size: var(--base);
        text-wrap: balance;
    }

    /* Number on the left, centered on the first line; text as a centered block */
    .single-titulo {
        --titulo-num-ratio: 0.75;
        --titulo-text-size: clamp(2rem, min(12vw, 8cqi), 64px);
        max-width: 100%;
        padding: 0 20px;
        margin-top: -0.5rem;
        gap: 1rem;
    }

    .single-epigrafe {
        font-size: var(--micro);
        text-wrap: balance;
    }

    /* Stack the whole first section into a single column, edge to edge.
       Home uses --header-height: 130px above; single stays on its own token. */
    .single {
        --header-height: 120px;
    }

    .single-content {
        gap: 8vw;
        margin-top: var(--header-height);
        padding-top: 0;
    }

    .investigaciones .colectores-panel:has(+ .vccb-terreno),
    .investigaciones .colectores-panel:has(+ .colectores-panel) {
        margin-bottom: -8vw;
    }

    .single-portada {
        width: calc(100% - 40px);
        margin: 0 20px;
        padding: 0;
    }

    .back-to-index {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        border-left: none;
        border-right: none;
        border-bottom: none;
        text-align: center;
        padding: 12px 20px;
        transform: translateY(100%);
        justify-content: space-between;
        gap: 0.5em;
    }

    .back-to-index.is-visible {
        transform: translateY(0);
    }

    .article-pager-index {
        padding: 0 1.25em;
    }

    .single-bajada {
        font-size: var(--h6);
    }

    .single-articulo {
        padding: 0 8vw;
    }

    .lead-flecha {
        font-size: var(--base);
    }

    .single-col-2.fondo-blanco.ltser-map {
        display: block;
    }

    .ltser-map-wrap .ltser-map-img--horiz {
        display: none;
    }

    .ltser-map-wrap .ltser-map-img--vert {
        display: block;
    }

    .single-articulo .img-col img,
    .single-articulo .img-col .img-lqip {
        width: 100%;
    }

    .img-figure {
        margin-left: auto;
        margin-right: auto;
    }

    .parallax-story {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .parallax-story--static {
        gap: 4vw;
    }

    .parallax-story--static .parallax-image {
        max-width: 80%;
        width: 80%;
    }

    .parallax .descanso.descanso-gallery {
        flex-direction: column;
        gap: 8vw;
        padding: 8vw 0;
    }

    .descanso-gallery figure:nth-child(1),
    .descanso-gallery figure:nth-child(2),
    .descanso-gallery figure:nth-child(3) {
        margin-top: 0;
    }

    .descanso-gallery figure.gallery-figure-lg img {
        width: 100%;
        max-width: 100%;
    }

    .vccb-cifras-gallery figure.gallery-figure-sm .vccb-cifra {
        width: auto;
        max-width: 100%;
    }

    .vccb-cifras-gallery figcaption {
        flex: 0 1 36%;
        max-width: 36%;
    }

    /* Image pinned to the top half, text scrolls through the bottom half */
    .parallax-image-col {
        order: 1;
        position: sticky;
        top: 0;
        height: 50vh;
        z-index: 2;
        background-color: var(--blanco);
    }

    /* Open grid on both sides in mobile */
    .parallax-image-col::before,
    .single-articulo .single-col-66:has(.img-col)::before,
    .parallax .descanso.descanso-gallery::before,
    .colectores-panel .single-col-66::before {
        left: -5vw;
        right: -5vw;
        border-right: none;
        background-position: calc(50% + var(--grid-offset-x, 2.5vw)) top;
    }

    .parallax-story--static .parallax-image-col {
        order: 0;
        position: relative;
        top: auto;
        height: auto;
        background-color: transparent;
    }

    .investigaciones .parallax-story--static .parallax-image-col {
        z-index: 0;
    }

    .parallax-text-col {
        order: 2;
        position: relative;
        z-index: 1;
    }

    .parallax-story--static .parallax-text-col {
        order: 0;
    }

    .parallax-image {
        top: 50%;
        max-height: 44vh;
        transform: translate(-50%, -50%) scale(1.03);
    }

    .parallax-image.is-active {
        transform: translate(-50%, -50%) scale(1);
    }

    .parallax-story--static .parallax-image,
    .parallax-story--static .parallax-image.is-active {
        top: auto;
        max-height: none;
        transform: none;
    }

    .parallax-step {
        min-height: 60vh;
        padding: 5vh 0 0;
        justify-content: flex-start;
    }

    .parallax-story--static .parallax-step {
        min-height: 0;
        padding: 0;
    }

    .ftr-articulo {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 0;
    }

    .ftr-content {
        max-width: min(100%, 28rem);
        padding: 8vw 20px;
    }

    .ftr-content--split {
        max-width: 100%;
        padding-right: 20px;
    }

    .ftr-copy-cols {
        flex-direction: column;
        gap: 1.25rem;
    }

    .ftr-copy-cols .lead-flecha {
        width: 100%;
        font-size: var(--base);
    }

    .ftr-articulo-title {
        font-size: var(--h5);
        padding-right: 4.5rem;
    }

    .ftr-content p {
        font-size: var(--base);
        padding-right: 4.5rem;
    }

    .ftr-articulo .ftr-mark {
        right: -5%;
        top: 50%;
        transform: translateY(-50%);
        width: clamp(3.75rem, 22vw, 5.5rem);
    }

    .ftr-articulo .ftr-mark img {
        width: 100%;
        height: auto;
    }
}