/* Inprodi Band — cinematic image band with a 2-row title (mid-page statement). */
.inprodi-band,
.inprodi-band *,
.inprodi-band *::before,
.inprodi-band *::after { box-sizing: border-box; }

.inprodi-band {
	position: relative;
	width: 100%;
	padding: 70px 0;
	background-color: #0f172a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.inprodi-band__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, rgba(9, 17, 34, 0.5) 0%, rgba(9, 17, 34, 0.66) 100% );
}


.inprodi-band__inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 22px;
	text-align: center;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.inprodi-band__eyebrow {
	color: #ffffff;
	opacity: 0.85;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.inprodi-band__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 2.375rem; /* 38px mobile */
	line-height: 1.1;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.inprodi-band__title span { text-transform: none; letter-spacing: normal; text-indent: 0; }

/* Reparto de las líneas cuando el texto no cabe de una (o sea, en móvil).
   Sin esto el navegador va metiendo palabras hasta que no cabe la siguiente, y
   dejaba "El sur del mundo es / enorme." — con el "es" colgando al final de la
   primera línea. `balance` reparte el texto en líneas de largo parecido, así que
   sale "El sur del mundo / es enorme.", que es donde se quiere el corte.

   Se hace por CSS y NO metiendo un <br> en el texto a propósito: un <br> partiría
   la frase en dos nodos y TranslatePress dejaría de verla como una sola cadena
   —se perdería la traducción al inglés y habría que traducir los dos trozos por
   separado, obligados a cortar por el mismo sitio en un idioma donde la frase
   tiene otro largo—. Así el texto sigue siendo uno y el reparto se recalcula solo
   en cada idioma y en cada ancho.

   En escritorio no cambia nada: ahí el titular entra en una sola línea y
   `balance` no tiene nada que repartir. Los navegadores que no lo soportan
   simplemente parten como hasta ahora. */
.inprodi-band__title span,
.inprodi-band__subtitle {
	text-wrap: balance;
}

.inprodi-band__title .inprodi-band__it {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	text-indent: 0;
	font-size: 1em;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.95);
}

.inprodi-band__subtitle {
	margin: 0;
	max-width: 34rem;
	color: rgba(255, 255, 255, 0.9);
	font-family: 'Jost', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.inprodi-band { padding: 160px 0; }
	.inprodi-band__title { font-size: 3.5rem; /* 56px */ }
}