/* ==========================================================================
   Componente: botón flotante de WhatsApp (Ajustes Concepto → Botón WhatsApp).
   Solo móvil/tablet salvo que se active "Mostrar también en escritorio".
   ========================================================================== */

@layer components {
  .whatsapp-float {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 90; /* bajo el header (100) y su menú a pantalla completa */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
    color: var(--color-bg);
    transition:
      opacity var(--duration) var(--ease-out),
      translate var(--duration) var(--ease-out),
      scale var(--duration) var(--ease-out),
      background-color var(--duration-fast) ease;

    &:hover {
      background-color: var(--color-accent-hover);
    }

    &:focus-visible {
      outline: 2px solid var(--color-text);
      outline-offset: 3px;
    }

    @media (min-width: 810px) {
      right: max(24px, env(safe-area-inset-right));
      bottom: max(24px, env(safe-area-inset-bottom));
    }

    @media (min-width: 1440px) {
      &:not(.whatsapp-float--desktop) {
        display: none;
      }
    }
  }

  .whatsapp-float__icon {
    width: 28px;
    height: 28px;
  }

  /* Texto visible solo para lectores de pantalla; con puntero fino aparece como etiqueta */
  .whatsapp-float__label {
    position: absolute;
    right: calc(100% + 12px);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background-color: var(--color-text);
    color: var(--color-bg);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    clip-path: inset(50%);
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .whatsapp-float:hover .whatsapp-float__label,
    .whatsapp-float:focus-visible .whatsapp-float__label {
      clip-path: none;
      opacity: 1;
    }
  }

  /* Con JS se muestra tras el hero y se oculta sobre contacto/footer (whatsapp-float.js) */
  .js .whatsapp-float:not(.is-visible),
  .menu-open .whatsapp-float {
    opacity: 0;
    translate: 0 16px;
    scale: 0.9;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
      transition: none;
    }
  }
}