/*
 * Inprodi CTA — scoped, self-contained section styles.
 *
 * Full-bleed background photo + dark overlay, centered Playfair title, Inter
 * description and a single pill button (identical to the Cards section button:
 * white bg, thin border, chevron). Namespaced under .inprodi-cta, no global reset.
 */

.inprodi-cta,
.inprodi-cta *,
.inprodi-cta *::before,
.inprodi-cta *::after {
	box-sizing: border-box;
}

.inprodi-cta {
	position: relative;
	width: 100%;
	min-height: 66vh; /* hero-height band so the photo reads big */
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 40px; /* reduced top so the brand mark sits higher */
	/* Aire bajo el contenido: como el bloque va centrado (align-items:center),
	   este colchón sube el contenido y deja foto + degradado respirando debajo.
	   Mismo tratamiento que el hero de contacto. */
	padding-bottom: 120px;
	background-color: #f8eee7; /* brand cream — fallback + fades into the footer */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	border-top: 1px solid rgba(28, 63, 88, 0.12); /* subtle divider from the section above */
}

/* Overlay: solo el velo oscuro sobre la foto (mantiene legible el texto blanco
   sin apagar los colores de la imagen). El aterrizaje en crema YA NO vive aquí:
   antes eran las paradas 60%→88% de este degradado, o sea que su altura dependía
   de lo alta que fuera la banda. Ahora es ::after, con altura en píxeles. */
.inprodi-cta__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.30) 0%,
		rgba(0, 0, 0, 0.24) 32%,
		rgba(0, 0, 0, 0.16) 55%,
		rgba(0, 0, 0, 0.12) 100%
	);
	z-index: 1;
}

/* Aterrizaje foto → crema, anclado al fondo y con ALTURA EN PÍXELES: un solo
   número lo regula (antes ~38% de la banda). Va en z-index 1, por debajo del
   contenido (z-index 2), así que la crema sube por detrás del logo y el botón
   sin taparlos.
   OJO — el último tramo es #f8eee7 PLANO (86%→100%, unos 36px aquí y 55px en
   desktop): es la garantía anti-costura con el footer (píxeles crema puros
   llegando al borde aunque el degradado banda en alguna pantalla). Es la misma
   red de seguridad que daba la franja plana de 56px que había antes; si tocas
   las paradas, no te lleves ese tramo plano por delante. */
.inprodi-cta::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 260px;
	background: linear-gradient(
		180deg,
		rgba(248, 238, 231, 0) 0%,
		rgba(248, 238, 231, 0.30) 38%,
		rgba(248, 238, 231, 0.62) 62%,
		rgba(248, 238, 231, 0.88) 78%,
		#f8eee7 86%,
		#f8eee7 100%
	);
	z-index: 1; /* same layer as the overlay, painted after it; content (z-index 2) stays on top */
	pointer-events: none;
}

/* Brand mark — white stacked Nunatak logo below the script line (brand V1). */
.inprodi-cta__mark {
	display: block;
	/* max-height (not height) so Elementor's `.elementor img{height:auto}` can't override it. */
	max-height: 76px;
	width: auto;
	margin: 34px auto 0;
	opacity: 0.95;
	filter: brightness(0) invert(1); /* white logo over the photo */
	pointer-events: none;
	user-select: none;
}

.inprodi-cta__eyebrow {
	margin: 0 0 10px;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.inprodi-cta__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 80rem; /* max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.inprodi-cta__title {
	margin: 0;
	max-width: 100%;
	color: #ffffff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42); /* legible over the photo */
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	text-indent: 0;
	/* Mobile: fixed, readable size that wraps to ~2 lines. */
	font-size: 2rem; /* 32px */
	line-height: 1.2;
	white-space: normal;
}

.inprodi-cta__desc {
	/* Aire entre las dos líneas del titular. Era `-8px`: un margen NEGATIVO que
	   metía la línea en cursiva por debajo del titular y las dejaba muy juntas.
	   Va en `em` y no en píxeles para que el hueco crezca con la letra: la
	   cursiva usa clamp(24px…32px), así que esto da ~7px en móvil y ~10px en
	   escritorio, en vez de un valor fijo que en pantalla grande se queda corto.
	   Este archivo lo comparten TODOS los CTA del sitio (home, país, catálogo,
	   ficha de inspiración): todos pintan por nunatak_cta(). */
	margin: 0.3em 0 0;
	max-width: 40rem;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 400;
	line-height: 1.35;
}

.inprodi-cta__actions {
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

/* Botón — píldora sólida en el ocre de marca sobre la foto. Era blanca con
   texto azul hasta v1.9.11; el color va ahora en --nk-btn (style.css) y la
   sombra es la que la levanta de la imagen, no el relleno blanco. */
.inprodi-cta__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 12px;
	background-color: var(--nk-btn, #a16921);
	border: 1px solid var(--nk-btn, #a16921);
	color: var(--nk-btn-ink, #ffffff);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.inprodi-cta__btn:hover {
	background-color: var(--nk-btn-hover, #8e5c1d);
	border-color: var(--nk-btn-hover, #8e5c1d);
}

.inprodi-cta__btn-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.inprodi-cta__btn:hover .inprodi-cta__btn-icon {
	transform: translateX(3px);
}

/* sm */
@media (min-width: 640px) {
	.inprodi-cta__container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* md */
@media (min-width: 768px) {
	.inprodi-cta {
		padding-bottom: 180px; /* top stays reduced (40px) so the mark sits high */
	}
	.inprodi-cta::after {
		height: 400px;
	}
	/* From tablet up: single line again, scaling up to 48px. */
	.inprodi-cta__title {
		font-size: clamp( 30px, 4.6vw, 48px );
		line-height: 1.15;
		white-space: nowrap;
	}
}

/* lg */
@media (min-width: 1024px) {
	.inprodi-cta__container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inprodi-cta__btn,
	.inprodi-cta__btn-icon {
		transition: none;
	}
}