@property --w{syntax:'<integer>';inherits:false;initial-value:0}
@property --d{syntax:'<integer>';inherits:false;initial-value:0}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.progress{position:fixed;inset:0 0 auto 0;height:3px;background:var(--cs-accent);transform-origin:0 50%;transform:scaleX(0);z-index:30}
@supports (animation-timeline:scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root block)}
  @keyframes prog{to{transform:scaleX(1)}}
}

.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform}
.hero::before{width:min(80vw,900px);aspect-ratio:1;bottom:-52%;left:-18%;background:radial-gradient(circle,rgba(59,91,255,.55),rgba(59,91,255,0) 64%);animation:driftA 20s ease-in-out infinite alternate}
.hero::after{width:min(62vw,680px);aspect-ratio:1;top:-40%;right:-12%;background:radial-gradient(circle,rgba(25,195,160,.28),rgba(25,195,160,0) 64%);animation:driftB 24s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate3d(8%,10%,0) scale(1.12)}}
@keyframes driftB{to{transform:translate3d(-9%,-8%,0) scale(1.1)}}

.w{display:inline-block;opacity:0;transform:translateY(14px);animation:wordIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
@keyframes wordIn{to{opacity:1;transform:none}}
.hl{color:var(--cs-primary)}

.marquee{overflow:hidden;background:#fff;border-block:1px solid var(--cs-border);padding:14px 0}
.marquee .track{display:flex;gap:12px;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{white-space:nowrap;padding:8px 18px;border-radius:999px;background:var(--cs-bg);border:1px solid var(--cs-border);font-weight:600;font-size:.95rem;color:var(--cs-ink)}
@keyframes marq{to{transform:translateX(-50%)}}

.stack{display:grid;gap:22px;margin-top:34px;padding-bottom:6px}
.feat{display:grid;gap:18px;padding:22px;border-radius:24px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--cs-primary),var(--cs-accent)) border-box;box-shadow:0 14px 30px rgba(15,23,42,.08)}
.feat h3{font-size:1.3rem;margin-bottom:8px}
.feat p{color:var(--cs-text-muted)}
.feat-art{border-radius:18px;overflow:hidden;background:#EEF2FF}
.feat-art svg{display:block;width:100%;height:auto}
.art-results{padding:14px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.kpi{background:#fff;border-radius:12px;padding:10px 12px}
.k-l{display:block;font-size:.75rem;color:var(--cs-text-muted)}
.cnt{display:block;font-family:var(--cs-font-display);font-weight:700;font-size:1.35rem;color:var(--cs-ink);counter-reset:w var(--w,0) d var(--d,0)}
.cnt.green{color:var(--cs-accent-text)}
.money::after{content:"$" counter(w) "," counter(d,decimal-leading-zero)}
.int::after{content:counter(w)}
@media (min-width:900px){
  .feat{grid-template-columns:1.05fr .95fr;align-items:center;padding:30px 34px;min-height:330px}
  .feat:nth-child(even){grid-template-columns:.95fr 1.05fr}
  .feat:nth-child(even) .feat-art{order:-1}
  .stack .feat{position:sticky;top:calc(84px + var(--i) * 16px)}
}

.steps{position:relative}
.steps li{position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;background:var(--cs-primary);border-radius:2px;left:21px;top:50px;bottom:-16px;width:2px}
@media (min-width:700px){
  .steps li:not(:last-child)::after{left:56px;right:-12px;top:21px;bottom:auto;width:auto;height:2px}
}

.js .a-slide,.js .a-rise,.js .a-pop,.js .a-drop,.js .a-gx,.js .a-gy,.js .a-draw,.js .a-dot,.js .a-spin,.js .a-pulse{transform-box:fill-box}
.js .in .a-slide{animation:aSlide 7s ease-out infinite both;animation-delay:var(--d,0s)}
.js .in .a-rise{animation:aRise 7s ease-out infinite both;animation-delay:var(--d,0s)}
.js .in .a-pop{animation:aPop 7s ease-out infinite both;animation-delay:var(--d,0s);transform-origin:center}
.js .in .a-drop{animation:aDrop 7s cubic-bezier(.3,1.4,.5,1) infinite both;animation-delay:var(--d,0s)}
.js .in .a-gx{animation:aGrowX 7s ease-out infinite both;animation-delay:var(--d,0s);transform-origin:0 50%}
.js .in .a-gy{animation:aGrowY 7s ease-out infinite both;animation-delay:var(--d,0s);transform-origin:50% 100%}
.js .in .a-draw{animation:aDraw 7s ease-out infinite both;animation-delay:var(--d,0s)}
.js .in .a-dot{animation:aDot 7s ease-out infinite both;animation-delay:var(--d,0s)}
.js .in .a-spin{animation:aSpin 7s ease-in-out infinite both;transform-origin:center}
.js .in .a-pulse{animation:aPulse 2s ease-in-out infinite;transform-origin:center}
.js .in .cnt{animation:cnt 1.8s ease-out both}
.js .steps.in li:not(:last-child)::after{animation:lineX .7s ease-out both;animation-delay:calc(var(--k) * .5s + .3s);transform-origin:0 50%}

@keyframes aSlide{0%{opacity:0;transform:translateX(-16px)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes aRise{0%{opacity:0;transform:translateY(14px)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes aPop{0%,6%{opacity:0;transform:scale(.88)}14%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes aDrop{0%{opacity:0;transform:translateY(-34px)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes aGrowX{0%,6%{transform:scaleX(0)}34%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes aGrowY{0%,6%{transform:scaleY(0)}30%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes aDraw{0%,8%{stroke-dashoffset:120}30%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:120}}
@keyframes aDot{0%,12%{fill:#CBD5E1}22%,88%{fill:#3B5BFF}96%,100%{fill:#CBD5E1}}
@keyframes aSpin{0%,10%{transform:rotate(0)}40%,100%{transform:rotate(360deg)}}
@keyframes aPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
@keyframes cnt{from{--w:0;--d:0}}
@keyframes lineX{from{transform:scaleX(0)}}
@media (max-width:699.98px){
  .js .steps.in li:not(:last-child)::after{animation-name:lineY;transform-origin:50% 0}
  @keyframes lineY{from{transform:scaleY(0)}}
}

@media (prefers-reduced-motion:reduce){
  .w{animation:none;opacity:1;transform:none}
  .hero::before,.hero::after{animation:none}
  .marquee .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 20px}
  .marquee span[aria-hidden]{display:none}
  .progress{display:none}
  .stack .feat{position:static}
  .js .in .a-slide,.js .in .a-rise,.js .in .a-pop,.js .in .a-drop,.js .in .a-gx,.js .in .a-gy,.js .in .a-draw,.js .in .a-dot,.js .in .a-spin,.js .in .a-pulse,.js .in .cnt,.js .steps.in li::after{animation:none!important}
}

/* Fondo oscuro de la portada (mismo de la imagen de Facebook): cabecera y hero */
.top{background:rgba(15,23,42,.92);border-bottom:1px solid rgba(255,255,255,.08)}
.hero{background:var(--cs-ink);color:var(--cs-dark-text)}
.hero h1,.hero h1 .w{color:#fff}
.hero h1 .hl,.hero h1 .hl .w{color:var(--cs-dark-primary)}
.hero .eyebrow{color:var(--cs-accent)}
.hero .lead,.hero .note{color:var(--cs-dark-muted)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:#fff;color:var(--cs-ink);border-color:#fff}
.top :focus-visible,.hero :focus-visible{outline-color:var(--cs-dark-primary)}
.hero .rotator{border-color:#0B1222;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 24px 60px rgba(0,0,0,.5)}
.band{border-top:1px solid rgba(255,255,255,.08)}

/* Sección final con el mismo fondo oscuro de la portada */
.final{position:relative;overflow:hidden;isolation:isolate;background:var(--cs-ink)}
.final::before,.final::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.final::before{width:min(80vw,820px);aspect-ratio:1;bottom:-120%;left:-18%;background:radial-gradient(circle,rgba(59,91,255,.55),rgba(59,91,255,0) 64%)}
.final::after{width:min(62vw,640px);aspect-ratio:1;top:-120%;right:-12%;background:radial-gradient(circle,rgba(25,195,160,.28),rgba(25,195,160,0) 64%)}
.final p{color:var(--cs-dark-muted)}
.final :focus-visible{outline-color:var(--cs-dark-primary)}
.foot{border-top:1px solid rgba(255,255,255,.08)}