/* ==========================================================================
   ERPiA · vivo.css — el diseño vivo de la portada, compartido por toda la web
   · Fondo reactivo: puntos + resplandor que siguen al puntero (o al scroll en táctil)
   · CTA fijo «Ver ERPiA por dentro» que aparece al dejar atrás el hero
   · Glifos animados (vivo-glyphs.svg) en lugar de los emoji de .feature-icon
   · Pulsación en botones y aparición suave de las tarjetas
   Solo transform/opacity; respeta prefers-reduced-motion. Lo activa /assets/vivo.js.
   La portada (home.html) lleva su propia versión inline y NO carga este fichero.
   ========================================================================== */

/* ---------- fondo reactivo ---------- */
#fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#fondo .f-dots{position:absolute;inset:-2px;background-image:radial-gradient(circle,rgba(255,255,255,.17) 1px,transparent 1.7px);background-size:26px 26px;-webkit-mask-image:radial-gradient(460px 460px at var(--mx,50%) var(--my,34%),#000 0%,rgba(0,0,0,.5) 38%,transparent 72%);mask-image:radial-gradient(460px 460px at var(--mx,50%) var(--my,34%),#000 0%,rgba(0,0,0,.5) 38%,transparent 72%)}
#fondo .f-glow{position:absolute;left:0;top:0;width:min(1100px,150vw);height:min(1100px,150vw);border-radius:50%;background:radial-gradient(circle,rgba(254,189,22,.12) 0%,rgba(254,189,22,.045) 32%,transparent 64%);transform:translate3d(calc(50vw - 50%),calc(36vh - 50%),0);will-change:transform}

/* ---------- botones: responden al pulsar ---------- */
.btn:active,a[data-erpia-signup]:active{transform:scale(.97)}
a[data-erpia-signup]{transition:transform .16s cubic-bezier(.16,1,.3,1),background-color .2s}

/* ---------- CTA fijo ---------- */
.cta-fijo{position:fixed;left:20px;bottom:20px;z-index:9997;display:inline-flex;align-items:center;padding:13px 20px;border-radius:999px;background:var(--amber,#FEBD16);color:#111;font-family:var(--disp,'Switzer',system-ui,sans-serif);font-weight:800;font-size:15px;line-height:1;text-decoration:none;box-shadow:0 14px 34px -12px rgba(0,0,0,.65);overflow:hidden;isolation:isolate;opacity:0;visibility:hidden;transform:translate3d(var(--cfx,0px),calc(var(--cfy,0px) + 18px),0) scale(.96);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease,visibility 0s linear .35s}
.cta-fijo.on{opacity:1;visibility:visible;transform:translate3d(var(--cfx,0px),var(--cfy,0px),0) scale(1);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease,visibility 0s}
.cta-fijo.on:active{transform:translate3d(var(--cfx,0px),var(--cfy,0px),0) scale(.97);transition-duration:.12s}
.cta-fijo .cf-in{display:inline-flex;align-items:center;gap:10px}
.cta-fijo.on .cf-in{animation:cfBreathe 3.4s ease-in-out 2s infinite}
@keyframes cfBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.cta-fijo .cf-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none;z-index:-1}
.cta-fijo.on .cf-shine{animation:cfShine 4.2s cubic-bezier(.16,1,.3,1) 1.2s 3}
@keyframes cfShine{0%{transform:translateX(-120%)}22%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.cta-fijo .cf-arrow{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.cta-fijo:hover .cf-arrow{transform:translateX(4px)}}
@media(max-width:600px){.cta-fijo{left:14px;bottom:14px;padding:12px 17px;font-size:14px;max-width:calc(100vw - 14px - 182px)}.cta-fijo .cf-arrow{display:none}.cta-fijo .cf-txt{white-space:nowrap}}

/* ---------- glifos vivos en .feature-icon ---------- */
.feature-icon.fi{perspective:420px}
.feature-icon svg.gl{width:32px;height:32px;display:block;overflow:visible;will-change:transform;transform-style:preserve-3d}
.gl .st{stroke:rgba(255,255,255,.62);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl .am{stroke:var(--amber,#FEBD16);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gl .fl{fill:rgba(255,255,255,.06)}
.gl .fa{fill:var(--amber,#FEBD16);stroke:none}
.gl .dt{fill:rgba(255,255,255,.55)}
.gl .ring{fill:none;stroke:var(--bg,#0B0B0C);stroke-width:1.6}
.gl .dash{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:2 4}
.gl .hid{fill:none;stroke:none}
/* estado inicial: trazos sin dibujar, piezas sin aparecer */
.gl .draw{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120)}
.gl .pop{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center}
.gl .grow{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
.gl .growx{transform:scaleX(0);transform-box:fill-box;transform-origin:left}
.gl .idle{opacity:0;transition:opacity .5s ease var(--d,0s)}
.gl .pulse,.gl .slide,.gl .rise,.gl .drop,.gl .out{opacity:0}
.fi.in .gl .draw{animation:glDraw .9s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
.fi.in .gl .pop{animation:glPop .5s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
.fi.in .gl .grow{animation:glGrow .8s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
.fi.in .gl .growx{animation:glGrowX .8s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
.fi.in .gl .idle{opacity:1}
@keyframes glDraw{to{stroke-dashoffset:0}}
@keyframes glPop{to{opacity:1;transform:scale(1)}}
@keyframes glGrow{to{transform:scaleY(1)}}
@keyframes glGrowX{to{transform:scaleX(1)}}
/* bucles ociosos: van en un <g> envolvente, arrancan tras la entrada, solo transform/opacity */
.gl .blink,.gl .float,.gl .wave,.gl .swing,.gl .sway,.gl .spin,.gl .pulse,.gl .beat,.gl .slide,.gl .rise,.gl .drop,.gl .out,.gl .tick{transform-box:fill-box;transform-origin:center}
.gl .wave{transform-origin:bottom}
.gl .swing{transform-origin:50% 0%}
.gl .beat{transform-origin:center}
.fi.in .gl .blink{animation:glBlink 3s ease-in-out calc(var(--d,0s) + 1.1s) infinite}
.fi.in .gl .float{animation:glFloat 3.2s ease-in-out calc(var(--d,0s) + 1s) infinite}
.fi.in .gl .wave{animation:glWave 2.6s ease-in-out calc(var(--d,0s) + 1.1s) infinite}
.fi.in .gl .swing{animation:glSwing 2.8s ease-in-out calc(var(--d,0s) + 1s) infinite}
.fi.in .gl .sway{animation:glSway 3.2s ease-in-out calc(var(--d,0s) + 1s) infinite}
.fi.in .gl .spin{animation:glSpin 9s linear calc(var(--d,0s) + .8s) infinite}
.fi.in .gl .pulse{animation:glPulse 2.4s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + 1.2s) infinite}
.fi.in .gl .beat{animation:glBeat 2.2s ease-in-out calc(var(--d,0s) + 1.2s) infinite}
.fi.in .gl .slide{animation:glSlide 2.8s ease-in-out calc(var(--d,0s) + 1.2s) infinite}
.fi.in .gl .rise{animation:glRise 2.6s ease-in-out calc(var(--d,0s) + 1s) infinite}
.fi.in .gl .drop{animation:glDrop 2.4s ease-in calc(var(--d,0s) + 1s) infinite}
.fi.in .gl .out{animation:glOut 3.4s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + 1s) infinite}
.fi.in .gl .tick{animation:glTick 7.2s steps(1,end) calc(var(--d,0s) + 1.2s) infinite}
.fi.in .gl .march{animation:glMarch 1.2s linear calc(var(--d,0s) + .8s) infinite;stroke-dasharray:4 3}
@keyframes glBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes glFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes glWave{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1)}}
@keyframes glSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes glSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes glSpin{to{transform:rotate(360deg)}}
@keyframes glPulse{0%{opacity:.75;transform:scale(.92)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0;transform:scale(1.35)}}
@keyframes glBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes glSlide{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(18px)}}
@keyframes glRise{0%{opacity:0;transform:translateY(4px)}30%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@keyframes glDrop{0%{opacity:1;transform:translateY(0)}80%{opacity:0;transform:translateY(16px)}100%{opacity:0;transform:translateY(16px)}}
@keyframes glOut{0%{opacity:0;transform:translateY(-8px)}30%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes glTick{0%{transform:translate(0,0)}16%{transform:translate(9px,0)}33%{transform:translate(18px,0)}50%{transform:translate(0,7px)}66%{transform:translate(9px,7px)}83%{transform:translate(18px,7px)}100%{transform:translate(0,0)}}
@keyframes glMarch{to{stroke-dashoffset:-14}}

/* ---------- las tarjetas aparecen al llegar a ellas ---------- */
html.vivo .vv{opacity:0;transform:translateY(12px)}
html.vivo .vv.in{opacity:1;transform:none;transition:opacity .55s ease calc(var(--i,0) * 70ms),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 70ms)}

/* ---------- sin movimiento: todo en su sitio final ---------- */
@media(prefers-reduced-motion:reduce){
  .gl .draw{stroke-dashoffset:0}.gl .pop,.gl .grow,.gl .growx,.gl .idle{opacity:1;transform:none}.gl .pulse,.gl .slide,.gl .rise,.gl .drop{opacity:0}.gl .out{opacity:1}.gl *{animation:none!important}
  #fondo .f-glow{transform:translate3d(calc(50vw - 50%),calc(36vh - 50%),0)}
  .cta-fijo,.cta-fijo.on{transition:opacity .2s ease}.cta-fijo .cf-shine,.cta-fijo .cf-in{animation:none!important}
  html.vivo .vv{opacity:1;transform:none;transition:none}
}