/* ===================================================================
   Advancing — capa de movimiento (GSAP + CSS puro).
   Progressive enhancement: si GSAP no carga, nada queda oculto.
   Respeta prefers-reduced-motion en todos los efectos.
   =================================================================== */

.gsap-reveal{opacity:0;transform:translateY(24px);will-change:opacity,transform}

/* fondo tipo "aurora" a pantalla completa en el hero, en los colores de marca */
.hero,.hero3{position:relative}
.hero::before,.hero3::before{
  content:"";position:absolute;inset:-15%;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(38% 55% at 18% 22%, rgba(108,240,184,.50) 0%, rgba(108,240,184,0) 70%),
    radial-gradient(44% 60% at 82% 12%, rgba(27,23,136,.38) 0%, rgba(27,23,136,0) 70%),
    radial-gradient(50% 65% at 58% 88%, rgba(108,240,184,.36) 0%, rgba(108,240,184,0) 70%),
    radial-gradient(36% 50% at 8% 92%, rgba(3,0,93,.24) 0%, rgba(3,0,93,0) 70%);
  filter:blur(56px) saturate(1.1);
  animation:advAurora 20s ease-in-out infinite alternate;
  will-change:transform;
}
.hero .wrap,.hero3 .wrap{position:relative;z-index:1}

@keyframes advAurora{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  50%{transform:translate(-3%,4%) scale(1.12) rotate(3deg)}
  100%{transform:translate(2%,-3%) scale(1.06) rotate(-2deg)}
}

/* botones: resalte que sigue al cursor */
.btn-azul,.btn-borde{position:relative;overflow:hidden;isolation:isolate}
.btn-azul::before,.btn-borde::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 60%);
  transition:opacity .25s ease;
}
.btn-azul:hover::before,.btn-borde:hover::before{opacity:1}

/* tarjetas: pequeño realce al pasar el ratón */
.card,.tile,.tarjeta-blanca{transition:transform .25s ease, box-shadow .25s ease}
.card:hover,.tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(3,0,93,.10)}

@media (prefers-reduced-motion: reduce){
  .gsap-reveal{opacity:1!important;transform:none!important}
  .hero::before,.hero3::before{animation:none!important;opacity:.6}
  .card,.tile,.tarjeta-blanca{transition:none}
}