/**
 * Blog — TAREA #111971.
 *
 * Hoja aparte, encolada SOLO en las vistas del blog, y no dentro del style.css
 * del tema, que ya tiene 268 KB y lo carga todo el sitio.
 *
 * TODO CUELGA DE `.dtb`
 *
 * Ninguna regla puede alcanzar otra pagina. En particular NO se usa
 * `#related-posts`, que comparten la home («Ultimas noticias», reestilada y
 * aprobada), la pagina de blog vieja y el bloque de relacionados del articulo.
 * Estilar el blog por ese id se llevaria por delante la home.
 *
 * Medidas sacadas del Figma «Blog home-Desktop» (nodo 2436:1888), que trabaja
 * sobre 1440 con un contenedor de 1240: main 800 + 40 de hueco + lateral 400.
 */

.dtb {
	--dtb-rojo: #b53125;
	--dtb-tinta: #111;
	--dtb-texto: #333;
	--dtb-suave: #555;
	--dtb-linea: #e3e3e3;
	--dtb-fondo: #f7f7f7;

	padding-bottom: 64px;
	background: #fff;
	color: var(--dtb-texto);
	font-family: 'Montserrat', sans-serif;
}

.dtb *,
.dtb *::before,
.dtb *::after {
	box-sizing: border-box;
}

.dtb img {
	max-width: 100%;
}

/* `content-box` a proposito: el Figma trabaja con un contenido de 1240 —main
 * 800 + 40 de hueco + lateral 400— y margenes de 100 a cada lado sobre 1440.
 * Con `border-box` el relleno se come 48 y el contenido se queda en 1192, que
 * es justo lo que salia medido. */
.dtb-ancho {
	box-sizing: content-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.dtb-icono {
	display: block;
	flex: 0 0 auto;
}

/* La foto de quien firma, en cualquiera de los tres sitios donde sale: la
   fila de datos (24), la firma desplegada (48) y los comentarios (40). */
.dtb-avatar {
	display: block;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

/* --- Cabecera ----------------------------------------------------------- */

.dtb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 48px 24px;
	background: #333 center / cover no-repeat;
	text-align: center;
}

.dtb-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.dtb-hero-interior {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 900px;
}

.dtb .dtb-hero-titulo {
	margin: 0;
	color: #fff;
	font-size: 35px;
	font-weight: 600;
	line-height: 42px;
}

.dtb-migas {
	margin: 0;
	color: #fff;
	font-size: 15px;
	line-height: 24px;
}

.dtb-migas a {
	color: #fff;
}

/* Las de las vistas SIN cabecera con imagen —articulo, experto y calidad—,
   que van en gris sobre blanco y debajo de la navegacion. */
.dtb-migas--claras {
	padding-top: 16px;
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-migas--claras a {
	color: var(--dtb-suave);
}

/* En movil el breadcrumb no se parte en varias lineas: se queda en una sola
   con desplazamiento horizontal tactil (revision #115379). Es un <p> en flujo
   normal, asi que `nowrap` + `overflow-x` basta. */
@media (max-width: 767px) {
	.dtb-migas--claras {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
}

/* --- Navegacion: pastillas y buscador ----------------------------------- */

.dtb-nav {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 64px 0 40px;
	border-bottom: 1px solid var(--dtb-linea);
}

/* El `<details>` es el mismo listado en los dos tamaños: en escritorio el
 * resumen no se ve y las pastillas van en fila; en movil el resumen es la caja
 * del desplegable y las pastillas se apilan dentro. */
.dtb-cats {
	flex: 1 1 auto;
	min-width: 0;
}

.dtb-cats-resumen {
	display: none;
}

.dtb-chips {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* 36 de alto CONTANDO el borde, como en Figma, que lo pinta por dentro. Con
 * relleno vertical de 8 salian 38: 20 de linea + 16 de relleno + 2 de borde. */
.dtb-chip {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid var(--dtb-linea);
	border-radius: 4px;
	background: var(--dtb-fondo);
	color: var(--dtb-texto);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}

.dtb-chip:hover,
.dtb-chip:focus {
	border-color: var(--dtb-suave);
	color: var(--dtb-texto);
}

.dtb-chip.es-activa {
	border-color: var(--dtb-rojo);
	background: var(--dtb-rojo);
	color: #fff;
	font-weight: 600;
}

.dtb-chip-n {
	color: var(--dtb-suave);
	font-size: 12px;
	line-height: 18px;
}

.dtb-chip.es-activa .dtb-chip-n {
	color: #fff;
	font-weight: 400;
}

.dtb-buscador {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
	width: 331px;
	max-width: 100%;
}

/* `margin: 0` no sobra: el tema le pone 9 de margen superior a los campos de
 * formulario, y eso dejaba el input 9 px por debajo del boton. */
.dtb-buscador input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--dtb-linea);
	border-radius: 4px;
	background: #fff;
	box-shadow: inset 0 2px 1px rgba(0, 0, 0, .02);
	color: var(--dtb-texto);
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

.dtb-buscador input[type="search"]::placeholder {
	color: var(--dtb-suave);
}

.dtb-buscador button {
	height: 36px;
	padding: 0 24px;
	border: 1px solid var(--dtb-tinta);
	border-radius: 4px;
	background: var(--dtb-tinta);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 12px;
	text-transform: uppercase;
	cursor: pointer;
}

/* --- Texto de bienvenida ------------------------------------------------ */

.dtb-intro {
	max-width: 800px;
	padding: 40px 0 48px;
}

.dtb-intro > :first-child {
	margin-top: 0;
}

.dtb-intro > :last-child {
	margin-bottom: 0;
}

.dtb .dtb-intro h2 {
	margin: 0 0 16px;
	color: var(--dtb-tinta);
	font-size: 26px;
	font-weight: 600;
	line-height: 32px;
}

.dtb-intro p {
	margin: 0 0 16px;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

/* --- Las dos columnas --------------------------------------------------- */

.dtb-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}

.dtb-main {
	flex: 1 1 500px;
	min-width: 0;
	max-width: 800px;
}

.dtb-aside {
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	gap: 20px;
	max-width: 400px;
}

/* --- Tarjetas ----------------------------------------------------------- */

.dtb-destacado,
.dtb-card {
	display: flex;
	overflow: hidden;
	border: 1px solid var(--dtb-linea);
	border-radius: 8px;
	background: #fff;
}

.dtb-card {
	flex-direction: column;
}

/* La imagen va POSICIONADA y no en flujo.
 *
 * Con `height: 100%` dentro de una caja de alto indefinido, el porcentaje se
 * resuelve como `auto`: la imagen conserva su alto natural y estira la
 * tarjeta. Medido en la rejilla: cajas de 362x213, 362x336 y 362x372 donde
 * las tres tenian que dar 362x213. Con la imagen absoluta, la caja manda. */
.dtb-destacado-media,
.dtb-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--dtb-fondo);
}

.dtb-destacado-media {
	flex: 0 0 300px;
	align-self: stretch;
	min-height: 240px;
}

.dtb-card-media {
	aspect-ratio: 340 / 200;
}

.dtb .dtb-destacado-media img,
.dtb .dtb-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.dtb-card-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.dtb-card-barra {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
}

.dtb-card-cat {
	color: var(--dtb-rojo);
	font-size: 13px;
	line-height: 20px;
	text-decoration: none;
	text-transform: uppercase;
}

.dtb-card-tiempo {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 4px;
	align-items: center;
	color: var(--dtb-suave);
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
}

.dtb .dtb-card-titulo {
	display: -webkit-box;
	overflow: hidden;
	margin: -8px 0 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

/* Recortado a 3 lineas, como la tarjeta del listado. El Figma le da al
   destacado una caja de 296 con la imagen a 296, 84 justos de titulo y 100 de
   texto; sin recorte, un extracto largo estiraba el bloque a 318 y la imagen
   con el. */
.dtb .dtb-destacado-titulo {
	display: -webkit-box;
	overflow: hidden;
	margin: -8px 0 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
}

.dtb-card-titulo a,
.dtb-destacado-titulo a {
	color: var(--dtb-tinta);
	text-decoration: none;
}

.dtb-card-titulo a:hover,
.dtb-destacado-titulo a:hover {
	color: var(--dtb-rojo);
}

.dtb-destacado-texto {
	display: -webkit-box;
	overflow: hidden;
	margin: -8px 0 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	color: var(--dtb-texto);
	font-size: 14px;
	line-height: 20px;
}

.dtb-card-firma {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: auto 0 0;
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-card-firma a {
	color: inherit;
	text-decoration: underline;
}

.dtb-sep {
	width: 1px;
	height: 12px;
	background: var(--dtb-linea);
}

/* --- Listado ------------------------------------------------------------ */

.dtb-ultimos {
	padding-top: 48px;
}

.dtb .dtb-seccion {
	margin: 0 0 24px;
	color: var(--dtb-texto);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.dtb-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(328px, 1fr));
}

/* 24 y no 48: en el Figma el bloque «Last» lleva 48 de relleno arriba —lo que
 * lo separa del destacado— y 24 de hueco entre sus hijos, que son el titulo,
 * la rejilla y este «cargar mas». */
.dtb-mas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	padding-top: 24px;
}

.dtb-mas-cuenta {
	margin: 0;
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-boton {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border: 1px solid var(--dtb-tinta);
	border-radius: 4px;
	background: #fff;
	color: var(--dtb-tinta);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-decoration: none;
	text-transform: uppercase;
}

.dtb-boton:hover,
.dtb-boton:focus {
	background: var(--dtb-tinta);
	color: #fff;
}

/*
 * En hover/focus el boton se pone negro: el icono de «abrir enlace» (↗) es
 * oscuro y se quedaria sin contraste, asi que se pasa a blanco, como el texto.
 * Es un <img>, por eso se recolorea con `filter` (`brightness(0)` lo deja negro
 * solido y `invert(1)` lo pasa a blanco). Solo el ↗ —el ultimo icono—; el de la
 * red NO se toca, conserva su color de marca.
 */
.dtb-boton:hover img.dtb-icono:last-of-type,
.dtb-boton:focus img.dtb-icono:last-of-type {
	filter: brightness(0) invert(1);
}

/* Mientras se traen los articulos siguientes: ni doble clic ni duda de si
   ha pasado algo. */
.dtb-boton.es-cargando {
	opacity: .6;
	pointer-events: none;
}

/* --- Barra lateral ------------------------------------------------------ */

.dtb-widget {
	padding: 24px 20px;
	border-radius: 8px;
}

.dtb-widget--leidos {
	background: var(--dtb-fondo);
}

.dtb-widget--redes,
.dtb-widget--expertos,
.dtb-widget--ultimos {
	border: 1px solid var(--dtb-linea);
	background: #fff;
}

.dtb .dtb-widget-titulo {
	margin: 0 0 24px;
	color: var(--dtb-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

.dtb-widget--redes .dtb-widget-titulo {
	margin-bottom: 16px;
	text-align: center;
}

.dtb-leidos,
.dtb-expertos,
.dtb-redes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-leidos > li,
.dtb-expertos > li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid var(--dtb-linea);
}

.dtb-leidos > li:first-child,
.dtb-expertos > li:first-child {
	padding-top: 0;
	border-top: 0;
}

.dtb-leidos-n {
	flex: 0 0 32px;
	color: var(--dtb-rojo);
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
	text-align: center;
}

.dtb-leidos-texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dtb-leidos-texto a {
	color: var(--dtb-tinta);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.dtb-leidos-texto a:hover {
	color: var(--dtb-rojo);
}

.dtb-leidos-vistas {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	align-self: flex-start;
	color: var(--dtb-suave);
	font-size: 12px;
	line-height: 18px;
}

.dtb-redes {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.dtb-redes a {
	display: block;
	line-height: 0;
}

/* El `flex-shrink: 0` va en el CONTENEDOR, no en la imagen.
   La foto va al lado del nombre en una fila flexible, y con un cargo largo
   —«Adviser in Organ Donation and Transplantation» ocupa tres lineas— el
   reparto le quitaba ancho: salia de 58 en vez de 68, ovalada. Ponerselo a la
   imagen no arregla nada, porque el elemento flexible es el contenedor y la
   imagen va capada por el; medido, que leer la propiedad enseñaba
   `flex-shrink: 0` en la imagen mientras seguia saliendo a 58.
   Solo se nota con varios expertos en la caja, de ahi que no saliera antes. */
.dtb-experto-foto {
	flex-shrink: 0;
}

.dtb-experto-foto img {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	object-fit: cover;
}

.dtb-experto-datos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dtb-experto-nombre {
	color: var(--dtb-tinta);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.dtb-experto-cargo {
	color: var(--dtb-texto);
	font-size: 14px;
	line-height: 20px;
}

.dtb-experto-n {
	color: var(--dtb-suave);
	font-size: 12px;
	line-height: 18px;
}

/* --- Texto de cierre ---------------------------------------------------- */

/* Solo arriba: los 64 de abajo los pone `.dtb`, que los necesita HAYA O NO
 * texto de cierre. En el Figma ese aire sale del relleno inferior del
 * parrafo, pero hoy ese texto esta vacio y sin esto el boton de «cargar mas»
 * queda pegado al pie. */
.dtb-cierre {
	padding-top: 64px;
}

.dtb-cierre p {
	margin: 0 0 16px;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

/* El Figma deja 64 justos entre el final de este texto y el pie, y esos 64 ya
   los pone `.dtb`. El margen del ultimo parrafo sumaba 16 de mas. */
.dtb-cierre p:last-child {
	margin-bottom: 0;
}

/* --- Pantallas estrechas ------------------------------------------------ */

@media (max-width: 1199px) {
	.dtb-cols {
		gap: 32px;
	}

	.dtb-main,
	.dtb-aside {
		max-width: none;
	}

	.dtb-aside {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	/* El Figma movil trabaja sobre 360 con margenes de 16. */
	.dtb-ancho {
		padding: 0 16px;
	}

	/* El hero movil conserva los 300 de alto y el relleno de 48/24; lo unico
	   que cambia es el tamaño del titulo. */
	.dtb .dtb-hero-titulo {
		font-size: 24px;
		line-height: 28px;
	}

	/* La caja del desplegable: 36 de alto contando el borde, como la pastilla
	 * y como el buscador, que en el Figma miden lo mismo. */
	.dtb-cats-resumen {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: space-between;
		min-height: 36px;
		padding: 0 12px;
		border: 1px solid var(--dtb-linea);
		border-radius: 4px;
		background: #fff;
		box-shadow: inset 0 2px 1px rgba(0, 0, 0, .02);
		color: var(--dtb-tinta);
		font-size: 14px;
		line-height: 20px;
		list-style: none;
		cursor: pointer;
	}

	/* El triangulito que pinta el navegador sobra: el chevron ya esta. */
	.dtb-cats-resumen::-webkit-details-marker {
		display: none;
	}

	.dtb-cats[open] .dtb-cats-resumen .dtb-icono {
		transform: rotate(180deg);
	}

	.dtb-cats .dtb-chips {
		flex-direction: column;
		align-items: stretch;
		margin-top: 12px;
	}

	.dtb-cats .dtb-chip {
		justify-content: space-between;
	}

	/* Figma movil: 40 de relleno arriba y abajo, y 12 entre el desplegable y
	 * el buscador. */
	.dtb-nav {
		flex-direction: column;
		gap: 12px;
		/* `stretch` y no el `flex-start` que hereda de escritorio: en el Figma
		 * el desplegable y el buscador ocupan los 328 de ancho. */
		align-items: stretch;
		padding: 40px 0;
	}

	.dtb-buscador {
		width: 100%;
	}

	.dtb-destacado {
		flex-direction: column;
	}

	.dtb-destacado-media {
		flex-basis: auto;
		aspect-ratio: 340 / 200;
		min-height: 0;
	}

	.dtb-grid {
		grid-template-columns: 1fr;
	}

	.dtb-intro {
		padding: 32px 0;
	}

	.dtb-cierre {
		padding-top: 48px;
	}

	.dtb {
		padding-bottom: 40px;
	}
}

/* --- Cabecera de categoria ---------------------------------------------- */

/* A diferencia de la bienvenida de la home —a la izquierda y a 800—, en el
 * Figma esta va CENTRADA y a 900, y su texto es de 16 y no de 15. */
.dtb-cabecera-termino {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 0 48px;
	text-align: center;
}

.dtb .dtb-termino-titulo {
	margin: 0;
	color: var(--dtb-tinta);
	font-size: 26px;
	font-weight: 600;
	line-height: 32px;
}

.dtb-termino-texto {
	margin-top: 16px;
}

.dtb-termino-texto p {
	margin: 0 0 16px;
	color: var(--dtb-texto);
	font-size: 16px;
	line-height: 24px;
}

.dtb-termino-texto p:last-child {
	margin-bottom: 0;
}

/* En la categoria el listado empieza directamente: no hay destacado, y la
 * cabecera del termino ya trae su relleno inferior. */
.dtb-ultimos--sin-destacado {
	padding-top: 0;
}

/* --- Busqueda ------------------------------------------------------------ */

.dtb-cols--busqueda {
	padding-top: 48px;
}

.dtb .dtb-busqueda-titulo {
	margin: 0 0 32px;
	color: var(--dtb-tinta);
	font-size: 26px;
	font-weight: 600;
	line-height: 32px;
}

.dtb-busqueda-vacia {
	margin: 0;
	color: var(--dtb-texto);
	font-size: 16px;
	line-height: 24px;
}

/* En movil los titulos de este Figma NO encogen: la categoria (2512:9959), el
   articulo (2533:7231) y la busqueda (2547:11059) los dibujan los tres en
   26/32 a 360, igual que en escritorio. Y los rellenos tampoco cambian. */
@media (max-width: 767px) {
	.dtb-cols--busqueda {
		padding-top: 48px;
	}

	.dtb .dtb-busqueda-titulo {
		margin-bottom: 32px;
	}
}

/* ========================================================================
   Ficha de articulo — #111976
   ===================================================================== */

/* 48 y no los 64 de la home: ahi la navegacion viene despues de la cabecera
   con imagen y aqui es lo primero de la pagina. Solo en escritorio: en movil
   el Figma le da 40 a todas las vistas por igual. */
@media (min-width: 768px) {
	.dtb-articulo .dtb-nav {
		padding-top: 48px;
	}
}

/* Cero: la cabecera del articulo —la misma caja centrada de 900 que la
   categoria— ya trae sus 48 de relleno inferior. */
.dtb-cols--articulo {
	padding-top: 0;
}

/* --- Datos del articulo -------------------------------------------------- */

.dtb-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
}

.dtb-datos-autor {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--dtb-texto);
	font-size: 14px;
	line-height: 20px;
}

.dtb-datos-autor a {
	color: inherit;
	text-decoration: underline;
}

.dtb-datos-resto {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-dato {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.dtb-destacada-post {
	margin: 0;
	aspect-ratio: 1024 / 570;
}

.dtb-destacada-post img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* --- Compartir y resumir con IA ------------------------------------------ */

/* Figma 2535:9820: el bloque mide 104 con el contenido a 16 del borde de
   arriba, asi que son 16 arriba y 24 abajo. */
.dtb-ia {
	padding: 16px 0 24px;
}

.dtb-ia-titulo {
	margin: 0 0 8px;
	color: var(--dtb-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
}

.dtb-ia-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-ia-lista li {
	margin: 0;
}

/* El rojo oscuro de la marca, no el rojo del blog: es `Primary/800`. */
.dtb .dtb-ia-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	/* Sin borde: el Figma lo pone del mismo color que el fondo, asi que no se
	   ve, pero sumaba 2 y dejaba el boton en 34 en vez de los 32 del diseño. */
	border: 0;
	border-radius: 4px;
	background: #922b22;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
}

.dtb .dtb-ia-boton:hover,
.dtb .dtb-ia-boton:focus {
	background: var(--dtb-rojo);
	color: #fff;
}

/* --- Indice -------------------------------------------------------------- */

/* Los 24 son para cuando el indice viene justo detras de la imagen. Si antes
   esta el bloque de IA, ese ya trae sus 24 por debajo y en el Figma los dos
   contenedores van pegados. */
.dtb-ia + .dtb-indice {
	margin-top: 0;
}

.dtb-indice {
	margin-top: 24px;
	padding: 24px 20px;
	border-radius: 8px;
	background: var(--dtb-fondo);
}

.dtb-indice-titulo {
	margin: 0 0 16px;
	color: var(--dtb-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

.dtb-indice ol {
	margin: 0;
	padding-left: 22px;
}

.dtb-indice li {
	margin-bottom: 4px;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-indice li.es-h3 {
	margin-left: 16px;
	list-style-type: lower-alpha;
}

.dtb-indice a {
	color: inherit;
}

/* --- Contenido ----------------------------------------------------------- */

.dtb-contenido {
	padding-top: 20px;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-contenido p {
	margin: 0 0 16px;
}

.dtb .dtb-contenido h2 {
	margin: 20px 0 12px;
	color: var(--dtb-tinta);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

/*
 * El style.css del tema trae `.single-post h2 { padding-bottom: 18px !important }`
 * (de la ficha vieja de single.php). En el blog eso mete 18 px de mas entre cada
 * titulo de seccion o de contenido y lo que va debajo, y el diseño quiere solo
 * la separacion del margen —24 en los titulos de seccion (revision #115379)—.
 * Se anula con mas especificidad y `!important`; cada titulo conserva su margen.
 */
.single-post .dtb h2 {
	padding-bottom: 0 !important;
}

.dtb .dtb-contenido h3 {
	margin: 20px 0 12px;
	color: var(--dtb-tinta);
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
}

.dtb-contenido img {
	height: auto;
}

.dtb-contenido a {
	color: var(--dtb-rojo);
}

/* --- Caja de cursos ------------------------------------------------------ */

.dtb-cursos {
	margin: 24px 0;
	padding: 24px 20px;
	border: 1px solid var(--dtb-rojo);
	border-radius: 8px;
	background: #fdf4f3;
}

.dtb-cursos-titulo {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 20px;
	color: var(--dtb-tinta);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

.dtb-cursos-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-cursos-lista li {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-top: 1px solid rgba(181, 49, 37, .25);
}

.dtb-cursos-lista li:first-child {
	padding-top: 0;
	border-top: 0;
}

.dtb-cursos-nombre {
	flex: 1 1 260px;
	color: var(--dtb-texto);
	font-size: 16px;
	line-height: 24px;
}

.dtb-cursos-cta {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 8px;
	align-items: center;
	color: var(--dtb-rojo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 12px;
	text-decoration: none;
	text-transform: uppercase;
}

/* --- Compartir ----------------------------------------------------------- */

.dtb-compartir {
	padding-top: 40px;
}

.dtb-compartir-titulo {
	margin: 0 0 16px;
	color: var(--dtb-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

.dtb-compartir-lista {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-compartir-lista a {
	display: block;
	line-height: 0;
}

/* --- Firma --------------------------------------------------------------- */

/* Componente «Author-signature-Desktop» (2647:9415): caja gris con tres filas
   separadas 18. Plegada solo se ve la primera. */
/* Las filas se separan con MARGEN y no con `gap`: un `<details>` en flex
   sigue contando el hueco hasta su contenido aunque este cerrado, y la caja
   plegada media 58 en vez de los 40 del Figma. */
.dtb-firma {
	margin-top: 40px;
	padding: 8px 12px;
	border-radius: 4px;
	background: var(--dtb-fondo);
}

/* Fila 1: la etiqueta, la foto pequeña y el nombre a un lado; «Ver mas» al
   otro. */
.dtb-firma-resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	cursor: pointer;
}

.dtb-firma-resumen::-webkit-details-marker {
	display: none;
}

.dtb-firma-izq {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
}

.dtb-firma-por {
	color: var(--dtb-suave);
	font-size: 12px;
	line-height: 18px;
}

.dtb-firma-quien {
	display: flex;
	gap: 8px;
	align-items: center;
}

.dtb-firma-quien a {
	color: var(--dtb-texto);
	font-size: 14px;
	line-height: 20px;
	text-decoration: underline;
}

/* El texto del enlace cambia al abrir, y vive en los atributos para no
   repetirlo en dos sitios ni necesitar JavaScript. */
.dtb-firma-mas::after {
	content: attr(data-mas);
	color: var(--dtb-texto);
	font-size: 13px;
	line-height: 20px;
	text-decoration: underline;
}

.dtb-firma[open] .dtb-firma-mas::after {
	content: attr(data-menos);
}

/* Fila 2: la ficha. */
.dtb-firma-detalle {
	display: flex;
	gap: 16px;
	align-items: center;
	max-width: 360px;
	margin-top: 18px;
}

.dtb-firma-foto .dtb-avatar {
	width: 48px;
	height: 48px;
}

.dtb-firma-datos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

/* Peso normal y en el gris del texto, no en negro: lo que pide el componente. */
.dtb-firma-nombre {
	color: var(--dtb-texto);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
}

.dtb-firma-cargo {
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

/* Fila 3: el sello a la izquierda y el enlace a la pagina de calidad A LA
   DERECHA, en la misma linea. */
.dtb-firma-pie {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
}

/* Pastilla blanca con borde verde, no texto suelto. */
.dtb-firma-sello {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 2px 8px 2px 6px;
	border: 1px solid #03b100;
	border-radius: 4px;
	background: #fff;
	color: #458057;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.dtb .dtb-firma-calidad {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	margin: 0;
	color: var(--dtb-texto);
	font-size: 12px;
	line-height: 18px;
	text-decoration: underline;
}

/* --- Relacionados -------------------------------------------------------- */

.dtb-relacionados {
	padding-top: 48px;
}

.dtb-grid--relacionados {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* --- Ultimos de la categoria, en la barra lateral ------------------------ */

.dtb-mini {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-mini > li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid var(--dtb-linea);
}

.dtb-mini > li:first-child {
	padding-top: 0;
	border-top: 0;
}

.dtb-mini-foto img {
	display: block;
	width: 80px;
	height: 80px;
	max-width: none;
	border-radius: 4px;
	object-fit: cover;
}

.dtb-mini-datos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dtb-mini-datos a {
	color: var(--dtb-tinta);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.dtb-mini-datos em {
	color: var(--dtb-suave);
	font-size: 12px;
	font-style: normal;
	line-height: 18px;
}

@media (max-width: 767px) {
	.dtb-cols--articulo {
		padding-top: 0;
	}

	.dtb-datos {
		gap: 8px;
	}

	.dtb-cursos {
		/* Mismo relleno que en escritorio: lo pide la revision #115379. Antes
		   se encogia a 20px 16px y el diseño quiere 24px 20px en los dos. */
		padding: 24px 20px;
	}
}

/* --- Relacionados: fichas horizontales, no la tarjeta del listado -------- */

.dtb-relacionados {
	padding-top: 40px;
}

.dtb .dtb-relacionados-titulo {
	margin: 0 0 24px;
	color: var(--dtb-tinta);
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
}

.dtb-rel {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-rel-item {
	display: flex;
	flex: 1 1 328px;
	gap: 16px;
	align-items: flex-start;
	min-width: 328px;
}

.dtb-rel-foto img {
	display: block;
	width: 120px;
	height: 71px;
	max-width: none;
	object-fit: cover;
}

.dtb-rel-datos {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dtb-rel-titulo {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--dtb-tinta);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.dtb-rel-autor {
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-rel-autor a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.dtb-rel-item {
		min-width: 0;
	}
}

/* --- Comentarios --------------------------------------------------------- */

.dtb-comentarios {
	padding: 40px 0 64px;
}

.dtb .dtb-comentarios-titulo {
	margin: 0 0 24px;
	color: var(--dtb-tinta);
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
}

.dtb-comentarios-invita {
	margin: 0 0 20px;
	color: var(--dtb-texto);
	font-size: 16px;
	line-height: 24px;
}

.dtb-form {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	margin-bottom: 32px;
}

/* Cada campo ocupa el ancho de la fila por defecto. */
.dtb-form > * {
	flex: 1 1 100%;
}

.dtb-form .comment-form-cookies-consent,
.dtb-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

/*
 * Nombre y correo comparten fila en escritorio. Antes salian en vertical: el
 * contenedor era en columna y la regla de fila apuntaba a `.comment-form-author`
 * /`.comment-form-email`, unas clases que este marcado NO emite —usa
 * `.dtb-campo--mitad`— asi que no aplicaba nunca (revision #115379).
 */
.dtb-campo--mitad {
	flex: 1 1 calc(50% - 10px);
	min-width: 180px;
}

@media (max-width: 767px) {
	.dtb-campo--mitad {
		flex-basis: 100%;
	}
}

.dtb-campo label {
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-campo label span {
	color: var(--dtb-rojo);
}

.dtb-campo input,
.dtb-campo textarea {
	width: 100%;
	/* Por lo mismo que en el buscador: el tema les pone margen propio y aqui
	   el hueco lo decide el `gap` del campo. */
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--dtb-linea);
	border-radius: 4px;
	background: #fff;
	color: var(--dtb-texto);
	font-family: inherit;
	font-size: 15px;
	line-height: 24px;
}

.dtb-campo textarea {
	min-height: 100px;
	resize: vertical;
}

.dtb-form .comment-form-cookies-consent {
	flex-direction: row;
	gap: 8px;
	align-items: flex-start;
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

/* Checkbox de consentimiento de privacidad (revision #115379). El nativo apenas
   se distinguia del fondo; se oculta el <input> y se pinta una marca propia con
   borde, con enlace a la pagina de privacidad. */
.dtb-campo--privacidad {
	flex-direction: row;
}

.dtb-check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	/* Neutral/700 y peso Regular, como el mockup (Figma 2545-10684). */
	color: var(--dtb-texto);
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.dtb-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.dtb-check-marca {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1px solid var(--dtb-texto);
	border-radius: 4px;
	background: #fff;
}

.dtb-check input:checked + .dtb-check-marca {
	border-color: var(--dtb-rojo);
	background: var(--dtb-rojo) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.dtb-check input:focus-visible + .dtb-check-marca {
	outline: 2px solid var(--dtb-rojo);
	outline-offset: 2px;
}

/* Todo el texto del consentimiento va en Neutral/700, no en el rojo de acento
   que Uncode pone al texto y a los enlaces de contenido (mockup 2545-10684).
   Uncode lo tiñe con `-webkit-text-fill-color`, que gana a `color` al pintar:
   por eso hay que fijar las DOS propiedades, y con `.dtb-check` por delante se
   le gana por especificidad sin `!important`. */
.dtb-check .dtb-check-texto,
.dtb-check .dtb-check-texto a {
	color: var(--dtb-texto);
	-webkit-text-fill-color: var(--dtb-texto);
}

.dtb-turnstile {
	/* `width:100%` + `data-size="flexible"` (en el marcado): el widget ocupa el
	   ancho del formulario, como el del formulario de descarga de los cursos. */
	width: 100%;
	min-height: 65px;
}

.dtb .dtb-boton-rojo {
	height: 48px;
	padding: 0 24px;
	border: 1px solid var(--dtb-rojo);
	border-radius: 4px;
	background: var(--dtb-rojo);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	/*
	 * `!important` y `margin-top: 0` porque el style.css del tema trae un
	 * `input[type=submit] { text-transform: capitalize !important; margin-top:
	 * 18px }` que, sin esto, dejaba el boton «Enviar comentario» en Capitalize
	 * —no en mayusculas como el resto— y con 18 px de aire extra encima, que es
	 * parte del hueco que el diseñador ve en el modal (revision #115379).
	 */
	margin-top: 0;
	text-transform: uppercase !important;
	cursor: pointer;
}

.dtb-comentarios-lista,
.dtb-comentarios-lista .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El tema da a cada comentario (<li>) un margen de ~45 px, que es el «mucho
   espacio vertical entre comentarios» que marca la revision #115379. El hueco
   lo dan el relleno y la linea de cada caja, asi que el margen del <li> sobra. */
.dtb-comentarios-lista > li,
.dtb-comentarios-lista .children > li {
	margin: 0;
}

.dtb-comentarios-lista .children {
	padding-left: 52px;
}

.dtb-comentario-caja {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 20px 0;
	border-bottom: 1px solid var(--dtb-linea);
}

.dtb-comentario-avatar {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: var(--dtb-fondo);
	color: var(--dtb-texto);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .52px;
}

.dtb-comentario-avatar img {
	width: 40px;
	height: 40px;
	max-width: none;
	object-fit: cover;
}

.dtb-comentario-cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

/* Nombre y cargo en la primera linea, la fecha en la suya debajo: en el Figma
   el bloque «Author and date» mide 42 —20 del nombre, 4 de hueco y 18 de la
   fecha— y no una sola linea de 20. */
.dtb-comentario-quien {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: baseline;
	margin: 0 0 8px;
}

.dtb-comentario-quien time {
	flex-basis: 100%;
}

.dtb-comentario-nombre {
	color: var(--dtb-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.dtb-comentario-cargo {
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-comentario-quien time {
	color: var(--dtb-suave);
	font-size: 13px;
	line-height: 20px;
}

.dtb-comentario-texto p {
	margin: 0 0 8px;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-comentario-espera {
	margin: 0 0 8px;
	color: var(--dtb-marca, #9a6700);
	font-size: 13px;
}

.dtb-comentario-responder {
	margin: 8px 0 0;
}

/* En linea y con 8 de hueco porque el Figma le pone un icono de respuesta
   detras de la palabra. El icono es decorativo —lleva `aria-hidden`— y la
   palabra sigue siendo el texto del enlace. */
.dtb-comentario-responder a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: var(--dtb-rojo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-decoration: none;
	text-transform: uppercase;
}

/* La respuesta de un experto va a TODO el ancho, alineada con el resto de
   comentarios —no indentada como una respuesta normal—, sobre gris, con las
   esquinas rectas y SIN relleno a la izquierda (el avatar arranca en 0, como
   el mockup 2546-10800). El sangrado de 52px que mete `.children` se compensa
   con el margen negativo. Sin raya roja a la izquierda: el mockup no la lleva. */
.dtb-comentarios-lista .children > .dtb-comentario--experto {
	margin-left: -52px;
}

.dtb-comentario--experto > .dtb-comentario-caja {
	padding: 20px 16px 20px 0;
	border-bottom: 0;
	background: var(--dtb-fondo);
}


@media (max-width: 767px) {
	.dtb-comentarios-lista .children {
		padding-left: 20px;
	}

	/* El margen que saca al experto a todo el ancho tiene que acompañar al
	   sangrado: aqui es de 20, no de 52, o la caja se sale por la izquierda. */
	.dtb-comentarios-lista .children > .dtb-comentario--experto {
		margin-left: -20px;
	}
}

/* --- Modal de responder -------------------------------------------------- */

/* El alto maximo y el scroll no son adorno: con el formulario dentro y el
 * widget de Turnstile, el modal pasa de 700 y en un portatil se quedaba el
 * boton de enviar fuera de la pantalla. */
.dtb-modal {
	width: 650px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	padding: 32px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: var(--dtb-texto);
	font-family: 'Montserrat', sans-serif;
}

.dtb-modal::backdrop {
	background: rgba(0, 0, 0, .5);
}

.dtb-modal-cerrar {
	display: block;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dtb-texto);
	font-size: 24px;
	line-height: 20px;
	cursor: pointer;
}

/* El `blockquote` del tema trae su propia raya a la izquierda y su sangrado;
 * aqui solo queremos la linea de abajo que dibuja el Figma. */
.dtb-modal-cita {
	margin: 16px 0 0;
	padding: 0 0 16px;
	border: 0;
	border-bottom: 1px solid var(--dtb-linea);
	color: var(--dtb-texto);
	font-size: 15px;
	font-style: normal;
	line-height: 24px;
}

.dtb-modal-titulo {
	margin: 24px 0;
	color: var(--dtb-rojo);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

/* Dentro del modal el formulario no lleva su propio titulo ni el enlace de
   cancelar: el titulo lo pone el modal y para cerrar esta la cruz. */
.dtb-modal .dtb-comentarios-invita,
.dtb-modal #cancel-comment-reply-link {
	display: none;
}

.dtb-modal .dtb-form {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.dtb-modal {
		padding: 20px 16px;
	}
}

/* =========================================================================
   FICHA DE EXPERTO — TAREA #111976
   Figma «Experto-Desktop» (2517:11960), sobre 1440 con contenido de 1240.
   ========================================================================= */

/* --- Cabecera: foto, nombre, cargo, bio y redes -------------------------- */

.dtb-exp-cabecera {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	padding-top: 40px;
}

/* La foto es un circulo de 150 y la imagen casi nunca sera cuadrada, asi que
   se recorta con `object-fit` en vez de deformarla. */
.dtb-exp-foto {
	display: block;
	overflow: hidden;
	flex: 0 0 150px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.dtb-exp-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dtb-exp-datos {
	flex: 1 1 0;
	min-width: 0;
}

/* Con la etiqueta `.dtb` delante para ganarle al h1 del tema padre. */
.dtb .dtb-exp-nombre {
	margin: 0;
	color: var(--dtb-tinta);
	font-size: 26px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: 0;
}

.dtb-exp-cargo {
	margin: 8px 0 0;
	color: var(--dtb-texto);
	font-size: 16px;
	line-height: 24px;
}

.dtb-exp-bio {
	margin: 16px 0 0;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-exp-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.dtb-exp-redes li {
	margin: 0;
}

/* El boton es el `.dtb-boton` de siempre; aqui solo se impide que el nombre
   de la red parta en dos lineas. */
.dtb-exp-redes .dtb-boton span {
	white-space: nowrap;
}

.dtb-exp-larga {
	padding-top: 24px;
}

/* --- Las secciones de la ficha ------------------------------------------ */

.dtb-exp-bloque {
	padding-top: 40px;
}

/* El Figma le da 48 a la primera, no 40: es la que viene pegada a la
   cabecera. */
.dtb-exp-bloque--areas {
	padding-top: 48px;
}

.dtb .dtb-exp-titulo {
	margin: 0 0 24px;
	color: var(--dtb-texto);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

/* --- Areas de especializacion ------------------------------------------- */

/* Sin enlace a proposito: la taxonomia `experto-area` se registra con
   `public => false` y no tiene archivo al que llevar. Lo anoto Diseño: «De
   momento, estas tags seran no clicables». Por eso son <li> y no <a>. */
.dtb-exp-areas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-exp-areas li {
	display: flex;
	align-items: center;
	min-height: 36px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--dtb-linea);
	border-radius: 4px;
	background: var(--dtb-fondo);
	color: var(--dtb-texto);
	font-size: 14px;
	line-height: 20px;
}

/* --- Las tres listas con check ------------------------------------------ */

.dtb-exp-lista {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-exp-lista li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
}

/* El icono mide 20 y la linea 24: los 2 de arriba lo centran con la primera
   linea del texto, no con el bloque entero. */
.dtb-exp-lista .dtb-icono {
	margin-top: 2px;
}

.dtb-exp-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	font-size: 15px;
	line-height: 24px;
}

.dtb-exp-item-texto {
	color: var(--dtb-tinta);
}

.dtb-exp-item-detalle {
	color: var(--dtb-suave);
}

/* --- Publicaciones cientificas ------------------------------------------ */

.dtb-pubs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtb-pub {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
}

/* La linea va entre publicaciones, no debajo de la ultima: con `+` no hace
   falta quitarsela despues a nadie. */
.dtb-pub + .dtb-pub {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--dtb-linea);
}

.dtb-pub-icono {
	display: flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 99px;
	background: #fdf4f3;
}

/* `min-width` y no `flex-basis`: por debajo de 284 el enlace baja a su propia
   linea en vez de estrujar el titulo. */
.dtb-pub-cuerpo {
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	min-width: 284px;
}

.dtb-pub-info {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dtb-pub-titulo {
	margin: 0;
	color: var(--dtb-tinta);
	font-size: 15px;
	line-height: 24px;
}

.dtb-pub-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	color: var(--dtb-suave);
	font-size: 12px;
	line-height: 18px;
}

.dtb-pub-barra {
	width: 1px;
	height: 12px;
	background: var(--dtb-linea);
}

.dtb .dtb-pub-enlace {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: var(--dtb-rojo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 12px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.dtb .dtb-pub-enlace:hover,
.dtb .dtb-pub-enlace:focus {
	color: var(--dtb-rojo);
	text-decoration: underline;
}

/* Lleva al perfil de ORCID cuando hay mas de cinco publicaciones. Ya no es un
   boton que despliega, asi que no necesita JavaScript. */
.dtb-pubs-mas {
	margin-top: 32px;
}

/* --- Sus articulos ------------------------------------------------------ */

.dtb-cols--experto {
	padding-top: 64px;
}

/* --- Formacion que imparte ---------------------------------------------- */

/* Las fichas de curso son las `.ccv2` del tema, que ya estan estiladas en el
   style.css y se traen con [training-offer]. Aqui solo va la caja. */
/* Sin relleno abajo: los 64 del final de la pagina ya los pone `.dtb`. */
.dtb-imparte {
	padding: 64px 0 0;
}

.dtb .dtb-imparte-titulo {
	margin: 0;
	color: var(--dtb-tinta);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.dtb-imparte-lead {
	margin: 8px 0 0;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-imparte .courses-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
	margin-top: 20px;
}

/* A partir de cuatro cursos el shortcode monta el carrusel del tema en vez de
   la rejilla (nota de Diseño en 2590:4623). Necesita el mismo aire por arriba
   y que las fichas de cada diapositiva queden a la misma altura.

   El relleno de abajo es para la paginacion: Swiper la coloca en absoluto a 10
   del fondo del carrusel y, sin sitio reservado, los puntos caen DENTRO de la
   primera ficha, encima de su contenido. */
.dtb-imparte .swiper {
	margin-top: 20px;
	padding-bottom: 36px;
}

.dtb-imparte .swiper-pagination {
	bottom: 0;
}

.dtb-imparte .swiper-slide {
	height: auto;
}

.dtb-imparte .swiper-slide > .ccv2 {
	height: 100%;
}

/* Cuatro fichas desde el 2026-10-21, no tres. Para que no quede nunca una
   suelta en su propia fila, el reparto es por tramos y siempre da filas
   completas: 4 con el contenedor entero, 2 + 2 en medio y 1 por fila en movil.
   A 1240 salen de 298, mas estrechas que las 402 que dibuja el Figma con tres. */
/* `1 1` y no `0 0`: con `flex-shrink: 0` las fichas no encogen, y si su
   contenido pide mas que el reparto empujan al contenedor por fuera de la
   ventana. Medido a 1024: el contenedor se iba a 1032 y asomaba 4 px por cada
   lado. */
.dtb-imparte .courses-grid > * {
	flex: 1 1 calc(25% - 12px);
	min-width: 0;
	max-width: none;
}

/* `.ccv2` viene del style.css del tema con `height: 100%`, y eso le desactiva
   el estirado: un porcentaje contra una caja de alto indefinido —la fila del
   flex— se resuelve como `auto`, asi que la ficha se queda con el alto de su
   contenido y las tres salen desiguales. Con `auto` explicito vuelve a mandar
   `align-items: stretch`. Es la misma trampa de las imagenes de las tarjetas
   del listado. */
.dtb-imparte .courses-grid > .ccv2 {
	height: auto;
}

/* 297 es el ancho del Figma, pero ahi lo mide con su propia fuente y aqui el
   texto no entraba: se partia en dos lineas. Pasa a ser el MINIMO y el boton
   crece lo que haga falta para que quepa en una. */
.dtb-imparte-cta {
	display: flex;
	/* `fit-content` y no `auto`: un flex de bloque con ancho automatico se
	   estira a los 1240 del contenedor. Asi se queda en lo que ocupa el
	   texto, con el minimo del Figma por debajo. */
	width: fit-content;
	min-width: 297px;
	max-width: 100%;
	margin: 40px auto 0;
	white-space: nowrap;
}

/* --- Pantallas estrechas ------------------------------------------------ */

/* --- Pantallas estrechas ------------------------------------------------ */

/* Por debajo del contenedor completo —1240 de contenido, 1288 de ventana— no
   caben cuatro sin estrujarlas, asi que pasan a dos filas de dos. */
@media (min-width: 768px) and (max-width: 1287px) {
	.dtb-imparte .courses-grid > * {
		flex: 1 1 calc(50% - 8px);
	}
}

/* Medidas del Figma «Experto-Mobile» (2517:11837), que trabaja sobre 360 con
   margenes de 16. El nombre NO encoge: sigue en 26/32 como en escritorio. */
@media (max-width: 767px) {
	.dtb-exp-cabecera {
		flex-direction: column;
		gap: 32px;
	}

	/* Texto y detalle dejan de ir en la misma linea. Van casi siempre en dos
	   —a 300 de ancho no caben juntos— asi que el hueco entre ellos pasa a
	   contar, y el Figma le da 4. */
	.dtb-exp-item {
		flex-direction: column;
		gap: 4px;
	}

	/* El enlace de la publicacion cae debajo, no a la derecha: a 360 no caben
	   los dos. */
	.dtb-pub-cuerpo {
		flex-direction: column;
		gap: 24px;
		align-items: flex-start;
		min-width: 0;
	}

	/* 48 y no los 64 de escritorio, y la barra lateral se separa 48 del
	   listado en vez de los 32 que heredaba. */
	.dtb-cols--experto {
		gap: 48px;
		padding-top: 48px;
	}

	.dtb-imparte {
		padding: 48px 0 0;
	}

	/* Una ficha por fila, a todo el ancho. */
	.dtb-imparte .courses-grid > * {
		flex: 1 1 100%;
	}

	/*
	 * Y lo mismo cuando hay cuatro o mas cursos: ahi el shortcode monta el
	 * carrusel de Swiper, pero en movil el Figma lo quiere en una sola columna
	 * (revision #115379). Se desarma por CSS —el wrapper se apila, cada ficha a
	 * todo el ancho y fuera la paginacion—, que es menos fragil que reconfigurar
	 * Swiper por JS. El `transform` lleva `!important` porque Swiper lo escribe
	 * en linea.
	 */
	.dtb-imparte .swiper {
		padding-bottom: 0;
	}

	.dtb-imparte .swiper-wrapper {
		display: block;
		transform: none !important;
	}

	.dtb-imparte .swiper-slide {
		width: 100% !important;
		margin: 0 0 16px !important;
	}

	.dtb-imparte .swiper-pagination {
		display: none;
	}
}

/* =========================================================================
   PROCESO DE CALIDAD DE CONTENIDOS — TAREA #111976
   Figma 2627:4999 (escritorio) y 2627:4965 (movil).

   Casi todo se hereda: el texto es `.dtb-contenido`, que ya trae del articulo
   las mismas medidas que pide este mockup —15/24 en #333, h2 de 20/28 en #111
   con 20 arriba y 12 abajo—, y la caja del indice es la misma que `.dtb-indice`.
   Aqui solo va lo propio de esta pagina.
   ========================================================================= */


.dtb-cols--calidad {
	padding-top: 48px;
}

.dtb .dtb-calidad-titulo {
	margin: 0;
	color: var(--dtb-tinta);
	font-size: 26px;
	font-weight: 600;
	line-height: 32px;
}

/* Las imagenes del texto respiran 20 arriba y abajo, y solo AQUI: en la ficha
   de articulo el tratamiento es otro y no se toca. */
.dtb-calidad .dtb-contenido img {
	display: block;
	margin: 20px 0;
}

/* El enlace de descarga va pegado a su imagen: el margen de 20 de la imagen
   queda por encima del enlace, y el aire de abajo lo pone el enlace. El Figma
   no dibuja este enlace —solo lo anota—, asi que lleva el tratamiento de
   enlace de texto del blog hasta que Diseño diga otra cosa. */
.dtb-calidad .dtb-contenido img {
	margin-bottom: 8px;
}

.dtb-descarga {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--dtb-rojo);
	font-size: 14px;
	line-height: 20px;
	text-decoration: underline;
}

/* --- La tabla de contenidos --------------------------------------------- */

/* El resumen solo existe en movil; en escritorio manda la caja. */
.dtb-toc-resumen {
	display: none;
}

.dtb-toc-caja {
	padding: 24px 20px;
	border-radius: 8px;
	background: var(--dtb-fondo);
}

.dtb-toc-titulo {
	margin: 0 0 16px;
	color: var(--dtb-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

.dtb-toc-caja ol {
	margin: 0;
	padding-left: 22px;
}

.dtb-toc-caja li {
	margin-bottom: 4px;
	color: var(--dtb-texto);
	font-size: 15px;
	line-height: 24px;
}

.dtb-toc-caja li.es-h3 {
	margin-left: 16px;
	list-style-type: lower-alpha;
}

.dtb-toc-caja a {
	color: inherit;
}

/* --- Pantallas estrechas ------------------------------------------------ */

/* El indice se adelanta en cuanto las columnas se apilan, que es desde 1199 y
   no desde 767. Si se dejara en su sitio del HTML —va DESPUES del contenido,
   para que quien lea sin CSS se encuentre antes el texto— acabaria al final de
   la pagina, detras de todo lo que indexa, que no sirve de nada.

   De 768 a 1199 se queda como caja, a todo el ancho; por debajo se convierte
   ademas en desplegable, que es lo que pide el Figma movil. */
@media (max-width: 1199px) {
	.dtb-aside--calidad {
		order: -1;
	}
}

@media (max-width: 767px) {
	.dtb-cols--calidad {
		gap: 32px;
		padding-top: 24px;
	}

	/* Misma caja que el desplegable de categorias y que el buscador: 36 de
	   alto contando el borde. */
	.dtb-toc-resumen {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: space-between;
		min-height: 36px;
		padding: 0 12px;
		border: 1px solid var(--dtb-linea);
		border-radius: 4px;
		background: #fff;
		box-shadow: inset 0 2px 1px rgba(0, 0, 0, .02);
		color: var(--dtb-tinta);
		font-size: 14px;
		line-height: 20px;
		list-style: none;
		cursor: pointer;
	}

	.dtb-toc-resumen::-webkit-details-marker {
		display: none;
	}

	.dtb-toc[open] .dtb-toc-resumen .dtb-icono {
		transform: rotate(180deg);
	}

	/* Desplegado, el indice no repite su titulo: ya lo dice el resumen. */
	.dtb-toc .dtb-toc-caja {
		margin-top: 12px;
	}

	.dtb-toc .dtb-toc-titulo {
		display: none;
	}
}