/* Brinco vibe: la misma sensación de jose.brincoagency.com en todo el sitio.
   Cursor con anillo (orejas de conejo sobre links), barra de progreso con conejo, saltos y chispas al hacer clic,
   grano, intro breve, conejo que se asoma, sonido opcional. Todo se apaga con prefers-reduced-motion. */
:root{--bv-volt:#C8FF3F;--bv-navy:#0B0F19;--bv-ease:cubic-bezier(.16,1,.3,1)}

/* Grano */
.bv-grain{position:fixed;inset:-50%;z-index:2147480000;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  animation:bvGrain 1.2s steps(6) infinite}
@keyframes bvGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Canvas de chispas y saltos */
.bv-fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147480100;pointer-events:none}

/* Barra de progreso con conejo */
.bv-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--bv-volt);z-index:2147480200;box-shadow:0 0 12px var(--bv-volt);pointer-events:none}
.bv-runner{position:fixed;top:3px;left:0;width:22px;height:18px;z-index:2147480200;pointer-events:none;transform:translateX(-30px);opacity:0;transition:opacity .3s}
.bv-runner.on{opacity:1}
.bv-runner svg{width:100%;height:100%;display:block;animation:bvHop .5s var(--bv-ease) infinite}
@keyframes bvHop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-4px) rotate(-8deg)}}

/* Cursor: punto + anillo; sobre algo clicable al anillo le salen orejas */
.bv-cur,.bv-ring{position:fixed;left:0;top:0;z-index:2147480300;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.bv-cur{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--bv-volt);mix-blend-mode:difference}
.bv-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(200,255,63,.6);transition:opacity .3s,width .35s var(--bv-ease),height .35s var(--bv-ease),margin .35s var(--bv-ease),background .35s}
.bv-ring::before,.bv-ring::after{content:'';position:absolute;bottom:78%;width:11px;height:26px;border:1px solid var(--bv-volt);border-radius:999px 999px 6px 6px;background:rgba(200,255,63,.12);transform-origin:50% 100%;opacity:0;transition:opacity .3s,transform .45s var(--bv-ease)}
.bv-ring::before{left:22%;transform:rotate(-14deg) scaleY(.2)}
.bv-ring::after{right:22%;transform:rotate(14deg) scaleY(.2)}
.bv-ring.hot{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(200,255,63,.08);border-color:var(--bv-volt)}
.bv-ring.hot::before,.bv-ring.hot::after{opacity:1}
.bv-ring.hot::before{transform:rotate(-14deg) scaleY(1)}
.bv-ring.hot::after{transform:rotate(14deg) scaleY(1)}
.bv-ring.down{width:30px;height:30px;margin:-15px 0 0 -15px}
body.bv-ready .bv-cur,body.bv-ready .bv-ring{opacity:1}

/* Intro breve (una vez por sesión) */
.bv-intro{position:fixed;inset:0;z-index:2147480400;display:grid;place-items:center;background:var(--bv-navy);clip-path:circle(150% at 50% 50%);transition:clip-path .9s var(--bv-ease),visibility 0s .9s}
.bv-intro.open{clip-path:circle(0% at var(--gx,50%) var(--gy,50%));visibility:hidden}
.bv-intro-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.bv-intro svg{width:min(240px,60vw);height:auto;overflow:visible}
.bv-intro .bun{transform-origin:50% 100%;animation:bvBig .8s var(--bv-ease) infinite}
.bv-intro .arc{fill:none;stroke:var(--bv-volt);stroke-width:3;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:bvArc .8s var(--bv-ease) infinite}
.bv-intro p{margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bv-volt)}
@keyframes bvBig{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(0,-26px) rotate(-8deg)}60%{transform:translate(0,0) rotate(2deg)}}
@keyframes bvArc{0%{stroke-dashoffset:320}60%,100%{stroke-dashoffset:0}}

/* Conejo que se asoma cuando la página se queda quieta */
.bv-peek{position:fixed;left:18px;bottom:-120px;z-index:2147480000;width:96px;cursor:pointer;transition:bottom .6s var(--bv-ease);background:none;border:0;padding:0}
.bv-peek.show{bottom:-26px}
.bv-peek svg{width:100%;height:auto;display:block}
.bv-peek .ear{transform-box:fill-box;transform-origin:50% 100%;animation:bvWiggle 2.4s ease-in-out infinite}
.bv-peek .eye{transform-box:fill-box;transform-origin:50% 50%;animation:bvBlink 3.2s infinite}
@keyframes bvBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bv-peek .ear.r{animation-delay:.3s}
@keyframes bvWiggle{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-10deg)}92%{transform:rotate(6deg)}}
.bv-bubble{position:absolute;left:84px;bottom:70px;white-space:nowrap;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--bv-volt);color:var(--bv-navy);padding:8px 12px;opacity:0;transform:translateY(6px);transition:opacity .3s .3s,transform .3s .3s}
.bv-peek.show .bv-bubble{opacity:1;transform:none}

/* Lluvia de conejos (easter egg: escribe «brinco») */
.bv-rain{position:fixed;top:-60px;z-index:2147480100;width:34px;pointer-events:none;animation:bvFall linear forwards}
@keyframes bvFall{to{transform:translateY(calc(100vh + 120px)) rotate(var(--r,180deg))}}

/* Botón de sonido */
.bv-snd{position:fixed;left:18px;bottom:18px;z-index:2147480050;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(200,255,63,.45);background:rgba(11,15,25,.86);color:#F4F7F8;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,background .3s}
.bv-snd:hover{border-color:var(--bv-volt)}
.bv-snd .bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.bv-snd .bars i{width:2px;height:3px;background:var(--bv-volt);transition:height .2s}
.bv-snd.on .bars i{animation:bvEq .9s ease-in-out infinite}
.bv-snd.on .bars i:nth-child(2){animation-delay:.15s}.bv-snd.on .bars i:nth-child(3){animation-delay:.3s}
@keyframes bvEq{0%,100%{height:3px}50%{height:12px}}
.bv-snd:focus-visible,.bv-peek:focus-visible{outline:2px solid var(--bv-volt);outline-offset:3px}
body.bv-peeking .bv-snd{opacity:0;pointer-events:none}

/* Botones magnéticos */
.bk-btn,.bk-nav-cta,.bk-hero-cta,.bp-cta{transition:transform .35s var(--bv-ease)}

/* Toast */
.bv-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,calc(100% + 90px));z-index:2147480300;padding:13px 20px;border-radius:999px;background:var(--bv-volt);color:var(--bv-navy);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:transform .5s var(--bv-ease);pointer-events:none}
.bv-toast.show{transform:translate(-50%,0)}

@media (max-width:767px){.bv-snd{width:40px;height:40px;padding:0;justify-content:center;left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.bv-snd .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bv-peek{width:78px}.bv-bubble{left:68px;bottom:56px}}
@media (prefers-reduced-motion:reduce){.bv-grain,.bv-runner svg,.bv-intro .bun,.bv-intro .arc,.bv-peek .ear,.bv-snd.on .bars i{animation:none}.bv-intro{display:none}}
@media print{.bv-grain,.bv-fx,.bv-progress,.bv-runner,.bv-cur,.bv-ring,.bv-intro,.bv-peek,.bv-snd,.bv-toast{display:none!important}}