/* ============================================================
   components/buttons.css
   BUTTON SYSTEM — consistente, accesible, token-driven
   Compatible con:
   - <a class="btn ..."> y <button class="btn ...">
   - Variantes: .btn--primary, .btn--secondary, .btn--ghost
   - Enlaces tipo botón: .btn-link
   ============================================================ */

:root {
  /* Permite retocar el “feel” sin tocar reglas */
  --btn-radius: var(--radius-pill);
  --btn-height: 44px;
  --btn-pad-x: 18px;

  --btn-font-size: 0.95rem;
  --btn-font-weight: 700;

  --btn-shadow: var(--shadow-sm);
  --btn-shadow-hover: var(--shadow-md);
}

/* ===== Base ===== */
.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  min-height: var(--btn-height);
  padding-inline: var(--btn-pad-x);
  padding-block: 0;

  border-radius: var(--btn-radius);
  border: 1px solid transparent;

  /* Typography */
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.2px;
  line-height: 1;

  /* Visual */
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  box-shadow: none;

  /* UX */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

/* Hover/Active “feel” */
.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Focus accesible consistente (sin depender de :focus global) */
.btn:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: 3px;
}

/* Disabled (para <button>) */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ===== Variantes ===== */

/* Primary (CTA) */
.btn--primary {
  background: var(--btn-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--btn-shadow);
}

.btn--primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: var(--btn-shadow-hover);
}

.btn--primary:active {
  background: var(--btn-primary-active);
}

/* Secondary (neutral) */
.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--color-text);
  border-color: var(--btn-secondary-border);
}

.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
}

/* Ghost (glass/soft, ideal sobre hero oscuro) */
.btn--ghost {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.30);
}

/* Ghost en fondos claros (cuando se use fuera del hero) */
.btn--ghost.btn--on-light {
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-text);
  border-color: rgba(15, 23, 42, 0.10);
  backdrop-filter: none;
}

.btn--ghost.btn--on-light:hover {
  background: rgba(15, 23, 42, 0.10);
}

/* ===== Link button =====
   Para enlaces tipo “Conócenos / Cómo llegar” sin aspecto de btn
*/
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  font-weight: 700;
  font-size: 0.98rem;

  color: var(--link-color);
  text-decoration: none;

  border-radius: 10px;
  padding: 6px 2px;

  transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-link:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.btn-link:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: 3px;
}

/* Si es <button class="btn-link"> (como tu política de cookies) */
button.btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--link-color);
  cursor: pointer;
}

/* ===== Size helpers (opcionales, por si los necesitas luego) ===== */
.btn--sm {
  --btn-height: 38px;
  --btn-pad-x: 14px;
  --btn-font-size: 0.9rem;
}

.btn--lg {
  --btn-height: 50px;
  --btn-pad-x: 22px;
  --btn-font-size: 1rem;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-link {
    transition: none !important;
  }
  .btn:hover {
    transform: none;
  }
}
/* ============================================================
   PILL BUTTON — icon + text (ideal header CTA)
   Uso:
   <a class="btn btn--pill btn--pill-call" href="tel:...">
     <span class="btn__icon" aria-hidden="true">...</span>
     <span class="btn__text">Llámanos</span>
   </a>
   ============================================================ */

.btn--pill {
  /* Forma y tamaño compacto */
  --btn-height: 38px;
  --btn-pad-x: 14px;
  --btn-font-size: 0.92rem;

  border-radius: var(--radius-pill);
  gap: 0.5rem;
  white-space: nowrap;
}

/* Icono dentro del botón */
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

/* Variante “call” (elegante, clínica, sin competir con hero) */
.btn--pill-call {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--grey-900);
  box-shadow: none;
}

.btn--pill-call:hover {
  background: rgba(15, 23, 42, 0.10);
  border-color: rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.btn--pill-call:active {
  transform: translateY(0);
}

/* Icon bubble ligeramente más marcado */
.btn--pill-call .btn__icon {
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* Ajuste: si se usa sobre fondo oscuro (hero transparente) */
.btn--pill-call.btn--on-dark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  backdrop-filter: blur(6px);
}

.btn--pill-call.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.30);
}

.btn--pill-call.btn--on-dark .btn__icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
}