/* ========================================================================== PROSA — texto largo escrito desde el editor ========================================================================== La tipografía del cuerpo de una entrada, sacada de noticias.css para poder usarla también en las páginas legales, que son exactamente lo mismo: títulos, párrafos y listas escritos en el editor de WordPress. Se llama .gt-prose y no .gt-post__content porque ya no es «el contenido de la entrada»: es CUALQUIER texto largo del sitio. Duplicar estas reglas para las cuatro páginas legales habría garantizado que dentro de un mes solo una de las dos copias estuviera al día. Se estiliza POR DESCENDENCIA, sin clases dentro del HTML: quien escribe desde el escritorio no tiene que saber nada del tema para que le quede bien. Ver assets/css/noticias.css para lo que sigue siendo propio de la entrada —cabecera, fecha, índice lateral, navegación— y page.php para las páginas. ========================================================================== */ /* -------------------------------------------------------------------------- El contenido del editor -------------------------------------------------------------------------- Se estiliza POR DESCENDENCIA, sin clases dentro del HTML de la entrada: quien escribe desde el escritorio no tiene que saber nada del tema para que le quede bien, y una entrada antigua se ve igual que una nueva. -------------------------------------------------------------------------- */ .gt-prose { font-family: var(--font-primary); font-size: 1rem; line-height: 1.75; color: var(--color-text); } /* -------------------------------------------------------------------------- EL RITMO VERTICAL DEL ARTÍCULO -------------------------------------------------------------------------- EL AIRE QUE HAY ENCIMA DE UN ELEMENTO DICE DE QUÉ DEPENDE. Por eso los saltos van en escalera y cada peldaño se distingue del anterior sin tener que medir: párrafo → párrafo 22px mismo apartado, se sigue leyendo encima de un H4 28px encima de un H3 36px encima de un H2 46px empieza un apartado nuevo debajo de un título 10-14px el título va PEGADO a lo que abre La regla que lo ordena todo: DEBAJO DE UN TÍTULO HAY MUCHO MENOS AIRE QUE ENCIMA. Así se lee unido al bloque que abre y separado del que cierra, que es lo que marca dónde empieza cada apartado. Estaba al revés: encima de un H4 había 28px y entre dos párrafos 30, o sea que un apartado NUEVO quedaba más pegado que dos párrafos del MISMO apartado. Los 22px del párrafo son tres cuartos de línea. Un renglón entero en blanco —que es lo que salía con 1.75em— separa tanto que los párrafos dejan de leerse como un bloque seguido. Van en píxeles y no en em a propósito: el cuerpo solo crece de 16 a 17px entre móvil y escritorio, un 6%, y mantener dos escaleras por esa diferencia cuesta más de lo que aporta. -------------------------------------------------------------------------- UN MARGEN NO ES EL BLANCO QUE SE VE, y por eso la escalera de arriba engaña. Cada caja de texto añade MEDIA INTERLÍNEA por arriba y otra por abajo, así que el blanco real entre dos bloques es: margen + media interlínea del de arriba + media interlínea del de abajo Y esa parte no declarada es muy distinta según quién esté a cada lado: un párrafo va a 1.8 de interlínea y aporta 6,8px por lado; un título va a 1.25 y aporta 2,5. Resultado: los márgenes de los títulos rinden MENOS de lo que dicen, y los de los párrafos, más. Medido en escritorio con la escalera declarada 22 / 28 / 36 / 46: párrafo → párrafo 22px declarados → 35,6px de blanco encima de un H4 28px → 37,1px ¡+1,5! encima de un H3 36px → 45,3px encima de un H2 46px → 56,0px Un apartado nuevo con H4 abría con un píxel y medio más que un salto de párrafo: en la práctica, ninguna diferencia. La escalera existía en el código y no en la pantalla. El desajuste se notó al ensanchar la columna a 800px y abrir la interlínea a 1.8: el párrafo ganó aire y los títulos no, así que el texto pasó a verse más suelto que los cortes que debían mandar sobre él. SE CORRIGE SOLO EN ESCRITORIO —abajo, en el bloque de ≥768—, que es donde están la medida larga y la interlínea abierta. En móvil la escalera de arriba ya funciona. -------------------------------------------------------------------------- */ /* El margen que traen los navegadores se quita con :where(), que NO SUMA ESPECIFICIDAD. Es la única forma de que no se coma la regla de debajo: antes el reseteo iba en `.gt-prose p { margin: 0 }`, y un selector de tipo pesa MÁS que el `*` de `> * + *`. Ganaba el cero, y los párrafos salían sin ninguna separación, leyéndose como uno solo. No estaba en el HTML, que era impecable; estaba aquí. */ .gt-prose :where(p, h2, h3, h4, ul, ol, figure, blockquote, table, pre) { margin: 0; } .gt-prose > * + * { margin-top: 22px; } /* El tema padre fija `p { font-size: 18px; line-height: 1.6 }` con un selector de tipo. Poner el tamaño en .gt-prose NO basta: eso solo se hereda, y la herencia siempre pierde contra una declaración hecha sobre el propio elemento, por poco peso que tenga su selector. El resultado era un cuerpo de texto de 18px fijos —sin bajar en móvil— y con las líneas más apretadas de lo previsto. Con `inherit` el párrafo vuelve a tomar lo del contenedor, que sí es el que marca la escala y sí cambia con el tamaño de pantalla. */ .gt-prose p { font-size: inherit; line-height: inherit; text-wrap: pretty; } /* Los encabezados llevan MÁS aire por arriba que por abajo: así se leen pegados al bloque que abren y separados del que cierran, que es lo que indica dónde empieza un apartado. */ .gt-prose h2, .gt-prose h3, .gt-prose h4 { font-weight: 700; line-height: 1.25; color: var(--color-primary); text-wrap: pretty; } /* Debajo del título: cuanto mayor es, un poco más de aire necesita para no aplastar la primera línea. Aun así, los tres están MUY por debajo de lo que llevan encima. */ .gt-prose > h2 + * { margin-top: 14px; } .gt-prose > h3 + * { margin-top: 12px; } .gt-prose > h4 + * { margin-top: 10px; } /* Encima del título: la escalera. Cada peldaño es mayor que el anterior y todos lo son que los 22px de un salto de párrafo. Los peldaños CRECEN a medida que se sube —6, 8, 10—, no son saltos iguales: cuanto más arriba está el título, más tiene que notarse el corte. El H4 baja con los otros dos aunque no hiciera falta por sí mismo. Si se quedara en 32 con el H3 en 36, dos niveles distintos abrirían con cuatro píxeles de diferencia y se verían iguales: la escalera se aplasta por arriba en cuanto se recorta solo la parte alta. */ .gt-prose > * + h2 { margin-top: 46px; } .gt-prose > * + h3 { margin-top: 36px; } .gt-prose > * + h4 { margin-top: 28px; } /* La escalera de tamaños, del cuerpo hacia arriba y sin empates: móvil 16 · 17 · 18 · 22 escritorio 17 · 18 · 20 · 26 El H4 estaba a 1rem, o sea EXACTAMENTE el tamaño del cuerpo en móvil y por debajo de él en escritorio: solo la negrita lo distinguía de un párrafo. */ .gt-prose h2 { font-size: 1.375rem; } .gt-prose h3 { font-size: 1.125rem; } .gt-prose h4 { font-size: 1.0625rem; } .gt-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .gt-prose a:hover, .gt-prose a:focus-visible { color: var(--color-accent); color: color-mix(in srgb, var(--color-accent) 86%, #000); } .gt-prose ol { padding-left: 20px; } .gt-prose li + li { margin-top: 8px; } /* -------------------------------------------------------------------------- Listas dentro de listas -------------------------------------------------------------------------- Sin esto, el segundo nivel arranca en la misma vertical que el primero: lo único que lo separaba era el ancho de su propia viñeta, y un subapartado se leía como un punto más de la lista de arriba. La sangría es lo que dice que depende del punto anterior. El margen superior existe porque el segundo nivel cuelga del TEXTO de su punto padre, no de un hueco entre puntos: sin él queda pegado a la frase que lo introduce. -------------------------------------------------------------------------- */ .gt-prose li > ul, .gt-prose li > ol { margin-top: 10px; padding-left: 22px; } /* Viñeta roja: el único sitio del texto corrido donde entra el acento, y como marca, no como letra. Se dibuja con un pseudoelemento porque el marcador nativo de la lista no admite color propio en todos los navegadores. */ .gt-prose ul { padding-left: 0; list-style: none; } .gt-prose ul li { position: relative; padding-left: 22px; } .gt-prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 7px; height: 7px; background-color: var(--color-accent); border-radius: 2px; } .gt-prose figure, .gt-prose img { max-width: 100%; height: auto; } .gt-prose figure { margin: 32px 0; } .gt-prose img { display: block; border-radius: 10px; } .gt-prose figcaption { margin-top: 10px; font-size: 0.8125rem; line-height: 1.45; color: rgba(0, 0, 0, 0.55); text-wrap: pretty; } /* La cita no lleva comillas dibujadas ni cursiva: filo de acento y sangrado, que es el mismo recurso que marca el H1 del hero. */ /* -------------------------------------------------------------------------- LA CITA -------------------------------------------------------------------------- Era un filete rojo a la izquierda y el texto al mismo tamaño que el cuerpo: se distinguía de un párrafo solo por cuatro píxeles de color, y al recorrer el artículo con la vista pasaba desapercibida. Una cita en una noticia de empresa suele ser lo ÚNICO que dice alguien con nombre y apellidos, y es lo que se acaba entrecomillando en una nota de prensa: tiene que verse. Ahora es una PIEZA: fondo azul rebajadísimo, la barra de acento pegada al borde y la letra un peldaño por encima del cuerpo. Sigue el mismo lenguaje que los paneles de formulario y las tablas —filo suave y esquinas de 3px—, así que no introduce un recurso nuevo en la página. SIN COMILLAS DECORATIVAS. Es la tentación evidente y aquí sobra: estas citas ya traen las suyas escritas —«"Este hito refuerza…"»—, y una comilla gigante de adorno encima de otra comilla de verdad se lee como un error de maquetación. SIN CURSIVA, por lo mismo de siempre en este sitio: Poppins no trae itálica y el navegador la inventa inclinando las letras, que es lo que hace que un párrafo entero en cursiva se vea sucio. */ .gt-prose blockquote { margin: 32px 0; padding: 20px 22px; background-color: #f5f8fa; background-color: color-mix(in srgb, var(--color-primary) 4%, transparent); border-left: 3px solid var(--color-accent); border-radius: 0 3px 3px 0; font-size: 1.0625rem; line-height: 1.55; color: var(--color-primary); } .gt-prose blockquote p { margin: 0; } .gt-prose blockquote p + p { margin-top: 12px; } /* La atribución, cuando el editor la escribe como tal. Hoy ninguna cita la usa —el nombre va dentro del propio párrafo—, pero el bloque de WordPress la ofrece y quien la use debe encontrarla ya vestida: más pequeña, en gris y sin cursiva, para que se lea como la firma de la cita y no como parte de lo dicho. */ .gt-prose blockquote cite { display: block; margin-top: 12px; font-size: 0.875rem; font-style: normal; line-height: 1.5; color: #5a5a5a; } .gt-prose blockquote cite::before { content: "— "; } /* -------------------------------------------------------------------------- El salto al pulsar un enlace interno. -------------------------------------------------------------------------- scroll-margin-top deja aire por encima del apartado al que se salta: sin él el título aterriza pegado al borde superior de la ventana —o debajo de la cabecera del sitio— y parece que el enlace ha fallado. -------------------------------------------------------------------------- */ .gt-prose h2 { scroll-margin-top: 90px; } @media (min-width: 768px) { /* MÁS INTERLINEADO QUE EN MÓVIL, porque el renglón es mucho más largo: 800px de medida son unas 88 letras, y lo que evita perder la línea al saltar no es el tamaño de la letra sino el aire entre renglones. Es la contrapartida del ancho, no un capricho: si algún día se estrecha la columna, esto vuelve a 1.75 y la escalera de abajo, a la de móvil. */ .gt-prose { font-size: 1.0625rem; line-height: 1.8; } .gt-prose h2 { font-size: 1.625rem; } .gt-prose h3 { font-size: 1.25rem; } .gt-prose h4 { font-size: 1.125rem; } /* La cita se queda SIEMPRE un peldaño por encima del cuerpo. Estaba fija en 1.0625rem: un punto por encima en móvil y exactamente igual que el texto corrido en escritorio, donde dejaba de leerse como cita. */ .gt-prose blockquote { padding: 26px 28px; font-size: 1.125rem; } /* LA ESCALERA, RECALCULADA EN BLANCO REAL. Ver la explicación de arriba: los números de la izquierda son márgenes y los de la derecha, lo que se ve. párrafo → párrafo 22px → 35,6px (sin tocar) encima de un H4 36px → 45,1px encima de un H3 46px → 55,3px encima de un H2 58px → 68,1px Los peldaños vuelven a crecer al subir —+9,5 / +10,2 / +12,8— y ninguno se confunde ya con un salto de párrafo. */ /* Debajo del título NO se toca casi: ahí el problema es el contrario y ya estaba resuelto —24,1px de blanco frente a los 35,6 de un salto de párrafo, o sea que el título sigue leyéndose pegado a lo que abre—. El H2 sube dos píxeles solo porque su letra es la mayor y la primera línea le quedaba algo justa a esta medida. */ .gt-prose > h2 + * { margin-top: 16px; } /* EL ORDEN DE ESTAS DOS REGLAS IMPORTA, y no se ve. `> h2 + *` y `> * + h3` pesan lo mismo, así que cuando un H3 sigue a un H2 las dos compiten y gana la última escrita. Va después la de ENCIMA —igual que en la escalera base de más arriba— para que dos títulos seguidos se separen como títulos y no como el texto que cuelga de uno. Al escribirlas al revés, un H3 detrás de un H2 se pegaba a él con 16px y parecía un subtítulo suyo. */ .gt-prose > * + h2 { margin-top: 58px; } .gt-prose > * + h3 { margin-top: 46px; } .gt-prose > * + h4 { margin-top: 36px; } } /* ========================================================================== LA PÁGINA DE TEXTO LARGO: dos columnas e índice ========================================================================== Estaba en noticias.css con nombre de entrada —.gt-post__layout, __aside, __article—, pero no tiene nada de entrada: es la maqueta de cualquier texto largo con apartados, y la usan igual una noticia y un aviso legal. Se renombró a .gt-longform al traerla aquí. ========================================================================== */ /* El ancho de lectura, declarado UNA vez para las dos piezas que lo comparten: el texto y la imagen de entrada. Si se escribiera dos veces, el día que se cambie una la foto dejaría de medir lo que mide el texto y no habría manera de saber por qué. 800px POR PETICIÓN EXPRESA, y en píxeles y no en `ch` para que sea el número que se pidió y no uno que dependa de la fuente. Estaba en 72ch —723px—. LO QUE ESTO CUESTA, dicho aquí para que no se pierda: a 17px caben unas 88 letras por renglón, por encima de las 80 que marca la referencia de accesibilidad (WCAG 1.4.8) y de las 66 que se consideran óptimas. Cuanto más largo es el renglón, más fácil es que el ojo se pierda al saltar de línea. Se compensa abriendo el interlineado ahí abajo, que es lo que de verdad ayuda a encontrar el renglón siguiente en una medida larga. */ .gt-longform__main, .gt-longform__lead { max-width: 800px; } /* -------------------------------------------------------------------------- Reparto de la entrada: texto e índice -------------------------------------------------------------------------- La columna de lectura NO se ensancha para llenar el hueco. A 72ch ya caben unos 80 caracteres por línea —el `ch` mide el cero, que es más ancho que la letra media—, y ese es el techo recomendado: por encima, el ojo pierde el renglón al saltar de línea. Lo que se hace con el espacio sobrante es ocuparlo con algo útil, no estirar el texto. space-between empuja el índice contra el margen derecho, de modo que el sobrante se convierte en aire entre las dos columnas y no en un hueco colgando al final. -------------------------------------------------------------------------- */ /* minmax(0, 1fr) y no 1fr a secas, y min-width: 0 en la columna: SIN ESTO UNA TABLA ANCHA ESTIRA LA COLUMNA. Una casilla de rejilla mide por defecto al menos lo que su contenido, así que la tabla de cookies —620px de mínimo— ensanchaba la página entera en un teléfono. Y como el sitio recorta el desplazamiento lateral, el texto no se desplazaba: se quedaba cortado. Con esto, la casilla puede encoger y es la tabla la que se desliza dentro de su propia caja, que es lo que se pretendía. */ .gt-longform { display: grid; grid-template-columns: minmax(0, 1fr); /* Dos huecos distintos: entre columnas hace falta aire para que el índice no parezca un margen del texto; entre filas —foto, índice, artículo— basta con el salto normal entre bloques. */ column-gap: 32px; row-gap: 28px; } .gt-longform__main { min-width: 0; } /* Hasta escritorio el índice va arriba, que es donde sirve: en un teléfono interesa saber de qué va el texto ANTES de empezarlo. */ .gt-longform__aside { min-width: 0; } /* -------------------------------------------------------------------------- .gt-toc — índice del artículo -------------------------------------------------------------------------- Los anclajes se generan en PHP, no con JavaScript: así los enlaces funcionan desde el primer instante y un enlace directo a una sección lleva a su sitio aunque el script no llegue a cargarse nunca. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- SIN CAJA. Un raíl vertical con un punto por apartado. -------------------------------------------------------------------------- La versión anterior era un recuadro gris con filo rojo, y ese lenguaje ya está muy repetido en el sitio: filo de acento lo llevan el H1 del hero, las citas del texto y los beneficios de la certificación; y recuadro con fondo, las tarjetas de noticia, de servicio y de peligro. El raíl no es decoración: dice que los apartados van EN ORDEN y cuántos quedan, que es exactamente para lo que se mira un índice. Y al no tener fondo deja de parecer un accesorio pegado al margen y se lee como parte de la página. La línea se dibuja con el borde del
    y los puntos se montan encima con el fondo de la página, de modo que el raíl parece pasar POR DETRÁS de ellos sin necesidad de una segunda capa. -------------------------------------------------------------------------- */ .gt-toc__title { margin: 0 0 16px; font-family: var(--font-primary); font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; /* Azul y no rojo: el rótulo en versalitas rojas ya lo usan las fichas técnicas, la del certificado y la navegación entre entradas. */ color: var(--color-primary); } .gt-toc__list { margin: 0; padding: 0 0 0 20px; list-style: none; border-left: 2px solid rgba(0, 0, 0, 0.1); } .gt-toc__list li { position: relative; } .gt-toc__list li + li { margin-top: 16px; } /* El punto del raíl. Va con el fondo de la página y un anillo, no macizo: así la línea se ve interrumpida en cada parada, que es lo que hace que se lea como una secuencia y no como una lista con topos. */ .gt-toc__list li::before { content: ""; position: absolute; left: -26px; top: 0.45em; width: 9px; height: 9px; background-color: var(--color-bg); border: 2px solid rgba(0, 0, 0, 0.25); border-radius: 50%; transition: border-color 0.2s ease, background-color 0.2s ease; } /* Al apuntar un apartado, su punto se enciende en rojo. El acento marca, no escribe: el texto del enlace nunca se pinta de rojo sobre blanco. */ .gt-toc__list li:hover::before, .gt-toc__list li:focus-within::before { background-color: var(--color-accent); border-color: var(--color-accent); } .gt-toc__list a { font-family: var(--font-primary); font-size: 0.875rem; font-weight: 500; line-height: 1.45; color: var(--color-primary); text-decoration: none; text-wrap: pretty; transition: color 0.2s ease; } .gt-toc__list a:hover, .gt-toc__list a:focus-visible { color: var(--color-accent); color: color-mix(in srgb, var(--color-accent) 86%, #000); text-decoration: underline; text-underline-offset: 3px; } .gt-toc__list a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } /* Al quitar la caja, en móvil el índice y el artículo quedaban pegados sin nada que los separase. Un filo fino debajo hace de corte; en escritorio sobra, porque ya los separa el estar en columnas distintas. */ .gt-toc { padding-bottom: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media (min-width: 1024px) { /* Dos columnas: el texto en su ancho de lectura y el índice a la derecha. minmax(0, 72ch) y no 72ch a secas, para que una palabra larga o un bloque de código no puedan ensanchar la columna por encima del contenedor. */ /* EL ANCHO DE LECTURA NO SE TOCA: 72ch son unos 80 caracteres por línea, el techo por encima del cual el ojo pierde el principio del renglón siguiente. Lo que sí se corrige es el AGUJERO que quedaba al lado: con el índice a 280px y `space-between`, el sobrante del contenedor se metía todo entre las dos columnas —229px de blanco— y el índice parecía de otra página. Se arregla por los dos lados: el texto se lleva su ancho y el ÍNDICE SE COME LO QUE SOBRE, en vez de que el sobrante quede en medio o al final. LAS DOS COLUMNAS SE MIDEN DISTINTO, y es lo que hace que funcione: · el texto es `minmax(0, 800px)`: crece hasta su ancho y ahí se planta; · el índice es `minmax(260px, 1fr)`: parte de 260 y se queda con TODO lo que quede después. El orden en que la rejilla reparte el espacio hace el resto. Una columna con `fr` se sirve la última, así que el texto coge primero lo suyo y el índice recoge el resto: en una ventana ancha son 800 + 56 + 376 y no queda un solo píxel muerto; en una estrecha el que cede es el índice, no el texto, que es el orden correcto —quien lee necesita el renglón, no el sumario—. `justify-content: start` Y NO `space-between`: con space-between el hueco que sobra se mete ENTRE las dos columnas y abre un boquete en medio. Con `start` las dos arrancan pegadas al margen de siempre, que es la línea del titular del hero y la referencia de toda la página. */ .gt-longform--toc { grid-template-columns: minmax(0, 800px) minmax(260px, 1fr); justify-content: start; column-gap: 56px; row-gap: 32px; align-items: start; } .gt-longform--toc .gt-longform__aside { grid-column: 2; grid-row: 1; /* Acompaña la lectura en lugar de perderse arriba. 24px de separación con el borde superior para que no quede pegado a la ventana. */ position: sticky; top: 24px; } .gt-longform--toc .gt-longform__main { grid-column: 1; grid-row: 1; } /* CON IMAGEN DE ENTRADA HAY DOS FILAS, no una: la foto arriba y el texto debajo, las dos en la columna izquierda, y el índice al lado abarcando las dos. Sin esto el índice se quedaba a la altura del primer párrafo y dejaba a su izquierda un hueco blanco del tamaño de la foto: parecía descolgado. Los selectores exigen que la foto exista —`.gt-longform__lead ~`—, así que una entrada sin imagen destacada conserva el reparto de una sola fila. */ .gt-longform--toc .gt-longform__lead { grid-column: 1; grid-row: 1; } .gt-longform--toc .gt-longform__lead ~ .gt-longform__main { grid-row: 2; } /* El índice acompaña TODO el artículo, no solo el trozo que hay al lado de la foto: por eso abarca las dos filas. Es lo que le permite seguir pegado arriba mientras se baja. */ .gt-longform--toc .gt-longform__lead ~ .gt-longform__aside { grid-row: 1 / span 2; } .gt-toc { padding-bottom: 0; border-bottom: 0; } .gt-toc__list a { font-size: 0.9375rem; }} @media (prefers-reduced-motion: reduce) { .gt-toc__list li::before, .gt-toc__list a { transition: none; }} /* -------------------------------------------------------------------------- Tablas -------------------------------------------------------------------------- La primera del sitio dentro de un texto es la relación de cookies: cinco columnas que no caben en un ancho de lectura. Salía con el estilo por defecto del tema padre —rejilla de bordes en cada celda, letra negra, celdas apretadas— y partiendo palabras por la mitad. LA TABLA PUEDE SER MÁS ANCHA QUE EL TEXTO. Por debajo de 700px se desliza DENTRO de su propia caja en lugar de estrujar las columnas, y la página no se mueve en horizontal. Estrujarla es lo que convertía una fila en cinco renglones de dos palabras. Solo filetes horizontales, y no rejilla: lo que se recorre en una tabla es la fila, y las líneas verticales solo añaden ruido. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LAS FIGURAS: imágenes, tablas y cualquier bloque con marco -------------------------------------------------------------------------- Debajo de una imagen aparecían casi 108px de blanco hasta el título siguiente, cuando la escalera del artículo dice 58. Eran TRES cosas sumándose, y ninguna se ve leyendo el marcado: · el padre declara `figure { display: inline-block }`. Un inline-block se apoya en la línea base del texto, así que deja debajo el hueco de los rabillos de las letras: unos 10px de nada que nadie ha pedido. Y, por ser inline-block, SUS MÁRGENES NO SE FUNDEN con los del vecino, que es lo que hace que se sumen en vez de solaparse; · el padre le da a la figura `margin: 32px 0` propios, una segunda fuente de ritmo compitiendo con la de aquí; · y a la imagen de dentro, `margin-bottom: .5rem`. En bloque y sin márgenes propios, la separación vuelve a decidirla la escalera del artículo, que es donde está escrita. */ .gt-prose figure { display: block; margin-block: 0; } /* Y OJO CON LO DE ARRIBA: `.gt-prose figure` pesa (0,1,1) y la escalera `.gt-prose > * + *` pesa (0,1,0). El cero que le quita a la figura el margen del padre le quitaba también el de la escalera, y una foto detrás de un párrafo salía PEGADA a él —0px— mientras detrás de un título llevaba sus 23. Se detectó el 2026-09-12 midiendo las cuatro noticias con foto o vídeo. Se le devuelve el peldaño con el mismo peso y detrás; los ajustes de `h2 + figure` de más abajo pesan (0,1,2) y siguen mandando. */ .gt-prose > * + figure { margin-top: 22px; } .gt-prose figure img { margin-bottom: 0; } /* -------------------------------------------------------------------------- VÍDEOS INCRUSTADOS (el bloque «Insertar» de YouTube) -------------------------------------------------------------------------- WordPress escribe el