/*
 * 19-premium-interactions.css - Interacciones premium: entrada animada del hero, flecha de scroll y spotlight de color por tarjeta.
 * Origen: index.html, <style> #7 (desde la linea 1). Contenido identico al original.
 */
/* ===== PREMIUM HERO MOTION ===== */
.hero{isolation:isolate;}
.hero-bg{
  transform:translate3d(0,0,0) scale(1.08);
  transform-origin:center center;
  will-change:transform;
}
.hero-copy .hero-logo,
.hero-copy .eyebrow,
.hero-copy .hero-title,
.hero-copy .hero-sub{
  opacity:0;
  transform:translateY(16px);
  animation:heroFadeUp .8s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-copy .hero-logo{animation-delay:0s}
.hero-copy .eyebrow{animation-delay:.12s}
.hero-copy .hero-title{animation-delay:.22s}
.hero-copy .hero-sub{animation-delay:.32s}
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
.scroll-indicator{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
}
.scroll-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  font-size:25px;
  line-height:1;
  color:var(--gold2);
  animation:premiumBounce 1.8s ease-in-out infinite;
  text-shadow:0 0 18px rgba(247,215,123,.22);
}
@keyframes premiumBounce{
  0%,100%{transform:translateY(0);opacity:.72}
  50%{transform:translateY(6px);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg{transform:scale(1.02)!important}
  .hero-copy .hero-logo,.hero-copy .eyebrow,.hero-copy .hero-title,.hero-copy .hero-sub{opacity:1;transform:none;animation:none}
  .scroll-arrow{animation:none}
}

/* ===== ¿POR QUÉ ASISTIR? — CURSOR SPOTLIGHT / GLOW ===== */
#razones .info-card{
  --x:50%;
  --y:50%;
  --xp:50%;
  --yp:50%;
  --glow-rgb:255,180,80;
  isolation:isolate!important;
  overflow:hidden!important;
}
#razones .info-card::before{
  display:block!important;
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  padding:1px!important;
  background:radial-gradient(180px circle at var(--x) var(--y),rgba(var(--glow-rgb),.95),transparent 68%)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  opacity:0!important;
  transition:opacity .25s ease!important;
}
#razones .info-card::after{
  display:block!important;
  content:"";
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:radial-gradient(300px circle at var(--x) var(--y),rgba(var(--glow-rgb),.16),transparent 66%)!important;
  opacity:0!important;
  transition:opacity .25s ease!important;
  mix-blend-mode:screen!important;
}
#razones .info-card.is-pointer-active::before,
#razones .info-card.is-pointer-active::after,
#razones .info-card:hover::before,
#razones .info-card:hover::after{opacity:1!important}
#razones .info-photo-wrap,
#razones .info-content{z-index:2!important}
#razones .info-card:nth-child(1){--glow-rgb:255,140,60}
#razones .info-card:nth-child(2){--glow-rgb:175,90,255}
#razones .info-card:nth-child(3){--glow-rgb:70,150,255}
#razones .info-card:nth-child(4){--glow-rgb:230,195,70}

/* Keep the requested clean image treatment: no image shadows. */
#razones .info-photo,
#razones .info-photo-wrap,
#razones .info-card:hover .info-photo{box-shadow:none!important;filter:none!important}