/* Intro animada: banner -> bolita "Inscríbete aquí" */
#ia-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 15, 50, .78);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
#ia-backdrop.ia-on { opacity: 1; pointer-events: auto; }

#ia-window {
  position: fixed;
  z-index: 2001;
  overflow: hidden;
  background: #0e379e;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: left .9s cubic-bezier(.65, 0, .25, 1), top .9s cubic-bezier(.65, 0, .25, 1),
    width .9s cubic-bezier(.65, 0, .25, 1), height .9s cubic-bezier(.65, 0, .25, 1),
    border-radius .9s cubic-bezier(.65, 0, .25, 1), box-shadow .6s ease, opacity .4s ease;
}
#ia-window.ia-on { opacity: 1; }
#ia-window video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;      /* anula la regla global video{max-width:400px} del index */
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  display: block;
}
#ia-hand { opacity: 0; transition: opacity .5s ease; }
#ia-window { box-sizing: border-box; border: 0 solid #ff5a00; }
#ia-window.ia-bubble { border-width: 4px; border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; }
#ia-window.ia-bubble #ia-banner { opacity: 0; transition: opacity .5s ease; }
#ia-window.ia-bubble #ia-hand { opacity: 1; }

/* anillo pulsante (en el propio elemento: un ::after quedaría recortado por overflow:hidden) */
#ia-window.ia-bubble.ia-ready { animation: ia-pulse 2s infinite; }
@keyframes ia-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 0, .7); }
  70% { box-shadow: 0 0 0 18px rgba(255, 90, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 0, 0); }
}

#ia-label {
  position: fixed;
  z-index: 2001;
  left: 0;
  top: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ff5a00;
  color: #fff;
  font: 900 16px/1 "Lato", sans-serif;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
#ia-label.ia-on { opacity: 1; transform: none; pointer-events: auto; }

#ia-skip {
  position: fixed;
  z-index: 2002;
  top: 16px;
  right: 16px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #0e379e;
  font: 700 14px/1 "Lato", sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
}
#ia-skip.ia-on { opacity: 1; }

@media (max-width: 575px) {
  #ia-skip { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
  #ia-label { font-size: 14px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #ia-window, #ia-backdrop, #ia-label { transition-duration: .01s; }
  #ia-window.ia-bubble.ia-ready { animation: none; }
}

/* iOS/Safari: el video no respeta el borde redondeado ni el overflow durante la animación */
#ia-window {
  isolation: isolate;
  transform: translateZ(0);
}
#ia-window video { -webkit-transform: translateZ(0); pointer-events: none; }

/* toque para reproducir si el autoplay está bloqueado */
#ia-window.ia-tap { cursor: pointer; }
#ia-window.ia-tap::before {
  content: "▶  Toca para ver";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 999px;
  background: #ff5a00;
  color: #fff;
  font: 900 16px/1 "Lato", sans-serif;
  white-space: nowrap;
}