/* =========================================================
   BOTONES (global)
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ========================================================= */

/* Botón base: TODOS los botones del sitio llevan el cuadrado
   antes del texto (no hace falta agregarlo en el HTML). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: var(--space-2) var(--space-4);
  border-radius: 0; /* botones cuadrados en todo el sitio */
  font-weight: var(--fw-bold);
  border: var(--border);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  flex: 0 0 auto;
  background: currentColor;
  transition: transform var(--transition-base);
}
/* En hover el cuadradito gira 90°. Aplica a todos los botones del sitio. */
.btn:hover::before,
.btn:focus-visible::before {
  transform: rotate(90deg);
}
.btn-primary {
  background: var(--color-text-dark);
  color: var(--color-bg);
  border-color: var(--color-text-dark);
}
/* En hover el botón se achica un poco (desde el centro). Reemplaza el
   translateY que tenía antes: quedaba raro combinar el levantarse con el
   giro del cuadrado. Aplica a todos los botones del sitio, no solo al
   primario. */
.btn:hover,
.btn:focus-visible {
  transform: scale(0.96);
}

/* Variante con degradado (rosa -> naranja). Se usa sobre fondos oscuros,
   donde el botón sólido oscuro no se distinguiría. */
.btn-gradient {
  background: linear-gradient(90deg, var(--color-5) 0%, var(--color-3) 100%);
  color: var(--color-text-light);
  border-color: transparent;
}

.btn-outline {
  background: transparent;
  color: currentColor;
}

/* Solo en tablet/mobile el botón toma el mismo tamaño que la bajada del
   hero (20px / 24px). En desktop mantiene el tamaño de la escala base. */
@media (max-width: 1024px) {
  .btn {
    font-size: 20px;
    line-height: 24px;
  }
}