/* =====================================================================
   DataGo's — Homepage "Inicio" effects (vanilla adaptations)
   Globe hero · Fases carousel · Pulse-beams problema · Shader solución
   Radial orbital industrias · Live numbers · Text-hover · Iso-grid footer
   Loads ONLY on index.html. Respeta prefers-reduced-motion.
   ===================================================================== */

/* ---------- 1. GLOBE HERO ---------- */
.hero-globe{position:relative;min-height:clamp(560px,86vh,820px);border-radius:32px;overflow:hidden;
  background:radial-gradient(125% 125% at 50% 8%,#0a1b33 38%,#0c2340 100%);isolation:isolate}
#globeCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-globe .glow{position:absolute;width:680px;height:680px;left:50%;top:46%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(41,171,226,.22),transparent 62%);filter:blur(20px);z-index:1;pointer-events:none}
.hero-globe .hero-head{position:relative;z-index:3;text-align:center;max-width:920px;margin-inline:auto;
  padding:clamp(56px,11vh,120px) var(--pad)}
.hero-globe .eyebrow{color:#bfe0f4;justify-content:center;display:inline-flex}
.hero-globe .eyebrow::before{background:var(--cian)}
.hero-globe h1{font-size:clamp(38px,6.4vw,92px);font-weight:900;letter-spacing:-.035em;line-height:.98;
  color:#fff;margin:18px 0 20px}
.hero-globe h1 .accent{background:linear-gradient(120deg,var(--cian),#7cc6ee 55%,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-globe .hero-sub{font-size:clamp(16px,1.9vw,21px);color:#cdddf0;max-width:640px;margin:0 auto;line-height:1.55}
.hero-globe .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-globe .btn.ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.hero-globe .btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.hero-globe .hero-note{color:#9fb8d4;font-size:13px;margin-top:20px}
.hero-globe .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(8,20,38,.55) 100%)}

/* ---------- 2. FASES CAROUSEL ---------- */
.fases{padding-block:72px}
.fases .fhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.fases .fnav{display:flex;gap:10px;flex:0 0 auto}
.fbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);
  display:grid;place-items:center;cursor:pointer;transition:all .2s}
.fbtn:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.fbtn:disabled{opacity:.35;cursor:not-allowed}
.fbtn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ftrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;
  scrollbar-width:none;-ms-overflow-style:none}
.ftrack::-webkit-scrollbar{display:none}
.fslide{flex:0 0 320px;max-width:320px;scroll-snap-align:start;border-radius:20px;overflow:hidden;position:relative;
  min-height:430px;border:1px solid var(--line);background:var(--navy);box-shadow:0 24px 50px -34px rgba(12,35,64,.6);
  transition:transform .3s}
.fslide:hover{transform:translateY(-5px)}
.fslide .fimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.fslide:hover .fimg{transform:scale(1.06)}
.fslide .fov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,35,64,0) 8%,rgba(12,35,64,.55) 52%,rgba(12,35,64,.94) 100%)}
.fslide .fbody{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;z-index:2}
.fslide .fstep{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:700;
  display:flex;align-items:center;gap:8px;margin-bottom:auto}
.fslide .fstep .fl{background:var(--cta);color:#1a1206;padding:4px 10px;border-radius:7px;font-weight:800;letter-spacing:.06em;
  box-shadow:0 6px 16px -8px rgba(245,146,27,.7)}
.fslide .fstep b{width:30px;height:30px;border-radius:9px;background:var(--cta);color:#1a1206;display:grid;place-items:center;font-size:14px}
.fslide h3{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.fslide p{font-size:14.5px;color:#cdddf0;line-height:1.5}
.fdots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.fdot{width:8px;height:8px;border-radius:50%;background:rgba(21,102,192,.22);border:0;cursor:pointer;transition:all .25s}
.fdot.on{background:var(--azul);width:24px;border-radius:5px}

/* ---------- 3. PULSE-BEAMS PROBLEMA ---------- */
.problema{position:relative;background:var(--dark);color:var(--cream);border-radius:32px;margin:24px;
  padding:clamp(60px,9vw,120px) var(--pad);overflow:hidden;isolation:isolate}
.pb-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pb-inner{position:relative;z-index:2;max-width:860px;margin-inline:auto;text-align:center}
.pb-inner .eyebrow{color:#9fb8d4;justify-content:center;display:inline-flex}
.pb-inner .eyebrow::before{background:var(--alerta)}
.pb-inner h2{font-size:clamp(30px,5.6vw,68px);font-weight:900;letter-spacing:-.035em;line-height:1.02;
  margin:18px 0 18px;color:#fff}
.pb-inner h2 .bad{color:#ff6b6b}
.pb-inner h2 .accent{background:linear-gradient(120deg,var(--cian),#7cc6ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-inner p{font-size:clamp(16px,1.8vw,20px);color:#cdddf0;max-width:600px;margin:0 auto 8px;line-height:1.55}
.pb-nodes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.pb-node{font-size:13.5px;font-weight:600;color:#dfeaf7;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:11px 18px;display:inline-flex;align-items:center;gap:9px;
  backdrop-filter:blur(6px)}
.pb-node svg{width:16px;height:16px;stroke:#ff6b6b;stroke-width:2.6;fill:none;flex:0 0 auto}

/* ---------- 4. SHADER SOLUCIÓN ---------- */
.models{position:relative;overflow:hidden}
#solucionShader{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;display:block}
.models .shader-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,rgba(12,35,64,.55),var(--dark) 78%)}
.models .wrap{position:relative;z-index:2}

/* ---------- 5. RADIAL ORBITAL INDUSTRIAS ---------- */
.orbital-sec{padding-block:40px 80px}
.orbital{position:relative;width:100%;height:clamp(520px,64vw,640px);margin-top:10px;
  display:grid;place-items:center;overflow:hidden}
.orbital .ring{position:absolute;border:1px solid var(--line-d);border-radius:50%}
.orbital .ring.r1{width:clamp(300px,52vw,500px);height:clamp(300px,52vw,500px)}
.orbital .ring.r2{width:clamp(180px,32vw,310px);height:clamp(180px,32vw,310px);border-style:dashed;opacity:.5}
.orb-hub{position:absolute;z-index:6;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,var(--azul),var(--navy));color:#fff;
  box-shadow:0 0 0 8px rgba(21,102,192,.12),0 24px 50px -16px rgba(21,102,192,.6)}
.orb-hub .hb-ico{width:34px;height:34px;margin-bottom:4px}
.orb-hub .hb-ico svg{width:100%;height:100%;stroke:#fff;stroke-width:1.8;fill:none}
.orb-hub strong{font-size:13px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.orb-hub span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#bfe0f4}
.orb-node{position:absolute;z-index:5;left:50%;top:50%;width:0;height:0}
.orb-node .nbtn{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--navy);
  box-shadow:0 14px 30px -14px rgba(12,35,64,.5);transition:transform .3s,box-shadow .3s,background .3s,color .3s}
.orb-node .nbtn svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none}
.orb-node.active .nbtn,.orb-node .nbtn:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translate(-50%,-50%) scale(1.12)}
.orb-node .nlabel{position:absolute;left:50%;top:calc(50% + 44px);transform:translateX(-50%);white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--ink)}
.orb-card{position:absolute;z-index:9;left:50%;top:calc(50% + 60px);transform:translateX(-50%);width:268px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:left;
  box-shadow:0 30px 60px -28px rgba(12,35,64,.6);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s}
.orb-node.active .orb-card{opacity:1;visibility:visible}
.orb-card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul)}
.orb-card h4{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:6px 0 8px}
.orb-card p{font-size:13.5px;color:var(--gray-d);line-height:1.5;margin-bottom:14px}
.orb-card .lnk{font-size:13px;font-weight:700;color:var(--azul);display:inline-flex;align-items:center;gap:6px}
.orbital-hint{text-align:center;font-size:13px;color:var(--gray);font-family:var(--mono);letter-spacing:.04em;margin-top:6px}
@media (max-width:680px){
  .orb-card{width:230px}
  .orb-node .nbtn{width:54px;height:54px}
}

/* ---------- 6. LIVE NUMBERS (autoridad) ---------- */
.live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.live-card{border:1px solid var(--line-d);border-radius:20px;padding:26px 22px;text-align:center;
  background:linear-gradient(165deg,rgba(41,171,226,.06),rgba(12,35,64,.02))}
.live-card .lv{display:flex;align-items:baseline;justify-content:center;gap:2px;
  font-size:clamp(32px,4.4vw,52px);font-weight:900;letter-spacing:-.03em;color:var(--navy);line-height:1}
.live-card .lv .pre,.live-card .lv .suf{color:var(--cian);font-size:.6em}
.live-card p{font-size:13.5px;color:var(--gray-d);margin-top:12px;line-height:1.45}
.live-card .pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--exito);margin-right:7px;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:lvping 1.8s infinite}
@keyframes lvping{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
/* digit roll */
.an{display:inline-flex;font-variant-numeric:tabular-nums}
.an-slot{position:relative;display:inline-block;overflow:hidden}
.an-layer{display:inline-block;will-change:transform,opacity,filter}
.an-in{animation:an-in .5s cubic-bezier(.16,1,.3,1) both}
.an-out{position:absolute;inset:0;animation:an-out .5s cubic-bezier(.4,0,1,1) both}
@keyframes an-in{from{opacity:0;filter:blur(10px);transform:translateY(var(--an-d,.6em))}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes an-out{from{opacity:1;filter:blur(0);transform:translateY(0)}to{opacity:0;filter:blur(10px);transform:translateY(calc(var(--an-d,.6em) * -1))}}
@media (max-width:880px){.live-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- 7. TEXT-HOVER (resultados) ---------- */
.thx-wrap{position:relative;display:grid;place-items:center;padding:8px 0 4px;min-height:120px}
.thx{width:100%;max-width:900px;height:auto;display:block;user-select:none;cursor:default}
.thx text{font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:62px;letter-spacing:-.02em}

/* ---------- 8. ISO-GRID FOOTER ---------- */
footer.site{position:relative;overflow:hidden;isolation:isolate}
#footGrid{position:absolute;inset:0;z-index:0;display:block;opacity:.85}
footer.site .foot-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 125% at 50% 0%,rgba(12,35,64,0) 42%,rgba(12,35,64,.78) 100%)}
footer.site.dark{background:var(--dark)}
footer.site.dark .wrap{position:relative;z-index:2}
footer.site.dark .foot-brand p,footer.site.dark .foot-col a,footer.site.dark .foot-bottom p,footer.site.dark .foot-bottom a{color:#cdddf0}
footer.site.dark .foot-col h5{color:#7f9bbb}
footer.site.dark .foot-col a:hover{color:var(--cian)}
footer.site.dark .foot-top,footer.site.dark .foot-bottom{border-color:rgba(255,255,255,.12)}
footer.site.dark .word .top,footer.site.dark .word .mx{color:#fff}

@media (max-width:680px){
  .fases .fhead{flex-direction:column;align-items:flex-start}
  .fslide{flex-basis:260px;max-width:260px;min-height:380px}
  .thx text{font-size:44px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fslide .fimg,.fslide:hover .fimg{transition:none;transform:none}
  .an-in,.an-out{animation:none}
  .an-out{display:none}
  .live-card .pulse-dot{animation:none}
}