/* ==========================================================================
   components/buttons.css
   Botones (.btn y variantes), chips de filtro y botones redondos.
   ========================================================================== */
.btn {
  --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: var(--h); padding: 0 1.5em; border-radius: 999px; font-weight: 700; font-size: .95rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; white-space: nowrap;
  position: relative; isolation: isolate; overflow: hidden;
}
.btn--sm { --h: 42px; padding: 0 1.1em; font-size: .88rem; }
.btn--block { width: 100%; }
.btn--primary { background: linear-gradient(135deg, var(--red-2), var(--red) 55%, var(--red-deep)); color: #fff; box-shadow: 0 10px 30px -8px rgba(227, 38, 43, .7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn--primary::after, .btn--wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 16px 40px -8px rgba(227, 38, 43, .9); }
.btn--ghost { border: 1px solid var(--line-2); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--red); background: rgba(227,38,43,.12); }
.btn--ghost .ico { transition: transform .3s var(--ease); }
.btn--ghost:hover .ico { transform: translateX(4px); }
.btn--wa { background: var(--wa); color: #06210f; box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .8); }
.btn--wa:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.15em; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); font-weight: 600; font-size: .9rem; color: var(--muted);
  transition: all .3s var(--ease);
}
.chip:hover { color: var(--text); border-color: rgba(227,38,43,.6); transform: translateY(-2px); }
.chip.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 22px -8px rgba(227,38,43,.8); }
.chip--sm { padding: .45em .9em; font-size: .82rem; }
.round-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); transition: all .3s var(--ease); }
.round-btn:hover { background: var(--red); border-color: var(--red); transform: scale(1.06); }

.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 0 0 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(227,38,43,.7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(227,38,43,0); } 100% { box-shadow: 0 0 0 0 rgba(227,38,43,0); } }