entre hermanos, así que vale tanto
para el marcado de Rank Math (span.separator ×2 + span.last) como
para el de reserva de seo.php (span.cb-breadcrumbs__sep ×2 +
span[aria-current]).
---------------------------------------------------------------------- */
.single-hero.cover .cb-breadcrumbs p > span:nth-last-of-type(-n+2),
.single-hero.cover .cb-breadcrumbs > span:nth-last-of-type(-n+2) {
display: none;
}
/*
* Y la chapa vuelve a ceñirse al texto. El apartado 11 ya la declara
* `inline-block`, pero algo con más peso la deja en bloque y a 768 px
* el resultado es una banda gris de 708 px de ancho cruzando la
* fotografía con «Portada » Componentes de PC» pegado a la izquierda:
* la chapa está para que se lean las migas, no para tapar la portada.
*
* Y el `display: inline-block` del apartado 11 no servía de nada: el
* envoltorio del titular es un contenedor flex, y un contenedor flex
* convierte a bloque el `display` de todos sus hijos. Lo que encoge la
* caja hasta su contenido es `width: fit-content`, que sí funciona
* siendo elemento flexible.
*/
.single-hero.cover .entry-wrapper .cb-breadcrumbs,
.single-hero.cover .entry-wrapper .cb-breadcrumbs > nav {
width: fit-content;
max-width: 100%;
}
/* Rank Math mete la ruta dentro de un , que trae el margen inferior
de los párrafos: 13 px de chapa vacía por debajo del texto. */
.single-hero.cover .cb-breadcrumbs nav > p {
margin: 0;
}
/* --- La escala de espaciado, un escalón más corta ----------------------
Los mismos saltos, proporcionalmente iguales entre sí, pero medidos
para una pantalla de 844 px de alto en lugar de un monitor. El aire
antes de un h2 pasa de 88 a 56 px, el de una figura de 64 a 44.
---------------------------------------------------------------------- */
.cb-article {
--cb-s5: 1.5rem;
--cb-s6: 2rem;
--cb-s7: 2.75rem;
--cb-s8: 3.5rem;
--cb-s9: 4.5rem;
}
}
@media (max-width: 767px) {
/* --- Interlineado -----------------------------------------------------
1,9 se pidió para la columna de escritorio, donde la línea tiene 88
caracteres y el ojo necesita ayuda para encontrar el renglón
siguiente. A 36 caracteres no la necesita: ese mismo 1,9 sólo
separa palabras que ya están juntas y estira la entrada. Con 1,72 el
párrafo se lee como un bloque y la entrada del MSI baja de 12.685 a
~11.400 px a 390 px.
---------------------------------------------------------------------- */
.cb-article .entry-content {
line-height: 1.72;
}
.cb-article .entry-content.entry-content p,
.cb-article .entry-content.entry-content li {
line-height: 1.72;
}
/* --- Tablas -----------------------------------------------------------
Las celdas heredaban los 17 px del cuerpo con 12 px de relleno: en
una columna de 300 px, «Compatibilidad» y «Intel LGA 1700 / 1200 /
115× / AMD AM5 / AM4» quedaban en dos columnas de 150 px y cuatro
renglones por fila. A 15 px y con el relleno ajustado, la misma
tabla cabe sin desplazamiento lateral.
---------------------------------------------------------------------- */
.cb-article .entry-content table th,
.cb-article .entry-content table td {
padding: .6rem .65rem;
font-size: .9375rem;
line-height: 1.45;
}
/* --- Citas ------------------------------------------------------------
`padding: var(--cb-s5) var(--cb-s6)` son 32 y 44 px: en una caja de
328 px se comían 88 px de ancho y dejaban 240 px de texto, o sea 22
caracteres por línea. Medido en la entrada de Majorana: la cita de
Krysta Svore salía en siete renglones de tres palabras. Aquí el
relleno lateral baja al vertical y el cuerpo de la cita deja de
competir con el titular.
---------------------------------------------------------------------- */
/* La clase repetida no es adorno: los estilos globales del bloque
—el