/* Avatar Vivo · sitio. Layout: columna centrada de 1200px, héroe en dos columnas con un tótem ilustrado a la derecha */
:root{--tinta:#16182E;--vivo:#FF5A3C;--vivo-d:#E8462A;--senal:#16B8A6;--niebla:#F2F3F7;--coral:#FFE4DD;--gris:#5B5E78;--linea:#DADCE6;--blanco:#fff;
--disp:'Outfit',system-ui,sans-serif;--text:'Figtree',system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,5vw,62px);line-height:1.04;font-weight:800}
h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;font-weight:700;max-width:820px}
h3{font-size:21px;font-weight:700}
p{margin:0}
.kick{font:600 13px var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--vivo-d);display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--vivo);box-shadow:0 0 0 0 rgba(255,90,60,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,90,60,0)}100%{box-shadow:0 0 0 0 rgba(255,90,60,0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--vivo);color:#fff;text-decoration:none;font:600 16px var(--text);border-radius:999px;padding:12px 22px;transition:transform .15s,background .15s;border:2px solid var(--vivo)}
.btn:hover{background:var(--vivo-d);border-color:var(--vivo-d);transform:translateY(-1px)}.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--senal);outline-offset:3px}
.btn.big{padding:16px 28px;font-size:17px}.btn.sm{padding:9px 18px;font-size:15px}
.btn.ghost{background:transparent;color:var(--tinta);border-color:var(--linea)}.btn.ghost:hover{border-color:var(--tinta);background:transparent}

/* cabecera */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.topin{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:block;width:168px;flex:none}.brand svg{display:block;width:100%;height:auto}
.tl{display:flex;gap:24px;margin-left:auto}.tl a,.sect summary{text-decoration:none;font:500 15px var(--text);color:var(--gris);cursor:pointer}.tl a:hover,.sect summary:hover{color:var(--tinta)}
.sect{position:relative}.sect summary{list-style:none}.sect summary::-webkit-details-marker{display:none}.sect summary:after{content:" ▾"}
.menu{position:absolute;top:40px;left:-16px;background:#fff;border:1px solid var(--linea);border-radius:16px;box-shadow:0 20px 40px rgba(22,24,46,.12);padding:10px;display:grid;min-width:250px}
.menu a{text-decoration:none;padding:10px 14px;border-radius:10px;font-size:15px}.menu a:hover,.menu a[aria-current]{background:var(--niebla)}

/* héroe */
.hero{background:linear-gradient(180deg,#fff 0%,var(--niebla) 100%);border-bottom:1px solid var(--linea)}
.heroin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-top:64px;padding-bottom:72px}
.ht{display:flex;flex-direction:column;gap:22px;min-width:0}.sub{font-size:19px;color:var(--gris);max-width:600px}
.hcta{display:flex;gap:12px;flex-wrap:wrap}
.proof{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:32px;flex-wrap:wrap}.proof li{display:flex;flex-direction:column;color:var(--gris);font-size:14px}.proof b{font:800 30px var(--disp);color:var(--tinta)}
.crumb{font-size:14px;color:var(--gris)}.crumb a{text-decoration:none}

/* tótem ilustrado */
.totem{margin:0;display:flex;flex-direction:column;align-items:center;justify-self:center;width:100%;max-width:360px}
.screen{width:100%;aspect-ratio:9/15;background:var(--tinta);border:12px solid #2A2D48;border-radius:28px;position:relative;overflow:hidden;color:#fff;box-shadow:0 40px 60px -20px rgba(22,24,46,.45)}
.base{width:46%;height:46px;background:#2A2D48;border-radius:0 0 14px 14px}
.sbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#A9ACC6}
.live{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:5px 12px;font-weight:600;color:#fff}.live i{width:9px;height:9px;border-radius:50%;background:var(--vivo);animation:pulse 2s infinite}
.face{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0}.face svg{width:46%}
.wave{display:flex;gap:5px;align-items:center;height:34px}.wave b{display:block;width:6px;height:30%;border-radius:4px;background:var(--vivo);animation:wv 1.1s ease-in-out infinite}
.wave b:nth-child(2n){animation-delay:.15s}.wave b:nth-child(3n){animation-delay:.3s}.wave b:nth-child(4n){animation-delay:.45s}
@keyframes wv{50%{height:100%}}
.chat{display:flex;flex-direction:column;gap:10px;min-height:150px;justify-content:flex-end;transition:opacity .3s;font-size:15px;line-height:1.4}
.chat p{padding:10px 14px;border-radius:16px;max-width:90%}.chat .me{align-self:flex-end;background:rgba(255,255,255,.12);border-bottom-right-radius:4px;transition:opacity .3s}.chat .av{background:#fff;color:var(--tinta);border-bottom-left-radius:4px;font-weight:500}
.cc{font-size:11px;color:#A9ACC6;text-align:center;letter-spacing:.08em;text-transform:uppercase}

/* bloques */
.block{padding-top:96px;padding-bottom:16px;display:flex;flex-direction:column;gap:18px}
.band{background:var(--niebla);margin-top:0;padding:88px 0}.band .wrap{display:flex;flex-direction:column;gap:18px}
.steps{list-style:none;counter-reset:s;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps li{counter-increment:s;background:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:8px}
.steps li:before{content:counter(s);font:800 15px/34px var(--disp);width:34px;height:34px;text-align:center;border-radius:50%;background:var(--coral);color:var(--vivo-d);margin-bottom:6px}
.steps b{font:700 22px var(--disp)}.steps p{color:var(--gris)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px;margin-top:22px}
.ft{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--tinta);padding-top:18px}.ft p{color:var(--gris)}
.sects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px}
.sc{display:flex;flex-direction:column;gap:10px;text-decoration:none;border:1px solid var(--linea);border-radius:20px;padding:24px;transition:border-color .15s,transform .15s;background:#fff}
.sc.other{background:var(--tinta);border-color:var(--tinta)}.sc.other b{color:#fff}.sc.other span{color:#C9CBE0}.sc.other i{color:#FF8F78}
.sc:hover{border-color:var(--vivo);transform:translateY(-2px)}.sc b{font:700 20px var(--disp)}.sc span{color:var(--gris);font-size:15px;line-height:1.45;flex:1}.sc i{font-style:normal;font-weight:600;color:var(--vivo-d);font-size:14px}
.dark{background:var(--tinta);color:#fff;margin-top:96px;padding:96px 0}.dark .kick{color:#FF8F78}.dark p{color:#C9CBE0}
.pauta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}.pauta>div:first-child{display:flex;flex-direction:column;gap:20px}.note{font-size:15px;color:#9FA2BD!important}
.adlist{display:grid;gap:12px}.adlist div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 22px;display:flex;flex-direction:column;gap:4px}.adlist b{font:700 19px var(--disp);color:#fff}.adlist span{color:#A9ACC6;font-size:15px}
.fmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}.fm{background:var(--niebla);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:8px}.fm p{color:var(--gris)}
.faq{display:flex;flex-direction:column;margin-top:14px;max-width:880px}
.faq details{border-bottom:1px solid var(--linea)}.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:600 19px var(--text);position:relative}.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:16px;font:400 26px var(--disp);color:var(--vivo)}.faq details[open] summary:after{content:"–"}.faq details p{padding:0 0 22px;color:var(--gris);max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chips a{text-decoration:none;border:1px solid var(--linea);border-radius:999px;padding:9px 18px;font-size:15px}.chips a:hover{border-color:var(--tinta)}
.cta{background:var(--coral);margin-top:96px;padding:80px 0}.ctain{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}.ctain>div:first-child{display:flex;flex-direction:column;gap:16px}.ctain p{color:#4A4D66}
.ctabox{background:#fff;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:18px}.contact{display:flex;flex-direction:column;gap:4px;font-size:15px;word-break:break-word}
.foot{background:var(--tinta);color:#C9CBE0;padding:64px 0 28px}.footin{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);gap:48px}
.fb{display:flex;flex-direction:column;gap:18px}.fb svg{width:190px;height:auto}.fb p{font-size:15px;max-width:340px}
.fl{display:flex;flex-direction:column;gap:9px;font-size:15px;min-width:0;overflow-wrap:anywhere}.fl a{text-decoration:none}.fl a:hover{color:#fff}.fl .kick{color:#FF8F78;margin-bottom:6px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #2E3150;margin-top:48px;padding-top:22px;font-size:13px;color:#8B8EA8}
.nf{min-height:50vh;padding-bottom:80px}
@media (max-width:980px){.tl{display:none}.sects{grid-template-columns:repeat(2,minmax(0,1fr))}.heroin,.pauta,.ctain{grid-template-columns:minmax(0,1fr)}.totem{max-width:320px}.footin{grid-template-columns:minmax(0,1fr)}.sect{margin-left:auto}}
@media (max-width:680px){.steps,.feats,.fmts{grid-template-columns:minmax(0,1fr)}.sects{grid-template-columns:minmax(0,1fr)}.topin{gap:14px}.brand{width:138px}.btn.sm{display:none}.heroin{padding-top:40px}.block{padding-top:72px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.avimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.screen .sbar{position:absolute;top:14px;left:14px;right:14px;z-index:2}.screen .lang{background:rgba(22,24,46,.6);border-radius:99px;padding:5px 10px;color:#fff}
.talk{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:60px 14px 16px;background:linear-gradient(180deg,rgba(22,24,46,0) 0%,rgba(22,24,46,.85) 38%,rgba(22,24,46,.96) 100%);display:flex;flex-direction:column;gap:12px}
.talk .wave{height:26px;align-self:center}.talk .chat{min-height:0}.chat .av b{display:block;font:600 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--vivo-d);margin-bottom:2px}
.lead{font-size:19px;color:var(--gris);max-width:760px}
.avs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:22px}
.avc{margin:0;display:flex;flex-direction:column;gap:12px}.avc img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:18px;background:var(--niebla)}
.avc figcaption{display:flex;flex-direction:column;gap:4px}.avc b{font:700 21px var(--disp)}.avc span{font-size:15px;color:var(--gris)}
.avc i{font-style:normal;align-self:flex-start;font:600 12px var(--text);border-radius:99px;padding:4px 10px;margin-top:4px}.avc i.p{background:var(--niebla)}.avc i.c{background:var(--coral);color:var(--vivo-d)}
.fmtimg{width:100%;height:auto;border-radius:20px;margin-top:22px;border:1px solid var(--linea)}
@media (max-width:980px){.avs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.avs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.screen .live{background:rgba(22,24,46,.65);border-color:rgba(255,255,255,.2)}
#avatares{padding-bottom:96px}
/* demo Chispa */
.demo{background:var(--tinta);color:#fff;padding:88px 0}
.demoin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.cstage{position:relative;aspect-ratio:2/3;max-width:440px;width:100%;justify-self:center;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#A7BBD5,#D2DCED)}
.cfig{position:absolute;inset:0;animation:bob 4.5s ease-in-out infinite}
.cfig img,.cfig svg{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes bob{50%{transform:translateY(-8px)}}
.ce{transform-box:fill-box;transform-origin:center;transition:transform .25s}
.cf{transform:translate(var(--lx,0),var(--ly,0));transition:transform .6s cubic-bezier(.3,.7,.3,1)}
#cSmile,#cMouth{transition:opacity .08s}
#cAnt{opacity:.35;transition:opacity .3s}
[data-state=listen] #cAnt{opacity:1;animation:antp 1s ease-in-out infinite}[data-state=talk] #cAnt{opacity:.75}
@keyframes antp{50%{opacity:.4}}
[data-state=listen] .ce{transform:scale(1.15)}[data-state=think] .ce{transform:scaleY(.55)}
#cDots circle{animation:dt 1s ease-in-out infinite}#cDots circle:nth-child(2){animation-delay:.15s}#cDots circle:nth-child(3){animation-delay:.3s}
@keyframes dt{50%{transform:translateY(-10px)}}
#cDots circle{transform-box:fill-box}
.cstart{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--vivo);color:#fff;border:0;border-radius:99px;padding:14px 24px;font:600 16px var(--text);cursor:pointer;box-shadow:0 12px 30px rgba(22,24,46,.35)}
.cstart i{width:10px;height:10px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
.on .cstart{display:none}
.csub{position:absolute;left:14px;right:14px;bottom:14px;margin:0;background:rgba(22,24,46,.88);color:rgba(255,255,255,.55);border-radius:14px;padding:12px 16px;font:500 16px/1.4 var(--text);max-height:40%;overflow:auto}
.csub span.on{color:#fff}
.cpanel{display:flex;flex-direction:column;gap:18px;min-width:0}.cpanel .kick{color:#FF8F78}.cpanel h2{color:#fff}.cpanel .sub{color:#C9CBE0}
.clog{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow:auto}.clog:empty{display:none}
.clog p{margin:0;padding:10px 14px;border-radius:14px;max-width:88%;font-size:15px;line-height:1.45}
.clog .cu{align-self:flex-end;background:rgba(255,255,255,.12);border-bottom-right-radius:4px}.clog .cb{background:#fff;color:var(--tinta);border-bottom-left-radius:4px}
.csug{display:flex;flex-wrap:wrap;gap:8px}.csug button{background:transparent;color:#fff;border:1px solid #3A3D5C;border-radius:99px;padding:9px 16px;font:500 14px var(--text);cursor:pointer}.csug button:hover{border-color:var(--vivo)}
.cform{display:flex;gap:10px;align-items:center;background:#fff;border-radius:99px;padding:6px}
.cform input{flex:1;min-width:0;border:0;outline:0;font:400 16px var(--text);color:var(--tinta);background:transparent;padding:10px 6px}
.cmic{display:flex;align-items:center;gap:8px;background:var(--vivo);color:#fff;border:0;border-radius:99px;padding:10px 18px;font:600 15px var(--text);cursor:pointer}.cmic svg{width:20px;height:20px}
.rec .cmic{background:var(--senal);animation:pulse 1.4s infinite}
.csend{width:44px;height:44px;border-radius:50%;border:0;background:var(--tinta);color:#fff;font-size:20px;cursor:pointer;flex:none}
.busy .cform,.busy .csug{opacity:.55;pointer-events:none}
.cnote{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:#8B8EA8}.clang{background:transparent;border:1px solid #3A3D5C;color:#fff;border-radius:99px;padding:6px 14px;font:600 13px var(--text);cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:980px){.demoin{grid-template-columns:minmax(0,1fr)}.cstage{max-width:340px}}
@media (max-width:520px){.cmic span{display:none}.cmic{padding:10px 12px}}

/* formas de inversión */
.invh{display:flex;flex-direction:column;gap:18px;max-width:820px}
.invs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.inv{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px}
.inv b{font:700 21px var(--disp);color:#fff}.inv span{color:#B9BCD4;font-size:15px;line-height:1.5}
.inv.hl{border-color:rgba(255,90,60,.5)}.inv ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}.inv li{font:600 12px var(--text);color:#FFB3A3;background:rgba(255,90,60,.12);border-radius:99px;padding:4px 10px}
.fin .note2{font-size:15px;color:var(--gris)}
@media (max-width:980px){.invs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.invs{grid-template-columns:minmax(0,1fr)}}