/* Movimiento en todas las secciones (pareja de assets/js/vivo.js). Sin JS o con
   "reducir movimiento" nada de esto aplica: la clase .vivo la pone vivo.js. */
.vivo .vivo-sec{position:relative}
.vivo .vivo-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--brand,#0B6B55);transform-origin:0 50%;transform:scaleX(var(--vl,0));pointer-events:none;z-index:1}
.vivo .vivo-card{will-change:transform}
.vivo .vivo-ilu{animation:vivo-flota 8s ease-in-out infinite alternate;animation-delay:var(--d,0s);animation-play-state:paused}
.vivo .vivo-on .vivo-ilu,.vivo .vivo-on.vivo-ilu{animation-play-state:running}
@keyframes vivo-flota{from{translate:0 -6px}to{translate:0 6px}}
.vivo .vivo-tic li svg{animation:vivo-tic 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .32s);animation-play-state:paused;transform-origin:50% 50%}
.vivo .vivo-on .vivo-tic li svg{animation-play-state:running}
@keyframes vivo-tic{0%,62%,100%{scale:1}72%{scale:1.28}82%{scale:.94}}
.vivo-lectura{position:fixed;left:0;right:0;top:0;height:3px;background:var(--brand,#0B6B55);transform-origin:0 50%;transform:scaleX(0);z-index:1000;pointer-events:none}
@media (prefers-reduced-motion:reduce){.vivo-ilu,.vivo-tic li svg{animation:none!important}.vivo-sec::before{display:none}.vivo-lectura{display:none}}
.vivo main,.vivo body>section{overflow-x:clip}
.vivo .vivo-subraya{background-image:linear-gradient(var(--signal,#BDEED3),var(--signal,#BDEED3));background-repeat:no-repeat;background-position:0 88%;background-size:0% .18em;animation:vivo-subraya 7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes vivo-subraya{0%{background-size:0% .18em;background-position:0 88%}40%,60%{background-size:100% .18em;background-position:0 88%}61%{background-position:100% 88%}100%{background-size:0% .18em;background-position:100% 88%}}
@media (prefers-reduced-motion:reduce){.vivo-subraya{animation:none!important;background-size:0!important}}
.vivo .vw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.vivo .vi{display:inline-block}

/* Luz que sigue al cursor + elevación en tarjetas (puntero fino). */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
.vivo .vivo-luz{position:relative;transition:translate .25s ease,box-shadow .25s ease}
.vivo .vivo-luz::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(189,238,211,.45),transparent 70%)}
.vivo .vivo-luz:hover{translate:0 -3px;box-shadow:0 10px 26px rgba(11,107,85,.12)}
.vivo .vivo-luz:hover::after{opacity:1}
.vivo .vivo-eleva{transition:translate .25s ease,box-shadow .25s ease}
.vivo .vivo-eleva:hover{translate:0 -3px;box-shadow:0 10px 26px rgba(11,107,85,.18)}
.nlinks{position:relative}
.nlinks a{position:relative;z-index:1}
.nl-ind{position:absolute;z-index:0;left:0;top:50%;height:36px;width:var(--iw,0);margin-top:-18px;padding:0 12px;box-sizing:content-box;border-radius:8px;background:var(--brand-soft,#E3F3EA);opacity:0;pointer-events:none;translate:calc(var(--ix,0px) - 12px) 0;transition:translate .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),opacity .15s ease}
.nl-ind.on{opacity:1}
}
/* Cifras que suben: ancho estable mientras cuentan. */
.vivo .fig-n{font-variant-numeric:tabular-nums}
/* FAQ y plegables: la respuesta se despliega con altura animada (Chrome/Edge/Safari recientes; el resto abre sin animación). */
@media (prefers-reduced-motion:no-preference){
:root{interpolate-size:allow-keywords}
.fold::details-content{block-size:0;overflow:clip;transition:block-size .3s ease,content-visibility .3s ease allow-discrete}
.fold[open]::details-content{block-size:auto}
}

/* Expediente: línea que se dibuja y puntos que se encienden (valores --tl y --n los pone vivo.js). */
.vivo .vivo-linea{position:relative;border-left-color:transparent}
.vivo .vivo-linea::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--brand,#0B6B55);transform-origin:50% 0;transform:scaleY(var(--tl,0))}
.vivo .vivo-linea li{position:relative}
.vivo .vivo-linea li::before{content:"";position:absolute;left:-24px;top:.9em;width:9px;height:9px;border-radius:50%;background:var(--brand,#0B6B55);box-shadow:0 0 0 3px var(--paper,#fff);transform:scale(var(--n,0))}
/* CTAs: brillo que cruza y jalón magnético. */
.vivo .vivo-brillo{position:relative;overflow:hidden;translate:var(--mgx,0) var(--mgy,0);transition:translate .18s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
.vivo .vivo-brillo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg) translateX(0);animation:vivo-brillo 6s ease-in-out infinite;animation-play-state:paused}
.vivo .vivo-brillo.vivo-on::after{animation-play-state:running}
@keyframes vivo-brillo{0%,70%{translate:0 0}100%{translate:420% 0}}
@media (prefers-reduced-motion:reduce){.vivo-brillo::after{display:none}}

/* Marquee de integraciones: bordes que se desvanecen y pausa al pasar el mouse. */
.i-integ{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@media (hover:hover){.i-integ:hover .pista{animation-play-state:paused}}
/* Plan fundador: borde con luz que gira lento (no mueve ni toca cifras). */
@property --vang{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
.vivo #fundador .cupo{position:relative}
.vivo #fundador .cupo::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--vang),transparent 0 70%,#BDEED3 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:vivo-gira 7s linear infinite}
}
@keyframes vivo-gira{to{--vang:360deg}}
/* Anticipo pagado: la palomita se dibuja. */
@media (prefers-reduced-motion:no-preference){
.vivo [data-confeti] circle,.vivo [data-confeti] path{stroke-dasharray:60;stroke-dashoffset:60;animation:vivo-traza .7s ease forwards}
.vivo [data-confeti] path{animation-delay:.45s}
}
@keyframes vivo-traza{to{stroke-dashoffset:0}}