/* Inka Terra Asociación · sitio web · plantilla de territorio (Where We Work) · Amazon · Madre de Dios (5 oct) */

/* La plantilla de los tres paisajes (Amazon, Cloud forest, Coastal and marine), con la arquitectura de Rodrigo (5 oct):
   01 · Hero — como el del home: la foto a sangre en toda la pantalla, con la cabecera transparente encima; el velo
        direccional y, a la izquierda, el nombre del ecosistema, dónde está, una descripción y «Explore the map»; al pie,
        la cinta de los lugares como banda de vidrio (sin separadores, con aire, como la de Who We Are).
   02 · El paisaje — en zigzag: la foto a la izquierda; un encabezado corto y un párrafo (qué ecosistema es).
   03 · Retos — bloques pegados, como el Board de Our Team: el título en musgo y cuatro retos en marfil.
   04 · El mapa — la pieza central: el Perú arriba a la izquierda (la región se enciende al entrar) y los puntos donde
        ITA trabaja, como los del mapa del home (esquema, no a escala); al lado, el panel del punto elegido, siempre del
        mismo alto.
   05 · Proyectos e iniciativas — los principales, en fichas de tres columnas (css/fichas.css).
   06 · Conocimiento — las cuatro publicaciones más recientes, en una estantería de tapas; después, la galería.
   07 · Participa — la banda vapor, con cuatro puertas.
   08 · Lo último — como las noticias del home.
   Esquinas rectas en todo; sin rombos (Rodrigo, 5 oct). */

.territorio{--aire:calc(clamp(28px,4vh,44px) + clamp(28px,4.4vh,48px))}
.territorio h2{font-family:var(--ui);font-weight:600;font-size:clamp(28px,2.5vw,38px);line-height:1.04;letter-spacing:-.034em;color:var(--bosque);margin:0;max-width:none;text-wrap:balance}
.territorio .rotulo{margin-bottom:14px}
.territorio .bajada{margin:clamp(14px,1.4vw,18px) 0 0;font-family:var(--texto);font-size:clamp(16px,1.15vw,17.5px);line-height:1.55;color:var(--tinta-suave);max-width:52ch;text-wrap:pretty}

/* ── 01 · hero ──────────────────────────────────────────────────────────── */
/* como el del home (css/hero.css): la foto a sangre en la primera pantalla (bajo la cabecera), el velo direccional
   —denso por la izquierda, detrás del texto; casi nada sobre el resto de la foto— y el texto a la izquierda, centrado en
   el alto: el nombre del ecosistema en grande, dónde está en salvia y en tamaño considerable, la descripción y el botón
   Filete de vidrio del home. Al pie, la banda de los lugares */
.territorio .t-hero{position:relative;display:flex;flex-direction:column;margin-top:calc(-1 * var(--cab-h));min-height:clamp(620px,100svh,1080px);padding:0;overflow:hidden;background:var(--bosque);color:#fff}   /* bajo la cabecera fija, que va transparente encima (js/menu.js), como en el home */
.territorio .t-hero .fondo{position:absolute;inset:0;z-index:0;margin:0}   /* z-index: su propia capa; el orden de las fotos (.on, .bajo) queda dentro y el velo y el texto, encima */
/* las tres fotos, una sobre otra: la que entra (.on) se posa sobre la anterior (.bajo), que sigue debajo, como en el home */
.territorio .t-hero .fondo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pd,60% 50%);opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.territorio .t-hero .fondo img.bajo{opacity:1;transition:none;z-index:1}
.territorio .t-hero .fondo img.on{opacity:1;z-index:2}
/* las barras que eligen foto, como las del home: abajo a la izquierda, sobre la banda de los lugares */
.territorio .t-hero .pasos{position:absolute;z-index:3;left:max(40px,calc((100% - var(--w)) / 2));bottom:calc(clamp(58px,5vw,66px) + 26px);display:flex;gap:8px}
.territorio .t-hero .pasos button{position:relative;width:28px;height:2px;margin:0;padding:0;border:0;background:rgba(255,255,255,.38);cursor:pointer;overflow:visible}
.territorio .t-hero .pasos button::before{content:"";position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px}
.territorio .t-hero .pasos button::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.territorio .t-hero .pasos button.on::after{transform:scaleX(1);transition:transform var(--paso,6.5s) linear}
.territorio .t-hero.quieto .pasos button.on::after{transition:none}
.territorio .t-hero .pasos button:hover{background:rgba(255,255,255,.6)}
.territorio .t-hero .pasos button:focus-visible{outline:2px solid var(--rio);outline-offset:6px}
.territorio .t-hero .velo{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(100deg,rgba(20,26,15,.9) 0%,rgba(20,26,15,.8) 24%,rgba(20,26,15,.58) 42%,rgba(20,26,15,.22) 58%,rgba(20,26,15,0) 72%),
  linear-gradient(180deg,rgba(20,26,15,.5) 0%,rgba(20,26,15,.14) 18%,rgba(20,26,15,0) 34%,rgba(20,26,15,0) 66%,rgba(20,26,15,.42) 100%)}   /* arriba, como el home: la cabecera en blanco se lee sobre cualquier cielo */
.territorio .t-hero .wrap{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding:calc(var(--cab-h) + clamp(32px,4.4vh,56px)) 0 clamp(48px,6vh,72px)}
.territorio .t-hero .texto{max-width:880px}
.territorio .t-hero h1{font-family:var(--ui);font-weight:500;font-size:clamp(44px,5vw,74px);line-height:1;letter-spacing:-.038em;color:#fff;margin:0;max-width:none;text-shadow:0 2px 24px rgba(20,26,15,.35)}
.territorio .t-hero .lugar{margin:clamp(10px,1vw,14px) 0 0;font-family:var(--ui);font-weight:500;font-size:clamp(22px,2.1vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--salvia);text-shadow:0 1px 2px rgba(20,26,15,.55),0 2px 28px rgba(20,26,15,.5)}
.territorio .t-hero .entrada{margin:clamp(20px,2vw,28px) 0 0;max-width:46ch;font-family:var(--texto);font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(20,26,15,.35);text-wrap:pretty}
.territorio .t-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,2.8vw,34px)}
.territorio .t-hero .cta .btn{height:50px;padding:0 28px;border-color:#fff;background:rgba(20,26,15,.22);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* la banda de los lugares, al pie: vidrio oscuro a todo el ancho, con los bordes difuminados; los lugares, sin
   separadores, con mucho aire entre ellos y en blanco y vapor intercalados, como la cinta de Who We Are. Cada uno lleva a
   su punto del mapa */
.territorio .lugares{position:relative;z-index:2;background:rgba(20,26,15,.44);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.14)}
.territorio .lugares .ventana{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.territorio .lugares .cinta{display:flex;width:max-content}
.territorio .lugares .cinta.en-marcha{animation:t-lugares 60s linear infinite}
.territorio .lugares ul{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.territorio .lugares li{display:flex;align-items:center}
.territorio .lugares button{height:clamp(58px,5vw,66px);margin:0;padding:0 clamp(32px,3.6vw,56px);border:0;background:none;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s ease}
.territorio .lugares li:nth-child(even) button{color:rgba(238,241,230,.74)}
.territorio .lugares button:hover,.territorio .lugares li:nth-child(even) button:hover{color:#fff}
.territorio .lugares button:focus-visible{outline:2px solid var(--rio);outline-offset:-6px}
@keyframes t-lugares{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.territorio .lugares:hover .cinta{animation-play-state:paused}}
.territorio .lugares:focus-within .cinta{animation-play-state:paused}

/* ── 02 · el territorio ─────────────────────────────────────────────────── */
/* en zigzag con la portada: la foto a la izquierda; el encabezado corto y el párrafo a la derecha */
.territorio .t-sobre{padding:var(--aire) 0 0}
.territorio .t-sobre .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:clamp(40px,5vw,88px);align-items:center}
.territorio .t-sobre .texto p:not(.rotulo){font-family:var(--texto);font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:var(--tinta-suave);margin:20px 0 0;max-width:36em;text-wrap:pretty}
.territorio .t-sobre .foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--vapor)}
.territorio .t-sobre .foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* ── 03 · retos ─────────────────────────────────────────────────────────── */
/* bloques pegados, como el Board de Our Team: el título en musgo, alto, a la izquierda (rótulo y titular arriba, la
   bajada justo debajo); los cuatro retos en marfil, 2 × 2 y del mismo tamaño (Rodrigo, 5 oct). En tableta, el título
   arriba y los cuatro 2 × 2; en móvil, uno debajo de otro */
.territorio .t-retos{padding:var(--aire) 0 0}
.territorio .t-retos .bloques{display:grid;grid-template-columns:minmax(0,1.12fr) repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;background:var(--papel)}
.territorio .t-retos .titulo{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(14px,1.4vw,18px);min-width:0;padding:clamp(26px,3vw,44px);background:var(--musgo)}
.territorio .t-retos .titulo .rotulo{color:#fff}
.territorio .t-retos .titulo h2{color:#fff}
.territorio .t-retos .titulo .bajada{margin:0;max-width:40ch;color:rgba(255,255,255,.9)}
.territorio .t-retos .reto{min-width:0;padding:clamp(24px,2.6vw,36px);background:var(--marfil)}
.territorio .t-retos .reto h3{margin:0 0 12px;font-family:var(--ui);font-weight:600;font-size:clamp(19px,1.5vw,22px);line-height:1.15;letter-spacing:-.02em;color:var(--bosque)}
.territorio .t-retos .reto p{margin:0;font-family:var(--texto);font-size:15px;line-height:1.6;color:var(--tinta-suave);max-width:42ch;text-wrap:pretty}

/* ── 04 · el mapa ───────────────────────────────────────────────────────── */
/* el mapa (vapor) y el panel del punto elegido (marfil), pegados. El mapa es un esquema en SVG; los puntos son botones
   encima, colocados en % (--x, --y), como los del mapa del home (css/red.css): un disco pequeño en bosque con un fino
   borde de papel sobre un halo suave y, al lado, el nombre en una caja de papel translúcido con filete mínimo. Al pasar,
   el filete se afirma; el elegido llena la caja de bosque (nombre en marfil) y pasa el disco a ocre, que respira */
.territorio .t-mapa{padding:var(--aire) 0 0;scroll-margin-top:calc(var(--cab-h) - 8px)}
.territorio .mapa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2px;margin-top:clamp(28px,3vw,40px);background:var(--papel)}
.territorio .lado-mapa{display:flex;align-items:center;min-width:0;background:var(--vapor)}
.territorio .lienzo{position:relative;width:100%;aspect-ratio:1000/740}
.territorio .carta{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.territorio .carta .reserva{fill:rgba(75,100,70,.13)}
.territorio .carta .amortiguamiento{fill:none;stroke:var(--musgo);stroke-width:1.5;stroke-dasharray:5 6;opacity:.55}
.territorio .carta .rio{fill:none;stroke:var(--rio);stroke-width:8;stroke-linecap:round;opacity:.5}
.territorio .carta .rio-t{fill:none;stroke:var(--rio);stroke-width:6;stroke-linecap:round;opacity:.42}
.territorio .carta .lago{fill:var(--rio);opacity:.42}
.territorio .carta .frontera{stroke:var(--tinta-suave);stroke-width:1.5;stroke-dasharray:3 8;opacity:.55}
.territorio .carta .ciudad{fill:var(--tinta)}
.territorio .carta .norte{fill:none;stroke:var(--tinta-suave);stroke-width:2;stroke-linecap:square}
.territorio .carta text{font-family:var(--ui);font-size:17px;fill:var(--tinta-suave)}
.territorio .carta .et-rio{font-style:italic;fill:#3D7C93}
.territorio .carta .et-zona{font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;fill:var(--musgo)}
.territorio .carta .et-ciudad{font-weight:600;font-size:18px;fill:var(--tinta)}
.territorio .carta .et-menor{font-size:15px}
.territorio .punto{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:6px;border:0;background:none;transform:translate(-16px,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}
.territorio .punto i{position:relative;display:block;flex:none;width:20px;height:20px}
.territorio .punto i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bosque);opacity:.12;transition:background-color .6s var(--fluida),opacity .6s var(--fluida)}   /* el halo */
.territorio .punto i::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--bosque);box-shadow:0 0 0 1.5px var(--papel);transition:background-color .6s var(--fluida)}   /* el disco */
.territorio .punto span{padding:4px 8px;border:1px solid rgba(36,52,20,.24);border-radius:var(--r);background:rgba(255,255,255,.84);font-family:var(--ui);font-weight:500;font-size:12.5px;line-height:1.2;letter-spacing:-.01em;color:var(--bosque);white-space:nowrap;transition:background-color .6s var(--fluida),border-color .6s var(--fluida),color .6s var(--fluida)}
.territorio .punto.izq{flex-direction:row-reverse;transform:translate(calc(-100% + 16px),-50%)}
.territorio .punto[aria-pressed="true"]{z-index:3}
.territorio .punto[aria-pressed="true"] i::before{background:var(--ocre);opacity:.28;animation:t-late 3s ease-in-out .6s infinite}
.territorio .punto[aria-pressed="true"] i::after{background:var(--ocre)}
.territorio .punto[aria-pressed="true"] span{background:var(--bosque);border-color:var(--bosque);color:var(--marfil)}
@keyframes t-late{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.territorio .punto:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .territorio .punto:not([aria-pressed="true"]):hover span{border-color:rgba(36,52,20,.7)}
}
/* del Perú a la región: la silueta del país arriba a la izquierda, con la región del paisaje en bosque; al entrar, el
   país aparece y la región se enciende después */
.territorio .ubicacion{position:absolute;left:2.4%;top:3%;z-index:1;width:clamp(56px,9%,96px);margin:0;pointer-events:none}
.territorio .ubicacion svg{display:block;width:100%;height:auto;overflow:visible}
.territorio .ubicacion .pais{fill:rgba(75,100,70,.2);stroke:rgba(75,100,70,.2);stroke-width:2;stroke-linejoin:round}
.territorio .ubicacion .region{fill:var(--bosque);stroke:var(--bosque);stroke-width:2;stroke-linejoin:round;transition:fill .9s var(--e-suave) .7s,stroke .9s var(--e-suave) .7s}
html.entradas .territorio .ubicacion[data-r]:not(.dentro) .region{fill:rgba(75,100,70,.2);stroke:rgba(75,100,70,.2)}
.territorio .ubicacion figcaption{margin-top:6px;font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave)}
.territorio .nota-mapa{position:absolute;left:14px;bottom:10px;margin:0;font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--tinta-suave)}
.territorio .sitios{display:none}
/* el panel del punto */
.territorio .panel{display:grid;min-width:0;background:var(--marfil)}
.territorio .sitio{grid-area:1/1;min-width:0}
.territorio .sitio.fuera{visibility:hidden}   /* apilados en la misma celda: el mapa no cambia de alto al elegir otro punto (con una clase: [hidden] lleva display:none!important en tokens.css) */
.territorio .sitio.entra{animation:t-entra .5s var(--e-suave) both}
@keyframes t-entra{from{opacity:0}}
.territorio .sitio .foto{position:relative;aspect-ratio:2/1;margin:0;overflow:hidden;background:#E6E7DF}
.territorio .sitio .foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.74) sepia(.08) contrast(1.03)}
.territorio .sitio .texto{padding:clamp(20px,2vw,26px) clamp(20px,2.2vw,30px)}
.territorio .sitio .disc{margin:0 0 8px;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--musgo)}
.territorio .sitio h3{margin:0 0 10px;font-family:var(--ui);font-weight:600;font-size:clamp(22px,1.9vw,28px);line-height:1.08;letter-spacing:-.03em;color:var(--bosque)}
.territorio .sitio p{margin:0;font-family:var(--texto);font-size:15px;line-height:1.6;color:var(--tinta-suave);text-wrap:pretty}
.territorio .aqui{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:16px}
.territorio .aqui span{width:100%;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.territorio .aqui button{margin:0;padding:2px 0;border:0;border-bottom:1px solid var(--salvia);border-radius:0;background:none;font-family:var(--ui);font-weight:500;font-size:14.5px;color:var(--bosque);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.territorio .aqui button:hover{color:var(--musgo);border-color:var(--bosque)}
.territorio .aqui button:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
/* la nota de Inkaterra: pequeña y contextual, solo donde tiene sentido */
.territorio .inkaterra{margin-top:16px!important;padding:12px 14px;background:rgba(255,255,255,.62);font-size:13.5px!important;line-height:1.5!important}
.territorio .inkaterra b{display:block;margin-bottom:2px;font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--musgo)}

/* ── 06 · proyectos e iniciativas ───────────────────────────────────────── */
/* los principales, en tres columnas: foto 4:3, el título, las líneas como etiqueta y una línea (sin el lugar: está en
   la ficha ampliada y en el mapa) */
.territorio .t-proyectos{padding:var(--aire) 0 0}
.territorio .t-proyectos .lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,56px) clamp(24px,2.6vw,40px);margin-top:clamp(28px,3vw,40px)}
.territorio .t-proyectos .inv .foto{aspect-ratio:4/3;margin-bottom:20px}
.territorio .t-proyectos .inv h3{font-size:clamp(20px,1.6vw,23px);margin-bottom:10px}
.territorio .t-proyectos .inv .resena{font-size:15px}
.territorio .perfil .bio .inkaterra{margin-top:20px!important;background:var(--marfil)}
.territorio .perfil .ir-mapa{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin:24px 0 0;padding:0;border:0;background:none;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bosque);cursor:pointer}
.territorio .perfil .ir-mapa[hidden]{display:none}
.territorio .perfil .ir-mapa svg{width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-sale)}
.territorio .perfil .ir-mapa:hover svg{transform:translateX(3px)}
.territorio .perfil .ir-mapa:focus-visible{outline:2px solid var(--rio);outline-offset:3px}

/* ── 06 · conocimiento ──────────────────────────────────────────────────── */
/* una estantería: cada publicación, una tapa tipográfica (3:4) en los colores de ITA según su tipo —libro en bosque,
   estudio en musgo, informe en marfil, lista en vapor—, con el lomo apenas insinuado a la izquierda; arriba, el tipo y
   el año; abajo, el título. Los autores, debajo de la tapa. Al pasar, la tapa sube un poco. En tableta y móvil, la
   estantería se desliza de lado, a sangre, con el borde fundido mientras quedan tapas */
.territorio .t-saber{padding:var(--aire) 0 0}
.territorio .publicaciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.4vw,48px) clamp(16px,1.8vw,28px)}
.territorio .pub a{display:flex;flex-direction:column;gap:14px;height:100%;color:inherit;text-decoration:none;outline:none}
.territorio .pub .tapa{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:3/4;padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(20px,2vw,28px) calc(clamp(18px,1.8vw,26px) + 6px);background:var(--bosque);color:#fff;transition:transform .5s var(--e-sale)}
.territorio .pub .tapa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:rgba(0,0,0,.16)}   /* el lomo */
.territorio .pub .cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--salvia)}
.territorio .pub .anio{letter-spacing:.04em;font-variant-numeric:tabular-nums}
.territorio .pub .titulo{font-family:var(--ui);font-weight:500;font-size:clamp(17px,1.4vw,21px);line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
.territorio .pub .autores{font-family:var(--texto);font-size:13.5px;line-height:1.5;color:var(--tinta-suave);text-wrap:pretty}
.territorio .pub.t-estudio .tapa{background:var(--musgo)}
.territorio .pub.t-estudio .cabeza{color:rgba(255,255,255,.74)}
.territorio .pub.t-informe .tapa{background:var(--marfil);color:var(--bosque)}
.territorio .pub.t-lista .tapa{background:var(--vapor);color:var(--bosque)}
.territorio .pub.t-informe .cabeza,.territorio .pub.t-lista .cabeza{color:var(--musgo)}
.territorio .pub.t-informe .tapa::before,.territorio .pub.t-lista .tapa::before{background:rgba(36,52,20,.07)}
@media (hover:hover) and (pointer:fine){.territorio .pub a:hover .tapa{transform:translateY(-6px)}}
.territorio .pub a:focus-visible .tapa{outline:2px solid var(--rio);outline-offset:3px}

/* ── 06b · galería ──────────────────────────────────────────────────────── */
/* una composición editorial irregular, pegada como los demás bloques (2 px de papel entre fotos): nueve fotos en tres
   filas de anchos distintos sobre una rejilla de 12 columnas (6·3·3 · 3·5·4 · 5·3·4). El pie de cada foto aparece al
   pasar el ratón (en táctil, siempre); cada una se abre en el visor, a pantalla completa sobre bosque */
.territorio .t-galeria{padding:var(--aire) 0 0}
.territorio .mosaico-g{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(200px,19vw,272px);gap:2px;background:var(--papel)}
.territorio .mosaico-g li{grid-column:span 4;min-width:0;overflow:hidden;background:#E6E7DF}
.territorio .mosaico-g li:nth-child(1){grid-column:span 6}
.territorio .mosaico-g li:nth-child(2),.territorio .mosaico-g li:nth-child(3),.territorio .mosaico-g li:nth-child(4),.territorio .mosaico-g li:nth-child(8){grid-column:span 3}
.territorio .mosaico-g li:nth-child(5),.territorio .mosaico-g li:nth-child(7){grid-column:span 5}
.territorio .mosaico-g .ver{position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.territorio .mosaico-g img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.8) sepia(.06) contrast(1.03);transition:transform .9s var(--e-sale)}
.territorio .mosaico-g .pie{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;background:linear-gradient(180deg,rgba(20,26,15,0),rgba(20,26,15,.6));font-family:var(--ui);font-weight:500;font-size:13px;line-height:1.3;color:#fff;text-align:left;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s var(--e-sale)}
@media (hover:hover) and (pointer:fine){
  .territorio .mosaico-g .ver:hover img{transform:scale(1.03)}
  .territorio .mosaico-g .ver:hover .pie{opacity:1;transform:none}
}
@media (hover:none){.territorio .mosaico-g .pie{opacity:1;transform:none}}
.territorio .mosaico-g .ver:focus-visible{outline:2px solid var(--rio);outline-offset:-2px}
.territorio .mosaico-g .ver:focus-visible .pie{opacity:1;transform:none}
/* el visor: la foto entera sobre bosque, con su pie y la cuenta; flechas a los lados y la X arriba */
.territorio .visor{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#141A0F;color:#fff;opacity:0;transition:opacity .3s ease}
.territorio .visor[open]{display:flex;align-items:center;justify-content:center}
.territorio .visor.visible{opacity:1}
.territorio .visor::backdrop{background:transparent}
.territorio .visor figure{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;max-width:min(1200px,calc(100vw - 160px))}
.territorio .visor img{display:block;max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain}
.territorio .visor figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:24px;align-self:stretch;font-family:var(--ui);font-size:14px;line-height:1.4;color:rgba(255,255,255,.88)}
.territorio .visor .cuenta{flex:none;font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--salvia);font-variant-numeric:tabular-nums}
.territorio .visor button{position:absolute;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:var(--r);background:rgba(20,26,15,.4);color:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.territorio .visor button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.territorio .visor button:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
.territorio .visor button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.territorio .visor .ant{left:clamp(12px,2vw,32px);top:50%;transform:translateY(-50%)}
.territorio .visor .sig{right:clamp(12px,2vw,32px);top:50%;transform:translateY(-50%)}
.territorio .visor .cierra{right:clamp(12px,2vw,32px);top:clamp(12px,2vw,28px)}

/* ── 07 · participa: la banda vapor del cierre ──────────────────────────── */
/* cuatro puertas en texto, sin tarjetas: el nombre, una línea y la flecha, sobre un filete que se oscurece al pasar */
.territorio .t-participa{margin-top:var(--aire);padding:0;background:var(--vapor)}
.territorio .t-participa .wrap{padding:clamp(48px,5vw,72px) 0}
.territorio .t-participa .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,88px);align-items:end}
.territorio .puertas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(24px,3vw,48px)}
.territorio .puertas a{display:flex;flex-direction:column;gap:10px;height:100%;padding-top:18px;border-top:1px solid rgba(36,52,20,.22);color:inherit;text-decoration:none;outline:none;transition:border-color .25s ease}
.territorio .puertas .nombre{font-family:var(--ui);font-weight:500;font-size:clamp(20px,1.6vw,23px);line-height:1.15;letter-spacing:-.02em;color:var(--bosque)}
.territorio .puertas .que{font-family:var(--texto);font-size:15px;line-height:1.55;color:var(--tinta-suave);text-wrap:pretty}
.territorio .puertas svg{flex:none;margin-top:auto;padding-top:6px;width:14px;height:16px;fill:none;stroke:var(--bosque);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-sale)}
@media (hover:hover) and (pointer:fine){
  .territorio .puertas a:hover{border-color:var(--bosque)}
  .territorio .puertas a:hover svg{transform:translateX(4px)}
}
.territorio .puertas a:focus-visible{outline:2px solid var(--rio);outline-offset:4px}

/* ── 08 · lo último ─────────────────────────────────────────────────────── */
/* como las noticias del home: la historia destacada a la izquierda (foto 3:2, categoría · fecha, titular, sumario y
   «Read more») y las menores a la derecha, con miniatura cuadrada y filetes entre ellas */
.territorio .t-novedades{padding:var(--aire) 0}
.territorio .t-novedades .cab,.territorio .t-saber .cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,40px)}
.territorio .todas{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bosque);text-decoration:none;padding-bottom:5px;border-bottom:1px solid var(--bosque)}
.territorio .todas svg{flex:none;width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-sale)}
.territorio .todas:hover svg{transform:translateX(4px)}
.territorio .noticias{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4.4vw,72px);align-items:start}
.territorio .noticias a{display:block;color:inherit;text-decoration:none;outline:none}
.territorio .noticias .foto{position:relative;margin:0;overflow:hidden;background:var(--vapor)}
.territorio .noticias .foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.74) sepia(.08) contrast(1.03);transition:transform .9s var(--e-sale)}
.territorio .noticias .meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.territorio .noticias .meta .cat{color:var(--musgo)}
.territorio .noticias .meta .cat::after{content:"";display:inline-block;width:3px;height:3px;margin-left:10px;background:var(--gris);vertical-align:middle;opacity:.7}
.territorio .noticias h3{font-family:var(--ui);font-weight:500;color:var(--bosque);margin:0;text-wrap:balance;transition:color .35s ease}
.territorio .destacada .foto{aspect-ratio:3/2;margin-bottom:20px}
.territorio .destacada h3{margin:12px 0;font-size:clamp(24px,2vw,30px);line-height:1.12;letter-spacing:-.022em}
.territorio .destacada .sumario{margin:0 0 18px;max-width:52ch;font-family:var(--texto);font-size:15.5px;line-height:1.6;color:var(--tinta-suave);text-wrap:pretty}
.territorio .destacada .leer{display:inline-block;padding-bottom:5px;border-bottom:1px solid var(--bosque);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bosque)}
.territorio .historias{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.territorio .historias li{border-bottom:1px solid var(--linea)}
.territorio .historias a{display:grid;grid-template-columns:clamp(104px,9.5vw,136px) minmax(0,1fr);column-gap:clamp(18px,2vw,26px);align-items:center;padding:clamp(18px,1.8vw,24px) 0}
.territorio .historias .foto{aspect-ratio:1/1}
.territorio .historias h3{margin-top:8px;font-size:clamp(17px,1.3vw,19px);line-height:1.25;letter-spacing:-.015em}
@media (hover:hover) and (pointer:fine){
  .territorio .noticias a:hover .foto img{transform:scale(1.035)}
  .territorio .noticias a:hover h3{color:var(--musgo)}
}
.territorio .noticias a:focus-visible .foto{outline:2px solid var(--rio);outline-offset:4px}

/* ── tableta y móvil ────────────────────────────────────────────────────── */
@media (max-width:1099px){
  .territorio .mapa{grid-template-columns:minmax(0,1fr)}
  .territorio .panel .sitio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .territorio .sitio .foto{aspect-ratio:auto;min-height:100%}
}
@media (max-width:960px){
  .territorio .t-sobre .wrap{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .territorio .t-sobre .texto{order:-1}
  /* retos: el título a todo el ancho, encima; los cuatro, 2 × 2 */
  .territorio .t-retos .bloques{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(2,minmax(0,1fr))}
  .territorio .t-retos .titulo{grid-column:1/-1;grid-row:auto}
  /* la estantería se desliza: a sangre, cada tapa encaja al soltar, el borde se funde mientras quedan tapas */
  .territorio .publicaciones{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(200px,30%,260px);overflow-x:auto;margin:0 -40px;padding:0 40px 6px;scroll-padding:0 40px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
  .territorio .publicaciones.al-final{-webkit-mask-image:none;mask-image:none}
  .territorio .publicaciones::-webkit-scrollbar{display:none}
  .territorio .pub{scroll-snap-align:start}
  .territorio .t-participa .wrap{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4vw,40px)}
  /* galería: cuatro filas sobre 6 columnas (4·2 · 2·4 · 3·3 · 2·2·2) */
  .territorio .mosaico-g{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(180px,30vw,260px)}
  .territorio .mosaico-g li,.territorio .mosaico-g li:nth-child(n){grid-column:span 2}
  .territorio .mosaico-g li:nth-child(1),.territorio .mosaico-g li:nth-child(4){grid-column:span 4}
  .territorio .mosaico-g li:nth-child(5),.territorio .mosaico-g li:nth-child(6){grid-column:span 3}
  .territorio .t-proyectos .lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .territorio .noticias{grid-template-columns:minmax(0,1fr);row-gap:28px}
}
@media (max-width:820px){
  .territorio{--aire:calc(clamp(34px,6vw,48px) + clamp(28px,4.4vh,48px))}
}
@media (max-width:560px){
  .territorio .publicaciones{margin:0 -28px;padding:0 28px 6px;scroll-padding:0 28px}
}
@media (max-width:620px){
  /* el hero en móvil, como el del home: el texto abajo, sobre un velo denso que sube desde el pie */
  .territorio .t-hero .fondo img{object-position:var(--pm,50% 50%)}
  .territorio .t-hero .pasos{left:28px;bottom:calc(54px + 16px)}
  .territorio .t-hero .velo{background:linear-gradient(180deg,rgba(20,26,15,.5) 0%,rgba(20,26,15,.12) 18%,rgba(20,26,15,.2) 40%,rgba(20,26,15,.72) 62%,rgba(20,26,15,.9) 80%,rgba(20,26,15,.94) 100%)}
  .territorio .t-hero .wrap{align-items:flex-end;padding:calc(var(--cab-h) + 24px) 0 46px}
  .territorio .t-hero h1{font-size:clamp(38px,11vw,50px);line-height:1.02}
  .territorio .t-hero .lugar{font-size:clamp(20px,5.6vw,24px)}
  .territorio .t-hero .entrada{font-size:16px}
  .territorio .t-hero .cta .btn{width:100%;height:52px}
  .territorio .lugares button{height:54px;font-size:11px}
  /* el mapa en móvil: sin nombres sobre el esquema (no caben); los puntos se eligen también en la fila de botones */
  .territorio .punto span{display:none}
  .territorio .punto,.territorio .punto.izq{flex-direction:row;padding:8px;transform:translate(-50%,-50%)}
  .territorio .punto i{width:18px;height:18px}
  .territorio .carta .et-rio,.territorio .carta .et-menor,.territorio .carta .norte,.territorio .carta .amortiguamiento{display:none}
  .territorio .carta .et-ciudad{font-size:26px;text-anchor:middle;transform:translateX(22px)}   /* centrado sobre la ciudad: no se corta a la izquierda */
  .territorio .carta .et-zona{font-size:22px;letter-spacing:.08em;text-anchor:middle}
  .territorio .nota-mapa{left:10px;bottom:6px;font-size:10px}
  .territorio .sitios{position:relative;display:flex;gap:8px;overflow-x:auto;margin:0 -28px;padding:12px 28px;background:var(--papel);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .territorio .sitios.al-final{-webkit-mask-image:none;mask-image:none}
  .territorio .sitios::-webkit-scrollbar{display:none}
  .territorio .sitios button{flex:none;height:40px;margin:0;padding:0 14px;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .territorio .sitios button[aria-pressed="true"]{background:var(--bosque);border-color:var(--bosque);color:#fff}
  .territorio .panel .sitio{display:block}
  .territorio .sitio .foto{aspect-ratio:16/10;min-height:0}
  /* proyectos: la lista con el retrato pequeño de css/fichas.css */
  .territorio .t-proyectos .lista{grid-template-columns:minmax(0,1fr);gap:0}
  .territorio .t-proyectos .inv .foto{aspect-ratio:4/5;margin:0}
  .territorio .t-proyectos .inv h3{font-size:17px}
  /* retos: en una columna */
  .territorio .t-retos .bloques{grid-template-columns:minmax(0,1fr);grid-template-rows:auto repeat(4,minmax(0,1fr))}
  .territorio .t-retos .titulo{grid-column:auto;padding:28px 22px 26px}
  .territorio .t-retos .reto{padding:24px 22px 26px}
  /* el Perú, más pequeño: no llega al río */
  .territorio .ubicacion{width:46px;left:10px;top:8px}
  .territorio .ubicacion figcaption{font-size:8.5px;margin-top:4px}
  /* conocimiento: tapas de 62 % del ancho (se ve la siguiente) */
  .territorio .publicaciones{grid-auto-columns:62%}
  .territorio .puertas{grid-template-columns:minmax(0,1fr);gap:22px}
  /* galería: dos columnas; la primera, la sexta y la novena, a todo el ancho */
  .territorio .mosaico-g{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .territorio .mosaico-g li,.territorio .mosaico-g li:nth-child(n){grid-column:span 1;aspect-ratio:4/5}
  .territorio .mosaico-g li:nth-child(1),.territorio .mosaico-g li:nth-child(6),.territorio .mosaico-g li:nth-child(9){grid-column:span 2;aspect-ratio:16/10}
  .territorio .mosaico-g .pie{padding:22px 12px 10px;font-size:12px}
  .territorio .visor figure{max-width:calc(100vw - 24px)}
  .territorio .visor img{max-height:calc(100dvh - 180px)}
  .territorio .visor .ant,.territorio .visor .sig{top:auto;bottom:16px;transform:none}
  .territorio .visor .ant{left:12px} .territorio .visor .sig{right:12px}
  /* lo último: la destacada y, debajo, las menores con su miniatura */
  .territorio .historias a{grid-template-columns:96px minmax(0,1fr);column-gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .territorio .t-hero .fondo img{transition:opacity .4s ease}
  .territorio .lugares .cinta.en-marcha{animation:none}
  .territorio .lugares .ventana{overflow-x:auto;scrollbar-width:none}
  .territorio .sitio.entra{animation:none}
  .territorio .punto i::before,.territorio .punto i::after,.territorio .punto span,.territorio .noticias .foto img,.territorio .ubicacion .region,.territorio .pub .tapa,.territorio .mosaico-g img,.territorio .mosaico-g .pie,.territorio .visor{transition:none}
  .territorio .punto[aria-pressed="true"] i::before{animation:none}
}

/* ── la plantilla de paisaje al sistema nuevo (Rodrigo, 11 oct) ──────────────────────────────────────────────
   Radios de 16 px en todas las fotos y bloques; los bloques que iban pegados con filetes de 2 px pasan a piezas
   separadas con aire (los retos, el mapa y su panel, la galería); los enlaces de texto en minúsculas como en el home */
.territorio .t-sobre .foto,.territorio .t-proyectos .foto,.territorio .t-novedades .foto,.territorio .t-saber .tapa{border-radius:16px;overflow:hidden}
.territorio .t-retos .bloques{gap:12px;background:none}
.territorio .t-retos .titulo,.territorio .t-retos .reto{border-radius:16px}
.territorio .mapa{gap:12px;background:none}
.territorio .lado-mapa,.territorio .panel{border-radius:16px;overflow:hidden}
.territorio .mosaico-g{gap:12px;background:none}
.territorio .mosaico-g li{border-radius:16px}
.territorio .ver-perfil,.territorio .todas,.territorio .leer{font-family:var(--ui)!important;font-weight:500!important;font-size:14.5px!important;letter-spacing:-.005em!important;text-transform:none!important}
@media (max-width:620px){
  .territorio .t-retos .bloques,.territorio .mapa,.territorio .mosaico-g{gap:10px}
}