/* ===========================================================================
   Bloque "Hero principal"
   Figma: 332:142 (escritorio 1440×571) y 1226:546 (móvil 390×398)

   Este archivo se carga SOLO en las páginas donde el bloque está presente: lo
   gestiona la key "style" del block.json.

   Se escribe primero la versión móvil y luego se amplía, que es el orden en el
   que carga un teléfono.
   =========================================================================== */
.iacc-hero {
	position: relative;
	background: var(--wp--preset--color--neutral-900, #022426);
	isolation: isolate;
}

/* --- Pista y diapositivas -------------------------------------------------
   Todas las diapositivas se apilan en la misma celda de una rejilla, así que
   el hero mide siempre lo que la más alta y no pega un salto al cambiar. Se
   cruzan con opacidad: desplazar lateralmente una caja de ancho completo es
   mucho más costoso que fundirla, y aquí no aporta nada. */
.iacc-hero__pista {
	display: grid;
}

.iacc-hero__slide {
	position: relative;
	overflow: hidden;
	grid-area: 1 / 1;
	padding-block: 32px 24px;

	opacity: 0;
	visibility: hidden;
	transition:
		opacity .5s ease,
		visibility .5s;
}

.iacc-hero__slide.es-activa {
	opacity: 1;
	visibility: visible;
}

/* Sin JavaScript no hay clases que valgan: se muestra la primera y punto. */
.iacc-hero:not(.esta-listo) .iacc-hero__slide:first-child {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.iacc-hero__slide { transition: none; }
}

/* --- Fondo: fotografía atenuada bajo los degradados --------------------- */
.iacc-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	/*
	 * La opacidad la fija el editor por diapositiva. Ya no se atenúa: el
	 * diseño enseña la fotografía entera y el contraste del texto lo sostiene
	 * el velo, que es opaco justo en la mitad donde va el titular.
	 */
	opacity: 1;
}

.iacc-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Velo: cinco degradados apilados -------------------------------------
   Tres radiales verdes que dan el brillo, y dos lineales que oscurecen hacia
   la izquierda y hacia abajo para que el texto se lea sobre cualquier foto.
   El orden importa: en CSS el primero queda encima. */
.iacc-hero__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		/*
		 * Refuerzo solo para móvil. Aquí el texto cruza toda la pantalla, así
		 * que el degradado diagonal no lo cubre y la fotografía sin atenuar
		 * dejaba el párrafo en 2,3:1 contra el blanco. En escritorio esta capa
		 * no existe: allí el velo se redeclara entero.
		 */
		linear-gradient(rgb(6 20 15 / .58), rgb(6 20 15 / .58)),
		linear-gradient(101.77deg,
			rgb(6 20 15) 6.9%,
			rgb(7 22 17 / .84) 24.14%,
			rgb(8 28 21 / .5) 34.49%,
			rgb(8 28 21 / .18) 43.97%,
			rgb(0 0 0 / 0) 53.45%),
		linear-gradient(0deg,
			rgb(6 20 15) 0%,
			rgb(7 20 15 / .5) 9%,
			rgb(0 0 0 / 0) 24%),
		radial-gradient(60% 45% at 70% 34%, rgb(48 168 112 / .36) 0%, rgb(24 84 56 / .18) 29%, rgb(0 0 0 / 0) 58%),
		radial-gradient(45% 32% at 24% 74%, rgb(30 128 86 / .22) 0%, rgb(0 0 0 / 0) 62%),
		radial-gradient(38% 26% at 99% 80%, rgb(90 176 20 / .18) 0%, rgb(0 0 0 / 0) 64%);
}

/* --- Contenido ----------------------------------------------------------- */
.iacc-hero__inner {
	position: relative;
}

/* En móvil los puntos van debajo del contenido, así que la diapositiva reserva
   sitio para ellos: los 24 px de su zona pulsable más una separación para que
   no queden pegados al distintivo. */
.iacc-hero:has(.iacc-hero__puntos) .iacc-hero__slide {
	padding-bottom: 68px;
}

/* Antetítulo: raya verde + texto en versalitas (Móvil/11 Eyebrow). */
.iacc-hero__antetitulo {
	display: flex;
	align-items: center;
	margin: 0;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-hero__raya {
	flex: 0 0 auto;
	width: 22px;
	height: 2px;
	margin-right: 8px;
	background: var(--wp--preset--color--esmeralda, #2cb45f);
}

/* Título (Móvil/01 H1 Portada).

   El diseño marca 34 px fijos, pero con la tipografía real un título como
   "Educación superior" pide 386 px y en un móvil de 390 solo quedan 350: se
   partía en dos líneas y el bloque crecía casi 90 px. Con clamp() alcanza los
   34 px del diseño a partir de unos 435 px de ancho y por debajo se encoge lo
   justo para no romperse, sea cual sea el texto que ponga el editor. */
.iacc-hero__titulo {
	margin: 8px 0 16px;

	font-size: clamp(1.625rem, 7.8vw, 2.125rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-hero__titulo-linea,
.iacc-hero__titulo-destacado {
	display: block;
}

/* La segunda línea lleva el degradado recortado sobre el propio texto.
   El color de respaldo va antes: si el navegador no entiende el recorte, el
   texto se ve en verde claro en vez de desaparecer. */
.iacc-hero__titulo-destacado {
	color: var(--wp--preset--color--marca-clara, #97c866);
	background: linear-gradient(90deg, #63e0bf, #7ed957);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.iacc-hero__titulo-destacado {
		color: transparent;
	}
}

/* Párrafo (Móvil/07 Body). */
.iacc-hero__parrafo {
	margin: 0 0 16px;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.45;
	color: var(--wp--preset--color--gris-borde, #e1e5e5);
}

/* --- Botones -------------------------------------------------------------
   En móvil se apilan a ancho completo; en escritorio van en fila y sólo
   ocupan lo que mide su texto. */
.iacc-hero__acciones {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.iacc-hero__acciones > * + * {
	margin-top: 8px;
}

.iacc-hero__boton {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 12px 24px;
	border-radius: 12px;

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;

	transition: background .15s ease, border-color .15s ease;
}

/* El componente Button del design system marca el foco con un anillo de 2 px
   por dentro, y advierte de que no se elimina. */
.iacc-hero__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-0, #fff);
	outline-offset: -2px;
}

/* Primaria: relleno con cuerpo, así que sin borde (regla del design system). */
.iacc-hero__boton--primario {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	box-shadow: 0 6px 18px rgb(82 164 0 / .35);
}

.iacc-hero__boton--primario:hover {
	background: var(--wp--preset--color--marca-clara, #97c866);
}

/* Contorno: relleno transparente, el borde es lo que delimita el control. */
.iacc-hero__boton--contorno {
	border: 1.5px solid var(--wp--preset--color--esmeralda, #2cb45f);
	background: transparent;
	color: var(--wp--preset--color--marca-suave, #dcedcc);
}

.iacc-hero__boton--contorno:hover {
	background: rgb(44 180 95 / .14);
}

/* --- Distintivo ----------------------------------------------------------
   Relleno y borde son el mismo blanco a distinta opacidad (5 % y 10 %), el par
   que el design system usa para todo panel translúcido sobre fondo oscuro. */
/* --- La cuenta atrás, cuando la diapositiva anuncia un plazo -------------
   La pieza se maqueta en assets/css/cuenta-atras.css, que la comparte con el
   hero con contador. Aquí solo se la coloca: los botones ya dejan 20 px por
   debajo, y el distintivo que puede venir detrás pide su propio aire. */
.iacc-hero__cuenta {
	margin-bottom: 20px;
}

.iacc-hero__chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;

	/* 7 y no 8: el borde de 1px suma a los 34 px de alto del diseño. */
	padding: 7px 12px;
	border: 1px solid rgb(255 255 255 / .1);
	border-radius: var(--radio-8, 8px);
	background: rgb(255 255 255 / .05);

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-hero__chip strong {
	font-weight: 500;
}

.iacc-hero__chip span {
	margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.iacc-hero__boton { transition: none; }
}

/* --- Controles del carrusel ----------------------------------------------
   En móvil los puntos van en fila, debajo del contenido y alineados con él por
   la izquierda. En escritorio pasan a una columna pegada al borde derecho.

   Van en una capa superpuesta. La capa entera es transparente al ratón
   (pointer-events) y solo los puntos lo recuperan: si no, esa banda invisible
   se tragaría los clics de los botones cuando el texto es largo.

   Se ocultan con visibility y no con display para no provocar un salto de
   maquetación al aparecer, aunque al estar en posición absoluta ya no empujan
   nada. */
.iacc-hero__controles {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding-bottom: 24px;
	pointer-events: none;
	visibility: hidden;
}

.iacc-hero.esta-listo .iacc-hero__controles {
	visibility: visible;
}

.iacc-hero__controles-inner {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}

/* La zona pulsable es de 24 px aunque el punto se vea de 8: un objetivo de
   8 px sería imposible de acertar con el dedo. */
.iacc-hero__puntos {
	display: flex;
	pointer-events: auto;
}

.iacc-hero__punto {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/*
 * Componente IndicadorCarrusel del design system: ranura de 24 px para el
 * dedo, punto de 8 al 40 % cuando está inactivo y píldora de 8 × 20 en verde
 * cuando es el que se está viendo. El radio de 4 sobre un punto de 8 da un
 * círculo, y sobre la píldora, los extremos redondeados.
 */
.iacc-hero__punto::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 4px;
	background: rgb(255 255 255 / .4);
	transition: background .15s ease, inset .15s ease;
}

.iacc-hero__punto:hover::before {
	background: rgb(255 255 255 / .7);
}

/*
 * El activo crece en el sentido en el que están dispuestos: en móvil van en
 * fila y la píldora se tumba; en escritorio van en columna a la derecha y se
 * pone de pie.
 */
.iacc-hero__punto.es-activa::before {
	inset: 8px 2px;
	background: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-hero__punto:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-0, #fff);
	outline-offset: 2px;
	border-radius: 999px;
}

/* --- Botón de pausa: fuera de la vista, no del alcance --------------------
   El diseño no lo contempla, pero algo que se mueve solo necesita poder
   detenerse. Se aparta con la técnica habitual de los enlaces de salto y
   reaparece en cuanto recibe el foco del teclado, que es justo quien no puede
   pararlo pasando el ratón por encima. */
.iacc-hero__pausa {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.iacc-hero__pausa:focus-visible {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	margin: 0 12px 0 0;
	overflow: visible;
	clip-path: none;

	border: 1px solid rgb(255 255 255 / .2);
	border-radius: 999px;
	background: rgb(255 255 255 / .06);
	cursor: pointer;
	color: var(--wp--preset--color--neutral-0, #fff);

	outline: 2px solid var(--wp--preset--color--neutral-0, #fff);
	outline-offset: 2px;
	pointer-events: auto;
}

/* Alterna el icono según esté rotando o detenido. */
.iacc-hero__pausa .icono-reanudar,
.iacc-hero.esta-detenido .iacc-hero__pausa .icono-pausa {
	display: none;
}

.iacc-hero.esta-detenido .iacc-hero__pausa .icono-reanudar {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.iacc-hero__punto::before { transition: none; }
}

/* ===========================================================================
   ESCRITORIO — Figma 332:142

   El corte es 992px, el mismo a partir del cual la cabecera pasa a su versión
   de escritorio: así el hero y el menú cambian a la vez.
   =========================================================================== */
@media (min-width: 992px) {

	.iacc-hero__slide {
		padding-block: 61px 85px;
	}

	/* En escritorio los puntos se van al lateral, así que la diapositiva ya no
	   necesita reservar sitio debajo. */
	.iacc-hero:has(.iacc-hero__puntos) .iacc-hero__slide {
		padding-bottom: 85px;
	}

	.iacc-hero__controles {
		align-items: center;
		padding-bottom: 0;
	}

	.iacc-hero__controles-inner {
		justify-content: flex-end;
	}

	.iacc-hero__puntos {
		flex-direction: column;
	}

	/* De pie: 8 px de ancho por 20 de alto, como marca el componente. */
	.iacc-hero__punto.es-activa::before {
		inset: 2px 8px;
	}


	.iacc-hero__velo {
		/* El degradado lineal cae con otro ángulo en pantalla ancha. */
		background:
			linear-gradient(117.38deg,
				rgb(6 20 15) 6.9%,
				rgb(7 22 17 / .84) 24.14%,
				rgb(8 28 21 / .5) 34.49%,
				rgb(8 28 21 / .18) 43.97%,
				rgb(0 0 0 / 0) 53.45%),

			/*
			 * Cierre inferior. En pantalla ancha sube bastante más que el 24 %
			 * del diseño original, y a propósito: la fotografía se apaga del
			 * todo antes de llegar al borde, de modo que el bloque de cifras
			 * —que arranca justo en este mismo #07140f— parece continuar la
			 * misma superficie en lugar de empezar una nueva.
			 *
			 * Termina en el color exacto con el que abre ese bloque; si algún
			 * día cambia allí, hay que cambiarlo aquí.
			 */
			linear-gradient(0deg,
				#07140f 0%,
				rgb(7 20 15 / .96) 10%,
				rgb(7 20 15 / .78) 20%,
				rgb(7 20 15 / .45) 32%,
				rgb(7 20 15 / .18) 42%,
				rgb(0 0 0 / 0) 54%),
			radial-gradient(60% 45% at 70% 34%, rgb(48 168 112 / .36) 0%, rgb(24 84 56 / .18) 29%, rgb(0 0 0 / 0) 58%),
			radial-gradient(45% 32% at 24% 74%, rgb(30 128 86 / .22) 0%, rgb(0 0 0 / 0) 62%),
			radial-gradient(38% 26% at 99% 80%, rgb(90 176 20 / .18) 0%, rgb(0 0 0 / 0) 64%);
	}

	.iacc-hero__raya {
		width: 32px;
	}

	/* Escritorio/01 H1 Portada. */
	.iacc-hero__titulo {
		margin: 16px 0 24px;
		font-size: var(--wp--preset--font-size--72, 72px);
		letter-spacing: -.02em;
	}

	/* Escritorio/06 Body L. El ancho corto es intencionado: mantiene la línea
	   en una medida cómoda de leer y deja respirar la fotografía. */
	.iacc-hero__parrafo {
		max-width: 640px;
		margin-bottom: 32px;
		font-size: var(--wp--preset--font-size--18, 18px);
		line-height: 1.55;
	}

	.iacc-hero__acciones {
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 24px;
	}

	.iacc-hero__acciones > * + * {
		margin-top: 0;
		margin-left: 12px;
	}

	.iacc-hero__boton {
		display: inline-flex;
	}

	.iacc-hero__chip {
		padding: 15px 24px;
		font-size: var(--wp--preset--font-size--16, 16px);
		line-height: 1.55;
	}

	/* En escritorio el dato sí se distingue del complemento por el peso. */
	.iacc-hero__chip strong {
		font-weight: 700;
		line-height: 1.3;
	}
}

/* ===========================================================================
   Indicador de desplazamiento del pie (componente IndicadorScroll)
   Figma: 1833:3934

   Etiqueta, ratón con la rueda que baja, y chevron. Invita a seguir bajando y
   al pulsarlo lleva a la sección siguiente.

   Nace con [hidden] y lo enseña vista.js cuando comprueba que debajo hay algo
   a lo que ir: si el hero fuera lo último de la página, el botón prometería
   un contenido que no existe.
   =========================================================================== */
.iacc-hero__scroll {
	/*
	 * Solo en escritorio. En móvil no hay sitio —se monta encima de los
	 * botones y del distintivo— y ahí bajar con el dedo no necesita que nadie
	 * lo explique. El diseño tampoco lo incluye en el formato pequeño.
	 */
	display: none;
	position: absolute;
	/*
	 * 42 px desde el fondo, como el diseño. No es un número al azar: la
	 * tarjeta de cifras del bloque siguiente se monta 36 px sobre el hero, y
	 * con menos separación el chevron acaba por debajo de ella y se corta.
	 */
	bottom: 42px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;

	flex-direction: column;
	align-items: center;
	gap: 12px;

	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;

	color: var(--wp--preset--color--neutral-0, #fff);
	font-family: inherit;
	/* Despega el trazo de la fotografía: en el diseño cae sobre una zona
	   oscura, pero el editor puede poner una imagen clara detrás. */
	filter: drop-shadow(0 1px 3px rgb(2 20 15 / 55%));
}

.iacc-hero__scroll[hidden] { display: none; }

.iacc-hero__scroll-texto {
	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.iacc-hero__scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-0, #fff);
	outline-offset: 2px;
}

/* --- El ratón ------------------------------------------------------------ */
.iacc-hero__raton {
	display: flex;
	justify-content: center;

	width: 28px;
	height: 44px;
	padding-top: 7px;

	border: 2px solid currentcolor;
	border-radius: 14px;
	/* La rueda no se sale del cuerpo al bajar. */
	overflow: hidden;
}

.iacc-hero__rueda {
	width: 4px;
	height: 10px;
	border-radius: 2px;
	background: var(--wp--preset--color--esmeralda, #2cb45f);

	/* De 7 a 22 px de recorrido, en bucle de 1,5 s, como pide el componente. */
	animation: iacc-rueda 1.5s ease-in-out infinite;
}

@keyframes iacc-rueda {
	0%       { transform: translateY(0); opacity: 1; }
	60%      { transform: translateY(15px); opacity: .2; }
	60.01%   { transform: translateY(0); opacity: 0; }
	100%     { transform: translateY(0); opacity: 1; }
}

.iacc-hero__scroll-chevron {
	width: 20px;
	height: 20px;
	/* Acompaña a la rueda con el mismo compás, medio ciclo por detrás. */
	animation: iacc-chevron 1.5s ease-in-out infinite;
}

@keyframes iacc-chevron {
	0%, 100% { transform: translateY(0);   opacity: .75; }
	50%      { transform: translateY(4px); opacity: 1; }
}

/* Al cruzar por encima, el conjunto se adelanta un poco. */
.iacc-hero__scroll:hover .iacc-hero__scroll-chevron {
	transform: translateY(3px);
}

/*
 * Con "reducir movimiento" el indicador se queda quieto. Sigue estando y sigue
 * funcionando al pulsarlo: lo que se retira es el vaivén, no la función.
 */
@media (prefers-reduced-motion: reduce) {

	.iacc-hero__rueda,
	.iacc-hero__scroll-chevron {
		animation: none;
	}
}

@media (min-width: 992px) {

	.iacc-hero__scroll:not([hidden]) {
		display: flex;
	}
}

/* --- La diapositiva que es solo una imagen -------------------------------
   Un banner ya montado que lleva a alguna parte. Se publica entero: a todo el
   ancho y con su propio alto, de modo que lo que se ve es el archivo tal cual
   se subió. Lo que cambia al estrechar la pantalla es el alto de la
   diapositiva, nunca la forma de la pieza.

   El hueco lo reserva el navegador con los atributos width y height que lleva
   la imagen, así que la página no da el salto al terminar de cargar. */
.iacc-hero__banner,
.iacc-hero__banner-enlace {
	display: block;
}

.iacc-hero__banner-img {
	display: block;
	width: 100%;
	/* La clave: solo se le fija el ancho. El alto lo pone la proporción del
	   archivo, y por eso no hay manera de que se deforme. */
	height: auto;
}

/* Va a sangre: el aire que las portadas necesitan para su texto aquí solo
   dejaría franjas del fondo alrededor de la pieza. */
.iacc-hero__slide:has(.iacc-hero__banner) {
	padding-block: 0;
}

/* Salvo por debajo cuando hay puntos, que si no quedan encima de la imagen. */
.iacc-hero:has(.iacc-hero__puntos) .iacc-hero__slide:has(.iacc-hero__banner) {
	padding-bottom: 68px;
}

@media (min-width: 992px) {

	.iacc-hero:has(.iacc-hero__puntos) .iacc-hero__slide:has(.iacc-hero__banner) {
		/* En pantalla ancha los puntos se van al lateral y no estorban. */
		padding-bottom: 0;
	}
}

/* La proporción de cada pieza, que el render pasa en el propio elemento. Sin
   esto, al servir la imagen de móvil —más vertical— el navegador la encajaba
   en la caja apaisada de la de escritorio y la aplastaba: dentro de un
   <picture>, los atributos de alto y ancho son siempre los de la imagen
   principal.

   object-fit es la red: si alguna vez la proporción declarada no cuadrara con
   el archivo servido, recorta un poco en vez de deformar. */
.iacc-hero__banner-img {
	aspect-ratio: var(--iacc-banner, auto);
	object-fit: cover;
}

@media (max-width: 767px) {

	.iacc-hero__banner-img {
		aspect-ratio: var(--iacc-banner-movil, var(--iacc-banner, auto));
	}
}

/* El banner se apaga hacia abajo en lugar de cortarse en seco contra el bloque
   siguiente. Es la misma idea que el cierre inferior del velo de las portadas:
   termina en el color exacto con el que abre el piso de cifras, de modo que las
   dos superficies parecen una sola. Si algún día cambia allí, cambia aquí. */
.iacc-hero__banner {
	position: relative;
}

.iacc-hero__banner::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 30%;

	background: linear-gradient(0deg,
		#06140f 0%,
		rgb(6 20 15 / .92) 18%,
		rgb(6 20 15 / .7) 38%,
		rgb(6 20 15 / .36) 62%,
		rgb(6 20 15 / 0) 100%);

	/* Decorativo: no debe interceptar el clic del enlace que envuelve la pieza. */
	pointer-events: none;
}

@media (max-width: 767px) {

	/*
	 * EN MÓVIL, UN SUELO
	 * Una pieza apaisada en una pantalla estrecha se queda en una tira de
	 * ciento y pico píxeles, y el hero parece roto. Por debajo de este alto la
	 * imagen se amplía hasta llenarlo —conservando su proporción, que es lo que
	 * hace object-fit— y lo que sobra se recorta por los lados. Por encima,
	 * manda la proporción del archivo y no se recorta nada.
	 *
	 * El número sale del alto que tiene hoy la portada en móvil: así una
	 * diapositiva de imagen y una de texto se parecen en vez de dar un salto.
	 */
	.iacc-hero__banner-img {
		min-height: 420px;
	}
}

/* --- Un banner que convive con portadas ----------------------------------
   Todo lo de arriba vale cuando el carrusel es solo de imágenes: cada pieza se
   publica entera y el hero mide lo que mida.

   Pero si hay portadas, el alto ya está decidido —lo marca la portada más
   alta— y una imagen con su alto propio dejaba un escalón al pasar de una
   diapositiva a la siguiente. Aquí la imagen se amplía hasta llenar ese alto
   conservando su proporción, que es lo que hace object-fit: cover, y lo que
   sobra se recorta por los lados.

   La diapositiva del banner se saca del reparto de la rejilla con position
   absolute. Si se quedara dentro, su imagen volvería a aportar alto y el hero
   acabaría midiendo lo que la imagen, que es justo lo que se quiere evitar. */
.iacc-hero--con-portadas .iacc-hero__pista {
	position: relative;
}

.iacc-hero--con-portadas .iacc-hero__slide:has(.iacc-hero__banner),
.iacc-hero--con-portadas:has(.iacc-hero__puntos) .iacc-hero__slide:has(.iacc-hero__banner) {
	position: absolute;
	inset: 0;
	/* A sangre también donde hay puntos: los puntos van encima de la imagen,
	   igual que van encima de la fotografía de una portada. */
	padding-bottom: 0;
}

.iacc-hero--con-portadas .iacc-hero__banner,
.iacc-hero--con-portadas .iacc-hero__banner-enlace {
	height: 100%;
}

.iacc-hero--con-portadas .iacc-hero__banner-img {
	height: 100%;
	/* Manda el alto de la caja, no la forma del archivo. */
	aspect-ratio: auto;
	/* El suelo de móvil tampoco pinta nada: el alto ya lo pone la portada. */
	min-height: 0;
	object-fit: cover;
}