/**
 * @layer components — CTA de contacto parametrizable (cta-contacto.php).
 * Se usa al pie de áreas, marcas, profesionales y publicaciones.
 *
 * `font-size` con !important: ver la nota en buttons.css — WordPress fija
 * el font-size de h1/h2/h3 como CSS global sin @layer, así que un tamaño de
 * heading distinto al default sólo se logra ganándole a esa regla.
 */

@layer components {
	.cta-contacto {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
		margin-top: var(--space-7);
		padding: var(--space-6);
		background:
			radial-gradient(circle at 50% 165%, color-mix(in oklab, var(--c-white) 30%, var(--c-accent-600)) 0%, transparent 65%),
			var(--c-accent-600);
	}

	.cta-contacto__texto h2 {
		font-size: calc(var(--text-lg) * 2) !important;
		margin: 0 0 var(--space-2);
		color: var(--c-white) !important;
	}

	.cta-contacto__texto p {
		margin: 0;
		color: color-mix(in oklab, var(--c-white) 85%, transparent);
		max-width: 48ch;
	}

	.cta-contacto__boton {
		flex-shrink: 0;
		background: var(--c-white) !important;
		color: var(--c-accent-700) !important;
	}

	.cta-contacto__boton:hover,
	.cta-contacto__boton:focus-visible {
		background: color-mix(in oklab, var(--c-white) 85%, transparent) !important;
		color: var(--c-accent-700) !important;
	}

	/* .cta-final vive en pages/front-page.css (@layer utilities): con
	   !important en ambos lados, gana la capa declarada antes (components),
	   así que el blanco del botón tiene que fijarse acá, no ahí — ver la
	   nota de @layer en buttons.css. */
	.cta-final__boton {
		background: var(--c-white) !important;
		color: var(--c-accent-700) !important;
	}

	.cta-final__boton:hover,
	.cta-final__boton:focus-visible {
		background: color-mix(in oklab, var(--c-white) 85%, transparent) !important;
		color: var(--c-accent-700) !important;
	}
}