/* ============================================================
   Portada Marca Privada — maquetación editorial "2a/2m"
   Sistema dorado: el oro es el color núcleo (acento, acción, estado),
   y los neutros cálidos llevan el peso. Los titulares NO van en dorado
   —solo se doran en hover— o la portada entera se vuelve oro.
   Usar siempre tokens semánticos, nunca las escalas primitivas directamente.
   ============================================================ */

.mp-cover__inner {
    padding-top: var(--space-l);
    padding-bottom: var(--space-2xl);
}

/* Separación entre módulos. Desde que el orden lo decide la configuración de
   portada (tipos MP_*), ningún módulo puede dar por hecho su posición: la
   separación la pone el contenedor sobre el hermano anterior, así el primero
   —sea cual sea— no arrastra margen y todos los demás van al mismo aire.
   Antes cada módulo llevaba su propio margin-top y los dos que nacieron en las
   posiciones 0 y 1 (.mp-hero y .mp-reports) no lo tenían, de modo que el hero
   secundario, que va SIEMPRE en medio, se pegaba al módulo de arriba. */
.mp-cover__inner > section + section {
    margin-top: var(--space-xl);
}

.mp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
    margin-bottom: var(--space-m);
}

.mp-modtitle {
    font-family: var(--font-family-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-strong);
    margin: 0;
}

.mp-kicker {
    font-family: var(--font-family-serif);
    font-style: italic;
    font-size: var(--font-size-base);
    color: var(--text-dim);
}

/* Rótulo de módulo y del separador de hijos del hero. Comparte los valores de
   .mp-modtitle: los dos rotulan un módulo y deben leerse igual.
   Como rótulo de módulo va en <h2> (con aria-labelledby en su sección): en
   <span>, los <h3> de las tarjetas colgaban del <h2> del módulo anterior en la
   navegación por titulares. El margen y el interlineado se fijan aquí porque
   el h2 de base.css trae los suyos (space-s y 1,1) y el rótulo tiene que verse
   igual sea <span> o <h2>. */
.mp-eyebrow {
    display: inline-block;
    font-family: var(--font-family-sans);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: var(--line-height-base);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-strong);
    margin: 0;
}

.mp-eyebrow--gold {
    color: var(--link);
}

/* Rótulos de contenidos hijo ("En este informe", "En esta radiografía"). No
   rotulan un módulo sino una parte de él, y a 0,8rem fijos en versalitas con
   2px de tracking pesaban en móvil casi tanto como los titulares de los hijos
   (base, que sí baja). Fluidos: ~10,8px a 390 y los 0,8rem de siempre desde
   ~1.000px. Los títulos de módulo se quedan como están. */
.mp-hero__childhead .mp-eyebrow,
.mp-radiografia__hijos-rotulo {
    /* Suelo de 0,75rem como el resto de etiquetas: por debajo no se lee. */
    font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8rem);
    letter-spacing: clamp(1.2px, 0.2vw, 2px);
}

/* El mismo eyebrow se usa dentro de la autopromo, que es tinta: ahí el dorado
   de enlace se queda en 3,5:1 y necesita la escala clara. */
.mp-subscribe-promo .mp-eyebrow--gold {
    color: var(--accent-on-ink);
}

.mp-rule-flex {
    height: 1px;
    background: var(--border-hair);
    flex: 1;
    min-width: 20px;
}

/* Cabecera de módulo: rótulo + filete + «ver todo». Una sola regla para todas
   porque nacieron copiadas módulo a módulo y ya habían empezado a divergir;
   las diferencias que sí son de diseño van debajo, por módulo. */
.mp-sectorized__head,
.mp-feed__head,
.mp-radiografias__head,
.mp-interviews__head,
.mp-tribunas__head,
.mp-daymon-mod__head,
.mp-carrusel__head {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
}

.mp-arrowlink {
    display: inline-block;
    /* Sin relleno, el área de toque era la del texto (~18px de alto). Con
       .375rem arriba y abajo llega a ~30px sin mover el rótulo de la cabecera,
       que mide 36 por las flechas del carrusel. */
    padding-block: 0.375rem;
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--link);
    text-decoration: none;
}

/* Placeholder de imagen (activos aún no catalogados: mapa, innovación, Daymon...) */
.mp-ph {
    background: repeating-linear-gradient(45deg, var(--border-hair) 0 11px, var(--border-hair-soft) 11px 22px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-dim);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.5px;
    padding: var(--space-xs);
    box-sizing: border-box;
}

/* Rayado de tinta: el fondo y un velo encima, para que las dos franjas sigan
   distinguiéndose también en modo oscuro, donde la tinta se aclara. */
.mp-ph--dark {
    background:
        repeating-linear-gradient(45deg, var(--border-on-ink) 0 11px, transparent 11px 22px),
        var(--surface-ink);
    color: var(--text-dim-on-ink);
}

/* Tarjetas de informe/artículo reutilizadas en varias secciones (hover en card.css vía .mp-report) */
.mp-report {
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mp-report__media {
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

.mp-report__body {
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mp-report__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-xs);
}

/* Titulares clicables: son titulares, no enlaces. Llevan el color del texto y
   solo se doran al pasar por encima — mismo patrón que .card__title en card.css.
   Sin esto heredan el dorado global de `a` y la portada entera se vuelve oro. */
.mp-report__title a,
.lrow__title a,
.mp-daymon__title a {
    color: var(--text-strong);
    text-decoration: none;
}

.mp-report__title a:hover,
.lrow__title a:hover,
.mp-daymon__title a:hover {
    color: var(--link-hover);
}

.mp-report__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 var(--space-xs);
}

.mp-report__desc {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0 0 var(--space-s);
}

.mp-report__foot {
    margin-top: auto;
}

/* --- 00. ACTUALIDAD (por encima del hero) ------------------------------------
   Aviso temporal de una noticia de mucha actualidad. Va ANTES del hero y tiene
   que pesar menos que él: una sola banda de ~56px en desktop, sin foto grande,
   y la llamada de atención la hacen el contraste (tinta o dorado sobre papel) y
   el rótulo, no el tamaño. Nada de rojo: el rojo del sistema es solo de error.

   El hero va pegado debajo (space-s en vez del space-xl entre módulos): son el
   mismo golpe de vista y separarlos 48px empujaría la foto fuera de pantalla.

   Producción solo usa --nota. Las variantes evaluadas y descartadas (--cinta,
   --titular, --hijos, con el «Leer» y la banda entera clicable) se quitaron de
   aquí: solo las pintaba la guía de estilos y cargaban CSS en cada portada. */

.mp-cover__inner > .mp-actualidad + section {
    margin-top: var(--space-s);
}

.mp-actualidad {
    display: grid;
    align-items: center;
    column-gap: var(--space-m);
}

.mp-actualidad__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* En móvil el rótulo con la fecha no cabe en una línea a 320px y, sin corte,
   desbordaba la banda y abría scroll horizontal en toda la página. */
@media (max-width: 767px) {
    .mp-actualidad__kicker {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* Punto de «en vivo». Late despacio y solo tres veces: una señal al cargar,
   no un parpadeo que compita con la lectura del hero. */
.mp-actualidad__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: mpActualidadPulse 1.8s var(--ease-out-expo, ease-out) 3;
}

@keyframes mpActualidadPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    100% { box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-actualidad__dot { animation: none; }
}

.mp-actualidad__date {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: .8;
}

.mp-actualidad__title {
    margin: 0;
    /* el h2 de base.css fuerza tinta: aquí manda la superficie de la variante */
    color: inherit;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.2;
}

/* El recorte a una línea va en el <a>, no en el titular: el overflow:hidden de un
   elemento no recorta su propio outline, pero sí el de sus hijos, y con el clamp en
   el <h2> el anillo de foco del enlace salía cortado por los cuatro lados. */
.mp-actualidad__title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* --nota: el acento claro del sistema, con filete dorado a la izquierda y
   miniatura 16:10; el subtítulo da el contexto.
   La miniatura es 16:10 y no 16:9 para casar con _mp_feed (400x250), que el
   CMS genera para noticias e informes: no hace falta un recorte propio.

   Sin «Leer la noticia»: enlazan la miniatura y el titular, como en el hero
   --fullhead; el subtítulo y el rótulo no son enlace. Foto y titular
   reaccionan juntos al hover. */
.mp-actualidad--nota {
    grid-template-columns: 128px minmax(0, 1fr);
    padding: 10px var(--space-m) 10px 10px;
    background: var(--surface-accent);
    border: 1px solid var(--border-accent-soft);
    border-left: 4px solid var(--border-accent);
    border-radius: var(--radius-md);
    color: var(--text-strong);
}

.mp-actualidad--nota .mp-actualidad__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-offset);
}

.mp-actualidad--nota .mp-actualidad__media {
    display: block;
}

.mp-actualidad--nota .mp-actualidad__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Miniatura y titular enlazan por separado: cada uno lleva su anillo, no un
   contorno de la banda entera. */
.mp-actualidad--nota .mp-actualidad__title a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Los zooms de hover van bajo (hover: hover): en táctil el :hover se queda
   pegado tras el toque y la foto seguía ampliada al volver atrás. */
@media (hover: hover) {
    .mp-actualidad--nota .mp-actualidad__media:hover img,
    .mp-actualidad--nota:has(.mp-actualidad__title a:hover) .mp-actualidad__media img {
        transform: scale(1.04);
    }
}

.mp-actualidad--nota .mp-actualidad__kicker {
    color: var(--link);
}

.mp-actualidad--nota .mp-actualidad__kicker {
    margin-bottom: 2px;
}

.mp-actualidad--nota .mp-actualidad__sub {
    margin: 2px 0 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    color: var(--text-body-soft);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-actualidad--nota .mp-actualidad__title a:hover,
.mp-actualidad--nota:has(.mp-actualidad__media:hover) .mp-actualidad__title a {
    color: var(--link-hover);
}

/* Móvil: rótulo arriba y titular a dos líneas debajo; la banda no pasa de
   ~90px. */
@media (max-width: 767px) {
    .mp-actualidad {
        row-gap: 6px;
    }

    .mp-actualidad__title {
        font-size: 1.15rem;
    }

    /* El recorte vive en el <a> (ver arriba): el clamp a dos líneas tiene que ir
       también ahí, en el <h2> ya no hacía nada. */
    .mp-actualidad__title a {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .mp-actualidad--nota {
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: var(--space-s);
        padding: 8px var(--space-s) 8px 8px;
    }

    .mp-actualidad--nota .mp-actualidad__media {
        aspect-ratio: 1;
    }

    .mp-actualidad--nota .mp-actualidad__sub {
        display: none;
    }
}

/* --- 0. INFORME DESTACADO (HERO DE PORTADA) ----------------------------------
   Módulo de apertura: el informe principal del número a todo el ancho del
   contenedor, con la foto arriba y, debajo, los contenidos "hijo" que cuelgan de
   él en el jobbag del CMS. Cuatro estados según cuántos hijos haya (0/3/2/1),
   que el renderer resuelve con un modificador --v1…--v4.

   El esqueleto (foto + cabecera titular/subtítulo) es IDÉNTICO en los cuatro:
   así el módulo se lee como una pieza con estados y no como cuatro módulos
   distintos, y solo cambia la zona de hijos.

   Cabecera 8fr/4fr en desktop: a 1.100px una sola columna daría un titular de
   línea larguísima y un subtítulo muy por encima de la medida legible. El
   reparto deja los dos en medida cómoda sin romper el ancho completo de la foto.

   Los hijos NO van encajados en tarjetas: viven sobre la superficie del propio
   hero, separados por la regla de "En este informe". Enmarcarlos daría tarjeta
   dentro de tarjeta y rompería la lectura de "contenidos incluidos en el informe".

   Rejilla ÚNICA de 3 columnas para los tres estados con hijos:
     v2 → 3 hijos, uno por columna.
     v3 → 2 hijos + el enlace "Ver el informe completo" en la tercera celda.
     v4 → 1 hijo que ocupa dos columnas y se recompone en horizontal (imagen a
          la izquierda, titular a la derecha).
   Con `1fr 1fr` y el mismo `gap` dentro de la celda de v4, la imagen del hijo
   mide EXACTAMENTE lo mismo que en v2/v3 (~347px en desktop): un único recorte
   (_mp_feed, 400x250) sirve para los tres estados y el módulo no cambia de
   altura según la catalogación. */

.mp-hero {
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mp-hero__media {
    /* Móvil: la foto panorámica quedaría en una tira de 150px. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-offset);
}

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

.mp-hero__head {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
}

.mp-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-xs);
}

/* El titular más grande de la portada: un escalón por encima de
   .mp-report--lead, que es el siguiente en jerarquía. */
.mp-hero__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    line-height: 1.08;
    margin: 0;
}

.mp-hero__title a {
    color: var(--text-strong);
    text-decoration: none;
}

.mp-hero__title a:hover {
    color: var(--link-hover);
}

.mp-hero__sub {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-body-soft);
    margin: 0 0 var(--space-m);
    max-width: 60ch;
}

.mp-hero__childhead {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 0 var(--space-m);
    margin-bottom: var(--space-s);
}

.mp-hero__children {
    display: grid;
    gap: var(--space-l);
    padding: 0 var(--space-m) var(--space-m);
}

/* Móvil: hijo en horizontal (miniatura + titular). Cuatro fotos grandes
   encadenadas en vertical alargarían el módulo sin aportar jerarquía. */
.mp-hero__child {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-s);
    align-items: start;
}

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

.mp-hero__child-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--anim-duration-base) ease;
}

/* Sin caja, el zoom de la foto y el dorado del titular son toda la
   afordancia de clic que tiene el hijo. */
@media (hover: hover) {
    .mp-hero__child:hover .mp-hero__child-media img {
        transform: scale(1.04);
    }
}

/* min-width: 0 para que la firma pueda recortarse con elipsis dentro de la
   pista del grid en vez de ensancharla. */
.mp-hero__child-body {
    display: grid;
    gap: var(--space-2xs);
    min-width: 0;
}

/* Entrevistado o autor (pie de la foto principal): nombre en una línea y cargo
   en la siguiente. Cada línea se recorta con elipsis en vez de partirse, para
   que un cargo largo no alargue el hijo. El texto completo va en `title`. */
.mp-hero__child-firma {
    display: grid;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--text-dim);
    margin: 0;
}

.mp-hero__child-nombre,
.mp-hero__child-cargo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-hero__child-nombre {
    font-weight: 700;
    color: var(--text-strong);
}

.mp-hero__child-title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.25;
    margin: 0;
}

.mp-hero__child-title a {
    color: var(--text-strong);
    text-decoration: none;
}

.mp-hero__child-title a:hover,
.mp-hero__child:hover .mp-hero__child-title a {
    color: var(--link-hover);
}

/* La foto y la zona de hijos conmutan en el MISMO breakpoint: dejar los hijos
   en una sola fila de 720px con una miniatura de 120px sería un estado
   intermedio pobre, y así v3/v4 se comportan igual en tablet y en desktop. */
@media (min-width: 768px) {
    .mp-hero__media {
        aspect-ratio: 12 / 5;
    }

    .mp-hero__children {
        grid-template-columns: repeat(3, 1fr);
    }

    /* El hijo vuelve a vertical (foto arriba, titular debajo). */
    .mp-hero__child {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    /* v4 — un solo hijo: dos columnas de la rejilla y recomposición horizontal.
       El `1fr 1fr` con el mismo gap reproduce el ancho de columna de v2, así que
       la imagen sale del mismo tamaño sin números mágicos. */
    .mp-hero--v4 .mp-hero__child {
        grid-column: span 2;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-l);
        /* Centrado, no `start`: el titular de un hijo ocupa 2-4 líneas frente a
           una foto de 16:10, y alineado arriba deja un hueco muerto debajo. */
        align-items: center;
    }

    /* Cormorant tiene un ojo medio de 0,39 frente al 0,55 de Manrope: a `base`
       el titular de hijo se leía como un 12,5px de palo seco junto a una foto de
       ~347px. A `md` queda al nivel de los titulares de "Los informes del
       número" y a menos de la mitad del titular del hero, así que la jerarquía
       se mantiene. Vale también para el hijo único de v4. */
    .mp-hero__child-title {
        font-size: var(--font-size-md);
    }
}

/* La cabecera espera a desktop: un 8fr/4fr sobre 720px dejaría el subtítulo en
   una columna de 230px, por debajo de la medida mínima para un standfirst. */
@media (min-width: 1024px) {
    .mp-hero__head {
        grid-template-columns: 8fr 4fr;
        gap: var(--space-l);
        align-items: start;
    }

    .mp-hero__sub {
        /* En la columna estrecha el subtítulo ya está en medida; el tope de
           60ch solo hace falta cuando ocupa todo el ancho (móvil). */
        max-width: none;
    }
}

/* --- 0-bis. HERO CON CABECERA A TODO EL ANCHO (.mp-hero--fullhead) ---------
   Variante en evaluación frente a la cabecera partida 8fr/4fr. Titular y
   subtítulo pasan a línea completa y desaparece el botón "Leer informe": el
   destino del informe vive en el titular y en la foto, que se hace clicable.

   Cuesta altura: el subtítulo cae debajo del titular en vez de al lado, y eso
   son ~80px más que la cabecera partida aunque se quite el botón (medido a
   1.300px con el titular de prueba, que ocupa dos líneas en las dos
   versiones). Titulares largos recortan la diferencia, porque a todo el ancho
   caben ~35% más de caracteres por línea.

   Lo que se pierde al quitar el botón es el reclamo explícito, y se devuelve
   con afordancia: foto y titular son el mismo enlace y se encienden a la vez.

   Se combina con --v1/--v2/--v3/--v4: hijos, rejilla de tres columnas y
   recortes (_mp_feed, 400x250) no cambian. */

.mp-hero--fullhead .mp-hero__head {
    /* Anula el 8fr/4fr de desktop: una sola columna en todos los anchos. */
    grid-template-columns: 1fr;
    /* Los saltos se llevan con márgenes, no con el gap de la rejilla: a línea
       completa cada uno necesita una medida distinta. */
    gap: 0;
}

/* El gransector es la etiqueta del titular, no una pieza suelta. Con el gap de
   la rejilla (16) más el margen propio del componente .tag (8) quedaba a 24px,
   MÁS separación que la que hay entre titular y subtítulo: la jerarquía salía
   invertida y la etiqueta flotaba. A 8px métricos (~13 ópticos, 0,27 del cuerpo
   del titular) los dos se leen como un bloque. */
.mp-hero--fullhead .mp-hero__meta {
    margin-bottom: var(--space-xs);
}

.mp-hero--fullhead .mp-hero__meta .tag {
    margin-bottom: 0;
}

/* Titular → subtítulo: 16px métricos que con el interlineado 1,6 del standfirst
   se leen como ~21 ópticos, 0,45 del cuerpo del titular — la horquilla
   editorial para un standfirst va de 0,4 a 0,6. Por debajo de 12 el subtítulo
   se pega a los descendentes de la última línea del titular. */
.mp-hero--fullhead .mp-hero__title {
    margin-bottom: var(--space-s);
}

.mp-hero--fullhead .mp-hero__sub {
    /* A todo el ancho el standfirst necesita tope de medida SIEMPRE, también
       en desktop: sin él se iría a 110ch en pantallas grandes. */
    max-width: 72ch;
    /* Sin botón debajo, el padding de la cabecera cierra el bloque. */
    margin-bottom: 0;
}

/* Descripción del informe (qué contiene/analiza), la misma que la pastilla del
   detalle. Un escalón por debajo del subtítulo en cuerpo y en color: informa,
   no compite con el standfirst. Por defecto —móvil y hero secundario— se corta
   a cuatro líneas: en el secundario caben en el hueco que deja la foto lateral
   (min-height 315 frente a ~186 de texto) y el módulo no crece; en móvil, el
   texto entero de un informe (~550 caracteres) son 10-12 líneas más. El corte
   es solo visual: el lector de pantalla lee la descripción completa y el
   titular lleva al informe. */
.mp-hero__desc {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--text-body-soft);
    max-width: 72ch;
    margin: var(--space-s) 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* Principal en desktop: la descripción pasa a una columna a la derecha de
   titular y subtítulo (7fr/5fr), con el filete de la pastilla del detalle. Así
   va entera y el módulo crece ~50px (medido a 1.300px con México, 540
   caracteres), frente a ~170 si se pusiera debajo del subtítulo. El tope de
   diez líneas solo salta con descripciones muy por encima de lo que se pide a
   redacción. */
@media (min-width: 1024px) {
    .mp-hero--fullhead.mp-hero--desc:not(.mp-hero--sec) .mp-hero__head {
        grid-template-columns: 7fr 5fr;
        column-gap: var(--space-l);
    }

    .mp-hero--fullhead.mp-hero--desc:not(.mp-hero--sec) .mp-hero__head > * {
        grid-column: 1;
    }

    .mp-hero--fullhead.mp-hero--desc:not(.mp-hero--sec) .mp-hero__desc {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
        max-width: none;
        margin: 0;
        padding-left: var(--space-m);
        border-left: 2px solid var(--border-accent);
        -webkit-line-clamp: 10;
        line-clamp: 10;
    }
}

/* La foto entra en el enlace del informe: es lo que mantiene el área de clic
   que daba el botón. Decorativa para el teclado y para el lector de pantalla
   (tabindex="-1" + aria-hidden) para no repetir el mismo destino dos veces. */
a.mp-hero__media {
    display: block;
}

.mp-hero--fullhead .mp-hero__media img {
    transition: transform 0.4s ease;
}

/* Foto y titular responden en las dos direcciones: es lo que dice "esto es un
   solo enlace" cuando no hay botón que lo anuncie. */
@media (hover: hover) {
    .mp-hero--fullhead .mp-hero__media:hover img,
    .mp-hero--fullhead:has(.mp-hero__title a:hover) .mp-hero__media img {
        transform: scale(1.02);
    }
}

.mp-hero--fullhead .mp-hero__media:hover ~ .mp-hero__head .mp-hero__title a {
    color: var(--link-hover);
}

/* Sin el enlace de relleno "Ver el informe completo", v3 y v4 dejarían la
   tercera columna huérfana a la derecha. En v4 se centra el hijo: el ancho de
   columna se calcula con la misma fórmula que repeat(3, 1fr), así la foto mide
   EXACTAMENTE igual que en v2 y el aire sobrante queda repartido a los dos
   lados en vez de acumulado en uno. v3 se resuelve aparte (ver abajo). */
@media (min-width: 768px) {
    .mp-hero--fullhead .mp-hero__children {
        --mp-hero-child-col: calc((100% - 2 * var(--space-l)) / 3);
        justify-content: center;
    }

    /* v3 — dos hijos: centrar dos columnas de tercio (o de cuarto, en --sec) los
       dejaba pegados en el medio con ~190-280px muertos a cada lado. Cada hijo
       ocupa media banda y se recompone en horizontal como el hijo único de v4:
       arranca alineado con el rótulo "En este informe", no deja huecos y la
       foto sale a ~256px, dentro del _mp_feed y casi igual que en el --sec v2. */
    .mp-hero--fullhead.mp-hero--v3 .mp-hero__children {
        grid-template-columns: 1fr 1fr;
    }

    /* Foto-titular a 24px frente a 32 entre hijos: más cerca dentro del hijo
       que entre uno y otro, para que se lean como dos piezas. */
    .mp-hero--fullhead.mp-hero--v3 .mp-hero__child {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-m);
        align-items: center;
    }

    /* El hijo único conserva su recomposición horizontal (foto + titular), pero
       ya no necesita `span 2`: la pista mide lo que dos columnas y el gap. */
    .mp-hero--fullhead.mp-hero--v4 .mp-hero__children {
        grid-template-columns: calc(var(--mp-hero-child-col) * 2 + var(--space-l));
    }

    .mp-hero--fullhead.mp-hero--v4 .mp-hero__child {
        grid-column: auto;
    }
}

/* --- 0-ter. HERO SECUNDARIO (.mp-hero--sec) ----------------------------------
   Segundo informe destacado. Misma dinámica que el hero principal —un destacado
   de Xtent más sus contenidos hijo, con los mismos cuatro estados— pero con menos
   peso, porque dos bandas idénticas a todo el ancho en la misma página compiten
   entre sí y deshacen la jerarquía: si todo es hero, nada lo es.

   Lo que baja el peso NO es encoger la banda. Una foto a 1.152px sigue dominando
   la pantalla aunque se le quiten 100px de alto, y aplanarla obligaría a recortar
   en navegador con un foco de imagen que hoy no se aplica. Lo que lo baja es
   cambiar la relación foto/texto: la foto deja de ser banda superior y pasa a
   columna lateral, con lo que el módulo encoge de verdad y el salto se lee de un
   vistazo sin medir píxeles.

   Ventaja de paso: usa _mp_lead (4:3, 960x720), que el CMS genera para TODO
   informe. Ni recorte nuevo ni dependencia del _mp_hero_home, que solo existe si
   el artículo se publicó desde la carpeta del hero principal.

   Los hijos se quedan como están, a lo ancho y en la rejilla de tres: son el
   mismo módulo, y tocarlos rompería el parecido de familia. */

@media (min-width: 768px) {
    .mp-hero--sec {
        display: grid;
        grid-template-columns: 420px 1fr;
        align-items: start;
    }

    /* La foto ocupa la primera celda, a sangre contra el borde de la tarjeta y
       llenando la altura del bloque de texto. */
    .mp-hero--sec .mp-hero__media {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: auto;
        align-self: stretch;
        min-height: 315px;
    }

    .mp-hero--sec .mp-hero__head {
        grid-column: 2;
        grid-row: 1;
        /* Centrado contra la foto: anclado arriba dejaba un hueco muerto debajo
           del subtítulo cuando el texto es más corto que la imagen. */
        align-self: center;
        padding: var(--space-l);
    }

    /* Un escalón por debajo del hero principal: es la otra mitad del salto de
       jerarquía, junto con el tamaño de la foto. */
    .mp-hero--sec .mp-hero__title {
        font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
    }

    /* Hijos y su rótulo cruzan las dos columnas: son del módulo entero, no de la
       columna de texto. */
    .mp-hero--sec .mp-hero__childhead,
    .mp-hero--sec .mp-hero__children {
        grid-column: 1 / -1;
    }

    /* La foto llega a sangre hasta el final de su fila y el rótulo no tenía
       margen propio (en el principal lo separa el padding de la cabecera), así
       que la regla quedaba pegada a la imagen. */
    .mp-hero--sec .mp-hero__childhead {
        margin-top: var(--space-m);
    }

    /* Hijos a un cuarto de ancho en vez de a un tercio (~260px de foto frente a
       ~347): con la rejilla de tres del principal la zona de hijos pesaba casi
       tanto como el propio destacado. Mismo recorte _mp_feed, el grupo sigue
       centrado como en --fullhead. */
    .mp-hero--sec .mp-hero__children {
        --mp-hero-child-col: calc((100% - 3 * var(--space-l)) / 4);
    }

    .mp-hero--sec.mp-hero--v2 .mp-hero__children {
        grid-template-columns: repeat(3, var(--mp-hero-child-col));
    }

    /* Titulares un escalón por debajo del principal, pero no menos de `base`: a
       `sm` el Cormorant se leía como un 10px de palo seco, más pequeño que las
       entradillas de los informes y que el mismo titular en móvil. El hijo único
       de v4 conserva su escalón extra. */
    .mp-hero--sec .mp-hero__child-title {
        font-size: var(--font-size-base);
    }

    .mp-hero--sec.mp-hero--v4 .mp-hero__child-title {
        font-size: var(--font-size-md);
    }
}

/* --- 1. LOS INFORMES DEL NÚMERO --- */
.mp-reports__grid {
    display: grid;
    gap: var(--space-l);
}

.mp-report--lead .mp-report__media {
    aspect-ratio: 4 / 3;
}

.mp-report--lead .mp-report__title {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.mp-report--secondary .mp-report__media {
    aspect-ratio: 4 / 3;
}

/* Desktop: la columna secundaria es más estrecha (grid 1.45fr/1fr), así que
   iguala su altura en píxeles a la de la portada líder: 80/87 = 1 / (1.45 × 4/3) */
@media (min-width: 1024px) {
    .mp-report--secondary .mp-report__media {
        aspect-ratio: 80 / 87;
    }
}

.mp-report--secondary .mp-report__title {
    font-size: var(--font-size-lg);
}

/* --- 3. LA MARCA PRIVADA EN… + ÚLTIMO NÚMERO --- */
.mp-sectorized {
    display: grid;
    gap: var(--space-l);
}

.mp-sectorized__head {
    gap: 14px;
}

.mp-sectorized__grid {
    display: grid;
    gap: var(--space-m);
}

.mp-report--mono .mp-report__title {
    font-size: var(--font-size-md);
}

/* Las dos columnas de desktop bajan hasta 600px. A una por fila, entre 600 y
   1023 cada monográfico salía a todo el ancho (hasta ~975px de foto): más que
   el hero secundario, casi lo mismo que el principal y muy por encima de los
   640px del recorte _mp_mono. A dos columnas la foto mide 290-470px, lo mismo
   que en desktop, sin recorte nuevo. En móvil sigue a una: ahí todo va a ancho
   completo y el 16:9 ya queda por debajo del 4:3 del hero. */
@media (min-width: 600px) {
    .mp-sectorized__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Por debajo de 1024px la .mp-sectorized es de una columna y este aside pasa a ocupar el
   ancho del contenedor: a 1023px la portada se pintaría a ~975px, más del doble del fichero
   (800px de ancho) y desproporcionada respecto al resto de la página. Se acota y se centra. */
.mp-issue {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
}

.mp-issue__box {
    border: 1px solid var(--border-accent-soft);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Proporción de la portada = la del fichero que entrega maquetación, 800×1132 (A4,
   1:1,4142). Antes era 3/4: con object-fit: cover eso recortaba un 6% del alto (3% arriba
   y 3% abajo), justo donde va la mancheta de la revista. Al coincidir caja y fichero no se
   recorta nada. Mismo valor en .sumario-cover y en .edition-card .card__image. */
.mp-issue__cover {
    aspect-ratio: 800 / 1132;
}

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

.mp-issue__body {
    padding: var(--space-s) var(--space-m);
}

.mp-issue__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--space-xs);
}

.mp-issue__date {
    font-family: var(--font-family-sans);
    /* 0.75rem (12px) es el suelo de etiquetas en toda la portada. */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--link);
}

.mp-issue__cta-row {
    display: flex;
    gap: var(--space-xs);
}

.mp-issue__cta {
    flex: 1;
    text-align: center;
    padding: var(--space-xs);
    font-size: var(--font-size-xs);
    letter-spacing: 0.2px;
}

/* --- 4/5. FEEDS EDITORIALES --- */
.mp-feed__head {
    justify-content: space-between;
}

.mp-feed__head--wrap {
    flex-wrap: wrap;
}

.mp-feed__grid {
    display: grid;
    gap: var(--space-m);
}

.mp-report--radar .mp-report__media {
    aspect-ratio: 16 / 10;
}

.mp-report--radar .mp-report__title {
    font-size: var(--font-size-md);
}

/* --- 4-bis. RADIOGRAFÍAS (módulo propio) -------------------------------------
   Dos radiografías elegidas a mano por redacción, con jerarquía explícita: una
   principal y una secundaria. (La especificación hablaba de tres, con dos
   miniaturas debajo; se quedó en dos y la segunda necesitaba más presencia que
   una miniatura con titular.)

   Las dos son la MISMA banda horizontal —foto a sangre a la izquierda; sector,
   titular, entradilla y titulares hijo a la derecha— con los mismos contenidos.
   La secundaria es esa banda a menor escala: foto más estrecha, menos altura,
   titular y entradilla un punto más pequeños. Repetir la estructura es lo que
   hace que se lea como «otra radiografía» y no como un apéndice de la primera;
   bajar la escala es lo que la pone por debajo. Si redacción mete más de dos,
   se apilan como la segunda.

   La foto va siempre a la izquierda y no alterna como en entrevistas: allí no
   hay jerarquía y la alternancia da el ritmo; aquí el ritmo lo da el escalón de
   tamaño, y el módulo siguiente (Daymon) ya lleva la foto a la derecha.

   Hijos SIN foto: son ramificaciones del análisis, no piezas por derecho
   propio, y darles imagen las pondría a su altura.

   Recorte: _mp_hero_not (800x450, con @2x) en las dos. Las radiografías se
   catalogan como noticia y el CMS lo genera para todas; si falta, mp_picture()
   cae a _mp_feed. Ninguno nuevo. */

.mp-radiografias__lista {
    display: grid;
    gap: var(--space-m);
}

.mp-radiografia {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mp-radiografia__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-offset);
}

.mp-radiografia__media img,
.mp-radiografia__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-radiografia__body {
    padding: 0 var(--space-m) var(--space-m);
}

.mp-radiografia__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
    line-height: 1.15;
    margin: var(--space-xs) 0 var(--space-s);
}

.mp-radiografia__title a {
    color: var(--text-strong);
    text-decoration: none;
}

.mp-radiografia__title a:hover {
    color: var(--link-hover);
}

.mp-radiografia__desc {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-body-soft);
    margin: 0;
    max-width: 62ch;
}

/* --- hijos: solo titulares --- */
.mp-radiografia__hijos {
    margin-top: var(--space-m);
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-hair);
}

.mp-radiografia__hijos-rotulo {
    display: block;
    margin-bottom: var(--space-xs);
}

.mp-radiografia__hijo {
    display: block;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-base);
    line-height: 1.35;
    color: var(--text-strong);
    text-decoration: none;
    padding: var(--space-2xs) 0;
}

.mp-radiografia__hijo:hover {
    color: var(--link-hover);
}

/* El filete de separación entre titulares hijo va solo ENTRE ellos, no debajo
   del último: cerrar la lista con una línea la haría parecer truncada. */
.mp-radiografia__hijo + .mp-radiografia__hijo {
    border-top: 1px dotted var(--border-hair);
}

/* --- secundaria: la misma banda, un escalón más abajo --- */
.mp-radiografia--sec .mp-radiografia__media {
    /* En móvil, más apaisada que la principal: es lo que más altura le quita
       sin tocar el texto. */
    aspect-ratio: 2 / 1;
}

.mp-radiografia--sec .mp-radiografia__title {
    font-size: var(--font-size-md);
    line-height: 1.2;
    margin: var(--space-xs) 0 var(--space-xs);
}

/* Entradilla a tres líneas como mucho: es lo que mantiene la banda más baja
   que la principal aunque redacción escriba largo. El recorte va en el <p>,
   que no lleva foco, así que no corta ningún anillo. */
.mp-radiografia--sec .mp-radiografia__desc {
    font-size: var(--font-size-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-radiografia--sec .mp-radiografia__hijos {
    margin-top: var(--space-s);
    padding-top: var(--space-xs);
}

.mp-radiografia--sec .mp-radiografia__hijo {
    font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
    /* Pasan a banda horizontal. 420px de foto en la principal: _mp_hero_not
       (800px) la cubre a ~1,9x, prácticamente retina, sin recorte nuevo. */
    .mp-radiografia {
        grid-template-columns: 420px 1fr;
        gap: var(--space-l);
        /* `stretch` y no `center`: la foto va a sangre contra el borde de la
           tarjeta y llena su altura, que es lo que hace que esto se lea como una
           banda y no como una foto flotando con aire arriba y abajo. */
        align-items: stretch;
    }

    .mp-radiografia__media {
        /* La proporción deja de mandar: manda la altura de la tarjeta, y el
           encuadre lo resuelve object-fit. El mínimo conserva la banda cuando el
           texto es corto. */
        aspect-ratio: auto;
        height: 100%;
        min-height: 236px;
    }

    .mp-radiografia__body {
        align-self: center;
        padding: var(--space-l) var(--space-l) var(--space-l) 0;
    }

    /* 300px de foto (el mismo 16:9 que la principal a 420px da 236; a 300,
       168): la banda pierde casi un tercio de altura y la foto, servida desde
       el mismo _mp_hero_not, va a ~2,7x. */
    .mp-radiografia--sec {
        grid-template-columns: 300px 1fr;
        gap: var(--space-m);
    }

    /* El `auto` se repite aquí porque el 2/1 móvil de la secundaria es más
       específico que el `auto` general: con él, la foto estirada a la altura de
       la banda sacaba el ancho de la proporción y se salía de su columna. */
    .mp-radiografia--sec .mp-radiografia__media {
        aspect-ratio: auto;
        min-height: 168px;
    }

    .mp-radiografia--sec .mp-radiografia__body {
        padding: var(--space-m) var(--space-m) var(--space-m) 0;
    }
}

/* --- 5-bis. LA ENTREVISTA (módulo propio, a todo el ancho) -------------------
   Deja de ser la columna izquierda de una sección compartida con tribunas. Ahora
   es un módulo propio que admite VARIAS entrevistas, todas a todo el ancho y con
   la misma jerarquía: ninguna es principal.

   Al no haber jerarquía entre ellas, lo que da ritmo es la alternancia: el
   retrato va a la izquierda en las impares y a la derecha en las pares. Con una
   sola entrevista queda a la izquierda, que es la lectura por defecto.

   El retrato mide 220px y usa el recorte _mp_portrait (300x400 / 600x800), que el
   CMS genera precisamente para las entrevistas. El ancho del retrato es lo que
   fija la altura del módulo, porque la proporción 3:4 es fija y el texto (cita,
   firma, cargo y botón) nunca llega a esa altura: a los 300px de partida la foto
   salía de 400px y cada entrevista ocupaba 464px de alto, con ~200px de aire
   muerto en la columna de texto y dos entrevistas comiéndose casi una pantalla.
   A 220px la foto queda en 293px y la tarjeta en 357px, sin recortar nada en
   navegador —que en un retrato significa descabezarlo— ni pedir un recorte nuevo:
   se sirve el mismo fichero de 300x400 (y el de 600x800 sigue cubriendo 2x
   sobrado). Por debajo de ~200px la cara deja de leerse a tamaño de lectura. */

/* Las reglas van bajo .mp-interviews. Las de .mp-interview suelto, que solo
   usaba el mock congelado (/marcaprivada/home-mock), se borraron: aquí ya no
   había nada que no se sobrescribiera. */

.mp-interviews__list {
    display: grid;
    gap: var(--space-l);
}

.mp-interviews .mp-interview {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: var(--space-m);
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    padding: var(--space-m);
}

/* El retrato es hermano del body, así que el body apila su contenido: cita,
   firma, cargo y CTA. */
.mp-interviews .mp-interview__body {
    display: block;
}

.mp-interviews .mp-interview__portrait {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-offset);
}

.mp-interviews .mp-interview__portrait img,
.mp-interviews .mp-interview__portrait picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* El titular de una entrevista es una cita: va en la serif itálica, que es como
   se lee una voz. Con tope de medida para que a todo el ancho no se estire.
   Es un <h3> (el titular de la pieza), así que fija todo lo que el h3 de
   base.css trae distinto. */
.mp-interviews .mp-interview__quote {
    font-family: var(--font-family-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.8rem);
    line-height: 1.2;
    color: var(--text-strong);
    margin: 0 0 var(--space-s);
    max-width: 42ch;
}

.mp-interviews .mp-interview__quote a {
    color: inherit;
    text-decoration: none;
}

.mp-interviews .mp-interview__quote a:hover {
    color: var(--link-hover);
}

.mp-interviews .mp-interview__author {
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--text-strong);
    margin: 0;
}

.mp-interviews .mp-interview__role {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    color: var(--text-dim);
    margin: 0;
}

/* El aire sobre el botón lo pone el propio botón y no el margen inferior del
   cargo: sin cargo (o sin firma) el CTA se quedaba pegado a lo anterior. */
.mp-interviews .mp-interview__body > .btn {
    margin-top: var(--space-m);
}

/* Móvil: con el retrato al lado, la cita iba en una columna de ~200px y un
   titular largo estiraba la tarjeta a 8-10 líneas. Bajar la foto a todo el
   ancho tampoco: un 3:4 a 340px son ~450px de alto y el recorte es de 300.
   Se recompone sin tocar el markup: el body se disuelve en la rejilla
   (display: contents), la cita cruza a lo ancho y el retrato baja a la fila
   de la firma, que es a la que identifica. La última pista (1fr) absorbe el
   alto sobrante del retrato para que firma, cargo y botón no se separen.
   Las pares llevan el retrato a la derecha, como en desktop, y no se pierde
   el ritmo. Solo por debajo de 560: a partir de ahí la columna de texto ya pasa
   de 370px y el retrato lateral vuelve a caber. */
@media (max-width: 559px) {
    .mp-interviews .mp-interview {
        grid-template-columns: 96px 1fr;
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: var(--space-m);
        row-gap: 0;
        align-items: start;
    }

    .mp-interviews .mp-interview__body {
        display: contents;
    }

    .mp-interviews .mp-interview__quote {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: var(--space-m);
    }

    .mp-interviews .mp-interview__portrait {
        grid-column: 1;
        grid-row: 2 / -1;
    }

    .mp-interviews .mp-interview__author,
    .mp-interviews .mp-interview__role,
    .mp-interviews .mp-interview__body > .btn {
        grid-column: 2;
    }

    .mp-interviews .mp-interview__body > .btn {
        justify-self: start;
    }

    .mp-interviews .mp-interview:nth-child(even) {
        grid-template-columns: 1fr 96px;
    }

    .mp-interviews .mp-interview:nth-child(even) .mp-interview__portrait {
        grid-column: 2;
    }

    .mp-interviews .mp-interview:nth-child(even) .mp-interview__author,
    .mp-interviews .mp-interview:nth-child(even) .mp-interview__role,
    .mp-interviews .mp-interview:nth-child(even) .mp-interview__body > .btn {
        grid-column: 1;
    }
}

/* 560-767: retrato lateral a 116px, pero con la misma alternancia que en
   desktop (antes solo existía desde 768 y aquí todas iban a la izquierda). */
@media (min-width: 560px) and (max-width: 767px) {
    .mp-interviews .mp-interview:nth-child(even) {
        grid-template-columns: 1fr 116px;
    }

    .mp-interviews .mp-interview:nth-child(even) .mp-interview__portrait {
        order: 2;
    }
}

@media (min-width: 768px) {
    .mp-interviews .mp-interview {
        grid-template-columns: 220px 1fr;
        gap: var(--space-xl);
        padding: var(--space-l);
    }

    /* Alternancia: en las pares el retrato pasa a la derecha. Se mueve con `order`
       y no reordenando el markup, para que el orden de lectura del documento siga
       siendo retrato → cita en los dos casos. */
    .mp-interviews .mp-interview:nth-child(even) {
        grid-template-columns: 1fr 220px;
    }

    .mp-interviews .mp-interview:nth-child(even) .mp-interview__portrait {
        order: 2;
    }
}

/* --- 6-bis. TRIBUNAS (módulo propio, a todo el ancho) ------------------------
   Deja de ser la columna derecha de la entrevista y pasa a tener entidad propia.
   Hasta cuatro firmas de opinión, de dos en dos a media caja.

   La foto va redonda y pequeña: en una tribuna el retrato identifica a quien
   firma, no ilustra la pieza, y el retrato de identidad es circular por
   convención editorial. Reutiliza el recorte _mp_square (1:1) que el CMS ya
   genera para toda noticia — a 96px va holgadamente sobrado, pero es la única
   proporción cuadrada del juego y no compensa añadir un recorte para esto.

   Jerarquía dentro de la tarjeta: primero quién firma, luego qué dice. La firma
   va en la sans, pequeña y en mayúsculas, como un antetítulo; el titular en la
   serif editorial. Sin sector ni fecha: el módulo ya es temáticamente homogéneo
   y añadir un tercer dato lo convertiría en una ficha. */

.mp-tribunas__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

.mp-tribuna {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-m);
    align-items: center;
    padding: var(--space-m);
    background: var(--surface-card);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: box-shadow var(--anim-duration-fast) ease, transform var(--anim-duration-fast) ease, border-color var(--anim-duration-fast) ease;
}

.mp-tribuna:hover {
    border-color: var(--border-strong);
}

@media (hover: hover) {
    .mp-tribuna:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }
}

.mp-tribuna__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    background: var(--surface-offset);
}

.mp-tribuna__avatar img,
.mp-tribuna__avatar picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-tribuna__author {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--link);
    margin-bottom: var(--space-2xs);
}

.mp-tribuna__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.3;
    color: var(--text-strong);
    margin: 0;
}

.mp-tribuna:hover .mp-tribuna__title {
    color: var(--link-hover);
}

/* Restos del mock original (templates/marcaprivada/home-mock.php), que se conserva
   congelado en /marcaprivada/home-mock como referencia comparativa y sigue usando las
   clases de la tarjeta de tribuna anterior. Se mantienen solo para que esa página no se
   degrade; el módulo en producción usa __author y __title. Se pueden borrar el día que se
   retire el mock. */
.mp-tribuna__name {
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: 0.75rem;
}

.mp-tribuna__org {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* --- 7. MARCA PRIVADA EN EL MUNDO --- */
.mp-world__filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mp-pill {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 11px;
    /* Superficie elevada con filete interior, no un color de borde como relleno:
       --surface-offset es casi el mismo tono que el papel y la pill no se veía.
       El filete va en sombra interior para no sumar 2px al tamaño. */
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-hair);
    color: var(--text-body-soft);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--anim-duration-fast) ease, color var(--anim-duration-fast) ease;
}

.mp-pill:hover:not(:disabled):not(.mp-pill--active) {
    background: var(--surface-accent);
    box-shadow: inset 0 0 0 1px var(--border-accent-soft);
    color: var(--text-body);
}

.mp-pill--active {
    background: var(--action-strong);
    box-shadow: none;
    color: var(--action-strong-ink);
}

/* Con el dedo, 2.75rem (44px) de alto: a ~26px las pills quedaban por debajo
   del mínimo de toque y, juntas, se pulsaba la vecina. */
@media (pointer: coarse) {
    .mp-pill {
        min-height: 2.75rem;
    }
}

.mp-pill:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Selector de país: misma pieza que las pills (tipografía, superficie, filete, radio) para
   que se lea como un filtro más del grupo y no como un campo de formulario suelto. Se deja
   el desplegable nativo: en móvil abre el selector del sistema, que es lo más usable con
   una lista de decenas de países. Con un país elegido toma el aspecto de pill activa. */
.mp-world__pais {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 11px;
    max-width: 100%;
    background-color: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-hair);
    color: var(--text-body-soft);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

/* Las opciones salen en minúscula normal: en mayúsculas una lista larga se lee peor. */
.mp-world__pais option {
    /* Colores propios: si heredaran los del select activo (tinta sobre dorado), la lista
       desplegada salía con texto oscuro sobre el fondo oscuro del sistema en modo oscuro. */
    color: var(--text-body);
    background-color: var(--surface-raised);
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
}

@media (hover: hover) {
    .mp-world__pais:hover:not(.is-active) {
        background-color: var(--surface-accent);
        box-shadow: inset 0 0 0 1px var(--border-accent-soft);
        color: var(--text-body);
    }
}

.mp-world__pais.is-active {
    background-color: var(--action-strong);
    box-shadow: none;
    color: var(--action-strong-ink);
}

@media (pointer: coarse) {
    .mp-world__pais {
        min-height: 2.75rem;
    }
}

.mp-world__grid {
    display: grid;
    gap: var(--space-l);
    margin-top: var(--space-m);
    /* La lista de noticias manda la altura del bloque; el mapa no la fija.
       Sin esto, el aspect-ratio del mapa clava la altura del contenedor y la
       lista (titulares largos) desborda y la tapa el módulo siguiente. */
    align-items: start;
}

.mp-world__map {
    aspect-ratio: 16 / 10;
    /* Se ancla arriba y conserva su 16/10 aunque la lista sea más alta. */
    align-self: start;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

/* jsVectorMap inyecta un <svg> que debe llenar el contenedor. */
.mp-world__map svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Columna derecha: lista (que se refresca por AJAX) + enlace "ver todo" (persistente). */
.mp-world__col {
    display: flex;
    flex-direction: column;
    align-self: start;
}

.mp-world__list {
    display: flex;
    flex-direction: column;
    transition: opacity var(--anim-duration-fast) ease;
}

.mp-world__empty {
    padding: var(--space-m) 0;
    color: var(--text-dim);
    font-size: var(--font-size-sm);
}

/* Tooltip del mapa (jsVectorMap) alineado con el rediseño. */
.jvm-tooltip {
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    background: var(--surface-ink);
    color: var(--text-on-ink);
    box-shadow: var(--shadow-md);
}

/* Toda la fila es clicable (antes solo lo parecía: cursor y hover en la fila,
   pero el enlace era el titular). El ::after del enlace la cubre entera; se
   posiciona contra .lrow y no contra el <a>, así que el overflow del clamp no
   lo recorta, y el anillo de foco sigue siendo el del propio enlace. */
.lrow {
    position: relative;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-hair);
}

.mp-world__list .lrow:first-child {
    padding-top: 0;
}

.mp-world__list .lrow:last-of-type {
    border-bottom: 0;
}

/* Es un <h3> (antes <p>): fija margen, medida y corte, que eran los del <p> de
   base.css, para que la fila no cambie de alto. */
.lrow__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: var(--font-size-md);
    line-height: 1.2;
    margin: 4px 0 var(--space-m);
    max-width: 70ch;
    text-wrap: pretty;
}

/* Máx. 2 líneas con ellipsis: filas de alto predecible aunque el titular sea muy
   extenso (el completo se ve al abrir la noticia). El clamp va en el <a> para no
   recortarle el anillo de foco (ver .mp-actualidad__title a). */
.lrow__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* --- 8. ANÁLISIS DAYMON --- */
/* Cabecera con filete, la misma de radiografías, entrevistas y tribunas: el rótulo
   sale del título del bloque. La tarjeta conserva el fondo de acento, que es lo que
   la distingue como colaboración sin necesidad de un sello dentro. */
.mp-daymon {
    background: var(--surface-accent);
    border: 1px solid var(--border-accent-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
}

.mp-daymon__body {
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Reparto vertical: titular y autor van juntos (el autor firma el titular) y el
   botón se separa del bloque de texto con el hueco mayor, space-m. El espacio sale
   del sello que ya no está, así que la tarjeta no crece: en desktop su alto lo
   sigue marcando la foto cuadrada de 240px. */
.mp-daymon__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    line-height: 1.1;
    margin: 0;
}

.mp-daymon__author {
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-strong);
    margin: var(--space-xs) 0 0;
}

.mp-daymon__role {
    font-weight: 400;
    color: var(--text-dim);
}

.mp-daymon__role::before {
    content: "· ";
}

.mp-daymon__desc {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text-dim);
    margin: var(--space-s) 0 0;
    max-width: 56ch;
}

.mp-daymon__body > .btn {
    align-self: flex-start;
    margin-top: var(--space-m);
}

/* Móvil: la foto cae debajo del texto a todo el ancho. En 16:10, el formato
   nativo del recorte _mp_feed (400x250), y no en el 1:1 de la columna lateral,
   que a ancho completo la convertía en un cuadrado mayor que el propio texto. */
.mp-daymon__media {
    min-height: 150px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

/* Desde 600px vuelve la columna lateral de desktop: hay ancho de sobra para el
   texto al lado y la foto se queda en 240px, sin pasar de los 400 del recorte. */
@media (min-width: 600px) {
    .mp-daymon {
        grid-template-columns: 1fr 240px;
    }

    .mp-daymon__media {
        aspect-ratio: 1 / 1;
    }
}

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

/* --- 9. ESPECIAL PRIVEL --- */
.mp-privel {
    background: var(--surface-ink);
    color: var(--text-on-ink);
    /* El mismo radio que el resto de tarjetas de la portada (10px suelto no
       era ningún paso de la escala). */
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mp-privel__top {
    display: grid;
}

.mp-privel__body {
    padding: var(--space-l);
}

.mp-tag--privel {
    background: var(--surface-chip-on-ink);
    color: var(--accent-on-ink);
}

/* Al enlazar el titular a la ficha del evento hereda el dorado de enlace, que es
   gold-700 y sobre tinta se queda en 2,3:1. En módulo oscuro el titular va blanco
   y el dorado se reserva al hover, igual que en el resto de tarjetas del site. */
.mp-privel__title a {
    color: inherit;
    text-decoration: none;
}

.mp-privel__title a:hover {
    color: var(--accent-on-ink);
}

.mp-privel__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: clamp(1.4rem, 3.5vw, 1.95rem);
    line-height: 1.05;
    margin: var(--space-s) 0 var(--space-xs);
    color: var(--text-on-ink);
}

/* Fechas del evento, tal como las compone redacción ("5 y 6 de noviembre"). Van
   entre el titular y la descripción, que es donde se buscan. */
.mp-privel__fechas {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-on-ink);
    margin: 0 0 var(--space-xs);
}

.mp-privel__desc {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--text-dim-on-ink);
    margin: 0 0 var(--space-m);
}

.mp-privel__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

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

/* El pie del módulo de evento tiene tantos accesos como contenidos haya publicado
   redacción en la carpeta de Xtent (3 o 4, cardinalidad blanda), así que el número de
   columnas lo fija el renderer con --mp-subnav-cols en vez de estar clavado a 4. En
   móvil se mantienen dos columnas sea cual sea el número. */
.mp-privel__subnav {
    border-top: 1px solid var(--border-on-ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mp-privel__subnav-link {
    padding: 14px 16px;
    text-decoration: none;
    border-right: 1px solid var(--border-on-ink);
    border-bottom: 1px solid var(--border-on-ink);
}

.mp-privel__subnav-link:nth-child(2n) {
    border-right: 0;
}

.mp-privel__subnav-link:nth-last-child(-n+2) {
    border-bottom: 0;
}

.mp-privel__subnav-label {
    display: block;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--accent-on-ink);
}

.mp-privel__subnav-title {
    display: block;
    font-family: var(--font-family-serif);
    font-weight: 600;
    /* `base` y no `sm`, por el ojo medio del Cormorant (ver hero); y con
       interlineado de texto, porque el titular suele ocupar dos o tres líneas. */
    font-size: var(--font-size-base);
    line-height: 1.25;
    color: var(--text-on-ink);
    margin-top: 3px;
}

/* --- 10. AUTOPROMO SUSCRIPCIÓN --- */
.mp-subscribe-promo {
    background: var(--surface-ink);
    color: var(--text-on-ink);
    padding: var(--space-xl) var(--space-m);
    text-align: center;
}

.mp-rule-gold {
    height: 2px;
    border: 0;
    max-width: 110px;
    margin: 0 auto var(--space-m);
    background: linear-gradient(90deg, transparent, var(--accent-soft) 18%, var(--accent-soft) 82%, transparent);
}

.mp-subscribe-promo__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    line-height: 1.1;
    max-width: 24ch;
    margin: var(--space-xs) auto var(--space-s);
    color: var(--text-on-ink);
}

.mp-subscribe-promo__desc {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--text-dim-on-ink);
    margin: 0 auto var(--space-m);
}

.mp-subscribe-promo__cta {
    display: flex;
    gap: var(--space-s);
    justify-content: center;
}

.mp-subscribe-promo__cta .btn {
    flex: 1;
    max-width: 220px;
}

/* --- 11. AUTOPROMO DE ANUNCIANTES (integrada en .mp-subscribe-promo, mismo ancho) --- */
.mp-advertisers {
    /* Gradiente de superficie, no el de la mancheta: esta banda lleva texto */
    background: var(--gradient-gold-surface);
    border-radius: var(--radius-md);
    /* Vive dentro de .mp-subscribe-promo, que pone el anillo en dorado claro para
       la tinta; sobre esta banda dorada ese anillo se quedaba en ~1,2:1. */
    --focus-ring: var(--action-ink);
    padding: var(--space-m) var(--space-l);
    margin-top: var(--space-xl);
    text-align: center;
}

.mp-advertisers__copy {
    display: block;
    font-family: var(--font-family-sans);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.45;
    /* La tinta que admite el dorado (8,5:1 en el peor punto del gradiente). */
    color: var(--action-ink);
    margin-bottom: var(--space-s);
}

.mp-advertisers__cta {
    display: inline-block;
    background: var(--action-ink);
    color: var(--text-on-ink);
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 13px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

/* Mobile-only spacing tweak for the container (matches existing page convention) */
@media (max-width: 767px) {
    .mp-cover__inner.container {
        padding-left: var(--space-m);
        padding-right: var(--space-m);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Desktop layout (comp "2a", 1180px) --- */
@media (min-width: 1024px) {
    .mp-reports__grid {
        grid-template-columns: 1.45fr 1fr;
        align-items: stretch;
    }

    .mp-sectorized {
        grid-template-columns: 1fr 300px;
    }

    /* Sin monográficos solo queda la revista: una columna, y el aside ya se centra solo. */
    .mp-sectorized--solo-issue {
        grid-template-columns: 1fr;
    }

    /* Da algo más de altura a las portadas de los monográficos para igualar
       la altura del aside "El último número" (columna fija de 300px) */
    .mp-report--mono .mp-report__media {
        aspect-ratio: 5 / 4;
    }

    .mp-feed__grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .mp-tribunas__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mp-world__grid {
        grid-template-columns: 1.4fr 1fr;
    }

    .mp-privel__top {
        grid-template-columns: 1.25fr 1fr;
    }

    .mp-privel__subnav {
        grid-template-columns: repeat(var(--mp-subnav-cols, 4), 1fr);
    }

    .mp-privel__subnav-link:nth-child(2n) {
        border-right: 1px solid var(--border-on-ink);
    }

    .mp-privel__subnav-link:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--border-on-ink);
    }

    .mp-privel__subnav-link:last-child {
        border-right: 0;
    }

    .mp-advertisers {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-l);
    }

    .mp-advertisers__copy {
        margin-bottom: 0;
        text-align: left;
    }
}

/* ============================================================
   Carrusel horizontal (mecánica común): Crónicas del congreso (MP_cronicas)
   y Lanzamientos (MP_innovacion)
   Una sola fila de tarjetas de ANCHO FIJO: cuántas se ven lo decide el
   espacio y la altura del módulo no depende de cuántas tarjetas haya. La
   tarjeta asomada a la derecha es la señal de que hay más. Desplazamiento
   nativo con scroll-snap: funciona sin JS (dedo, trackpad, teclado);
   marcaprivada.js solo añade las flechas. El ancho de las tarjetas lo pone
   cada módulo sobre su lista (.mp-cronicas__lista, .mp-lanz__lista).
   ============================================================ */
.mp-carrusel__head .mp-arrowlink {
    flex: none;
    white-space: nowrap;
}

.mp-cronicas__edicion {
    color: var(--text-dim);
    font-weight: 600;
}

.mp-carrusel__nav {
    display: flex;
    gap: var(--space-xs);
    flex: none;
}

.mp-carrusel__nav[hidden] {
    display: none;
}

.mp-carrusel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border-hair);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--text-strong);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* aria-disabled y no :disabled (lo pone marcaprivada.js): un botón disabled
   suelta el foco y, al llegar al extremo con el teclado, caía al <body>. */
.mp-carrusel__btn:hover:not([aria-disabled="true"]) {
    color: var(--link-hover);
    border-color: currentColor;
}

.mp-carrusel__btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

/* El padding (con margen negativo que lo compensa) deja sitio al anillo de
   foco, que si no quedaría recortado por el overflow del carrusel. */
.mp-carrusel__lista {
    --mp-carrusel-gap: var(--space-m);
    list-style: none;
    margin: -6px;
    padding: 6px;
    display: grid;
    grid-auto-flow: column;
    gap: var(--mp-carrusel-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-hair) transparent;
}

/* Con JS hay flechas y la barra sobra (en móvil ya es superpuesta). Sin JS se
   queda: en escritorio es lo único que indica que se puede desplazar. */
.mp-carrusel.is-enhanced .mp-carrusel__lista {
    scrollbar-width: none;
}

.mp-carrusel.is-enhanced .mp-carrusel__lista::-webkit-scrollbar {
    display: none;
}

/* Móvil: las flechas sobran (se desliza con el dedo) y se lleva sitio el rótulo. */
@media (max-width: 767px) {
    .mp-carrusel__nav {
        display: none;
    }
}

/* Escritorio: la cabecera reserva la altura de las flechas, que aparecen con el
   JS; sin esto el módulo crecería unos píxeles al mostrarlas. */
@media (min-width: 768px) {
    .mp-carrusel__head {
        min-height: 2.25rem;
    }
}

/* --- Crónicas del congreso (MP_cronicas) ---
   ≈4 y media en escritorio, 1 y un cuarto en móvil. */
.mp-cronicas__lista {
    /* Móvil: una tarjeta y algo más de un cuarto de la siguiente. */
    grid-auto-columns: 72%;
}

.mp-cronica {
    scroll-snap-align: start;
    min-width: 0;
}

.mp-cronica__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
    color: inherit;
    text-decoration: none;
}

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

.mp-cronica__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--anim-duration-base) ease;
}

@media (hover: hover) {
    .mp-cronica__link:hover .mp-cronica__media img {
        transform: scale(1.04);
    }
}

.mp-cronica__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.25;
    color: var(--text-strong);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.mp-cronica__link:hover .mp-cronica__title {
    color: var(--link-hover);
}

.mp-cronica__ponente {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--text-dim);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

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

@media (min-width: 768px) {
    /* Ancho calculado para que la última asome un tercio largo: con un número
       redondo de tarjetas el corte cae en el hueco y no se ve que hay más. */
    .mp-cronicas__lista {
        --mp-carrusel-gap: var(--space-s);
        grid-auto-columns: calc((100% - 3 * var(--mp-carrusel-gap)) / 3.4);
    }
}

@media (min-width: 1024px) {
    .mp-cronicas__lista {
        --mp-carrusel-gap: var(--space-m);
        grid-auto-columns: calc((100% - 4 * var(--mp-carrusel-gap)) / 4.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-cronica__media img {
        transition: none;
    }

    .mp-cronica__link:hover .mp-cronica__media img {
        transform: none;
    }
}

/* --- Lanzamientos (MP_innovacion) ---
   Fichas de producto, más estrechas y ligeras que una noticia: ≈2 y media en
   móvil, ≈5 y media en escritorio. La foto (producto sobre blanco, entregada
   cuadrada; recorte _mp_square) va ENCAJADA en una caja blanca en los dos
   temas; el filete dorado bajo la caja hace de borde de lineal. Cierra la fila la llamada para enviar
   lanzamientos (mailto). */
.mp-lanz__lista {
    grid-auto-columns: 42%;
}

@media (min-width: 768px) {
    .mp-lanz__lista {
        --mp-carrusel-gap: var(--space-s);
        grid-auto-columns: calc((100% - 4 * var(--mp-carrusel-gap)) / 4.4);
    }
}

@media (min-width: 1024px) {
    .mp-lanz__lista {
        --mp-carrusel-gap: var(--space-m);
        grid-auto-columns: calc((100% - 5 * var(--mp-carrusel-gap)) / 5.4);
    }
}

.mp-lanz__item {
    scroll-snap-align: start;
    min-width: 0;
}

.mp-lanz__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.mp-lanz__media {
    aspect-ratio: 1 / 1;
    padding: 8%;
    margin-bottom: var(--space-2xs);
    overflow: hidden;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 3px solid var(--accent-soft);
    background: var(--surface-packshot);
}

.mp-lanz__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* contain y no cover: si falta el recorte cuadrado, el respaldo de
   mp_picture() es el 16:10 de feed, y así tampoco se corta. */
.mp-lanz__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--anim-duration-base) ease;
}

.mp-lanz__media.media-empty {
    padding: 0;
    background: var(--surface-offset);
}

@media (hover: hover) {
    .mp-lanz__link:hover .mp-lanz__media img {
        transform: scale(1.05);
    }
}

.mp-lanz__sector {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* `base` y no `sm`, por el ojo medio del Cormorant (ver hero): a `sm` el
   nombre del producto se leía más pequeño que el sector en palo seco. */
.mp-lanz__title {
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.25;
    color: var(--text-strong);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.mp-lanz__link:hover .mp-lanz__title {
    color: var(--link-hover);
}

.mp-lanz__marca {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--text-dim);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Llamada final: misma columna y toda la altura de la fila (la celda del grid
   se estira a la ficha más alta). Sin proporción fija: en móvil el texto no
   cabría en un cuadrado. */
.mp-lanz__cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    box-sizing: border-box;
    height: 100%;
    padding: var(--space-s);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    background: var(--surface-accent);
    color: var(--text-body);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.mp-lanz__cta:hover {
    border-style: solid;
}

.mp-lanz__cta-title {
    font-family: var(--font-family-serif);
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    color: var(--link);
}

.mp-lanz__cta-text {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

.mp-lanz__cta-mail {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-strong);
    /* Corta tras la @ (<wbr> en el markup); anywhere solo si ni así cabe. */
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .mp-lanz__media img {
        transition: none;
    }

    .mp-lanz__link:hover .mp-lanz__media img {
        transform: none;
    }
}