/* ==========================================================================
   components/whatsapp.css — Botón flotante de WhatsApp
   Componente marcado: whatsapp (todas las páginas, último elemento del <body>).
   Enlace fijo a wa.me, sin JavaScript propio:
   - Esquina inferior derecha, respetando la zona segura del iPhone. "Volver
     arriba" se apila encima, centrado sobre él (components/volver-arriba.css);
     el pie reserva el alto de ambos (--reserva-flotantes, layout.css).
   - Por debajo del encabezado (z-index 50): el panel del menú móvil lo cubre y
     menu.js lo vuelve inerte mientras está abierto.
   - Entre páginas no se mueve: queda bajo la pantalla de carga (.preloader,
     z-index 1000) y, cuando esta se retira (.is-oculto), entra con fundido y
     escala leve (animación, no transición: .js y .is-oculto pueden llegar en el
     mismo cuadro y una transición no arrancaría). Si la pantalla se retira sola
     (salvaguarda CSS sin .is-oculto), el botón aparece a los --espera-preloader.
     Sin JS (.js ausente) se ve directo.
   ========================================================================== */
.whatsapp {
  position: fixed;
  right: calc(var(--pad-x) + var(--safe-right));
  bottom: calc(var(--space-5) + var(--safe-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: var(--tam-whatsapp);
  height: var(--tam-whatsapp);
  border-radius: var(--radio-circulo);
  background: var(--c-whatsapp);
  color: var(--c-blanco);
  box-shadow: var(--sombra-whatsapp);
  transition: transform var(--dur-media) var(--ease-cambio);
}
.whatsapp svg { width: var(--icono-lg); height: var(--icono-lg); }
.whatsapp:hover { background: var(--c-whatsapp-hover); transform: scale(var(--escala-hover-flotante)); }
.whatsapp:active { transform: scale(var(--escala-pulsado)); }
/* Foco de dos tonos (base.css) sin perder la sombra: el halo va delante */
.whatsapp:focus-visible { box-shadow: 0 0 0 var(--foco-separacion) var(--c-foco-halo), var(--sombra-whatsapp); }

/* Aparición: oculto mientras la pantalla de carga cubre la página */
.js .preloader:not(.is-oculto) ~ .whatsapp {
  opacity: 0;
  transform: scale(var(--escala-aparicion-flotante));
  animation: whatsapp-salvaguarda var(--dur-casi-cero) linear var(--espera-preloader) forwards;
}
@keyframes whatsapp-salvaguarda { to { opacity: 1; transform: none; } }
/* backwards y no both: al terminar no fija transform y el hover sigue funcionando */
.preloader.is-oculto ~ .whatsapp {
  animation: whatsapp-entrar var(--dur-lenta) var(--ease-entrada) var(--dur-rapida) backwards;
}
@keyframes whatsapp-entrar {
  from { opacity: 0; transform: scale(var(--escala-aparicion-flotante)); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp:hover { transform: none; }
}
@media print {
  .whatsapp { display: none; }
}