/* ============================================================
   888 Multi-Service Cleaning LLC
   Buttons — Visibles en TODAS las paginas (acordado en contrato)
   SICGBOR | SIC-DP-007
   ============================================================ */

/* ── Base Button ── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--btn-padding-y) var(--btn-padding-x);
  font-family:     var(--font-primary);
  font-size:       var(--btn-font-size);
  font-weight:     var(--btn-font-weight);
  line-height:     1;
  border-radius:   var(--btn-border-radius);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      all var(--btn-transition);
  letter-spacing:  0.01em;
}

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

/* ── Sizes ── */
.btn--sm {
  padding:   var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--text-sm);
}

.btn--lg {
  padding:   1rem 2rem;
  font-size: var(--text-lg);
}

.btn--full {
  width: 100%;
}

/* ── Primary — Cotizar (color principal azul) ── */
.btn-primary,
.btn-quote {
  background:   var(--color-primary);
  color:        var(--text-white);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-quote:hover {
  background:   var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color:        var(--text-white);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px rgba(42,122,191,0.35);
}

/* ── Secondary — Naranja quemado (llamada a accion secundaria) ── */
.btn-secondary,
.btn-call {
  background:   var(--color-secondary);
  color:        var(--text-white);
  border-color: var(--color-secondary);
}

.btn-secondary:hover,
.btn-call:hover {
  background:   var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color:        var(--text-white);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px rgba(196,92,26,0.35);
}

/* ── Outline Primary ── */
.btn-outline {
  background:   transparent;
  color:        var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background:   var(--color-primary);
  color:        var(--text-white);
  transform:    translateY(-2px);
}

/* ── Outline White (para hero oscuro) ── */
.btn-outline-white {
  background:   transparent;
  color:        var(--text-white);
  border-color: rgba(255,255,255,0.6);
}

.btn-outline-white:hover {
  background:   var(--text-white);
  color:        var(--color-primary);
  border-color: var(--text-white);
  transform:    translateY(-2px);
}

/* ── WhatsApp ── */
.btn-whatsapp {
  background:   #25D366;
  color:        var(--text-white);
  border-color: #25D366;
}

.btn-whatsapp:hover {
  background:   #1dbb58;
  border-color: #1dbb58;
  color:        var(--text-white);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px rgba(37,211,102,0.35);
}

/* ── Email ── */
.btn-email {
  background:   var(--color-accent);
  color:        var(--text-white);
  border-color: var(--color-accent);
}

.btn-email:hover {
  background:   var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color:        var(--text-white);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px rgba(26,171,171,0.35);
}

/* ── Ghost ── */
.btn-ghost {
  background:   transparent;
  color:        var(--text-secondary);
  border-color: var(--border-color);
}

.btn-ghost:hover {
  background:   var(--bg-section-3);
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

/* ── CTA Floating Bar (visible en todas las paginas mobile) ── */
.cta-floating-bar {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    var(--z-sticky);
  display:    none;              /* Visible solo en mobile */
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  padding:    var(--space-3) var(--space-4);
  gap:        var(--space-2);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
}

@media (max-width: 1200px) {
  .cta-floating-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .cta-floating-bar .btn {
    padding:   var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    flex-direction: column;
    gap:       var(--space-1);
    border-radius: var(--radius);
  }

  .cta-floating-bar .btn svg {
    width:  18px;
    height: 18px;
  }
}

/* ── Button with icon ── */
.btn svg,
.btn i {
  width:  18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--lg svg,
.btn--lg i {
  width:  20px;
  height: 20px;
}

/* ── Loading state ── */
.btn--loading {
  pointer-events: none;
  opacity: 0.75;
}

.btn--loading::after {
  content: '';
  width:  16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-2);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}