/*
 * Pulso Médico · Artículo
 *
 * Archivo: wp-content/themes/Educa-Med/assets/css/pulso-articulo.css
 * Versión: 1.12.0
 *
 * Depende de pulso-base.css.
 *
 * LOS SEIS BLOQUES EDITORIALES van definidos al final, aunque el constructor
 * de entradas todavía no los genere. Hoy se pueden usar desde el editor de
 * WordPress añadiendo la clase adicional a un bloque nativo; cuando ampliemos
 * el constructor, solo tendrá que emitir ese marcado y no habrá que tocar
 * este archivo.
 *
 * Changelog
 * 1.12.0 — Las cifras y las tarjetas salían apiladas. WordPress inserta un
 *          <div class="wp-block-group__inner-container"> entre un core/group
 *          y su contenido en los temas que no traen theme.json, y Astra no lo
 *          trae. La rejilla quedaba con un único hijo, ese envoltorio, y todo
 *          el contenido dentro de una sola celda. Se neutraliza con
 *          display: contents, que saca el envoltorio de la caja sin tocar el
 *          documento. Vale con envoltorio y sin él, así que si algún día el
 *          tema pasa a tener theme.json esto sigue funcionando.
 *          La imagen de las tarjetas baja de 3:2 a 16:9.
 *          (No hubo 1.11.0: fue un intento con !important sobre un
 *          diagnóstico equivocado, no llegó a subirse.)
 * 1.10.0 — Las cifras salían apiladas en vertical. De toda la regla del
 *          contenedor solo se caía «display», con el filete, el fondo y el
 *          centrado aplicándose bien, así que había otra hoja ganando en esa
 *          propiedad sobre .wp-block-group. Se sube la especificidad de las
 *          tres rejillas —cifras, tarjetas y dos columnas— y se anulan los
 *          márgenes automáticos y el ancho máximo que WordPress pone a los
 *          hijos de un grupo con disposición «constrained», que en una
 *          rejilla no pintan nada.
 * 1.9.0 — Los dos ajustes que quedaban pendientes de los bloques editoriales.
 *         Las cifras admiten el tercer nivel, la descripción secundaria: la
 *         hoja se escribió contando con encabezado y un párrafo, y el
 *         constructor emite dos. Las tarjetas admiten imagen, que tampoco
 *         estaba contemplada. Y el enlace del título de una tarjeta se estira
 *         por encima de toda ella: es lo que hace la tarjeta pulsable entera
 *         sin envolver el grupo en un <a>, que no es marcado nativo y deja un
 *         enlace cuyo nombre accesible es todo el texto seguido.
 * 1.8.0 — La entradilla pasa al color primario y ANULA el filete en lugar de
 *         limitarse a no declararlo. Quitar una declaración no deshace la que
 *         pueda venir de otra hoja: hay que escribir el valor contrario. Sube
 *         también la especificidad para no depender del orden de carga.
 * 1.7.0 — La entradilla pierde el filete lateral. Lo comparte con la cita, y
 *         el filete significa «voz ajena al texto»: dos cosas distintas con
 *         la misma señal. El sangrado tampoco le correspondía, porque la
 *         entradilla no es un inciso al margen sino el arranque de la
 *         columna. Se distingue por tamaño y color, como el sumario de
 *         cualquier periódico, y el filete queda como marca exclusiva de la
 *         cita.
 * 1.6.0 — Migas de pan: las listas de selectores estaban mal emparejadas y
 *         cada regla dejaba suelto el contenedor .rank-math-breadcrumb del
 *         artículo. La última en aplicarse era la de los separadores, así que
 *         el contenedor acababa pintado del color del filete y la página
 *         actual, que es un span sin color propio, lo heredaba: se leía
 *         apenas. Ahora cada regla cubre las dos clases y la página actual
 *         tiene color propio.
 *         El logotipo del cierre se acota por altura y no por anchura: los
 *         dos logotipos tienen proporciones muy distintas y un límite de
 *         anchura deja el circular enorme y el apaisado diminuto.
 * 1.5.0 — El logotipo del cierre se acota a tamaño de firma. El constructor
 *         de entradas ya lo emite, y sin regla propia el PNG salía al ancho
 *         completo del recuadro, que es más ancho que el propio logotipo.
 * 1.4.0 — Las migas se enganchan a .pulso-raiz y cubren las dos clases,
 *         __articulo y __archivo: en el archivo la raíz y la clase son otras
 *         y salían sin estilo.
 * 1.3.0 — Las comillas decorativas y las migas de pan suben de especificidad:
 *         empataban con Astra y ganaba la suya por cargar después.
 * 1.2.1 — La cita deja de ir sangrada: el navegador aplica margin-inline de
 *         40px a todo blockquote y margin-block solo tocaba arriba y abajo.
 *         Filete a 4px, para que el azul se lea.
 * 1.2.0 — Cita rehecha según la maqueta: filete azul, sin fondo ni comilla
 *         decorativa, y aplicada a cualquier blockquote, no solo a los que
 *         lleven la clase. Encabezado de «Más en» reducido y con selector
 *         que vence a Astra. Bloque de recomendados a la medida del texto.
 *         Etiquetas con el tinte claro de la maqueta al pasar por encima.
 * 1.1.0 — Respaldo de ancho completo para las franjas del marco.
 * 1.0.0 — Versión inicial.
 */

/* =========================================================================
 * Ancho completo · respaldo
 *
 * La vía principal es el filtro astra_get_content_layout, que pone la entrada
 * en diseño estirado. Esto es la red de seguridad por si algún ajuste del
 * personalizador vuelve a encajonar el contenido: saca las franjas del
 * contenedor tirando de los márgenes hasta el borde de la ventana.
 *
 * Es seguro porque el sitio ya lleva overflow-x oculto en el body, así que
 * los 100vw no provocan desplazamiento horizontal. Si el filtro basta, estas
 * reglas no cambian nada: el contenedor ya ocupa todo el ancho y el cálculo
 * da cero.
 * ====================================================================== */

.single-post .pulso-cabecera,
.single-post .pulso-articulo,
.single-post .pulso-pie {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* =========================================================================
 * Migas de pan
 *
 * Rank Math emite el marcado sin estilos, a propósito, para que cada tema
 * ponga el suyo.
 * ====================================================================== */

.pulso-articulo__migas {
	background-color: var(--pulso-color-superficie);
}

.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb {
	padding-block: var(--pulso-esp-16);
	border-bottom: var(--pulso-filete);
}

/*
 * CUIDADO AL EMPAREJAR ESTAS LISTAS: cada regla tiene que repetir el elemento
 * final en las dos clases, __articulo y __archivo. Si el elemento se escribe
 * solo en la segunda, la primera queda apuntando al contenedor entero, y como
 * el contenedor lo heredan todos los hijos, la última regla del bloque decide
 * el color de las migas que no tienen uno propio.
 *
 * El tamaño se fija también en enlaces y separadores: Rank Math los emite como
 * hijos del párrafo y basta con que el tema vista los enlaces del contenido
 * para que hereden otro tamaño.
 */
.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p,
.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p a,
.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p span,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p a,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p span {
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.4;
}

.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pulso-esp-8);
	margin: 0;
	color: var(--pulso-color-apagado);
}

.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p a,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p a {
	color: var(--pulso-color-acento);
	text-decoration: none;
}

.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p a:hover,
.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p a:focus-visible,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p a:hover,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p a:focus-visible {
	text-decoration: underline;
}

.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p .separator,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p .separator {
	color: var(--pulso-color-linea);
}

/*
 * Página actual. Rank Math la emite como span, y unas versiones le ponen la
 * clase «last» y otras no: se cubren las dos formas para no depender de ello.
 * No va en color de enlace porque no lo es, pero tiene que leerse.
 */
.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p .last,
.pulso-raiz .pulso-articulo__migas .rank-math-breadcrumb p > span:not(.separator),
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p .last,
.pulso-raiz .pulso-archivo__migas .rank-math-breadcrumb p > span:not(.separator) {
	color: var(--pulso-color-secundario);
}

/* =========================================================================
 * Contenedor del artículo
 *
 * Medida de lectura acotada: en un texto largo, una línea de más de 75
 * caracteres cansa y hace perder el renglón al saltar.
 * ====================================================================== */

.pulso-articulo {
	background-color: var(--pulso-color-superficie);
}

.pulso-articulo__interior {
	max-width: 800px;
	margin-inline: auto;
	padding-block: var(--pulso-esp-40);
}

/* =========================================================================
 * Encabezado
 * ====================================================================== */

.pulso-articulo__encabezado {
	display: flex;
	flex-direction: column;
	gap: var(--pulso-esp-16);
}

.pulso-articulo__antetitulo {
	margin: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-etiqueta);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pulso-color-acento);
}

.pulso-articulo__titular {
	margin: 0;
	font-family: var(--pulso-fuente-editorial);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 600;
	letter-spacing: var(--pulso-tracking-titular);
	line-height: 1.1;
	color: var(--pulso-color-primario);
}

.pulso-articulo__entradilla {
	margin: 0;
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-entradilla);
	line-height: 1.55;
	color: var(--pulso-color-apagado);
}

/* =========================================================================
 * Firma
 * ====================================================================== */

.pulso-articulo__firma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pulso-esp-12);
	padding-block: var(--pulso-esp-16);
	border-block: var(--pulso-filete);
}

.pulso-articulo__retrato {
	flex: 0 0 auto;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--pulso-color-linea-suave);
}

.pulso-articulo__retrato-imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.pulso-articulo__firma-datos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: auto;
}

.pulso-articulo__autor {
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-etiqueta);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pulso-color-primario);
}

.pulso-articulo__fecha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pulso-esp-8);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.3;
	color: var(--pulso-color-apagado);
}

.pulso-articulo__separador {
	color: var(--pulso-color-linea);
}

/* --- Compartir --- */

.pulso-articulo__compartir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pulso-esp-8);
}

.pulso-articulo__compartir-rotulo {
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--pulso-color-apagado);
}

.pulso-articulo__compartir-enlace {
	padding: var(--pulso-esp-4) var(--pulso-esp-12);
	border: 1px solid var(--pulso-color-linea);
	border-radius: 999px;
	background-color: var(--pulso-color-blanco);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.6;
	text-decoration: none;
	color: var(--pulso-color-primario);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pulso-articulo__compartir-enlace:hover,
.pulso-articulo__compartir-enlace:focus-visible {
	border-color: var(--pulso-color-acento);
	background-color: var(--pulso-color-acento);
	color: var(--pulso-color-blanco);
}

.pulso-articulo__copiar--hecho {
	border-color: var(--pulso-color-primario);
	background-color: var(--pulso-color-primario);
	color: var(--pulso-color-blanco);
}

/* =========================================================================
 * Fotografía de apertura
 * ====================================================================== */

.pulso-articulo__figura {
	margin: var(--pulso-esp-32) 0 0;
}

.pulso-articulo__imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-color: var(--pulso-color-linea-suave);
}

.pulso-articulo__pie {
	margin-top: var(--pulso-esp-8);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.5;
	color: var(--pulso-color-apagado);
}

/* =========================================================================
 * Cuerpo del texto
 * ====================================================================== */

.pulso-articulo__texto {
	margin-top: var(--pulso-esp-32);
	font-family: var(--pulso-fuente-editorial);
	font-size: 19px;
	line-height: 1.65;
	color: var(--pulso-color-tinta);
}

.pulso-articulo__texto > * {
	margin-block: 0 var(--pulso-esp-24);
}

.pulso-articulo__texto > *:last-child {
	margin-bottom: 0;
}

.pulso-articulo__texto h2,
.pulso-articulo__texto h3,
.pulso-articulo__texto h4 {
	margin-top: var(--pulso-esp-40);
	margin-bottom: var(--pulso-esp-16);
	font-family: var(--pulso-fuente-editorial);
	font-weight: 600;
	letter-spacing: var(--pulso-tracking-titular);
	line-height: 1.2;
	color: var(--pulso-color-primario);
}

.pulso-articulo__texto h2 {
	font-size: var(--pulso-texto-titular-l);
}

.pulso-articulo__texto h3 {
	font-size: var(--pulso-texto-titular-m);
}

.pulso-articulo__texto h4 {
	font-size: var(--pulso-texto-titular-s);
}

.pulso-articulo__texto a {
	color: var(--pulso-color-acento);
	text-underline-offset: 3px;
}

.pulso-articulo__texto ul,
.pulso-articulo__texto ol {
	padding-left: var(--pulso-esp-24);
}

.pulso-articulo__texto li {
	margin-bottom: var(--pulso-esp-8);
}

.pulso-articulo__texto img,
.pulso-articulo__texto figure {
	max-width: 100%;
	height: auto;
}

.pulso-articulo__texto figcaption {
	margin-top: var(--pulso-esp-8);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.5;
	color: var(--pulso-color-apagado);
}

/* Vídeos incrustados: proporción estable y sin desbordar. */
.pulso-articulo__texto .wp-block-embed__wrapper iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* =========================================================================
 * Etiquetas
 * ====================================================================== */

.pulso-articulo__etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pulso-esp-8);
	margin-top: var(--pulso-esp-40);
	padding-top: var(--pulso-esp-20);
	border-top: var(--pulso-filete);
}

.pulso-articulo__etiquetas-rotulo {
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--pulso-color-apagado);
}

.pulso-articulo__etiqueta {
	padding: var(--pulso-esp-4) var(--pulso-esp-12);
	border: 1px solid var(--pulso-color-linea);
	border-radius: 999px;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.6;
	text-decoration: none;
	color: var(--pulso-color-primario);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Tinte claro al pasar por encima, como en la maqueta: la etiqueta es un
   destino secundario y no debe competir con el texto del artículo. */
.pulso-articulo__etiqueta:hover,
.pulso-articulo__etiqueta:focus-visible {
	border-color: var(--pulso-color-tinte);
	background-color: var(--pulso-color-tinte);
	color: var(--pulso-color-primario);
}

/* =========================================================================
 * Más en la sección
 * ====================================================================== */

.pulso-articulo__mas {
	background-color: var(--pulso-color-superficie);
}

/*
 * A la medida del texto, no a ancho completo: el lector viene de una columna
 * de 800 px y las recomendaciones deben quedar bajo ella, no desparramarse.
 */
.pulso-articulo__mas .pulso-seccion__interior {
	max-width: 800px;
	padding-block: var(--pulso-esp-40);
	border-top: var(--pulso-filete);
}

/*
 * Astra viste los encabezados del contenido con su propia tipografía y
 * tamaño, y le ganaba a una clase suelta. Con la cadena completa, no.
 */
.pulso-articulo .pulso-encabezado .pulso-encabezado__titulo {
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-titular-s);
	font-weight: 600;
	letter-spacing: var(--pulso-tracking-titular);
	line-height: 1.2;
	text-transform: none;
	color: var(--pulso-color-primario);
}

.pulso-articulo .pulso-encabezado {
	padding-bottom: var(--pulso-esp-8);
	border-bottom: 2px solid var(--pulso-color-primario);
	margin-bottom: var(--pulso-esp-20);
}

.pulso-articulo__mas-lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pulso-esp-32);
}

@media (min-width: 641px) {

	.pulso-articulo__mas-lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pulso-articulo__mas-lista .pulso-tarjeta__imagen {
	aspect-ratio: 3 / 2;
}

/* =========================================================================
 * BLOQUES EDITORIALES
 *
 * Los seis componentes del sistema de publicación. Hoy se aplican desde el
 * editor añadiendo la clase adicional al bloque nativo que se indica; cuando
 * el constructor los genere, emitirá este mismo marcado.
 * ====================================================================== */

/* --- 1. Entradilla · core/paragraph con clase pulso-entradilla --------- */

/*
 * Sin filete y sin sangrar, alineada con el cuerpo: el filete lateral lo usa
 * la cita para decir «esto lo dice otro», y repetirlo aquí deja al lector sin
 * forma de distinguir las dos piezas. El tamaño y el color bastan, que es
 * como se resuelve el sumario en cualquier periódico.
 *
 * El filete y el sangrado se ANULAN con su valor contrario, no se omiten: si
 * la clase está declarada también en otra hoja, quitar aquí la declaración no
 * deshace nada. Por lo mismo el selector arranca en .pulso-articulo, para no
 * quedar empatado con una regla que cargue después.
 *
 * El aire de debajo es mayor que el que separa dos párrafos: es lo que marca
 * dónde acaba la entrada al artículo y empieza el artículo.
 */
.pulso-articulo .pulso-articulo__texto .pulso-entradilla {
	margin-bottom: var(--pulso-esp-32);
	padding-left: 0;
	border-left: 0;
	font-size: var(--pulso-texto-entradilla);
	line-height: 1.5;
	text-align: left;
	color: var(--pulso-color-primario);
}

/* --- 2. Cita destacada · core/quote ------------------------------------
 *
 * Se aplica a CUALQUIER blockquote del artículo, no solo a los que lleven la
 * clase: el redactor usa el bloque de cita normal de WordPress y debe verse
 * bien sin tener que acordarse de añadir nada. La clase queda para la
 * variante corporativa.
 */

/*
 * OJO CON EL MARGEN: la hoja de estilos del navegador aplica
 * «margin: 1em 40px» a blockquote. Con margin-block solo se tocan arriba y
 * abajo, y la cita queda sangrada 40px respecto al resto del texto. Hay que
 * anular el margen lateral explícitamente.
 */
.pulso-articulo .pulso-articulo__texto blockquote,
.pulso-articulo .pulso-articulo__texto .wp-block-quote,
.pulso-articulo .pulso-articulo__texto .pulso-cita {
	margin: var(--pulso-esp-40) 0;
	padding: 0 0 0 var(--pulso-esp-24);
	border: 0;
	border-left: 4px solid var(--pulso-color-primario);
	background-color: transparent;
	text-align: left;
	font-style: normal;
}

/* Astra añade comillas decorativas a las citas: aquí sobran. */
.pulso-articulo .pulso-articulo__texto blockquote::before,
.pulso-articulo .pulso-articulo__texto blockquote::after,
.pulso-articulo .pulso-articulo__texto blockquote p::before,
.pulso-articulo .pulso-articulo__texto blockquote p::after,
.pulso-articulo .pulso-articulo__texto .wp-block-quote::before,
.pulso-articulo .pulso-articulo__texto .wp-block-quote::after {
	content: none;
}

.pulso-articulo .pulso-articulo__texto blockquote p,
.pulso-articulo .pulso-articulo__texto .pulso-cita p {
	margin: 0 0 var(--pulso-esp-12);
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-titular-s);
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pulso-color-primario);
}

.pulso-articulo .pulso-articulo__texto blockquote p:last-child,
.pulso-articulo .pulso-articulo__texto .pulso-cita p:last-child {
	margin-bottom: 0;
}

.pulso-articulo .pulso-articulo__texto blockquote cite,
.pulso-articulo .pulso-articulo__texto blockquote footer,
.pulso-articulo .pulso-articulo__texto .pulso-cita cite,
.pulso-articulo .pulso-articulo__texto .pulso-cita footer {
	display: block;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-style: normal;
	font-weight: 400;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--pulso-color-apagado);
}

/* Variante corporativa: fondo azul, para una frase de peso. */
.pulso-articulo .pulso-articulo__texto .pulso-cita--corporativa {
	margin: var(--pulso-esp-40) 0;
	padding: var(--pulso-esp-24);
	border-left: 0;
	background-color: var(--pulso-color-primario);
}

.pulso-articulo .pulso-articulo__texto .pulso-cita--corporativa p {
	color: var(--pulso-color-blanco);
}

.pulso-articulo .pulso-articulo__texto .pulso-cita--corporativa cite,
.pulso-articulo .pulso-articulo__texto .pulso-cita--corporativa footer {
	color: var(--pulso-color-claro);
}

/* --- 3. Dos columnas · core/columns con clase pulso-dos-columnas ------- */

.pulso-articulo .pulso-articulo__texto .pulso-dos-columnas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pulso-esp-24);
	margin-block: var(--pulso-esp-32);
}

@media (min-width: 641px) {

	.pulso-articulo .pulso-articulo__texto .pulso-dos-columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pulso-esp-32);
	}
}

.pulso-articulo .pulso-articulo__texto .pulso-dos-columnas > * {
	margin: 0;
	max-width: none;
}

.pulso-articulo__texto .pulso-dos-columnas img {
	width: 100%;
	height: auto;
}

/* --- Envoltorio de compatibilidad de los grupos ---------------------------
 *
 * WordPress mete un <div class="wp-block-group__inner-container"> entre un
 * core/group y su contenido en los temas que no declaran theme.json. Astra no
 * lo declara, así que aquí sale siempre. Una rejilla puesta sobre el grupo se
 * queda entonces con un único hijo —ese div— y todo el contenido cae en una
 * sola celda, apilado.
 *
 * display: contents lo saca del árbol de cajas sin tocar el documento: sus
 * hijos pasan a ser hijos de la rejilla a todos los efectos.
 *
 * La regla vale con envoltorio y sin él: si no existe, no hay nada que
 * neutralizar y las celdas ya son las correctas. Por eso las reglas de las
 * celdas contemplan las dos formas, en lugar de dar por hecha una.
 */
.pulso-articulo .pulso-articulo__texto .pulso-tarjetas > .wp-block-group__inner-container,
.pulso-articulo .pulso-articulo__texto .pulso-cifras > .wp-block-group__inner-container {
	display: contents;
}

/* --- 4. Tarjetas · core/group con clase pulso-tarjetas ----------------- */

.pulso-articulo .pulso-articulo__texto .pulso-tarjetas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pulso-esp-20);
	margin-block: var(--pulso-esp-32);
}

@media (min-width: 641px) {

	.pulso-articulo .pulso-articulo__texto .pulso-tarjetas {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/*
 * position: relative es el anclaje del enlace estirado de más abajo. Sin él,
 * el ::after se referiría al primer antepasado posicionado, que podría ser
 * cualquiera, y la zona pulsable se iría por la página.
 */
.pulso-articulo .pulso-articulo__texto .pulso-tarjetas > *:not(.wp-block-group__inner-container),
.pulso-articulo .pulso-articulo__texto .pulso-tarjetas > .wp-block-group__inner-container > * {
	margin: 0;
	max-width: none;
	position: relative;
	padding: var(--pulso-esp-20);
	border: var(--pulso-filete);
	background-color: var(--pulso-color-blanco);
	transition: border-color 0.15s ease;
}

/* La tarjeta entera responde al puntero y al foco del teclado. :focus-within
   es lo que da la señal cuando se llega tabulando y no con el ratón. */
.pulso-articulo__texto .pulso-tarjetas > *:not(.wp-block-group__inner-container):hover,
.pulso-articulo__texto .pulso-tarjetas > *:not(.wp-block-group__inner-container):focus-within,
.pulso-articulo__texto .pulso-tarjetas > .wp-block-group__inner-container > *:hover,
.pulso-articulo__texto .pulso-tarjetas > .wp-block-group__inner-container > *:focus-within {
	border-color: var(--pulso-color-acento);
}

/* Imagen de la tarjeta. La proporción fija iguala las alturas de la fila:
   con imágenes de formatos distintos, la rejilla queda escalonada. */
.pulso-articulo__texto .pulso-tarjetas figure {
	margin: 0 0 var(--pulso-esp-16);
}

/*
 * La proporción es lo que fija la altura de la imagen. Cambiando ese único
 * valor sube o baja: cuanto más ancha, menos peso visual tiene la foto frente
 * al texto. object-fit: cover recorta en lugar de deformar, así que da igual
 * con qué formato suban las imágenes: la fila queda pareja.
 */
.pulso-articulo__texto .pulso-tarjetas img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * ENLACE ESTIRADO. El <a> vive en el título, que es donde tiene un nombre que
 * leer en voz alta, y su ::after cubre la tarjeta entera. Al pulsar da igual
 * dónde se pulse; al tabular, el foco sigue yendo al título.
 *
 * Solo funciona con un enlace por tarjeta: un segundo quedaría tapado por el
 * primero. Por eso el constructor no emite más.
 */
.pulso-articulo__texto .pulso-tarjetas h3 a,
.pulso-articulo__texto .pulso-tarjetas h4 a {
	color: inherit;
	text-decoration: none;
}

.pulso-articulo__texto .pulso-tarjetas h3 a::after,
.pulso-articulo__texto .pulso-tarjetas h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pulso-articulo__texto .pulso-tarjetas h3,
.pulso-articulo__texto .pulso-tarjetas h4 {
	margin-top: 0;
	margin-bottom: var(--pulso-esp-8);
	font-size: var(--pulso-texto-titular-s);
}

.pulso-articulo__texto .pulso-tarjetas p {
	margin-bottom: var(--pulso-esp-12);
	font-size: var(--pulso-texto-base);
	color: var(--pulso-color-apagado);
}

/* --- 5. Cifras · core/group con clase pulso-cifras --------------------- */

/*
 * LA CADENA LARGA ES A PROPÓSITO. Estas tres rejillas se aplican sobre un
 * bloque de grupo o de columnas de WordPress, y tanto el núcleo como el tema
 * traen reglas propias sobre .wp-block-group. Con dos clases se empata y
 * decide el orden de carga, que no está bajo nuestro control.
 */
.pulso-articulo .pulso-articulo__texto .pulso-cifras {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pulso-esp-20);
	margin-block: var(--pulso-esp-32);
	padding: var(--pulso-esp-24);
	background-color: var(--pulso-color-blanco);
	border: var(--pulso-filete);
}

@media (min-width: 641px) {

	.pulso-articulo .pulso-articulo__texto .pulso-cifras {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/*
 * WordPress da a los hijos de un grupo un ancho máximo y márgenes laterales
 * automáticos, que es lo que centra el contenido en el flujo normal. Dentro
 * de una rejilla eso sobra: cada celda ya tiene su sitio.
 */
.pulso-articulo .pulso-articulo__texto .pulso-cifras > *:not(.wp-block-group__inner-container),
.pulso-articulo .pulso-articulo__texto .pulso-cifras > .wp-block-group__inner-container > * {
	margin: 0;
	max-width: none;
	align-self: start;
	text-align: center;
}

/*
 * MARCADO ESPERADO: cada cifra en su propio contenedor, con el dato en un
 * encabezado y la descripción en el párrafo siguiente.
 *
 *   <div class="wp-block-group pulso-cifras">
 *     <div><h3>25+</h3><p>Retos impulsados</p></div>
 *     <div><h3>400+</h3><p>Expertos participantes</p></div>
 *   </div>
 *
 * Sueltos como hermanos del grupo, cada encabezado y cada párrafo ocuparían
 * una celda distinta de la retícula y el dato se separaría de su descripción.
 */
.pulso-articulo__texto .pulso-cifras h3,
.pulso-articulo__texto .pulso-cifras h4,
.pulso-articulo__texto .pulso-cifras strong {
	display: block;
	margin: 0 0 var(--pulso-esp-4);
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-titular-xl);
	font-weight: 600;
	line-height: 1;
	color: var(--pulso-color-primario);
}

/* Primer párrafo: qué es el número. En versales, como una etiqueta. */
.pulso-articulo__texto .pulso-cifras p {
	margin: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--pulso-color-apagado);
}

/*
 * Segundo párrafo en adelante: la descripción secundaria. En caja baja y sin
 * espaciado de versales, porque es una frase y no un rótulo: en versales, dos
 * líneas seguidas se leen mucho peor y además compiten con el título.
 *
 * Se distingue por posición y no por clase adicional para que el bloque se
 * pueda seguir montando a mano desde el editor, que es como funcionan los
 * demás componentes de este archivo.
 */
.pulso-articulo__texto .pulso-cifras p + p {
	margin-top: var(--pulso-esp-8);
	font-size: var(--pulso-texto-micro);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.35;
	color: var(--pulso-color-secundario);
}

/* --- 6. Cierre · core/group con clase pulso-cierre --------------------- */

.pulso-articulo__texto .pulso-cierre {
	margin-block: var(--pulso-esp-40);
	padding: var(--pulso-esp-32) var(--pulso-esp-24);
	background-color: var(--pulso-color-primario);
	color: var(--pulso-color-blanco);
}

.pulso-articulo__texto .pulso-cierre > * {
	margin: 0 0 var(--pulso-esp-16);
}

.pulso-articulo__texto .pulso-cierre > *:last-child {
	margin-bottom: 0;
}

/* El antetítulo se marca con un encabezado h4 dentro del grupo. */
.pulso-articulo__texto .pulso-cierre h4 {
	margin-top: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--pulso-color-claro);
}

.pulso-articulo__texto .pulso-cierre h2,
.pulso-articulo__texto .pulso-cierre h3,
.pulso-articulo__texto .pulso-cierre p {
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-titular-m);
	line-height: 1.3;
	color: var(--pulso-color-blanco);
}

.pulso-articulo__texto .pulso-cierre .wp-block-button__link {
	display: inline-block;
	padding: var(--pulso-esp-12) var(--pulso-esp-24);
	border: 0;
	border-radius: 0;
	background-color: var(--pulso-color-acento);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pulso-color-blanco);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pulso-articulo__texto .pulso-cierre .wp-block-button__link:hover,
.pulso-articulo__texto .pulso-cierre .wp-block-button__link:focus-visible {
	background-color: var(--pulso-color-blanco);
	color: var(--pulso-color-primario);
}

.pulso-articulo__texto .pulso-cierre--claro .wp-block-button__link:hover,
.pulso-articulo__texto .pulso-cierre--claro .wp-block-button__link:focus-visible {
	background-color: var(--pulso-color-primario);
	color: var(--pulso-color-blanco);
}

/*
 * El logotipo va al final del grupo, a tamaño de firma.
 *
 * Se acota por ALTURA y no por anchura. Los dos logotipos tienen proporciones
 * muy distintas —uno es un círculo y otro una marca apaisada—, y un límite de
 * anchura los deja descompensados: el círculo enorme y el apaisado diminuto.
 * La altura es lo que iguala el peso visual de una marca junto a un texto.
 *
 * El selector de hijo directo del margen es a propósito: la regla que iguala
 * los márgenes de todos los hijos del cierre tiene la misma especificidad, y
 * empatar aquí dejaría el margen a merced del orden del archivo.
 */
.pulso-articulo__texto .pulso-cierre > .pulso-cierre__logo {
	margin-top: var(--pulso-esp-24);
}

.pulso-articulo .pulso-articulo__texto .pulso-cierre .pulso-cierre__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 72px;
}

/* --- Variante clara para cita y cierre --- */

.pulso-articulo__texto .pulso-cierre--claro {
	background-color: var(--pulso-color-tinte);
	color: var(--pulso-color-primario);
}

.pulso-articulo__texto .pulso-cierre--claro h4 {
	color: var(--pulso-color-secundario);
}

.pulso-articulo__texto .pulso-cierre--claro h2,
.pulso-articulo__texto .pulso-cierre--claro h3,
.pulso-articulo__texto .pulso-cierre--claro p {
	color: var(--pulso-color-primario);
}