/* =====================================================================
   Firebagg · MOTION GRAPHICS (solo transform/opacity; se pausa fuera de pantalla)
   ===================================================================== */
.portada,.prod-hero{position:relative;isolation:isolate}
.constelacion{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}

/* palabra que rota con brillo */
.rotador>span{background:linear-gradient(90deg,var(--amarillo) 0%,#fff6b0 45%,var(--amarillo) 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilloTxt 3.2s linear infinite}
@keyframes brilloTxt{to{background-position:-220% 0}}

/* títulos palabra por palabra */
.js .tit-pal{clip-path:none!important;transform:none!important}
.tit-pal .pm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.tit-pal .pm>span{display:inline-block;transform:translateY(115%) rotate(5deg);transition:transform .95s var(--curva);transition-delay:calc(var(--d,0s) + var(--k) * .055s)}
.tit-pal.visible .pm>span{transform:none}

/* ---------- escena del celular con órbita y notificaciones ---------- */
.escena{position:relative;max-width:420px;margin-left:auto}
.escena .telefono{margin:0 auto}
.orbita{position:absolute;left:50%;top:46%;width:560px;height:560px;margin:-280px 0 0 -280px;max-width:none;z-index:-1;pointer-events:none;animation:girarLento 40s linear infinite}
@keyframes girarLento{to{transform:rotate(360deg)}}
.noti{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;
  background:rgba(17,25,51,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(0,0,0,.45);font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--texto);
  opacity:0;transform:translateY(14px) scale(.85);animation:notiCiclo 10s var(--curva) infinite;animation-delay:var(--t,0s)}
.noti i{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-style:normal;flex:none;background:var(--c,var(--violeta));color:#0A0F1F}
.noti.n1 i{color:#fff}
.noti i svg{width:18px;height:18px}
.noti small{display:block;font-weight:500;font-size:11.5px;color:var(--suave)}
@keyframes notiCiclo{0%{opacity:0;transform:translateY(14px) scale(.85)}5%,32%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateY(-10px) scale(.95)}}
.noti.n1{top:8%;left:-24%;--c:#7C5CFF}
.noti.n2{top:30%;right:-18%;--c:#22D3EE}
.noti.n3{top:55%;left:-28%;--c:#25D366}
.noti.n4{top:76%;right:-14%;--c:#FFE14D}
@media (max-width:1000px){.escena{margin:0 auto}.noti.n1,.noti.n3{left:-8%}.noti.n2,.noti.n4{right:-8%}}
@media (max-width:620px){
  .orbita{width:400px;height:400px;margin:-200px 0 0 -200px}
  .noti{font-size:12px;padding:7px 10px 7px 7px;border-radius:13px}.noti i{width:26px;height:26px;border-radius:9px}.noti i svg{width:15px;height:15px}.noti small{display:none}
  .noti.n1,.noti.n3{left:-3%}.noti.n2,.noti.n4{right:-3%}
}

/* ---------- historia con scroll: el celular cambia de pantalla ---------- */
.historia{padding:96px 0 40px}
.historia-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.historia-tel{position:sticky;top:96px;height:calc(100vh - 130px);max-height:720px;display:flex;align-items:center;justify-content:center}
.tel-hist{width:min(310px,100%);animation:none;padding:10px;margin:0}
.pantallas{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000}
.pant{position:absolute;inset:0;opacity:0;transform:scale(1.08);filter:blur(10px);transition:opacity .7s var(--curva),transform .9s var(--curva),filter .7s;overflow:hidden}
.pant.activa{opacity:1;transform:none;filter:none}
.pant>img{width:100%;height:100%;object-fit:cover;border-radius:0}
.historia-pasos{position:relative;padding-left:30px}
.h-progreso{position:absolute;left:0;top:12vh;bottom:12vh;width:3px;border-radius:3px;background:var(--linea);overflow:hidden}
.h-progreso b{position:absolute;inset:0;background:linear-gradient(180deg,var(--violeta),var(--cian),#25D366,var(--amarillo));transform-origin:top;transform:scaleY(var(--p,0))}
.h-paso{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.42;transform:translateX(-12px);transition:opacity .6s,transform .6s var(--curva)}
.h-paso.activa{opacity:1;transform:none}
.h-paso .etapa{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c,var(--cian))}
.h-paso .etapa b{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c,var(--cian));color:#0A0F1F;letter-spacing:0;font-size:15px}
.h-paso h3{font-size:clamp(34px,4.6vw,58px);margin:14px 0 12px}
.h-paso p{color:var(--suave);font-size:18px;margin:0 0 16px;max-width:520px}
.h-paso a{font-weight:700;color:var(--c,var(--cian));text-decoration:none;display:inline-flex;gap:6px;align-items:center}
/* pantalla 0: video con corazones */
.reel-ui{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;font-size:12px;font-weight:600}
.redes{display:flex;gap:6px;margin-top:8px}
.redes span{background:rgba(255,255,255,.18);border-radius:999px;padding:3px 9px;font-size:11px}
.corazones{position:absolute;right:14px;bottom:96px;width:40px;height:230px}
.corazones span{position:absolute;bottom:0;left:50%;font-size:22px;opacity:0}
.activa .corazones span{animation:corazon 3s ease-out infinite;animation-delay:calc(var(--i) * .55s)}
@keyframes corazon{0%{opacity:0;transform:translate(-50%,0) scale(.4)}15%{opacity:1;transform:translate(-50%,-20px) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--x,0px)),-220px) scale(.8)}}
/* pantalla 1: Google Maps */
.p-mapa{background:#e8eef3}
.mapa{position:absolute;inset:0 0 44% 0;background:
  linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%),linear-gradient(0deg,transparent 58%,#fff 58% 62%,transparent 62%),
  linear-gradient(32deg,transparent 70%,#fff 70% 73%,transparent 73%),linear-gradient(#dfe9d8,#d5e6ee)}
.mapa::after{content:"";position:absolute;left:10%;top:12%;width:30%;height:26%;border-radius:10px;background:#c4e0b9}
.pin{position:absolute;left:48%;top:28%;width:34px;height:34px;margin-left:-17px;border-radius:50% 50% 50% 0;background:#EA4335;transform:rotate(-45deg);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.pin::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
.activa .pin{animation:pinCae .9s cubic-bezier(.3,1.6,.5,1) both .2s}
@keyframes pinCae{from{opacity:0;transform:translateY(-70px) rotate(-45deg)}to{opacity:1;transform:rotate(-45deg)}}
.pin-onda{position:absolute;left:48%;top:calc(28% + 30px);width:60px;height:18px;margin-left:-30px;border-radius:50%;border:2px solid #EA4335;opacity:0}
.activa .pin-onda{animation:onda 1.8s ease-out infinite 1s}
@keyframes onda{from{opacity:.7;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
.ficha{position:absolute;left:0;right:0;bottom:0;height:46%;background:#fff;border-radius:18px 18px 0 0;padding:16px;color:#202124;box-shadow:0 -6px 20px rgba(0,0,0,.12);font-family:var(--cuerpo)}
.ficha b{display:block;font-size:18px}
.ficha .est{color:#e37400;font-size:13px;margin:2px 0}
.ficha .est span{color:#5f6368}
.ficha small{color:#188038;font-weight:600;font-size:12px}
.ficha .bts{display:flex;gap:6px;margin-top:12px}
.ficha .bts span{flex:1;text-align:center;border-radius:999px;padding:7px 4px;font-size:11px;font-weight:700;background:#e8f0fe;color:#1a73e8}
.ficha .bts span:first-child{background:#1a73e8;color:#fff}
.ficha .bts span.wa{background:#25D366;color:#fff}
.activa .ficha{animation:subeFicha .8s var(--curva) both .5s}
@keyframes subeFicha{from{transform:translateY(100%)}}
/* pantalla 2: WhatsApp */
.p-wa{background:#0b141a;display:flex;flex-direction:column}
.wa-cab{display:flex;align-items:center;gap:10px;background:#1f2c34;color:#e9edef;padding:12px;font-size:13px;font-weight:600}
.wa-cab i{width:32px;height:32px;border-radius:50%;background:#7C5CFF;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800}
.wa-cab small{display:block;color:#8696a0;font-size:11px;font-weight:400}
.wa-chat{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:8px}
.burbuja{max-width:84%;padding:8px 10px;border-radius:10px;font-size:12.5px;line-height:1.35;color:#e9edef;opacity:0;transform:translateY(10px) scale(.95)}
.burbuja.el{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.burbuja.yo{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.burbuja small{display:block;text-align:right;font-size:10px;color:#8eb5ac;margin-top:2px}
.activa .burbuja{animation:burbuja .45s var(--curva) both;animation-delay:calc(.35s + var(--i) * .9s)}
@keyframes burbuja{to{opacity:1;transform:none}}
/* pantalla 3: app con aviso */
.toast{position:absolute;left:10px;right:10px;top:12px;background:#0A0F1F;color:#fff;border-radius:14px;padding:10px 12px;font-size:12.5px;font-weight:600;display:flex;gap:8px;align-items:center;box-shadow:0 10px 26px rgba(0,0,0,.4);transform:translateY(-150%)}
.toast i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.activa .toast{animation:toast 3.6s var(--curva) infinite .6s}
@keyframes toast{0%{transform:translateY(-150%)}12%,70%{transform:none}82%,100%{transform:translateY(-150%)}}
.toque{position:absolute;left:73%;bottom:6%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:rgba(255,255,255,.6);opacity:0}
.activa .toque{animation:toque 3.6s ease-out infinite .2s}
@keyframes toque{0%{opacity:0;transform:scale(.4)}8%{opacity:.9;transform:scale(1)}20%,100%{opacity:0;transform:scale(1.8)}}
@media (max-width:860px){
  .historia{padding-top:64px}
  .historia-grid{grid-template-columns:132px minmax(0,1fr);gap:16px}
  .historia-tel{top:86px;height:auto;max-height:none;padding-top:14vh}
  .tel-hist{border-radius:22px;padding:6px}
  .tel-hist::before{border-radius:24px}
  .tel-hist .pantallas{border-radius:16px}
  .historia-pasos{padding-left:16px}
  .h-paso{min-height:64vh}
  .h-paso h3{font-size:28px}
  .h-paso p{font-size:16px}
  .pant .burbuja{font-size:7px;padding:4px 5px;border-radius:6px}.pant .burbuja small{font-size:5px}
  .pant .wa-chat{gap:4px;padding:6px 5px}
  .pant .wa-cab{font-size:8px;padding:6px;gap:5px}.pant .wa-cab i{width:16px;height:16px;font-size:8px}.pant .wa-cab small{font-size:6px}
  .pant .ficha{padding:8px}.pant .ficha b{font-size:10px}.pant .ficha .est,.pant .ficha small{font-size:7px}.pant .ficha .bts{gap:3px;margin-top:6px}.pant .ficha .bts span{font-size:5.5px;padding:4px 1px}
  .pant .toast{font-size:7px;padding:5px 6px;top:6px;left:5px;right:5px;border-radius:8px;gap:4px}.pant .toast i{width:13px;height:13px;font-size:8px}
  .pant .reel-ui{font-size:7px;padding:8px}.pant .redes{gap:3px}.pant .redes span{font-size:5.5px;padding:2px 4px}
  .corazones{right:4px;bottom:46px;transform:scale(.55);transform-origin:bottom}
  .pin{width:18px;height:18px;margin-left:-9px}.pin::after{inset:5px}
  .pin-onda{width:32px;height:10px;margin-left:-16px;top:calc(28% + 16px)}
  .toque{width:22px;height:22px;margin-left:-11px}
}

/* ---------- tipografía cinética gigante ---------- */
.cinetica{overflow:hidden;padding:20px 0 30px;display:grid;gap:6px;user-select:none}
.cinetica>div{display:flex;gap:44px;white-space:nowrap;will-change:transform;font-family:var(--titulos);font-weight:800;font-size:clamp(54px,11vw,150px);line-height:1.02;letter-spacing:-.03em}
.cinetica span{color:transparent;-webkit-text-stroke:1.5px rgba(169,179,207,.32)}
.cinetica span.lleno{color:var(--amarillo);-webkit-text-stroke:0}

/* ---------- odómetro ---------- */
.odometro{display:inline-flex;overflow:hidden;line-height:1;height:1em}
.odometro .dig{display:inline-block;height:1em;overflow:hidden}
.odometro .dig>span{display:flex;flex-direction:column;transition:transform 1.7s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--i) * .07s)}
.odometro .dig>span>b{height:1em;display:block;font:inherit;color:inherit;line-height:1}

/* chispa que recorre la línea de los pasos */
.pasos .chispa{position:absolute;top:3px;left:0;width:90px;height:13px;margin-left:-45px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(34,211,238,.6) 35%,transparent 70%);opacity:0;pointer-events:none}
.pasos.visible .chispa.corre{animation:chispa 3.8s ease-in-out infinite 1.4s}
@keyframes chispa{0%{opacity:0;left:0}10%,90%{opacity:1}100%{opacity:0;left:100%}}
@media (max-width:1000px){.pasos .chispa{display:none}}

/* pie: nombre gigante */
.marca-gigante{font-family:var(--titulos);font-weight:800;font-size:clamp(76px,18vw,260px);line-height:.82;letter-spacing:-.04em;text-align:center;margin:44px 0 0;user-select:none;
  color:#161f42}
.js .marca-gigante{opacity:0;transform:translateY(40px) scale(.96);transition:opacity 1s var(--curva),transform 1.2s var(--curva)}
.js .marca-gigante.visible{opacity:1;transform:none}

/* íconos de apps que flotan en el héroe de productos */
.iconos-flotan{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.iconos-flotan img{position:absolute;width:var(--s,64px);height:var(--s,64px);border-radius:22%;opacity:.6;box-shadow:0 14px 30px rgba(0,0,0,.45);animation:flota var(--t,9s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes flota{0%,100%{transform:translateY(0) rotate(var(--r,-8deg))}50%{transform:translateY(-26px) rotate(calc(var(--r,-8deg) * -1))}}
@media (max-width:1250px){.iconos-flotan{display:none}}

/* brillo que cruza las tarjetas de producto */
.prod::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);transform:translateX(-100%);transition:transform .9s var(--curva);pointer-events:none}
.prod:hover::after{transform:translateX(100%)}

/* contadores de la portada de productos */
.datos b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .constelacion,.orbita,.corazones,.toque,.chispa{display:none!important}
  .noti{opacity:1!important;transform:none!important;animation:none!important}
  .noti.n3,.noti.n4{display:none}
  .burbuja{opacity:1!important;transform:none!important}
  .tit-pal .pm>span{transform:none!important}
  .h-paso{opacity:1;transform:none}
  .marca-gigante{opacity:1!important;transform:none!important}
}

/* precio en las tarjetas de demos */
.demo-precio{margin-top:auto;padding:12px 14px;border-radius:14px;background:rgba(255,225,77,.08);border:1px solid rgba(255,225,77,.28);display:flex;flex-direction:column;gap:2px}
.demo-precio span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);font-weight:700}
.demo-precio b{font-family:var(--titulos);font-size:24px;font-weight:800;color:var(--amarillo);line-height:1.15}
.demo-precio em{font-style:normal;font-size:13px;color:var(--suave)}
.demo-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.demo-acc .btn{flex:1 1 auto}
.demo-pantalla{display:block}