/* =========================================================================
   SUNQU — Botones
   ========================================================================= */
/* Decisión de marca (2026-08-16): todo fondo/relleno dorado sólido lleva
   texto blanco, no --sq-ink — así lo pidió el cliente tras ver la primera
   pasada (que había puesto texto oscuro por contraste WCAG: el dorado de
   marca da solo ~2.2:1 con blanco encima, por debajo del 4.5:1 de AA).
   Queda anotado por si se retoma la accesibilidad más adelante, pero la
   identidad visual con blanco es la decisión vigente. */
.sq-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border: 1px solid var(--sq-gold);
  border-radius: 0;
  background: var(--sq-gold);
  color: var(--sq-white);
  /* Etiqueta corta en mayúsculas con tracking = rol "eyebrow/etiqueta"
	   de la guía (§02), no "título": va en Jost, no en Fraunces. */
  font-family: var(--sq-font-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--sq-transition);
  line-height: 1.2;
}
.sq-btn:hover {
  background: var(--sq-gold-dark);
  border-color: var(--sq-gold-dark);
  color: var(--sq-white);
}
.sq-btn--ghost {
  background: transparent;
  color: var(--sq-ink);
}
.sq-btn--ghost:hover {
  background: var(--sq-gold);
  color: var(--sq-white);
}
.sq-btn--dark {
  background: var(--sq-navy);
  border-color: var(--sq-navy);
}
.sq-btn--dark:hover {
  background: var(--sq-ink-dark);
  border-color: var(--sq-ink-dark);
}
/* Sobre fondos de color saturado (bloque dorado del footer, banners): un
   botón blanco puro sobre fondo dorado da ~2.2:1 de contraste de borde
   (falla el 3:1 no-textual de WCAG para componentes de UI) porque el
   dorado ya es bastante claro — sin un borde que lo delimite, el botón
   "se funde" con el fondo. El borde --sq-ink (en vez de blanco) resuelve
   esto (~6.5:1) sin cambiar la identidad "píldora blanca" del botón. */
.sq-btn--white {
  background: var(--sq-white);
  border-color: var(--sq-ink);
  color: var(--sq-ink);
}
.sq-btn--white:hover {
  background: var(--sq-cream);
  border-color: var(--sq-ink);
  color: var(--sq-ink);
}
.sq-btn--block {
  width: 100%;
}
.sq-btn[disabled],
.sq-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
/* Aviso de demo */
.sq-demo-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--sq-blush);
  border-left: 3px solid var(--sq-gold);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--sq-navy-soft);
  margin-bottom: 28px;
  line-height: 1.55;
}
.sq-demo-note strong {
  color: var(--sq-navy);
}