:root {
  --scroll: 0%;
  --pointer-x: 70vw;
  --pointer-y: 20vh;
}

body { overflow-x: clip; }
main section[id] { scroll-margin-top: 92px; }

.scroll-progress {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: var(--scroll);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  box-shadow: 0 0 16px var(--green);
}

.cursor-glow {
  position: fixed;
  z-index: -1;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.12), transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left .14s linear, top .14s linear, opacity .3s ease;
  pointer-events: none;
}

body.hero-active .cursor-glow { opacity: 1; }

.site-header {
  position: sticky;
  top: 0;
  max-width: none;
  padding-left: max(32px, calc((100vw - 1176px) / 2));
  padding-right: max(32px, calc((100vw - 1176px) / 2));
  background: rgba(11,13,16,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.client-link { color: var(--paper); text-decoration: none; font: 500 10px 'DM Mono', monospace; letter-spacing: .3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 100px; transition: .25s ease; }
.client-link:hover { border-color: var(--green); background: rgba(139,255,176,.06); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: var(--green); box-shadow: 0 0 0 4px rgba(139,255,176,.1); animation: statusPulse 2s ease-in-out infinite; }
.mobile-only-link { display: none; }

.hero-copy { animation: heroIn .85s cubic-bezier(.2,.75,.25,1) both; }
.agent-orbit { animation: orbitIn 1s .18s cubic-bezier(.2,.75,.25,1) both; }
.pulse { animation: statusPulse 2s ease-in-out infinite; }
.node { transform: translate(var(--shift-x, 0), var(--shift-y, 0)); transition: transform .2s ease-out, border-color .25s ease, box-shadow .25s ease; }
.node:hover { border-color: var(--green); box-shadow: 0 14px 45px rgba(0,0,0,.55), 0 0 25px rgba(139,255,176,.08); }
.node-agent i { animation: sparkle 2.6s ease-in-out infinite; }

.orbit-one { animation: orbitSpinOne 18s linear infinite; }
.orbit-two { animation: orbitSpinTwo 28s linear infinite reverse; }
.orbit-three { animation: orbitSpinThree 42s linear infinite; }
.orbit::before { content: ''; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.orbit-two::before { background: var(--blue); box-shadow: 0 0 14px var(--blue); }

.flow { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); opacity: 0; }
.flow-a { animation: flowA 4.5s ease-in-out infinite; }
.flow-b { animation: flowB 5.2s 1.2s ease-in-out infinite; }
.flow-c { animation: flowC 4.8s 2.1s ease-in-out infinite; }
.hero .orbit,.hero .flow,.hero .pulse,.hero .node-agent i { animation-play-state: paused; }
.hero.is-inview .orbit,.hero.is-inview .flow,.hero.is-inview .pulse,.hero.is-inview .node-agent i { animation-play-state: running; }

.signal-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.signal-strip > div { display: flex; width: max-content; min-width: 100%; align-items: center; justify-content: center; gap: 28px; padding: 15px 32px; font: 500 9px 'DM Mono', monospace; letter-spacing: 1.5px; white-space: nowrap; }
.signal-strip i { color: var(--green); font-style: normal; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero.reveal { opacity: 1; transform: none; }

.service-grid { perspective: 900px; }
.service-card { transform: translateY(0) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)); transform-style: preserve-3d; will-change: transform; }
.service-card:hover { transform: translateY(-7px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)); }
.service-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.service-card:hover::after { opacity: 1; }
.button { position: relative; overflow: hidden; }
.button::before { content: ''; position: absolute; top: -50%; left: -70%; width: 35%; height: 200%; background: rgba(255,255,255,.35); transform: rotate(18deg); transition: left .55s ease; }
.button:hover::before { left: 130%; }

.workflow-showcase.is-visible .channel-whatsapp { animation: workflowCardIn .55s .12s cubic-bezier(.2,.75,.25,1) backwards; }
.workflow-showcase.is-visible .channel-email { animation: workflowCardIn .55s .24s cubic-bezier(.2,.75,.25,1) backwards; }
.workflow-showcase.is-visible .private-core { animation: workflowCoreIn .72s .32s cubic-bezier(.2,.75,.25,1) backwards; }
.workflow-showcase.is-visible .decision-card { animation: workflowCardIn .6s .48s cubic-bezier(.2,.75,.25,1) backwards; }
.workflow-showcase.is-inview .data-path span { animation: workflowPulseX 2.5s .7s ease-in-out infinite; }
.workflow-showcase.is-inview .data-path-out span { animation-delay: 1.2s; }
.workflow-showcase.is-inview .private-core::after { animation: coreScan 4.6s 1s ease-in-out infinite; }
.workflow-showcase.is-inview .core-top i b { animation: statusPulse 2s ease-in-out infinite; }
.decision-approve { position: relative; overflow: hidden; }
.decision-approve::after { content: ''; position: absolute; inset: -50% auto -50% -45%; width: 28%; background: rgba(255,255,255,.38); transform: rotate(18deg); }
.workflow-showcase.is-inview .decision-approve::after { animation: approvalSheen 3.8s 1.6s ease-in-out infinite; }
.growth-steps article { transition: background .25s ease, transform .25s ease; }
.growth-steps article:hover { z-index: 1; background: linear-gradient(145deg, rgba(139,255,176,.06), rgba(99,102,241,.035)); transform: translateY(-4px); }
.growth-band.is-visible .growth-steps article { animation: growthStepIn .58s cubic-bezier(.2,.75,.25,1) backwards; }
.growth-band.is-visible .growth-steps article:nth-child(2) { animation-delay: .12s; }
.growth-band.is-visible .growth-steps article:nth-child(3) { animation-delay: .24s; }

/* Movimiento explicativo: aparece una vez y después deja el contenido en reposo. */
.early-cta.is-visible .diagnostic-step { animation: diagnosticStepIn .52s cubic-bezier(.2,.75,.25,1) backwards; }
.early-cta.is-visible .diagnostic-step:nth-of-type(2) { animation-delay: .12s; }
.early-cta.is-visible .diagnostic-step:nth-of-type(3) { animation-delay: .24s; }
.early-cta.is-visible .diagnostic-step:nth-of-type(4) { animation-delay: .36s; }
.early-cta.is-visible .diagnostic-step:nth-of-type(5) { animation-delay: .48s; }
.early-cta.is-visible .diagnostic-progress span { animation: diagnosticProgress 1.15s .12s cubic-bezier(.2,.75,.25,1) backwards; }

.pain-section.is-visible .friction-card { animation: compareCardIn .62s .08s cubic-bezier(.2,.75,.25,1) backwards; }
.pain-section.is-visible .outcome-card { animation: compareCardIn .62s .42s cubic-bezier(.2,.75,.25,1) backwards; }
.pain-section.is-visible .bridge-line i { animation: bridgePulseX .9s .34s cubic-bezier(.2,.75,.25,1) both; }

.fit-card { transition: transform .26s ease, border-color .26s ease, background .26s ease; }
.fit-card:hover { z-index: 2; transform: translateY(-5px); border-color: rgba(139,255,176,.38); }
.fit-system.is-visible .fit-card { animation: bentoCardIn .58s cubic-bezier(.2,.75,.25,1) backwards; }
.fit-system.is-visible .fit-time { animation-delay: .09s; }
.fit-system.is-visible .fit-knowledge { animation-delay: .16s; }
.fit-system.is-visible .fit-control { animation-delay: .23s; }
.fit-system.is-visible .fit-sectors { animation-delay: .3s; }
.fit-system.is-visible .fit-honesty { animation-delay: .37s; }

.measurement.is-visible .metric-row { animation: metricRowIn .5s cubic-bezier(.2,.75,.25,1) backwards; }
.measurement.is-visible .metric-row:nth-child(3) { animation-delay: .12s; }
.measurement.is-visible .metric-row:nth-child(4) { animation-delay: .24s; }
.measurement.is-visible .metric-row:nth-child(5) { animation-delay: .36s; }
.measurement.is-visible .metric-row::after { animation: metricScan .75s ease both; }
.measurement.is-visible .metric-row:nth-child(3)::after { animation-delay: .12s; }
.measurement.is-visible .metric-row:nth-child(4)::after { animation-delay: .24s; }
.measurement.is-visible .metric-row:nth-child(5)::after { animation-delay: .36s; }

.method-step { transition: background .25s ease, transform .25s ease; }
.method-step:hover { background: linear-gradient(90deg,rgba(139,255,176,.045),transparent); transform: translateX(4px); }
.method.is-visible .method-steps::after { animation: methodRail 1.75s .18s cubic-bezier(.2,.75,.25,1) backwards; }
.method.is-visible .method-step { animation: methodStepIn .52s cubic-bezier(.2,.75,.25,1) backwards; }
.method.is-visible .method-step:nth-child(1) { animation-delay: .12s; }
.method.is-visible .method-step:nth-child(2) { animation-delay: .27s; }
.method.is-visible .method-step:nth-child(3) { animation-delay: .42s; }
.method.is-visible .method-step:nth-child(4) { animation-delay: .57s; }
.method.is-visible .method-step:nth-child(5) { animation-delay: .72s; }

.case-card { transition: transform .27s ease, border-color .27s ease, box-shadow .27s ease; }
.case-card:hover { z-index: 2; transform: translateY(-6px); border-color: rgba(139,255,176,.36); box-shadow: 0 28px 65px rgba(0,0,0,.23); }
.case-card:hover .case-flow i { transform: translateX(3px); }
.case-flow i { transition: transform .22s ease; }
.use-cases.is-visible .case-card { animation: caseCardIn .58s cubic-bezier(.2,.75,.25,1) backwards; }
.use-cases.is-visible .case-operations { animation-delay: .12s; }
.use-cases.is-visible .case-knowledge { animation-delay: .2s; }
.use-cases.is-visible .case-direction { animation-delay: .3s; }

.trust.is-visible .autonomy-gauge { animation: trustItemIn .55s cubic-bezier(.2,.75,.25,1) backwards; }
.trust.is-visible .trust-row { animation: trustItemIn .48s cubic-bezier(.2,.75,.25,1) backwards; }
.trust.is-visible .trust-row:nth-child(2) { animation-delay: .09s; }
.trust.is-visible .trust-row:nth-child(3) { animation-delay: .17s; }
.trust.is-visible .trust-row:nth-child(4) { animation-delay: .25s; }
.trust.is-visible .trust-row:nth-child(5) { animation-delay: .33s; }
.faq details[open] p { animation: faqAnswerIn .28s ease both; }

@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbitIn { from { opacity: 0; transform: scale(.92) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes statusPulse { 0%,100% { opacity: .65; box-shadow: 0 0 0 3px rgba(139,255,176,.08); } 50% { opacity: 1; box-shadow: 0 0 0 7px rgba(139,255,176,.02); } }
@keyframes sparkle { 0%,100% { transform: scale(.8) rotate(0); opacity: .55; } 50% { transform: scale(1.2) rotate(90deg); opacity: 1; } }
@keyframes orbitSpinOne { to { transform: translate(-50%,-50%) rotate(340deg); } }
@keyframes orbitSpinTwo { to { transform: translate(-50%,-50%) rotate(400deg); } }
@keyframes orbitSpinThree { to { transform: translate(-50%,-50%) rotate(320deg); } }
@keyframes flowA { 0% { left: 19%; top: 39%; opacity: 0; } 18%,82% { opacity: 1; } 100% { left: 47%; top: 51%; opacity: 0; } }
@keyframes flowB { 0% { left: 53%; top: 51%; opacity: 0; } 18%,82% { opacity: 1; } 100% { left: 82%; top: 33%; opacity: 0; } }
@keyframes flowC { 0% { left: 52%; top: 55%; opacity: 0; } 18%,82% { opacity: 1; } 100% { left: 79%; top: 72%; opacity: 0; } }
@keyframes workflowCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workflowCoreIn { from { opacity: 0; transform: scale(.965); box-shadow: 0 0 0 rgba(0,0,0,0); } to { opacity: 1; transform: scale(1); } }
@keyframes workflowPulseX { 0% { left: 0; opacity: 0; } 18%,82% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
@keyframes workflowPulseY { 0% { top: 0; opacity: 0; } 18%,82% { opacity: 1; } 100% { top: calc(100% - 5px); opacity: 0; } }
@keyframes coreScan { 0%,12% { top: -1px; opacity: 0; } 26%,72% { opacity: .65; } 88%,100% { top: 100%; opacity: 0; } }
@keyframes approvalSheen { 0%,45% { left: -45%; } 65%,100% { left: 135%; } }
@keyframes growthStepIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes diagnosticStepIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes diagnosticProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes compareCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bridgePulseX { from { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } to { opacity: 1; transform: translateX(89px); } }
@keyframes bridgePulseY { from { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } to { opacity: 1; transform: translateY(63px); } }
@keyframes bentoCardIn { from { opacity: 0; transform: translateY(19px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes metricRowIn { from { opacity: 0; transform: translateX(13px); } to { opacity: 1; transform: translateX(0); } }
@keyframes metricScan { 0% { opacity: 0; transform: translateX(-35%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(35%); } }
@keyframes methodRail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes methodStepIn { from { opacity: .2; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }
@keyframes caseCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes trustItemIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes faqAnswerIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 960px) {
  .desktop-nav { gap: 18px; }
  .desktop-nav a:nth-child(3) { display: none; }
  .client-link { display: none; }
}

@media (max-width: 800px) {
  .site-header { padding-left: 20px; padding-right: 20px; }
  .header-actions { display: none; }
  .menu-toggle { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 50%; }
  .menu-toggle span { width: 15px; height: 1px; background: var(--paper); transition: .25s ease; }
  .menu-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .desktop-nav.mobile-open { display: flex; position: absolute; z-index: 10; top: 69px; left: 0; right: 0; padding: 26px 24px 30px; flex-direction: column; align-items: flex-start; gap: 20px; background: rgba(11,13,16,.97); border-bottom: 1px solid var(--line); }
  .desktop-nav.mobile-open a { display: block; font-size: 14px; }
  .desktop-nav.mobile-open .mobile-only-link { color: var(--green); }
  .cursor-glow { display: none; }
  .signal-strip { overflow-x: auto; scrollbar-width: none; }
  .signal-strip::-webkit-scrollbar { display: none; }
  .signal-strip > div { justify-content: flex-start; padding-left: 20px; padding-right: 20px; }
  .pain-section.is-visible .bridge-line i { animation-name: bridgePulseY; }
}

@media (max-width: 900px) {
  .workflow-showcase.is-visible .data-path span { animation-name: workflowPulseY; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}