/* ==========================================================================
   Botones — aq-btn-primary (sólido dorado) y aq-btn-outline (borde claro
   sobre fondo oscuro, para CONTACTO en el header).

   El diseño no define :hover ni :focus-visible: se proponen aquí,
   justificados en un comentario, y quedan registrados en tareas.md.

   Sin border-radius, a propósito (saneamiento de unidades y radios, previo a Servicios): esquinas cuadradas, no
   --aq-radius-sm. Misma decisión aplicada a form-field.css (input,
   select, textarea), para que botones y campos comparten el mismo
   lenguaje geométrico. `.aq-card` (card.css) y el panel del formulario
   (`.aq-contact-form-panel`, sections/contacto.css) siguen con
   --aq-radius-md sin tocar: quedan señalados en el registro de
   tareas.md para que se decida si también deben ir cuadrados — no se
   tocaron acá porque `.aq-card` es la card de Servicios, y ese cambio
   va aparte.
   ========================================================================== */

.aq-btn-primary,
.aq-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aq-space-2);
	padding: var(--aq-space-3) var(--aq-space-6);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-fs-body);
	text-decoration: none;
	border: var(--aq-border-width) solid transparent;
	transition: background-color var(--aq-transition-base) var(--aq-ease),
		border-color var(--aq-transition-base) var(--aq-ease),
		color var(--aq-transition-base) var(--aq-ease);
}

/* Ancho: auto por defecto, .aq-btn--full para ocupar todo el contenedor
   (botón ENVIAR del formulario, CTA en mobile) */
.aq-btn--full {
	width: 100%;
}

/* --------------------------------------------------------------------
   aq-btn-primary — sólido dorado (CTA del hero, ENVIAR del formulario)
   -------------------------------------------------------------------- */
.aq-btn-primary {
	background-color: var(--aq-gold-light);
	border-color: var(--aq-gold-light);
	color: var(--aq-black);
   text-transform: uppercase;
}

/* Hover: no hay un segundo dorado "hover" en la paleta entregada, así que
   se oscurece el mismo tono con brightness() en vez de inventar un hex
   nuevo — se ajusta solo si cambia --aq-gold. */
.aq-btn-primary:hover {
	filter: brightness(0.9);
}

/* Focus: sin override. El anillo global de reset.css (auditoría 7.3) ya
   es de dos colores (negro + blanco) precisamente para no depender del
   fondo sobre el que caiga — acá medido en 10.49:1 (anillo negro) contra
   --aq-gold-light, así que el anillo dorado-sobre-dorado que este
   override existía para evitar ya no es un problema. Antes SÍ hacía
   falta (un solo anillo dorado no se ve sobre un botón dorado). */

.aq-btn-primary-2,
.aq-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aq-space-2);
	padding: var(--aq-space-3) var(--aq-space-6);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-fs-body);
	text-decoration: none;
	border: var(--aq-border-width) solid transparent;
	transition: background-color var(--aq-transition-base) var(--aq-ease),
		border-color var(--aq-transition-base) var(--aq-ease),
		color var(--aq-transition-base) var(--aq-ease);
}

/* --------------------------------------------------------------------
   aq-btn-primary — sólido dorado (CTA del hero, ENVIAR del formulario)
   -------------------------------------------------------------------- */
.aq-btn-primary-2 {
	background-color: var(--aq-gold-light);
	border-color: var(--aq-gold-light);
	color: white;
   text-transform: uppercase;
}

/* Hover: no hay un segundo dorado "hover" en la paleta entregada, así que
   se oscurece el mismo tono con brightness() en vez de inventar un hex
   nuevo — se ajusta solo si cambia --aq-gold. */
.aq-btn-primary-2:hover {
	filter: brightness(0.9);
}








/* --------------------------------------------------------------------
   aq-btn-outline — borde claro sobre fondo oscuro (CONTACTO del header)
   -------------------------------------------------------------------- */
.aq-btn-outline {
	background-color: transparent;
	border-color: var(--aq-white);
	color: var(--aq-white);
   text-transform: uppercase;
}

/* Hover: se rellena con el dorado de marca, patrón estándar de un botón
   outline, sin necesidad de un tercer color.

   El estado activo del CTA del header (.aq-header__cta.is-active,
   scrollspy.js — cuando la sección Contacto está en pantalla) usa
   EXACTAMENTE este mismo relleno, a propósito: es la decisión aprobada
   por el cliente, no un descuido. Un solo mecanismo para los dos
   estados, agrupado acá — si cambia el dorado del hover, el activo
   cambia solo, sin acordarse de tocar dos lados. Consecuencia
   intencional: pasar el mouse sobre el botón mientras la sección
   Contacto está activa no produce ningún cambio visual (ya está en el
   estado de "relleno"). No es un bug a corregir. */
.aq-btn-outline:hover,
.aq-header__cta.is-active {
	background-color: var(--aq-gold);
	border-color: var(--aq-gold);
	color: var(--aq-black);
}

/* Focus: sin override, mismo anillo global de dos colores de reset.css
   (auditoría 7.3). Vive siempre sobre fondo oscuro (header): el anillo
   blanco del par es el que se ve acá. */