/* ══ BITS · estilos de los componentes portados de React Bits (ver bits.js) ══
   Mismos tokens que la home: --tinta, --papel, --azul (sobre claro),
   --lima (sobre oscuro). Nada de cian: no tiene rol en el manual. */

.b-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.b-pal{display:inline-block;white-space:nowrap}

/* SplitText */
.b-split .b-let{display:inline-block;opacity:0;transform:translateY(.45em) rotate(5deg);transform-origin:0 100%;
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.b-split.b-ya .b-let{opacity:1;transform:none}

/* BlurText */
.b-blur .b-pal{opacity:0;filter:blur(10px);transform:translateY(-.5em)}
.b-blur.b-ya .b-pal{animation:b-blur .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes b-blur{0%{opacity:0;filter:blur(10px);transform:translateY(-.5em)}50%{opacity:.5;filter:blur(5px);transform:translateY(.08em)}100%{opacity:1;filter:none;transform:none}}

/* RotatingText */
.b-rota{display:inline-flex;vertical-align:bottom}
.b-rota-v{position:relative;display:inline-block;overflow:hidden;height:1.22em;vertical-align:bottom;white-space:nowrap;
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.b-rota-pal{position:absolute;left:0;top:0;white-space:nowrap;line-height:1.22}
.b-rota-let{display:inline-block;transform:translateY(110%);transition:transform .55s cubic-bezier(.2,.9,.25,1.15)}
.b-rota-pal.b-dentro .b-rota-let{transform:none}
.b-rota-pal.b-sale .b-rota-let{transform:translateY(-125%);transition-timing-function:cubic-bezier(.5,0,.75,0)}

/* TextType */
.b-cursor{display:inline-block;width:.55ch;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:b-cursor .9s steps(1) infinite}
.b-escribe .b-cursor{animation:none}
@keyframes b-cursor{50%{opacity:0}}

/* Counter */
.b-rod-vis{display:inline-flex;align-items:flex-start;line-height:1}
.b-rod-col{display:inline-block;height:1em;overflow:hidden;line-height:1}
.b-rod-tira{display:flex;flex-direction:column;transition:transform 1s cubic-bezier(.2,.9,.25,1.08)}
.b-rod-tira span{display:block;height:1em;line-height:1}
.b-rod-sep{display:inline-block}

/* TrueFocus */
.b-tf{position:relative}
.b-tf-fr{display:inline-block;transition:filter .5s ease,opacity .5s ease}
.b-tf-vivo .b-tf-fr{filter:blur(var(--b-nublado,4px));opacity:.42}
.b-tf-vivo .b-tf-fr.b-activo{filter:none;opacity:1}
.b-tf-marco{position:absolute;left:0;top:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1)}
.b-tf-marco i{position:absolute;width:18px;height:18px;border:3px solid var(--azul);filter:drop-shadow(0 0 6px rgba(43,60,255,.45))}
.b-tf-marco i:nth-child(1){left:-12px;top:-10px;border-right:0;border-bottom:0}
.b-tf-marco i:nth-child(2){right:-12px;top:-10px;border-left:0;border-bottom:0}
.b-tf-marco i:nth-child(3){left:-12px;bottom:-10px;border-right:0;border-top:0}
.b-tf-marco i:nth-child(4){right:-12px;bottom:-10px;border-left:0;border-top:0}

/* CircularText */
.b-circ{position:relative;width:var(--b-circ-d,150px);height:var(--b-circ-d,150px);border-radius:50%;display:grid;place-items:center;cursor:default}
.b-circ-anillo{position:absolute;inset:0}
.b-circ-anillo span{position:absolute;left:50%;top:0;width:1.2ch;margin-left:-.6ch;height:50%;transform-origin:50% 100%;text-align:center;
  font:700 11.5px/1 var(--m);letter-spacing:0;text-transform:uppercase}

/* CurvedLoop */
.b-curva{display:block;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.b-curva:active{cursor:grabbing}
.b-curva svg{display:block;width:100%;height:auto;overflow:visible}
.b-curva-txt{font:900 76px var(--f);letter-spacing:-.01em;fill:var(--azul)}

/* ShinyText */
.b-brillo{background:linear-gradient(115deg,var(--b-brillo-base,rgba(244,243,240,.9)) 40%,var(--b-brillo-luz,#c9f73c) 50%,var(--b-brillo-base,rgba(244,243,240,.9)) 60%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:b-brillo 4.5s linear infinite}
@keyframes b-brillo{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ScrollVelocity (la tira lima) */
.b-vel .pista{animation:none!important;will-change:transform}

/* ClickSpark */
.b-chispas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* StarBorder: un anillo con dos estrellas que lo recorren */
.b-con-estrella{position:relative;isolation:isolate}
.b-estrella{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;z-index:2;
  background:rgba(var(--b-estrella-rgb,201,247,60),.28);
  -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)}
.b-estrella.b-fuera{inset:-4px;padding:2px;border-radius:calc(var(--r,4px) + 4px)}
.b-estrella i{position:absolute;width:300%;height:60%;border-radius:50%;opacity:1;
  background:radial-gradient(circle,rgb(var(--b-estrella-rgb,201,247,60)),transparent 12%)}
.b-estrella .ab{bottom:-14px;right:-250%;animation:b-est-ab var(--b-vel,6s) linear infinite alternate}
.b-estrella .ar{top:-14px;left:-250%;animation:b-est-ar var(--b-vel,6s) linear infinite alternate}
@keyframes b-est-ab{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}
@keyframes b-est-ar{0%{transform:translateX(0);opacity:1}100%{transform:translateX(100%);opacity:0}}

/* GlareHover */
.b-con-reflejo{position:relative;overflow:hidden}
.b-reflejo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(-45deg,transparent 60%,rgba(255,255,255,.2) 70%,transparent 100%) no-repeat;
  background-size:250% 250%;background-position:-100% -100%;transition:background-position .8s ease}
.b-con-reflejo:hover .b-reflejo{background-position:100% 100%}

/* LogoLoop */
.b-bucle{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.b-bucle-pista{display:flex;width:max-content;will-change:transform}

/* GooeyNav (el truco clásico: blur + contraste + lighten) */
.b-goo{position:relative}
.b-goo [role="tab"]{position:relative;z-index:1}
.b-goo-ef{position:absolute;pointer-events:none;display:grid;place-items:center;opacity:1;z-index:2}
.b-goo-texto{z-index:3;color:transparent;transition:color .3s ease;font:inherit;white-space:nowrap}
.b-goo-texto.b-activo{color:var(--tinta)}
.b-goo-filtro{filter:blur(7px) contrast(100) blur(0);mix-blend-mode:lighten}
.b-goo-filtro::before{content:"";position:absolute;inset:-75px;z-index:-2;background:#000}
.b-goo-filtro::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:#fff;transform:scale(0);opacity:0}
.b-goo-filtro.b-activo::after{animation:b-goo-pill .3s ease both}
@keyframes b-goo-pill{to{transform:scale(1);opacity:1}}
.b-goo-gota,.b-goo-gota i{display:block;opacity:0;width:20px;height:20px;border-radius:50%;transform-origin:center}
.b-goo-gota{position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);animation:b-goo-gota var(--time) ease 1 -350ms}
.b-goo-gota i{background:#fff;opacity:1;animation:b-goo-punto var(--time) ease 1 -350ms}
@keyframes b-goo-gota{
  0%{transform:rotate(0deg) translate(var(--start-x),var(--start-y));opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{transform:rotate(calc(var(--rotate)*.5)) translate(calc(var(--end-x)*1.2),calc(var(--end-y)*1.2));opacity:1;animation-timing-function:ease}
  85%{transform:rotate(calc(var(--rotate)*.66)) translate(var(--end-x),var(--end-y));opacity:1}
  100%{transform:rotate(calc(var(--rotate)*1.2)) translate(calc(var(--end-x)*.5),calc(var(--end-y)*.5));opacity:1}}
@keyframes b-goo-punto{
  0%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  25%{transform:scale(calc(var(--scale)*.25))}38%{opacity:1}
  65%{transform:scale(var(--scale));opacity:1;animation-timing-function:ease}
  85%{transform:scale(var(--scale));opacity:1}100%{transform:scale(0);opacity:0}}

/* MagicBento */
.b-card{position:relative;isolation:isolate;overflow:hidden;transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--mb-rx,0deg)) rotateY(var(--mb-ry,0deg))}
.b-card .b-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(var(--mb-r,280px) circle at var(--mb-x,50%) var(--mb-y,50%),rgba(201,247,60,calc(.13 * var(--mb-hot,0))),transparent 70%)}
.b-card canvas.b-est{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.b-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:
    radial-gradient(calc(var(--mb-r,280px) * .75) circle at var(--mb-x,50%) var(--mb-y,50%),rgba(201,247,60,calc(.95 * var(--mb-near,0))),rgba(201,247,60,calc(.35 * var(--mb-near,0))) 40%,transparent 75%),
    radial-gradient(circle at var(--mb-wx,0) var(--mb-wy,0),transparent calc(var(--mb-wr,0px) - 90px),rgba(201,247,60,calc(.85 * var(--mb-wa,0))) calc(var(--mb-wr,0px) - 6px),transparent var(--mb-wr,0px));
  -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)}

/* AnimatedList */
.b-lista-ul{list-style:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.b-lista-it{display:grid;grid-template-rows:0fr;opacity:0;transform:scale(.7);transform-origin:50% 0;
  transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease .1s,transform .45s cubic-bezier(.2,.9,.25,1.1) .1s}
.b-lista-it.b-ya{grid-template-rows:1fr;opacity:1;transform:none}
.b-lista-it.b-sale{grid-template-rows:0fr;opacity:0;transition-delay:0s}
.b-lista-in{overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline}

/* SpotlightCard */
.b-spot{position:relative;isolation:isolate;overflow:hidden}
.b-spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),var(--b-spot-c,rgba(43,60,255,.16)),transparent 70%)}
.b-spot:hover::before{opacity:1}

/* TiltedCard */
.b-tilt{will-change:transform;transform-style:preserve-3d}
.b-tilt-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;padding:6px 9px;border-radius:3px;background:var(--tinta);color:var(--papel);
  font:700 11px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(14px,14px);transition:opacity .2s ease}
.b-tilt-tip.b-ver{opacity:1}

/* ChromaGrid */
.b-croma [data-croma]::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-backdrop-filter:grayscale(1) brightness(.9);backdrop-filter:grayscale(1) brightness(.9);
  -webkit-mask-image:radial-gradient(circle var(--croma-r,300px) at calc(var(--mx,0px) - var(--ox,0px)) calc(var(--my,0px) - var(--oy,0px)),transparent 0%,transparent 15%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.78) 66%,#000 100%);
  mask-image:radial-gradient(circle var(--croma-r,300px) at calc(var(--mx,0px) - var(--ox,0px)) calc(var(--my,0px) - var(--oy,0px)),transparent 0%,transparent 15%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.78) 66%,#000 100%);
  opacity:var(--pow,0)}

/* FlowingMenu */
.b-flow-it{position:relative;display:block;overflow:hidden;text-decoration:none}
.b-flow-mq{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform:translateY(101%)}
.b-flow-mq-in{height:100%;transform:translateY(-101%)}
.b-flow-pista{display:flex;align-items:center;height:100%;width:max-content;animation:b-flow 16s linear infinite}
@keyframes b-flow{to{transform:translateX(-50%)}}

/* BounceCards */
.b-rebote{position:relative}
.b-carta{position:absolute;left:50%;top:50%;width:var(--b-carta-w,220px);aspect-ratio:16/10;margin-left:calc(var(--b-carta-w,220px) / -2);margin-top:calc(var(--b-carta-w,220px) * -.3125);
  border-radius:6px;overflow:hidden;border:3px solid var(--papel);box-shadow:0 10px 28px rgba(0,0,0,.45);background:#222;text-decoration:none;
  transform:translateX(var(--tx,0)) rotate(var(--rot,0deg)) scale(calc(var(--s,1) * var(--b-in,0)));
  transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.b-carta.b-ya{--b-in:1}
.b-carta img{width:100%;height:100%;object-fit:cover;object-position:top}
.b-carta-et{position:absolute;right:6px;top:6px;font:700 9.5px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;padding:5px 6px;border-radius:2px}
.b-carta-et.vivo{background:var(--tinta);color:var(--lima)}
.b-carta-et.demo{background:var(--papel);color:var(--tinta)}
.b-carta-nom{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;text-align:right;font:800 13px/1.1 var(--f);color:var(--papel);background:linear-gradient(transparent,rgba(11,11,13,.85))}

@media (prefers-reduced-motion: reduce){
  .b-split .b-let,.b-blur .b-pal{opacity:1;transform:none;filter:none;transition:none;animation:none}
  .b-blur.b-ya .b-pal{animation:none}
  .b-rota-let,.b-rod-tira,.b-carta,.b-lista-it,.b-reflejo,.b-tf-marco{transition:none}
  .b-brillo,.b-cursor,.b-estrella i,.b-flow-pista,.b-goo-filtro.b-activo::after{animation:none}
  .b-goo-filtro::after{transform:none;opacity:1}
  .b-brillo{color:inherit;background:none}
}