/* Page: Article Detail */

.detail-page {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.eyebrow {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--link);
    margin: 0 0 var(--space-s);
}

/* --- Breadcrumb --- */
/* <nav> con un <ol> dentro: la lista anuncia «2 elementos» y la posición de cada miga.
   El chevron va en el <li> del siguiente (aria-hidden) para que nunca quede colgando
   al final de una línea cuando las migas parten. */
.crumbs {
    margin: 0 0 var(--space-l);
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.crumbs a {
    color: var(--text-dim);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* El chevron es un trazo fino; se sube tamaño y contraste para que se lea bien
   (sobre blanco en Noticia y sobre el hero oscuro del Informe). */
.crumbs .sep {
    color: var(--text-dim);
    font-size: 1.25em;
    line-height: 1;
}

.crumbs .current {
    color: var(--text-body);
}

/* Sobre el hero de tinta, la escala clara (antes tres dorados sueltos en hex que no
   cambiaban con el tema). */
.crumbs--on-dark,
.crumbs--on-dark a,
.crumbs--on-dark .sep {
    color: var(--text-dim-on-ink);
}

.crumbs--on-dark a:hover {
    color: var(--accent-on-ink);
}

.crumbs--on-dark .current {
    color: var(--text-on-ink);
}

/* --- «Forma parte de»: enlace al contenido padre, entre las migas y el titular --- */
.part-of {
    margin: calc(-1 * var(--space-s)) 0 var(--space-m);
    font-family: var(--font-family-sans);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-dim);
}

.part-of__lbl {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-right: 4px;
}

.part-of a {
    font-weight: 600;
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: var(--link-underline);
    text-underline-offset: 3px;
}

.part-of a:hover {
    color: var(--link-hover);
}

.part-of--on-dark {
    color: var(--text-dim-on-ink);
}

.part-of--on-dark a {
    color: var(--accent-on-ink);
    text-decoration-color: currentColor;
}

.part-of--on-dark a:hover {
    color: var(--text-on-ink);
}

/* --- Reading column (Noticia) --- */
.noticia-col {
    max-width: var(--reading-column);
    margin: 0 auto;
    padding: 0 var(--space-m);
}

/* --- Article title / byline / metabar (shared) --- */
.arttitle {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-tight);
    letter-spacing: -0.5px;
    color: var(--text-strong);
    margin: 0 0 var(--space-m);
}

.arttitle--center {
    text-align: center;
    /* Noticia: 27px (móvil) → 40px (escritorio), como el diseño */
    font-size: clamp(1.6875rem, 1.4rem + 1.5vw, 2.5rem);
    line-height: 1.03;
}

/* Titular H2 y subtítulo (Noticia, columna centrada sobre fondo claro) */
.article-header__h2 {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--text-strong);
    text-align: center;
    margin: 0 0 var(--space-s);
}

.article-header__subtitle {
    font-family: var(--font-family-sans);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-body-soft);
    text-align: center;
    margin: 0 0 var(--space-s);
}

.article-lead {
    font-family: var(--font-family-sans);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--text-body-soft);
    line-height: 1.5;
    max-width: 52ch;
}

/* Entradilla del Informe con acceso: tras el recuadro de descarga, abre la columna de lectura.
   Se distingue del cuerpo por tono (text-strong frente a text-body), cuerpo algo mayor y el filete
   dorado que la cierra. Sin cursiva ni filete lateral: eso es el blockquote del cuerpo. */
.article-lead--informe {
    max-width: var(--reading-max-width);
    font-size: 1.25rem;
    color: var(--text-strong);
    margin: 0 0 var(--space-l);
    padding-bottom: var(--space-l);
    border-bottom: 1px solid var(--border-accent-soft);
}

.article-lead--center {
    text-align: center;
    margin: 16px auto 0;
}

.byline {
    display: flex;
    /* Firma + fecha + «Actualizado el…» no caben en una línea a 375px. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-s);
}

.byname {
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-strong);
}

.bydate {
    font-family: var(--font-family-sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.3px;
    color: var(--text-dim);
}

/* Lo que no debe partirse es cada fecha, no el grupo: con «· Actualizado el …» el
   nowrap en .bydate desbordaba la página a 375px. */
.bydate time {
    white-space: nowrap;
}

.metabar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-m);
    padding: 13px 0;
    margin: var(--space-m) 0;
    border-top: 1px solid var(--border-hair);
    border-bottom: 1px solid var(--border-hair);
}

/* Acciones del artículo (compartir + imprimir), alineadas a la derecha de la metabar.
   El botón redondo de icono (.print-action) comparte regla con el de compartir en
   components/interactive-article.css. */
.article-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* --- Hero image (Noticia) --- */
.article-hero {
    margin-bottom: var(--space-xl);
}

.article-hero img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.article-hero__caption {
    margin-top: var(--space-xs);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    color: var(--text-dim);
}

/* --- Imagen principal "en columna" (target foto_principal) ---
   Figura pequeña flotada a la izquierda, con el texto fluyendo a su derecha.
   Medida real de la columna: 757px (1ch = 10,98px a 18px) => 69 caracteres/línea.
   Con 240px de figura + 28px de calle quedan ~489px ≈ 44 cpl, y solo durante las
   ~5 líneas que ocupa la figura (16:10 => 150px de alto); después el texto recupera
   los 69 cpl. Con la pauta del site principal (300px + 30px) caería a 39 cpl, por
   debajo del mínimo recomendado de 45, por eso aquí es más estrecha.
   Ajustar la medida = cambiar 'width' (y la calle) en un único sitio. */
.article-figure {
    margin: 0 0 var(--space-m);
}

.article-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Solo se flota cuando la columna está a su ancho máximo; por debajo se apila
   a todo el ancho (evita dejar el texto en una medida impracticable en móvil). */
@media (min-width: 900px) {
    .article-figure {
        float: left;
        width: 240px;
        margin: 6px 28px var(--space-s) 0;
    }
}

/* Ficha de lanzamiento: el producto encajado sobre blanco (también en modo
   oscuro, la foto ya viene sobre blanco), con el filete dorado de lineal que
   lleva en portada. Sin sombra: es un bodegón, no una foto. Apilada en móvil
   no pasa de 320px, que un cuadrado a todo el ancho se come la pantalla. */
.article-figure--producto img {
    padding: 8%;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--surface-packshot);
    border-bottom: 3px solid var(--accent-soft);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: none;
}

@media (max-width: 899px) {
    .article-figure--producto {
        max-width: 320px;
        margin-inline: auto;
    }
}

/* --- Informe hero (dark split header) --- */
/* El bloque oscuro se acota al ancho del contenedor y se centra (como en el diseño):
   fuera de él aparece el fondo normal de la página, no negro. Así no crece sin límite
   ni deja franja negra a los lados en pantallas anchas. */
.informe-hero {
    margin-bottom: var(--space-xl);
}

.informe-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    max-width: var(--container-max-width);
    margin: 0 auto;
    background: var(--surface-ink);
    color: var(--text-on-ink);
    overflow: hidden;
}

.informe-hero__text {
    padding: 40px 42px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Migas del hero: mismo tono dorado apagado y separación que el diseño.
   El hero es tinta, así que necesitan la escala clara: con los tokens de
   superficie clara se quedaban en 3,0:1 (y 2,3:1 en hover). */
/* El margen conserva el hueco del antiguo antetítulo de sector (18px + línea de
   texto base + 16px), para que el titular no suba al quitarlo. */
.informe-hero .crumbs {
    margin-bottom: calc(34px + var(--font-size-base) * var(--line-height-base));
}

.informe-hero .crumbs a {
    color: var(--text-dim-on-ink);
}

.informe-hero .crumbs a:hover {
    color: var(--accent-on-ink);
}

/* El título es oscuro por defecto (uso en Noticia sobre fondo claro); sobre el hero oscuro
   va en claro y con el tamaño del diseño (47px / 1.0). Los tres textos del hero usan la
   escala on-ink: los hex cálidos del mockup no seguían al modo oscuro ni a impresión. */
.informe-hero .arttitle {
    color: var(--text-on-ink);
    font-size: 2.9375rem;
    line-height: 1.0;
}

/* Subtítulo: línea editorial/creativa → serif en itálica, tono cálido claro. */
.informe-hero__subtitle {
    font-family: var(--font-family-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--text-on-ink);
    margin: 12px 0 0;
}

/* Descripción: qué contiene/analiza el informe → sans, tono apagado. */
.informe-hero__h2desc {
    font-family: var(--font-family-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-dim-on-ink);
    max-width: 46ch;
    margin: 14px 0 0;
}

.informe-hero__image {
    position: relative;
    min-height: 340px;
}

.informe-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .informe-hero__inner {
        grid-template-columns: 1fr;
    }

    .informe-hero__text {
        padding: 22px 18px;
    }

    .informe-hero .arttitle {
        font-size: 1.875rem;
        line-height: 1.02;
    }

    .informe-hero__image {
        min-height: 220px;
    }
}

/* --- Body content --- */
/* Cuerpo del artículo: se prioriza la legibilidad y la accesibilidad sobre la fidelidad
   literal al mockup (15,5px). Manrope 1.125rem (18px) por encima del suelo de 16px y en
   rem para respetar la preferencia de tamaño del navegador (WCAG 1.4.4). Interlineado 1.7
   (>1.5, WCAG 1.4.8 AAA) y medida acotada a ~70ch (línea óptima 45-75 caracteres),
   sobre todo en la columna ancha del Informe. Color --text-body sobre papel ≈ 11,9:1 (AAA). */
/* Los valores viven en los tokens --reading-* (variables.css), que documentan el porqué. */
.abody {
    font-family: var(--font-family-sans);
    font-size: var(--reading-font-size);
    line-height: var(--reading-line-height);
    color: var(--text-body);
    max-width: var(--reading-max-width);
    counter-reset: ah2;
    display: flow-root; /* contiene la figura flotada de .article-figure */
}

/* En móvil la medida baja a ~35 caracteres y una palabra larga («distribución»,
   «sostenibilidad») deja la línea anterior medio vacía; partir con guion lo evita.
   Necesita el lang del <html>, que head.php ya pone. */
@media (max-width: 599px) {
    .abody {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* Informe sin acceso: teaser + gate comparten una columna de lectura centrada, del mismo
   ancho que el cuerpo (~70ch). Evita que el gate ocupe todo el ancho del contenedor
   mientras el texto queda estrecho a la izquierda con hueco a la derecha.
   Mismo font-size que el .abody para que su 'ch' coincida (18px) y ambos midan igual. */
.article-locked {
    max-width: var(--reading-max-width);
    margin: 0 auto;
    font-size: var(--reading-font-size);
}

.abody p {
    margin: 0 0 20px;
}

.abody strong {
    color: var(--text-strong);
    font-weight: 700;
}

/* Bloque normal, no flex: el CMS mete marcado en línea dentro del <h3> (<strong>, <a>,
   <em>) y con flex cada trozo se volvía un elemento suelto separado por el gap. */
.abody h3 {
    counter-increment: ah2;
    /* Compensa la cabecera sticky al saltar desde el índice a #navN, para que el
       título no quede oculto tras ella. */
    scroll-margin-top: var(--header-offset);
    margin: 36px 0 16px;
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: 1.5625rem;
    line-height: 1.1;
    color: var(--text-strong);
}

.abody h3::before {
    content: counter(ah2, decimal-leading-zero);
    display: inline-block;
    margin-right: 12px;
    font-family: var(--font-family-sans);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--action);
}

.abody .iframe_table_wrapper {
    /* Mismo offset que los <h3> para los anclas de gráficos/tablas (#nav_g_N). */
    scroll-margin-top: var(--header-offset);
}

/* Tablas anchas: se desplazan dentro de su caja en vez de ensanchar la página. Las del
   CMS ya llegan envueltas en .iframe_table_wrapper; una tabla suelta la envuelve
   initTablasCuerpo() en .abody__tabla. El JS además las hace enfocables (tabindex,
   role=region) cuando de verdad desbordan, para poder desplazarlas con teclado. */
.abody .iframe_table_wrapper:has(> table),
.abody .abody__tabla {
    overflow-x: auto;
}

/* El margen de la tabla pasa a la caja que se desplaza, para que la barra de scroll
   quede pegada a la tabla y no 20px más abajo. */
.abody .abody__tabla,
.abody .iframe_table_wrapper:has(> table) {
    margin: 6px 0 20px;
}

.abody .abody__tabla > table,
.abody .iframe_table_wrapper > table {
    margin: 0;
}

/* Al recibir foco, anillo por dentro: la caja corta el exterior con su overflow. */
.abody .abody__tabla:focus-visible,
.abody .iframe_table_wrapper:focus-visible {
    outline-offset: -3px;
}

/* Vídeos: base.css pone iframe{height:auto}, que gana al atributo height="281" del CMS
   y los dejaba en el alto por defecto de un iframe (150px). Solo Vimeo y YouTube: los
   iframes de Alimarket Viz reciben su alto por postMessage (embed.js) y una proporción
   fija se lo pisaría. */
.abody iframe[src*="player.vimeo.com"],
.abody iframe[src*="youtube"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Bloques de cuerpo tipo iframe (Alimarket Viz, Datawrapper…): sin margen propio el
   <p> siguiente (margin-top 0) queda pegado. Mismo aire superior que las figuras; el
   margen atraviesa el .iframe_table_wrapper (sin padding ni borde) y colapsa con el
   inferior del <p> anterior. */
.abody iframe {
    margin: 24px 0;
}

.abody blockquote {
    border-left: 3px solid var(--accent-soft);
    padding: 2px 0 2px 22px;
    margin: 28px 0;
    font-family: var(--font-family-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5625rem;
    line-height: 1.32;
    color: var(--text-strong);
}

.abody figure.image-article {
    margin: 24px 0 8px;
}

/* Techo de altura del media incrustado en el texto (media1, media2…).
   De estas imágenes el CMS normaliza SOLO el ancho —794 px, 1588 el @2x, sin recorte
   (gen_width en sh/mediaIM-mp.sh)—, así que el alto lo heredan de la proporción del
   original y no tiene límite: un vertical de móvil ocupa dos pantallas de columna. Se
   acota a 78vh y se centra, que es lo que hace cualquier maqueta con una foto que no cabe.
   Segunda declaración en svh: en móvil el vh es el alto con la barra del navegador
   recogida y la foto se pasaba de la pantalla; quien no entienda svh se queda con vh.
   El width:auto es lo que permite al navegador reescalar contra el max-height conservando
   la proporción; con el ancho por defecto solo actuaría el max-width:100% de base.css.
   El display:block del <picture> es defensivo: <picture> es inline por defecto y el <img>
   de dentro es block, así que su caja cuelga de una anónima. Medido en Chromium centra
   igual sin él, pero evita depender de cómo resuelva cada motor esa anidación. */
.abody figure.image-article picture {
    display: block;
}

.abody figure.image-article img {
    max-height: 78vh;
    max-height: 78svh;
    width: auto;
    margin-inline: auto;
}

.abody figure.image-article figcaption {
    margin-top: 8px;
    font-family: var(--font-family-sans);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-dim);
}

/* El CMS pone el título del media en un <h4> dentro del pie: heredaba la serif de
   titular (1.35rem) y pesaba más que el propio pie. Aquí es un rótulo del pie. */
.abody figcaption h4 {
    font: 600 1rem/1.3 var(--font-family-sans);
    margin: 0 0 0.25rem;
}

.abody table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 20px;
}

.abody table th {
    background: var(--action-strong);
    color: var(--action-strong-ink);
    text-align: left;
    padding: 11px 14px;
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.abody table th.r,
.abody table td.r {
    text-align: right;
}

.abody table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-hair-soft);
    font-family: var(--font-family-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-body);
}

.abody table tr:nth-child(even) td {
    background: var(--surface-card);
}

/* --- TOC sidebar (Informe) --- */
/* minmax(0, 1fr) y no 1fr: el mínimo de 1fr es el min-content de la columna, así que
   una tabla ancha del cuerpo ensanchaba la rejilla entera y desbordaba la página en
   vez de desplazarse dentro de su caja. */
.toc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

/* Pegado por debajo de la cabecera sticky (con top:20px quedaba tapado por ella) y
   con alto máximo y scroll propio: un índice largo no cabía en la pantalla y su final
   era inalcanzable mientras estaba pegado. */
.toc {
    position: sticky;
    top: calc(var(--header-offset) + var(--space-s));
    max-height: calc(100vh - var(--header-offset) - var(--space-l));
    max-height: calc(100dvh - var(--header-offset) - var(--space-l));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
}

/* Va detrás de .toc para ganarle: antes estaba delante y el sticky seguía activo en móvil. */
@media (max-width: 900px) {
    .toc-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.toc-h {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border-accent-soft);
}

.toc-h .lbl {
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--link);
}

.toc-list {
    padding: 8px 0;
}

.toc-row {
    display: flex;
    align-items: baseline;
    gap: 11px;
    padding: 9px 18px;
    font-family: var(--font-family-sans);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--text-body-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.toc-row:hover {
    background: var(--surface-accent);
    color: var(--text-strong);
}

/* El índice recorta por su overflow: el anillo exterior de base.css no se vería. */
.toc-row:focus-visible {
    outline-offset: -3px;
}

.toc-row .n {
    flex: none;
    width: 14px;
    font-family: var(--font-family-sans);
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--link);
}

/* Segundo grupo del índice: los contenidos hijo (enlazan a otras páginas, no a anclas). */
.toc-h--sub {
    border-top: 1px solid var(--border-hair);
}

/* Índice sin acceso: gancho encima del gate. Solo enumera (no hay anclas a las que ir), así que
   ni pegado ni hover, y es una <ol> con <h2> que hay que desvestir. */
.toc--locked {
    position: static;
    max-height: none;
    overflow-y: visible;
    margin-bottom: var(--space-l);
}

.toc--locked .toc-h .lbl {
    margin: 0;
    line-height: inherit;
}

.toc--locked .toc-list {
    list-style: none;
    margin: 0;
}

.toc--locked .toc-row:hover {
    background: none;
    color: var(--text-body-soft);
}

.toc-row.active {
    background: var(--surface-accent);
    color: var(--text-strong);
    border-left-color: var(--action);
}

/* --- Download box --- */
.dlbox {
    margin: var(--space-l) 0;
    padding: 20px;
    background: linear-gradient(180deg, var(--surface-card), var(--surface-accent));
    border: 1px solid var(--border-accent-soft);
    border-radius: var(--radius-md);
}

.dlbox--split {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
}

.dlbox .dh {
    margin: 0 0 4px;
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-strong);
}

.dlbox .ds {
    margin: 0 0 15px;
    font-family: var(--font-family-sans);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-body-soft);
}

.dlbox--split .ds {
    margin-bottom: 0;
}

.dlbox__actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 180px;
}

.dlbox__actions .btn {
    text-align: center;
}

@media (max-width: 700px) {
    .dlbox--split {
        grid-template-columns: 1fr;
    }
}

/* --- Related content --- */
.related-block {
    margin-top: var(--space-2xl);
    padding-top: var(--space-l);
}

.related-block__head {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    margin-bottom: var(--space-m);
}

/* Cabecera compartida por relacionados e hijos (.children-block reutiliza este bloque):
   una sola regla para el rótulo. Es un <h2>, así que se anula el margen de h2 de base. */
.related-block__head .eyebrow {
    margin: 0;
    white-space: nowrap;
}

.related-block__head .rule {
    flex: 1;
    height: 1px;
    background: var(--border-hair);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
}

@media (max-width: 700px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* Tarjeta de relacionado "desnuda" como en el diseño: imagen + tags + título, sin borde/fondo/sombra. */
article.rel {
    display: flex;
    flex-direction: column;
}

/* El enlace es la tarjeta entera y tiene caja propia: con display:contents (como estaba)
   el anillo de foco no se dibujaba. Mismo apilado que el article. */
.rel__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
}

.rel__media {
    aspect-ratio: 16 / 10;
    background-color: var(--surface-offset);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.rel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.18s ease;
}

article.rel:hover .rel__media img {
    opacity: 0.9;
}

.rel__body {
    padding: 16px 18px;
}

/* <h3> (bajo el <h2> del bloque): se anulan el margen y el tamaño de h3 de base. */
.rel__title {
    margin: 0;
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.08;
    color: var(--text-strong);
    transition: color 0.18s ease;
}

article.rel:hover .rel__title {
    color: var(--link-hover);
}

/* Línea bajo el titular según el tipo: entrevistado en las entrevistas, subtítulo en los
   informes. Recortada para que una pastilla larga no descuadre la rejilla. */
.rel__byline,
.rel__sub {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rel__byline {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.rel__autor {
    font-weight: 600;
    color: var(--text-body);
}

.rel__sub {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* --- Contenidos hijo («Este informe incluye» / «Este contenido incluye») ---
   Lista y no rejilla: hay padres con 1 hijo y con 28, y la noticia va en columna de lectura.
   Toda la tarjeta es clicable con un único enlace (el del titular, estirado con ::after). */
.children-block {
    clear: both; /* la figura flotada de la noticia no debe colarse en la lista */
    margin-top: var(--space-2xl);
}

.children-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.children-list > li + li {
    border-top: 1px solid var(--border-hair-soft);
}

.child {
    position: relative;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-m);
    align-items: start;
    padding: var(--space-m) 0;
}

.child__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--surface-offset);
}

.child__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.18s ease;
}

.child:hover .child__media img {
    opacity: 0.9;
}

.child__title {
    margin: 0;
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.15;
}

.child__link {
    color: var(--text-strong);
    text-decoration: none;
    transition: color 0.18s ease;
}

.child__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.child:hover .child__link {
    color: var(--link-hover);
}

.child__sub {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-family-sans);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-body-soft);
    /* Hay subtítulos de un párrafo entero: se cortan para que la lista se pueda escanear. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

@media (max-width: 560px) {
    .child {
        grid-template-columns: 112px 1fr;
        gap: var(--space-s);
    }

    .child__title {
        font-size: 1.0625rem;
    }
}

/* --- Modo oscuro: fotos editoriales un punto más apagadas ---
   Mismo criterio que las fotos de portada (variables.css): contra la página oscura una
   foto a pleno brillo deslumbra y tira la vista fuera del texto. El packshot de
   lanzamiento (.article-figure--producto) se queda fuera: va sobre blanco a propósito y
   atenuarlo lo dejaría gris contra su propia caja. print.css anula el filtro. */
@media (prefers-color-scheme: dark) {
    .article-hero img,
    .article-figure:not(.article-figure--producto) img,
    .informe-hero__image img,
    .abody figure:not(.article-figure--producto) img,
    .rel__media img,
    .child__media img {
        filter: brightness(0.92);
    }
}