/* 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;padding:18px;display:flex;flex-direction:column;gap:14px;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}}