/* KALKORA Labs v6 · capa de efectos (2026-10-04). Código propio, sin librerías.
   Todo el movimiento se apaga con prefers-reduced-motion. */

/* ---------- 1. campo de partículas en bandas oscuras ---------- */
.fx-field{position:relative;isolation:isolate}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--out)}
.fx-canvas.on{opacity:1}

/* ---------- 2. órbita: cada frente en su propia órbita, con un núcleo vivo ---------- */
.fronts{padding:var(--s6) 0;overflow:hidden}
.fronts .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.fronts .kick,.products .kick{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.fronts .h2{margin-top:var(--s2);color:var(--white);font-size:clamp(36px,4.4vw,60px);line-height:1;letter-spacing:-.035em}
.fronts .h2 .accent{color:var(--green)}
.fronts .lede{margin-top:var(--s3);color:var(--mist);max-width:44ch}
.front-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3);margin-top:var(--s4)}
.front-list li{padding:14px 0;border-top:1px solid var(--line-dark);font-size:15px;color:var(--mist);transition:color .3s;cursor:default}
.front-list strong{display:flex;align-items:center;gap:10px;font:500 12.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--white);margin-bottom:4px}
.front-list strong::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.front-list li.hot{color:var(--white)}
.front-list li.hot strong::before{animation:ping-dot 1.2s var(--out) infinite}
@keyframes ping-dot{0%{box-shadow:0 0 0 0 rgba(43,196,138,.6)}100%{box-shadow:0 0 0 7px rgba(43,196,138,0)}}

.orbit{position:relative;width:min(100%,580px);aspect-ratio:1;margin:0 auto}
.orbit .paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit .paths ellipse{fill:none;stroke:rgba(201,210,218,.13);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:stroke .4s}
.orbit .paths ellipse.hot{stroke:rgba(43,196,138,.55)}
.orbit .vortex{position:absolute;left:50%;top:50%;width:58%;height:58%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.orbit .core{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:5;border-radius:50%;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;background:radial-gradient(circle,#13222F 0,#0B151D 70%);box-shadow:0 0 0 1px rgba(43,196,138,.55),0 0 42px -4px rgba(43,196,138,.55),inset 0 0 22px rgba(43,196,138,.18)}
.orbit .core::after{content:"";position:absolute;inset:-9%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(43,196,138,.85) 74%,transparent 80%);-webkit-mask:radial-gradient(circle,transparent 66%,#000 67%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 66%,#000 67%,#000 70%,transparent 71%)}
.orbit .core b{font-size:clamp(24px,5.4vw,40px);line-height:1;font-weight:600;color:var(--white);letter-spacing:-.03em}
.orbit .core b span{color:var(--green)}
.orbit .core small{font:500 clamp(8px,1.4vw,10.5px)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.orbit .sat{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity}
.orbit .sat .o{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7FF0C3,var(--green) 55%,#0F7A55);box-shadow:0 0 14px 2px rgba(43,196,138,.55)}
.orbit .sat .l{position:absolute;left:50%;top:13px;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border-radius:999px;background:rgba(11,21,29,.86);border:1px solid rgba(201,210,218,.18);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#DDE5EB;transition:border-color .3s,color .3s,box-shadow .3s}
.orbit .sat.hot .o{box-shadow:0 0 0 5px rgba(43,196,138,.18),0 0 22px 5px rgba(43,196,138,.75)}
.orbit .sat.hot .l{border-color:var(--green);color:var(--white);box-shadow:0 0 18px -4px rgba(43,196,138,.7)}
@media (prefers-reduced-motion:no-preference){
  .orbit .core::after{animation:orbit 6s linear infinite}
}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (max-width:920px){.fronts .grid{grid-template-columns:1fr}.orbit{width:min(100%,480px)}}
@media (max-width:520px){.front-list{grid-template-columns:1fr}.orbit .sat .l{font-size:9.5px;padding:4px 7px;top:11px}}

/* ---------- 2b. productos ---------- */
.products{padding:var(--s6) 0;background:var(--paper)}
.products .head{max-width:820px}
.products .h2{margin-top:var(--s2);font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.035em}
.products .h2 .accent{display:block;color:var(--green-deep)}
.products .kick{color:var(--green-deep)}
.products .lede{margin-top:var(--s3);max-width:58ch}
.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s5)}
.prod{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--white);transition:transform .35s var(--out),box-shadow .35s var(--out),border-color .35s}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#BFD8CC}
.prod-top{display:flex;justify-content:space-between;align-items:center;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)}
.prod-top .st{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep)}
.prod-top .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(43,196,138,.5)}
.prod .ico{width:44px;height:44px;margin:var(--s3) 0 var(--s2);padding:9px;border-radius:12px;background:var(--ink);fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--out)}
.prod:hover .ico{transform:rotate(-6deg) scale(1.06)}
.prod h3{font-size:clamp(21px,1.9vw,25px);line-height:1.15}
.prod .tagl{margin-top:8px;color:var(--slate);font-size:16px}
.prod ul{display:grid;gap:8px;margin:var(--s3) 0;padding-top:var(--s2);border-top:1px solid var(--line)}
.prod li{display:flex;gap:10px;font-size:15px;color:var(--ink)}
.prod li svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--green-deep)}
.prod .for{margin-top:auto;font-size:14px;color:var(--slate-2)}
.prod .for span{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:2px}
.prod-cta{margin-top:var(--s3);align-self:flex-start;font-weight:600;font-size:15.5px;color:var(--green-deep);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:color .2s}
.prod-cta:hover{color:var(--ink)}
.prod-cta span{display:inline-block;margin-left:6px;transition:transform .3s var(--out)}
.prod-cta:hover span{transform:translateX(4px)}
.prod-note{margin-top:var(--s4);max-width:80ch;font-size:14px;color:var(--slate-2)}
@media (prefers-reduced-motion:no-preference){
  .prod-top .st::before{animation:st-ping 2.6s var(--out) infinite}
}
@keyframes st-ping{70%,100%{box-shadow:0 0 0 7px rgba(43,196,138,0)}}
@media (max-width:1000px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.prod-grid{grid-template-columns:1fr}}

/* ---------- 3. titular fantasma (postura) ---------- */
.stance{position:relative;overflow:hidden}
.stance .ghost{position:absolute;left:0;top:clamp(8px,2vw,24px);font-size:clamp(96px,17vw,260px);line-height:.8;font-weight:600;letter-spacing:-.05em;color:rgba(14,26,36,.045);white-space:nowrap;pointer-events:none;user-select:none;transform:translate3d(var(--gx,0),0,0);will-change:transform}
.stance .wrap{position:relative}

/* ---------- 4. fichas con luz que sigue al cursor ---------- */
#main .fx-glow{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(43,196,138,.11),transparent 55%);background-repeat:no-repeat}
#main .fx-glow{background-repeat:no-repeat;background-size:0 0}
#main .fx-glow:hover{background-size:100% 100%}
#main .plan.pick.fx-glow{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(43,196,138,.22),transparent 55%)}
.fx-glow .fx-trace{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);transform:scaleX(0);transform-origin:left;pointer-events:none;border-radius:2px}
.plan,.svc article{position:relative}
@media (prefers-reduced-motion:no-preference){
  .fx-glow.in .fx-trace{animation:trace 1.4s var(--out) .35s 1 both}
}
@keyframes trace{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---------- 5. método: línea que se llena con el scroll ---------- */
.method .steps li::before{content:"";position:absolute;left:27px;top:64px;bottom:8px;width:1px;background:var(--green);transform:scaleY(var(--fill,0));transform-origin:top;z-index:1;box-shadow:0 0 8px rgba(43,196,138,.7)}
.method .steps li:last-child::before{display:none}
@media (prefers-reduced-motion:no-preference){
  .js-steps .method .steps li.on .k{animation:k-ping 1.6s var(--out) 1}
}
@keyframes k-ping{0%{box-shadow:0 0 0 0 rgba(43,196,138,.6)}100%{box-shadow:0 0 0 18px rgba(43,196,138,0)}}

/* ---------- 6. encabezado: línea de escaneo al empezar a bajar ---------- */
.top{position:sticky;overflow-x:clip}
.top::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:28%;background:linear-gradient(90deg,transparent,var(--green-deep),transparent);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .top.scrolled::after{animation:scan 1.8s var(--out) 1}
}
@keyframes scan{0%{transform:translateX(-30%);opacity:0}15%{opacity:1}100%{transform:translateX(380%);opacity:0}}

/* ---------- 7. pie: trazo que se dibuja al llegar ---------- */
.foot{position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);transform:scaleX(0);transition:transform 1.6s var(--out)}
.foot.in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.foot::before{transform:scaleX(1)}}

/* nav con un ítem más (Productos): sin cortes de línea */
@media (min-width:1101px){nav ul{gap:clamp(14px,1.3vw,22px)}nav a{white-space:nowrap}}
@media (min-width:921px) and (max-width:1100px){nav ul{gap:14px}nav a{white-space:nowrap;font-size:14.5px}}
/* el logo no se achica cuando la barra se llena */
.top .brand{flex:none}.top .brand img{flex:none;max-width:none}
/* barra de escritorio: se ocultan ítems secundarios según el ancho (siguen en el menú móvil y en la página) */
@media (min-width:921px){nav li:nth-child(6){display:none}}
@media (min-width:921px) and (max-width:1180px){nav li:nth-child(1){display:none}}
@media (min-width:921px) and (max-width:1060px){nav li:nth-child(7){display:none}}

/* 4 núcleos: grilla de 2 columnas */
@media (min-width:1001px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- producto destacado: Núcleo Agentes ---------- */
.prod.feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,56px);align-items:center;background-color:var(--ink);border-color:var(--ink);color:var(--white);padding:clamp(28px,3.4vw,48px)}
.prod.feat:hover{border-color:var(--ink)}
.prod.feat .prod-top{color:var(--mist)}
.prod.feat .prod-top .st{color:var(--green)}
.prod.feat h3{color:var(--white);font-size:clamp(24px,2.2vw,30px)}
.feat-slogan{margin-top:10px;font-size:clamp(26px,2.9vw,40px);line-height:1.05;font-weight:600;letter-spacing:-.03em;color:var(--white)}
.feat-slogan span{display:block;color:var(--green)}
.prod.feat .tagl{color:var(--mist);margin-top:14px;font-size:17px}
.prod.feat ul{border-top-color:var(--line-dark)}
.prod.feat li{color:#E3E9EE}
.prod.feat li svg{color:var(--green)}
.prod.feat .for,.prod.feat .for span{color:var(--mist)}
.feat-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:var(--s3)}
.prod.feat .prod-cta{margin-top:0;color:var(--green)}
.prod.feat .prod-cta:hover{color:var(--white)}
#main .prod.feat.fx-glow{background-image:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(43,196,138,.16),transparent 55%)}
.feat-viz svg{width:100%;max-width:380px;display:block;margin:0 auto;overflow:visible}
.feat-viz .fl{stroke:rgba(43,196,138,.55);stroke-width:1.6;stroke-dasharray:4 7}
.feat-viz .fc{fill:#0B151D;stroke:rgba(43,196,138,.7);stroke-width:1.5}
.feat-viz .fc-ring{fill:none;stroke:rgba(43,196,138,.35);stroke-width:1}
.feat-viz .fk{font:600 30px var(--sans);fill:var(--white);text-anchor:middle}
.feat-viz .fk tspan{fill:var(--green)}
.feat-viz .fn circle{fill:#16283A;stroke:rgba(201,210,218,.4);stroke-width:1.5}
.feat-viz .fn text{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--mist);text-anchor:middle}
@media (prefers-reduced-motion:no-preference){
  .feat-viz .fl{animation:dash-out 1.6s linear infinite}
  .feat-viz .fn:nth-child(odd) circle{animation:fn-on 4.8s ease-in-out infinite}
  .feat-viz .fn:nth-child(even) circle{animation:fn-on 4.8s ease-in-out 2.4s infinite}
  .feat-viz .fc-ring{animation:fc-ring 2.4s var(--out) infinite;transform-origin:150px 150px}
}
@keyframes dash-out{to{stroke-dashoffset:-22}}
@keyframes fn-on{0%,100%{stroke:rgba(201,210,218,.4);fill:#16283A}45%,55%{stroke:var(--green);fill:#173041}}
@keyframes fc-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (max-width:860px){.prod.feat{grid-template-columns:1fr}.feat-viz{order:-1}.feat-viz svg{max-width:300px}}

.kit-band .kit-cta{margin-top:24px}

.prod.feat .btn-main{background:var(--green);border-color:var(--green);color:var(--ink)}
.prod.feat .btn-main:hover{background:#45D19C;border-color:#45D19C}

/* celular: el botón de menú conserva su tamaño táctil (44 px) */
.top .burger{flex:none;min-width:44px;min-height:44px}
@media (max-width:520px){.top .brand img{width:124px;height:auto}.top .btn-hdr{padding-left:14px;padding-right:14px}}
/* v9 · auditoría 5/10: áreas táctiles mínimas de 24 px (WCAG 2.5.8) */
.foot .wrap>a,.foot .linkish{display:inline-flex;align-items:center;min-height:24px}
.top .brand{display:inline-flex;align-items:center;min-height:44px}
.alt a,.note a,.contact a[href^="mailto:"]{display:inline-block;padding-block:3px}