/* [rcb_cta] — banda de cierre. Tres fondos: negro (defecto), acento y blanco. */

.rcb-cta__wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
}

.rcb-cta--centro .rcb-cta__wrap {
	flex-direction: column;
	text-align: center;
}

.rcb-cta--izquierda .rcb-cta__wrap {
	justify-content: space-between;
}

.rcb-cta__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.rcb-cta--centro .rcb-cta__texto {
	max-width: 720px;
}

.rcb-cta__titulo {
	margin: 0 0 10px;
	font-family: var(--rcb-font);
	font-size: var(--rcb-fs-h2);
	font-weight: 700;
	line-height: var(--rcb-lh-titular);
	letter-spacing: -.01em;
}

.rcb-cta__subtitulo {
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: var(--rcb-lh-texto);
}

.rcb-cta__subtitulo p {
	margin: 0 0 8px;
}

.rcb-cta__subtitulo p:last-child {
	margin-bottom: 0;
}

.rcb-cta__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 0 0 auto;
}

/* --- Variante negra (la de REVEL) ---------------------------- */

.rcb-cta--negro {
	background: var(--rcb-negro);
	color: var(--rcb-blanco);
}

.rcb-cta--negro .rcb-cta__titulo {
	color: var(--rcb-blanco);
}

.rcb-cta--negro .rcb-cta__subtitulo {
	color: var(--rcb-gris-medio);
}

/* --- Variante turquesa --------------------------------------- */

.rcb-cta--acento {
	background: var(--rcb-acento);
	color: var(--rcb-negro);
}

.rcb-cta--acento .rcb-cta__titulo,
.rcb-cta--acento .rcb-cta__subtitulo {
	color: var(--rcb-negro);
}

/* Sobre turquesa el botón secundario lleva borde negro: el blanco no contrasta. */
.rcb-cta--acento .rcb-btn--secundario {
	border-color: var(--rcb-negro);
	color: var(--rcb-negro);
}

.rcb-cta--acento .rcb-btn--secundario:hover,
.rcb-cta--acento .rcb-btn--secundario:focus-visible {
	background: var(--rcb-negro);
	color: var(--rcb-blanco);
}

/* --- Variante blanca ----------------------------------------- */

.rcb-cta--blanco {
	background: var(--rcb-blanco);
	color: var(--rcb-negro);
}

.rcb-cta--blanco .rcb-cta__titulo {
	color: var(--rcb-negro);
}

.rcb-cta--blanco .rcb-cta__subtitulo {
	color: var(--rcb-gris-texto);
}

@media (max-width: 767px) {
	.rcb-cta--izquierda .rcb-cta__wrap {
		flex-direction: column;
		align-items: flex-start;
	}

	.rcb-cta__botones {
		width: 100%;
	}

	.rcb-cta__botones .rcb-btn {
		flex: 1 1 100%;
	}
}