/* IA Logos band (2026-10-10): Claude · ChatGPT · Gemini · Grok — "te enseñamos a usarlas".
   Se inserta justo debajo del hero. Sin dependencias: CSS + IntersectionObserver propio. */
.ia-band{position:relative;isolation:isolate;overflow:hidden;background:#071630;color:#fff;
  padding:clamp(64px,8vw,112px) 0;border-block:1px solid rgba(255,255,255,.06)}
.ia-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 78% 50%,rgba(29,95,180,.38),transparent 70%),
    radial-gradient(40% 60% at 15% 110%,rgba(157,181,214,.14),transparent 70%)}
.ia-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 90% at 70% 50%,#000,transparent 80%);mask-image:radial-gradient(70% 90% at 70% 50%,#000,transparent 80%)}
.ia-scan{position:absolute;inset:0 auto 0 -20%;width:20%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:iaScan 9s ease-in-out infinite}
@keyframes iaScan{0%,100%{transform:translateX(0)}50%{transform:translateX(700%)}}

.ia-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.ia-copy .eyebrow{color:#9db5d6}
.ia-copy .ia-h{font:300 clamp(30px,3.6vw,52px)/1.08 var(--serif);letter-spacing:-.02em;margin:18px 0 18px;text-wrap:balance}
.ia-copy .ia-h em{font-style:italic;color:#cfe0f7}
.ia-copy .ia-h .ia-names{color:#fff;font-weight:400}
.ia-copy p.ia-p{font:400 clamp(15px,1.25vw,18px)/1.6 var(--sans);color:rgba(255,255,255,.72);max-width:48ch;margin:0 0 28px}
.ia-copy .btn.btn-gold{background:#fff;color:#0b1f3a;border-color:#fff}
@media (hover:hover){.ia-copy .btn.btn-gold:hover{background:#dbe7f6;border-color:#dbe7f6}}
.ia-copy .ia-note{display:block;margin-top:14px;font:400 12.5px/1.5 var(--mono);color:rgba(255,255,255,.45);letter-spacing:.02em}

/* ---- Orbital de logos ---- */
.ia-orbit{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;width:100%}
.ia-orbit svg.ia-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ia-ring .r1{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.ia-ring .r2{fill:none;stroke:rgba(157,181,214,.55);stroke-width:1.2;stroke-dasharray:6 14;stroke-linecap:round;
  transform-origin:50% 50%;animation:iaSpin 40s linear infinite}
.ia-ring .r3{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1;stroke-dasharray:2 10;transform-origin:50% 50%;animation:iaSpin 70s linear infinite reverse}
@keyframes iaSpin{to{transform:rotate(360deg)}}
.ia-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:34%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-align:center;padding:10%;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),rgba(255,255,255,.03) 70%);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 12px rgba(29,95,180,.08),0 30px 80px -30px rgba(29,95,180,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ia-core b{display:block;font:500 clamp(11px,1vw,13px)/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cfe0f7}
.ia-core span{display:block;margin-top:6px;font:300 clamp(13px,1.2vw,16px)/1.3 var(--serif);color:rgba(255,255,255,.75)}

.ia-node{position:absolute;width:23%;aspect-ratio:1;translate:-50% -50%;--tint:#fff;
  display:grid;place-items:center;border-radius:50%;text-decoration:none;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 50px -24px rgba(0,0,0,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s,background .5s}
.ia-node::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--tint) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s}
.ia-node svg{width:44%;height:44%;fill:currentColor;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));transition:transform .5s cubic-bezier(.2,.8,.2,1),color .5s}
.ia-node .ia-tag{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);
  opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;pointer-events:none}
.ia-node .ia-tag small{display:block;margin-top:6px;font:400 11px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.5)}
.ia-node:is(:hover,:focus-visible){transform:translateY(-6px) scale(1.06);border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 60px -20px color-mix(in srgb,var(--tint) 55%,transparent)}
.ia-node:is(:hover,:focus-visible)::before{opacity:1;animation:iaRot 2.4s linear infinite}
.ia-node:is(:hover,:focus-visible) svg{color:var(--tint);transform:scale(1.08) rotate(-6deg)}
.ia-node:is(:hover,:focus-visible) .ia-tag{opacity:1;transform:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes iaRot{to{--a:360deg}}

/* posiciones en la órbita (12 · 3 · 6 · 9) */
.ia-node.n1{left:50%;top:10%;--tint:#d97757}   /* Claude */
.ia-node.n2{left:90%;top:50%;--tint:#4ade80}   /* ChatGPT */
.ia-node.n3{left:50%;top:90%;--tint:#8ab4ff}   /* Gemini */
.ia-node.n4{left:10%;top:50%;--tint:#e2e8f0}   /* Grok */

/* flotación continua */
.ia-float{display:grid;place-items:center;width:100%;height:100%;animation:iaFloat 6s ease-in-out infinite}
.n1 .ia-float{animation-delay:0s}.n2 .ia-float{animation-delay:-1.5s}.n3 .ia-float{animation-delay:-3s}.n4 .ia-float{animation-delay:-4.5s}
@keyframes iaFloat{0%,100%{transform:translateY(-4%)}50%{transform:translateY(4%)}}

/* chispas que viajan por la órbita */
.ia-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px 3px rgba(157,181,214,.8);offset-path:circle(40% at 50% 50%);offset-distance:0%;animation:iaTravel 12s linear infinite}
.ia-spark.s2{animation-delay:-6s;opacity:.6;width:4px;height:4px;margin:-2px}
@keyframes iaTravel{to{offset-distance:100%}}

/* reveal al entrar en viewport */
.ia-band [data-ia-in]{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.ia-band .ia-node[data-ia-in]{transform:scale(.5);filter:blur(10px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s,box-shadow .5s,border-color .5s,background .5s}
.ia-band .ia-core[data-ia-in]{transform:scale(.8)}
.ia-band.is-in [data-ia-in]{opacity:1;transform:none;filter:none}
.ia-band.is-in .ia-node:is(:hover,:focus-visible){transform:translateY(-6px) scale(1.06)}

/* responsive */
@media (max-width:980px){
  .ia-grid{grid-template-columns:1fr;gap:44px}
  .ia-orbit{max-width:min(78vw,420px)}
  .ia-node{width:26%}
  .ia-node .ia-tag{display:none}
}
@media (max-width:520px){
  .ia-band{padding:56px 0 64px}
  .ia-copy .ia-h{font-size:clamp(26px,8vw,34px)}
  .ia-core b{font-size:9.5px}.ia-core span{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .ia-scan,.ia-ring .r2,.ia-ring .r3,.ia-float,.ia-spark{animation:none}
  .ia-band [data-ia-in]{opacity:1;transform:none;filter:none;transition:none}
}