/** Big Contact CTA — nodo 1:104 del Figma. */
.cvp-bigcta {
	position: relative;
	background: var(--cvp-sky);
	overflow: hidden;
}

.cvp-bigcta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.cvp-bigcta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;                 /* gap 24 */
	text-align: center;
	padding-block: 4.5rem;       /* py 72 */
	min-height: 320px;
	justify-content: center;
}

.cvp-bigcta__title {
	font-size: var(--cvp-fs-xl);
	color: var(--cvp-navy);
	margin: 0;
	line-height: 1.15;
}

.cvp-bigcta__title span { display: block; }

/* Botón: navy con borde blanco de 1px. */
.cvp-bigcta__btn {
	background: var(--cvp-navy);
	border: 1px solid var(--cvp-white);
	padding: 1rem 2rem;
	letter-spacing: var(--cvp-tracking-btn);
}

.cvp-bigcta__btn:hover,
.cvp-bigcta__btn:focus-visible { background: var(--cvp-orange); }

/* Variantes: la de Historia es amarilla con puntos, sin foto. */
.cvp-bigcta--yellow {
	background: var(--cvp-yellow);
	background-image:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 5px);
}
/* La franja navy también va tramada, como la amarilla del JPG. */
.cvp-bigcta--navy {
	background: var(--cvp-navy);
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px);
}
.cvp-bigcta--navy .cvp-bigcta__title { color: var(--cvp-white); }

/* Los otros tres botones del Figma del 6 de octubre de 2026. */
.cvp-bigcta__btn--navy   { border-color: var(--cvp-navy); }
.cvp-bigcta__btn--orange { background: var(--cvp-orange); border-color: var(--cvp-orange); color: var(--cvp-white); }
.cvp-bigcta__btn--orange:hover,
.cvp-bigcta__btn--orange:focus-visible { background: var(--cvp-navy); border-color: var(--cvp-navy); }
.cvp-bigcta__btn--white  { background: var(--cvp-white); border-color: var(--cvp-navy); color: var(--cvp-navy); }
.cvp-bigcta__btn--white:hover,
.cvp-bigcta__btn--white:focus-visible { background: var(--cvp-yellow); border-color: var(--cvp-yellow); color: var(--cvp-navy); }

.cvp-bigcta--yellow-soft { background: var(--cvp-yellow); }

/* --- Mobile — nodo 148:1075 -------------------------------------------
   El Big CTA pierde la foto y los puntos: queda blanco con texto navy. */

@media (max-width: 700px) {
	.cvp-bigcta {
		background: var(--cvp-white);
		min-height: 0;
		padding-block: var(--cvp-sp-5);
	}

	.cvp-bigcta__bg,
	.cvp-bigcta picture:has(.cvp-bigcta__bg) { display: none; }

	.cvp-bigcta__title,
	.cvp-bigcta--navy .cvp-bigcta__title {
		color: var(--cvp-navy);           /* la navy de escritorio lo dejaba blanco sobre blanco */
		font-size: 1.625rem;              /* 26 */
	}

	.cvp-bigcta__btn {
		background: var(--cvp-navy);
		color: var(--cvp-white);
		min-height: 46px;
	}

	/* El patrón de puntos tampoco va en mobile. */
	.cvp-bigcta.cvp-dots::before,
	.cvp-bigcta.cvp-dots::after { display: none; }
}

/* El inner arrastraba el min-height de 320 de escritorio. */
@media (max-width: 700px) {
	.cvp-bigcta__inner {
		min-height: 0;
		padding-block: var(--cvp-sp-4);
	}
}