/* Nuestro ADN · sus efectos: la hélice de perlitas de luz (la de «Algo se está moviendo»), que gira, enciende un peldaño con
   cada parte del porqué y tiene el cursor por imán; el interruptor «Modo Impulsibox» del vídeo, que aquí se toca; y el país:
   los 14 departamentos que se encienden de occidente a oriente. */

/* ---------- 1 · la hélice y las cualidades ---------- */
.adn{position:relative;overflow-x:clip}
.adn-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.adn-lienzo{position:sticky;top:0;height:100vh;height:100svh}
.adn-lienzo canvas{position:absolute;inset:0;width:100%;height:100%}
.adn-texto{position:relative;z-index:1;padding:calc(var(--barra) + 12vh) 0 16vh}
.adn-texto .chip{margin-bottom:26px}
.adn-texto h1{font-size:clamp(40px,5.2vw,80px);line-height:1.05;letter-spacing:-.045em}
.adn-texto h1 .tenue{display:block;color:rgba(255,255,255,.5)}
.adn-por-que{margin-top:24vh}
.adn-cualidades{list-style:none;display:flex;flex-direction:column;gap:26vh;margin-top:6vh}
.adn-cualidades li{display:flex;flex-direction:column;gap:12px;opacity:.28;transition:opacity .6s ease}
.adn-cualidades li.es-aqui{opacity:1}
.adn-cualidades i{font-style:normal;font-weight:600;font-size:13px;letter-spacing:.18em;color:var(--verde)}
.adn-cualidades b{font-weight:600;font-size:clamp(28px,3.2vw,46px);line-height:1.12;letter-spacing:-.03em}
.adn-cualidades span{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(255,255,255,.8);max-width:30em}

/* ---------- 2 · Modo Impulsibox: el interruptor ----------
   La luz la pinta modo-impulsibox.js en el lienzo; aquí, el sitio de cada cosa. --pista es el largo del interruptor
   (en el vídeo, 380 px de diseño), y todo lo de alrededor va en proporción. */
.modo{position:relative;isolation:isolate;overflow:hidden;height:100vh;height:100svh;min-height:560px;max-height:980px;background:#000;
  --pista:clamp(150px,17vw,230px)}
.modo-gl{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block}
.modo-escena{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--lado);text-align:center}
.modo-frase{position:relative;width:min(100%,15ch);height:2.25em;margin-bottom:calc(var(--pista)*.28);font-weight:700;font-size:clamp(32px,4.4vw,70px);line-height:1.08;letter-spacing:-.03em}
.modo-linea{position:absolute;left:-1ch;right:-1ch;bottom:0;color:#8a8a8a;text-wrap:balance;transition:opacity .13s ease-out,filter .2s ease-out,transform .26s cubic-bezier(.2,.7,.2,1)}
.modo-linea.on{color:#fff}
.modo-linea.entra{opacity:0;filter:blur(7px);transform:scale(1.035)}
.modo-linea.sale{opacity:0;filter:blur(7px);transition-duration:.08s}
.modo-boton{position:relative;flex:none;width:var(--pista);height:calc(var(--pista)/2);padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.modo-boton:focus-visible{outline:2px solid var(--verde);outline-offset:8px}
.modo-etq{position:relative;width:100%;height:calc(var(--pista)*.2);margin-top:calc(var(--pista)*.12);overflow:hidden}
.modo-etq span{display:block;font-weight:500;font-size:max(11px,calc(var(--pista)*.068));line-height:1.6;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:#ececec;
  opacity:0;transform:translateY(80%);transition:opacity .2s ease-in,transform .24s ease-in}
.modo-etq img{position:absolute;left:50%;top:0;width:calc(var(--pista)*.72);height:auto;margin-left:calc(var(--pista)*-.36);opacity:0;transform:translateY(80%);transition:opacity .2s ease-in,transform .24s ease-in}
.modo.on .modo-etq span{opacity:1;transform:none;transition:opacity .3s ease-out .08s,transform .3s cubic-bezier(.2,.7,.2,1) .08s}
.modo.on.cierre .modo-etq span{opacity:0;transform:translateY(80%)}
.modo.on.cierre .modo-etq img{opacity:1;transform:none;transition:opacity .3s ease-out .08s,transform .3s cubic-bezier(.2,.7,.2,1) .08s}
.modo-pista{position:absolute;left:0;right:0;bottom:clamp(28px,8vh,72px);font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.42);transition:opacity .5s ease}
.modo.tocado .modo-pista{opacity:0}
.modo-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* sin WebGL2: el mismo interruptor, en CSS */
.modo.sin-gl{background:#121212;transition:background-color .35s ease}
.modo.sin-gl.on{background:#000}
.modo.sin-gl .modo-boton{border:2px solid #4e4e4e;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.modo.sin-gl .modo-boton::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b8a5a,#2bb295,#5ef0b4,#d8fff0,#2bb295,#0b8a5a);background-size:200% 100%;opacity:0;transition:opacity .3s}
.modo.sin-gl .modo-boton::after{content:'';position:absolute;top:50%;left:3.4%;width:43%;aspect-ratio:1;border-radius:50%;background:#eee;translate:0 -50%;
  transition:left .35s cubic-bezier(.3,1.4,.5,1),background-color .3s,box-shadow .3s}
.modo.sin-gl.on .modo-boton{border-color:#bff9e2;box-shadow:0 0 44px rgba(43,178,149,.55)}
.modo.sin-gl.on .modo-boton::before{opacity:1;animation:modo-luz 3s linear infinite}
.modo.sin-gl.on .modo-boton::after{left:53.6%;background:#000;box-shadow:0 0 0 2px #bff9e2,0 0 18px rgba(94,240,180,.7)}
@keyframes modo-luz{to{background-position:-200% 0}}

/* ---------- 3 · el país ---------- */
.pais{padding:clamp(90px,11vw,150px) 0;border-top:1px solid var(--linea)}
.pais-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,60px);align-items:center}
.pais-mapa{position:relative}
.pais-svg{width:100%;height:auto;overflow:visible}
.pais-deptos .dep{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22);stroke-width:1;cursor:pointer;transition:fill .5s ease,stroke .5s ease,filter .5s ease}
.pais-deptos .dep:hover{fill:rgba(43,178,149,.25)}
.pais-deptos .dep.on{fill:var(--verde);stroke:#bff3e6;filter:drop-shadow(0 0 14px rgba(43,178,149,.8))}
.pais-deptos .dep.visto{fill:rgba(43,178,149,.2)}
.pais-borde path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4}
.pais-dato{min-height:220px}
.pais-dato .etq{margin-bottom:14px}
.pais-dato h3{font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.03em}
.pais-dato p{margin-top:14px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:rgba(255,255,255,.84)}
.pais-cuenta{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:14px;color:rgba(255,255,255,.6)}
.pais-cuenta span{flex:1;height:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.pais-cuenta span::after{content:'';position:absolute;inset:0;width:var(--avance,0%);background:var(--verde);transition:width .5s ease}
.pais-lista{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pais-final{margin-top:34px;font-weight:600;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}

/* ---------- 4 · quiénes ---------- */
.quienes{padding:clamp(90px,11vw,150px) 0;border-top:1px solid var(--linea)}
.fundadores{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fundador{display:flex;flex-direction:column;gap:6px}
.retrato{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border-radius:24px;overflow:hidden;margin-bottom:14px;
  background:radial-gradient(80% 60% at 50% 35%,rgba(43,178,149,.16),rgba(43,178,149,0) 70%),#0a0a0a;border:1px solid var(--cristal-borde)}
.retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.retrato-falta{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.retrato-falta .punto{width:14px;height:14px}
.fundador h3{font-size:24px;line-height:1.2}
.fundador .cargo{font-weight:500;font-size:15px;color:var(--verde)}
.fundador p{font-size:15.5px;line-height:1.55;color:var(--apoyo)}

/* ---------- cierre ---------- */
.cierre{position:relative;isolation:isolate;text-align:center;padding:clamp(110px,14vw,190px) 0;overflow:hidden;border-top:1px solid var(--linea)}
.cierre::before{content:'';position:absolute;left:50%;top:55%;width:min(900px,120vw);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(43,178,149,.14),transparent 60%)}
.cierre h2{font-size:clamp(36px,5vw,76px);line-height:1.06;letter-spacing:-.045em;max-width:18ch;margin:0 auto}
.cierre .txt{margin:24px auto 34px;text-align:center}
.cierre-botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:980px){
  .adn-in{grid-template-columns:minmax(0,1fr)}
  .adn-lienzo{position:fixed;inset:0;height:100%;z-index:-1;opacity:.45;pointer-events:none}
  .adn-lienzo.fuera{visibility:hidden}
  .pais-in{grid-template-columns:minmax(0,1fr)}
  .fundadores{grid-template-columns:minmax(0,1fr)}
  .retrato{aspect-ratio:5/4}
}
@media (max-width:600px){
  .modo{--pista:clamp(140px,42vw,190px)}
  .modo-frase{font-size:clamp(28px,8.6vw,40px)}
  .adn-cualidades{gap:22vh}
  .cierre-botones .btn{flex:1 1 auto}
}