/* ns.css — «Quiénes somos» (26/10/2026). Va encima del <style> de importación (colores, Nunito y Raleway, esquinas 14/28/10 px,
   cabecera y pie) y de aq.css de alquiler (botón, escena parada, mesa de reseñas, cierre «MENDIVAN»), que se copian tal cual al
   montar: aquí solo lo que es de esta página. Prefijo ns-. */

/* 1 · cabecera (26/10, noche): la foto de banco a sangre (28/10; antes vídeo) con la frase blanca abajo y en el centro.
   En el móvil, la pantalla entera y la frase subida un poco del borde. */
@media (max-width:699px){
  .imp-hero.ns-hero[data-cab]{display:block;height:100svh;min-height:560px;max-height:none;padding:0}
  .imp-hero.ns-hero[data-cab] img{position:absolute;inset:0 0 auto;width:100%;height:min(64svh,138vw);object-fit:cover;object-position:50% 25%}   /* la foto arriba y el asfalto se funde en el color de debajo, donde va el texto */
  .imp-hero.ns-hero[data-cab] .txt{position:absolute;left:0;right:0;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));margin:0}
  .ns-hero h1{text-shadow:0 2px 18px rgba(0,0,0,.7)}
  .ns-hero::after{background:linear-gradient(180deg,rgba(10,16,14,.25) 0,rgba(10,16,14,0) 18%,rgba(10,16,14,0) 40%,rgba(10,16,14,.7) 62%,rgba(10,16,14,.9) 100%)}
}
.ns-ante{margin:0 0 -4px;font:700 13px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ns-hero .txt{gap:clamp(12px,2vh,18px)}
.ns-hero h1{max-width:26ch}
.ns-hero .ir{min-width:260px}

/* degradado: en escritorio el de camperización y venta (el de data-cab de importación); en el móvil, el de venta */
/* 2 · la historia (26/10, tarde): la sección se para y el scroll reparte cinco fotos encima de la mesa (ns.js pone --alto y mueve cada
   foto); a la izquierda, el capítulo de la foto de arriba; abajo, la camper de líneas por la carretera. Sin parar (sin JS, «reducir
   movimiento» o ventanas de menos de 560 px de alto): las fotos en fila y los capítulos debajo. */
.ns-viaje{position:relative;background:var(--noche);color:#fff}
.ns-vj-fija{position:relative;padding:clamp(72px,8vw,112px) var(--borde)}
.ns-vj-t{margin:0;font:800 clamp(30px,3vw,44px)/1.08 var(--tit);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.ns-vj-caps{list-style:none;margin:clamp(28px,3.4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.ns-vj-k{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font:700 12.5px/1.2 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--arena)}
.ns-vj-k b{font:800 13px/1 var(--tit);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums}
.ns-vj-caps h3{margin:0 0 10px;font:800 clamp(22px,1.9vw,28px)/1.08 var(--tit);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.ns-vj-caps li>p:last-child{margin:0;max-width:36ch;font:500 17px/1.55 var(--f);color:#D9DFD8}
.ns-vj-mesa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.78fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.4vw,48px)}
.ns-vj-f{margin:0;border-radius:14px;overflow:hidden;background:#24443f;aspect-ratio:3/4}
.ns-vj-f.ns-vj-ult{aspect-ratio:auto}
.ns-vj-f img{display:block;width:100%;height:100%;object-fit:cover}
.ns-vj-f img[src^="data:"]{visibility:hidden}
:root:not(.js) .ns-vj-f img[src^="data:"]{display:none}   /* sin JS, la copia de <noscript> (ojos 4, Á4) */
.ns-vj-ruta{display:none}
@media (max-width:899px){
  .ns-vj-caps{grid-template-columns:minmax(0,1fr)}
  .ns-vj-mesa{grid-template-columns:repeat(2,minmax(0,1fr))}.ns-vj-f.ns-vj-ult{grid-column:1/-1;aspect-ratio:4/3}
}
/* parada */
@media (min-height:560px){
  .ns-viaje.ns-vj-on{height:var(--alto,520vh)}
  .ns-vj-on .ns-vj-fija{position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:clip}
  .ns-vj-on .ns-vj-txt{position:absolute;z-index:3;left:max(var(--borde),calc((100vw - 1272px)/2));top:calc(80px + (100svh - 80px - 9vh) / 2);transform:translateY(-50%);width:min(520px,37vw)}
  /* un solo rótulo (crítica 2, P0-4): el título de la sección queda para los lectores de pantalla; el número, grande */
  .ns-vj-on .ns-vj-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ns-vj-on .ns-vj-caps{display:grid;grid-template-columns:minmax(0,1fr);margin-top:0}
  /* el capítulo que llega sube por partes (número, título, frase: 0, 60 y 130 ms); el que se va sale hacia arriba, rápido (P0-5) */
  .ns-vj-on .ns-vj-caps li{grid-area:1/1;pointer-events:none}
  .ns-vj-on .ns-vj-caps li.on{pointer-events:auto}
  .ns-vj-on .ns-vj-caps li>*{opacity:0;transform:translateY(26px);transition:opacity .18s ease-out,transform .22s ease-out}
  .ns-vj-on .ns-vj-caps li.antes>*{transform:translateY(-16px)}
  .ns-vj-on .ns-vj-caps li.on>*{opacity:1;transform:none;transition:opacity .4s ease-out,transform .55s var(--sale)}
  .ns-vj-on .ns-vj-caps li.on>h3{transition-delay:60ms}
  .ns-vj-on .ns-vj-caps li.on>p:last-child{transition-delay:130ms}
  .ns-vj-on .ns-vj-k{display:block;margin-bottom:16px;font:700 15px/1.2 var(--f);letter-spacing:.02em;text-transform:none;color:#C9D6CF}
  .ns-vj-on .ns-vj-k b{display:block;margin-bottom:10px;font:800 clamp(56px,5.4vw,92px)/.86 var(--tit);letter-spacing:-.03em;color:var(--arena)}
  .ns-vj-on .ns-vj-caps h3{margin-bottom:18px;font-size:clamp(44px,4.9vw,78px);line-height:1;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.18)}
  .ns-vj-on .ns-vj-caps li>p:last-child{max-width:32ch;font-size:clamp(18px,1.35vw,21px);color:#E2E8E2;text-shadow:0 1px 14px rgba(0,0,0,.25)}
  /* la mesa: ns.js coloca cada foto (left/top/width/height de su sitio y el transform de su llegada) */
  .ns-vj-on .ns-vj-mesa{display:block;position:absolute;inset:0;margin:0}
  /* copias en papel (crítica 2, P0-1): marco crema, esquina pequeña y sombra de contacto; la última pierde el marco al abrirse */
  .ns-vj-on .ns-vj-f{position:absolute;left:0;top:0;width:0;height:0;aspect-ratio:auto;padding:calc(clamp(7px,.7vw,11px) * (1 - var(--abre,0)));border-radius:3px;background:#F3EFE5;box-shadow:0 1px 2px rgba(0,0,0,.3),0 22px 44px -14px rgba(0,0,0,.6);will-change:transform;transform:translate3d(0,120vh,0)}
  .ns-vj-on .ns-vj-f img{border-radius:1px}
  .ns-vj-on .ns-vj-f::after{content:"";position:absolute;inset:0;background:#0C1A18;opacity:var(--osc,0);pointer-events:none}
  .ns-vj-on .ns-vj-ult{z-index:2}
  .ns-vj-on .ns-vj-ult::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--abre,0);background:linear-gradient(0deg,rgba(10,20,18,.6) 0,rgba(10,20,18,0) 24%)}
  .ns-vj-on .ns-vj-ruta{display:block;position:absolute;z-index:4;left:max(var(--borde),calc((100vw - 1272px)/2));right:max(var(--borde),calc((100vw - 1272px)/2));bottom:3.5vh;height:64px}
  .ns-vj-ruta svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
  .ns-vj-via{fill:none;stroke:rgba(245,242,234,.26);stroke-width:2.5;stroke-linecap:round}
  .ns-vj-hecha{fill:none;stroke:#F5F2EA;stroke-width:2.5;stroke-linecap:round}
}
@media (max-width:899px) and (min-height:560px){
  .ns-vj-on .ns-vj-txt{left:var(--borde);right:var(--borde);width:auto;top:auto;bottom:calc(2.5vh + 66px);transform:none}
  .ns-vj-on .ns-vj-t{font-size:12.5px}
  .ns-vj-on   .ns-vj-on .ns-vj-caps{margin-top:12px}
  .ns-vj-on .ns-vj-k{margin-bottom:8px;font-size:14px}
  .ns-vj-on .ns-vj-caps h3{margin-bottom:10px;font-size:clamp(28px,8vw,36px)}
  .ns-vj-on .ns-vj-k b{display:inline;margin:0 10px 0 0;font-size:15px;letter-spacing:0;color:#fff}
  .ns-vj-on .ns-vj-caps li>p:last-child{font-size:16px;line-height:1.5}
  .ns-vj-on .ns-vj-ruta{left:var(--borde);right:var(--borde);bottom:2.5vh;height:52px}
  .ns-vj-on .ns-vj-ult::before{background:linear-gradient(0deg,rgba(10,20,18,.9) 0,rgba(10,20,18,.72) 40%,rgba(10,20,18,0) 68%)}
}

/* 3 · quién está detrás: la foto de los dos a lo ancho (esquina 28 px) y cada uno con su texto debajo; los aliados, al final */
.ns-tit{margin:0;font:800 clamp(30px,3vw,44px)/1.08 var(--tit);letter-spacing:-.01em;color:var(--noche);text-wrap:balance}
.ns-gente{padding:clamp(72px,8.5vw,120px) 0 clamp(56px,6vw,88px);background:var(--roto)}
.ns-juntos{margin:clamp(24px,3vw,40px) 0 0;border-radius:28px;overflow:hidden;background:#D9D4C7;aspect-ratio:16/8;max-height:calc(100vh - 160px);width:100%}
.ns-juntos img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* 26/10, tarde: la foto de los dos, de pie y recortada a ellos, a la izquierda; a la derecha el título, las fichas y los aliados */
@media (min-width:900px){
  .ns-gente .env{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5.5vw,88px);align-items:start}
  .ns-gente .ns-tit{grid-column:2;grid-row:1}
  .ns-gente .ns-juntos{grid-column:1;grid-row:1/span 3;margin:0;aspect-ratio:1200/1548;max-height:none}
  .ns-gente .ns-dos{grid-column:2;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px)}
  .ns-gente .ns-aliados{grid-column:2;grid-template-columns:minmax(0,1fr);gap:16px}
}
.ns-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);margin-top:clamp(24px,3vw,40px)}
.ns-nom{margin:0 0 12px;padding-top:14px;border-top:2px solid var(--bosque);font:600 15px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.ns-nom b{display:block;margin-bottom:6px;font:800 clamp(22px,1.9vw,28px)/1.1 var(--tit);letter-spacing:0;text-transform:none;color:var(--noche)}
.ns-per p{margin:0 0 12px;max-width:54ch;font:500 17px/1.6 var(--f);color:var(--texto)}
.ns-aliados{margin-top:clamp(36px,4.5vw,64px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid rgba(25,61,58,.14);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,3fr);gap:clamp(20px,3vw,48px);align-items:start}
.ns-aliados h3{margin:0;font:800 clamp(19px,1.5vw,22px)/1.2 var(--tit);color:var(--noche);text-wrap:balance}
.ns-aliados ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.ns-aliados li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;font:500 16px/1.45 var(--f);color:var(--texto)}
.ns-aliados li .aq-ico{grid-row:span 2}
.ns-aliados b{display:block;margin-bottom:4px;font:800 17px/1.25 var(--tit);color:var(--noche)}
@media (max-width:899px){
  .ns-juntos{border-radius:14px;aspect-ratio:4/5;max-height:none}
  .ns-dos,.ns-aliados,.ns-aliados ul{grid-template-columns:minmax(0,1fr)}
}
/* llegan como las tarjetas de importación: suben un poco y aparecen (≤ 1 s en total con el retardo) */
.js .ns-per{opacity:0;transform:translateY(20px);transition:opacity .45s ease-out var(--d,0s),transform .6s var(--sale) var(--d,0s)}
.js .ns-per.dentro{opacity:1;transform:none}

/* 5 · hablas conmigo: la mesa de reseñas de alquiler sobre el verde claro de las preguntas */
.ns-hablas{background:#E9EEE6}
.ns-hablas h2{max-width:16ch}
/* las cuatro fotos de entregas llegan en ≤ 1 s con su escalón (ojos 5, Á-A: con el .9 s de alquiler eran 1,17 s) */
.js .ns-hablas .aq-rejilla li{transition:opacity .45s ease var(--d,0s),transform .6s var(--sale) var(--d,0s)}

/* 7 · cierre: el de alquiler, con foto (no vídeo) dentro de las letras; pegado a lo de arriba (crítica P1-2) */
.aq-nombre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ns-cierre{padding-top:clamp(48px,5vw,72px)}
.ns-cierre .ns-donde{margin:18px 0 0;font:600 14.5px/1.3 var(--f);letter-spacing:.06em;color:var(--suave)}

@media (prefers-reduced-motion:reduce){.js .ns-per{opacity:1;transform:none;transition:none}}