/* Quiénes somos (assets/nosotros.js), v51: rehecho con el lenguaje del Mutanteverso (mutanteverso-n.css, que la capa
   también carga): claro y tinta, titulares que suben letra por letra, fotos que se destapan, letras que se reparten
   a lo ancho, píldoras, cursor "Ver", sello de Hablemos y MUTANTE gigante al pie.
   Esta hoja pone la capa (sube desde abajo, su propio scroll, la barra y el tirón para volver) y cada sección. */
.ns{--ns-linea:rgba(248,245,240,.16);--ns-salida:cubic-bezier(.22,.8,.2,1);--ns-lado:var(--orilla,32px);
  position:fixed;inset:0;z-index:26;background:var(--tinta,#070606);color:var(--claro,#F8F5F0);visibility:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  transform:translate3d(0,100%,0);transition:transform 1s var(--suave,cubic-bezier(.65,0,.35,1)),visibility 0s 1s}
.ns.abierto{visibility:visible;transform:none;transition:transform 1s var(--ns-salida)}
.ns.tirando{transition:none}
.ns::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:28vh;pointer-events:none;
  background:linear-gradient(to top,rgba(7,6,6,.9),rgba(7,6,6,0))}
.ns *,.ns *::before,.ns *::after{box-sizing:border-box}
.ns p,.ns h1,.ns h2,.ns h3,.ns ul,.ns li,.ns figure{margin:0;padding:0}
.ns ul{list-style:none}
.ns button:focus{outline:none}
.ns button:focus-visible,.ns a:focus-visible{outline:1px solid var(--mutation,#F24A1F);outline-offset:4px}

.ns .ns-scroll{position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ns .ns-scroll:focus{outline:none}
.ns .ns-scroll::-webkit-scrollbar{width:0}

/* ---------- barra: en 'difference' se lee sobre lo claro y sobre lo oscuro ---------- */
.ns .ns-barra{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px var(--ns-lado);pointer-events:none;mix-blend-mode:difference;color:var(--claro)}
.ns .ns-barra > *{pointer-events:auto}
.ns .ns-marca{display:flex;align-items:center;gap:12px;white-space:nowrap;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ns .ns-marca img{width:16px;height:auto;filter:brightness(0) invert(1)}
.ns .ns-cerrar{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:10px 0;transition:opacity .3s}
.ns .ns-cerrar:hover{opacity:.6}
.ns .ns-hilo{position:absolute;left:0;top:0;height:2px;width:100%;z-index:4;background:var(--mutation);transform-origin:left;transform:scaleX(0)}
.ns .ns-tirar{position:absolute;left:50%;bottom:calc(100% + 26px);transform:translateX(-50%);display:grid;justify-items:center;gap:10px;
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--claro);white-space:nowrap;pointer-events:none}
.ns .ns-tirar i{display:block;width:120px;height:1px;background:rgba(248,245,240,.25);overflow:hidden}
.ns .ns-tirar b{display:block;height:100%;background:var(--mutation);transform-origin:left;transform:scaleX(0)}
.ns .ns-tirar.listo{color:var(--mutation)}
/* el sello y el cursor del Mutanteverso viven en la capa: fijos a la pantalla, no al scroll */
.ns .vn-sello{position:absolute}
.ns .vn-cursor{position:fixed}

/* ---------- 1. Portada: SOMOS / MUTA[fotos]NTES ---------- */
.ns .ns-portada{position:relative;height:var(--alto,100vh);min-height:520px;overflow:hidden;background:var(--claro);color:var(--tinta)}
.ns .ns-portada-palabra{position:absolute;left:var(--ns-lado);right:var(--ns-lado);top:50%;transform:translateY(-46%);display:grid;justify-items:center;
  font-weight:900;font-stretch:75%;line-height:.8;letter-spacing:-.02em;text-transform:uppercase}
.ns .ns-portada-palabra .vn-r{white-space:nowrap}
.ns .ns-somos{font-size:clamp(40px,7vw,120px)}
.ns .ns-mutantes{display:flex;align-items:center;font-size:clamp(64px,13vw,230px)}
.ns .ns-mutantes .vn-p{padding-bottom:.08em;margin-bottom:-.08em}
.ns .ns-hueco{position:relative;display:block;width:.12em;height:.66em;margin:0 .05em;overflow:hidden;background:var(--tinta);transition:width 1.4s var(--cortina) .9s}
.ns.listo .ns-hueco,.ns.calma .ns-hueco{width:min(1.7em,24vw)}
.ns .ns-hueco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.ns .ns-hueco img.on{opacity:1}
.ns .ns-portada-arriba{position:absolute;left:var(--ns-lado);right:var(--ns-lado);top:96px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.ns .ns-portada-arriba .vn-lema span + span{color:var(--tenue-c)}
.ns .ns-portada-abajo{position:absolute;left:var(--ns-lado);right:calc(var(--ns-lado) + 104px);bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font:400 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ns .ns-portada-abajo a{border-bottom:1px solid transparent;transition:border-color .3s}
.ns .ns-portada-abajo a:hover{border-color:currentColor}
.ns .ns-baja{display:inline-flex;align-items:center;gap:10px;color:var(--tenue-c)}
.ns .ns-baja i{display:block;width:1px;height:26px;background:currentColor;transform-origin:top;animation:nsBaja 1.8s var(--cortina) infinite}
@keyframes nsBaja{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ns .ns-portada-arriba,.ns .ns-portada-abajo{opacity:0;transform:translateY(12px);transition:opacity .8s,transform 1s var(--sale)}
.ns.listo .ns-portada-arriba,.ns.listo .ns-portada-abajo,.ns.calma .ns-portada-arriba,.ns.calma .ns-portada-abajo{opacity:1;transform:none;transition-delay:.3s}
.ns.quieta .ns-baja i{animation-play-state:paused}

/* ---------- 2. Letras del ADN: sobre tinta, con la letra del Mutanteverso ---------- */
.ns .ll{background:var(--tinta);color:var(--claro);padding-block:20vh 18vh}
.ns .ll-linea{font-stretch:75%;font-size:clamp(46px,10.5vw,190px);line-height:.86}
.ns .ll-w{-webkit-text-stroke:1px rgba(248,245,240,.32);background-image:linear-gradient(90deg,var(--claro) 50%,transparent 50%)}
.ns .ll-chico{font-size:15px;line-height:1.45;max-width:38ch;color:var(--tenue)}
.ns .ll-chico b{color:var(--claro);font-weight:500}

/* ---------- capítulos: letras repartidas a lo ancho (como OBRAS) y el titular ---------- */
.ns .ns-cap{position:relative;padding:16vh var(--ns-lado) 16vh}
.ns .ns-letras-cap{position:sticky;top:76px;z-index:2;display:flex;width:100%;pointer-events:none;
  font-weight:700;font-size:clamp(18px,1.6vw,24px);letter-spacing:.01em;mix-blend-mode:difference;color:var(--claro)}
.ns .ns-letras-cap b{display:inline-block;will-change:transform;font-weight:700}
.ns .ns-cap-cabeza{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:6vh;align-items:start}
.ns .ns-cap-cabeza .vn-etiqueta{grid-column:1 / span 3;padding-top:.6em}
.ns .ns-cap-cabeza .vn-titular{grid-column:4 / -1;max-width:20ch}
.ns .ns-cap-bajada{grid-column:4 / span 5;margin-top:5vh;font-size:15px;line-height:1.5;max-width:42ch;color:var(--tenue)}
.ns .vn-claro .ns-cap-bajada{color:var(--tenue-c)}
.ns .ns-av{background:var(--claro);color:var(--tinta);padding-bottom:10vh}
.ns .ns-av .vn-etiqueta span{color:var(--mutation)}
.ns .ns-reel{margin-top:12vh;aspect-ratio:16/8.4;background:#111}
.ns .ns-reel figcaption{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:16px;color:var(--claro);
  font:400 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;z-index:1;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.ns .ns-reel video,.ns .ns-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* el carrusel va a todo lo ancho, en tinta, entre el capítulo claro y el pie del capítulo */
.ns .cc{background:var(--tinta);color:var(--claro)}
.ns .cc-pie{font-family:var(--mono)}
.ns .ns-cap-pie{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 24px;padding:9vh var(--ns-lado) 12vh;border-top:0}
.ns .ns-cap-pie > span{font:400 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.ns .ns-av-pie{background:var(--tinta);color:var(--claro)}

/* ---------- 3. Digital: obras como en el Mutanteverso ---------- */
.ns .ns-dg{background:var(--tinta);color:var(--claro)}
.ns .ns-dg .vn-etiqueta span{color:var(--mutation)}
.ns .ns-rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:16vh;margin-top:14vh}
.ns .ns-obra{min-width:0}
.ns .ns-obra:nth-child(3n+1){grid-column:2 / span 8}
.ns .ns-obra:nth-child(3n+2){grid-column:1 / span 6}
.ns .ns-obra:nth-child(3n){grid-column:8 / span 5;margin-top:26vh}
.ns .ns-obra-foto{position:relative;display:block;width:100%;aspect-ratio:16/10;background:#141212;cursor:pointer}
.ns .ns-obra:nth-child(3n+2) .ns-obra-foto{aspect-ratio:5/5.2}
.ns .ns-obra:nth-child(3n) .ns-obra-foto{aspect-ratio:4/3.4}
.ns .ns-obra-foto .vn-medio{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 40%,#2a2522,#100e0d)}
.ns .ns-obra-foto .vn-medio img{width:88%;height:78%;object-fit:contain;transform:scale(1.12)}
.ns .ns-obra-foto.dentro .vn-medio img{transform:none}
@media (hover:hover){ .ns-obra-foto.dentro:hover .vn-medio img{transform:scale(1.04)} }
@media (hover:hover) and (pointer:fine){ .ns-obra-foto{cursor:none} }
.ns h3.ns-obra-nombre{margin-top:18px;font-family:'Nabla',sans-serif;font-weight:400;font-size:clamp(34px,3.6vw,58px);line-height:1}
.ns .ns.ns-plana h3.ns-obra-nombre{font-family:'Archivo',sans-serif;font-weight:900;font-stretch:100%;letter-spacing:-.02em}
.ns .ns-obra-bajada{margin-top:10px;font-size:15px;line-height:1.4;max-width:40ch;color:var(--tenue)}
.ns .ns-obra-etiqueta{margin-top:14px;font:400 10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.ns .ns-dg .ns-cap-pie{padding-inline:0;margin-top:16vh;padding-top:22px;padding-bottom:0;border-top:1px solid var(--linea-o)}

/* ---------- 4. Hablemos ---------- */
.ns .ns-hablemos{background:var(--claro);color:var(--tinta);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:40px;padding:22vh var(--ns-lado) 14vh}
.ns .ns-hablemos > .vn-etiqueta{grid-column:1 / -1;margin-bottom:5vh;color:var(--tenue-c)}
.ns .ns-hablemos > .vn-titular{grid-column:1;font-size:clamp(44px,6.2vw,96px)}
.ns .ns-hab-botones{grid-column:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.ns .ns-hab-enlaces{grid-column:2;grid-row:2 / span 2;display:grid;gap:4px;font-size:17px;justify-items:start;padding-bottom:6px}
.ns .ns-hab-enlaces a,.ns .ns-hab-enlaces button{transition:color .3s;text-align:left}
.ns .ns-hab-enlaces a:hover,.ns .ns-hab-enlaces button:hover{color:var(--mutation)}

/* ---------- 5. Pie ---------- */
.ns .vn-pie{background:var(--tinta);color:var(--claro)}

/* ---------- teléfono ---------- */
@media (max-width:760px){
  .ns{--ns-lado:16px}
  .ns .ns-barra{padding:calc(env(safe-area-inset-top, 0px) + 18px) calc(16px + var(--menu-w, 92px) + 8px + env(safe-area-inset-right, 0px)) 12px calc(16px + env(safe-area-inset-left, 0px))}
  .ns .ns-somos{font-size:11vw}
  .ns .ns-mutantes{font-size:15.5vw}
  .ns.listo .ns-hueco,.ns.calma .ns-hueco{width:13vw}
  .ns .ns-portada-palabra{transform:translateY(-40%)}
  .ns .ns-portada-arriba{top:78px;flex-direction:column;gap:16px}
  .ns .ns-portada-abajo{bottom:calc(18px + env(safe-area-inset-bottom, 0px));right:96px}
  .ns .ns-portada-abajo .ns-redes{display:none}
  .ns .ll{padding-block:14vh 12vh}
  .ns .ll-linea{font-size:15.5vw}
  .ns .ns-cap{padding:10vh 16px}
  .ns .ns-letras-cap{top:66px;font-size:16px}
  .ns .ns-cap-cabeza{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .ns .ns-cap-cabeza .vn-etiqueta,.ns .ns-cap-cabeza .vn-titular,.ns .ns-cap-bajada{grid-column:1}
  .ns .ns-cap-bajada{margin-top:1vh}
  .ns .ns-reel{margin-top:7vh;aspect-ratio:4/5}
  .ns .ns-reel figcaption{flex-direction:column;gap:6px}
  .ns .ns-cap-pie{flex-direction:column;align-items:flex-start;padding:7vh 16px 9vh}
  .ns .ns-rejilla{grid-template-columns:minmax(0,1fr);row-gap:11vh;margin-top:9vh}
  .ns .ns-obra:nth-child(n){grid-column:1;margin-top:0}
  .ns .ns-obra:nth-child(3n){width:84%;justify-self:end}
  .ns .ns-obra-foto,.ns .ns-obra:nth-child(3n+2) .ns-obra-foto,.ns .ns-obra:nth-child(3n) .ns-obra-foto{aspect-ratio:4/4.2}
  .ns h3.ns-obra-nombre{font-size:36px;margin-top:14px}
  .ns .ns-dg .ns-cap-pie{margin-top:11vh;padding-inline:0}
  .ns .ns-hablemos{grid-template-columns:minmax(0,1fr);padding:14vh 16px 9vh}
  .ns .ns-hablemos > .vn-titular{font-size:clamp(44px,13vw,60px)}
  .ns .ns-hab-enlaces{grid-column:1;grid-row:auto;margin-top:34px}
}

/* ---------- calma (movimiento reducido) ---------- */
@media (prefers-reduced-motion:reduce){
  .ns,.ns.abierto{transition:none}
  .ns .ns-hueco{transition:none}
  .ns .ns-baja i{animation:none}
  .ns .ns-portada-arriba,.ns .ns-portada-abajo{opacity:1;transform:none;transition:none}
}

/* v86 · celular: el reel horizontal */
@media (max-width:760px){.ns .ns-reel{aspect-ratio:16/9}}