/*
 * Botón principal. Solo hay uno porque la página pide una sola acción: escribir por WhatsApp.
 */
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-block-size: 3.25rem;
    padding: var(--space-xs) 1.375rem;
    border-radius: var(--radius-control);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-brand);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration-line: none;
    transition:
      background-color var(--duration-fast) ease,
      translate var(--duration-fast) ease;
  }

  .button:hover {
    background-color: var(--color-accent-strong);
  }

  /* Al pulsar baja un píxel: responde como una tecla. */
  .button:active {
    translate: 0 1px;
  }

  .button:focus-visible {
    border-radius: var(--radius-control);
  }

  /* Versión corta para la cabecera. */
  .button--compact {
    min-block-size: 2.75rem;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--text-ui);
  }

  /* Ocupa todo el ancho de su contenedor. */
  .button--block {
    inline-size: 100%;
  }

  .button__icon {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
}