/* =====================================================================
   welcome-support-float.css — botón flotante de Soporte (.ds-support-float).

   Reemplaza al float "Soporte <ícono WhatsApp>" del template viejo de
   /welcome/, reestilizado con el DS y SIEMPRE visible (el viejo aparecía
   tras 30% de scroll con un listener de jQuery; aquí no hay JS).

   Coordinación con la barra CTA fija móvil (sticky-cta.css): en móvil el
   float sube por encima de la barra (~64px + safe area) para no tapar el
   CTA de compra, que siempre gana en jerarquía.

   Nuevo componente welcome-*: no toca CSS compartidos del home.
   ===================================================================== */
.ds-support-float {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 30; /* por encima de .sticky-cta (z-index 20) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--p-verde);
  color: var(--paper-pure);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); /* eleva el float del contenido */
  text-decoration: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Oculto mientras el hero está a la vista, para no tapar el titular ni el CTA
   primario (que siempre gana en jerarquía). Lo activa el JS con
   IntersectionObserver; si no hay JS, el float queda visible (fallback seguro). */
.ds-support-float--hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  pointer-events: none;
}
.ds-support-float:hover,
.ds-support-float:focus {
  background-color: var(--p-verde-hover);
  color: var(--paper-pure);
}
.ds-support-float svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  /* Encima de la barra sticky: 5rem = el espacio que body.has-sticky-cta
     ya reserva para la barra (sticky-cta.css). */
  .ds-support-float {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}