/* Ajustes que van DESPUES de las hojas del legado.
Estaban en voz.css, que Next inyecta ANTES de nuestros : por eso las
reglas del legado ganaban y estos arreglos nunca se aplicaban (la firma
seguia partiendose porque grid-column quedaba en auto). */
/* Ajustes sobre la hoja del legado: lo que su CSS no cubre porque en su sitio
lo resuelve el CMS (margenes entre parrafos, alto de la imagen principal y
la caja gris de la lateral). Va despues de sus hojas, por eso gana. */
.c-detail__body .paragraph { margin: 0 0 30px; }
/* El apano de .c-detail__author__title (flex con gap 10 y align baseline) ya
no hace falta: existia porque no dibujabamos la miniatura y el titulo caia
en la columna de 40 px de su grilla, partiendo la firma letra a letra. Ahora
emitimos su estructura completa —el envoltorio de la miniatura incluido— y
su hoja resuelve la maqueta sola. Manteniendolo, el gap de 10 px empujaba la
fecha 10 px a la derecha y bajaba la firma a 75 px de alto (el legado da 72).
La columna de la miniatura se sostiene aunque el autor no tenga foto. */
/* 50 px medidos en el legado (su avatar es image_square_xs a 50x50). Con 40
el texto de la firma arrancaba 10 px antes que en el original. */
.c-detail__author__thumb { width: 50px; }
/* Los intertitulos ya salen como h2.subtitle y los maqueta la hoja del legado. */
.c-detail__media__thumb { aspect-ratio: 3 / 2; overflow: hidden; }
.c-detail__media__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* La lateral usa ahora el marcado c-list__* del legado; su hoja la resuelve. */
.o-list--article .c-article__thumb { display: block; aspect-ratio: 260 / 172; overflow: hidden; }
.o-list--article .c-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
.u-grid-columns-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Bloque de temas al final del cuerpo ("En: Hispanos, Economía…"). */
/* Los tags usan el marcado c-detail__tags del legado; sin reglas propias. */
.c-detail__author.full { margin-bottom: 30px; }
/* Barra de compartir: en el legado empieza 10 px despues de la bajada y mide
41 de alto. La nuestra tenia 16 de margen y 14 de relleno (54 de alto), y
ese exceso corria 24 px todo lo que venia debajo: imagen, firma y cuerpo. */
/* La barra de compartir usa ya nav.c-detail__share + a.c-icon del legado. */
/* ---------------------------------------------------------------------------
Proporción fija de las fotos de tarjeta (hub de tema)
El legado sirve un recorte YA HECHO por cada tarjeta: 485x323 (3:2) en las
grandes y 140x140 (1:1) en las laterales. Como su CSS deja `img { height:
auto }`, el alto de cada foto sale de la proporción del archivo — y al
servir todas iguales, todas las tarjetas miden lo mismo.
Nosotros servimos el original, que viene en proporciones distintas (16:9 casi
siempre), así que con `height: auto` cada tarjeta quedaba de un alto
distinto: 217 px donde el legado da 258. Fijamos la caja y recortamos, que
es exactamente el resultado del legado.
--------------------------------------------------------------------------- */
.o-listing--secondary .c-article:not(.c-article--lateral) .c-article__thumb img {
aspect-ratio: 485 / 323;
}
.o-listing--secondary .c-article--lateral .c-article__thumb img {
aspect-ratio: 1 / 1;
}
/* El enlace que envuelve la foto es nuestro (el legado no enlaza la imagen).
Sin esto queda `display: inline` y no contiene la caja de la foto. */
.o-listing--secondary .c-article__thumb > .page-link {
display: block;
}
/* ---------------------------------------------------------------------------
Bloques del cuerpo dentro del envoltorio del editor (.payload-richtext)
El legado pone los bloques como hijos DIRECTOS de .c-detail__body y sus
margenes salen de reglas con ">"; los nuestros van dentro del envoltorio
que emite el editor, asi que esas reglas no los alcanzan. Medido sobre el
articulo 38407: h2.subtitle m:0/5, .c-detail__box m:0/30, y el texto del
despiece SIN el margen de 30 que le da .paragraph (el legado lo deja en 0).
--------------------------------------------------------------------------- */
/* !important porque la regla del legado sobre hijos directos del cuerpo
(`.c-detail__body > :not(:last-child):not(h2)...`) tiene nueve :not() y gana
a cualquier selector normal. Y su :last-child deja SIN margen al ultimo
bloque del cuerpo (salvo el despiece, que conserva sus 20): se replica sobre
el ultimo hijo del envoltorio. Sin esto, los articulos que terminan en
parrafo separaban los tags 60 px en vez de 30. */
.c-detail__body > .payload-richtext { margin-bottom: 0 !important; }
.payload-richtext > :last-child:not(.c-detail__despiece) { margin-bottom: 0 !important; }
.payload-richtext h2.subtitle { margin-bottom: 5px; }
.payload-richtext .c-detail__box { margin-bottom: 30px; }
.c-detail__despiece .paragraph { margin-bottom: 0; }
/* La relacionada lleva un recorte cuadrado (related_image, 140x140); nosotros
servimos la portada 3:2 y hay que recortarla para llenar la caja. */
.c-detail__sumario__thumb img { width: 140px; height: 140px; object-fit: cover; }
/* En el hub el leaderboard lleva 20 px de margen (inline en el legado), no 30. */
.free-html .voz-ad--banner { margin-bottom: 20px; }
/* Hamburguesa: el legado la hace con un