/* ===========================================================================
   FICHA DE CARRERA
   Figma: 1663:2069 (escritorio) y 1861:2390 (móvil)

   Se carga SOLO en las fichas de carrera (ver inc/enqueue.php).

   Los pisos de testimonios y del formulario no están aquí: los pintan el
   bloque y la tarjeta compartidos, con su propio CSS.

   Se escribe primero la versión móvil y luego se amplía.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Piezas comunes de la ficha
   --------------------------------------------------------------------------- */
.iacc-carrera__antetitulo {
	display: flex;
	align-items: center;
	gap: 12px;
	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);
}

/* Sobre fondo claro el verde tiene que ser el oscuro: el esmeralda no llega al
   contraste mínimo sobre blanco. */
/*
 * Centrado: lo usan las cabeceras de sección, que llevan una raya a cada lado
 * en vez de solo a la izquierda. Va en el bloque de pantalla ancha, no aquí:
 * en el formato pequeño el antetítulo se alinea a la izquierda con el resto de
 * la cabecera, igual que el titular y la bajada.
 */

.iacc-carrera__antetitulo--claro {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-carrera__raya {
	flex: none;
	width: 32px;
	height: 2px;
	background: currentcolor;
}

.iacc-carrera__seccion-titulo {
	margin: 0;

	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.45px;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-carrera__seccion-texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.45;
	color: #304b4d;
}

/* --- Botones -------------------------------------------------------------- */
.iacc-carrera__cta,
.iacc-carrera__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;

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

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

	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	/* El resplandor verde es un recurso de marca, no una sombra genérica: la
	   geometría no cambia entre estados, solo la intensidad. */
	box-shadow: 0 4px 14px rgb(82 164 0 / 40%);

	transition: background .15s ease, box-shadow .15s ease;
}

/* La flecha del botón. */
.iacc-carrera__cta-flecha {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}

.iacc-carrera__cta:hover .iacc-carrera__cta-flecha {
	transform: translateX(3px);
}

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

.iacc-carrera__cta:focus-visible,
.iacc-carrera__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-900, #022426);
	outline-offset: -2px;
}

/* Contorno: relleno transparente, el borde delimita el control. */
.iacc-carrera__boton--contorno {
	background: none;
	box-shadow: none;
	border: 1.5px solid var(--wp--preset--color--gris-borde, #ccd3d4);
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-carrera__boton--contorno:hover {
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/* ---------------------------------------------------------------------------
   Portada
   --------------------------------------------------------------------------- */
.iacc-carrera__hero {
	position: relative;
	isolation: isolate;
	padding-block: 40px 48px;
	/* Más oscuro que el neutral del resto del sitio: es el fondo al que cierra
	   la portada por abajo, y el que continúa bajo la tarjeta de cifras. */
	background: #06140f;
	overflow: hidden;
}

.iacc-carrera__hero-fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* La fotografía va al 60 %, como en el diseño: el resto del contraste lo
	   pone el velo, que es quien garantiza que el texto se lea. */
	opacity: .6;
}

/*
 * El mismo fondo que el resto de los heros: cubre la caja y se recorta por el
 * centro, sin espejar. Estuvo invertida para que la figura mirase hacia el
 * texto, pero eso da la vuelta a todo lo demás —rótulos, logotipos, la mano con
 * la que alguien escribe— y la foto deja de ser la que se subió.
 */
.iacc-carrera__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- El velo --------------------------------------------------------------
   El texto va en blanco sobre una fotografía que puede tener cualquier tono,
   así que el contraste no puede depender de la imagen. En el formato pequeño
   el texto ocupa todo el ancho y el oscurecido tiene que ser parejo; en
   escritorio se cambia por las capas del diseño. */
.iacc-carrera__hero-velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(6 20 15 / 62%) 0%, rgb(6 20 15 / 80%) 62%, #06140f 100%),
		radial-gradient(90% 60% at 70% 20%, rgb(48 168 112 / 30%) 0%, rgb(0 0 0 / 0%) 62%);
}

.iacc-carrera__hero-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.iacc-carrera__promesa {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.iacc-carrera__titulo {
	margin: 0;

	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.7px;
	color: var(--wp--preset--color--neutral-0, #fff);
	text-wrap: balance;
}

/* Lo que el editor marque en negrita dentro del titular va en el degradado de
   marca. No cambia de grosor: el titular ya es extranegrita entero y lo que
   distingue a esa parte es el color.

   Primero un verde sólido: si el recorte del fondo sobre el texto no estuviera
   disponible, la palabra se leería igual en vez de desaparecer. */
.iacc-carrera__titulo strong {
	font-weight: inherit;
	color: #7ed957;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {

	.iacc-carrera__titulo strong {
		background: linear-gradient(90deg, #63e0bf, #7ed957);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.iacc-carrera__bajada {
	margin: 0;

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

/* --- Indicador de desplazamiento ------------------------------------------
   El mismo componente del hero del Home. Los estilos se repiten aquí porque
   los del bloque viajan con el bloque, y la ficha no lo usa.

   Solo en escritorio: en el formato pequeño no hay sitio —se montaría sobre el
   panel del asistente— y ahí bajar con el dedo no necesita que nadie lo
   explique. El diseño tampoco lo incluye en móvil. */
.iacc-carrera__scroll {
	display: none;
	position: absolute;
	bottom: 76px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;

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

	padding: 0 12px;
	text-decoration: none;

	color: var(--wp--preset--color--neutral-0, #fff);
	/* Despega el trazo de la fotografía, que puede tener cualquier tono. */
	filter: drop-shadow(0 1px 3px rgb(2 20 15 / 55%));
}

.iacc-carrera__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-carrera__scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-0, #fff);
	outline-offset: 2px;
	border-radius: 8px;
}

.iacc-carrera__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-carrera__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-carrera-rueda 1.5s ease-in-out infinite;
}

@keyframes iacc-carrera-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-carrera__scroll-chevron {
	width: 20px;
	height: 20px;
	/* Acompaña a la rueda con el mismo compás. */
	animation: iacc-carrera-chevron 1.5s ease-in-out infinite;
}

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

/* 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-carrera__rueda,
	.iacc-carrera__scroll-chevron {
		animation: none;
	}
}

/* --- Panel del asistente --------------------------------------------------
   La conversación propia de la carrera está pendiente de conectar: hoy las
   sugerencias, la caja de escritura y el botón de ampliar abren el chat
   general, y "Solicitar info" abre el formulario emergente. */
.iacc-carrera__asistente {
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-900, #022426);
	border: 1px solid rgb(255 255 255 / 12%);
}

.iacc-carrera__asistente-cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.iacc-carrera__avatar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 44px;
	height: 44px;

	background: #35615d;
	border-radius: 8px;
	color: var(--wp--preset--color--esmeralda-clara, #80d29f);
}

.iacc-carrera__avatar svg {
	width: 22px;
	height: 22px;
}

/* El punto de "en línea". */
.iacc-carrera__punto-activo {
	position: absolute;
	right: -3px;
	bottom: -3px;

	width: 11px;
	height: 11px;

	background: #4caf1e;
	border: 2px solid var(--wp--preset--color--neutral-900, #022426);
	border-radius: 50%;
}

.iacc-carrera__asistente-titulo {
	flex: 1;
	margin: 0;

	font-size: var(--wp--preset--font-size--22, 22px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.11px;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* Abrir el chat a pantalla completa. */
.iacc-carrera__asistente-abrir {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	cursor: pointer;

	background: rgb(255 255 255 / 8%);
	color: var(--wp--preset--color--neutral-0, #fff);

	transition: background .15s ease;
}

.iacc-carrera__asistente-abrir:hover {
	background: rgb(255 255 255 / 16%);
}

.iacc-carrera__asistente-abrir svg {
	width: 18px;
	height: 18px;
}

.iacc-carrera__asistente-abrir:focus-visible,
.iacc-carrera__enviar:focus-visible,
.iacc-carrera__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--esmeralda, #2cb45f);
	outline-offset: 2px;
}

.iacc-carrera__asistente-cuerpo {
	display: flex;
	flex-direction: column;
	/* Sin hueco: la separación entre las pestañas y lo que se pliega la pone
	   la caja interior, que es la que desaparece al cerrar. */
	gap: 0;
	/* Los 16 px de abajo son el respiro del panel, que en el diseño pequeño
	   va bajo el cuerpo. */
	padding: 14px 16px 30px;
}

/* --- Las dos pestañas ----------------------------------------------------- */
.iacc-carrera__tabs {
	display: flex;
	gap: 6px;
	padding: 5px;
	border-radius: 10px;
	background: rgb(255 255 255 / 8%);
}

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

	padding: 10px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	/* La segunda es un enlace al formulario, no un botón. */
	text-decoration: none;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--gris-borde, #ccd3d4);

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

.iacc-carrera__tab:hover {
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* La activa describe lo que ya se está viendo, así que no es un botón. */
.iacc-carrera__tab--activa,
.iacc-carrera__tab--activa:hover {
	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	cursor: default;
}

/* --- Plegado en el formato pequeño ----------------------------------------
   Desplegado se comería la portada entera, así que arranca cerrado y se abre
   con el chevron de la cabecera. Solo se pliega lo de abajo: las dos pestañas
   siguen a la vista, que son el atajo útil.

   Sin JavaScript el panel se queda cerrado. No se pierde nada: lo que hay
   dentro son el saludo y los atajos al chat, que tampoco funcionarían. */
.iacc-carrera__asistente-extra {
	/*
	 * Una rejilla de una sola fila que pasa de 0fr a 1fr. Es la manera de
	 * animar una altura que no se conoce de antemano —el saludo ocupa lo que
	 * ocupe según el nombre de la carrera— sin medirla con JavaScript.
	 */
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}

.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-extra {
	grid-template-rows: 1fr;
}

.iacc-carrera__asistente-interior {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* La separación con las pestañas va aquí dentro y no como hueco del
	   cuerpo: así se pliega con el resto en vez de quedarse como un escalón
	   bajo las pestañas. Cerrado vale cero, o el panel plegado quedaría 14 px
	   más alto de lo que pide el diseño. */
	margin-top: 0;
	overflow: hidden;
	/* Sin esto, la fila de 0fr no puede encogerla: el mínimo de un elemento de
	   rejilla es el tamaño de su contenido mientras no se diga lo contrario, y
	   cerrada seguiría ocupando lo que ocupe la conversación. */
	min-height: 0;

	/*
	 * Cerrado no basta con que mida cero: sin visibility los botones de dentro
	 * seguirían recibiendo el tabulador y los leería un lector de pantalla. Se
	 * retrasa hasta el final del cierre para no cortar la animación de golpe.
	 */
	visibility: hidden;
	opacity: 0;
	transition:
		margin-top .32s cubic-bezier(.4, 0, .2, 1),
		opacity .2s ease,
		visibility 0s linear .32s;
}

.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-interior {
	visibility: visible;
	opacity: 1;
	margin-top: 14px;
	/* Entra un poco después de que la caja empiece a crecer: primero se hace
	   sitio y luego aparece el contenido. */
	transition:
		margin-top .32s cubic-bezier(.4, 0, .2, 1),
		opacity .22s ease .08s,
		visibility 0s;
}

/* Terminada la apertura se levanta el recorte, o el anillo de foco de los
   botones de dentro saldría cortado. Lo pone el script al acabar la
   animación. */
.iacc-carrera__asistente-interior[data-visible] {
	overflow: visible;
}

.iacc-carrera__asistente-plegar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	cursor: pointer;

	background: rgb(255 255 255 / 8%);
	color: var(--wp--preset--color--neutral-0, #fff);

	transition: background .15s ease;
}

.iacc-carrera__asistente-plegar:hover {
	background: rgb(255 255 255 / 16%);
}

.iacc-carrera__asistente-plegar:focus-visible {
	outline: 2px solid var(--wp--preset--color--esmeralda, #2cb45f);
	outline-offset: 2px;
}

.iacc-carrera__asistente-plegar svg {
	width: 20px;
	height: 20px;
	/* Mismo compás y misma curva que la caja: giran a la vez. */
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

/* Abierto, el chevron mira hacia arriba: cerrar. */
.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-plegar svg {
	transform: rotate(180deg);
}

/* Con "reducir movimiento" el panel se abre y se cierra igual, pero sin
   recorrido: lo que se retira es la animación, no la función. */
@media (prefers-reduced-motion: reduce) {

	.iacc-carrera__asistente-plegar svg,
	.iacc-carrera__asistente-extra,
	.iacc-carrera__asistente-interior,
	.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-interior {
		transition: none;
	}
}

/* En el formato pequeño el botón de ampliar cede su sitio al de plegar. */
.iacc-carrera__asistente-abrir {
	display: none;
}

/* --- El saludo ------------------------------------------------------------ */
.iacc-carrera__burbuja {
	margin: 0;
	padding: 16px 18px;

	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 12px;

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--texto, #272727);
}

/* --- Las preguntas de arranque -------------------------------------------- */
.iacc-carrera__sugerencia {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;

	padding: 14px 16px;
	border: 0;
	border-radius: 10px;
	background: rgb(255 255 255 / 8%);
	cursor: pointer;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	text-align: left;
	color: var(--wp--preset--color--neutral-0, #fff);

	transition: background .15s ease;
}

.iacc-carrera__sugerencia:hover {
	background: rgb(255 255 255 / 16%);
}

.iacc-carrera__sugerencia:focus-visible {
	outline: 2px solid var(--wp--preset--color--esmeralda, #2cb45f);
	outline-offset: 2px;
}

.iacc-carrera__sugerencia svg {
	flex: none;
	width: 10px;
	height: 10px;
	color: var(--wp--preset--color--esmeralda-clara, #80d29f);
	transition: transform .15s ease;
}

.iacc-carrera__sugerencia:hover svg {
	transform: translateX(3px);
}

/* --- La caja de escritura -------------------------------------------------
   De solo lectura hasta que el chat esté conectado: se ve como en el diseño
   sin dejar escribir una pregunta que nadie recogería. */
.iacc-carrera__campo {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 8px 8px 8px 18px;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 10px;
	background: rgb(255 255 255 / 6%);
}

.iacc-carrera__entrada {
	flex: 1;
	min-width: 0;

	padding: 0;
	border: 0;
	background: none;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-carrera__entrada::placeholder {
	color: var(--wp--preset--color--gris-borde, #ccd3d4);
	opacity: 1;
}

/*
 * EL FOCO LO MARCA LA CAJA
 * El campo no lleva borde propio: el marco es el contenedor. Un contorno
 * alrededor del texto dibujaba un rectángulo suelto por dentro de ese marco,
 * separado cuatro píxeles y con dos bordes concéntricos.
 *
 * Se quita de un sitio y se pone en el otro: quitarlo sin más dejaría sin
 * señal a quien navega con teclado, que es justo para quien está.
 */
.iacc-carrera__entrada:focus,
.iacc-carrera__entrada:focus-visible {
	outline: none;
}

.iacc-carrera__campo:focus-within {
	background: rgb(255 255 255 / 10%);
	border-color: var(--wp--preset--color--esmeralda, #2cb45f);
}

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

	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	cursor: pointer;

	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);

	transition: background .15s ease;
}

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

.iacc-carrera__enviar svg {
	width: 20px;
	height: 20px;
}

/* ---------------------------------------------------------------------------
   Cifras de la carrera
   --------------------------------------------------------------------------- */
.iacc-carrera__cifras {
	position: relative;
	z-index: 1;
	padding-block: 24px;
	background: var(--wp--preset--color--neutral-0, #fff);
	/*
	 * En escritorio la tarjeta se monta sobre la portada con un margen
	 * negativo. Sin esto ese margen se escaparía hacia fuera y subiría la
	 * sección entera, y su fondo blanco se comería el final de la portada: lo
	 * que tiene que montarse es la tarjeta, no el piso.
	 */
	display: flow-root;
}

/*
 * En el formato pequeño no hay una tarjeta que las agrupe: son cuatro fichas
 * sueltas en dos columnas, cada una con su borde. La tarjeta con sombra que se
 * monta sobre la portada aparece solo en escritorio.
 */
.iacc-carrera__cifras-lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-carrera__cifra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;

	padding: 14px;
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 8px;
}

.iacc-carrera__cifra-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--marca, #52a400);
}

.iacc-carrera__cifra-icono svg {
	width: 24px;
	height: 24px;
}

.iacc-carrera__cifra-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.iacc-carrera__cifra-valor {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.45px;
	color: var(--wp--preset--color--texto, #272727);
	/* Todas las cifras ocupan lo mismo aunque cambien de dígito. */
	font-variant-numeric: tabular-nums;
}

.iacc-carrera__cifra-etiqueta {
	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* ---------------------------------------------------------------------------
   ¿Es para mí?
   --------------------------------------------------------------------------- */
.iacc-carrera__perfiles {
	padding-block: 32px;
	background: var(--wp--preset--color--neutral-0, #fff);
}

/*
 * En el formato pequeño los tres bloques van uno bajo otro en el orden en que
 * están escritos: texto, perfiles y la tarjeta del asistente al final. En
 * escritorio la rejilla los recoloca en dos columnas sin tocar el marcado.
 */
.iacc-carrera__perfiles-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.iacc-carrera__perfiles-intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --- Los perfiles --------------------------------------------------------- */
.iacc-carrera__perfiles-lista {
	display: grid;
	gap: 10px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-carrera__perfil {
	display: flex;
	align-items: flex-start;
	gap: 16px;

	padding: 20px;
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border: 1px solid var(--wp--preset--color--esmeralda, #2cb45f);
	border-radius: 12px;
}

.iacc-carrera__perfil-tesela {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 48px;
	height: 48px;

	background: var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 12px;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

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

.iacc-carrera__perfil-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.iacc-carrera__perfil-titulo {
	margin: 0;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.1px;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-carrera__perfil-texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* --- La tarjeta del asistente ---------------------------------------------
   Blanca sobre fondo blanco: lo que la delimita es el borde, no el relleno,
   así que el borde no es decorativo y no se puede quitar. */
.iacc-carrera__dudas {
	display: flex;
	align-items: flex-start;
	gap: 14px;

	padding: 20px 16px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 20px;
	box-shadow: 0 8px 24px rgb(8 33 41 / 10%);
}

.iacc-carrera__dudas-tesela {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 56px;
	height: 56px;

	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border-radius: 12px;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

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

.iacc-carrera__dudas-cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.iacc-carrera__dudas-titulo {
	margin: 0;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.1px;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-carrera__dudas-texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

.iacc-carrera__dudas-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	/* Los 8 px de arriba son la holgura que pide el componente para que el
	   resplandor verde no se corte contra el texto de encima. */
	margin-top: 8px;
	min-height: 48px;
	padding: 6px 24px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;

	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	/* Ajustado: en el formato pequeño el texto ocupa dos líneas y con más
	   interlineado el botón se estiraría por encima de los 48 px del
	   componente. */
	line-height: 1.15;
	text-align: center;

	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	box-shadow: 0 4px 14px rgb(82 164 0 / 40%);

	transition: background .15s ease;
}

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

.iacc-carrera__dudas-boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-900, #022426);
	outline-offset: -2px;
}

.iacc-carrera__dudas-boton:hover .iacc-carrera__cta-flecha {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   Información clave
   --------------------------------------------------------------------------- */
.iacc-carrera__info {
	padding-block: 32px;
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

.iacc-carrera__info-cabecera {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* La segunda raya del antetítulo solo existe cuando el encabezado va
   centrado, y eso solo pasa en escritorio. */
.iacc-carrera__raya--cierre {
	display: none;
}

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

/* --- La tarjeta de la malla -----------------------------------------------
   Es la pieza oscura del piso: se apoya sobre el verde claro del fondo y por
   eso lleva el degradado de marca en vez de un plano. */
.iacc-carrera__malla {
	display: flex;
	flex-direction: column;
	gap: 20px;

	padding: 24px 20px;
	border-radius: 16px;
	background: linear-gradient(36.93deg, #022426 14.29%, #1c6f3b 85.71%);
	color: var(--wp--preset--color--neutral-0, #fff);
}

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

.iacc-carrera__malla-chip {
	margin: 0;
	padding: 8px 14px;

	border: 1px solid var(--wp--preset--color--marca-clara, #97c866);
	border-radius: 999px;

	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--marca-clara, #97c866);
}

.iacc-carrera__malla-titulo {
	margin: 0;

	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.45px;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-carrera__malla-texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-0, #fff);
}

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

.iacc-carrera__malla-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

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

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

	background: var(--wp--preset--color--marca, #52a400);
	color: var(--wp--preset--color--neutral-900, #022426);
	box-shadow: 0 4px 14px rgb(82 164 0 / 40%);

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

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

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

.iacc-carrera__malla-boton svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* La segunda acción no compite con la primera: el borde la delimita y el
   relleno se queda en el degradado de la tarjeta. */
.iacc-carrera__malla-boton--contorno {
	background: none;
	box-shadow: none;
	border: 1.5px solid var(--wp--preset--color--esmeralda, #2cb45f);
	color: var(--wp--preset--color--marca-suave, #dcedcc);
}

.iacc-carrera__malla-boton--contorno:hover {
	background: rgb(44 180 95 / 16%);
	border-color: var(--wp--preset--color--esmeralda-clara, #80d29f);
}

/* --- Las tarjetas de información ------------------------------------------ */
.iacc-carrera__info-cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.iacc-carrera__card {
	display: flex;
	align-items: flex-start;
	gap: 12px;

	padding: 16px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgb(8 33 41 / 6%);
}

.iacc-carrera__card-tesela {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 48px;
	height: 48px;

	background: var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 12px;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

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

.iacc-carrera__card-cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.iacc-carrera__card-titulo {
	margin: 0;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.1px;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-carrera__card-texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

.iacc-carrera__card-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-carrera__card-lista li {
	display: flex;
	align-items: flex-start;
	gap: 8px;

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* Punto en vez de tilde: en el diseño la lista de requisitos son viñetas. */
.iacc-carrera__vineta {
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--marca, #52a400);
}

.iacc-carrera__card-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-carrera__card-enlace svg {
	flex: none;
	width: 14px;
	height: 14px;
	transition: transform .15s ease;
}

.iacc-carrera__card-enlace:hover svg {
	transform: translateX(3px);
}

.iacc-carrera__card-enlace:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Por qué IACC
   --------------------------------------------------------------------------- */
.iacc-carrera__porque {
	padding-block: 64px;
	background: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-carrera__porque-cabecera {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
	text-align: center;
}

/* La fotografía a la izquierda y las razones al lado, una debajo de otra. */
.iacc-carrera__porque-grid {
	display: grid;
	grid-template-columns: 500px minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.iacc-carrera__porque-imagen {
	height: 100%;
}

/* Se estira hasta donde llegue la lista de al lado, que es la que manda. */
.iacc-carrera__porque-imagen img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	object-fit: cover;
}

.iacc-carrera__razones {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Una razón: tesela a la izquierda, título y explicación al lado. Al centro y
 * no arriba, porque el texto ocupa una o dos líneas y con el icono arriba
 * quedaría descolgado en las de una sola.
 */
.iacc-carrera__razon {
	display: flex;
	gap: 16px;
	align-items: center;
	/* 15 y 19 con el borde de 1 px dan los 16/20 del diseño, y la fila los 88. */
	padding: 15px 19px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 8px;
}

/*
 * El icono va en esmeralda, no en blanco: es el color que tiene en el archivo
 * de diseño —#2cb45f medido sobre la propia imagen— y da 4,9:1 contra el verde
 * profundo de la tesela, por encima del 3:1 que se pide a un gráfico.
 */
.iacc-carrera__razon-tesela {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
	background: var(--wp--preset--color--verde-profundo, #033934);
	border-radius: 12px;
}

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

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

.iacc-carrera__razon-titulo {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-carrera__razon-texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--14, 14px);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* Solo lo lleva la razón que se puede consultar aparte, la de las becas. */
.iacc-carrera__razon-enlace {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	text-decoration: none;
}

.iacc-carrera__razon-enlace:hover,
.iacc-carrera__razon-enlace:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.iacc-carrera__razon-enlace svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* --- Por qué IACC, en pantalla estrecha ----------------------------------- */

@media (max-width: 991px) {

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

	.iacc-carrera__porque-cabecera {
		margin-bottom: 20px;
		text-align: left;
	}

	/* Sin sitio para dos columnas: la fotografía encabeza y las razones siguen. */
	.iacc-carrera__porque-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.iacc-carrera__porque-imagen {
		height: auto;
	}

	.iacc-carrera__porque-imagen img {
		height: 220px;
	}

	/*
	 * Arriba y no al centro: aquí el texto ocupa dos y tres líneas, y con el
	 * icono centrado quedaría flotando a media altura.
	 */
	/* En el formato pequeño las filas respiran más: 20 px entre ellas, no 12. */
	.iacc-carrera__razones {
		gap: 20px;
	}

	.iacc-carrera__razon {
		gap: 12px;
		align-items: flex-start;
		padding: 15px;
	}

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

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

	/* La cabecera pierde la raya de cierre, como el resto de la ficha. */
	.iacc-carrera__porque-cabecera .iacc-carrera__raya--cierre {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   La ventana de la malla
   --------------------------------------------------------------------------- */
.iacc-modal--malla .iacc-form {
	padding-top: 56px;
}

/* El enlace de descarga que aparece cuando el formulario se ha enviado. */
.iacc-carrera__descarga {
	margin-top: 16px;
}

/* ===========================================================================
   ESCRITORIO
   =========================================================================== */
@media (min-width: 992px) {

	.iacc-carrera__seccion-titulo {
		font-size: var(--wp--preset--font-size--40, 40px);
		letter-spacing: -0.6px;
	}

	.iacc-carrera__seccion-texto {
		font-size: var(--wp--preset--font-size--18, 18px);
		line-height: 1.55;
	}

	/* --- Portada --------------------------------------------------------- */
	.iacc-carrera__hero {
		/* Deja sitio abajo para el indicador y para la tarjeta de cifras, que
		   se monta sobre la portada. */
		padding-block: 72px 130px;
	}

	/* Las capas del diseño: los resplandores de marca, la sombra diagonal que
	   despeja la columna del texto y el cierre hacia el piso siguiente. */
	.iacc-carrera__hero-velo {
		background:
			linear-gradient(180deg, rgb(6 20 15 / 0%) 0%, rgb(6 20 15 / 0%) 55%, rgb(6 20 15 / 55%) 82%, #06140f 100%),
			linear-gradient(113.7deg, #06140f 7%, rgb(7 22 17 / 84%) 24%, rgb(8 28 21 / 50%) 34%, rgb(8 28 21 / 18%) 44%, rgb(0 0 0 / 0%) 53%),
			linear-gradient(0deg, #06140f 0%, rgb(7 20 15 / 50%) 9%, rgb(0 0 0 / 0%) 24%),
			radial-gradient(90% 188% at 70% 34%, rgb(48 168 112 / 36%) 0%, rgb(24 84 56 / 18%) 29%, rgb(0 0 0 / 0%) 58%),
			radial-gradient(65% 136% at 24% 74%, rgb(30 128 86 / 22%) 0%, rgb(0 0 0 / 0%) 62%),
			radial-gradient(53% 111% at 99% 80%, rgb(90 176 20 / 18%) 0%, rgb(0 0 0 / 0%) 64%);
	}

	.iacc-carrera__hero-inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 74px;
	}

	.iacc-carrera__promesa {
		flex: 0 1 620px;
		gap: 24px;
	}

	.iacc-carrera__titulo {
		font-size: var(--wp--preset--font-size--72, 72px);
		line-height: 1.05;
		letter-spacing: -2px;
		/* Sin equilibrar: el corte natural es el del diseño —el nombre en la
		   primera línea y el resto en la segunda— y equilibrar lo movería. */
		text-wrap: normal;
	}

	.iacc-carrera__scroll {
		display: flex;
	}

	.iacc-carrera__bajada {
		font-size: var(--wp--preset--font-size--18, 18px);
		line-height: 1.55;
		max-width: 509px;
	}

	.iacc-carrera__cta {
		width: auto;
	}

	/*
	 * Alto fijo, para que la portada no se mueva según lo que se haya
	 * conversado. Aquí lo lleva el panel y no la caja interior, que en este
	 * formato sale del reparto con display:contents y no pinta caja.
	 */
	.iacc-carrera__asistente {
		display: flex;
		flex: 0 0 496px;
		flex-direction: column;
		height: 560px;
	}

	.iacc-carrera__asistente-cuerpo {
		flex: 1;
		min-height: 0;
	}

	/* Con el panel repartiendo el alto, la caja interior ya no manda. */
	.iacc-carrera__asistente-interior {
		height: auto;
	}

	.iacc-carrera__asistente-cabecera {
		gap: 14px;
		padding: 18px 20px;
	}

	.iacc-carrera__asistente-cuerpo {
		padding: 18px 20px 20px;
	}

	.iacc-carrera__tab {
		font-size: var(--wp--preset--font-size--16, 16px);
	}

	/* En escritorio está todo a la vista: no hay nada que plegar, y el
	   envoltorio sale del reparto para que sus hijos sigan colocándose como
	   hermanos del resto del cuerpo. */
	.iacc-carrera__asistente-plegar {
		display: none;
	}

	.iacc-carrera__asistente-abrir {
		display: flex;
	}

	.iacc-carrera__asistente-cuerpo {
		gap: 14px;
	}

	.iacc-carrera__asistente-extra,
	.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-extra {
		display: contents;
	}

	/*
	 * Sale del reparto igual que la caja de fuera. La visibilidad se repite
	 * aquí a propósito: con display:contents el elemento no pinta caja, pero
	 * visibility sí se hereda, y sin esto los hijos nacerían ocultos.
	 */
	.iacc-carrera__asistente-interior {
		display: contents;
		visibility: visible;
		opacity: 1;
	}

	/* --- Cifras ---------------------------------------------------------- */
	.iacc-carrera__cifras {
		/* Arriba no hace falta hueco: lo abre la propia tarjeta al subir. */
		padding-block: 0 52px;
	}

	/*
	 * Aquí sí hay tarjeta: una sola, con borde y sombra, que se monta 36 px
	 * sobre la portada. Las columnas se reparten solas, así que una ficha con
	 * tres cifras en vez de cuatro sigue quedando repartida.
	 */
	.iacc-carrera__cifras-lista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 0;

		margin-top: -36px;
		padding: 24px 0;

		background: var(--wp--preset--color--neutral-0, #fff);
		border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
		border-radius: 16px;
		box-shadow:
			0 2px 6px rgb(8 33 41 / 6%),
			0 12px 32px rgb(8 33 41 / 12%);
	}

	/* Cada cifra pierde su borde: dentro de la tarjeta lo que separa es la
	   línea vertical entre columnas. */
	.iacc-carrera__cifra {
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;

		padding: 0 24px;
		border: 0;
		border-radius: 0;
	}

	.iacc-carrera__cifra + .iacc-carrera__cifra {
		border-left: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	}

	.iacc-carrera__cifra-icono {
		width: 46px;
		height: 46px;
	}

	.iacc-carrera__cifra-icono svg {
		width: 34px;
		height: 34px;
	}

	.iacc-carrera__cifra-valor {
		font-size: var(--wp--preset--font-size--48, 48px);
		line-height: 1.1;
		letter-spacing: -0.72px;
	}

	/* --- ¿Es para mí? ---------------------------------------------------- */
	.iacc-carrera__perfiles {
		padding-block: 55px 71px;
	}

	/*
	 * Dos columnas: a la izquierda el texto y bajo él la tarjeta del
	 * asistente; a la derecha los cuatro perfiles, ocupando las dos filas.
	 * La altura la manda la columna izquierda y los perfiles se estiran hasta
	 * ella, que es lo que hace que las cuatro tarjetas queden iguales.
	 */
	.iacc-carrera__perfiles-inner {
		display: grid;
		grid-template-columns: 520px 1fr;
		column-gap: 48px;
		row-gap: 32px;
		align-items: start;
	}

	.iacc-carrera__perfiles-intro {
		grid-column: 1;
		grid-row: 1;
	}

	.iacc-carrera__perfiles-lista {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: stretch;

		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 1fr;
		gap: 16px;
	}

	.iacc-carrera__dudas {
		grid-column: 1;
		grid-row: 2;
		gap: 20px;
		padding: 28px;
	}

	/* En la maqueta grande la tarjeta cambia de forma: el icono se pone
	   encima del texto en vez de a su lado. */
	.iacc-carrera__perfil {
		flex-direction: column;
		gap: 16px;
		padding: 30px 24px;
	}

	.iacc-carrera__perfil-tesela {
		width: 56px;
		height: 56px;
	}

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

	.iacc-carrera__perfil-titulo,
	.iacc-carrera__dudas-titulo {
		font-size: var(--wp--preset--font-size--22, 22px);
		letter-spacing: -0.11px;
	}

	.iacc-carrera__dudas-tesela {
		width: 64px;
		height: 64px;
	}

	.iacc-carrera__dudas-tesela svg {
		width: 32px;
		height: 32px;
	}

	.iacc-carrera__dudas-texto {
		line-height: 1.55;
	}

	/* --- Información clave ----------------------------------------------- */
	.iacc-carrera__info {
		padding-block: 70px;
	}

	/* Aquí el encabezado va centrado y con raya a los dos lados; en el formato
	   pequeño se queda alineado a la izquierda, como el resto del piso. */
	.iacc-carrera__info-cabecera {
		align-items: center;
		text-align: center;
	}

	/*
	 * El antetítulo se centra aquí y no en la regla base. Estaba fuera del
	 * bloque, así que seguía centrado en el formato pequeño mientras el titular
	 * y la bajada se iban a la izquierda, y se venía parcheando piso a piso.
	 */
	.iacc-carrera__antetitulo--centro {
		justify-content: center;
	}

	.iacc-carrera__raya--cierre {
		display: block;
	}

	.iacc-carrera__info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-top: 40px;
		align-items: start;
	}

	.iacc-carrera__malla {
		gap: 32px;
		justify-content: space-between;
		padding: 55px;
		height: 100%;
	}

	.iacc-carrera__malla-titulo {
		font-size: var(--wp--preset--font-size--40, 40px);
		letter-spacing: -0.6px;
		max-width: 305px;
	}

	.iacc-carrera__malla-texto {
		line-height: 1.55;
		max-width: 345px;
	}

	.iacc-carrera__malla-acciones {
		width: 300px;
		max-width: 100%;
	}

	/* --- La malla como una caja más ---------------------------------------
	   La disposición de siempre le da a la malla su columna entera y la estira
	   hasta el alto de todo lo que tenga enfrente: con tres tarjetas cortas es
	   el diseño, pero con cinco y listas de competencias son mil píxeles de
	   caja para doscientos de tarjeta, y medio piso queda vacío.

	   Aquí la malla entra en la misma rejilla que las tarjetas —el envoltorio
	   de estas se disuelve con display: contents— y ocupa una celda como
	   cualquiera de ellas. Las de una misma fila se igualan entre sí, que es
	   lo que se pedía. */
	.iacc-carrera__info-grid--parejo {
		align-items: stretch;
	}

	.iacc-carrera__info-grid--parejo .iacc-carrera__info-cards {
		display: contents;
	}

	/* Dos filas de alto: sigue siendo la pieza que más pesa del piso —lleva el
	   distintivo, el titular y los dos botones— pero con un tope. Lo que crezca
	   la columna de enfrente a partir de ahí ya no la estira. */
	.iacc-carrera__info-grid--parejo .iacc-carrera__malla {
		grid-row: span 2;
		gap: 24px;
		padding: 32px;
		height: auto;
	}

	.iacc-carrera__info-grid--parejo .iacc-carrera__malla-titulo {
		font-size: var(--wp--preset--font-size--30, 30px);
		letter-spacing: -0.45px;
		max-width: none;
	}

	.iacc-carrera__info-grid--parejo .iacc-carrera__malla-texto {
		max-width: none;
	}

	.iacc-carrera__info-grid--parejo .iacc-carrera__malla-acciones {
		width: 100%;
	}

	.iacc-carrera__card {
		gap: 16px;
		padding: 24px;
	}

	.iacc-carrera__card-tesela {
		width: 56px;
		height: 56px;
	}

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

	.iacc-carrera__card-titulo {
		font-size: var(--wp--preset--font-size--22, 22px);
		letter-spacing: -0.11px;
	}

}

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

	.iacc-carrera__cta,
	.iacc-carrera__boton,
	.iacc-carrera__sugerencia {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Previsualización de la malla

   La misma ventana que ya funciona en la ficha de institutoiacc.cl: cabecera
   oscura, filtros por diplomado, el tablero de ciclos y el botón de descarga
   al pie. El tablero se pinta en el servidor; el script solo abre, cierra y
   resalta.
   --------------------------------------------------------------------------- */
.iacc-malla {
	width: 100%;
	max-width: 1180px;
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: 22px;
	overflow: hidden;

	background: #fbfdfb;
	color: var(--wp--preset--color--texto, #272727);
	box-shadow: 0 50px 120px rgb(0 0 0 / 55%);
}

.iacc-malla::backdrop {
	background: rgb(4 12 9 / 82%);
	backdrop-filter: blur(12px);
}

.iacc-malla__caja {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

/* --- Cabecera ------------------------------------------------------------- */
.iacc-malla__cabecera {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 28px;
	background: #082129;
}

.iacc-malla__encabezado {
	flex: 1;
	min-width: 200px;
}

.iacc-malla__antetitulo {
	margin: 0;

	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #7ed957;
}

.iacc-malla__titulo {
	margin: 7px 0 0;

	font-size: var(--wp--preset--font-size--22, 22px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 9px 0 0;

	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.2;
	color: rgb(255 255 255 / 62%);
}

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

	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 11px;
	cursor: pointer;

	background: rgb(255 255 255 / 6%);
	color: rgb(255 255 255 / 78%);

	transition: background .15s ease;
}

.iacc-malla__cerrar:hover {
	background: rgb(255 255 255 / 16%);
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__cerrar svg {
	width: 18px;
	height: 18px;
}

/* --- Filtros por diplomado ------------------------------------------------ */
.iacc-malla__filtros {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;

	padding: 16px 28px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-bottom: 1px solid rgb(8 33 41 / 8%);
}

.iacc-malla__filtros-titulo {
	margin-right: 4px;

	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* El gris de la maqueta original se queda en 3,59:1 sobre blanco, por
	   debajo del mínimo para un texto de 11,5 px. */
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-malla__filtro {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 9px 15px;
	border: 1px solid rgb(8 33 41 / 16%);
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;

	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--neutral-700, #304b4d);
	background: var(--wp--preset--color--neutral-0, #fff);

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

.iacc-malla__filtro:hover {
	border-color: rgb(8 33 41 / 30%);
}

.iacc-malla__filtro--activo {
	background: #082129;
	border-color: #082129;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__punto {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

/* --- El tablero ----------------------------------------------------------- */
.iacc-malla__tablero {
	padding: 26px 28px 30px;
	overflow-y: auto;
}

.iacc-malla__anio {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 6px 0 14px;
}

.iacc-malla__anio-etiqueta {
	padding: 8px 14px;
	background: #eafbe0;
	border: 1px solid rgb(82 164 0 / 30%);
	border-radius: 8px;

	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	color: #082129;
}

.iacc-malla__anio-raya {
	flex: 1;
	height: 1px;
	background: rgb(8 33 41 / 10%);
}

.iacc-malla__fila {
	display: grid;
	grid-template-columns: repeat(var(--iacc-ciclos, 5), minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 26px;
}

.iacc-malla__ciclo-nombre {
	margin: 0 0 10px;
	padding: 9px 11px;
	background: #082129;
	border-radius: 8px;

	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__ramos {
	display: flex;
	flex-direction: column;
	gap: 10px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-malla__ramo {
	position: relative;

	padding: 13px 14px;
	background: #f2f4f3;
	border: 1px solid rgb(8 33 41 / 10%);
	border-radius: 11px;

	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.32;
	color: #1f2a26;

	transition: opacity .28s ease, box-shadow .28s ease, transform .28s ease;
}

.iacc-malla__ramo--transversal {
	background: #eafbe0;
	border-color: rgb(82 164 0 / 35%);
	color: #2c5414;
}

/* Al filtrar por un diplomado, el resto se retira sin desaparecer: la malla
   sigue completa y se ve dónde encaja lo resaltado. */
.iacc-malla__ramo--apagado {
	opacity: .3;
}

.iacc-malla__ramo--realce {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgb(8 33 41 / 14%);
}

.iacc-malla__distintivo {
	position: absolute;
	top: -7px;
	left: -7px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgb(8 33 41 / 25%);

	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* --- Leyenda -------------------------------------------------------------- */
.iacc-malla__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;

	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid rgb(8 33 41 / 8%);
}

.iacc-malla__leyenda p {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;

	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #082129;
}

/* En la leyenda los distintivos van en su sitio, no colgando de una tarjeta. */
.iacc-malla__leyenda .iacc-malla__distintivo {
	position: static;
	width: 22px;
	height: 22px;
	box-shadow: none;
}

.iacc-malla__distintivo--transversal {
	background: #eafbe0;
	border: 1px solid rgb(82 164 0 / 40%);
	border-radius: 6px;
}

/* --- Pie ------------------------------------------------------------------ */
.iacc-malla__pie {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;

	padding: 16px 28px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-top: 1px solid rgb(8 33 41 / 8%);
}

/* En el formato pequeño la ventana ocupa la pantalla entera y los ciclos se
   apilan: cinco columnas de 60 px no las lee nadie. */
@media (max-width: 767px) {

	.iacc-malla {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.iacc-malla__caja {
		height: 100%;
		max-height: none;
	}

	.iacc-malla__cabecera,
	.iacc-malla__filtros,
	.iacc-malla__pie {
		padding-inline: 16px;
	}

	.iacc-malla__tablero {
		padding: 20px 16px 24px;
	}

	.iacc-malla__fila {
		grid-template-columns: 1fr;
	}

	.iacc-malla__filtros {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.iacc-malla__filtros::-webkit-scrollbar {
		display: none;
	}

	.iacc-malla__filtro,
	.iacc-malla__filtros-titulo {
		flex-shrink: 0;
	}

	.iacc-malla__leyenda {
		gap: 14px;
	}

	.iacc-malla__pie .iacc-carrera__malla-boton {
		width: 100%;
	}
}

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

	.iacc-malla__ramo {
		transition: none;
	}

	.iacc-malla__ramo--realce {
		transform: none;
	}
}

/* --- Apertura y cierre ----------------------------------------------------
   El mismo mecanismo que el resto de las ventanas del tema, con una propiedad
   más: 'overlay'. Un <dialog> sale de la capa superior en cuanto se cierra, y
   sin animarla con allow-discrete la salida no se llega a ver.

   Va dentro de @supports porque donde no exista se abre y se cierra de golpe,
   que es exactamente lo que hacía antes. */
@supports (transition-behavior: allow-discrete) {

	.iacc-malla {
		opacity: 0;
		scale: .97;
		translate: 0 10px;
		transition:
			opacity .26s ease,
			scale .26s ease,
			translate .26s ease,
			display .26s allow-discrete,
			overlay .26s allow-discrete;
	}

	.iacc-malla[open] {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}

	@starting-style {

		.iacc-malla[open] {
			opacity: 0;
			scale: .97;
			translate: 0 10px;
		}
	}

	/* El velo entra con la ventana: primero el fondo se apaga y desenfoca, y
	   la malla aparece encima. */
	.iacc-malla::backdrop {
		background: rgb(4 12 9 / 0%);
		backdrop-filter: blur(0);
		transition:
			background .26s ease,
			backdrop-filter .26s ease,
			display .26s allow-discrete,
			overlay .26s allow-discrete;
	}

	.iacc-malla[open]::backdrop {
		background: rgb(4 12 9 / 82%);
		backdrop-filter: blur(12px);
	}

	@starting-style {

		.iacc-malla[open]::backdrop {
			background: rgb(4 12 9 / 0%);
			backdrop-filter: blur(0);
		}
	}
}

/* Con "reducir movimiento" se conserva el fundido, que explica de dónde sale
   la ventana, pero sin escala ni desplazamiento. */
@media (prefers-reduced-motion: reduce) {

	@supports (transition-behavior: allow-discrete) {

		.iacc-malla {
			scale: 1;
			translate: 0 0;
			transition:
				opacity .12s ease,
				display .12s allow-discrete,
				overlay .12s allow-discrete;
		}

		.iacc-malla::backdrop {
			backdrop-filter: blur(12px);
			transition:
				background .12s ease,
				display .12s allow-discrete,
				overlay .12s allow-discrete;
		}
	}
}

/* ---------------------------------------------------------------------------
   Testimonios

   La ficha usa el mismo bloque que el Home —las tarjetas son idénticas y los
   testimonios salen de Configuración IACC—, pero aquí el piso va sobre verde
   claro en vez de sobre verde profundo. Solo cambia lo que depende del fondo:
   el propio fondo, los dos textos del encabezado y los puntos del carrusel.

   Todo va acotado a la ficha, así que el Home no se entera.
   --------------------------------------------------------------------------- */
.iacc-carrera .iacc-testi {
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

/* Sobre fondo claro el esmeralda no llega al contraste mínimo; el verde
   oscuro sí. */
.iacc-carrera .iacc-testi__antetitulo {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-carrera .iacc-testi__titulo {
	color: var(--wp--preset--color--texto, #272727);
}

/*
 * Los puntos vuelven a su variante clara. El bloque los invierte a blanco
 * porque allí el fondo es oscuro; aquí ese blanco al 40 % desaparecería.
 */
.iacc-carrera .iacc-testi__carrusel .iacc-slider__punto::before {
	background: rgb(39 39 39 / 40%);
}

.iacc-carrera .iacc-testi__carrusel .iacc-slider__punto:hover::before {
	background: rgb(39 39 39 / 60%);
}

.iacc-carrera .iacc-testi__carrusel .iacc-slider__punto.es-activa::before {
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/*
 * En el formato pequeño cada testimonio ocupa el ancho entero. El bloque deja
 * la tarjeta en 280 px para que asome la siguiente y se entienda que la fila
 * continúa; aquí eso se leía como un recorte, así que se ve una tarjeta
 * completa por pantalla y son los puntos los que cuentan cuántas hay.
 */
@media (max-width: 991.98px) {

	.iacc-carrera .iacc-testi__item {
		flex-basis: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Conoce más — el formulario del final

   La tarjeta es la compartida con el resto del sitio; lo que se escribe aquí
   es el marco: el fondo oscuro y el reparto en dos columnas.
   --------------------------------------------------------------------------- */
.iacc-carrera__asesor {
	padding-block: 32px;
	/*
	 * Verde muy oscuro con el resplandor de marca creciendo hacia la esquina
	 * inferior derecha, que es de donde viene la luz en el resto del diseño.
	 */
	background:
		radial-gradient(120% 110% at 100% 100%, rgb(7 124 113 / 92%) 0%, rgb(3 76 70 / 55%) 38%, rgb(6 33 41 / 0%) 78%),
		#082129;
}

.iacc-carrera__asesor-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.iacc-carrera__asesor-texto {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Sobre el fondo oscuro el antetítulo vuelve al esmeralda: el verde oscuro que
   usa sobre blanco aquí no se leería. */
.iacc-carrera__asesor .iacc-carrera__antetitulo {
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-carrera__asesor-titulo {
	margin: 0;

	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.45px;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-carrera__asesor-bajada {
	margin: 0;

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

@media (min-width: 992px) {

	.iacc-carrera__asesor {
		padding-block: 64px;
	}

	/*
	 * Texto a la izquierda y formulario a la derecha. El texto se centra con
	 * la tarjeta en vez de quedarse arriba, como en el diseño.
	 */
	.iacc-carrera__asesor-inner {
		flex-direction: row;
		align-items: center;
		gap: 71px;
	}

	.iacc-carrera__asesor-texto {
		flex: 0 1 612px;
	}

	.iacc-carrera__asesor-tarjeta {
		flex: 0 0 557px;
	}

	.iacc-carrera__asesor-titulo {
		font-size: var(--wp--preset--font-size--40, 40px);
		letter-spacing: -0.6px;
	}

	.iacc-carrera__asesor-bajada {
		font-size: var(--wp--preset--font-size--18, 18px);
	}
}

/* ---------------------------------------------------------------------------
   Las migas de pan se fueron a main.css

   Estaban aquí porque las primeras que hubo fueron las de las fichas, pero las
   lleva cualquier página del sitio y este archivo solo se carga en las fichas:
   en «Calidad y acreditación» salían como una lista numerada.

   Al llevárselas quedó aquí su llave de cierre, sin nada que cerrar. Una llave
   suelta descuadra el archivo entero: el navegador dejaba de aplicar lo que
   venía después, y por eso la lista de mensajes del asistente no se estiraba y
   las preguntas no bajaban al pie de la caja.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   El asistente conversa de verdad
   ===========================================================================
   El panel de la portada ya tenía forma: burbuja, preguntas y caja de
   escritura. Lo que faltaba era lo que aparece cuando hay conversación —los
   mensajes del visitante, el turno de espera— y la lista donde se acumulan.
   Las clases son las mismas de arriba, así que aquí solo está lo nuevo.
   ======================================================================== */

/*
 * EL PANEL NO CAMBIA DE ALTO
 * La conversación crece, pero el panel mide siempre lo mismo: es lo primero que
 * se ve de la portada, y un recuadro que se estira con cada respuesta mueve
 * todo lo que tiene debajo mientras el visitante está leyendo.
 *
 * Lo que se estira es esta lista, que se queda con el espacio que sobra y se
 * desplaza por dentro. Cuando las preguntas sugeridas desaparecen —al primer
 * mensaje— el hueco que dejan se lo queda ella, así que el panel tampoco encoge
 * en ese momento.
 */
.iacc-carrera__mensajes {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Barra fina y sobria: el panel va sobre la fotografía y la del sistema,
	   ancha y clara, se comía una esquina del diseño. */
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 28%) transparent;
}

.iacc-carrera__mensajes::-webkit-scrollbar {
	width: 6px;
}

.iacc-carrera__mensajes::-webkit-scrollbar-track {
	background: transparent;
}

.iacc-carrera__mensajes::-webkit-scrollbar-thumb {
	background: rgb(255 255 255 / 28%);
	border-radius: 999px;
}

.iacc-carrera__mensajes::-webkit-scrollbar-thumb:hover {
	background: rgb(255 255 255 / 45%);
}

/*
 * En el formato pequeño el alto lo pone esta caja, que es la que se pliega. El
 * panel entero no puede llevarlo: la animación de plegado va de 0fr a 1fr sobre
 * la rejilla de fuera, y un alto fijo en el panel la dejaría siempre abierta.
 *
 * SOLO ABIERTA
 * Y por la misma razón, el alto tampoco puede estar puesto mientras está
 * cerrada. Una fila de 0fr no encoge a un hijo que mide 340 px por su cuenta:
 * la rejilla acaba midiendo esos 340 px y el panel se queda plegado en
 * apariencia —el chevron mirando hacia abajo— con un hueco vacío del tamaño de
 * la conversación debajo de las pestañas.
 *
 * En escritorio esta caja es display:contents y no pinta caja, así que nada de
 * esto la afecta: allí el alto lo reparte el panel.
 */
.iacc-carrera__asistente[data-abierto] .iacc-carrera__asistente-interior {
	height: 340px;
}

.iacc-carrera__fila {
	display: flex;
}

/* Lo que dice el visitante va a la derecha; lo que responde el asistente, a la
   izquierda. */
.iacc-carrera__fila--user {
	justify-content: flex-end;
}

.iacc-carrera__burbuja {
	max-width: 88%;
}

.iacc-carrera__burbuja--user {
	color: var(--wp--preset--color--neutral-0, #fff);
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
	border-bottom-right-radius: 4px;
}

.iacc-carrera__burbuja--bot {
	border-bottom-left-radius: 4px;
}

.iacc-carrera__sugerencias {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* --- Mientras el asistente redacta ---------------------------------------- */

/*
 * Decoración: quien no ve la pantalla se entera por la región que anuncia los
 * mensajes, no por esto. Por eso se detiene con el ajuste de movimiento
 * reducido sin perderse nada.
 */
.iacc-carrera__escribiendo {
	display: flex;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	padding: 14px 16px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 12px;
	border-bottom-left-radius: 4px;
}

.iacc-carrera__escribiendo span {
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--texto-medio, #4e6667);
	border-radius: 50%;
	animation: iacc-carrera-punto 1.4s ease-in-out infinite;
}

.iacc-carrera__escribiendo span:nth-child(2) { animation-delay: 0.2s; }
.iacc-carrera__escribiendo span:nth-child(3) { animation-delay: 0.4s; }

@keyframes iacc-carrera-punto {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1; transform: translateY(-4px); }
}

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

	.iacc-carrera__escribiendo span {
		opacity: 0.6;
		animation: none;
	}
}

/* Nacen desactivados y los abre el JavaScript: sin él no hay a quién
   preguntar. */
.iacc-carrera__entrada:disabled,
.iacc-carrera__enviar:disabled,
.iacc-carrera__sugerencia:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Los titulares de sección centrados reparten sus líneas
   ---------------------------------------------------------------------------
   Un titular largo a 1240 px deja una última línea con una palabra suelta. El
   reparto equilibrado divide el texto en líneas de ancho parecido, que es como
   está partido en el diseño; el ancho máximo solo evita que se estire de lado a
   lado, y por eso no hace falta ajustarlo al milímetro: comprobado entre 700 y
   860 px, el corte cae en el mismo sitio.

   Va en em y no en píxeles para que siga al tamaño de la letra si algún día
   cambia.
   --------------------------------------------------------------------------- */
/*
 * A todos los titulares centrados: reparte las líneas cuando hay más de una
 * y deja en paz a los que caben en una sola. Por sí solo no fuerza ningún
 * salto, así que no cambia los que el diseño tiene de una línea.
 */
.iacc-carrera__porque-cabecera .iacc-carrera__seccion-titulo,
.iacc-carrera__info-cabecera .iacc-carrera__seccion-titulo {
	text-wrap: balance;
}

/*
 * Y este titular en concreto va en dos líneas, no en una de lado a lado: es
 * el más largo de la ficha y a 1240 px se leería como un renglón interminable.
 * El ancho no está ajustado al milímetro a propósito —comprobado entre 700 y
 * 860 px, el corte cae en el mismo sitio—; quien decide dónde parte es el
 * reparto de arriba.
 */
.iacc-carrera__porque-cabecera .iacc-carrera__seccion-titulo {
	max-width: 21em;
	margin-inline: auto;
}

/*
 * Pero solo donde el encabezado va centrado. En el formato pequeño la cabecera
 * se alinea a la izquierda y este tope la dejaba descolgada: con 21 em de ancho
 * y márgenes automáticos, el titular quedaba 141 px a la derecha de su propio
 * antetítulo a 991, y 38 a 768. Alinear el texto no bastaba, porque lo que
 * estaba centrado era la caja.
 *
 * Va aquí y no en el bloque de arriba porque la regla que anula vive en este
 * punto del archivo: con la misma especificidad, manda la última.
 */
@media (max-width: 991px) {

	.iacc-carrera__porque-cabecera .iacc-carrera__seccion-titulo {
		max-width: none;
		margin-inline: 0;

		/*
		 * Y con el ajuste de línea de toda la vida.
		 *
		 * Arriba el titular lleva text-wrap: balance, que iguala el largo de las
		 * líneas. A un titular centrado eso le sienta bien; alineado a la
		 * izquierda, lo que hace es dejar un escalón de aire a la derecha. Se
		 * midió a 465: con balance la línea más larga ocupaba 257 px de los 425
		 * que hay, y con el ajuste normal sube a 314. pretty tampoco vale, que
		 * reequilibra las últimas líneas y deja lo mismo que balance.
		 */
		text-wrap: wrap;
	}
}

/* La bajada solo evita que la última línea quede con una palabra suelta. */
.iacc-carrera__porque-cabecera .iacc-carrera__seccion-texto,
.iacc-carrera__info-cabecera .iacc-carrera__seccion-texto {
	text-wrap: pretty;
}

/* ===========================================================================
   LA MALLA DE LAS CARRERAS, COMO EL PDF

   Solo para las carreras profesionales y técnicas: la continuidad y los
   diplomados siguen con el tablero de arriba, que es el que corresponde a lo
   que publican. Todo cuelga de .iacc-malla--pdf para no pisar aquello.

   El documento se lee sobre verde petróleo, con cada año en un panel claro y
   los ciclos repartidos sobre una línea de tiempo.
   =========================================================================== */
.iacc-malla--pdf .iacc-malla__tablero {
	background: #052027;
}

/* --- La cinta de arriba: escuela y título obtenido ------------------------ */
.iacc-malla__cinta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 18px;
}

.iacc-malla__cinta-dato {
	margin: 0;

	font-size: 11.5px;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 62%);
}

.iacc-malla__cinta-dato strong {
	font-weight: 700;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* --- El panel de cada año ------------------------------------------------- */
.iacc-malla__anio-panel {
	position: relative;
	margin-bottom: 22px;
	padding: 34px 20px 22px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border-radius: 18px;
}

/* El segundo año, en verde muy claro: se distinguen de un vistazo sin leer la
   pestaña. */
.iacc-malla__anio-panel--alterno {
	background: #f2f9ec;
}

/* La pestaña sobresale por arriba, como una lengüeta pegada al panel. */
.iacc-malla__pestana {
	position: absolute;
	top: -13px;
	left: 20px;

	margin: 0;
	padding: 7px 16px;
	background: var(--wp--preset--color--marca, #52a400);
	border-radius: 999px;

	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__anio-rango {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 16px;

	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #3d7a00;
}

/* La flecha que en el documento abre el tramo de ciclos. */
.iacc-malla__anio-tramo::before {
	content: "\2197";
	margin-right: 6px;
}

.iacc-malla__anio-duracion {
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
	color: #4e6667;
}

/* --- El módulo optativo, al costado del año ------------------------------- */
.iacc-malla__anio-cuerpo {
	display: flex;
	align-items: stretch;
	gap: 14px;
}

.iacc-malla__anio-cuerpo > .iacc-malla__fila {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Se lee de abajo arriba, como en el documento. El borde punteado dice que no
 * es una asignatura del plan: es un módulo aparte que se cursa si se quiere.
 */
.iacc-malla__optativo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 14px 10px;
	border: 1.5px dashed rgb(82 164 0 / 55%);
	border-radius: 12px;

	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-align: center;
}

.iacc-malla__optativo-rotulo {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #3d7a00;
}

.iacc-malla__optativo-rotulo::after {
	content: "\2197";
	margin-top: 6px;
}

.iacc-malla__optativo-nombre {
	font-size: 12.5px;
	font-weight: 700;
	color: #082129;
}

/* --- Los ciclos sobre la línea de tiempo ---------------------------------- */
.iacc-malla--pdf .iacc-malla__fila {
	position: relative;
	margin-bottom: 0;
	padding-top: 54px;
}

/* La línea corre por detrás de todos los ciclos, a la altura de los puntos. */
.iacc-malla--pdf .iacc-malla__fila::before {
	content: "";
	position: absolute;
	top: 46px;
	right: 0;
	left: 0;
	height: 2px;
	background: rgb(82 164 0 / 25%);
}

.iacc-malla--pdf .iacc-malla__ciclo {
	position: relative;
}

/* «CICLO» pequeño arriba y el número grande debajo. */
.iacc-malla--pdf .iacc-malla__ciclo-nombre {
	position: absolute;
	top: -54px;
	right: 0;
	left: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;

	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;

	color: #082129;
}

.iacc-malla__ciclo-palabra {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #4e6667;
}

.iacc-malla__ciclo-numero {
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	color: #082129;
}

/* El punto de este ciclo, encima de la línea. */
.iacc-malla__hito {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);

	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--marca, #52a400);
	border: 2px solid var(--wp--preset--color--neutral-0, #fff);
	border-radius: 50%;
}

.iacc-malla__anio-panel--alterno .iacc-malla__hito {
	border-color: #f2f9ec;
}

/* --- Las tarjetas --------------------------------------------------------- */
.iacc-malla--pdf .iacc-malla__ramo {
	display: flex;
	flex-direction: column;
	gap: 6px;

	padding: 14px 14px 14px 26px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid rgb(8 33 41 / 14%);
	border-radius: 6px;
}

.iacc-malla__ramo-nombre {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: #082129;
}

/* Las insignias van pegadas al borde izquierdo, una sobre otra, y por eso la
   tarjeta lleva ese relleno de más a la izquierda. */
.iacc-malla__insignias {
	position: absolute;
	top: 10px;
	left: -9px;

	display: flex;
	flex-direction: column;
	gap: 4px;
}

.iacc-malla--pdf .iacc-malla__insignias .iacc-malla__distintivo {
	position: static;
	width: 19px;
	height: 19px;
	font-size: 10px;
}

/* El cuadrado de la microcredencial: relleno, no de trazo, como en el
   documento. */
.iacc-malla__micro {
	display: grid;
	flex: none;
	place-items: center;

	width: 19px;
	height: 19px;
	background: var(--wp--preset--color--marca, #52a400);
	border-radius: 5px;
	box-shadow: 0 2px 6px rgb(8 33 41 / 25%);
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__micro svg {
	width: 12px;
	height: 12px;
}

/* Formación complementaria: la tarjeta oscura del documento. */
.iacc-malla--pdf .iacc-malla__ramo--complementaria {
	background: #052027;
	border-color: #052027;
}

.iacc-malla--pdf .iacc-malla__ramo--complementaria .iacc-malla__ramo-nombre {
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* Ciclo de titulación: el verde de marca. */
.iacc-malla--pdf .iacc-malla__ramo--titulacion {
	background: var(--wp--preset--color--marca, #52a400);
	border-color: var(--wp--preset--color--marca, #52a400);
}

.iacc-malla--pdf .iacc-malla__ramo--titulacion .iacc-malla__ramo-nombre {
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* La etiqueta bajo el nombre, en los dos casos. */
.iacc-malla__ramo-sello {
	font-size: 9px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #97c866;
}

.iacc-malla--pdf .iacc-malla__ramo--titulacion .iacc-malla__ramo-sello {
	color: rgb(255 255 255 / 85%);
}

/* El partner que certifica. En el documento es su logotipo; aquí, su nombre. */
.iacc-malla__convenio {
	align-self: flex-end;

	font-size: 9.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	color: #4e6667;
}

.iacc-malla--pdf .iacc-malla__ramo--complementaria .iacc-malla__convenio,
.iacc-malla--pdf .iacc-malla__ramo--titulacion .iacc-malla__convenio {
	color: rgb(255 255 255 / 70%);
}

/* --- Los bloques de abajo ------------------------------------------------- */
.iacc-malla__rutas,
.iacc-malla__notas,
.iacc-malla__convenios {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.iacc-malla__bloque-titulo {
	margin: 0 0 14px;

	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #97c866;
}

.iacc-malla__rutas-lista,
.iacc-malla__notas-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-malla__ruta,
.iacc-malla__nota {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.iacc-malla--pdf .iacc-malla__ruta .iacc-malla__distintivo {
	position: static;
	flex: none;
	width: 22px;
	height: 22px;
}

.iacc-malla__ruta-nombre,
.iacc-malla__nota-titulo {
	margin: 0;

	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla__ruta-texto,
.iacc-malla__nota-texto {
	margin: 4px 0 0;

	font-size: 12px;
	line-height: 1.45;
	color: rgb(255 255 255 / 72%);
}

/* El cuadrado verde que en el documento marca el ciclo de titulación. */
.iacc-malla__nota-icono--titulacion {
	flex: none;
	width: 19px;
	height: 19px;
	background: var(--wp--preset--color--marca, #52a400);
	border-radius: 5px;
}

.iacc-malla__convenios-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-malla__convenios-lista li {
	padding: 8px 14px;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 999px;

	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--neutral-0, #fff);
}

/* En pantalla pequeña los ciclos se apilan, y con ellos se va la línea de
   tiempo: en vertical no dice nada. El optativo pasa a ser una caja horizontal
   encima del año, que es donde cabe. */
@media (max-width: 767px) {

	.iacc-malla--pdf .iacc-malla__fila {
		padding-top: 0;
	}

	.iacc-malla--pdf .iacc-malla__fila::before {
		content: none;
	}

	.iacc-malla--pdf .iacc-malla__ciclo-nombre {
		position: static;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 6px;
		margin-bottom: 10px;
	}

	.iacc-malla__ciclo-numero {
		font-size: 15px;
	}

	.iacc-malla__hito {
		display: none;
	}

	.iacc-malla__anio-cuerpo {
		flex-direction: column;
	}

	.iacc-malla__optativo {
		writing-mode: horizontal-tb;
		transform: none;
		flex-direction: row;
		justify-content: flex-start;
		padding: 12px 14px;
	}

	.iacc-malla__optativo-rotulo::after {
		margin: 0 0 0 6px;
	}

	.iacc-malla__rutas-lista,
	.iacc-malla__notas-lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* La transversal conserva el verde claro que ya tenía: la regla general de las
   tarjetas de este tablero es más específica y se lo llevaba por delante. */
.iacc-malla--pdf .iacc-malla__ramo--transversal {
	background: #eafbe0;
	border-color: rgb(82 164 0 / 35%);
}

.iacc-malla--pdf .iacc-malla__ramo--transversal .iacc-malla__ramo-nombre {
	color: #2c5414;
}

/* Una asignatura que el documento pinta en oscuro sin ser formación
   complementaria: la transversal de IA lo está en casi todas las mallas. Va
   después de la regla de transversal para ganarle el fondo, y solo eso: el
   ramo sigue siendo lo que diga su tipo. */
.iacc-malla--pdf .iacc-malla__ramo--oscuro {
	background: #052027;
	border-color: #052027;
}

.iacc-malla--pdf .iacc-malla__ramo--oscuro .iacc-malla__ramo-nombre {
	color: var(--wp--preset--color--neutral-0, #fff);
}

.iacc-malla--pdf .iacc-malla__ramo--oscuro .iacc-malla__convenio {
	color: rgb(255 255 255 / 70%);
}