/* ============================================================
   FRAMEWORK PERSONAL — cta-buttons.css
   Botón con "fill" que barre de izquierda a derecha en hover.
   Requiere tokens.css (var(--ease), var(--accent), var(--radius)).

   VARIANTES (clase modificadora sobre .btn):
   - .btn-primary   → relleno de --accent, texto invierte a --bg
   - .btn-outline   → igual visualmente a primary, semántica distinta
   - .btn-ghost     → borde blanco translúcido, para fondos con foto
   - .btn-lg        → tamaño grande (hero, CTAs destacados)
   - .btn-header    → variante compacta para dentro del navbar
   ============================================================ */

.btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.3s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  transition: transform 0.38s var(--ease);
  z-index: -1;
}
.btn:hover::after {
  transform: translateX(0);
}

.btn-primary,
.btn-outline {
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-primary::after,
.btn-outline::after {
  background: var(--accent);
}
.btn-primary:hover,
.btn-outline:hover {
  color: var(--bg);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}
.btn-ghost::after {
  background: var(--accent);
}
.btn-ghost:hover {
  color: var(--bg);
  border-color: var(--accent);
}

.btn-lg {
  padding: 1.15rem 3.2rem;
  font-size: 0.75rem;
}

/* ── BTN-HEADER — versión compacta para navbar.html ──────────── */
.btn-header {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.3s;
}
.btn-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.35s var(--ease);
  z-index: -1;
}
.btn-header:hover {
  color: var(--bg);
}
.btn-header:hover::after {
  transform: translateX(0);
}

/* ── MAGNÉTICO (opcional) — añade data-magnetic="true" y usa
   el helper JS de observer.js / luxury pattern si se necesita.
   Sin JS, el botón funciona igual, solo sin el desplazamiento
   hacia el cursor. Requiere puntero fino (desktop). ── */
@media (hover: hover) and (pointer: fine) {
  [data-magnetic] {
    transition: transform 0.1s linear, color 0.3s, box-shadow 0.3s;
  }
}