/* ==========================================================================
   Spark Motion · capa de animación del sitio SparkTechs 2026
   Regla: la animación acompaña al contenido. Nada importante depende de ella:
   sin JS o con "reducir movimiento" todo se ve completo y estático.
   ========================================================================== */
:root{
  --m-ease: cubic-bezier(.2,.8,.2,1);
  --m-ease-out: cubic-bezier(.16,1,.3,1);
  --m-step: 70ms;
}

/* ---- 1. Títulos con /slash/: las diagonales se cierran sobre la palabra clave.
   La palabra nunca se oculta ni se desenfoca: se lee desde el primer momento. ---- */
@media (prefers-reduced-motion: no-preference){
  .m-ready .m-head .slash{position:relative; left:0; transition:left .9s var(--m-ease-out), opacity .9s var(--m-ease-out)}
  .m-ready .m-head:not(.m-in) .slash.m-s1{left:-.6em; opacity:0}
  .m-ready .m-head:not(.m-in) .slash.m-s2{left:.6em; opacity:0}
}

/* ---- 2. Entrada escalonada en orden de lectura ---- */
@keyframes m-rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes m-from-l{from{opacity:0; transform:translateX(-36px)} to{opacity:1; transform:none}}
@keyframes m-from-r{from{opacity:0; transform:translateX(36px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: no-preference){
  .m-ready .m-item:not(.m-done){animation:m-rise .7s var(--m-ease-out) both; animation-delay:calc(var(--i,0) * var(--m-step)); animation-play-state:paused}
  .m-ready .m-item.m-l:not(.m-done){animation-name:m-from-l}
  .m-ready .m-item.m-r:not(.m-done){animation-name:m-from-r}
  .m-ready .m-item.m-in:not(.m-done){animation-play-state:running}
}

/* ---- 3. Profundidad: figuras 3D siguen al puntero (desktop) ---- */
.float3d{translate:var(--m-px,0px) var(--m-py,0px); will-change:translate}

/* ---- 3b. Figuras 3D en WebGL (todo el sitio): un canvas fijo sustituye a las imágenes ---- */
.m-shapes{position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:15; pointer-events:none}
.float3d.m-3d{visibility:hidden}
.m-3d-global .float3d{translate:none}

/* ---- 3c. Botones CTA: brillo al pasar el mouse + flecha que avanza ---- */
.btn-primary, .navcta.primary{position:relative; overflow:hidden; isolation:isolate}
.btn-primary:not(:disabled)::before, .navcta.primary::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%)}
a.btn-primary::after, a.navcta.primary::after{content:"→"; display:inline-block; margin-left:.5em; transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: no-preference){
  .btn-primary:not(:disabled):hover::before, .btn-primary:focus-visible::before, .navcta.primary:hover::before, .navcta.primary:focus-visible::before{transform:translateX(120%); transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  a.btn-primary:hover::after, a.btn-primary:focus-visible::after, a.navcta.primary:hover::after{transform:translateX(5px)}
}

/* ---- 3c-bis. Botón secundario (See our work / Conoce nuestros proyectos) ---- */
.btn-ghost{position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, color .25s, background-color .25s}
.btn-ghost::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(103,82,234,.18) 50%, transparent 70%); transform:translateX(-120%)}
.btn-ghost:hover, .btn-ghost:focus-visible{transform:translateY(-2px); border-color:var(--action-primary, #1b00c7) !important; color:var(--action-primary, #1b00c7) !important;
  box-shadow:0 14px 30px -12px rgba(27,0,199,.45)}
.vivid .btn-ghost:hover, .vivid .btn-ghost:focus-visible, .sec-dark .btn-ghost:hover, body.dark .btn-ghost:hover{border-color:#fff !important; color:#fff !important; background:rgba(255,255,255,.22) !important; box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.vivid .btn-ghost::before, .sec-dark .btn-ghost::before, body.dark .btn-ghost::before{background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%)}
.btn-ghost:active{transform:translateY(0) scale(.97)}
@media (prefers-reduced-motion: no-preference){
  .btn-ghost:hover::before, .btn-ghost:focus-visible::before{transform:translateX(120%); transition:transform .7s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion: reduce){ .btn-ghost:hover, .btn-ghost:focus-visible{transform:none} }

/* ---- 3c-ter. Spotlight con el cursor en el bento de Servicios ---- */
.sb-card.m-spot::after,.art-cta.m-spot::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.10), transparent 60%)}
.sb-card.m-spot::before,.art-cta.m-spot::before,.sec-card.m-spot::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; opacity:0; transition:opacity .35s ease; padding:1px;
  background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%), rgba(156,143,242,.9), rgba(255,122,0,.5) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.sb-card.sb-photo.m-spot::after{background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.18), transparent 60%)}
.m-spot-on.m-spot-on > .m-spot.m-spot::before, .m-spot-on.m-spot-on > .m-spot.m-spot::after{opacity:.55}
.m-spot.m-spot:hover::before, .m-spot.m-spot:hover::after{opacity:1}
/* versión clara: tarjetas de "¿Por qué elegirnos?" */
.value-card.m-spot::before, .value-card.m-spot::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0; transition:opacity .35s ease}
.value-card.m-spot::after{background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(103,82,234,.16), rgba(255,122,0,.05) 45%, transparent 70%)}
.value-card.m-spot::before{padding:2px; background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%), rgba(27,0,199,.95), rgba(255,122,0,.75) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.value-card.m-spot .value-num{z-index:3}
.wc-card.m-spot::before, .wc-card.m-spot::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0; transition:opacity .35s ease}
.wc-card.m-spot::after{background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(103,82,234,.16), rgba(255,122,0,.05) 45%, transparent 70%)}
.wc-card.m-spot::before{padding:2px; background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%), rgba(27,0,199,.95), rgba(255,122,0,.75) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.wc-card.m-spot .wc-ic{z-index:3}
@media (prefers-reduced-motion: reduce), (hover: none){ .m-spot::before, .m-spot::after{display:none} }

/* ---- 3d. Ilustraciones dentro de cada caso de éxito (el listado queda estático) ---- */
@keyframes m-ill-in{from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0}}
@keyframes m-ill-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(var(--fa,4px))}}
@keyframes m-ill-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes m-ill-bar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes m-ill-march{to{stroke-dashoffset:var(--dash,-11px)}}
@keyframes m-ill-glow{0%,100%{opacity:.85; transform:scale(1)} 50%{opacity:1; transform:scale(1.08)}}
@media (prefers-reduced-motion: no-preference){
  .m-ill .m-ill-seg{opacity:0}
  .m-ill.m-ill-play .m-ill-seg{animation:m-ill-in .8s cubic-bezier(.16,1,.3,1) both, m-ill-float var(--fd,6s) ease-in-out infinite;
    animation-delay:calc(var(--i,0) * 140ms), calc(var(--i,0) * 140ms + .8s)}
  .m-ill .m-ill-draw{stroke-dasharray:1 1; stroke-dashoffset:1}
  .m-ill.m-ill-play .m-ill-draw{animation:m-ill-draw 1.4s cubic-bezier(.65,0,.35,1) both; animation-delay:calc(var(--i,0) * 140ms + .45s)}
  .m-ill .m-ill-bar{transform-box:fill-box; transform-origin:left center; transform:scaleX(0)}
  .m-ill.m-ill-play .m-ill-bar{animation:m-ill-bar 1s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0) * 140ms + .5s)}
  .m-ill.m-ill-play .m-ill-march{animation:m-ill-march 1.4s linear infinite}
  .m-ill .m-ill-glow{transform-box:fill-box; transform-origin:center; animation:m-ill-glow 7s ease-in-out infinite}
}

/* ---- 4. Insignias con inclinación 3D (certificaciones) ---- */
.m-tilt{transform:perspective(700px) rotateX(var(--m-rx,0deg)) rotateY(var(--m-ry,0deg)) scale(var(--m-s,1)); transition:transform .25s var(--m-ease); transform-style:preserve-3d; will-change:transform}
.m-tilt.m-tilting{transition:transform .08s linear}

/* ---- 5. Proceso (Nosotros): la línea avanza con el scroll ---- */
.process-row.m-proc::before{display:none}
.process-row .m-path{position:absolute; left:0; top:0; z-index:0; overflow:visible; pointer-events:none}
.process-row .m-path-base{stroke:var(--border-default, #d9dbe6)}
.process-row .m-path-dot{fill:var(--action-accent, #ff7a00); stroke:#fff; stroke-width:3}
.process-row .m-path-halo{fill:none; stroke:var(--action-accent, #ff7a00); stroke-width:2; opacity:.45; transform-box:fill-box; transform-origin:center; animation:m-halo 1.8s ease-out infinite}
.process-row .m-path.m-path-end .m-path-dot, .process-row .m-path.m-path-end .m-path-halo{opacity:0; transition:opacity .4s}
@keyframes m-halo{from{transform:scale(.6); opacity:.6} to{transform:scale(1.8); opacity:0}}
@media (max-width:900px){ .process-row.m-proc::before{display:none} }
.process-row.m-proc .ps-num{position:relative; z-index:1; transition:background .35s var(--m-ease), color .35s, transform .45s var(--m-ease-out), box-shadow .45s}
.process-row.m-proc .process-step:not(.m-on) .ps-num{background:var(--surface-muted, #eef0f6); color:var(--text-secondary); box-shadow:0 0 0 1px var(--border-default) inset}
.process-row.m-proc .process-step.m-now .ps-num{transform:scale(1.14); box-shadow:0 0 0 6px color-mix(in oklab, var(--action-primary) 18%, transparent)}

/* ---- 6. Fondo vivo (shader) en los CTA finales ---- */
.vivid{isolation:isolate; position:relative}
.vivid > .m-shader{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.2s var(--m-ease)}
.vivid > .m-shader.m-live{opacity:1}
/* Cierre continuo: el CTA final se funde con el footer (mismo navy de --surface-navy), sin corte. */
.vivid{padding-bottom:calc(var(--space-24, 96px) + 56px) !important}
.vivid::after{content:""; position:absolute; left:0; right:0; bottom:0; height:min(200px, 45%); z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(11,17,48,0) 0%, rgba(11,17,48,.55) 45%, var(--surface-navy, #0b1130) 100%)}

/* ---- 7. Globo (Nosotros → historia): dos ciudades, una zona horaria ---- */
.m-globe{position:relative; width:100%; height:520px; border-radius:20px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, var(--sky-50, #f5f4fe) 0%, var(--surface-page, #fff) 70%); border:1px solid var(--border-subtle, #e8e6f3)}
.m-globe canvas{position:absolute; inset:0; width:100%; height:100%; display:block; transition:opacity .8s var(--m-ease)}
.m-globe:not(.m-live) canvas{opacity:0}
.m-globe-tags{position:absolute; left:0; right:0; bottom:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:0 16px; pointer-events:none}
.m-globe-tags > span{font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; background:color-mix(in oklab, var(--surface-page, #fff) 90%, transparent); border:1px solid var(--border-subtle); color:var(--text-primary); backdrop-filter:blur(6px)}
.m-globe-tags > span.m-tz{background:var(--action-primary); border-color:var(--action-primary); color:#fff}
body.dark .m-globe{background:radial-gradient(circle at 50% 42%, var(--navy-800, #141c47) 0%, var(--surface-dark, #111) 75%); border-color:rgba(255,255,255,.1)}
@media (max-width:900px){ .m-globe{height:420px} }

/* ---- 8. Ruta Fast Discovery (Agenda una reunión) ---- */
.m-route{margin-top:var(--space-6, 24px); padding-top:var(--space-5, 20px); border-top:1px solid rgba(255,255,255,.14)}
.m-route-cap{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-dark-secondary); margin-bottom:8px}
.m-route svg{width:100%; height:auto; display:block; overflow:visible}

/* ---- 9. Cambios de estado: pasos, modales, carrusel ---- */
@keyframes m-swap{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes m-fade{from{opacity:0} to{opacity:1}}
@keyframes m-pop{from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: no-preference){
  .m-swap{animation:m-swap .45s var(--m-ease-out) both}
  .modal-overlay{animation:m-fade .25s ease both}
  .modal-card{animation:m-pop .4s var(--m-ease-out) both}
  .booker-main .cal-body, .booker-main form.form-grid, .booker-main .confirm{animation:m-swap .45s var(--m-ease-out) both}
  .time-btn{transition:transform .2s var(--m-ease), background .2s, color .2s, border-color .2s}
  .time-btn:active{transform:scale(.96)}
  .cal-day.selected{animation:m-pop .3s var(--m-ease-out) both}
}

/* Confirmación con Lottie */
.check.m-lottie-on{background:none !important; box-shadow:none !important; border:0 !important; width:132px !important; height:132px !important; font-size:0 !important; margin-left:auto; margin-right:auto}
.check.m-lottie-on svg{width:100% !important; height:100% !important}

/* ---- 10. FAQ: apertura suave (navegadores compatibles) ---- */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  @media (prefers-reduced-motion: no-preference){
    details.faq-item::details-content{height:0; overflow:clip; transition:height .35s var(--m-ease), content-visibility .35s allow-discrete}
    details.faq-item[open]::details-content{height:auto}
  }
}

/* ---- 11. Movimiento reducido: también apaga loops existentes del sitio ---- */
@media (prefers-reduced-motion: reduce){
  .ai-grad{animation:none !important}
  .eyebrow .dot{animation:none !important}
  .m-item{animation:none !important; opacity:1 !important; transform:none !important}
  .float3d{translate:none}
  .vivid > .m-shader{display:none}
}

/* ------------------------------------------------------------------ */
/* 12. Hero (Inicio): arco de pantallas                                 */
/*     La JS coloca las tarjetas; la central (.hc-live) se activa.      */
/* ------------------------------------------------------------------ */
.hero-screens > .hs-ring{position:relative;height:calc(clamp(104px,min(13vh,10vw),140px) * 1.48 + 70px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.hero-screens:has(> .hs-ring){-webkit-mask-image:none;mask-image:none}
.hc{position:absolute;left:0;bottom:-14px;width:clamp(104px,min(13vh,10vw),140px);aspect-ratio:1/1.48;border-radius:18px;background:linear-gradient(160deg,var(--sky-100,#ebe8fd),#fff 70%);box-shadow:0 16px 28px -12px rgba(20,28,71,.32),inset 0 1px 0 rgba(255,255,255,.7);display:flex;flex-direction:column;overflow:hidden;transform-origin:50% 120%;will-change:transform,opacity;transition:box-shadow .4s var(--m-ease)}
.hc.hc-live{box-shadow:0 22px 40px -14px rgba(27,0,199,.45),0 0 0 2px rgba(103,82,234,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.hc-bar{display:flex;align-items:center;gap:5px;padding:10px 11px 6px}
.hc-bar i{width:7px;height:7px;border-radius:50%;background:var(--sky-300,#9c8ff2)}
.hc-bar i:nth-child(2){background:var(--action-accent,#ff7a00)} .hc-bar i:nth-child(3){background:var(--sky-500,#3a1fe0)}
.hc-bar em{margin-left:auto;font-style:normal;font-size:9px;font-weight:700;color:var(--sky-400,#6752ea);opacity:.8;white-space:nowrap;font-family:var(--font-body)}
.hc-b{flex:1;padding:8px 12px 12px;display:flex;flex-direction:column;gap:7px;position:relative}
/* código que se escribe */
.hc-ed i{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,var(--action-accent,#ff7a00),var(--sky-400,#6752ea));transform-origin:left;width:var(--w)}
.hc-ed i.k{background:linear-gradient(90deg,var(--sky-500,#3a1fe0),var(--sky-300,#9c8ff2))}
.hc-ed i:nth-child(odd){margin-left:10px}
.hc-ed .caret{position:absolute;width:2px;height:10px;background:var(--action-primary,#1b00c7);left:12px;bottom:14px;opacity:0}
.hc-live .hc-ed i{animation:hcType .5s steps(6) both;animation-delay:calc(var(--n)*.28s)}
.hc-live .hc-ed .caret{opacity:1;animation:hcBlink 1s steps(1) infinite}
/* KPIs */
.hc-ds .kpi{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--text-primary,#0b0b12);letter-spacing:-.02em;line-height:1}
.hc-ds .kpi small{font-size:9px;font-weight:700;color:var(--feedback-success,#1e9e6b);margin-left:3px}
.hc-ds .bars{flex:1;display:flex;align-items:flex-end;gap:6px}
.hc-ds b{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--sky-400,#6752ea),var(--sky-600,#1b00c7));transform-origin:bottom}
.hc-ds b.o{background:linear-gradient(180deg,var(--action-accent,#ff7a00),var(--orange-600,#e66d00))}
.hc-live .hc-ds b{animation:hcGrow .7s var(--m-ease) both;animation-delay:calc(var(--n)*.12s)}
.hc-live .hc-ds .kpi small{animation:hcPop .4s var(--m-ease) .7s both}
/* sprint */
.hc-b.hc-kb{flex-direction:row;gap:5px}
.hc-kb > div{flex:1;display:flex;flex-direction:column;gap:5px;padding-top:2px;border-radius:6px;background:rgba(103,82,234,.07)}
.hc-kb s{display:block;height:15px;border-radius:5px;background:var(--sky-300,#9c8ff2);margin:0 3px}
/* tarjeta naranja: se mueve columna por columna (Por hacer → En curso → Hecho).
   Geometría: .hc-b tiene 12px de padding lateral, 3 columnas con 5px de separación y tarjetas con 3px de margen. */
.hc-kb .mv{position:absolute;left:15px;top:50px;width:calc((100% - 34px) / 3 - 6px);height:15px;border-radius:5px;background:var(--action-accent,#ff7a00);box-shadow:0 4px 8px -2px rgba(255,122,0,.6)}
.hc-live .hc-kb .mv{animation:hcHop 2.4s var(--m-ease) .2s both}
/* deploy */
.hc-b.hc-tm{background:#0e1236;margin:0 8px 8px;border-radius:10px;padding:10px;gap:6px}
.hc-tm p{margin:0;height:5px;border-radius:3px;background:rgba(156,143,242,.6);width:var(--w)}
.hc-tm .pg{height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.hc-tm .pg u{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--sky-300,#9c8ff2),var(--action-accent,#ff7a00));transform-origin:left;transform:scaleX(.35)}
.hc-tm .ok{display:flex;align-items:center;gap:5px;font:700 9px var(--font-body);color:#2fd08a;opacity:0}
.hc-tm .cur{width:6px;height:9px;background:#fff;opacity:.8}
.hc-live .hc-tm .pg u{animation:hcProg 1.3s var(--m-ease) both}
.hc-live .hc-tm .ok{animation:hcPop .35s var(--m-ease) 1.35s both}
.hc-live .hc-tm .cur{animation:hcBlink 1s steps(1) infinite}
/* app */
.hc-b.hc-mb{align-items:center;justify-content:center}
/* proporción de teléfono real (~10:17) en vez de una tira delgada */
.hc-mb .ph{position:relative;height:100%;width:auto;aspect-ratio:10/17;max-width:78%;border-radius:16px;background:#0e1236;padding:5px;overflow:hidden}
.hc-mb .ph::before{content:"";position:absolute;top:7px;left:50%;width:26%;height:4px;margin-left:-13%;border-radius:4px;background:rgba(255,255,255,.35);z-index:1}
.hc-mb .sl{display:flex;width:200%;height:100%}
.hc-mb .sc{width:50%;height:100%;border-radius:12px;background:linear-gradient(160deg,var(--sky-300,#9c8ff2),var(--sky-500,#3a1fe0));display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:6px}
.hc-mb .sc + .sc{background:linear-gradient(160deg,#ffb36b,var(--action-accent,#ff7a00));margin-left:4px}
.hc-mb .sc i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.75)}
.hc-mb .sc i:last-child{width:60%}
.hc-live .hc-mb .sl{animation:hcSwipe 2.6s var(--m-ease) .3s both}
@keyframes hcType{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hcBlink{50%{opacity:0}}
@keyframes hcGrow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes hcPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes hcHop{0%,12%{left:15px;top:50px}24%{top:38px}36%,52%{left:calc(15px + (100% - 34px) / 3 + 5px);top:70px}64%{top:22px}76%,100%{left:calc(15px + 2 * ((100% - 34px) / 3 + 5px));top:30px}}
@keyframes hcProg{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
@keyframes hcSwipe{0%,30%{transform:translateX(0)}55%,100%{transform:translateX(calc(-50% - 2px))}}
body.dark .hc{background:linear-gradient(160deg,#1d2457,#121840 70%);box-shadow:0 16px 28px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
body.dark .hc-ds .kpi{color:#fff}
@media (prefers-reduced-motion:reduce){.hc *{animation:none !important}}
.hs-ring-in{position:absolute;inset:0}


/* ------------------------------------------------------------------ */
/* 14. Palabra que rota en el hero                                      */
/* ------------------------------------------------------------------ */
/* el padding inferior deja espacio a los descendentes (g, p, j) del texto con degradado; el margen negativo lo compensa en el layout */
.m-rot{display:inline-block;white-space:nowrap;vertical-align:baseline;padding:.04em .02em .2em;margin:-.04em -.02em -.2em;min-width:.1em}
.m-cur{display:inline-block;width:.06em;height:.9em;margin-left:.04em;vertical-align:-.08em;border-radius:2px;background:var(--action-accent,#ff7a00);animation:mCur 1s steps(1) infinite}
.m-cur.typing{animation:none}
@keyframes mCur{50%{opacity:0}}
.m-rot.m-rot-out{opacity:0;transform:translateY(-.35em);filter:blur(4px)}
.m-rot.m-rot-in{opacity:0;transform:translateY(.35em);filter:blur(4px);transition:none}
.m-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.m-cur{animation:none}}

/* ------------------------------------------------------------------ */
/* 15. Marquee de clientes (Inicio): tamaño óptico, color al señalar,  */
/*     ritmo con el scroll. La JS mueve la fila (.m-mq).               */
/* ------------------------------------------------------------------ */
.marquee-sec.m-mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.m-mq .marquee-track{animation:none !important;will-change:transform;align-items:center}
.m-mq .marquee-group{gap:72px}
.m-mq .marquee-track{gap:72px}
.marquee-sec .marquee-track img.marquee-logo{height:var(--h,40px);width:auto;filter:grayscale(1);opacity:var(--o,.62);transition:filter .35s var(--m-ease),opacity .35s var(--m-ease),transform .35s var(--m-ease)}
.marquee-sec .marquee-track img.m-mul{mix-blend-mode:multiply}
body.dark .marquee-sec .marquee-track img.m-mul{mix-blend-mode:normal}
.m-mq .marquee-track.m-hovering img.marquee-logo{opacity:.3}
.m-mq .marquee-track img.marquee-logo.m-on{filter:none;opacity:1;transform:scale(1.08)}
/* movimiento reducido: cuadrícula quieta y centrada */
.marquee-sec.m-mq-static{-webkit-mask-image:none;mask-image:none}
.m-mq-static .marquee-track{flex-wrap:wrap;justify-content:center;width:auto !important;transform:none !important;padding:0 24px}
.m-mq-static .marquee-group{flex-wrap:wrap;justify-content:center;gap:28px 56px}
.m-mq-static .marquee-group[aria-hidden="true"]{display:none}
@media (max-width:640px){.m-mq .marquee-group,.m-mq .marquee-track{gap:44px}}
/* más aire entre la etiqueta y la fila de logos */
.marquee-sec .marquee-label{margin-bottom:clamp(48px,5vw,72px)}

/* CTA naranja: el texto se queda blanco en hover/foco (el a:hover global de cada página lo pintaba azul) */
a.btn-primary:hover,a.btn-primary:focus-visible,a.btn-primary:active,a.navcta.primary:hover{color:#fff!important}
/* Insignias: el runtime de Inicio re-renderiza el atributo class y borra .m-tilt; se apunta al contenedor para que la inclinación no dependa de esa clase. */
.cert-logos img,.cert-grid img{transform:perspective(700px) rotateX(var(--m-rx,0deg)) rotateY(var(--m-ry,0deg)) scale(var(--m-s,1)); transition:transform .2s var(--m-ease, ease); transform-style:preserve-3d; will-change:transform}
.m-ready .cert-logos img.m-item:not(.m-done),.m-ready .cert-grid img.m-item:not(.m-done){transition:none}
/* Globo (Nosotros): ficha de datos en lugar de pastillas, para que no parezcan opciones seleccionables */
.m-globe-data{position:absolute; left:50%; transform:translateX(-50%); width:min(280px, calc(100% - 24px)); bottom:12px; margin:0; padding:2px 12px; border-radius:10px; background:color-mix(in oklab, var(--surface-page, #fff) 84%, transparent); border:1px solid var(--border-subtle); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:none}
.m-globe-data .gd-item{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:5px 0}
.m-globe-data .gd-item + .gd-item{border-top:1px solid var(--border-subtle)}
.m-globe-data dt{font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary, #7a7f99); margin:0; white-space:nowrap}
.m-globe-data dd{margin:0; font-size:11.5px; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:7px; text-align:right}
.m-globe-data .gd-dot{flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--action-accent, #ff7a00); box-shadow:0 0 0 2px color-mix(in oklab, var(--action-accent, #ff7a00) 25%, transparent)}
body.dark .m-globe-data{background:rgba(11,17,48,.6); border-color:rgba(255,255,255,.12)}