/* =========================================================================
articulo — La ficha de una nota y su botón de escuchar.
Tramo 4 de 8 de la hoja que antes era una sola (1 468 líneas). Los
tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
nada falle — se comprueba con `npm run huella`, no razonando.
========================================================================= */
/* --------------------------------------------------------------- artículo */
.ct-articulo { max-width: 40rem; margin: 0 auto; }
.ct-articulo__titulo {
font-family: var(--serif);
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.06;
letter-spacing: -0.015em;
margin: .4rem 0 1rem;
}
.ct-articulo__entrada {
font-size: 1.2rem;
line-height: 1.55;
color: var(--tinta-tenue);
margin: 0 0 1.1rem;
}
.ct-articulo__fecha {
font-size: .82rem;
color: var(--tinta-tenue);
margin: 0 0 1.75rem;
}
.ct-articulo__foto {
width: 100%;
/* `height: auto` es obligatorio ahora que el lleva width/height en el
HTML: sin él la foto se estiraría a los píxeles del atributo en vez de
escalar. Esos atributos son los que dejan al navegador reservar el hueco
antes de bajar la imagen — sin ellos, el texto de la nota saltaba hacia
abajo cuando la foto terminaba de cargar. */
height: auto;
border-radius: var(--radio);
display: block;
margin: 0 0 2rem;
}
.ct-articulo__parrafo {
font-family: var(--serif);
font-size: 1.14rem;
line-height: 1.75;
margin: 0 0 1.2rem;
/*
* Texto justificado, como en un diario impreso.
*
* `hyphens: auto` NO es opcional aquí. El español tiene palabras largas
* («desplazamiento», «negacionismo») y justificar sin partirlas abre huecos
* blancos entre palabras que el ojo enlaza en columnas verticales —los ríos
* de la tipografía—: se ve peor que no justificar. Con partición, el
* navegador corta por sílabas y las líneas quedan parejas.
*
* Funciona porque el declara `lang="es-MX"`: sin ese atributo el
* navegador no sabe qué diccionario usar y no parte nada. Si alguien cambia
* el idioma del documento, esto se degrada justo a la versión fea.
*/
text-align: justify;
hyphens: auto;
/* Una URL o un nombre largo sin espacios no se parte por sílabas y se saldría
de la columna. Esto lo corta por donde sea antes que desbordar. */
overflow-wrap: break-word;
}
/*
* En teléfono TAMBIÉN se justifica.
*
* Lo había desactivado por debajo de 560 px con un argumento razonable —a ese
* ancho caben cinco o seis palabras por línea y el sobrante se reparte entre
* pocos espacios— y estaba equivocado en un punto que importa: la decisión no
* era mía. Se pidió el texto justificado y en un teléfono es donde se lee.
*
* Lo que sí hay que hacer es que aguante ese ancho, y eso es cosa de la
* partición de sílabas:
*
* - `hyphens: auto` arriba parte las palabras largas, que en español son
* muchas. Sin ella, justificar a 35 caracteres por línea sí sería feo.
* - `hyphenate-limit-chars` evita los cortes ridículos: no parte palabras de
* menos de seis letras, ni deja menos de tres antes del guion ni menos de
* dos después. Sin esto se ven cortes como «a-quello».
* - El cuerpo baja un punto y la interlínea sube: más letras por renglón es
* exactamente lo que el justificado necesita para repartir sin abrir huecos.
*/
@media (max-width: 560px) {
.ct-articulo__parrafo,
.legal p,
.legal li {
font-size: 1.06rem;
line-height: 1.8;
hyphenate-limit-chars: 6 3 2;
}
}
.ct-articulo__fuente {
margin: 2.5rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--linea);
font-size: .9rem;
color: var(--tinta-tenue);
}
/* La nota la redacta una máquina a partir de material ajeno. Decirlo en la
página no es un trámite legal: es la diferencia entre citar y apropiarse. */
/* `.ct-articulo__aviso` es el nombre que usa el widget al repintar una ficha.
Se estila igual para que el aviso se vea idéntico venga del pre-render o del
widget: un aviso que cambia de forma según quién lo pintó se lee como un
error de la página, y este en concreto no puede parecer un error. */
.aviso-ia,
.ct-articulo__aviso {
margin-top: 1.25rem;
padding: .9rem 1.1rem;
background: #fafafa;
border-left: 3px solid var(--gris-claro);
border-radius: 0 var(--radio) var(--radio) 0;
font-size: .85rem;
color: var(--tinta-tenue);
}
/* --------------------------------------------------- episodio de la nota */
/* El