/**
 * Living Atlas — page-living-atlas.php y page-living-atlas-methods.php
 *
 * Va DENTRO del header/footer de la plataforma, así que convive con
 * main.min.css. Convenciones heredadas del tema:
 *   - html { font-size: 62.5% }  →  1rem = 10px  (1.6rem = 16px)
 *   - Tipografía: Inter 4 variable (ejes wght 100–900 y opsz 14–32), alojada
 *     en assets/fonts/inter (la CSP bloquea Google Fonts). Pesos, tracking y
 *     rasgos OpenType salen de las variables --wght-*, --track-* y --features;
 *     el ajuste por nivel está en el bloque «Inter» al final del archivo.
 *   - Paleta: teal #184a4e, menta #6be49b, verde #24a888, coral #e75f56,
 *     turquesa #1ea7a7, crema #fef5e6, ámbar #fbcb83, menta claro #e1faeb
 *
 * Todo cuelga de .atl. El reset va con :where() (especificidad 0) para que
 * cualquier clase de componente gane sin !important.
 * Puntos de corte: 768px y 1024px.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable.woff2") format("woff2-variations"),
         url("../fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2-variations"),
         url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

.atl {
    --deep: #184a4e;
    --deeper: #0f3538;
    --mint: #6be49b;
    --mint-soft: #e1faeb;
    --green: #24a888;
    --leaf: #009540;
    --teal: #1ea7a7;
    --teal-soft: #a9dddd;
    --cream: #fef5e6;
    --sand: #f6ead6;
    --amber: #fbcb83;
    --coral: #e75f56;
    --coral-deep: #bf382f;
    --ink: #184a4e;
    --muted: #4f6b6d;
    --line: #d9e2df;
    --white: #ffffff;
    --radius: 1.2rem;
    --radius-sm: .6rem;
    --shadow-soft: 0 .2rem .4rem rgb(24 74 78 / .06), 0 1.2rem 3.2rem -1.2rem rgb(24 74 78 / .22);
    --shadow-lift: 0 .4rem .8rem rgb(24 74 78 / .08), 0 2.4rem 4.8rem -1.6rem rgb(24 74 78 / .32);
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: var(--font-sans);
    --font-display: var(--font-sans);
    /* Pesos del eje wght: al ser variable, valen los intermedios (550, 650…). */
    --wght-thin: 200;
    --wght-light: 300;
    --wght-regular: 400;
    --wght-medium: 500;
    --wght-label: 650;
    --wght-bold: 720;
    --wght-heavy: 800;
    /* Inter abre mucho a tamaños grandes: se cierra el tracking al crecer. */
    --track-display: -.035em;
    --track-title: -.025em;
    --track-snug: -.011em;
    --track-caps: .08em;
    /* cv05 «l» con cola y cv08 «I» con remates: evitan confundir l/I/1 en
       nombres de capas y cifras. calt = flechas y guiones contextuales. */
    --features: "cv05" 1, "cv08" 1, "calt" 1;
    --features-num: "cv05" 1, "cv08" 1, "tnum" 1, "zero" 0;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --offset: 0px; /* altura del header global fijo; la actualiza atlas-motion.js */

    position: relative;
    overflow-x: clip;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: var(--wght-regular);
    line-height: 1.6;
    letter-spacing: var(--track-snug);
    font-optical-sizing: auto; /* eje opsz: trazo más fino y cerrado en titulares */
    font-feature-settings: var(--features);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Reset acotado (especificidad 0) ---------- */

:where(.atl) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.atl) :where(h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote) { margin: 0; }
:where(.atl) :where(ol, ul) { padding: 0; list-style: none; }
:where(.atl) :where(img, video, svg) { display: block; }
:where(.atl) :where(img) { max-width: 100%; height: auto; }
:where(.atl) :where(a) { color: inherit; text-decoration: none; }
:where(.atl) :where(button, input) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.atl) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; }
:where(.atl) :where(button:disabled) { cursor: not-allowed; }
:where(.atl) :where(summary) { list-style: none; }
:where(.atl) :where(summary::-webkit-details-marker) { display: none; }
:where(.atl) :focus-visible { outline: .3rem solid var(--teal); outline-offset: .3rem; border-radius: .4rem; }
.atl [hidden] { display: none !important; }
.atl .atl-icon { flex-shrink: 0; pointer-events: none; }

.atl-wrap {
    width: 100%;
    max-width: 136rem;
    margin-inline: auto;
    padding-inline: 2rem;
}
@media (min-width: 768px) { .atl-wrap { padding-inline: 4rem; } }

/* ---------- Tipografía ---------- */

.atl-title {
    margin-top: 1.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 4.2vw, 5rem);
    line-height: 1.04;
    letter-spacing: -.01em;
    color: var(--deep);
    text-wrap: balance;
}
.atl-title--md { font-size: clamp(2.6rem, 3.2vw, 3.8rem); }
.atl-title--xl { font-size: clamp(3.6rem, 6vw, 7.2rem); line-height: .98; }
.atl-title--light { color: var(--white); }
.atl-title__soft { color: var(--green); }

.atl-eyebrow {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green);
}
.atl-eyebrow--mint { color: var(--mint); }

.atl .is-green { color: var(--green); }
.atl .is-coral { color: var(--coral-deep); }

/* Cinta con punta — la forma de las etiquetas «Step» de la portada. */
.atl-ribbon {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 3.2rem;
    padding: .5rem 2.4rem .5rem 1.4rem;
    background: var(--mint);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 0 100%, .7rem 50%);
}
.atl-ribbon--mint { background: var(--mint); }
.atl-ribbon--coral { background: var(--amber); }
.atl-ribbon--deep { background: var(--deep); color: var(--mint); }

/* Bloque resaltado — como el titular del hero de la portada. */
.atl-highlight {
    display: inline;
    padding: .2rem 1.2rem .4rem;
    background: var(--white);
    color: var(--deep);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.atl-highlight--deep { background: var(--deep); color: var(--mint); }

/* ---------- Botones ---------- */

.atl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 4.4rem;
    padding: 1rem 2.2rem;
    border: .2rem solid transparent;
    border-radius: .4rem;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.atl-btn .atl-icon { transition: transform .3s var(--ease); }
.atl-btn:hover .atl-icon { transform: translateX(.3rem); }
.atl-btn:disabled { opacity: .45; }

.atl-btn--deep { background: var(--deep); color: var(--white); box-shadow: 0 .3rem 0 var(--deeper); }
.atl-btn--deep:hover { background: var(--deeper); color: var(--mint); }
.atl-btn--deep:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 var(--deeper); }

.atl-btn--mint { background: var(--mint); color: var(--deep); box-shadow: 0 .3rem 0 #3fbf75; }
.atl-btn--mint:hover { background: #82ecad; }

.atl-btn--outline { border-color: var(--deep); background: transparent; color: var(--deep); }
.atl-btn--outline:hover { background: var(--deep); color: var(--white); }

.atl-btn--ghost { color: var(--deep); }
.atl-btn--ghost:hover { background: var(--mint-soft); }

.atl-btn--sm { min-height: 3.6rem; padding: .6rem 1.4rem; font-size: 1.4rem; }
.atl-btn--lg { min-height: 5.2rem; padding: 1.2rem 2.8rem; font-size: 1.7rem; }

.atl-round-btn {
    display: inline-flex;
    width: 4.4rem;
    height: 4.4rem;
    align-items: center;
    justify-content: center;
    border: .2rem solid var(--deep);
    border-radius: 50%;
    color: var(--deep);
    transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.atl-round-btn:hover { background: var(--deep); color: var(--mint); }
.atl-round-btn:disabled { opacity: .3; }
.atl-round-btn--light { border-color: rgb(255 255 255 / .55); color: var(--white); }
.atl-round-btn--light:hover { background: var(--mint); border-color: var(--mint); color: var(--deep); }

/* ---------- Detalles orgánicos ---------- */

.atl-contours {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.atl-contours path { vector-effect: non-scaling-stroke; }
.atl-contours .is-index { stroke-width: 1.8; }

.atl-brush {
    position: absolute;
    left: -2%;
    bottom: -.24em;
    width: 104%;
    height: .32em;
    overflow: visible;
    fill: none;
    stroke: var(--mint);
    stroke-width: 7;
    stroke-linecap: round;
    pointer-events: none;
}
.atl-brush .atl-brush__echo { stroke-width: 3.5; opacity: .55; }

/* ---------- 01 · Hero ---------- */

.atl-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--deep);
    color: var(--white);
}
.atl-hero__media { position: absolute; inset: -4% 0 0; z-index: -3; will-change: transform; }
.atl-hero__img,
.atl-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.atl-hero__video { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .atl-hero__video { display: none; } }

.atl-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(100deg, rgb(15 53 56 / .94) 0%, rgb(24 74 78 / .82) 38%, rgb(24 74 78 / .35) 72%, rgb(24 74 78 / .2) 100%),
        linear-gradient(0deg, rgb(15 53 56 / .55), transparent 40%);
}
.atl-hero__contours { z-index: -1; color: rgb(107 228 155 / .2); }

.atl-hero__inner {
    display: grid;
    align-items: end;
    gap: 4rem;
    min-height: min(78rem, calc(100svh - 14rem));
    padding-block: 9rem 13rem;
}
@media (min-width: 1024px) {
    .atl-hero__inner { grid-template-columns: minmax(0, 1fr) 30rem; gap: 6rem; }
}

.atl-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.atl-hero__chapter {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amber);
}

.atl-hero__title {
    max-width: 14ch;
    margin-top: 2.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4.4rem, 7.4vw, 9.6rem);
    line-height: .96;
    letter-spacing: -.015em;
    color: var(--white);
}
.atl-word { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.atl-word > span { display: inline-block; will-change: transform; }
.atl-hero__accent { position: relative; display: inline-block; color: var(--mint); white-space: nowrap; }

.atl-hero__lead {
    max-width: 52ch;
    margin-top: 2.8rem;
    font-size: clamp(1.7rem, 1.5vw, 2rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgb(255 255 255 / .9);
}

.atl-hero__search { max-width: 60rem; margin-top: 3.6rem; }
.atl-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2.8rem; margin-top: 1.6rem; }
.atl-hero__locate {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--white);
    transition: color .2s;
}
.atl-hero__locate:hover { color: var(--mint); }
.atl-hero__straight {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.5rem;
    color: rgb(255 255 255 / .85);
    text-decoration: underline;
    text-decoration-color: rgb(107 228 155 / .7);
    text-decoration-thickness: .2rem;
    text-underline-offset: .5rem;
    transition: color .2s;
}
.atl-hero__straight:hover { color: var(--mint); }
.atl-hero__status { margin-top: .8rem; font-size: 1.4rem; color: var(--amber); }

.atl-hero__edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 7rem;
    fill: var(--cream);
}

/* Buscador */
.atl-search { position: relative; }
.atl-search__box {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    border-radius: .8rem;
    background: var(--white);
    box-shadow: 0 1.6rem 3.2rem -1.2rem rgb(0 0 0 / .45);
    transition: box-shadow .25s var(--ease);
}
.atl-search__box:focus-within { box-shadow: 0 0 0 .4rem rgb(107 228 155 / .55), 0 1.6rem 3.2rem -1.2rem rgb(0 0 0 / .45); }
.atl-search__icon { margin-left: 1.2rem; color: var(--muted); }
.atl-search__input {
    flex: 1;
    min-width: 0;
    height: 4.8rem;
    padding: 0 1.2rem;
    border: 0;
    background: transparent;
    font-size: 1.7rem;
    color: var(--deep);
    outline: none;
}
.atl-search__input::placeholder { color: #7d9294; opacity: 1; }
.atl-search__input:focus-visible { outline: none; }
.atl-search__go { min-height: 4.8rem; width: 5.2rem; padding: 0; border-radius: .6rem; box-shadow: none; }

.atl-search__results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .8rem);
    z-index: 40;
    max-height: 30rem;
    overflow-y: auto;
    border-radius: .8rem;
    background: var(--white);
    color: var(--deep);
    box-shadow: var(--shadow-lift);
}
.atl-result {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.3rem 1.8rem;
    border-bottom: .1rem solid var(--line);
    text-align: left;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--deep);
}
.atl-result:last-child { border-bottom: 0; }
.atl-result:hover,
.atl-result:focus-visible { background: var(--mint-soft); outline: none; }
.atl-result small { font-size: 1.3rem; font-weight: 400; color: var(--muted); }
.atl-result--compact { padding: 1rem 1.2rem; font-size: 1.4rem; }
.atl-empty { padding: 1.4rem 1.8rem; font-size: 1.4rem; color: var(--muted); }

/* ---------- Secciones ---------- */

.atl-section { position: relative; isolation: isolate; }
.atl-section--cream { background: var(--cream); }
.atl-section__contours { z-index: -1; color: rgb(36 168 136 / .12); }

.atl-head { margin-bottom: 3.6rem; }
.atl-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 4rem; }
.atl-head--split .atl-title { max-width: 18ch; }
.atl-head__intro { max-width: 40ch; font-size: 1.7rem; font-weight: 300; line-height: 1.6; color: var(--muted); }

/* ---------- 02 · Mapa ---------- */

.atl-map-section { scroll-margin-top: 12rem; }
.atl-map-section__inner { padding-block: 6rem 9rem; }
@media (min-width: 768px) { .atl-map-section__inner { padding-block: 8rem 11rem; } }

.atl-mapbox {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-lift);
}
.atl-mapbox__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.2rem 2rem;
    border-bottom: .1rem solid var(--line);
    background: var(--white);
}
.atl-mapbox__place {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--deep);
}
.atl-mapbox__place .atl-icon { color: var(--coral); }
.atl-mapbox__actions { display: flex; align-items: center; gap: .8rem; }

.atl-mapbox__grid { position: relative; display: grid; }
@media (min-width: 1024px) {
    .atl-mapbox__grid { grid-template-columns: 30rem minmax(0, 1fr) 28rem; }
    .atl-mapbox__grid.is-collapsed { grid-template-columns: minmax(0, 1fr) 28rem; }
}

.atl-mapbox__canvas { position: relative; min-height: 44rem; background: #dfe9e6; }
@media (min-width: 768px) { .atl-mapbox__canvas { min-height: 62rem; } }
.atl-mapbox__leaflet { position: absolute; inset: 0; }
.atl-mapbox__loading { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--muted); }

/* Filtros */
.atl-filters { max-height: 34rem; overflow-y: auto; border-bottom: .1rem solid var(--line); background: #fbfdfc; }
.atl-mapbox__grid.is-collapsed .atl-filters { display: none; }
@media (min-width: 768px) { .atl-filters { max-height: 44rem; } }
@media (min-width: 1024px) { .atl-filters { max-height: 62rem; border-bottom: 0; border-right: .1rem solid var(--line); } }

.atl-filters__block { padding: 2rem; }
.atl-filters__block + .atl-filters__block { border-top: .1rem dashed var(--line); }
.atl-filters__label { margin-bottom: 1rem; }
.atl-filters__label--lg { margin-bottom: 1.2rem; }

.atl-field { position: relative; }
.atl-field .atl-icon { position: absolute; left: 1.2rem; top: 1.2rem; color: var(--muted); }
.atl-field input {
    width: 100%;
    height: 4.2rem;
    padding: 0 1.2rem 0 3.8rem;
    border: .15rem solid var(--line);
    border-radius: .6rem;
    background: var(--white);
    font-size: 1.5rem;
    color: var(--deep);
    transition: border-color .2s;
}
.atl-field input:focus { border-color: var(--green); outline: none; }
.atl-field input::placeholder { color: #8aa0a2; opacity: 1; }
.atl-filters__results { margin-top: .6rem; overflow: hidden; border: .1rem solid var(--line); border-radius: .6rem; background: var(--white); }

.atl-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.atl-chip {
    padding: .4rem 1.1rem;
    border: .1rem solid var(--line);
    border-radius: 2rem;
    background: var(--white);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--deep);
    transition: border-color .2s, background-color .2s;
}
.atl-chip:hover { border-color: var(--green); background: var(--mint-soft); }

.atl-options { display: grid; gap: .4rem; }
.atl-option {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 4rem;
    align-items: center;
    padding: .8rem 1.2rem .8rem 1.6rem;
    border-radius: .6rem;
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--deep);
    transition: background-color .2s, padding-left .25s var(--ease);
}
.atl-option:hover { background: var(--mint-soft); }
.atl-option[aria-pressed="true"] { background: var(--mint-soft); font-weight: 500; }

.atl-further { margin-top: 1.6rem; padding-top: 1.6rem; border-top: .1rem dashed var(--line); }
.atl-further__list { margin-top: .6rem; }
.atl-check { display: flex; align-items: flex-start; gap: .8rem; padding-block: .5rem; font-size: 1.4rem; cursor: pointer; }
.atl-check input { width: 1.6rem; height: 1.6rem; margin: .2rem 0 0; accent-color: var(--green); }
.atl-check--loose { padding-block: 0; }
.atl-checks { display: grid; gap: .8rem; }
.atl-link-btn { margin-top: .6rem; font-size: 1.3rem; font-weight: 500; color: var(--green); text-decoration: underline; text-underline-offset: .4rem; }
.atl-link-btn:hover { color: var(--deep); }
.atl-sources { margin-top: .6rem; padding-bottom: .6rem; }
.atl-sources > div + div { margin-top: 1rem; }

.atl-small { font-size: 1.4rem; line-height: 1.6; color: var(--muted); }
.atl-small strong { font-weight: 500; color: var(--deep); }

/* Lectura (derecha) */
.atl-reading { padding: 2.2rem; border-top: .1rem solid var(--line); background: var(--white); }
@media (min-width: 1024px) { .atl-reading { border-top: 0; border-left: .1rem solid var(--line); } }
.atl-reading__title { margin-top: .8rem; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; color: var(--deep); }
.atl-reading__text { margin-top: 1rem; font-size: 1.5rem; line-height: 1.6; color: var(--muted); }
.atl-reading__block { margin-top: 2rem; padding-top: 1.6rem; border-top: .1rem dashed var(--line); }
.atl-reading__block .atl-small { margin-top: .6rem; }
.atl-reading__goals { margin-top: 1rem; font-size: 1.3rem; line-height: 1.5; color: var(--green); font-weight: 500; }
.atl-nearby {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem .4rem;
    border-bottom: .1rem solid var(--line);
    text-align: left;
    font-size: 1.4rem;
    color: var(--deep);
    transition: background-color .2s, padding-left .2s var(--ease);
}
.atl-nearby:hover { background: var(--mint-soft); padding-left: .8rem; }
.atl-nearby strong { font-weight: 500; }
.atl-nearby span { flex-shrink: 0; color: var(--muted); }
.atl-reading__cta { margin-top: 1.2rem; }

/* Tarjeta flotante */
.atl-popup {
    position: absolute;
    bottom: 5.6rem;
    left: 1.2rem;
    z-index: 500;
    max-width: min(30rem, calc(100% - 6rem));
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-lift);
    animation: atl-pop .35s var(--ease);
}
@keyframes atl-pop { from { opacity: 0; transform: translateY(.8rem) scale(.98); } }
.atl-popup__close { position: absolute; right: .4rem; top: .4rem; display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 50%; }
.atl-popup__close:hover { background: var(--mint-soft); }
.atl-popup__name { padding-right: 2.4rem; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--deep); }
.atl-popup__meta { margin-top: .4rem; font-size: 1.3rem; color: var(--muted); }
.atl-popup__link { margin-top: .6rem; font-size: 1.3rem; font-weight: 500; color: var(--green); }
.atl-popup__link:hover { text-decoration: underline; }

/* Leyenda */
.atl-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 2.4rem;
    padding: 1.2rem 2rem;
    border-top: .1rem solid var(--line);
    background: #fbfdfc;
    font-size: 1.3rem;
    color: var(--muted);
}
.atl-dot { display: inline-block; width: 1rem; height: 1rem; margin-right: .8rem; border-radius: 50%; vertical-align: middle; }
.atl-dot--deep { background: var(--deep); box-shadow: 0 0 0 .2rem var(--white), 0 0 0 .3rem var(--mint); }
.atl-dot--coral { background: rgb(231 95 86 / .35); box-shadow: inset 0 0 0 .15rem var(--coral); }

/* Nota de procedencia «i» */
.atl-source__toggle { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.3rem; color: var(--muted); text-decoration: underline; text-underline-offset: .4rem; transition: color .2s; }
.atl-source__toggle:hover { color: var(--deep); }
.atl-source__i { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: .15rem solid currentColor; border-radius: 50%; font-size: 1rem; font-weight: 700; text-decoration: none; }
.atl-source__panel { margin-top: 1rem; padding: 1.4rem; border-radius: var(--radius-sm); background: var(--cream); font-size: 1.3rem; line-height: 1.55; color: var(--muted); }
.atl-source__panel > div + div { margin-top: .8rem; }
.atl-source__panel dt { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.atl-source__panel dd { margin-top: .2rem; color: var(--deep); }
.atl-source__links { display: flex; flex-wrap: wrap; gap: 1.6rem; padding-top: .4rem; }
.atl-source__links a { font-weight: 500; color: var(--green); text-decoration: underline; text-underline-offset: .4rem; }
.atl-source__links a:hover { color: var(--deep); }
.atl-source--mt { margin-top: .4rem; }
.atl-source--mt3 { margin-top: 1.2rem; }

/* Leaflet */
.atl .leaflet-container { background: #dfe9e6; font-family: var(--font-body); font-size: 1.2rem; }
.atl .atlas-basemap { filter: grayscale(.85) sepia(.18) hue-rotate(115deg) brightness(1.06) contrast(.88); }
.atl .leaflet-control-attribution { font-size: 1.1rem; background: rgb(255 255 255 / .8); }
.atl .leaflet-control-attribution a { color: var(--green); }
.atl .leaflet-bar { border: 0; border-radius: .6rem; overflow: hidden; box-shadow: var(--shadow-soft); }
.atl .leaflet-bar a { width: 3.4rem; height: 3.4rem; line-height: 3.4rem; color: var(--deep); font-size: 1.8rem; }
.atl .leaflet-bar a:hover { background: var(--mint-soft); }
.atl .leaflet-tooltip { padding: .6rem 1rem; border: 0; border-radius: .6rem; background: var(--deep); color: var(--white); font-family: var(--font-body); font-size: 1.3rem; box-shadow: var(--shadow-soft); }
.atl .leaflet-tooltip-top::before { border-top-color: var(--deep); }

/* «How to read this map» */
.atl-howto { margin-top: 2rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.atl-howto summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.2rem;
    padding: 1.8rem 2.2rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--deep);
}
.atl-howto summary small { font-family: var(--font-body); font-size: 1.4rem; font-weight: 400; color: var(--muted); }
.atl-howto__grid { display: grid; gap: 2.4rem; padding: 0 2.2rem 2.4rem; }
.atl-howto__title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.atl-howto p { margin-top: .6rem; font-size: 1.5rem; line-height: 1.65; color: var(--muted); }
@media (min-width: 768px) { .atl-howto__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.atl-howto__plus,
.atl-care__plus { position: relative; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--mint); }
.atl-howto__plus::before, .atl-howto__plus::after,
.atl-care__plus::before, .atl-care__plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.1rem;
    height: .2rem;
    border-radius: .2rem;
    background: var(--deep);
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease);
}
.atl-howto__plus::after, .atl-care__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .atl-howto__plus::after,
details[open] > summary .atl-care__plus::after { transform: translate(-50%, -50%) rotate(0deg); }

/* «Your place at a glance» */
.atl-place {
    scroll-margin-top: 14rem;
    margin-top: 2rem;
    padding: 3rem 2.2rem;
    border-radius: var(--radius);
    border: .2rem dashed rgb(36 168 136 / .35);
    background: rgb(255 255 255 / .6);
}
.atl-place__title { margin-top: .6rem; font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1.1; color: var(--deep); }
.atl-place__lead { max-width: 70ch; margin-top: .8rem; font-size: 1.6rem; line-height: 1.6; color: var(--muted); }
.atl-place__grid { display: grid; gap: 2.8rem; margin-top: 2.6rem; padding-top: 2.6rem; border-top: .1rem dashed var(--line); }
.atl-place__grid p:not(.atl-eyebrow) { margin-top: .8rem; font-size: 1.5rem; line-height: 1.65; color: var(--muted); }
.atl-place__grid .atl-place__meta { margin-top: 1rem; font-size: 1.3rem; color: var(--green); font-weight: 500; }
.atl-place__story-title { margin-top: .8rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--deep); }
.atl-place__cta { margin-top: 1.6rem; }
@media (min-width: 768px) {
    .atl-place { padding: 3.6rem 4rem; }
    .atl-place__grid { grid-template-columns: repeat(2, 1fr); }
}
.atl-place.is-filled { border-style: solid; border-color: transparent; background: var(--white); box-shadow: var(--shadow-soft); }

/* ---------- 04 · Seen from above ---------- */

.atl-stories {
    scroll-margin-top: 12rem;
    overflow: hidden;
    padding-block: 9rem;
    background: var(--deep);
    color: var(--white);
}
@media (min-width: 768px) { .atl-stories { padding-block: 11rem; } }
.atl-stories__contours { z-index: -1; color: rgb(107 228 155 / .1); }

.atl-stories__head { display: grid; gap: 2.4rem; }
@media (min-width: 768px) { .atl-stories__head { grid-template-columns: 1fr auto; align-items: end; } }
.atl-stories__title { max-width: 17ch; }
.atl-stories__lead { max-width: 60ch; margin-top: 2rem; font-size: 1.8rem; font-weight: 300; line-height: 1.6; color: rgb(255 255 255 / .8); }
.atl-stories__arrows { display: flex; gap: 1rem; }

.atl-wheel { position: relative; isolation: isolate; height: clamp(40rem, 50vw, 66rem); margin-top: 5rem; }
.atl-wheel:focus-visible { outline: .3rem solid var(--mint); outline-offset: .6rem; }
.atl-wheel__arc {
    position: absolute;
    top: 7%;
    left: 50%;
    width: min(104vw, 150rem);
    height: 90%;
    border: .1rem dashed rgb(107 228 155 / .35);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.atl-wheel__photo {
    position: absolute;
    top: 4%;
    left: 50%;
    width: min(58%, 76rem);
    height: 86%;
    overflow: hidden;
    border-radius: 1.6rem;
    box-shadow: 0 3rem 6rem -2rem rgb(0 0 0 / .55);
    transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
}
.atl-wheel__photo.is-center { z-index: 3; opacity: 1; transform: translateX(-50%); }
.atl-wheel__photo.is-left { z-index: 2; opacity: .55; filter: saturate(.6); transform: translateX(-112%) translateY(9%) rotate(-5deg) scale(.74); }
.atl-wheel__photo.is-right { z-index: 2; opacity: .55; filter: saturate(.6); transform: translateX(12%) translateY(9%) rotate(5deg) scale(.74); }
.atl-wheel__photo.is-hidden { z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) scale(.6); }
.atl-wheel__photo.is-left:hover, .atl-wheel__photo.is-right:hover { opacity: .8; filter: none; }

.atl-wheel__trigger { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; text-align: left; }
.atl-wheel__trigger:focus-visible { outline: .3rem solid var(--mint); outline-offset: -.3rem; }
.atl-wheel__trigger img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease); }
.atl-wheel__photo.is-center:hover .atl-wheel__trigger img { transform: scale(1.04); }
.atl-wheel__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(15 53 56 / .92), rgb(15 53 56 / .2) 50%, transparent 70%); }
.atl-wheel__caption { position: absolute; inset-inline: 0; bottom: 0; z-index: 10; padding: 2.4rem; }
.atl-wheel__kicker { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.atl-wheel__title { display: block; margin-top: .4rem; font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1.05; color: var(--white); }
.atl-wheel__hint { display: none; align-items: center; gap: .6rem; margin-top: 1rem; font-size: 1.4rem; color: rgb(255 255 255 / .8); }
.atl-wheel__photo.is-center .atl-wheel__hint { display: inline-flex; }
.atl-wheel__photo.is-open .atl-wheel__hint { visibility: hidden; }

.atl-wheel__glass {
    position: absolute;
    inset-inline: 1.2rem;
    top: 1.2rem;
    z-index: 20;
    max-height: calc(100% - 12rem);
    overflow-y: auto;
    padding: 2rem;
    border-radius: 1.2rem;
    border: .1rem solid rgb(255 255 255 / .25);
    background: rgb(15 53 56 / .7);
    -webkit-backdrop-filter: blur(1.8rem) saturate(130%);
    backdrop-filter: blur(1.8rem) saturate(130%);
    color: var(--white);
    opacity: 0;
    transform: translateY(-.8rem);
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.atl-wheel__photo:not(.is-center) .atl-wheel__glass { display: none; }
.atl-wheel__photo.is-center.is-open .atl-wheel__glass,
.atl-wheel__photo.is-center:has(.atl-wheel__trigger:focus-visible) .atl-wheel__glass { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { .atl-wheel__photo.is-center:hover .atl-wheel__glass { opacity: 1; transform: none; pointer-events: auto; } }
.atl-wheel__why { margin-top: 1rem; font-size: 1.6rem; line-height: 1.6; }
.atl-wheel__goals { margin-top: 1.4rem; padding-top: 1.2rem; border-top: .1rem solid rgb(255 255 255 / .2); font-size: 1.3rem; line-height: 1.5; color: var(--mint); }

@media (min-width: 768px) {
    .atl-wheel__caption { padding: 3.6rem; }
    .atl-wheel__title { font-size: 4rem; }
    .atl-wheel__glass { inset-inline: auto 2rem; top: 2rem; width: min(42%, 36rem); max-height: calc(100% - 4rem); padding: 2.6rem; }
}
@media (max-width: 767px) {
    .atl-wheel { height: min(52rem, 118vw); min-height: 38rem; }
    .atl-wheel__photo { width: 84%; height: 90%; }
    .atl-wheel__photo.is-left { transform: translateX(-106%) translateY(9%) rotate(-4deg) scale(.8); }
    .atl-wheel__photo.is-right { transform: translateX(6%) translateY(9%) rotate(4deg) scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .atl-wheel__photo, .atl-wheel__glass, .atl-wheel__trigger img { transition: none; } }

.atl-stories__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; }
.atl-stories__dots { display: flex; flex-wrap: wrap; gap: .4rem; }
.atl-stories__dot { display: inline-flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; }
.atl-stories__dot span { display: block; width: .9rem; height: .9rem; border-radius: 1rem; background: rgb(255 255 255 / .4); transition: width .35s var(--ease), background-color .35s; }
.atl-stories__dot:hover span { background: rgb(255 255 255 / .8); }
.atl-stories__dot.is-active span { width: 2.6rem; background: var(--mint); }
.atl-stories__counter { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; color: rgb(255 255 255 / .7); }

.atl-stories__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 3rem; border-top: .1rem dashed rgb(255 255 255 / .25); }
.atl-stories__status { max-width: 58ch; font-size: 1.5rem; line-height: 1.55; color: rgb(255 255 255 / .78); }

/* ---------- 05 · Stewardship & evidence ---------- */

.atl-trust { padding-block: 9rem; }
@media (min-width: 768px) { .atl-trust { padding-block: 12rem; } }
.atl-trust__kicker { max-width: 40ch; margin-top: 2.4rem; font-family: var(--font-display); font-size: clamp(2.2rem, 2.2vw, 2.8rem); font-weight: 700; line-height: 1.25; color: var(--green); }
.atl-trust__lead { max-width: 76ch; margin-top: 2rem; font-size: 1.8rem; font-weight: 300; line-height: 1.65; color: var(--muted); }

.atl-trust__grid { display: grid; gap: 2rem; margin-top: 5.6rem; }
@media (min-width: 768px) { .atl-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .atl-trust__grid { grid-template-columns: repeat(4, 1fr); } }
.atl-trust__item {
    padding: 3.2rem 2.6rem 3rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.atl-trust__item:hover { transform: translateY(-.4rem); box-shadow: var(--shadow-lift); }
@media (min-width: 1100px) { .atl-trust__item:nth-child(2n) { margin-top: 2.4rem; } }

.atl-trust__num { position: relative; display: inline-grid; width: 6.4rem; height: 5rem; place-items: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: #dd717f; }
.atl-trust__ring { position: absolute; inset: -.6rem -.8rem; width: calc(100% + 1.6rem); height: calc(100% + 1.2rem); fill: none; stroke: #dd717f; stroke-width: 2.2; stroke-linecap: round; overflow: visible; }
.atl-trust__name { margin-top: 2rem; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1.15; color: var(--deep); }
.atl-trust__item p { margin-top: 1.2rem; font-size: 1.5rem; line-height: 1.65; color: var(--muted); }

.atl-trust__note { max-width: 80ch; margin-top: 5.2rem; font-size: 1.5rem; line-height: 1.6; color: var(--muted); }
.atl-trust__cta { margin-top: 2.4rem; }

/* ---------- 06 · The next chapter ---------- */

/* Principal #184a4e, secundario #6be49b. */
.atl-next { overflow: hidden; padding-block: 12rem 10rem; background: var(--deep); color: var(--white); }
.atl-next__edge { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 6rem; fill: var(--white); }
.atl-next__contours { z-index: -1; color: rgb(107 228 155 / .16); }
.atl-next__inner { position: relative; }
.atl-next__title { margin-top: 2.8rem; font-family: var(--font-display); font-size: clamp(4rem, 6.4vw, 8rem); font-weight: 700; line-height: 1.22; color: var(--white); }
.atl-highlight--mint { background: var(--mint); color: var(--deep); }
.atl-next__accent { position: relative; display: inline-block; padding: 0 1.2rem; color: var(--mint); }
.atl-next__accent::after {
    /* trazo menta bajo la frase, en vez de un segundo bloque */
    content: "";
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    bottom: .06em;
    height: .08em;
    border-radius: 1rem;
    background: var(--mint);
    opacity: .55;
}
.atl-next__lead { max-width: 56ch; margin-top: 3rem; font-size: 1.9rem; line-height: 1.6; color: rgb(255 255 255 / .88); }
.atl-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; margin-top: 3.6rem; }
.atl-next__link { font-size: 1.6rem; font-weight: 500; color: var(--mint); text-decoration: underline; text-decoration-thickness: .2rem; text-underline-offset: .5rem; }
.atl-next__link:hover { color: var(--white); }
.atl-next__correction { max-width: 60rem; margin-top: 6rem; padding-top: 2.4rem; border-top: .2rem dashed rgb(107 228 155 / .45); font-size: 1.5rem; color: rgb(255 255 255 / .8); }
.atl-next__correction a { display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; font-weight: 500; color: var(--mint); text-decoration: underline; text-underline-offset: .4rem; }
.atl-next__correction a:hover { color: var(--white); }

/* ---------- Estado inicial de las animaciones ----------
   Solo se oculta lo animable cuando atlas-motion.js confirma que GSAP
   cargó (clase .atl-motion en .atl). Sin JS no se oculta nada. */
.atl-motion [data-atl-reveal],
.atl-motion .atl-trust__item[data-atl-reveal] { visibility: hidden; }
.atl-motion .atl-word > span { transform: translateY(105%); }
.atl-motion .atl-shelf__item { visibility: hidden; }

/* ---------- Página «Methods & data» ---------- */

.atl-methods { background: var(--white); }
.atl-methods__wrap { max-width: 136rem; margin-inline: auto; padding: 6rem 2rem; }
@media (min-width: 768px) { .atl-methods__wrap { padding: 8rem 4rem; } }
.atl-methods__hero { position: relative; overflow: hidden; background: var(--deep); color: var(--white); }
.atl-methods__eyebrow { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.atl-methods__title { max-width: 20ch; margin-top: 1.6rem; font-family: var(--font-display); font-size: clamp(3.6rem, 5vw, 6rem); font-weight: 700; line-height: 1.02; }
.atl-rule { display: block; width: 8.8rem; height: .4rem; margin-top: 2.4rem; border-radius: .4rem; background: var(--mint); }
.atl-methods__lead { max-width: 62ch; margin-top: 2.4rem; font-size: 1.8rem; font-weight: 300; line-height: 1.65; color: rgb(255 255 255 / .88); }
.atl-methods__section.is-secondary { background: var(--cream); }
.atl-methods__h2 { font-family: var(--font-display); font-size: clamp(2.6rem, 3vw, 3.6rem); font-weight: 700; line-height: 1.1; color: var(--deep); }
.atl-methods__section .atl-rule { background: var(--coral); }
.atl-methods__intro { max-width: 62ch; margin-top: 2.4rem; font-size: 1.6rem; line-height: 1.6; color: var(--muted); }
.atl-methods__grid { display: grid; gap: 2rem; margin-top: 3.2rem; }
@media (min-width: 768px) { .atl-methods__grid { grid-template-columns: 1fr 1fr; } }
.atl-methods__single { max-width: 60rem; margin-top: 3.2rem; }
.atl-card { padding: 2.6rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.atl-methods__section:not(.is-secondary) .atl-card { background: var(--cream); box-shadow: none; }
.atl-card__title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--deep); }
.atl-card__text { margin-top: 1rem; font-size: 1.5rem; line-height: 1.65; color: var(--muted); }
.atl-card__provider { margin-top: .4rem; font-size: 1.3rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.atl-card__dl { margin-top: 1.6rem; font-size: 1.5rem; }
.atl-card__dl > div + div { margin-top: 1rem; }
.atl-card__dl dt { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.atl-card__dl dd { margin-top: .2rem; line-height: 1.6; color: var(--deep); }
.atl-card__link { display: inline-block; margin-top: 1.6rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); text-decoration: underline; text-underline-offset: .4rem; }
.atl-card__link:hover { color: var(--deep); }
.atl-table-wrap { margin-top: 3.2rem; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.atl-table { width: 100%; min-width: 64rem; border-collapse: collapse; text-align: left; font-size: 1.5rem; background: var(--white); }
.atl-table thead tr { background: var(--deep); }
.atl-table th { padding: 1.4rem 1.8rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.atl-table td { padding: 1.4rem 1.8rem; vertical-align: top; border-top: .1rem solid var(--line); color: var(--muted); }
.atl-table td strong { font-weight: 500; color: var(--deep); }
.atl-methods__closing { max-width: 62ch; margin-top: 3.2rem; font-size: 1.6rem; line-height: 1.6; color: var(--muted); }
.atl-methods__back { display: inline-flex; margin-top: 2.4rem; padding: 1.2rem 2.4rem; border-radius: .4rem; background: var(--deep); font-size: 1.5rem; font-weight: 500; color: var(--white); box-shadow: 0 .3rem 0 var(--deeper); transition: background-color .25s; }
.atl-methods__back:hover { background: var(--deeper); color: var(--mint); }

/* ---------- Footer global en las páginas del atlas ----------
   Principal #184a4e, secundario menta #6be49b. Acotado por la clase de
   plantilla del <body>: el footer del resto del sitio no cambia. */

.page-template-page-living-atlas .c-global-footer,
.page-template-page-living-atlas-methods .c-global-footer {
    position: relative;
    padding: 4.8rem 0 4rem;
    border-top: .6rem solid #6be49b;
    background: #184a4e;
    color: rgb(255 255 255 / .85);
    font-size: 1.5rem;
    line-height: 1.6;
}
.page-template-page-living-atlas .c-global-footer a,
.page-template-page-living-atlas-methods .c-global-footer a {
    color: #6be49b;
    font-weight: 500;
    transition: color .2s;
}
.page-template-page-living-atlas .c-global-footer a:hover,
.page-template-page-living-atlas-methods .c-global-footer a:hover,
.page-template-page-living-atlas .c-global-footer a:focus-visible,
.page-template-page-living-atlas-methods .c-global-footer a:focus-visible {
    color: #ffffff;
}
.page-template-page-living-atlas .c-global-footer .social-icons a,
.page-template-page-living-atlas-methods .c-global-footer .social-icons a {
    display: inline-flex;
    width: 3.6rem;
    height: 3.6rem;
    align-items: center;
    justify-content: center;
    margin-right: .6rem;
    border: .15rem solid #6be49b;
    border-radius: 50%;
    color: #6be49b;
    transition: background-color .2s, color .2s;
}
.page-template-page-living-atlas .c-global-footer .social-icons a:hover,
.page-template-page-living-atlas-methods .c-global-footer .social-icons a:hover {
    background: #6be49b;
    color: #184a4e;
}
.page-template-page-living-atlas .c-global-footer .social-icons svg,
.page-template-page-living-atlas-methods .c-global-footer .social-icons svg { fill: currentColor; }

/* ======================================================================
   Brief de Steven (oct 2026): componentes nuevos
   ====================================================================== */

/* ---------- Hero: acciones ---------- */
.atl-hero__row { gap: 1.2rem 2.4rem; }
.atl-btn.atl-hero__locate { min-height: 4.8rem; padding: 1rem 2rem; color: var(--deep); }
.atl-btn.atl-hero__locate:hover { color: var(--deep); }
.atl-hero__straight .atl-icon { transition: transform .3s var(--ease); }
.atl-hero__straight:hover .atl-icon { transform: translateY(.3rem); }

/* ---------- 02 · Open full Atlas of Laudato Si’ ---------- */
.atl-mapbox__full { border-color: var(--deep); }
.atl-mapbox__full span[aria-hidden] { font-size: 1.2rem; }
@media (max-width: 600px) {
    .atl-mapbox__actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Atlas a pagina completa (?atlas=full): solo el mapa, ocupando la ventana. */
.atl--full .atl-map-section__inner { max-width: none; padding: 1.6rem 2rem 3rem; }
.atl-fullbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-bottom: 1.6rem; }
.atl-fullbar__title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--deep); }
.atl--full .atl-mapbox__canvas { min-height: calc(100vh - 26rem); min-height: calc(100dvh - 26rem); }
@media (min-width: 1024px) {
    .atl--full .atl-mapbox__grid { grid-template-columns: 32rem minmax(0, 1fr) 30rem; }
    .atl--full .atl-mapbox__grid.is-collapsed { grid-template-columns: minmax(0, 1fr) 30rem; }
    .atl--full .atl-filters { max-height: calc(100vh - 26rem); }
}

/* ---------- 03 · Ways to read the Atlas of Laudato Si’ (slider en bucle) ---------- */

.atl-thinking { padding-block: 8rem 9rem; background: var(--white); }
.atl-thinking__wrap { max-width: 136rem; margin-inline: auto; padding-inline: 2rem; }
@media (min-width: 768px) { .atl-thinking__wrap { padding-inline: 4rem; } }

.atl-thinking__head { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .atl-thinking__head { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.atl-thinking__lead { font-size: 1.8rem; font-weight: 300; line-height: 1.6; color: var(--deep); }
.atl-thinking__note { margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.6; color: var(--muted); }

.atl-thinking__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-top: 4rem; }
.atl-thinking__count { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--deep); }
.atl-thinking__count span { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.atl-thinking__arrows { display: flex; gap: .8rem; }

.atl-shelf {
    --cover-width: 30%;
    position: relative;
    display: flex;
    gap: 2rem;
    /* El anillo de la tarjeta activa sobresale .6rem: el contenedor con scroll
       necesita ese aire o lo recorta. Margen negativo = misma alineación. */
    margin: 2rem -1.2rem 0;
    padding: 2rem 1.2rem 2.4rem;
    scroll-padding-inline: 1.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y;
}
.atl-shelf::-webkit-scrollbar { display: none; }
.atl-shelf:not(.is-looping)::after { content: ""; flex: 0 0 calc(100% - var(--cover-width) - 2rem); }
.atl-shelf.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.atl-shelf.is-dragging button { cursor: grabbing; }
.atl-shelf__item { flex: 0 0 var(--cover-width); height: 27rem; scroll-snap-align: start; }

.atl-cover {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 4.6rem 2.6rem 2.6rem;
    border-radius: var(--radius);
    text-align: left;
    user-select: none;
    /* Cada tarjeta define --cover (fondo), --cover-ink (texto) y --cover-soft
       (tinte casi blanco del mismo color que toma al pasar el ratón). */
    background: var(--cover);
    color: var(--cover-ink);
    box-shadow: var(--shadow-soft);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.atl .atl-cover:hover,
.atl .atl-cover:focus-visible { transform: translateY(-.6rem); background: var(--cover-soft); color: var(--deep); box-shadow: var(--shadow-lift); }
.atl-cover.is-active { box-shadow: 0 0 0 .3rem var(--white), 0 0 0 .6rem var(--deep), var(--shadow-lift); }
/* El color va también en cada variante: .atl .is-green / .atl .is-coral
   (utilidades de texto de arriba) tienen más especificidad que .atl-cover
   y pintaban el texto del mismo tono que el fondo. */
.atl-cover.is-deep  { --cover: #0f4f4e; --cover-ink: #ffffff; --cover-soft: #e2eded; color: var(--cover-ink); }
.atl-cover.is-mint  { --cover: #57c9b8; --cover-ink: #0f4f4e; --cover-soft: #e8f7f4; color: var(--cover-ink); }
.atl-cover.is-green { --cover: #1d9f73; --cover-ink: #0f4f4e; --cover-soft: #e3f3ed; color: var(--cover-ink); }
.atl-cover.is-amber { --cover: #f8b12c; --cover-ink: #0f4f4e; --cover-soft: #fef3df; color: var(--cover-ink); }
.atl-cover.is-cream { --cover: #e6e1db; --cover-ink: #0f4f4e; --cover-soft: #f8f6f3; color: var(--cover-ink); }
.atl-cover.is-coral { --cover: #ef5a32; --cover-ink: #0f4f4e; --cover-soft: #fde8e2; color: var(--cover-ink); }
.atl-cover.is-active.is-deep { box-shadow: 0 0 0 .3rem var(--white), 0 0 0 .6rem var(--mint), var(--shadow-lift); }
/* El hover tiene más especificidad: la tarjeta activa conserva su anillo. */
.atl .atl-cover.is-active:hover,
.atl .atl-cover.is-active:focus-visible { box-shadow: 0 0 0 .3rem var(--white), 0 0 0 .6rem var(--deep), var(--shadow-lift); }

.atl-cover__tab {
    position: absolute;
    left: 2.6rem;
    top: 2.4rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.atl-cover__num {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-family: var(--font-display);
    font-size: 11rem;
    font-weight: 300;
    line-height: 1;
    opacity: .22;
}
.atl-cover.is-cream .atl-cover__num { opacity: .3; }
.atl-cover__body { position: relative; display: block; width: 100%; margin-top: auto; }
.atl-cover__verb { display: block; font-family: var(--font-display); font-size: 4rem; font-weight: 700; line-height: 1; text-transform: uppercase; }
.atl-cover__question { display: block; max-width: 30ch; min-height: 4.4em; margin-top: 1.2rem; font-size: 1.5rem; font-weight: 500; line-height: 1.4; }

.atl-explain {
    display: grid;
    align-content: start;
    gap: 2.4rem;
    min-height: 15rem;
    padding: 2.8rem;
    border-radius: var(--radius);
    background: var(--cream);
}
@media (min-width: 768px) { .atl-explain { grid-template-columns: 1.1fr 1fr; gap: 4rem; padding: 3.2rem; } }
.atl-explain__title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.2; color: var(--deep); text-wrap: balance; }
.atl-explain__verb { display: inline-block; margin-right: .6rem; padding: 0 .6rem; background: var(--mint); }
.atl-explain__text { margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.65; color: var(--muted); }
.atl-explain__cta { margin-top: 2rem; }
.atl-explain__dl > div { padding: 1.4rem 1.6rem; border-radius: var(--radius-sm); background: var(--white); }
.atl-explain__dl > div + div { margin-top: 1.2rem; }
.atl-explain__dl dt { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.atl-explain__dl dd { margin-top: .4rem; font-size: 1.5rem; line-height: 1.6; color: var(--deep); }

@media (max-width: 767px) {
    .atl-shelf { --cover-width: 70%; }
    .atl-shelf__item { height: 29rem; }
}
@media (max-width: 420px) { .atl-shelf { --cover-width: 86%; } }

/* ---------- 04 · Carrusel de capas: textos largos ---------- */
.atl-wheel__why { font-size: 1.5rem; }
.atl-wheel__goals strong { font-weight: 500; color: var(--white); }
.atl-wheel__credit { margin-top: 1rem; font-size: 1.2rem; font-style: italic; color: rgb(255 255 255 / .7); }
@media (min-width: 768px) { .atl-wheel__glass { width: min(48%, 42rem); } }

/* ---------- 05 · Ruta del investigador (GeoHub) ---------- */
/* A proposito distinto de Open full Atlas: bloque de documentacion, otra pestana. */
.atl-geohub {
    display: grid;
    gap: 1.6rem 2.4rem;
    align-items: center;
    margin-top: 4.8rem;
    padding: 2.4rem;
    border: .2rem dashed rgb(24 74 78 / .3);
    border-radius: var(--radius);
    background: rgb(255 255 255 / .7);
}
@media (min-width: 768px) { .atl-geohub { grid-template-columns: auto minmax(0, 1fr) auto; padding: 2.4rem 3.2rem; } }
.atl-geohub__icon { display: inline-grid; width: 5.6rem; height: 5.6rem; place-items: center; border-radius: 50%; background: var(--deep); color: var(--mint); }
.atl-geohub__support { font-size: 1.6rem; line-height: 1.6; color: var(--deep); }
.atl .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 06 · FAQ ---------- */
.atl-faq { padding-block: 8rem 9rem; background: var(--white); }
.atl-faq__inner { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .atl-faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8rem; align-items: start; } .atl-faq__head { position: sticky; top: 10rem; } }
.atl-faq__intro { margin-top: 2rem; font-size: 1.7rem; font-weight: 300; line-height: 1.65; color: var(--muted); }
.atl-faq__list { display: grid; gap: 1.2rem; }
.atl-faq__item { scroll-margin-top: 14rem; border-radius: var(--radius-sm); background: var(--cream); transition: background-color .25s; }
.atl-faq__item.is-open { background: var(--mint-soft); }
.atl-faq__q { margin: 0; }
.atl-faq__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.2rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--deep);
}
.atl-faq__btn:focus-visible { outline: .3rem solid var(--teal); outline-offset: -.3rem; border-radius: var(--radius-sm); }
.atl-faq__a { padding: 0 2.2rem 2.2rem; }
.atl-faq__a[hidden] { display: none; }
.atl-faq__a p { max-width: 64ch; font-size: 1.6rem; line-height: 1.7; color: var(--muted); }
.atl-faq__a a { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: .3rem; }
.atl-faq__plus { position: relative; flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--mint); }
.atl-faq__plus::before, .atl-faq__plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.1rem;
    height: .2rem;
    border-radius: .2rem;
    background: var(--deep);
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease);
}
.atl-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.atl-faq__btn[aria-expanded="true"] .atl-faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); }

/* ---------- 07 · Participacion ---------- */
.atl-btn--ghost-light { border-color: rgb(107 228 155 / .6); background: transparent; color: var(--white); }
.atl-btn--ghost-light:hover { border-color: var(--mint); background: rgb(107 228 155 / .12); color: var(--mint); }
.atl-next__correction { display: flex; align-items: flex-start; gap: 1rem; }
.atl-next__correction .atl-icon { margin-top: .3rem; color: var(--mint); }

/* Pie compacto del Atlas */
.atl-footlinks {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 2.4rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: .1rem solid rgb(255 255 255 / .15);
    font-size: 1.4rem;
}
.atl-footlinks a { display: inline-flex; align-items: center; gap: .4rem; color: rgb(255 255 255 / .8); transition: color .2s; }
.atl-footlinks a:hover { color: var(--mint); }

/* ======================================================================
   Página «Methods & data» con los componentes del atlas
   ====================================================================== */

/* Hero sin foto: mismo teal, curvas de nivel y borde ondulado. */
.atl-hero--plain { background: radial-gradient(120% 90% at 85% 20%, #1f5a5e 0%, var(--deep) 55%, var(--deeper) 100%); }
.atl-hero--plain .atl-hero__inner { min-height: 0; padding-block: 8rem 12rem; }
.atl-hero--plain .atl-hero__contours { color: rgb(107 228 155 / .18); }
.atl-hero__title--md { max-width: 18ch; font-size: clamp(4rem, 5.6vw, 7.2rem); }

.atl-m-section { padding-block: 8rem 9rem; }
.atl-m-section--white { background: var(--white); }
.atl-m-section .atl-trust__head { margin-bottom: 0; }
.atl-m-section .atl-trust__grid { margin-top: 4rem; }

/* Fichas de fuentes */
.atl-src-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .atl-src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .atl-src-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .atl-src-grid--single { grid-template-columns: minmax(0, 64rem); } }

.atl-src {
    display: flex;
    flex-direction: column;
    padding: 2.8rem 2.6rem 2.6rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.atl-src:hover { transform: translateY(-.4rem); box-shadow: var(--shadow-lift); }
.atl-m-section--white .atl-src { background: var(--cream); box-shadow: none; }
.atl-m-section--white .atl-src:hover { box-shadow: var(--shadow-soft); }
.atl-src__head { padding-bottom: 1.6rem; border-bottom: .1rem dashed var(--line); }
.atl-src__head .atl-eyebrow { font-size: 1.2rem; line-height: 1.4; }
.atl-src__title { margin-top: .6rem; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1.15; color: var(--deep); }
.atl-src__dl { flex: 1; margin-top: 1.6rem; }
.atl-src__dl > div + div { margin-top: 1.2rem; }
.atl-src__dl dt { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.atl-src__dl dd { margin-top: .2rem; font-size: 1.5rem; line-height: 1.55; color: var(--deep); }
.atl-src__dl .is-limit { padding: 1.2rem 1.4rem; border-radius: var(--radius-sm); background: rgb(231 95 86 / .07); }
.atl-src__dl .is-limit dt { color: var(--coral-deep); }
.atl-src__link { align-self: flex-start; margin-top: 2rem; }

/* Tabla de temas (mismo lenguaje de tarjetas) */
.atl-m-section .atl-table-wrap { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.atl-m-section .atl-table { font-size: 1.5rem; }
.atl-m-section .atl-table td:first-child { white-space: nowrap; }

/* El cierre arranca después de una sección crema. */
.atl-next__edge--cream { fill: var(--cream); }

/* ======================================================================
   Responsive: pantallas estrechas y táctiles
   ====================================================================== */

.atl-hero__copy { min-width: 0; }
@media (max-width: 1023px) { .atl-hero__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
    .atl-hero__title { font-size: clamp(3.4rem, 10.5vw, 4.4rem); }
    .atl-hero__accent { white-space: normal; }
    .atl-hero__inner { padding-block: 6rem 10rem; }
    .atl-title { font-size: clamp(2.6rem, 8vw, 3rem); }
    .atl-title--xl { font-size: clamp(3rem, 10vw, 3.6rem); }
    .atl-next__title { font-size: clamp(3.2rem, 10vw, 4rem); }
}

/* Objetivos táctiles de 44px en pantallas táctiles. */
@media (pointer: coarse) {
    .atl-hero__straight { min-height: 4.4rem; }
    .atl .atl-btn--sm { min-height: 4.4rem; }
    .atl-chip { min-height: 4rem; padding-inline: 1.4rem; }
    .atl-source__toggle { min-height: 4rem; }
    .atl-link-btn { min-height: 4rem; }
    .atl-popup__close { width: 4.4rem; height: 4.4rem; }
}

/* Tabla de temas (métodos) → tarjetas en móvil. */
@media (max-width: 767px) {
    .atl-m-section .atl-table-wrap { overflow: visible; box-shadow: none; background: transparent; }
    .atl-m-section .atl-table { min-width: 0; background: transparent; }
    .atl-m-section .atl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .atl-m-section .atl-table tbody { display: grid; gap: 1.2rem; }
    .atl-m-section .atl-table tr { display: grid; gap: .8rem; padding: 1.8rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
    .atl-m-section .atl-table td { padding: 0; border: 0; white-space: normal; }
    .atl-m-section .atl-table td:first-child { white-space: normal; font-size: 1.7rem; }
    .atl-m-section .atl-table td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .2rem;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--green);
    }
}

/* Botones con etiquetas largas: en móvil pueden partir línea y no desbordan. */
@media (max-width: 599px) {
    .atl .atl-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
    .atl-geohub { min-width: 0; }
    .atl-geohub > * { min-width: 0; }
    .atl-stories__foot .atl-btn,
    .atl-next__actions .atl-btn,
    .atl-geohub__cta { width: 100%; justify-content: center; }
}

/* ======================================================================
   Atlas real incrustado (ArcGIS Experience Builder, iframe)
   ====================================================================== */
.atl-embed {
    position: relative;
    /* Escritorio: el mapa ocupa casi toda la pantalla bajo el header. */
    height: clamp(56rem, calc(100svh - 22rem), 92rem);
    background: var(--deep);
    isolation: isolate;
}
.atl-embed__frame { display: block; width: 100%; height: 100%; border: 0; background: var(--deep); }
.atl-mapbox--embed.is-full .atl-embed { height: calc(100svh - 18rem); min-height: 60rem; }
.atl-embed__help {
    margin: 0;
    padding: 1.2rem 2rem;
    border-top: .1rem solid var(--line, #e3ebe8);
    font-size: 1.4rem;
    color: var(--muted, #4f6b6d);
}
.atl-embed__help a { color: var(--deep, #184a4e); font-weight: 500; text-underline-offset: .3rem; }

/* Barra: «Full screen» + abrir en pestaña nueva. */
.atl-mapbox--embed .atl-mapbox__bar { flex-wrap: nowrap; }
.atl-mapbox--embed .atl-mapbox__place { min-width: 0; }
.atl-mapbox--embed .atl-mapbox__place span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.atl-mapbox--embed .atl-mapbox__actions { flex-shrink: 0; }
.atl-embed__toggle[hidden] { display: none; }
.atl-embed__toggle-close,
.atl-embed__toggle[aria-pressed="true"] .atl-embed__toggle-open { display: none; }
.atl-embed__toggle[aria-pressed="true"] .atl-embed__toggle-close { display: inline-flex; }
.atl-embed__toggle-open,
.atl-embed__toggle-close { align-items: center; }

/* Velo con la marca mientras Experience Builder arranca. */
.atl-embed__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 55%, #1d5a5e 0%, var(--deep) 55%, var(--deeper) 100%);
    color: var(--cream);
    transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.atl-embed__contours { color: var(--mint); opacity: .16; animation: atl-embed-drift 18s ease-in-out infinite alternate; }
.atl-embed__status { position: relative; display: grid; justify-items: center; gap: 1.6rem; max-width: 36rem; padding: 2rem; text-align: center; }
.atl-embed__pulse {
    position: relative;
    display: grid;
    place-items: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background: var(--mint);
    color: var(--deep);
}
.atl-embed__pulse::before,
.atl-embed__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: .2rem solid var(--mint);
    animation: atl-embed-ripple 2.4s var(--ease) infinite;
}
.atl-embed__pulse::after { animation-delay: 1.2s; }
.atl-embed__loading { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: .02em; }
.atl-embed__slow { margin: 0; font-size: 1.4rem; line-height: 1.5; color: rgb(254 245 230 / .82); }
.atl-embed__slow a { color: var(--mint); font-weight: 500; text-underline-offset: .3rem; }
.atl-mapbox--embed.is-ready .atl-embed__veil { opacity: 0; visibility: hidden; }
@keyframes atl-embed-ripple {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.2); opacity: 0; }
}
@keyframes atl-embed-drift {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.08) rotate(2deg); }
}

/* Escudo: la página se puede recorrer sin que el mapa se quede con la rueda o el dedo. */
.atl-embed__shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    padding: 0 1.6rem 2.4rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.atl-embed__shield[hidden] { display: none; }
.atl-embed__chip {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 4.4rem;
    padding: .8rem 2rem .8rem 1.6rem;
    border-radius: 99rem;
    background: var(--deep);
    box-shadow: 0 .2rem 0 var(--deeper), 0 1.2rem 2.4rem -.8rem rgb(15 53 56 / .55);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.atl-embed__chip .atl-icon { color: var(--mint); }
.atl-embed__chip-mouse { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .atl-embed__chip-touch { display: none; }
    .atl-embed__chip-mouse { display: inline; }
    /* Con ratón la pastilla solo aparece al pasar por encima o al intentar hacer zoom con la rueda. */
    .atl-embed__chip { opacity: 0; transform: translateY(.8rem); }
    .atl-embed__shield:hover .atl-embed__chip,
    .atl-embed__shield:focus-visible .atl-embed__chip,
    .is-nudged .atl-embed__chip { opacity: 1; transform: none; }
}
.atl-embed__shield:focus-visible { outline: .3rem solid var(--mint); outline-offset: -.3rem; }

/* Pantalla completa dentro de la página. */
.atl-mapbox--embed.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    transform: none !important;
    opacity: 1 !important;
}
.atl-mapbox--embed.is-expanded .atl-mapbox__bar { padding-top: max(1.2rem, env(safe-area-inset-top)); }
.atl-mapbox--embed.is-expanded .atl-embed { flex: 1; height: auto; min-height: 0; }
.atl-mapbox--embed.is-expanded .atl-embed__help { display: none; }
.atl-embed-lock,
.atl-embed-lock body { overflow: hidden; }
/* La sección aísla su apilamiento (isolation): en pantalla completa se sube
   entera por encima del header global (z 700) y del resto de secciones. */
.atl-embed-lock .atl-map-section { position: relative; z-index: 100050; isolation: auto; }

/* Solo administradores: Atlas configurado pero privado. */
.atl-embed-note {
    margin: 0 0 1.6rem;
    padding: 1.2rem 1.6rem;
    border-radius: var(--radius-sm);
    background: var(--amber);
    color: var(--deeper);
    font-size: 1.4rem;
    line-height: 1.5;
}
.atl-embed-note a { color: inherit; font-weight: 500; }

@media (max-width: 899px) {
    /* Celular: vista previa del mapa; al tocarla se abre a pantalla completa. */
    .atl-embed { height: 64svh; min-height: 42rem; }
    .atl-embed__shield { background: linear-gradient(to top, rgb(15 53 56 / .45), transparent 40%); }
}
@media (max-width: 599px) {
    .atl-mapbox--embed .atl-mapbox__bar { padding: 1rem 1.2rem; gap: .8rem; }
    .atl-mapbox--embed .atl-mapbox__place { font-size: 1.6rem; }
    /* Botones solo con icono; el nombre sigue disponible para lectores de pantalla. */
    .atl-mapbox--embed .atl-mapbox__actions .atl-btn { width: 4.4rem; min-height: 4.4rem; padding: 0; justify-content: center; }
    .atl-embed__toggle [data-atl-embed-toggle-label],
    .atl-embed__newtab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@media (prefers-reduced-motion: reduce) {
    .atl-embed__contours,
    .atl-embed__pulse::before,
    .atl-embed__pulse::after { animation: none; }
    .atl-embed__veil,
    .atl-embed__chip { transition: none; }
}

/* ======================================================================
   GeoHub: puerta de acceso (page-geohub.php) y términos (page-geohub-terms.php)
   ====================================================================== */

/* Aviso del banner de la landing para quien no tiene sesión. */
.atl-geohub__note { margin-top: .6rem; font-size: 1.4rem; line-height: 1.5; color: var(--muted); }

/* La puerta es una sola pantalla: el hero ocupa casi todo el alto. */
.atl-gate__hero .atl-hero__inner { min-height: min(72vh, 64rem); display: flex; align-items: center; }
.atl-gate--terms .atl-gate__hero .atl-hero__inner { min-height: 0; }
.atl-gate .atl-hero__title--md { max-width: 20ch; }
.atl-gate__terms { margin-top: 2.4rem; font-size: 1.4rem; color: rgb(255 255 255 / .78); }
.atl-gate__terms a { color: var(--mint); text-decoration: underline; text-underline-offset: .3rem; }

/* Términos: texto largo pegado desde el hub en el editor. */
.atl-gate__body { padding-block: 6.4rem 8rem; background: var(--cream); }
.atl-prose { max-width: 72ch; font-size: 1.7rem; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.atl-prose > * + * { margin-top: 1.6rem; }
.atl-prose h2 { margin-top: 4rem; font-family: var(--font-display); font-size: 2.6rem; line-height: 1.2; }
.atl-prose h3 { margin-top: 3.2rem; font-family: var(--font-display); font-size: 2rem; line-height: 1.25; }
.atl-prose ul, .atl-prose ol { padding-left: 2.4rem; }
.atl-prose ul { list-style: disc; }
.atl-prose ol { list-style: decimal; }
.atl-prose li + li { margin-top: .6rem; }
.atl-prose a { color: var(--deep); text-decoration: underline; text-underline-offset: .3rem; }
.atl-gate__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 4.8rem; }
@media (max-width: 599px) { .atl-gate__actions .atl-btn { width: 100%; justify-content: center; } }

/* ---------- Inter: ajuste por nivel tipográfico ----------
   Va al final para ganar por orden a las reglas de componente (misma
   especificidad). Los pesos y el tracking salen de las variables de .atl;
   el eje opsz lo resuelve el navegador según el tamaño (font-optical-sizing). */

/* Titulares grandes: más peso y tracking cerrado; a más tamaño, más cerrado. */
.atl-hero__title,
.atl-title--xl,
.atl-next__title,
.atl-methods__title { font-weight: var(--wght-heavy); letter-spacing: var(--track-display); }

.atl-title,
.atl-methods__h2,
.atl-wheel__title,
.atl-place__title,
.atl-cover__verb { font-weight: var(--wght-heavy); letter-spacing: var(--track-title); }

/* Subtítulos y titulares de tarjeta. */
.atl-explain__title,
.atl-trust__name,
.atl-trust__kicker,
.atl-reading__title,
.atl-place__story-title,
.atl-card__title,
.atl-howto__title,
.atl-popup__name { font-weight: var(--wght-bold); letter-spacing: var(--track-snug); }

/* Rótulos en versalitas: peso intermedio del eje y tracking abierto. */
.atl-eyebrow,
.atl-ribbon,
.atl-cover__tab,
.atl-wheel__kicker,
.atl-methods__eyebrow,
.atl-thinking__count,
.atl-explain__dl dt,
.atl-card__dl dt,
.atl-source__panel dt { font-weight: var(--wght-label); letter-spacing: var(--track-caps); }

/* Entradillas: ligera, con el tracking neutro de Inter a tamaño de lectura. */
.atl-hero__lead,
.atl-thinking__lead { font-weight: var(--wght-light); letter-spacing: 0; }

/* Botones: un punto más de peso que el texto, sin llegar a negrita. */
.atl-btn { font-weight: 560; letter-spacing: -.005em; }

/* Cifras: tabulares para que no bailen al cambiar; los números decorativos
   de las tarjetas, finos en el extremo bajo del eje. */
.atl-cover__num { font-weight: var(--wght-thin); letter-spacing: -.04em; font-feature-settings: var(--features-num); }
.atl-trust__num,
.atl-stories__counter,
.atl-thinking__count { font-feature-settings: var(--features-num); }

/* El verbo de la tarjeta gana un poco de peso al pasar el ratón: el eje
   variable permite animarlo sin saltos. */
.atl-cover__verb { transition: font-weight .35s var(--ease); }
.atl-cover:hover .atl-cover__verb,
.atl-cover:focus-visible .atl-cover__verb { font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
    .atl-cover__verb { transition: none; }
}