/* UTN.LABS · lo vivo que comparten el sitio y la academia (lo mueve vivo.js).
   Mejora progresiva: sin JS se ve todo; con prefers-reduced-motion, quieto.
   Para sumarle a algo el brillo que sigue al mouse: clase `vivo-brillo`; la inclinación: `vivo-inclina`;
   el revelado al scroll: `vivo-revelar`. Usa las variables de color de cada hoja (--suave, --grad…). */

/* Botones: un brillo los cruza al pasar el mouse. */
.boton::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .1) 54%, transparent 70%);
  translate: -110% 0; transition: translate .8s var(--suave);
}
.boton:hover::after, .boton:focus-visible::after { translate: 110% 0; }

/* La telaraña viva del hero (el canvas lo pone vivo.js dentro de .hero__fondo). */
.telarana { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero--viva .hero__fondo::after { opacity: .45; }

/* Tarjetas: brillo que sigue al mouse (--mx/--my) e inclinación (--rx/--ry). */
:is(.tarjeta-startup, .tarjeta-nota, .tarjeta-galeria, .tarjeta-form, .destacado, .bloque, .hito__tarjeta, .proximo, .merecido, .prensa, .vivo-brillo) { position: relative; }
:is(.tarjeta-startup, .tarjeta-nota, .tarjeta-galeria, .tarjeta-form, .destacado, .bloque, .hito__tarjeta, .proximo, .merecido, .prensa, .vivo-brillo)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 224, 227, .1), rgba(168, 101, 224, .07) 35%, transparent 65%);
  opacity: 0; transition: opacity .35s;
}
:is(.tarjeta-startup, .tarjeta-nota, .tarjeta-galeria, .tarjeta-form, .destacado, .bloque, .hito__tarjeta, .proximo, .merecido, .prensa, .vivo-brillo):hover::after { opacity: 1; }
:is(.tarjeta-startup, .tarjeta-galeria, .tarjeta-nota, .vivo-inclina) { transition: border-color .25s, background .25s, transform .45s var(--suave), box-shadow .45s var(--suave); }
:is(.tarjeta-startup, .tarjeta-galeria, .tarjeta-nota, .vivo-inclina):hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(168, 101, 224, .55), 0 0 0 1px rgba(255, 224, 227, .06);
}

/* Borde que gira (las hojas eligen qué lo usa). */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes girar { to { --giro: 360deg; } }

/* Revelado al scroll (vivo.js pone y saca estas clases). */
.revelar { opacity: 0; translate: 0 28px; }
.revelar.revelado {
  opacity: 1; translate: 0 0;
  transition: opacity .8s var(--suave), translate .8s var(--suave);
  transition-delay: calc(var(--i, 0) * 75ms);
}

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; translate: none; }
  .boton::after { display: none; }
}