/**
 * Ficha de continuidad de estudios.
 *
 * Figma: 1951:2124 (escritorio) y 2042:2372 (móvil).
 *
 * Va después de carrera.css y cuenta con ella: los antetítulos, los títulos de
 * sección, la tarjeta de la malla y el piso de "por qué IACC" salen de ahí.
 * Aquí solo está lo que esta ficha no comparte con ninguna otra.
 */

/* ==========================================================================
   Portada
   ========================================================================== */

/*
 * La portada es alta a propósito: entra el titular y, al lado, el formulario
 * entero. A este programa se llega decidido, así que lo primero que se ve es
 * dónde dejar los datos.
 *
 * El fondo base es #06140f, que está fuera del manual de marca —solo autoriza
 * #022426 y #000000— y en el archivo de diseño figura como pendiente de
 * decisión. Se escribe una sola vez, en esta variable, para que cambiarlo sea
 * tocar una línea.
 */
.iacc-cont__hero {
	--iacc-cont-fondo: #06140f;

	position: relative;
	display: flex;
	align-items: center;
	min-height: 810px;
	padding-block: 72px 64px;
	overflow: hidden;
	background: var(--iacc-cont-fondo);
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-cont__fondo {
	position: absolute;
	inset: 0;
}

/*
 * La fotografía va espejada: el original trae al sujeto claro a la izquierda,
 * que es justo donde cae el titular. Volteada, la mitad oscura queda debajo
 * del texto.
 *
 * El 40 % es un techo, no un gusto: es la opacidad máxima con la que el texto
 * blanco de 16 px sigue cumpliendo el contraste mínimo sobre una zona clara de
 * la foto. Se puede bajar; subir, no.
 */
.iacc-cont__foto {
	width: 100%;
	height: 100%;
	opacity: 0.4;
	object-fit: cover;
	/* Centrada y sin espejar, como el resto de los heros del sitio. */
}

.iacc-cont__aureola,
.iacc-cont__velo,
.iacc-cont__cierre {
	position: absolute;
	inset: 0;
}

/* Tres focos verdes que encienden la foto por detrás del contenido. */
.iacc-cont__aureola {
	background:
		radial-gradient(130px 152px at 70% 34%, rgb(48 168 112 / 36%) 0%, rgb(24 84 56 / 18%) 29%, transparent 58%),
		radial-gradient(94px 110px at 24% 74%, rgb(30 128 86 / 22%) 0%, transparent 62%),
		radial-gradient(77px 90px at 99% 80%, rgb(90 176 20 / 18%) 0%, transparent 64%);
}

/* Carga a la izquierda, que es donde va el texto, y deja ver la foto a la derecha. */
.iacc-cont__velo {
	background:
		linear-gradient(110.7deg, #06140f 6.9%, rgb(7 22 17 / 84%) 24.14%, rgb(8 28 21 / 50%) 34.49%, rgb(8 28 21 / 18%) 43.97%, transparent 53.45%),
		linear-gradient(0deg, #06140f 0%, rgb(7 20 15 / 50%) 9%, transparent 24%);
}

/* Entrega el piso siguiente sin corte. */
.iacc-cont__cierre {
	background: linear-gradient(180deg, rgb(6 20 15 / 0%) 0%, rgb(6 20 15 / 0%) 55%, rgb(6 20 15 / 55%) 82%, #06140f 100%);
}

/*
 * LAS DOS COLUMNAS ARRANCAN A LA MISMA ALTURA
 * El formulario es bastante más alto que el texto, así que centrarlos dejaba
 * el titular hundido: empezaba 250 px por debajo de «Hablemos de tu futuro»,
 * y las dos piezas no se leían como una sola fila.
 *
 * La referencia es el titular del formulario, no el borde de su tarjeta: por
 * eso el texto baja los 32 de relleno más el píxel del borde que separan una
 * cosa de la otra.
 */
.iacc-cont__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 60px;
	align-items: start;
	width: 100%;
}

.iacc-cont__promesa {
	padding-top: 33px;
}

.iacc-cont__titulo {
	margin: 0;
	font-size: clamp(2.125rem, 1.2rem + 2.8vw, 4.375rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/*
 * La parte destacada la marca el editor con <strong> desde el panel. El
 * degradado se recorta sobre el texto; si el navegador no sabe hacerlo queda
 * el verde de marca, que también se lee sobre el fondo oscuro.
 */
.iacc-cont__titulo strong {
	font-weight: inherit;
	color: var(--wp--preset--color--esmeralda-clara, #80d29f);
	background: linear-gradient(90deg, #63e0bf 0%, #7ed957 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (-webkit-text-fill-color: transparent) {
	.iacc-cont__titulo strong {
		-webkit-text-fill-color: transparent;
	}
}

.iacc-cont__bajada {
	max-width: 604px;
	margin: 24px 0 0;
	font-size: var(--wp--preset--font-size--18, 1.125rem);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* --- Los distintivos ------------------------------------------------------ */

.iacc-cont__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Píldora informativa, no un control: no lleva estados ni área táctil. El
 * relleno es blanco translúcido para que la fotografía se siga intuyendo
 * detrás sin que el texto pierda contraste.
 */
.iacc-cont__chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: 999px;
}

.iacc-cont__chip-icono {
	display: flex;
	flex: none;
}

.iacc-cont__chip-icono svg {
	width: 16px;
	height: 16px;
}

/* --- Los botones de la portada -------------------------------------------- */

.iacc-cont__acciones {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

.iacc-cont__boton {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding-inline: 24px;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: 12px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.iacc-cont__boton svg {
	width: 16px;
	height: 16px;
}

/*
 * La primaria no lleva borde: el relleno ya tiene cuerpo. El resplandor verde
 * es un recurso de marca —la sombra va en el mismo verde del relleno— y no
 * crece al pasar el puntero: si creciera, un botón justo dentro de su caja se
 * cortaría solo en ese estado.
 */
.iacc-cont__boton--primario {
	color: var(--wp--preset--color--neutral-900, #022426);
	background: var(--wp--preset--color--marca, #52a400);
	box-shadow: 0 6px 18px rgb(82 164 0 / 35%);
}

.iacc-cont__boton--primario:hover {
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-cont__boton--contorno {
	color: var(--wp--preset--color--marca-suave, #dcedcc);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-cont__boton--contorno:hover {
	background: rgb(44 180 95 / 12%);
}

/* --- El formulario de la portada ------------------------------------------ */

/*
 * En oscuro sobre la fotografía. La tarjeta de dentro es la misma de todo el
 * sitio: aquí se le cambian el fondo, los colores del texto y la forma de los
 * campos, que en esta portada llevan la etiqueta encima en vez de flotando.
 */
.iacc-cont__form {
	padding: 32px;
	background: var(--wp--preset--color--neutral-900, #022426);
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

.iacc-cont__form .iacc-form {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.iacc-cont__form .iacc-form__titulo {
	font-size: var(--wp--preset--font-size--22, 1.375rem);
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-cont__form .iacc-form__titulo strong {
	font-weight: inherit;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-cont__form .iacc-form__texto {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

.iacc-cont__form .iacc-form__cuerpo {
	padding-top: 16px;
}

/* El aviso de carga y el de error son grises de fondo claro: aquí no se leían. */
.iacc-cont__form .iacc-form__cargando,
.iacc-cont__form .iacc-form__error {
	color: rgb(255 255 255 / 70%);
}

/*
 * DOS COLUMNAS EN UNA TARJETA ESTRECHA
 * HubSpot ya entrega este formulario repartido en fieldset.form-columns-2 —Rut
 * y Nombre, los dos apellidos, móvil y correo—, así que el reparto no hay que
 * inventarlo: basta con dejar que ocurra.
 *
 * El CSS general apila esas parejas por debajo de 430 px de tarjeta, y esta
 * mide 394. Ese umbral está pensado para la etiqueta flotante, la que va
 * dentro del campo: ahí 140 px no dan ni para "Apellido Paterno". Aquí la
 * etiqueta va encima y el campo solo tiene que albergar el valor, así que los
 * 190 px de cada columna bastan y se mantienen las dos.
 *
 * Los consentimientos vienen en su propio fieldset de una columna, y el botón
 * aparte: los dos ocupan el ancho entero sin que haya que pedírselo.
 */
@container (min-width: 360px) {

	.iacc-cont__form .iacc-form fieldset.form-columns-2 {
		flex-direction: row;
		gap: 16px;
	}
}
/*
 * ETIQUETA ARRIBA, FIJA
 * La tarjeta lleva data-iacc-etiquetas="fijas", así que el tema no marca sus
 * campos como flotantes y la etiqueta se queda donde el marcado la pone:
 * encima del campo. Aquí solo se le da el tamaño y el color del diseño.
 */
.iacc-cont__form .iacc-form .hs-form-field > label {
	position: static;
	margin: 0 0 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
	background: none;
	transform: none;
}

/*
 * El fondo oscuro de los campos necesita repetir los :not() del CSS general:
 * sin ellos esta regla vale 0,3,0 contra los 0,4,0 de allí y pierde, que es el
 * mismo tropiezo que ya está anotado en main.css para los desplegables.
 */
.iacc-cont__form .iacc-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
	height: 48px;
	padding-inline: 16px;
	font-size: var(--wp--preset--font-size--16, 1rem);
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--verde-profundo, #033934);
	border: 1.5px solid var(--wp--preset--color--neutral-700, #304b4d);
	border-radius: 12px;
}

.iacc-cont__form .iacc-form select.hs-input:not([type="checkbox"]):not([type="radio"]) {
	color: var(--wp--preset--color--neutral-0, #fff);
	background-color: var(--wp--preset--color--verde-profundo, #033934);
}

.iacc-cont__form .iacc-form textarea.hs-input:not([type="checkbox"]):not([type="radio"]) {
	height: auto;
	padding-block: 12px;
}

/* El marcador de posición es texto y también tiene que leerse. */
.iacc-cont__form .iacc-form .hs-input::placeholder {
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
	opacity: 1;
}

/* El foco se marca con dos píxeles de borde, no quitándolo. */
.iacc-cont__form .iacc-form .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
	border-color: var(--wp--preset--color--esmeralda, #2cb45f);
	border-width: 2px;
	outline: none;
}

/*
 * La caja del consentimiento: 20 px visibles dentro de un objetivo de 24, que
 * es el mínimo táctil. Son dos casillas obligatorias justo antes de enviar, y
 * en el archivo original medían 13 px.
 */
.iacc-cont__form .iacc-form .hs-form-booleancheckbox-display input[type="checkbox"] {
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--verde-profundo, #033934);
	border: 1.5px solid var(--wp--preset--color--neutral-700, #304b4d);
	border-radius: 4px;
}

/*
 * El texto legal del diseño viene en #6b7772, que sobre este fondo se queda en
 * 3,4:1 y no llega al mínimo para 12 px. Se sube al gris claro del sistema
 * —7,9:1— y los enlaces al esmeralda, que sí contrasta; el verde oscuro de la
 * maqueta es para fondo blanco.
 */
.iacc-cont__form .iacc-form .legal-consent-container,
.iacc-cont__form .iacc-form .hs-richtext,
.iacc-cont__form .iacc-form .hs-field-desc {
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

/*
 * HubSpot mete el texto del consentimiento en un <span> propio con su color,
 * más adentro que el contenedor, así que hay que nombrarlo para que herede el
 * gris claro. Son las dos casillas obligatorias justo antes de enviar: si no
 * se leen, no se firman.
 */
.iacc-cont__form .iacc-form .hs-form-booleancheckbox-display span,
.iacc-cont__form .iacc-form .hs-form-booleancheckbox-display p {
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

.iacc-cont__form .iacc-form .legal-consent-container a,
.iacc-cont__form .iacc-form .hs-richtext a {
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-cont__form .iacc-form .hs-button {
	height: 48px;
	color: var(--wp--preset--color--neutral-900, #022426);
	background: var(--wp--preset--color--marca, #52a400);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgb(82 164 0 / 35%);
}

/* El botón de WhatsApp cierra la tarjeta, debajo del de enviar. */
.iacc-cont__form .iacc-cont__boton {
	display: flex;
	margin-top: 12px;
}

/*
 * Debajo de 1024 no cabe el formulario al lado del titular, y el diseño lo
 * cambia por los dos botones. La caja va oculta —no sólo estrecha— para que
 * HubSpot no llegue a pedirse: el formulario se monta cuando se acerca a la
 * pantalla, y lo que está oculto nunca se acerca.
 */
@media (max-width: 1023px) {
	.iacc-cont__form {
		display: none;
	}
}

@media (min-width: 1024px) {
	.iacc-cont__acciones {
		display: none;
	}
}

/* ==========================================================================
   Tu experiencia cuenta
   ========================================================================== */

.iacc-cont__experiencia {
	padding-block: 64px;
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

/*
 * Las dos columnas no son iguales: el texto ocupa 515 y la parte visual 665,
 * que es lo que necesita la fotografía para que las tarjetas se le apoyen
 * encima sin taparla entera.
 */
.iacc-cont__experiencia-inner {
	display: grid;
	grid-template-columns: minmax(0, 515fr) minmax(0, 665fr);
	gap: 60px;
	align-items: center;
}

.iacc-cont__experiencia-texto > * + * {
	margin-top: 16px;
}

/*
 * El remate es un párrafo destacado, no una tarjeta: en el diseño va sobre el
 * mismo fondo verde pálido de la sección, separado solo por aire.
 */
.iacc-cont__remate {
	margin-top: 0;
	padding-block: 32px;
}

.iacc-cont__remate-titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--22, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-cont__remate-texto {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* Se ajusta a su texto: a lo ancho de la columna quedaría como una barra. */
.iacc-cont__experiencia-texto .iacc-carrera__cta {
	width: max-content;
	max-width: 100%;
	margin-top: 0;
}

/* --- La fotografía y sus datos -------------------------------------------- */

/*
 * La fotografía se va a la derecha y las tarjetas se le montan encima por la
 * izquierda. Se cruzan a propósito: los datos son la promesa del piso —lo que
 * se te reconoce— y el diseño los quiere leyéndose sobre la imagen, no al lado.
 */
.iacc-cont__experiencia-visual {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 509px;
}

.iacc-cont__experiencia-imagen {
	position: absolute;
	top: 0;
	right: 0;
	width: 501px;
	height: 100%;
}

.iacc-cont__experiencia-imagen img {
	width: 100%;
	height: 100%;
	border-radius: 16px;
	object-fit: cover;
}

.iacc-cont__datos {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 340px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Un dato del programa. Radio 8 y sombra propia: van sobre la fotografía y sin
 * relieve se confundirían con ella.
 */
.iacc-cont__dato {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px 20px 16px 16px;
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgb(8 33 41 / 12%);
}

/*
 * La destacada es la del reconocimiento de estudios, que es de lo que va este
 * programa. Va en tinta con la tesela clara: el resto lo hace al revés.
 */
.iacc-cont__dato--oscuro {
	background: var(--wp--preset--color--neutral-900, #022426);
	border-color: transparent;
}

.iacc-cont__dato-tesela {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 12px;
}

.iacc-cont__dato--oscuro .iacc-cont__dato-tesela {
	color: var(--wp--preset--color--verde-profundo, #033934);
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

.iacc-cont__dato-tesela svg {
	width: 28px;
	height: 28px;
}

.iacc-cont__dato-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.iacc-cont__dato-etiqueta {
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-cont__dato--oscuro .iacc-cont__dato-etiqueta {
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
}

.iacc-cont__dato-valor {
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-cont__dato--oscuro .iacc-cont__dato-valor {
	color: var(--wp--preset--color--neutral-0, #fff);
}

/*
 * Por debajo de 1024 no hay sitio para cruzar la fotografía con las tarjetas:
 * se ponen una detrás de otra, la imagen arriba, y cada dato ocupa el ancho.
 */
@media (max-width: 1023px) {

	.iacc-cont__experiencia-visual {
		display: flex;
		flex-direction: column;
		gap: 16px;
		min-height: 0;
	}

	.iacc-cont__experiencia-imagen {
		position: static;
		width: 100%;
		height: 260px;
	}

	.iacc-cont__datos {
		width: 100%;
	}

	/* La tesela y el hueco encogen: es el segundo tamaño del componente. */
	.iacc-cont__dato {
		gap: 12px;
		align-items: flex-start;
		padding: 16px;
	}

	.iacc-cont__dato-tesela {
		width: 48px;
		height: 48px;
	}

	.iacc-cont__dato-tesela svg {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   Cómo funciona la continuidad
   ========================================================================== */

.iacc-cont__pasos {
	padding-block: 64px;
	background: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-cont__pasos .iacc-carrera__info-cabecera {
	margin-bottom: 32px;
}

.iacc-cont__pasos-lista {
	display: flex;
	gap: 24px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Un paso del proceso: tesela arriba, título y cuerpo debajo. Los cuatro miden
 * lo mismo de alto aunque uno tenga más texto, porque el alto lo manda la fila.
 */
.iacc-cont__paso {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 28px 24px;
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border: 1px solid var(--wp--preset--color--esmeralda, #2cb45f);
	border-radius: 16px;
}

/*
 * El paso destacado es el del reconocimiento de estudios, que es la razón de
 * ser del programa. Va en degradado y sin borde: el relleno ya tiene cuerpo, y
 * un borde encima solo ensuciaría el corte.
 *
 * El texto va en tinta oscura y no en blanco: sobre este verde, el blanco se
 * queda corto de contraste y la tinta llega de sobra.
 */
.iacc-cont__paso--destacado {
	color: var(--wp--preset--color--neutral-900, #022426);
	background: linear-gradient(240.65deg, #22b893 10.99%, #2cb45f 48.44%, #52a400 89.01%);
	border-color: transparent;
	box-shadow: 0 12px 30px rgb(34 184 147 / 32%);
}

/* La tesela es oscura en los cuatro: es lo que los hermana como una serie. */
.iacc-cont__paso-tesela {
	display: grid;
	flex: none;
	place-items: center;
	margin-bottom: 20px;
	width: 56px;
	height: 56px;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 12px;
}

.iacc-cont__paso-tesela svg {
	width: 28px;
	height: 28px;
}

.iacc-cont__paso-titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--22, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-cont__paso-texto {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* En el destacado los dos textos heredan la tinta de la tarjeta. */
.iacc-cont__paso--destacado .iacc-cont__paso-titulo,
.iacc-cont__paso--destacado .iacc-cont__paso-texto {
	color: inherit;
}

/* --- La línea de hitos ---------------------------------------------------- */

/*
 * Decoración: repite en forma lo que la lista ya dice en palabras, así que se
 * oculta a los lectores de pantalla en vez de hacerles recorrer cuatro puntos
 * sin contenido.
 *
 * El riel arranca y termina en el centro de la primera y la última tarjeta, no
 * en el borde de la sección: es lo que lo ata a los pasos que numera.
 */
.iacc-cont__progreso {
	position: relative;
	display: flex;
	height: 14px;
	margin-top: 32px;
}

.iacc-cont__riel {
	position: absolute;
	top: 50%;
	right: 146px;
	left: 146px;
	height: 2px;
	background: var(--wp--preset--color--verde-profundo, #033934);
	transform: translateY(-50%);
}

.iacc-cont__hito {
	display: grid;
	flex: 1;
	place-items: center;
	min-width: 0;
}

.iacc-cont__hito::before {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 2px solid var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 50%;
}

.iacc-cont__hito--activo::before {
	background: var(--wp--preset--color--marca, #52a400);
	border-color: var(--wp--preset--color--marca, #52a400);
}

.iacc-cont__pasos-cierre {
	margin: 32px 0 0;
	font-size: var(--wp--preset--font-size--22, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--texto, #272727);
	text-align: center;
	text-wrap: balance;
}

/*
 * Los puntos del carrusel solo hacen falta donde hay algo que recorrer. En
 * pantalla ancha las cuatro tarjetas están a la vista y quien manda es la línea
 * de hitos.
 */
@media (min-width: 1024px) {

	.iacc-cont__pasos-carrusel .iacc-slider__puntos {
		display: none;
	}
}

/* --- En pantalla estrecha, un carrusel ------------------------------------ */

@media (max-width: 1023px) {

	.iacc-cont__pasos {
		padding-block: 32px;
	}

	/*
	 * La pista se sale del contenedor a propósito, para que la tarjeta siguiente
	 * asome por el borde y se vea que hay más: se le quita el relleno lateral
	 * con un margen negativo del mismo valor, y luego la pista lo devuelve por
	 * dentro para que la primera tarjeta quede en su sitio.
	 *
	 * Con la variable del contenedor y no con 100vw: vw incluye el ancho de la
	 * barra de desplazamiento y en los navegadores que la pintan encima del
	 * contenido —los de escritorio— el margen se pasa de largo y saca la página
	 * de cuadro por la derecha.
	 */
	.iacc-cont__pasos-carrusel {
		margin-inline: calc(var(--container-padding, 20px) * -1);
	}

	.iacc-cont__pasos-lista {
		gap: 12px;
		padding-inline: var(--container-padding, 20px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;

		/*
		 * El ajuste obligatorio manda la primera tarjeta al borde y se come el
		 * relleno de la pista. Esto le dice dónde está de verdad el principio.
		 */
		scroll-padding-inline-start: var(--container-padding, 20px);
		overscroll-behavior-x: contain;

		/*
		 * Sin esto la página entera se desplaza de lado en móvil: el navegador
		 * propaga al documento el ancho desplazable de la pista —1196 px— y
		 * aparece una barra horizontal en todo el sitio. Ni overflow: hidden ni
		 * overflow-x: clip lo evitan; hace falta declarar la contención de
		 * pintado, que le dice al navegador que nada de aquí dentro afecta al
		 * tamaño de fuera. Es el mismo remedio que lleva el carrusel de carreras,
		 * donde ya está anotado.
		 */
		contain: paint;

		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.iacc-cont__pasos-lista::-webkit-scrollbar {
		display: none;
	}

	.iacc-cont__paso {
		flex: none;
		width: 280px;
		padding: 24px 20px;
		scroll-snap-align: start;
	}

	.iacc-cont__paso-tesela {
		margin-bottom: 16px;
		width: 48px;
		height: 48px;
	}

	.iacc-cont__paso-tesela svg {
		width: 24px;
		height: 24px;
	}

	.iacc-cont__paso-titulo {
		font-size: var(--wp--preset--font-size--20, 1.25rem);
	}

	/* Aquí manda el indicador del carrusel: la línea de hitos sobra. */
	.iacc-cont__progreso {
		display: none;
	}

	/* La cabecera pierde la raya de cierre; la alineación ya la da carrera.css. */
	.iacc-cont__pasos .iacc-carrera__raya--cierre {
		display: none;
	}

	.iacc-cont__pasos .iacc-carrera__seccion-titulo,
	.iacc-cont__pasos .iacc-carrera__seccion-texto,
	.iacc-cont__pasos-cierre {
		text-align: left;
	}

	.iacc-cont__pasos-cierre {
		margin-top: 8px;
		font-size: var(--wp--preset--font-size--20, 1.25rem);
	}
}

/* ==========================================================================
   Áreas de aprendizaje
   ========================================================================== */

.iacc-cont__areas {
	/* La lista mide 520 y la separación con el detalle, 32: de ahí sale el
	   ancho de la columna de la derecha, y así los dos números viven una vez. */
	--iacc-areas-lista: 520px;
	--iacc-areas-hueco: 32px;

	padding-block: 64px;
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
}

.iacc-cont__areas .iacc-carrera__info-cabecera {
	margin-bottom: 40px;
}

/*
 * En pantalla ancha, la lista a la izquierda y el detalle del área abierta a la
 * derecha. Los detalles van sacados del flujo y apilados en el mismo sitio:
 * solo se ve el de la abierta, y así el alto de la columna izquierda no depende
 * de cuánto texto tenga cada área.
 */
.iacc-cont__areas-selector {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 1024px) {

	/*
	 * Dos columnas: los botones a la izquierda y el detalle del área abierta a
	 * la derecha, sacado del flujo para que la lista no se descoloque.
	 *
	 * POR QUÉ EL ALTO LO PONE EL JAVASCRIPT
	 * Un panel fuera del flujo no da alto a su contenedor, y este marcado tiene
	 * que servir a dos disposiciones distintas —columnas aquí, acordeón en
	 * pantalla estrecha—, así que el detalle va escrito dentro de su área y no
	 * en una columna aparte. Con esa estructura, la rejilla solo puede reservar
	 * el hueco estirando las filas de los botones y separándolos, que es
	 * justo lo que el diseño no quiere. El JavaScript, que ya está ahí para
	 * abrir y cerrar, mide el panel abierto y ajusta el alto: una línea en el
	 * sitio donde ya se sabe cuál está abierto.
	 */
	.iacc-cont__areas-selector {
		padding-right: calc(100% - var(--iacc-areas-lista));
	}

	.iacc-cont__area-panel {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100% - var(--iacc-areas-lista) - var(--iacc-areas-hueco));

		/*
		 * Se oculta con visibility y no con display para poder cruzarlo: además
		 * de esconderlo a la vista, lo saca del árbol de accesibilidad, así que
		 * el contenido cerrado tampoco se lee.
		 */
		visibility: hidden;
		opacity: 0;
		transition: opacity .25s ease, visibility .25s;
	}

	.iacc-cont__area-item--abierta .iacc-cont__area-panel {
		visibility: visible;
		opacity: 1;
	}
}
/* --- El área --------------------------------------------------------------- */

.iacc-cont__area {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	padding: 16px 20px 16px 16px;
	font-family: inherit;
	text-align: left;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.iacc-cont__area:hover {
	border-color: var(--wp--preset--color--esmeralda, #2cb45f);
}

/* La abierta se pinta en tinta: es la que manda sobre el panel de al lado. */
.iacc-cont__area-item--abierta .iacc-cont__area {
	background: var(--wp--preset--color--neutral-900, #022426);
	border-color: var(--wp--preset--color--neutral-900, #022426);
}

.iacc-cont__area-numero {
	flex: none;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-cont__area-item--abierta .iacc-cont__area-numero {
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-cont__area-nombre {
	flex: 1;
	min-width: 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-cont__area-item--abierta .iacc-cont__area-nombre {
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* La flecha señala al panel de al lado, así que solo la lleva la abierta. */
.iacc-cont__area-flecha {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
	opacity: 0;
}

.iacc-cont__area-item--abierta .iacc-cont__area-flecha {
	opacity: 1;
}

/* El chevron es del formato pequeño, donde el panel se despliega debajo. */
.iacc-cont__area-chevron {
	display: none;
	flex: none;
	width: 20px;
	height: 20px;
}

/* --- El detalle ------------------------------------------------------------ */

/*
 * El atributo hidden esconde con display:none desde la hoja del navegador, y
 * cualquier display propio le gana. Sin esta regla se pintaban los cuatro
 * paneles a la vez, superpuestos, y se veía el último en lugar del elegido.
 */
.iacc-cont__area-panel[hidden] {
	display: none;
}

.iacc-cont__area-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	color: var(--wp--preset--color--neutral-0, #fff);
	background: linear-gradient(31.46deg, #022426 14.286%, #1c6f3b 85.714%);
	border-radius: 16px;
}

.iacc-cont__area-indice {
	margin: 0;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--esmeralda-clara, #80d29f);
}

.iacc-cont__area-titulo {
	margin: -12px 0 0;
	font-size: var(--wp--preset--font-size--28, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.iacc-cont__area-texto {
	margin: -12px 0 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--gris-claro, #e1e5e5);
}

/* El recuento encabeza la lista solo en el formato pequeño. */
.iacc-cont__area-cuenta {
	display: none;
	margin: 0;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

/*
 * Cada asignatura es una fila con su propio velo claro: sobre el degradado, una
 * lista con viñetas sueltas se perdía.
 */
.iacc-cont__asignaturas {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-cont__asignatura {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	background: rgb(255 255 255 / 14%);
	border-radius: 8px;
}

/* Viñeta de 6 px centrada en su hueco, como el resto de listas del sistema. */
.iacc-cont__asignatura-punto {
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 25px;
}

.iacc-cont__asignatura-punto::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--esmeralda-clara, #80d29f);
	border-radius: 50%;
}

/* --- En pantalla estrecha, un acordeón ------------------------------------- */

@media (max-width: 1023px) {

	.iacc-cont__areas {
		padding-block: 32px;
	}

	.iacc-cont__areas .iacc-carrera__info-cabecera {
		margin-bottom: 24px;
	}

	/*
	 * El área abierta y su detalle son una sola tarjeta en degradado: el botón
	 * pierde su fondo y su borde, y quien los pone es la caja de fuera.
	 *
	 * Y es una rejilla de dos filas —el botón y el detalle— donde la segunda
	 * pasa de 0fr a 1fr. Es la manera de animar un alto que no se conoce de
	 * antemano, porque cada área tiene sus asignaturas, sin medirlo con
	 * JavaScript. Es el mismo recurso que pliega el asistente de la portada.
	 */
	.iacc-cont__area-item {
		display: grid;
		grid-template-rows: auto 0fr;
		border-radius: 12px;
		transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
	}

	.iacc-cont__area-item--abierta {
		grid-template-rows: auto 1fr;
	}

	.iacc-cont__area-item--abierta {
		background: linear-gradient(128deg, #022426 0%, #1c6f3b 70.711%);
	}

	.iacc-cont__area {
		gap: 16px;
		padding: 20px;
		border-radius: 12px;
	}

	.iacc-cont__area-item--abierta .iacc-cont__area {
		background: none;
		border-color: transparent;
		padding-bottom: 0;
	}

	/* El número pasa a una tesela verde, que es lo que pide el diseño aquí. */
	.iacc-cont__area-numero {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		color: var(--wp--preset--color--neutral-900, #022426);
		background: var(--wp--preset--color--esmeralda, #2cb45f);
		border-radius: 12px;
	}

	.iacc-cont__area-item--abierta .iacc-cont__area-numero {
		color: var(--wp--preset--color--neutral-900, #022426);
	}

	.iacc-cont__area-nombre {
		font-size: var(--wp--preset--font-size--20, 1.25rem);
		letter-spacing: -0.005em;
	}

	/* Aquí el panel va debajo: manda el chevron y la flecha sobra. */
	.iacc-cont__area-flecha {
		display: none;
	}

	.iacc-cont__area-chevron {
		display: block;
		color: var(--wp--preset--color--texto, #272727);
		transition: transform 0.2s ease;
	}

	.iacc-cont__area-item--abierta .iacc-cont__area-chevron {
		color: var(--wp--preset--color--neutral-0, #fff);
		transform: rotate(180deg);
	}

	/* El detalle ya está dentro de la tarjeta: no repite ni fondo ni esquinas. */
	.iacc-cont__area-panel {
		gap: 16px;
		padding: 20px;
		background: none;
		border-radius: 0;

		/* Lo que se recorta mientras la fila de fuera se abre y se cierra. */
		min-height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 1;
		transition: visibility .32s;
	}

	.iacc-cont__area-item--abierta .iacc-cont__area-panel {
		visibility: visible;
	}

	.iacc-cont__area-indice,
	.iacc-cont__area-titulo {
		display: none;
	}

	.iacc-cont__area-texto {
		margin: 0;
		font-size: var(--wp--preset--font-size--16, 1rem);
		line-height: 1.45;
	}

	.iacc-cont__area-cuenta {
		display: block;
	}

	.iacc-cont__asignatura {
		padding: 12px;
		line-height: 1.45;
	}

	.iacc-cont__asignatura-punto {
		height: 23px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.iacc-cont__area,
	.iacc-cont__area-chevron,
	.iacc-cont__area-item,
	.iacc-cont__area-panel {
		transition: none;
	}
}

/* ==========================================================================
   Plan de estudios
   ========================================================================== */

.iacc-cont__plan {
	padding-block: 64px;
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

.iacc-cont__plan .iacc-carrera__info-cabecera {
	margin-bottom: 40px;
}

/* La tarjeta de la malla a la izquierda y las cuatro informativas en 2×2. */
.iacc-cont__plan-grid {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.iacc-cont__plan-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

/* --- La tarjeta de la malla ------------------------------------------------ */

/*
 * Sobre el fondo verde pálido de la sección, esta es la que manda: degradado en
 * diagonal, y los dos botones anclados abajo para que queden a la misma altura
 * pase lo que pase con el texto.
 */
.iacc-cont__plan .iacc-carrera__malla {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
	padding: 40px;
	background: linear-gradient(55.45deg, #022426 14.286%, #1c6f3b 85.714%);
	border-radius: 16px;
}

.iacc-cont__plan .iacc-carrera__malla-contenido {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * El distintivo va con borde y sin relleno: sobre el degradado, un relleno
 * pálido taparía el fondo justo donde el degradado es más vistoso.
 */
.iacc-cont__plan .iacc-carrera__malla-chip {
	align-self: flex-start;
	margin: 0;
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-clara, #97c866);
	background: none;
	border: 1px solid var(--wp--preset--color--marca-clara, #97c866);
	border-radius: 999px;
}

.iacc-cont__plan .iacc-carrera__malla-titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--28, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-cont__plan .iacc-carrera__malla-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--16, 1rem);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-cont__plan .iacc-carrera__malla-acciones {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.iacc-cont__plan .iacc-carrera__malla-boton {
	justify-content: center;
	width: 100%;
}

/* --- Las tarjetas informativas --------------------------------------------- */

.iacc-cont__plan-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 24px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

/*
 * La cabecera es un botón porque en pantalla estrecha abre la tarjeta. Aquí no
 * abre nada —están todas abiertas—, así que se presenta como lo que es en este
 * formato: la tesela y el título, sin nada que sugiera que se puede pulsar.
 */
.iacc-cont__plan-cabecera {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
	padding: 0;
	font-family: inherit;
	text-align: left;
	background: none;
	border: 0;
}

.iacc-cont__plan-card-titulo {
	font-size: var(--wp--preset--font-size--22, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--texto, #272727);
}

/* El chevron solo tiene sentido donde la tarjeta se pliega. */
.iacc-cont__plan-chevron {
	display: none;
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--texto, #272727);
	transition: transform 0.2s ease;
}

.iacc-cont__plan-cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
}

/* El enlace se pega al pie: así queda a la misma altura en las cuatro. */
.iacc-cont__plan-card .iacc-carrera__card-enlace {
	margin-top: auto;
	padding-top: 0;
}

/* --- En pantalla estrecha, un acordeón ------------------------------------- */

@media (max-width: 1023px) {

	.iacc-cont__plan {
		padding-block: 32px;
	}

	.iacc-cont__plan .iacc-carrera__info-cabecera {
		margin-bottom: 24px;
	}

	.iacc-cont__plan-grid,
	.iacc-cont__plan-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.iacc-cont__plan-cards {
		gap: 12px;
	}

	.iacc-cont__plan .iacc-carrera__malla {
		padding: 24px 20px;
	}

	.iacc-cont__plan .iacc-carrera__malla-titulo {
		font-size: var(--wp--preset--font-size--22, 1.375rem);
	}

	.iacc-cont__plan .iacc-carrera__malla-texto {
		line-height: 1.45;
	}

	/*
	 * La tarjeta se pliega con el mismo recurso que las áreas: dos filas donde
	 * la segunda pasa de 0fr a 1fr, para animar un alto que cambia con el número
	 * de puntos de cada lista.
	 */
	.iacc-cont__plan-card {
		display: grid;
		grid-template-rows: auto 0fr;
		gap: 0;
		padding: 20px;
		transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
	}

	.iacc-cont__plan-card--abierta {
		grid-template-rows: auto 1fr;
	}

	/* En este formato la cabecera es una fila: tesela, título y chevron. */
	.iacc-cont__plan-cabecera {
		flex-direction: row;
		gap: 12px;
		align-items: center;
		cursor: pointer;
	}

	.iacc-cont__plan-card .iacc-carrera__card-tesela {
		width: 48px;
		height: 48px;
	}

	.iacc-cont__plan-card .iacc-carrera__card-tesela svg {
		width: 24px;
		height: 24px;
	}

	.iacc-cont__plan-card-titulo {
		flex: 1;
		min-width: 0;
		font-size: var(--wp--preset--font-size--20, 1.25rem);
	}

	.iacc-cont__plan-chevron {
		display: block;
	}

	.iacc-cont__plan-card--abierta .iacc-cont__plan-chevron {
		transform: rotate(180deg);
	}

	.iacc-cont__plan-cuerpo {
		min-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: visibility .32s;
	}

	.iacc-cont__plan-card--abierta .iacc-cont__plan-cuerpo {
		visibility: visible;
	}

	/* El hueco con la cabecera se pliega también, o quedaría un escalón. */
	.iacc-cont__plan-card--abierta .iacc-cont__plan-cuerpo {
		padding-top: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.iacc-cont__plan-card,
	.iacc-cont__plan-chevron,
	.iacc-cont__plan-cuerpo {
		transition: none;
	}
}

/* ==========================================================================
   Antes de decidir
   ========================================================================== */

/* --- En pantalla estrecha, todo en columna --------------------------------- */

@media (max-width: 1023px) {

}

/* ==========================================================================
   Formato pequeño
   ========================================================================== */

@media (max-width: 1023px) {
	/* Sin formulario al lado, el titular ocupa el ancho entero. */
	.iacc-cont__hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* Y sin nada a lo que alinearse, el desplazamiento de arriba sobra. */
	.iacc-cont__promesa {
		padding-top: 0;
	}

	/*
	 * Aquí el piso se da la vuelta: primero la fotografía con sus datos y
	 * después el texto. Es lo que pide el diseño, y tiene sentido —los datos
	 * son la promesa y entran de un vistazo—, así que el cambio se hace con
	 * el orden de la rejilla y no moviendo el marcado: leído de corrido, el
	 * texto sigue explicando lo que las tarjetas resumen.
	 */
	.iacc-cont__experiencia-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.iacc-cont__experiencia-visual {
		order: -1;
	}

	/* A lo ancho: en una columna estrecha, un botón a medias queda huérfano. */
	.iacc-cont__experiencia-texto .iacc-carrera__cta {
		display: flex;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.iacc-cont__hero {
		min-height: 0;
		padding-block: 96px 56px;
	}

	.iacc-cont__bajada {
		font-size: var(--wp--preset--font-size--16, 1rem);
		line-height: 1.45;
	}

	.iacc-cont__chips {
		gap: 8px;
	}

	.iacc-cont__experiencia {
		padding-block: 32px;
	}

}

/* ==========================================================================
   Movimiento
   ========================================================================== */

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

	.iacc-cont__area--activa {
		transform: none;
	}
}

/* La pista recibe el foco para poder recorrerla con teclado: que se vea. */
.iacc-cont__pasos-lista:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca, #52a400);
	outline-offset: 4px;
	border-radius: 16px;
}

/* ===========================================================================
   Las preguntas frecuentes también se despliegan con calma
   ===========================================================================
   Son <details> nativos: el navegador los abre y los cierra de golpe, que era
   lo único que quedaba saltando en la ficha. Se anima la caja de contenido que
   el propio navegador expone, sin envolverla en nada ni tocar el marcado.

   Hace falta permitir la interpolación hacia alturas por palabra clave, porque
   lo que se anima va de cero a "lo que ocupe la respuesta", que no se conoce de
   antemano. Donde el navegador no lo soporte, sigue abriendo de golpe: se
   pierde la transición, no el contenido.
   ======================================================================== */

@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {

}

@media (prefers-reduced-motion: reduce) {

}

/*
 * Los avisos de error del formulario, sobre la tarjeta oscura de la portada.
 *
 * El rojo del sistema —#b23a2e— está pensado para fondo claro y sobre la tinta
 * de esta tarjeta se queda en 2,75:1. Aquí va un rojo aclarado que sí se lee: un
 * mensaje de error que no se distingue no sirve de nada, y es justo el momento
 * en que alguien necesita entender qué ha pasado.
 */
.iacc-cont__form .iacc-form .hs-error-msg,
.iacc-cont__form .iacc-form .hs-error-msgs label,
.iacc-cont__form .iacc-form .hs-error-msgs li {
	color: #ff9c92;
}