/* ==========================================================
   Botón flotante de WhatsApp
   Aparece al salir de la portada (lo controla js/whatsapp.js)
   ========================================================== */
.wa-float {
  --wa: #25d366; /* verde oficial de WhatsApp */
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / 54% no-repeat;
  box-shadow: 0 10px 24px -8px rgba(12, 28, 38, 0.5), 0 2px 6px rgba(12, 28, 38, 0.2);
  -webkit-tap-highlight-color: transparent;

  /* Oculto por defecto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.9);
  transition:
    opacity 0.35s,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s 0.35s;
}

@media (min-width: 700px) {
  .wa-float { width: 64px; height: 64px; }
}

.wa-float.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.35s,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s;
}

/* Anillo que late 3 veces al aparecer para llamar la atención y luego se detiene */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--wa);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.wa-float.is-visible::before {
  animation: wa-pulse 2.4s ease-out 1s 3;
}
@keyframes wa-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to   { transform: scale(1.7); opacity: 0; }
}

/* Etiqueta que aparece a la izquierda (solo con mouse o con teclado) */
.wa-float::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  background: var(--ink, #0c1c26);
  color: #fff;
  font: 500 0.875rem/1 var(--font, system-ui, sans-serif);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 0.2s, transform 0.25s;
}

@media (hover: hover) {
  .wa-float.is-visible:hover { transform: scale(1.06); }
  .wa-float:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.wa-float:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

.wa-float:focus-visible {
  outline: 3px solid var(--signal, #7fd1c3);
  outline-offset: 3px;
}
.wa-float:active { transform: scale(0.95); }

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float.is-visible,
  .wa-float::after { transition: opacity 0.2s, visibility 0s; transform: none; }
  .wa-float.is-visible::before { animation: none; }
}