/* ==========================================================================
   Rayo Web · CTAs de banner/hero (todas las landings)
   Referencia visual: servicio Diseño UX/UI (.ux-btn)
   ========================================================================== */

.rw-hero-ctas {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	max-width: 100%;
	min-width: 0;
}

.rw-hero-ctas .rw-hero-cta--primary,
.rw-hero-ctas .rw-hero-cta--secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	min-width: 0;
	height: auto;
	max-width: 100%;
	padding: 14px 28px;
	border-radius: 10px;
	border-width: 2px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;
}

@media (max-width: 720px) {
	.rw-hero-ctas {
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	.rw-hero-ctas .rw-hero-cta--secondary {
		display: none !important;
	}

	.rw-hero-ctas .rw-hero-cta--primary {
		width: 100%;
		max-width: 100%;
		white-space: normal;
	}

	/* Evita que columnas de hero empujen el CTA fuera del container */
	.wpl-hero__inner,
	.rw-dw-hero__inner,
	.rw-ia-hero__inner,
	.rw-sp-hero__inner,
	.rw-modern-hero-layout > div:first-child {
		min-width: 0;
		max-width: 100%;
	}

	.wpl-hero__copy,
	.rw-dw-hero__copy,
	.rw-ia-hero__copy,
	.rw-sp-hero__copy {
		min-width: 0;
		max-width: 100%;
	}
}