/* Categorías del inicio: imagen nítida; al pasar el mouse se desenfoca, las partículas arman el equipo
   y el nombre queda nítido. Solo transform/opacity/filter para que las transiciones sean fluidas. */
.cat-tarjeta{--suave:cubic-bezier(.22,.8,.3,1);position:relative;display:block;height:300px;border-radius:16px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.08);background:#070a12;box-shadow:0 10px 30px rgba(0,0,0,.35);color:#f5f7fa;text-decoration:none;
  transition:border-color .6s var(--suave),box-shadow .6s var(--suave);}
.cat-tarjeta .cat-img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:center;
  filter:blur(0) brightness(1);transform:scale(1);will-change:filter,transform;
  transition:filter .7s var(--suave),transform 1.1s var(--suave);}
.cat-tarjeta .cat-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,20,0) 42%,rgba(5,11,20,.88) 100%);}
.cat-tarjeta .cat-velo::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .7s var(--suave);
  background:radial-gradient(60% 45% at 50% 40%,rgba(0,217,255,.14),transparent 70%),linear-gradient(180deg,rgba(5,11,20,.35),rgba(5,11,20,.75));}
.cat-tarjeta canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.cat-tarjeta .cat-txt{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;}
.cat-tarjeta h3{font-size:1.2rem;line-height:1.15;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.6);transform-origin:left bottom;
  transform:translateY(var(--baja,46px));transition:transform .6s var(--suave),text-shadow .6s var(--suave);will-change:transform;}
.cat-tarjeta .cat-txt p{font-size:.82rem;color:rgba(245,247,250,.88);margin:6px 0 0;max-width:none;opacity:0;transform:translateY(var(--baja,46px));
  transition:opacity .45s var(--suave),transform .6s var(--suave);}
.cat-tarjeta .cat-ir{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:700;color:#00d9ff;opacity:0;transform:translateY(var(--baja,46px));
  transition:opacity .45s var(--suave) .05s,transform .6s var(--suave) .05s;}
@media (hover:hover) and (pointer:fine){
  .cat-tarjeta:hover,.cat-tarjeta:focus-visible{border-color:rgba(0,217,255,.45);box-shadow:0 16px 44px rgba(0,217,255,.16);}
  .cat-tarjeta:hover .cat-img,.cat-tarjeta:focus-visible .cat-img{filter:blur(8px) brightness(.38) saturate(1.15);transform:scale(1.05);}
  .cat-tarjeta:hover .cat-velo::after,.cat-tarjeta:focus-visible .cat-velo::after{opacity:1;}
  .cat-tarjeta:hover h3,.cat-tarjeta:focus-visible h3{transform:translateY(0) scale(1.18);text-shadow:0 0 22px rgba(0,217,255,.5),0 2px 10px rgba(0,0,0,.6);}
  .cat-tarjeta:hover .cat-txt p,.cat-tarjeta:focus-visible .cat-txt p,.cat-tarjeta:hover .cat-ir,.cat-tarjeta:focus-visible .cat-ir{opacity:1;transform:none;}
}
.cat-tarjeta:focus-visible{outline:3px solid rgba(0,217,255,.6);outline-offset:3px;}
@media (hover:none){ .cat-tarjeta h3,.cat-tarjeta .cat-txt p,.cat-tarjeta .cat-ir{transform:none;opacity:1;} }
@media (prefers-reduced-motion: reduce){ .cat-tarjeta *{transition-duration:.01ms!important;} .cat-tarjeta canvas{display:none;} }