/* ==========================================================================
   Botones.
   Variantes: gold, ghost (sobre navy), outline-navy, primary (navy sólido).
   Disabled: cursor:not-allowed + aria-disabled, sin opacity inline.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: 14px 28px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fz-button);
	line-height: 1;
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: background-color var(--transition-fast),
	            color var(--transition-fast),
	            border-color var(--transition-fast);
	white-space: nowrap;
}

.btn--gold {
	background: var(--color-gold);
	color: var(--color-graphite);
	border-color: var(--color-gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
	background: var(--color-gold-soft);
	border-color: var(--color-gold-soft);
}

.btn--primary {
	background: var(--color-navy);
	color: var(--color-cream);
	border-color: var(--color-navy);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-navy-deep);
	border-color: var(--color-navy-deep);
}

.btn--ghost {
	background: transparent;
	color: var(--color-cream);
	border-color: rgba(245, 239, 230, 0.4);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.btn--outline-navy {
	background: transparent;
	color: var(--color-navy);
	border-color: var(--color-navy);
}

.btn--outline-navy:hover,
.btn--outline-navy:focus-visible {
	background: var(--color-navy);
	color: var(--color-cream);
}

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

/* Estado deshabilitado para enlaces que aún no tienen URL. Sin opacity. */
.btn.is-disabled,
.btn[aria-disabled="true"] {
	cursor: not-allowed;
}