/**
 * Ficha de diplomado.
 *
 * Figma: 2725:2578 (escritorio) y 3470:2803 (móvil).
 *
 * Va después de carrera.css y cuenta con ella: los antetítulos, los títulos de
 * sección, la tarjeta oscura del documento descargable, las viñetas y el piso
 * de «por qué IACC» salen de ahí. Aquí solo está lo que esta ficha no comparte
 * con ninguna otra.
 *
 * Se escribe primero la versión ancha y se recoge al final, igual que la hoja
 * de continuidad: los pisos de esta ficha son rejillas de dos columnas que en
 * el formato pequeño se apilan, y describir el caso apilado como excepción sale
 * más corto que al revés.
 */

/* ==========================================================================
   Piezas comunes de la ficha
   ========================================================================== */

/*
 * La tesela del icono. Aparece en cuatro sitios —capacidades, datos del
 * programa, módulos y modos de estudio— con dos pieles: en tinta con el icono
 * claro, que es la de por defecto, y en verde pálido con el icono oscuro.
 *
 * Se escribe una vez porque es la misma pieza: el diseño la reutiliza con el
 * mismo tamaño y el mismo radio en los cuatro pisos, y tenerla repetida
 * garantizaba que se despegaran al primer ajuste.
 */
.iacc-dip__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-dip__tesela--clara {
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
}

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

/* Las cabeceras centradas de sección llevan el mismo aire en los cuatro pisos. */
.iacc-dip__cabecera {
	margin-bottom: 32px;
	text-align: center;
}

.iacc-dip__cabecera .iacc-carrera__seccion-texto {
	margin-inline: auto;
}

/* --- Botones -------------------------------------------------------------- */

/*
 * Los de esta ficha viven sobre fondo oscuro, así que no pueden ser los de
 * carrera.css: allí el contorno lleva borde gris y texto en tinta, que sobre
 * el verde profundo de la portada no se lee.
 */
.iacc-dip__boton {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 12px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

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

.iacc-dip__boton--primario {
	color: var(--wp--preset--color--neutral-900, #022426);
	background: var(--wp--preset--color--marca, #52a400);
	/* 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 6px 18px rgb(82 164 0 / 35%);
}

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

/* Contorno sobre oscuro: el relleno es transparente y el borde delimita. */
.iacc-dip__boton--contorno {
	color: #dcedcc;
	background: none;
	border: 1.5px solid var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-dip__boton--contorno:hover {
	background: rgb(44 180 95 / 12%);
	border-color: var(--wp--preset--color--marca-clara, #97c866);
}

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

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

/*
 * La portada no lleva formulario: a un diplomado se llega explorando, así que
 * lo que ofrece es leer el brochure o pedir información. Por eso el titular
 * ocupa el ancho útil en vez de media rejilla, y la portada es más baja que la
 * de continuidad.
 *
 * 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. Es el mismo valor que la portada de continuidad.
 */
.iacc-dip__hero {
	--iacc-dip-fondo: #06140f;

	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: 676px;
	/*
	 * El relleno de abajo es el que cuadra el indicador de desplazamiento: va
	 * anclado a 32 px del borde inferior y mide 104, así que necesita 136 px
	 * libres bajo el último botón. Con menos, se le monta encima.
	 */
	padding-block: 68px 140px;
	overflow: hidden;
	background: var(--iacc-dip-fondo);
	color: var(--wp--preset--color--neutral-0, #fff);
}

/*
 * LA SANGRÍA DEL FONDO
 * El fondo no acaba donde acaba la portada: sigue 134 px por debajo, y el
 * overflow del hero lo recorta. No es holgura de más: los degradados están
 * calibrados sobre esa altura, y confinarlos a la portada los comprime. Con el
 * fondo ajustado a la portada, el velo se vuelve transparente antes de tiempo y
 * la fotografía asoma justo detrás de las píldoras, donde el diseño la tiene
 * tapada.
 *
 * En el archivo de diseño esto es el frame del fondo, que mide 810 sobre una
 * portada de 676.
 */
.iacc-dip__fondo {
	position: absolute;
	inset: 0 0 -134px;
}

/*
 * 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-dip__foto {
	width: 100%;
	height: 100%;
	opacity: 0.4;
	object-fit: cover;
	/* Centrada y sin espejar, como el resto de los heros del sitio. */
}

.iacc-dip__aureola,
.iacc-dip__velo,
.iacc-dip__fundido {
	position: absolute;
	inset: 0;
}

/* Tres focos verdes que encienden la foto por detrás del contenido. */
.iacc-dip__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-dip__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.
 *
 * Se llama "fundido" y no "cierre" a propósito: el último piso de la ficha ya
 * se llama así, y con el mismo nombre esta capa le pasaba su position: absolute
 * y su inset: 0, que dejaba la sección entera montada sobre la portada.
 */
.iacc-dip__fundido {
	background: linear-gradient(180deg, rgb(6 20 15 / 0%) 0%, rgb(6 20 15 / 0%) 55%, rgb(6 20 15 / 55%) 82%, #06140f 100%);
}

.iacc-dip__hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* Sobre el fondo oscuro el antetítulo va en esmeralda, no en el verde oscuro. */
.iacc-dip__hero .iacc-carrera__antetitulo {
	margin-bottom: 20px;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

.iacc-dip__titulo {
	max-width: 960px;
	margin: 0;
	font-size: clamp(2.125rem, 0.95rem + 3.9vw, 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-dip__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-dip__titulo strong {
		-webkit-text-fill-color: transparent;
	}
}

.iacc-dip__bajada {
	max-width: 820px;
	margin: 24px 0 0;
	font-size: var(--wp--preset--font-size--18, 1.125rem);
	line-height: 1.55;
}

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

.iacc-dip__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.
 *
 * Los tres valores translúcidos salen de medir el diseño, no de estimarlos:
 * relleno rgb(26,38,34) y borde rgb(63,73,70) sobre la base #06140f, que son
 * blanco al 8 % y al 16 %.
 */
.iacc-dip__chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	/*
	 * 7 y 15, no 8 y 16: en el diseño el trazo de 1 px va por dentro de la
	 * píldora y aquí el borde suma 2 px a cada eje. Con 8/16 la píldora sale de
	 * 34 × 158 en lugar de los 32 × 156 del archivo.
	 */
	padding: 7px 15px;
	font-size: var(--wp--preset--font-size--13, 0.8125rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 999px;
}

/*
 * El icono va en esmeralda y no hereda el blanco del texto. Es lo que hace el
 * diseño —#2cb45f medido en el propio archivo— y es lo que distingue de un
 * golpe qué dice cada píldora.
 *
 * El SVG que exporta Figma dice #3d7a00 en este icono, y no es lo que se ve:
 * exporta el color del componente maestro y se pierde el ajuste de la
 * instancia. El valor de arriba está medido sobre la imagen renderizada.
 */
.iacc-dip__chip-icono {
	display: grid;
	flex: none;
	place-items: center;
	color: var(--wp--preset--color--esmeralda, #2cb45f);
}

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

/*
 * El indicador de desplazamiento va más abajo que en la ficha de carrera: allí
 * la portada mide 810 px y sobra sitio, y aquí mide 676 y con los 76 px de
 * carrera.css se le sube encima a los botones.
 */
.iacc-dip__hero .iacc-carrera__scroll {
	bottom: 32px;
}

/* --- Las dos vías --------------------------------------------------------- */

.iacc-dip__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 20px;
}

/* ==========================================================================
   Qué vas a poder hacer
   ========================================================================== */

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

.iacc-dip__logros-lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Tarjeta vertical: tesela arriba, título y texto debajo. La sombra es lo que
 * la separa del verde pálido del fondo, que está demasiado cerca del blanco
 * para que baste el borde.
 */
.iacc-dip__logro {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	/* 27 y 23 con el borde de 1 px dan los 28/24 del diseño, que los mide por
	   fuera del trazo. */
	padding: 27px 23px;
	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%);
}

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

.iacc-dip__logro-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);
}

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

/* La frase que cierra el piso: es la promesa, no un pie de sección. */
.iacc-dip__logros-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;
}

/* ==========================================================================
   Para quién es
   ========================================================================== */

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

.iacc-dip__perfil-inner {
	display: grid;
	grid-template-columns: minmax(0, 515fr) minmax(0, 665fr);
	gap: 60px;
	align-items: center;
}

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

/*
 * 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 lo concreto del piso —qué
 * pide, cuánto dura— y el diseño los quiere leyéndose sobre la imagen.
 */
.iacc-dip__perfil-visual {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 509px;
}

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

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

.iacc-dip__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.
 *
 * Ninguno va destacado. En la continuidad el primero se pinta en tinta porque
 * es el reconocimiento de estudios, que es de lo que va ese programa; aquí las
 * cuatro pesan lo mismo y destacar una sería inventar una jerarquía.
 */
.iacc-dip__dato {
	display: flex;
	gap: 16px;
	align-items: center;
	/* 15 y 19 con el borde de 1 px dan los 16/20 que mide el diseño. */
	padding: 15px 19px 15px 15px;
	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%);
}

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

.iacc-dip__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-dip__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);
}

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

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

.iacc-dip__plan .iacc-dip__cabecera {
	margin-bottom: 40px;
}

.iacc-dip__plan-grid {
	display: grid;
	grid-template-columns: 420px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/*
 * LA TARJETA DEL BROCHURE
 * Sale de carrera.css, que en pantalla ancha la prepara para otra cosa: allí
 * ocupa media rejilla de 1240 y aquí una columna de 420. Hay que deshacer tres
 * ajustes suyos, o la tarjeta se descuadra:
 *
 *   · height: 100% la estira hasta la altura de la columna de módulos —395 px
 *     en lugar de los 344 del diseño— y deja el botón flotando a media caja.
 *   · las acciones van fijadas a 300 px, así que el botón no llega a los 340.
 *   · el titular y el párrafo llevan anchos máximos de 305 y 345, medidos para
 *     aquella columna.
 *
 * El contenido se apila desde arriba y el aire sobrante queda abajo, que es lo
 * que hace el archivo: altura fija con el contenido al principio.
 */
.iacc-dip__plan .iacc-carrera__malla {
	justify-content: flex-start;
	min-height: 344px;
	height: auto;
	padding: 40px;
	gap: 24px;
}

.iacc-dip__plan .iacc-carrera__malla-acciones {
	width: 100%;
}

.iacc-dip__plan .iacc-carrera__malla-titulo,
.iacc-dip__plan .iacc-carrera__malla-texto {
	max-width: none;
}

/*
 * carrera.css la pinta a 30 px, que es su tamaño en el formato pequeño. Aquí
 * el diseño la quiere a 28 y en una sola línea: con 30 «Descarga el brochure»
 * se parte en dos.
 */
.iacc-dip__plan .iacc-carrera__malla-titulo {
	font-size: var(--wp--preset--font-size--28, 1.75rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/*
 * EL DISTINTIVO DEL BROCHURE
 * carrera.css lo deja sin relleno, con el borde y el texto en el verde claro
 * opaco. Aquí el diseño lo pinta de otra manera, y son valores medidos sobre el
 * archivo: relleno del verde claro al 8 %, borde del mismo al 30 % y el texto en
 * el esmeralda pálido, que sobre el degradado se lee mucho mejor.
 *
 * El mismo componente aparece en las fichas de carrera y de continuidad, donde
 * sigue pintado como estaba: cambiar carrera.css tocaría pisos ya revisados.
 */
.iacc-dip__plan .iacc-carrera__malla-chip {
	background: rgb(151 200 102 / 8%);
	border-color: rgb(151 200 102 / 30%);
	color: #d5f0df;
}

/*
 * La viñeta va en el verde oscuro del texto de marca, no en el verde de los
 * botones: es un punto de lista, y con #52a400 pesa más que el propio texto.
 */
.iacc-dip__lecciones .iacc-carrera__vineta {
	background: var(--wp--preset--color--marca-oscura, #3d7a00);
}

/* --- Los módulos ---------------------------------------------------------- */

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

/*
 * Cada módulo es un <details>: se abre y se cierra sin JavaScript y solo hay
 * uno abierto a la vez, que lo resuelve el atributo name del marcado.
 */
/*
 * DÓNDE VA EL RELLENO
 * En pantalla ancha, en la tarjeta: así lo reparte el diseño, y así el módulo
 * cerrado conserva el aire de abajo. En la estrecha pasa a la cabecera y al
 * cuerpo —ver más abajo—, que es como lo dibuja el archivo móvil y de paso hace
 * que el área de pulsación del <summary> cubra toda la franja.
 */
.iacc-dip__modulo {
	padding: 23px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
}

.iacc-dip__modulo-cabecera {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	cursor: pointer;
	list-style: none;
}

/* Safari pinta su propio triángulo si no se le quita por aquí. */
.iacc-dip__modulo-cabecera::-webkit-details-marker {
	display: none;
}

.iacc-dip__modulo-cabecera:focus-visible {
	outline: 2px solid var(--wp--preset--color--marca-oscura, #3d7a00);
	outline-offset: 4px;
	border-radius: 4px;
}

.iacc-dip__modulo-titulos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.iacc-dip__modulo-rotulo {
	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-dip__modulo-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);
}

.iacc-dip__modulo-chevron {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--wp--preset--color--texto-medio, #4e6667);
	transition: transform .2s ease;
}

.iacc-dip__modulo[open] .iacc-dip__modulo-chevron {
	transform: rotate(180deg);
}

.iacc-dip__lecciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/*
	 * Alineadas con el borde izquierdo del contenido, no colgando del título:
	 * es donde las pone el diseño en los dos formatos.
	 */
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.iacc-dip__lecciones li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* ==========================================================================
   Cómo se estudia
   ========================================================================== */

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

.iacc-dip__modos-lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Igual que la tarjeta de capacidad pero sin sombra: aquí el fondo es gris y el
 * borde ya la separa. Es la diferencia que trae el diseño, no un descuido.
 */
.iacc-dip__modo {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	/* 27 y 23 con el borde de 1 px dan los 28/24 del diseño. */
	padding: 27px 23px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 16px;
}

/* Título y texto, con su propio aire de 8 px. */
.iacc-dip__modo-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.iacc-dip__modo-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-dip__modo-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

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

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

/* ==========================================================================
   Cierre y formulario
   ========================================================================== */

/* ==========================================================================
   Por debajo de 1024: todo se apila
   ==========================================================================
   Es el corte en el que las rejillas de dos columnas dejan de caber. No hay un
   segundo punto de quiebre: el diseño móvil y el de escritorio son las dos
   únicas formas del archivo, y meter un intermedio inventado sería decidir por
   el diseño.
   ======================================================================== */

@media (max-width: 1023px) {

	/*
	 * El salto de línea de los titulares se recoge aquí. Está escrito en el
	 * contenido para reproducir el corte del diseño ancho, donde el titular cabe
	 * en una línea y el diseño lo quiere en dos. Con 350 px de ancho el texto ya
	 * se parte solo, y forzar además el salto deja una línea corta en medio.
	 */
	.iacc-dip .iacc-carrera__seccion-titulo br {
		display: none;
	}

	/* --- Portada ---------------------------------------------------------- */

	.iacc-dip__hero {
		min-height: 0;
		padding-block: 32px 24px;
	}

	/* La sangría del formato pequeño es de 107 px, no de 134. */
	.iacc-dip__fondo {
		inset: 0 0 -107px;
	}

	/*
	 * El velo carga menos hacia la izquierda que en el formato ancho: con 390 px
	 * el mismo ángulo deja la mitad derecha de la foto sin cubrir justo donde
	 * cae el final de cada línea de texto.
	 */
	.iacc-dip__velo {
		background:
			linear-gradient(96.95deg, #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%);
	}

	/* Los focos verdes también encogen: los radios del diseño van en píxeles. */
	.iacc-dip__aureola {
		background:
			radial-gradient(35px 128px at 70% 34%, rgb(48 168 112 / 36%) 0%, rgb(24 84 56 / 18%) 29%, transparent 58%),
			radial-gradient(25px 93px at 24% 74%, rgb(30 128 86 / 22%) 0%, transparent 62%),
			radial-gradient(21px 76px at 99% 80%, rgb(90 176 20 / 18%) 0%, transparent 64%);
	}

	/* 12 px hasta el titular, no los 20 del formato ancho. */
	.iacc-dip__hero .iacc-carrera__antetitulo {
		margin-bottom: 12px;
	}

	/*
	 * El titular pequeño aprieta la interlínea y usa el ancho que haya.
	 *
	 * Tuvo un tope de 320 px, que es como el diseño reparte las cinco líneas en
	 * una pantalla de 350. El problema es que ese número se quedaba fijo hasta
	 * los 1.023 mientras el cuerpo de letra crece con el ancho: a 1.023 el
	 * titular ocupaba 320 px de 943 disponibles con letra de 55, y un nombre
	 * largo —«Diplomado en Aplicaciones Prácticas de Inteligencia Artificial
	 * Generativa»— caía en catorce líneas. Un píxel más allá, con el tope de
	 * escritorio, bajaba a siete.
	 *
	 * Sin tope manda el contenedor, que ya está limitado por la pantalla, y el
	 * reparto lo hace text-wrap: balance como en el formato ancho.
	 */
	.iacc-dip__titulo {
		max-width: 100%;
		line-height: 1.05;
	}

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

	/* Las píldoras se aprietan a 8 px: en dos filas, 12 abrían demasiado. */
	.iacc-dip__chips {
		gap: 8px;
	}

	/* A ancho completo y apilados: es lo que hace el diseño pequeño. */
	.iacc-dip__acciones {
		flex-direction: column;
		gap: 12px;
		width: 100%;
		margin-top: 20px;
	}

	.iacc-dip__acciones .iacc-dip__boton {
		width: 100%;
	}

	/*
	 * El indicador de desplazamiento no cabe: la portada pequeña acaba justo
	 * después de los botones y el piso siguiente ya está a la vista.
	 */
	.iacc-dip__hero .iacc-carrera__scroll {
		display: none;
	}

	/* --- Qué vas a poder hacer -------------------------------------------- */

	.iacc-dip__logros,
	.iacc-dip__perfil,
	.iacc-dip__plan,
	.iacc-dip__modos {
		padding-block: 32px;
	}

	/*
	 * TODAS LAS CABECERAS VAN A LA IZQUIERDA
	 * En pantalla ancha estos tres encabezados van centrados; en la estrecha, no.
	 * No es un descuido del diseño: con 350 px de ancho el titular ocupa tres o
	 * cuatro líneas, y centrado deja los bordes en diente de sierra. La segunda
	 * raya del antetítulo ya la recoge carrera.css.
	 *
	 * El aire hasta el contenido también baja: 24 px en vez de 32.
	 */
	.iacc-dip__cabecera,
	.iacc-dip__logros-cierre {
		text-align: left;
	}

	/*
	 * Y las cajas, no solo los renglones.
	 *
	 * Esta cabecera es también .iacc-carrera__info-cabecera, y carrera.css la
	 * centra a partir de 992 con align-items. Los dos cortes no coinciden —aquel
	 * empieza en 992 y este acaba en 1023—, así que en esa franja de 32 píxeles
	 * mandaban los dos a la vez: el texto alineado a la izquierda por esta regla
	 * y la caja centrada por aquella. Se nota en la bajada, que es corta y no
	 * llega a ocupar el ancho: queda sangrada por los dos lados y descolgada del
	 * titular. Medido antes de tocarlo: 239 px de desfase a 1023.
	 *
	 * El margin-inline es lo mismo un piso más abajo: la bajada lo lleva en auto
	 * para centrarse bajo el titular, y aquí no toca.
	 */
	.iacc-dip__cabecera {
		align-items: flex-start;
	}

	.iacc-dip__cabecera .iacc-carrera__seccion-texto {
		margin-inline: 0;
	}

	.iacc-dip__cabecera {
		margin-bottom: 24px;
	}

	.iacc-dip__logros-lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/*
	 * La tarjeta vertical se convierte en fila y baja el radio a 8: en el diseño
	 * el 16 es de la tarjeta alta, y en una fila de 88 px se ve desproporcionado.
	 */
	.iacc-dip__logro {
		flex-direction: row;
		gap: 16px;
		align-items: center;
		padding: 19px;
		border-radius: 8px;
	}

	.iacc-dip__logro-texto {
		display: none;
	}

	.iacc-dip__logros-cierre {
		margin-top: 24px;
	}

	/* --- Para quién es ---------------------------------------------------- */

	.iacc-dip__perfil-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/*
	 * Sin 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.
	 */
	/*
	 * Sin sitio para cruzar la fotografía con las tarjetas: se ponen una detrás
	 * de otra con el mismo aire de 24 px que separa el encabezado de la imagen,
	 * porque en el diseño pequeño los tres son hermanos de la misma columna.
	 */
	.iacc-dip__perfil-visual {
		flex-direction: column;
		gap: 24px;
		min-height: 0;
	}

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

	/* Los datos se aprietan a 12: ya no van sueltos sobre la foto. */
	.iacc-dip__datos {
		gap: 12px;
		width: 100%;
	}

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

	.iacc-dip__tesela {
		width: 48px;
		height: 48px;
	}

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

	/* --- Plan de estudios ------------------------------------------------- */

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

	.iacc-dip__plan .iacc-carrera__malla {
		min-height: 0;
		padding: 24px 20px;
		gap: 24px;
	}

	/* El titular de la tarjeta baja a 24: es el H3 del formato pequeño. */
	.iacc-dip__plan .iacc-carrera__malla-titulo {
		font-size: var(--wp--preset--font-size--24, 1.5rem);
	}

	/* Los módulos se aprietan a 12. */
	.iacc-dip__modulos {
		gap: 12px;
	}

	/*
	 * Aquí el relleno pasa a la cabecera y al cuerpo, y la tarjeta se queda sin
	 * ninguno: no hay hueco entre la cabecera y las lecciones porque el aire lo
	 * pone el propio relleno inferior de la cabecera.
	 */
	.iacc-dip__modulo {
		padding: 0;
	}

	.iacc-dip__modulo-cabecera {
		padding: 19px;
	}

	.iacc-dip__lecciones {
		gap: 12px;
		margin-top: 0;
		padding: 0 19px 19px;
	}

	/*
	 * El chevron se va arriba: el título ocupa dos o tres líneas y dejarlo
	 * centrado con el bloque lo bajaba hasta la mitad de la tarjeta, lejos del
	 * borde donde se busca.
	 */
	.iacc-dip__modulo-cabecera {
		gap: 12px;
	}

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

	/* --- Cómo se estudia -------------------------------------------------- */

	/*
	 * 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-dip__modos-carrusel {
		margin-inline: calc(var(--container-padding, 20px) * -1);
	}

	.iacc-dip__modos-lista {
		display: flex;
		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 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 llevan los otros carruseles del tema, donde ya
		 * está anotado.
		 */
		contain: paint;

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

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

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

	/*
	 * main.css los separa 16 px de la pista, que es lo que piden los carruseles
	 * del resto del sitio. Aquí el diseño deja 28.
	 */
	.iacc-dip__modos-carrusel .iacc-slider__puntos {
		margin-top: 28px;
	}

	/* --- Cierre ----------------------------------------------------------- */

}

/* ==========================================================================
   Los módulos se despliegan con calma
   ==========================================================================
   Son <details> nativos: el navegador los abre y los cierra de golpe. 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 ocupen las lecciones", 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)) {

	.iacc-dip__modulos {
		interpolate-size: allow-keywords;
	}

	.iacc-dip__modulo::details-content {
		block-size: 0;
		overflow: hidden;

		/* content-visibility va con allow-discrete: sin eso el contenido sale de
		   la caja al cerrar y la salida no se llega a ver. */
		transition:
			block-size .32s cubic-bezier(.4, 0, .2, 1),
			content-visibility .32s allow-discrete;
	}

	.iacc-dip__modulo[open]::details-content {
		block-size: auto;
	}
}

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

	.iacc-dip__modulo::details-content,
	.iacc-dip__modulo-chevron,
	.iacc-dip__boton {
		transition: none;
	}
}