/* ═══════════════════════════════════════════════════════════════════════════
   Hayim School — Botón flotante de WhatsApp
   ───────────────────────────────────────────────────────────────────────────
   En hoja aparte (y no dentro de style.css) porque el botón aparece también en
   `portal.php`, que NO carga la hoja principal de 137 KB. Lo carga el propio
   includes/whatsapp.php, así que el botón siempre viene con sus estilos, se
   incluya donde se incluya, y sin duplicar una línea.
   Pesa ~2 KB: el coste de la petición extra es despreciable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tokens mínimos: en portal.php no existen los de la hoja principal. */
.hs-wa { --hs-wa-navy: #012f65; --hs-wa-pill: 999px; }

.hs-wa {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 90;                 /* bajo los modales (z-modal: 200) y el nav */
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Onda que se expande, como el aviso de un mensaje entrante. */
.hs-wa__pulso {
  position: absolute;
  right: 0; bottom: 0;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  pointer-events: none;
  animation: hsWaOnda 2.6s ease-out infinite;
}
@keyframes hsWaOnda {
  0%        { transform: scale(1);   opacity: .5; }
  60%, 100% { transform: scale(1.9); opacity: 0;  }
}

.hs-wa__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2ee36e, #14a94b);
  color: #fff;
  box-shadow: 0 8px 22px rgba(20,169,75,.42), 0 2px 6px rgba(0,0,0,.16);
  /* La "vibración": un ciclo corto de sacudidas cada 5 s. El resto del tiempo
     está quieto, que es lo que hace que la sacudida se note. */
  animation: hsWaVibra 5s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}
@keyframes hsWaVibra {
  0%, 62%, 100%                 { transform: rotate(0) scale(1); }
  64%, 68%, 72%, 76%            { transform: rotate(-11deg) scale(1.06); }
  66%, 70%, 74%, 78%            { transform: rotate(11deg)  scale(1.06); }
  80%                           { transform: rotate(0) scale(1.03); }
}
.hs-wa:hover .hs-wa__icono,
.hs-wa:focus-visible .hs-wa__icono {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(20,169,75,.55), 0 2px 8px rgba(0,0,0,.2);
  animation-play-state: paused;   /* si ya te fijaste en él, deja de moverse */
}

/* Globito de invitación. En escritorio aparece al pasar el cursor; en móvil no
   se muestra, porque ahí no hay hover y solo taparía contenido. */
.hs-wa__globo {
  order: -1;                       /* a la izquierda del círculo */
  white-space: nowrap;
  padding: 9px 15px;
  background: #fff;
  color: var(--hs-wa-navy);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--hs-wa-pill);
  box-shadow: 0 6px 20px rgba(1,47,101,.16);
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.hs-wa:hover .hs-wa__globo,
.hs-wa:focus-visible .hs-wa__globo { opacity: 1; transform: translateX(0); }

.hs-wa:focus-visible { outline: 3px solid var(--hs-wa-navy); outline-offset: 4px; border-radius: var(--hs-wa-pill); }

@media (max-width: 640px) {
  .hs-wa__globo { display: none; }
  .hs-wa__icono, .hs-wa__pulso { width: 54px; height: 54px; }
}

/* Al imprimir no pinta nada un botón flotante. */
@media print { .hs-wa { display: none; } }

/* Quien pidió menos movimiento ve el botón quieto: sigue estando, sin vibrar
   ni pulsar. El bloque general de prefers-reduced-motion ya recorta las
   duraciones, pero aquí conviene apagar las animaciones del todo — una
   sacudida de 1 ms se ve como un parpadeo raro. */
@media (prefers-reduced-motion: reduce) {
  .hs-wa__icono { animation: none !important; }
  .hs-wa__pulso { animation: none !important; opacity: 0; }
}