/**
 * BOTONES — un único sistema de CTA reutilizado en todo el sitio.
 * No crear variantes nuevas de botón sin revisar primero si una de
 * estas cuatro ya resuelve el caso.
 */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 26px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{ background:var(--color-amber); color:var(--color-ink); }
.btn-primary:hover{ background:var(--color-amber-soft); }

.btn-outline{ border-color:rgba(255,255,255,.55); color:var(--color-bg); }
.btn-outline:hover{ border-color:var(--color-bg); background:rgba(255,255,255,.08); }

.btn-dark{ background:var(--color-brand); color:var(--color-bg); }
.btn-dark:hover{ background:var(--color-brand-hover); }

/* Variante de btn-outline para usar sobre fondos claros (btn-outline
   original está pensado para el hero oscuro) */
.btn-outline-dark{ border-color:var(--color-line); color:var(--color-ink); }
.btn-outline-dark:hover{ border-color:var(--color-brand); color:var(--color-brand); }

.btn-block{ width:100%; justify-content:center; }

/* ---------- WhatsApp flotante (persistente en todas las páginas) ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--color-brand); color:var(--color-bg);
  padding:14px 18px; border-radius:40px; box-shadow:0 10px 26px rgba(74,27,32,.35);
  font-size:13px; font-weight:700;
  transition:transform var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.wa-float:hover, .wa-float:focus-visible{
  background:var(--color-brand-hover); transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(74,27,32,.42);
}
.wa-float .pulse{
  width:9px; height:9px; border-radius:50%; background:var(--color-amber-soft);
  box-shadow:0 0 0 0 rgba(232,181,124,.6);
  animation:wa-pulse 2s infinite;
}
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(232,181,124,.55); }
  70%{ box-shadow:0 0 0 10px rgba(232,181,124,0); }
  100%{ box-shadow:0 0 0 0 rgba(232,181,124,0); }
}
@media (max-width:640px){ .wa-float .wa-text{ display:none; } .wa-float{ padding:14px; } }