/* Aplikatio — Nosotros (nosotros/index.html)
 *
 * Dos modos:
 * - Sin .ns-js en <html> (sin JS o con "reducir movimiento"): se lee como una
 *   página normal, sección tras sección.
 * - Con .ns-js: historia con scroll. .ns-track da el largo y .ns-stage queda fija
 *   (sticky) mientras js/nosotros.js mueve cada pieza según el avance.
 * Paleta y tipos: los del inicio (Geist, Unbounded, #05071A, #2F8CFF, #FFB45E).
 */

.ns-page{--d:.15s;--H:min(46vh,520px);--W:calc(var(--H) * .85);position:relative;overflow:clip;background:#05071A;color:#F5F6FB;font-family:'Geist',system-ui,sans-serif}
.ns-stage{position:relative}
.ns-cielo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ns-tierra{position:absolute;left:0;right:0;bottom:0;height:100vh;height:100lvh;overflow:hidden}
.ns-earth{--hz:24vh}

/* ---------- textos ---------- */
.ns-esc{position:relative;box-sizing:border-box;padding:0 22px;text-align:center}
.ns-h1{margin:0;font-weight:600;font-size:clamp(46px,min(7vw,10vh),104px);line-height:1.02;letter-spacing:-.05em}
.ns-h1 .ns-t-b > span{animation-delay:calc(var(--d) + .38s),calc(var(--d) + 1.4s)}
.ns-h2{margin:0 auto;max-width:15em;font-size:clamp(32px,min(4.4vw,7vh),62px);line-height:1.04;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.ns-lead{margin:clamp(12px,2.2vh,20px) auto 0;max-width:32em;font-size:clamp(16px,min(1.5vw,2.4vh),21px);line-height:1.5;letter-spacing:-.01em;color:#A4A9C3;text-wrap:pretty}

/* ---------- la tripulación ----------
   Capas: .ns-astro (lo mueve el JS) > .ns-llega (llegada) > .ns-flota (deriva en
   gravedad cero) > img. Los de los lados van más chicos y girados. */
.ns-tripulacion{position:relative;height:var(--H);width:calc(var(--W) * 2.5);max-width:100%;margin:40px auto 0}
.ns-astro{position:absolute;bottom:0;left:50%;width:var(--W);height:var(--H);margin-left:calc(var(--W) / -2)}
.ns-llega,.ns-px,.ns-flota,.ns-pose{position:absolute;inset:0}
.ns-astro img{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.ns-a1{z-index:2;transform-origin:43% 32.1%}
.ns-a0{left:calc(50% - var(--W) * .62);bottom:4%}
.ns-a0 .ns-pose{transform:scale(-.74,.74) rotate(-12deg)}
.ns-a2{left:calc(50% + var(--W) * .62);bottom:9%}
.ns-a2 .ns-pose{transform:scale(.72) rotate(14deg)}
/* visores dibujados en CSS encima del de la imagen: cada astronauta tiene el suyo
   (azul, dorado, violeta), todos reflejando la Tierra. El dorado es al que entra la
   cámara: al ser vectorial se ve nítido aunque se acerque 20 veces. */
.ns-visor{position:absolute;left:43%;top:32.1%;width:24%;aspect-ratio:1;margin:-12% 0 0 -12%;border-radius:50%;overflow:hidden}
.ns-visor::after{content:"";position:absolute;left:20%;top:16%;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0,rgba(255,255,255,.55) 22%,rgba(255,255,255,0) 70%)}
.ns-visor i{position:absolute;left:-40%;right:-40%;top:72%;height:140%;border-radius:50%;background:radial-gradient(ellipse at 50% 6%,#7CC0FF 0,#2A6FD0 22%,#0E2F78 52%,#06143A 80%);box-shadow:0 -1px 0 1px rgba(214,236,255,.9),0 -10px 30px rgba(124,192,255,.55)}
.ns-visor-1{background:radial-gradient(circle at 33% 28%,#FFE6B8 0,#F6AE52 9%,#C8661C 32%,#6E2A08 62%,#1E0B03 100%)}
.ns-visor-0{background:radial-gradient(circle at 33% 28%,#E2F6FF 0,#7FD0FF 10%,#2380D8 34%,#0C2C6E 64%,#030A1F 100%)}
.ns-visor-0 i{background:radial-gradient(ellipse at 50% 6%,#FFD18A 0,#F08A2E 20%,#7A2E0C 50%,#1E0A04 80%);box-shadow:0 -1px 0 1px rgba(255,226,180,.9),0 -10px 30px rgba(255,170,90,.55)}
.ns-visor-2{background:radial-gradient(circle at 33% 28%,#F3EAFF 0,#BFA6FF 10%,#6E4FDB 34%,#2B1A70 64%,#0A0620 100%)}

/* hologramas: lo que hace cada uno (los tres verbos del texto) */
.ns-holo{position:absolute;z-index:3;display:flex;flex-direction:column;gap:8px;width:clamp(122px,12vw,168px);box-sizing:border-box;padding:10px 12px 12px;border-radius:12px;border:1px solid rgba(140,220,255,.55);background:linear-gradient(180deg,rgba(90,190,255,.2),rgba(90,190,255,.06));box-shadow:0 0 28px rgba(95,184,255,.35),inset 0 0 20px rgba(95,184,255,.14);color:#E4F6FF;font-size:13px;font-weight:600;letter-spacing:-.01em;text-align:left;overflow:hidden;transform-origin:0 100%;
  animation:nsHolo 1.1s cubic-bezier(.16,1,.3,1) backwards}
.ns-holo::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,rgba(95,184,255,0),rgba(95,184,255,.16),rgba(95,184,255,0));animation:scan 4s linear infinite;pointer-events:none}
.ns-holo svg{display:block;width:100%;height:auto;overflow:visible}
.ns-holo-0{left:-40%;top:34%;transform-origin:100% 100%;animation-delay:calc(var(--d) + 1.9s)}
.ns-holo-1{left:70%;top:38%;animation-delay:calc(var(--d) + 1.6s)}
.ns-holo-2{left:76%;top:30%;animation-delay:calc(var(--d) + 2.2s)}
@keyframes nsHolo{0%{opacity:0;transform:scale(.4)}55%{opacity:1}70%{opacity:.6}80%{opacity:1}100%{opacity:1;transform:none}}
.ns-holo-dato{animation:nsDato 2.6s linear infinite}
@keyframes nsDato{0%{transform:translateX(0);opacity:0}10%{opacity:1}45%{transform:translateX(41px)}58%{transform:translateX(51px)}90%{transform:translateX(86px);opacity:1}100%{transform:translateX(86px);opacity:0}}
.ns-holo-b{fill:rgba(159,224,255,.78);transform-box:fill-box;transform-origin:50% 100%;animation:nsBarra 3.2s ease-in-out infinite;animation-delay:var(--r)}
@keyframes nsBarra{0%,100%{transform:scaleY(calc(var(--h) * .45))}50%{transform:scaleY(var(--h))}}
.ns-holo-traza{stroke-dasharray:100;animation:nsTraza 4.4s ease-in-out infinite}
@keyframes nsTraza{0%{stroke-dashoffset:100}55%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}

@keyframes nsLlega0{from{opacity:0;transform:translate(-42vw,-8vh) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes nsLlega1{from{opacity:0;transform:translateY(40vh) scale(.8)}to{opacity:1;transform:none}}
@keyframes nsLlega2{from{opacity:0;transform:translate(42vw,-12vh) rotate(30deg)}to{opacity:1;transform:none}}
@keyframes nsFlota{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(6px,-10px) rotate(1.6deg)}66%{transform:translate(-5px,-4px) rotate(-1.2deg)}}
.ns-a0 .ns-llega{animation:nsLlega0 2.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) + .25s)}
.ns-a1 .ns-llega{animation:nsLlega1 2.2s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
.ns-a2 .ns-llega{animation:nsLlega2 2.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) + .4s)}
.ns-a0 .ns-flota{animation:nsFlota 9s ease-in-out infinite;animation-delay:-3s}
.ns-a1 .ns-flota{animation:nsFlota 11s ease-in-out infinite}
.ns-a2 .ns-flota{animation:nsFlota 10s ease-in-out infinite;animation-delay:-6s}

/* ---------- ¿sabías que se puede? ---------- */
.ns-tres{display:flex;flex-direction:column;align-items:center}
.ns-mazo{position:relative;width:min(700px,100%);height:clamp(330px,50vh,400px);margin-top:clamp(20px,3.4vh,36px)}
.ns-carta{position:absolute;inset:0;perspective:1800px}
.ns-gira{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.ns-cara{position:absolute;inset:0;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(18px,2.6vw,36px);padding:clamp(22px,3vw,40px);border-radius:26px;text-align:left;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ns-papel{color:#141833;background:repeating-linear-gradient(180deg,#F3F5FA 0,#F3F5FA 31px,#DCE2EE 31px,#DCE2EE 32px);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.5) inset}
/* cinta que detiene la hoja */
.ns-papel::before{content:"";position:absolute;left:50%;top:-12px;width:110px;height:28px;margin-left:-55px;transform:rotate(-3deg);background:rgba(255,236,200,.62);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ns-pantalla{transform:rotateY(180deg);color:#F5F6FB;background:linear-gradient(155deg,#16276A 0%,#0B1236 58%,#070A22 100%);border:1px solid rgba(75,163,255,.5);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 40px 90px -24px rgba(47,140,255,.45)}
.ns-txt{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ns-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:600}
.ns-tag-hoy{color:#9A3B08;background:rgba(194,65,12,.12)}
.ns-tag-puede{color:#1A1004;background:#FFB45E}
.ns-area{font-size:14px;font-weight:500;color:#5A6080}
.ns-pantalla .ns-area{color:#8CC9FF}
.ns-frase{margin:2px 0 0;font-size:clamp(21px,min(2.3vw,3.4vh),30px);line-height:1.22;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.ns-prueba{margin:6px 0 0;font-size:14px;line-height:1.45;color:#A4A9C3}
.ns-dibujo{width:100%;height:auto;max-height:100%}
.ns-ui{display:flex;flex-direction:column;gap:8px;font-size:13px}
.ns-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.ns-fila em{font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.ns-fila-total{background:rgba(47,140,255,.12);border-color:rgba(75,163,255,.35)}
.ns-verde{color:#0B3B22;background:#7FD9A6}
.ns-ambar{color:#3A2204;background:#FFC36E}
.ns-azul{color:#05123A;background:#8CC9FF}
.ns-cara-scan{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.ns-cara-scan svg{flex:none;width:52px;height:52px}
.ns-cara-scan span{display:flex;flex-direction:column;gap:2px;font-weight:600}
.ns-cara-scan b{font-weight:400;color:#8CC9FF;font-size:12px}
.ns-barra{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.ns-barra b{font-weight:600}
.ns-barra i{grid-column:1 / -1;height:6px;border-radius:3px;background:linear-gradient(90deg,#2F8CFF var(--v),rgba(255,255,255,.1) var(--v))}
.ns-barra-baja i{background:linear-gradient(90deg,#FFB45E var(--v),rgba(255,255,255,.1) var(--v))}
.ns-nav{display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:10px 10px 0 0;background:rgba(255,255,255,.1)}
.ns-nav i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.ns-nav span{margin-left:8px;font-size:11.5px;color:#C4C8DA}
.ns-web{display:flex;flex-direction:column;gap:7px;margin-top:-8px;padding:14px 12px;border-radius:0 0 12px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-top:0}
.ns-web b{height:46px;border-radius:8px;background:linear-gradient(120deg,#2F8CFF,#7B5CFF)}
.ns-web span{height:6px;width:80%;border-radius:3px;background:rgba(255,255,255,.18)}
.ns-web span + span{width:55%}
.ns-web em{align-self:flex-start;font-style:normal;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;background:#FFB45E;color:#1A1004}

.ns-puntos{display:flex;gap:6px;margin-top:clamp(14px,2.4vh,26px)}
.ns-puntos button{position:relative;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.ns-puntos button::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:rgba(255,255,255,.28);transition:background-color .3s ease,transform .3s ease}
.ns-puntos button[aria-current="true"]::after{background:#FFB45E;transform:scale(1.35)}
.ns-puntos button:focus-visible{outline:2px solid #4BA3FF;outline-offset:-6px;border-radius:50%}

/* ---------- vamos contigo ---------- */
.ns-cuatro{display:flex;flex-direction:column;align-items:center}
.ns-ruta{position:relative;width:min(1000px,100%);aspect-ratio:1000 / 300;margin-top:clamp(28px,6vh,64px)}
.ns-ruta-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ns-ruta-base{fill:none;stroke:rgba(140,201,255,.32);stroke-width:2.5;stroke-dasharray:3 10}
.ns-ruta-luz{fill:none;stroke:#FFB45E;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,180,94,.7))}
html:not(.ns-js) .ns-ruta-luz{display:none}
.ns-etapas{list-style:none;margin:0;padding:0}
.ns-etapas li{position:absolute;transform:translate(-50%,-7px)}
.ns-etapas button{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:#8F95B5;white-space:nowrap;cursor:pointer;transition:color .3s ease}
.ns-etapas button i{width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid rgba(140,201,255,.55);background:#05071A;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.ns-etapas .es-paso button{color:#C4C8DA}
.ns-etapas .es-paso button i{background:#FFB45E;border-color:#FFB45E}
.ns-etapas .es-actual button{color:#FFFFFF}
.ns-etapas .es-actual button i{box-shadow:0 0 0 6px rgba(255,180,94,.18),0 0 18px rgba(255,180,94,.8)}
.ns-etapas button:focus-visible{outline:2px solid #4BA3FF;outline-offset:4px;border-radius:8px}
.ns-capsula{position:absolute;left:4%;top:83.3%;width:118px;height:118px;margin:-59px 0 0 -59px;pointer-events:none}
.ns-orbita{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(140,201,255,.3);animation:nsOrbita 16s linear infinite}
.ns-orbita img{position:absolute;width:34px;height:40px;margin:-20px 0 0 -17px}
.ns-orbita img:nth-child(1){left:50%;top:0}
.ns-orbita img:nth-child(2){left:93.3%;top:75%}
.ns-orbita img:nth-child(3){left:6.7%;top:75%}
@keyframes nsOrbita{to{transform:rotate(360deg)}}
.ns-modulo{position:absolute;left:50%;top:50%;width:40px;height:30px;margin:-15px 0 0 -20px;border-radius:14px;background:linear-gradient(180deg,#F2F4FA,#9AA3C2);box-shadow:0 0 30px rgba(255,180,94,.45)}
.ns-modulo::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#FFB45E;box-shadow:0 0 10px #FFB45E}
.ns-etapa-texto{margin:clamp(56px,9vh,96px) auto 0;max-width:34em;font-size:clamp(17px,min(1.6vw,2.5vh),21px);line-height:1.5;color:#D6DAEA;min-height:3em}
.ns-etapa-texto b{display:block;margin-bottom:4px;font-weight:600;color:#FFFFFF}

/* ---------- cierre ---------- */
.ns-cinco{display:flex;flex-direction:column;align-items:center}
.ns-cta{display:inline-flex;align-items:center;min-height:54px;margin-top:clamp(22px,4vh,32px);padding:0 32px;border-radius:999px;background:#2F8CFF;color:#FFFFFF;text-decoration:none;font-size:17px;font-weight:500}
.ns-pista{display:none}

/* ---------- modo lectura (sin JS o con "reducir movimiento") ---------- */
html:not(.ns-js) .ns-esc{padding:clamp(72px,12vh,120px) 22px}
html:not(.ns-js) .ns-uno{padding-bottom:0}
html:not(.ns-js) .ns-dos{padding-top:48px}
html:not(.ns-js) .ns-mazo{height:auto;display:flex;flex-direction:column;gap:28px}
html:not(.ns-js) .ns-carta{position:relative;perspective:none}
html:not(.ns-js) .ns-gira{display:grid;gap:12px;height:auto}
html:not(.ns-js) .ns-cara{position:relative;transform:none;min-height:300px}
html:not(.ns-js) .ns-puntos{display:none}
html:not(.ns-js) .ns-capsula{left:96%}
html:not(.ns-js) .ns-tierra{display:none}
html:not(.ns-js) .ns-etapas li:last-child button{color:#FFFFFF}

/* ---------- historia con scroll ---------- */
.ns-js .ns-track{display:block;height:900vh;height:900lvh;margin-top:-53px}
.ns-js .ns-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;contain:layout paint}
.ns-js .ns-esc{position:absolute;left:0;right:0;z-index:3}
.ns-js .ns-uno{top:calc(53px + 7vh)}
.ns-js .ns-dos{top:calc(53px + 9vh);opacity:0;visibility:hidden}
.ns-js .ns-tres{top:0;bottom:0;justify-content:center;padding:calc(53px + 2vh) 22px 2vh;opacity:0;visibility:hidden}
.ns-js .ns-cuatro{top:0;bottom:0;justify-content:center;padding:calc(53px + 2vh) 22px 4vh;opacity:0;visibility:hidden}
.ns-js .ns-cinco{top:calc(53px + 15vh);opacity:0;visibility:hidden}
.ns-js .ns-tripulacion{position:absolute;left:50%;bottom:5vh;width:0;margin:0;z-index:2}
.ns-js .ns-astro,.ns-js .ns-tres-head,.ns-js .ns-carta,.ns-js .ns-gira,.ns-js .ns-capsula,.ns-js .ns-tierra{will-change:transform}
.ns-js .ns-carta{visibility:hidden}
.ns-js .ns-tierra{transform:translateY(70vh)}
.ns-js .ns-pista{position:absolute;left:0;right:0;bottom:calc(2.5vh + 100lvh - 100svh);z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:#8F95B5}

/* ---------- celular ---------- */
@media (max-width:700px){
  .ns-page{--H:min(36vh,64vw)}
  .ns-a0{left:calc(50% - var(--W) * .5)}
  .ns-a2{left:calc(50% + var(--W) * .5)}
  .ns-holo{width:96px;padding:7px 8px 8px;gap:5px;font-size:10.5px;border-radius:9px}
  .ns-holo-0{left:-14%;top:20%}
  .ns-holo-1{left:62%;top:44%}
  .ns-holo-2{left:52%;top:12%}
  .ns-mazo{height:min(60vh,520px)}
  .ns-cara{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.8fr) auto;gap:14px;align-items:start;padding:22px 20px}
  .ns-dibujo,.ns-ui{order:-1;align-self:center}
  .ns-dibujo{max-height:24vh}
  .ns-ui{font-size:12px;gap:6px}
  .ns-ui .ns-fila:nth-child(n+3):not(.ns-fila-total),.ns-ui .ns-barra:nth-child(3){display:none}
  .ns-etapas button{font-size:0;gap:0}
  .ns-capsula{width:84px;height:84px;margin:-42px 0 0 -42px}
  .ns-orbita img{width:24px;height:28px;margin:-14px 0 0 -12px}
  .ns-etapa-texto{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .ns-llega,.ns-flota,.ns-orbita,.ns-holo,.ns-holo::after,.ns-holo-dato,.ns-holo-b,.ns-holo-traza{animation:none !important}
}