:root{--bg:#0f1420;--card:#171e2e;--line:#273049;--tx:#eef2fa;--tx2:#9aa6bf;--blue:#3b82f6;--blue2:#2563eb;--warm:#f6a23c}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 50% -10%,#24345c 0%,var(--bg) 60%);color:var(--tx);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
nav b{font-size:23px}nav a{color:var(--tx2);text-decoration:none;margin-left:20px;font-size:15px}nav a:hover{color:var(--tx)}
.hero{text-align:center;padding:48px 0 72px}
.hero img{width:132px;height:132px;border-radius:30px;box-shadow:0 18px 60px rgba(92,115,153,.45)}
h1{font-size:clamp(34px,6vw,56px);line-height:1.08;margin:28px 0 14px;letter-spacing:-.02em}
.hero p{color:var(--tx2);font-size:20px;max-width:560px;margin:0 auto 30px}
.btn{display:inline-block;background:linear-gradient(#4f94f8,var(--blue2));color:#fff;text-decoration:none;font-weight:600;padding:14px 30px;border-radius:999px;box-shadow:0 8px 28px rgba(59,130,246,.45)}
.soon{display:block;margin-top:12px;color:var(--tx2);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;padding-bottom:64px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}
.card h3{margin:0 0 6px;font-size:18px}.card p{margin:0;color:var(--tx2);font-size:15px}
h2{text-align:center;font-size:30px;margin:0 0 28px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;padding-bottom:72px}
.plans ul{margin:12px 0 0;padding-left:20px;color:var(--tx2);font-size:15px}
.pro{border-color:var(--warm);box-shadow:0 0 40px rgba(246,162,60,.15)}
footer{border-top:1px solid var(--line);padding:28px 0 48px;color:var(--tx2);font-size:14px;text-align:center}
footer a{color:var(--tx2);margin:0 10px}
/* --- v2: aurora, capturas, badge, móvil --- */
.aurora{position:relative;display:inline-block;background:linear-gradient(100deg,#3d8bff,#2cc7d6,#7c6cff,#4f6bff,#2cc7d6,#3d8bff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:flow 9s linear infinite}
.aurora::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;background:radial-gradient(60% 70% at 30% 50%,rgba(44,199,214,.35),transparent 70%),radial-gradient(60% 70% at 75% 50%,rgba(124,108,255,.35),transparent 70%);filter:blur(28px);animation:drift 8s ease-in-out infinite alternate}
@keyframes flow{to{background-position:300% 0}}
@keyframes drift{to{transform:translateX(6%) scale(1.08);opacity:.75}}
@media (prefers-reduced-motion:reduce){.aurora,.aurora::before{animation:none}}
.brandline{font-size:38px;font-weight:700;letter-spacing:-.01em;margin:22px 0 0}
.hero h1{margin-top:10px}
.badge{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;text-decoration:none;border:1px solid #a6a6a6;border-radius:12px;padding:9px 22px 9px 16px;margin-top:4px}
.badge .logo{font:36px/1 -apple-system,system-ui;margin-top:-4px}
.badge small{display:block;font-size:11px;line-height:1.1;letter-spacing:.02em}
.badge b{display:block;font-size:22px;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.shot{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.heroshot{margin:48px auto 0;max-width:880px}
.row{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center;padding:56px 0}
.row.flip{grid-template-columns:1.25fr 1fr}.row.flip .txt{order:2}
.row h2{text-align:left;font-size:30px;margin:0 0 12px;line-height:1.15}
.row p{color:var(--tx2);margin:0 0 10px}
.duo{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center;padding:24px 0 56px}
.duo .cap{color:var(--tx2);font-size:14px;margin:10px 4px 0}
h2.c{text-align:center;margin-bottom:10px}.lead{text-align:center;color:var(--tx2);max-width:560px;margin:0 auto 28px}
@media (max-width:760px){
 body{font-size:16px}.wrap{padding:0 18px}
 nav a{margin-left:14px}.hero{padding:28px 0 48px}.hero p{font-size:18px}
 .hero img{width:104px;height:104px;border-radius:24px}
 .row,.row.flip{grid-template-columns:1fr;gap:20px;padding:36px 0}.row.flip .txt{order:0}
 .row h2{font-size:25px}.duo{grid-template-columns:1fr;padding-bottom:36px}
 .heroshot{margin-top:32px}.shot{border-radius:12px}
 .badge b{font-size:20px}
}

/* --- v3: Pro destacado en azul --- */
.plans{gap:20px;align-items:stretch}
.card.pro{position:relative;overflow:hidden;border:1px solid rgba(79,134,255,.65);background:linear-gradient(160deg,#1a2748,#16203a 55%,#1b2150);box-shadow:0 0 0 1px rgba(124,108,255,.18),0 24px 70px rgba(61,139,255,.28);padding:30px 28px;transform:translateY(-8px)}
.card.pro::before{content:"";position:absolute;inset:-30%;z-index:0;background:radial-gradient(45% 40% at 20% 25%,rgba(44,199,214,.28),transparent 70%),radial-gradient(45% 40% at 80% 30%,rgba(124,108,255,.30),transparent 70%),radial-gradient(50% 45% at 55% 90%,rgba(61,139,255,.28),transparent 70%);filter:blur(24px);animation:drift 9s ease-in-out infinite alternate}
.card.pro>*{position:relative;z-index:1}
.card.pro h3{font-size:22px;color:#fff}
.card.pro ul{color:#cdd8f2;font-size:16px}.card.pro li{margin:5px 0}
.card.pro .tag{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cfe0ff;background:rgba(61,139,255,.25);border:1px solid rgba(79,134,255,.5);border-radius:999px;padding:3px 12px}
@media (max-width:760px){.card.pro{transform:none}}
@media (prefers-reduced-motion:reduce){.card.pro::before{animation:none}}

/* --- v4 --- */
html{background:#0f1420;overscroll-behavior-y:none}
body{min-height:100vh;background-color:#0f1420;background-repeat:no-repeat}
header.wrap,footer.wrap{display:block}
nav a.brand{font-size:23px;font-weight:700;margin:0;text-decoration:none}
.eyebrow{display:inline-block;margin:26px 0 0;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9fd3ff;background:rgba(61,139,255,.14);border:1px solid rgba(61,139,255,.35);border-radius:999px;padding:5px 14px}
.hero .sub{color:var(--tx2);font-size:20px;max-width:620px;margin:0 auto 30px}
.flow{display:block;width:100%;max-width:720px;margin:44px auto 0;overflow:visible}
.flow .file{transform-box:view-box}
.flow .big{animation:inbig 4.2s cubic-bezier(.5,0,.3,1) infinite}
.flow .small{animation:outsmall 4.2s cubic-bezier(.3,.6,.4,1) infinite}
.flow .core{transform-origin:360px 130px;animation:pulse 4.2s ease-in-out infinite}
@keyframes inbig{0%{transform:translate(110px,130px);opacity:0}10%{opacity:1}42%{transform:translate(330px,130px) scale(.55);opacity:1}50%,100%{transform:translate(360px,130px) scale(.2);opacity:0}}
@keyframes outsmall{0%,48%{transform:translate(360px,130px) scale(.3);opacity:0}58%{opacity:1}88%{transform:translate(610px,130px) scale(1);opacity:1}100%{transform:translate(630px,130px);opacity:0}}
@keyframes pulse{0%,38%,62%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.flow .big{animation:none;opacity:0}.flow .small{animation:none;transform:translate(610px,130px)}.flow .core{animation:none}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:760px;margin:30px auto 0}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 10px}
.stats b{display:block;font-size:26px;letter-spacing:-.02em}.stats span{font-size:13px;color:var(--tx2)}
.heroshot img{width:100%;height:auto}
.shot{height:auto}
figure{margin:0}figcaption{color:var(--tx2);font-size:14px;margin:10px 4px 0}
code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;color:#9fd3ff}
.price{font-size:30px;font-weight:700;margin:6px 0 4px;color:#fff}.price s{color:var(--tx2);font-size:20px;font-weight:500;margin-right:6px}.price small{font-size:13px;color:var(--tx2);font-weight:500}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.hero .sub{font-size:17px}.eyebrow{font-size:11px}.flow{margin-top:30px}}

.hero .appicon{display:block;margin:0 auto}
@media (max-width:760px){.eyebrow{letter-spacing:.04em;padding:4px 12px}}
/* --- v5: apps --- */
.apps{padding:40px 0 56px}
.appgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.appgroup{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.appgroup h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;color:#cfe0ff;letter-spacing:.02em}
.appgroup svg{width:18px;height:18px;color:#5fb6ff}
.appgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.appgroup li{font-size:13px;font-weight:600;color:var(--tx);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:4px 10px}
.note{text-align:center;color:#5d6884;font-size:12px;margin:16px 0 0}
/* --- v6 --- */
.flow{max-width:760px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px auto 0;padding:0;background:none;border:0;border-radius:0;font-size:12px;letter-spacing:.22em;color:#8fb8ff}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,transparent,rgba(95,182,255,.7))}
.eyebrow::after{transform:scaleX(-1)}
.hero h1{margin-top:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:900px;margin:36px auto 0}
.kpi{position:relative;overflow:hidden;border-radius:22px;padding:24px 14px 20px;background:linear-gradient(160deg,#18213a,#121a2c);border:1px solid rgba(95,140,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .3s,border-color .3s}
.kpi::before{content:"";position:absolute;inset:-40%;background:radial-gradient(40% 35% at 30% 20%,rgba(44,199,214,.22),transparent 70%),radial-gradient(40% 35% at 75% 80%,rgba(124,108,255,.22),transparent 70%);filter:blur(18px);animation:drift 7s ease-in-out infinite alternate;z-index:0}
.kpi>*{position:relative;z-index:1}
.kpi:hover{transform:translateY(-4px);border-color:rgba(95,182,255,.6)}
.kpi b{display:flex;align-items:baseline;justify-content:center;gap:2px;font-size:48px;line-height:1;font-weight:800;letter-spacing:-.04em;background:linear-gradient(100deg,#fff,#9fd3ff 60%,#b8adff);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi b i{font-style:normal;font-size:.55em;font-weight:700}
.kpi>span{display:block;margin-top:10px;font-size:13px;color:var(--tx2);line-height:1.35}
.appgroup ul{gap:8px}
.appgroup li{display:inline-flex;align-items:center;gap:7px}
.appgroup li img{width:22px;height:22px;border-radius:6px;flex:none}
.card.pro{text-align:left}
.deal{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.deal .was{font-size:14px;color:var(--tx2)}.deal .was s{color:#ff8a8a;margin-left:4px}
.deal .save{font-size:12px;font-weight:800;letter-spacing:.04em;color:#062014;background:linear-gradient(90deg,#4ade80,#2cc7d6);border-radius:999px;padding:3px 10px}
.big{display:flex;align-items:flex-start;gap:4px;margin:4px 0 0;font-size:72px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#fff}
.big sup{font-size:28px;margin-top:10px}.big small{align-self:flex-end;font-size:16px;font-weight:600;color:var(--tx2);margin:0 0 10px 6px;letter-spacing:0}
.once{margin:8px 0 4px;color:#cdd8f2;font-size:15px}
.cta{display:block;text-align:center;margin:20px 0 8px;padding:15px 20px;border-radius:999px;color:#fff;font-weight:700;font-size:17px;text-decoration:none;background:linear-gradient(90deg,#3d8bff,#4f6bff 55%,#7c6cff);box-shadow:0 12px 34px rgba(61,139,255,.45);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(61,139,255,.6)}
.fine{margin:0;text-align:center;font-size:12px;color:var(--tx2)}
footer.site{margin-top:40px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(23,30,46,.6),rgba(15,20,32,0));padding:48px 0 0;text-align:left;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.fbrand{display:flex;gap:14px;align-items:flex-start}.fbrand img{border-radius:11px;flex:none}
.fbrand b{font-size:20px}.fbrand p{margin:6px 0 0;color:var(--tx2);font-size:14px;max-width:280px}
footer.site h4{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7f8cab}
footer.site nav a{display:block;color:#c6d0e6;text-decoration:none;margin:0 0 8px}
footer.site nav a:hover{color:#fff}footer.site nav a[aria-current]{color:#9fd3ff}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:36px;padding:18px 24px 40px;border-top:1px solid var(--line);color:#6f7a96;font-size:12px}
@media (max-width:760px){
 .kpis{grid-template-columns:repeat(2,1fr);gap:12px}.kpi b{font-size:38px}.kpi{padding:18px 10px 16px}
 .eyebrow{font-size:10px;letter-spacing:.14em;gap:10px}.eyebrow::before,.eyebrow::after{width:28px}
 .big{font-size:60px}.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}.fbar{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.kpi::before{animation:none}}
/* --- v6 fixes --- */
footer.site nav{display:block;padding:0}
footer.site nav a{margin:0 0 8px}
.hero .eyebrow{max-width:none;margin-left:auto;margin-right:auto;font-weight:700}
.card .big{display:flex;align-items:flex-start;gap:4px;margin:4px 0 0;font-size:72px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#fff}
.card .once{margin:8px 0 4px;color:#cdd8f2;font-size:15px}
.card .fine{margin:0;text-align:center;font-size:12px;color:var(--tx2)}
@media (max-width:760px){.card .big{font-size:60px}.hero .eyebrow{font-size:10px}}
/* --- v7: animación refinada, apps, reveal --- */
.flow{max-width:780px;margin:30px auto 0}
.flow .core{animation:none;transform-origin:380px 150px;transform-box:view-box;animation:corePulse 6s ease-in-out infinite}
.flow .track{animation:dashFlow 1.4s linear infinite}
.flow .halo{transform-origin:380px 150px;animation:haloPulse 6s ease-in-out infinite}
.flow .ring{transform-origin:380px 150px;animation:spin 14s linear infinite}
.flow .ring2{transform-origin:380px 150px;animation:spinR 9s linear infinite;stroke-dasharray:90 300}
.flow .inA,.flow .outA{opacity:0}
.flow .inA{animation:inMove 6s cubic-bezier(.45,.05,.3,1) infinite}
.flow .inS{animation:inScale 6s cubic-bezier(.45,.05,.3,1) infinite}
.flow .pillIn{animation:pillIn 6s ease infinite}
.flow .outA{animation:outMove 6s cubic-bezier(.3,.1,.2,1) infinite}
.flow .outS{animation:outScale 6s cubic-bezier(.3,.1,.2,1) infinite}
.flow .pillOut{opacity:0;animation:pillOut 6s ease infinite}
.flow .badge{opacity:0;transform-origin:51px -40px;animation:badgePop 6s cubic-bezier(.2,1.4,.4,1) infinite}
.flow .spark circle{opacity:0;transform-origin:380px 150px;animation:sparkOut 6s ease-out infinite}
.flow .spark circle:nth-child(1){--a:-60deg}.flow .spark circle:nth-child(2){--a:-15deg}.flow .spark circle:nth-child(3){--a:25deg}
.flow .spark circle:nth-child(4){--a:70deg}.flow .spark circle:nth-child(5){--a:130deg}.flow .spark circle:nth-child(6){--a:200deg}
@keyframes dashFlow{to{stroke-dashoffset:-22}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes inMove{0%{transform:translate(110px,150px);opacity:0}8%{opacity:1}34%{transform:translate(290px,150px);opacity:1}44%{transform:translate(372px,150px);opacity:.9}48%,100%{transform:translate(380px,150px);opacity:0}}
@keyframes inScale{0%{transform:scale(.8)}12%{transform:scale(1)}30%{transform:scale(1)}44%{transform:scale(.3)}48%,100%{transform:scale(.1)}}
@keyframes pillIn{0%{opacity:0;transform:translateY(8px)}10%,24%{opacity:1;transform:none}32%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes outMove{0%,48%{transform:translate(380px,150px);opacity:0}54%{opacity:1}82%{transform:translate(640px,150px);opacity:1}94%{transform:translate(652px,150px);opacity:1}100%{transform:translate(664px,150px);opacity:0}}
@keyframes outScale{0%,48%{transform:scale(.15)}56%{transform:scale(.55)}80%,100%{transform:scale(1)}}
@keyframes pillOut{0%,74%{opacity:0;transform:translateY(8px)}82%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes badgePop{0%,80%{opacity:0;transform:scale(.4)}86%{opacity:1;transform:scale(1.12)}90%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes corePulse{0%,36%,60%,100%{transform:scale(1)}46%{transform:scale(1.1)}}
@keyframes haloPulse{0%,36%,60%,100%{opacity:.7;transform:scale(1)}46%{opacity:1;transform:scale(1.18)}}
@keyframes sparkOut{0%,46%{opacity:0;transform:rotate(var(--a)) translateX(54px) scale(.6)}50%{opacity:1}64%,100%{opacity:0;transform:rotate(var(--a)) translateX(120px) scale(.2)}}
@media (prefers-reduced-motion:reduce){.flow .track,.flow .core,.flow .halo,.flow .ring,.flow .ring2,.flow .spark circle,.flow .badge{animation:none}.flow .inA{animation:none;opacity:1;transform:translate(110px,150px)}.flow .inS{animation:none}.flow .pillIn{animation:none;opacity:1}.flow .outA{animation:none;opacity:1;transform:translate(650px,150px)}.flow .outS{animation:none}.flow .pillOut,.flow .badge{opacity:1;animation:none}}
/* apps tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:14px 10px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tile{position:relative;display:block;width:46px;height:46px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.18)}
.tile svg{position:absolute;inset:0;width:100%;height:100%}
.tile text{font:800 17px -apple-system,system-ui,sans-serif;fill:#fff;letter-spacing:-.02em}
.tile img{position:absolute;inset:0;width:100%;height:100%;border-radius:12px}
.t-d{background:linear-gradient(145deg,#6a8bff,#3d52d6)}.t-v{background:linear-gradient(145deg,#a07bff,#5a3fd6)}
.t-f{background:linear-gradient(145deg,#2cc7d6,#1676b8)}.t-c{background:linear-gradient(145deg,#4fa3ff,#2a5fd0)}
.t-p{background:linear-gradient(145deg,#7ee6ef,#3b8fd6)}
.app .nm{font-size:11.5px;line-height:1.2;color:#c6d0e6;font-weight:600}
.appgroup ul,.appgroup li{display:none}
/* hover glow en «Hecho para...» */
.grid .card{transition:border-color .35s,box-shadow .45s,background .35s}
.grid .card:hover{border-color:rgba(95,182,255,.5);background:linear-gradient(160deg,#1b2540,#171e2e);box-shadow:0 0 0 1px rgba(95,182,255,.18),0 0 28px rgba(61,139,255,.28),0 0 70px rgba(124,108,255,.16)}
/* reveal fade + blur up escalonado */
.js .rv{opacity:0;translate:0 26px;filter:blur(12px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms);will-change:opacity,translate,filter}
.js .rv.in{opacity:1;translate:0 0;filter:blur(0)}
.js .rv.done{will-change:auto;filter:none;transition:transform .3s,border-color .35s,box-shadow .45s,background .35s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none;filter:none;transition:none}}
.tiles{grid-template-columns:repeat(2,1fr)}@media (max-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
/* --- v8: iconos de apps propios del usuario --- */
.tile{background:none!important;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.tile svg{width:100%;height:100%;display:block;border-radius:inherit}
.appgroup,.app{min-width:0}.app .nm{overflow-wrap:anywhere}@media (max-width:760px){.tiles{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.appgrid{grid-template-columns:1fr}}
/* --- v9: el ícono de la app es el convertidor --- */
.hero .flow{max-width:760px;margin:0 auto 6px}
.flow .core{transform-origin:380px 100px;animation:corePulse 6s ease-in-out infinite;filter:drop-shadow(0 14px 30px rgba(61,139,255,.35))}
.flow .halo{transform-origin:380px 100px;animation:haloPulse 6s ease-in-out infinite}
.flow .spark circle{transform-origin:380px 100px}
@keyframes inMove{0%{transform:translate(110px,100px);opacity:0}8%{opacity:1}34%{transform:translate(285px,100px);opacity:1}46%{transform:translate(372px,100px);opacity:.95}50%,100%{transform:translate(380px,100px);opacity:0}}
@keyframes outMove{0%,48%{transform:translate(380px,100px);opacity:0}52%{opacity:1}82%{transform:translate(640px,100px);opacity:1}94%{transform:translate(652px,100px);opacity:1}100%{transform:translate(664px,100px);opacity:0}}
@keyframes corePulse{0%,38%,62%,100%{transform:scale(1)}46%{transform:scale(1.06)}50%{transform:scale(1.03)}}
@keyframes inScale{0%{transform:scale(.8)}12%{transform:scale(1)}30%{transform:scale(1)}46%{transform:scale(.6)}50%,100%{transform:scale(.45)}}
@keyframes outScale{0%,48%{transform:scale(.45)}60%{transform:scale(.62)}80%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.flow .core,.flow .halo{animation:none}.flow .inA{transform:translate(110px,100px)}.flow .outA{transform:translate(650px,100px)}}
/* --- v10 --- */
.hero .flow{margin-bottom:80px}
@media (max-width:760px){.hero .flow{margin-bottom:44px}}
/* --- v11: two lanes, new file enters while the previous one exits --- */
.flow .inA,.flow .inS,.flow .pillIn,.flow .outA,.flow .outS,.flow .pillOut,.flow .badge{animation-duration:5s}
.flow .lane2,.flow .lane2 *{animation-delay:-2.5s}
.flow .core{animation:corePulse 2.5s ease-in-out -1.25s infinite}
.flow .halo{animation:haloPulse 2.5s ease-in-out -1.25s infinite}
.flow .spark circle{animation-duration:2.5s;animation-delay:-1.25s}
@media (prefers-reduced-motion:reduce){.flow .lane2{display:none}.flow .core,.flow .halo,.flow .spark circle{animation:none}}
/* --- v12: crossing burst: more sparks, glass sheen on the icon, soft shock ring --- */
.flow .spark circle:nth-child(7){--a:-110deg}.flow .spark circle:nth-child(8){--a:-35deg}.flow .spark circle:nth-child(9){--a:0deg}
.flow .spark circle:nth-child(10){--a:48deg}.flow .spark circle:nth-child(11){--a:100deg}.flow .spark circle:nth-child(12){--a:165deg}
.flow .spark circle{animation-name:sparkBig}
@keyframes sparkBig{0%,44%{opacity:0;transform:rotate(var(--a)) translateX(50px) scale(.6)}50%{opacity:1}74%,100%{opacity:0;transform:rotate(var(--a)) translateX(175px) scale(.15)}}
.flow .shock{opacity:0;transform-origin:380px 100px;animation:shock 2.5s ease-out -1.25s infinite}
@keyframes shock{0%,44%{opacity:0;transform:scale(.9)}50%{opacity:.55}80%,100%{opacity:0;transform:scale(1.9)}}
.flow .sheen{transform:translateX(-80px) skewX(-18deg);opacity:0;animation:sheen 2.5s ease-in-out -1.25s infinite}
@keyframes sheen{0%,42%{opacity:0;transform:translateX(-60px) skewX(-18deg)}46%{opacity:1}60%{opacity:1}64%,100%{opacity:0;transform:translateX(150px) skewX(-18deg)}}
.flow .glint{opacity:0;transform-origin:380px 100px;animation:glint 2.5s ease-out -1.25s infinite}
@keyframes glint{0%,44%{opacity:0;transform:scale(.6) rotate(0)}52%{opacity:1;transform:scale(1.1) rotate(20deg)}70%,100%{opacity:0;transform:scale(.8) rotate(40deg)}}
.flow .core{animation:corePulse 2.5s ease-in-out -1.25s infinite;filter:drop-shadow(0 14px 30px rgba(61,139,255,.35))}
@media (prefers-reduced-motion:reduce){.flow .shock,.flow .sheen,.flow .glint{animation:none;opacity:0}}
/* --- v13: duo columns follow image ratios (894x712 vs 1052x626) so both cards share one height --- */
@media (min-width:761px){.duo{grid-template-columns:1.2556fr 1.68fr}}
/* --- v14: mobile — title, text, then image; all copy left-aligned --- */
@media (max-width:760px){
h2,h2.c,.lead,.note,.fine,.card .fine,footer,footer.site,.app,.kpi,.stats div,.eyebrow,.kpis,.fgrid,.fbar,.fbrand{text-align:left}
.lead,.note{margin-left:0;margin-right:0}
.eyebrow{justify-content:flex-start;margin-left:0}
.app{align-items:flex-start}
.fbar{align-items:flex-start}
.row,.row.flip{display:flex;flex-direction:column}
.row .txt,.row.flip .txt{order:1}
.row>:not(.txt),.row.flip>:not(.txt){order:2}
}
/* hero intro (title, text, badge, soon line) stays centered at every width */
@media (max-width:760px){.hero>h1,.hero>.sub,.hero>.soon,.hero>.badge{text-align:center}.hero>.sub{margin-left:auto;margin-right:auto}.hero>.badge{display:flex;width:max-content;margin-left:auto;margin-right:auto}}
/* --- v15: KPI cards, stats and footer legal line are centered at every width --- */
.kpi,.kpi>span,.stats div,.stats span,.fbar,.fbar span,.fbar{text-align:center}
.kpi>span{display:block}
.fbar{justify-content:center;flex-wrap:wrap;gap:6px 18px}
@media (max-width:760px){h2,h2.c,.lead,.note,.fine,.card .fine,footer,footer.site,.app,.kpi,.stats div,.eyebrow,.kpis,.fgrid,.fbar,.fbrand{text-align:left}.kpi,.kpi>span,.stats div,.stats span,.fbar,.fbar span{text-align:center}.fbar{justify-content:center}}
/* --- v16: hero intro paragraph fits two lines on desktop (ES and EN) --- */
.hero .sub{max-width:900px;font-size:19px;text-wrap:balance}
/* --- v17: taller viewBox so the glow is never clipped (iOS); margins cancel the extra 60+60 units --- */
.hero .flow{--fw:min(760px,100vw - 36px);margin-top:calc(var(--fw) * -.0789);margin-bottom:calc(80px - var(--fw) * .0789)}
@media (max-width:760px){.hero .flow{margin-bottom:calc(44px - var(--fw) * .0789)}}
/* --- v18: support / privacy pages share the landing look --- */
.doc{padding-top:20px;padding-bottom:56px}
.doc-card{max-width:780px;margin:0 auto;padding:36px 40px;border-radius:24px;background:linear-gradient(160deg,#18213a,#121a2c);border-color:rgba(95,140,255,.22);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.doc-card h1{font-size:clamp(28px,4.6vw,40px);line-height:1.12;margin:0 0 14px;letter-spacing:-.02em;text-align:left;background:linear-gradient(100deg,#fff,#9fd3ff 70%,#b8adff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.doc-card h2{text-align:left;font-size:21px;margin:30px 0 8px;color:var(--tx)}
.doc-card p{color:var(--tx2);margin:0 0 12px;font-size:16.5px}
.doc-card b{color:var(--tx)}
.doc-card a{color:#7fb6ff;text-decoration:none;border-bottom:1px solid rgba(127,182,255,.35)}.doc-card a:hover{color:#bcd9ff}
.doc-card small{color:#6b7794;font-size:13px}
@media (max-width:760px){.doc{padding-top:8px}.doc-card{padding:24px 20px;border-radius:18px}}
