/*
 * Blog v1 y Prensa v1 (TASK-0004): la portada del blog (home.php), un tema (category.php), un
 * artículo (single.php) y la página de Prensa (category-prensa.php). Se carga sólo en esas vistas
 * (inc/blog.php), después de v4.css, del que usa el encabezado, el pie, el botón oscuro, los
 * chips de temas, los títulos de sección y las entradas (data-ma4-rv y data-ma4-group).
 * Referencias: https://preview.kelgu.com/marthaalles/blog/v1/ y …/prensa/v1/
 *
 * Sólo usa variables de tokens.css (ningún color escrito). Las clases propias llevan el prefijo
 * «ma4b-». Lo propio del blog es el índice de temas, compuesto como el índice de un libro, y la
 * columna de lectura del artículo; lo propio de Prensa, cada nota como un recorte con el nombre
 * del medio en Newsreader itálica sobre un filete doble. Las transiciones de respuesta van dentro
 * de prefers-reduced-motion: no-preference; nada se oculta sin script.
 */

/* ------------------------------------------------------------------------------------------
 * Base: como main.ma4-home (GeneratePress pone .site-content en flex y style.css baja todo
 * <main> 26 px y les da fondo blanco a los archivos y los artículos).
 * --------------------------------------------------------------------------------------- */

.ma4b-page .site-content { display: block !important; background: var(--bg) !important; }
main.ma4b { display: block; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0 !important; padding: 0; font-family: var(--font-text); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.6; }
:where(.ma4b) a { color: var(--accent-strong); }
:where(.ma4b) a:hover { color: var(--ink); }
:where(.ma4b) :is(h1, h2, h3, p, ol, ul, li, figure) { margin: 0; padding: 0; }
:where(.ma4b) *, :where(.ma4b) *::before, :where(.ma4b) *::after { box-sizing: border-box; }
.ma4b-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ma4b-section { padding: 96px 0; }
.ma4b-section--tight { padding-top: 24px; }
.ma4b-h1 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(48px, 6.4vw, 92px); line-height: .98; letter-spacing: -.028em; text-wrap: balance; color: var(--ink); }
.ma4b-lead { max-width: 34em; font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.ma4b-count { font-size: 15px; color: var(--ink-mute); }
.ma4b-empty { color: var(--ink-soft); }
.ma4-head p { margin: 0; }

/* Encabezado de la portada, de un tema y de Prensa. */
.ma4b-intro { padding: 72px 0 48px; }
.ma4b-intro .ma4-wrap { display: flex; flex-direction: column; gap: 22px; }
.ma4b .ma4-topics a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Migas: dónde está la página dentro del blog. */
.ma4b-crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; font-size: 14px; color: var(--ink-mute); }
.ma4b-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line); }
.ma4b-crumbs a { color: var(--ink-mute); text-decoration: none; padding: 6px 0; }
.ma4b-crumbs a:hover { color: var(--accent-strong); }

.ma4b :is(.ma4b-crumbs a, .ma4b-entry a, .ma4b-ix-link, .ma4b-ix-subs a, .ma4b-tag, .ma4b-pager a, .ma4b-feature-body h2 a, .ma4b-clip-title a, .ma4b-press-title a, .ma4b-out, .ma4-more, .ma4b-prose a):focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* ------------------------------------------------------------------------------------------
 * Portada: destacado, lista e índice
 * --------------------------------------------------------------------------------------- */

/* El artículo más reciente, con su imagen destacada (o sólo el texto si no tiene). */
.ma4b-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.ma4b-feature--text { grid-template-columns: minmax(0, 1fr); }
.ma4b-feature-media { position: relative; display: block; min-height: 380px; overflow: hidden; background: var(--bg-lilac); }
.ma4b-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.ma4b-feature-body { display: flex; flex-direction: column; gap: 18px; padding: 48px; }
.ma4b-feature--text .ma4b-feature-body { max-width: 52em; }
.ma4b-feature-body h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(30px, 2.9vw, 42px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.ma4b-feature-body h2 a { color: var(--ink); text-decoration: none; }
.ma4b-feature-body h2 a:hover { color: var(--accent-strong); }
.ma4b-feature-body p { color: var(--ink-soft); }
.ma4b-feature-body .ma4-btn-dark { align-self: flex-start; height: 46px; margin-top: auto; }

/* La lista de artículos y, al costado, el índice de temas. */
.ma4b-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: start; }
.ma4b-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 8px; }

/* Lista: la de los últimos artículos de la home, con el comienzo del texto. */
.ma4b-list { list-style: none; display: flex; flex-direction: column; }
.ma4b-entry { position: relative; border-top: 1px solid var(--line-soft); padding: 26px 0; }
.ma4b-entry:last-child { border-bottom: 1px solid var(--line-soft); }
.ma4b-entry::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent-strong); transform: scaleX(0); transform-origin: left center; }
.ma4b-entry:hover::before, .ma4b-entry:focus-within::before { transform: scaleX(1); }
.ma4b-entry a { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.ma4b-title { display: block; font-weight: var(--weight-semibold); font-size: 21px; line-height: 1.3; letter-spacing: -.016em; text-wrap: pretty; }
.ma4b-entry a:hover .ma4b-title, .ma4b-entry a:focus-visible .ma4b-title { color: var(--accent-strong); transform: translateX(6px); }
.ma4b-text { display: block; max-width: 40em; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.ma4b-read { display: inline-block; margin-top: 2px; font-size: 15px; font-weight: var(--weight-semibold); color: var(--accent-strong); }

/* En un tema, la fecha va en su propia columna, como en un registro. */
.ma4b-list--dated .ma4b-entry a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 28px; }
.ma4b-list--dated .ma4b-entry time { grid-row: 1 / span 4; padding-top: 3px; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 19px; line-height: 1.2; color: var(--ink-mute); font-variant-numeric: lining-nums; }

/* Índice de temas: nombre, puntos guía hasta el número de artículos y, debajo, de qué trata.
   «La mirada de Martha» va al final, con sus subtemas en un índice menor. */
.ma4b-index { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 104px); display: flex; flex-direction: column; gap: 6px; }
.ma4b-index h2 { margin-bottom: 6px; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 28px; line-height: 1.1; letter-spacing: -.012em; color: var(--ink); }
.ma4b-index ol { list-style: none; }
.ma4b-index > ol > li { border-top: 1px solid var(--line-soft); }
.ma4b-index > ol > li:last-child { border-bottom: 1px solid var(--line-soft); }
.ma4b-ix-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; color: var(--ink); text-decoration: none; }
:where(.ma4b) .ma4b-ix-link { color: var(--ink); }
.ma4b-ix-row { display: flex; align-items: baseline; gap: 10px; }
.ma4b-ix-name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 21px; line-height: 1.2; letter-spacing: -.008em; }
.ma4b-ix-row::after { content: ""; order: 1; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.ma4b-ix-n { order: 2; font-family: var(--font-display); font-size: 19px; color: var(--ink-mute); font-variant-numeric: lining-nums tabular-nums; }
.ma4b-ix-desc { font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.ma4b-ix-link:hover .ma4b-ix-name, .ma4b-ix-link:focus-visible .ma4b-ix-name, .ma4b-ix-link[aria-current="page"] .ma4b-ix-name { color: var(--accent-strong); }
.ma4b-ix-legacy .ma4b-ix-name { font-size: 19px; }
.ma4b-ix-legacy .ma4b-ix-row::after { display: none; }
.ma4b-ix-subs { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-left: 2px; padding: 0 0 16px 18px; border-left: 1px solid var(--line); }
.ma4b-ix-subs a { display: inline-block; padding: 6px 0; font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.ma4b-ix-subs a:hover, .ma4b-ix-subs a[aria-current="page"] { color: var(--accent-strong); }

/* Paginación: la de WordPress (paginate_links) con los pasos a los costados. */
.ma4b-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.ma4b-pager-pages { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.ma4b-pager-pages a, .ma4b-pager-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; font-family: var(--font-display); font-size: 19px; color: var(--ink); text-decoration: none; font-variant-numeric: lining-nums; }
.ma4b-pager-pages a:hover { background: var(--surface); color: var(--accent-strong); }
.ma4b-pager-pages [aria-current="page"] { background: var(--ink); color: var(--surface); }
.ma4b-pager-step { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink); text-decoration: none; }
:where(.ma4b) a.ma4b-pager-step { color: var(--ink); }
a.ma4b-pager-step:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.ma4b-pager-step[aria-disabled="true"] { color: var(--ink-mute); opacity: .55; }
.ma4b-pager-of { width: 100%; text-align: center; font-size: 14px; color: var(--ink-mute); }

/* ------------------------------------------------------------------------------------------
 * Artículo
 * --------------------------------------------------------------------------------------- */

.ma4b-col { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.ma4b-post-head { padding: 64px 0 40px; }
.ma4b-post-head .ma4b-col { display: flex; flex-direction: column; gap: 22px; }
.ma4b-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; color: var(--ink-mute); }
.ma4b-tag { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--accent-strong); color: var(--accent-strong); font-size: 14px; font-weight: var(--weight-semibold); text-decoration: none; }
:where(.ma4b) .ma4b-tag:hover { background: var(--accent-strong); color: var(--surface); }
.ma4b-post-outlet { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium); font-size: 19px; color: var(--ink); }
.ma4b-post-h1 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.026em; text-wrap: balance; color: var(--ink); }
.ma4b-post-img { max-width: 760px; margin: 0 auto 56px; padding: 0 24px; }
.ma4b-post-img img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; box-shadow: var(--shadow-cover); }
.ma4b-post-img figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-mute); text-align: center; }
.ma4b-post-img figcaption a { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ma4b-post-img figcaption a:hover { color: var(--ink); }

/* Columna de lectura: Inter a 19 px y 60ch de ancho (el «0» es más ancho que la letra media: unos
   70 caracteres por línea, como la maqueta), alineada con el título. */
.ma4b-prose { box-sizing: content-box; max-width: 60ch; margin: 0 auto; padding: 0 24px; font-size: 19px; line-height: 1.75; color: var(--ink); }
.ma4b-prose > * { margin: 0 0 1.15em; }
.ma4b-prose p { text-wrap: pretty; }
.ma4b-prose strong, .ma4b-prose b { font-weight: var(--weight-semibold); }
.ma4b-prose a { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ma4b-prose a:hover { color: var(--ink); }
.ma4b-prose :is(ul, ol) { padding-left: 1.3em; }
.ma4b-prose li { margin: 0 0 .5em; }
.ma4b-prose li::marker { color: var(--accent-strong); }
.ma4b-prose img { max-width: 100%; height: auto; border-radius: 4px; }
.ma4b-prose figure { max-width: 100%; }
.ma4b-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-mute); text-align: center; }
.ma4b-prose hr { width: 96px; margin: 56px auto; border: 0; border-top: 1px solid var(--line); }
.ma4b-prose iframe, .ma4b-prose video { max-width: 100%; }

/* Títulos del contenido: h2 en Newsreader, como los títulos de sección; h3 y h4 en Inter. */
.ma4b-prose :is(h2, h3, h4) { color: var(--ink); text-wrap: balance; text-transform: none; }
.ma4b-prose h2 { margin: 2.2em 0 .6em; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(28px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.016em; }
.ma4b-prose h3 { margin: 1.9em 0 .5em; font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: 22px; line-height: 1.3; letter-spacing: -.014em; }
.ma4b-prose h4 { margin: 1.6em 0 .4em; font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: 19px; line-height: 1.35; }

/* Citas (bloque Cita y Cita destacada): el tratamiento de la cita de la home, con las comillas
   doradas encima, Newsreader en cursiva y centrada, un poco más ancha que el texto. Las comillas
   son una máscara pintada con --ornament. */
main.ma4b .ma4b-prose blockquote, main.ma4b .ma4b-prose .wp-block-pullquote { position: relative; margin: 56px -48px; padding: 44px 0 0; border: 0; background: none; text-align: center; color: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: clamp(27px, 2.6vw, 36px); line-height: 1.24; letter-spacing: -.012em; text-wrap: balance; }
main.ma4b .ma4b-prose blockquote::before, main.ma4b .ma4b-prose .wp-block-pullquote::before { content: ""; position: absolute; top: 0; left: 50%; width: 34px; height: 28px; margin-left: -17px; background: var(--ornament); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath d='M0 36V20C0 9 6 2 17 0l2 5c-6 2-9 6-9 12h8v19zm25 0V20c0-11 6-18 17-20l2 5c-6 2-9 6-9 12h8v19z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath d='M0 36V20C0 9 6 2 17 0l2 5c-6 2-9 6-9 12h8v19zm25 0V20c0-11 6-18 17-20l2 5c-6 2-9 6-9 12h8v19z'/%3E%3C/svg%3E") center / contain no-repeat; }
main.ma4b .ma4b-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; font-size: inherit; }
main.ma4b .ma4b-prose .wp-block-pullquote blockquote::before { display: none; }
main.ma4b .ma4b-prose blockquote p { margin: 0 0 .5em; font-size: inherit; }
main.ma4b .ma4b-prose blockquote p:last-of-type { margin-bottom: 0; }
main.ma4b .ma4b-prose :is(blockquote, .wp-block-pullquote) cite { display: block; margin-top: 16px; font-family: var(--font-text); font-style: normal; font-size: 15px; letter-spacing: 0; color: var(--ink-mute); }

/* Caja de autora. */
.ma4b-author { box-sizing: content-box; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 34em; margin: 72px auto 0; padding: 32px; border-radius: 20px; background: var(--bg-lilac); }
.ma4b-author--text { grid-template-columns: minmax(0, 1fr); }
.ma4b-author img { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 50%; background: var(--surface); }
.ma4b-author-text { display: flex; flex-direction: column; gap: 6px; }
.ma4b-author-name { font-weight: var(--weight-semibold); font-size: 20px; letter-spacing: -.014em; }
.ma4b-author-text p:not(.ma4b-author-name) { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.ma4b-author .ma4-more { align-self: flex-start; padding: 6px 0 0; }

/* Seguir leyendo. */
.ma4b-next { margin-top: 96px; background: var(--surface); }
.ma4b-next .ma4-wrap { display: flex; flex-direction: column; gap: 28px; }
.ma4b-list--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 56px; border-bottom: 1px solid var(--line-soft); }
.ma4b-list--cols .ma4b-entry:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------------------------------
 * Prensa: cada nota como un recorte (como la sección Prensa de la home)
 * --------------------------------------------------------------------------------------- */

.ma4b-press-date { font-size: 14px; color: var(--ink-mute); }
.ma4b-clip-outlet, .ma4b-press-outlet { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-medium); font-variation-settings: "opsz" 48; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.ma4b-out { align-self: flex-start; padding: 8px 0; font-size: 15px; font-weight: var(--weight-semibold); text-decoration: none; }
:where(.ma4b) .ma4b-out:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* La nota más reciente, con su imagen destacada (o sólo el texto si no tiene). */
.ma4b-lead-sec { padding: 0 0 24px; }
/* main.ma4b delante: style.css les da relleno y borde a los <article> de las categorías y tamaño
   a sus h2. */
main.ma4b .ma4b-clip { padding: 0; border-bottom: 0; }
.ma4b-clip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--surface); border-top: 3px double var(--ink); box-shadow: var(--shadow-card); }
.ma4b-clip--text { grid-template-columns: minmax(0, 1fr); }
.ma4b-clip-media { position: relative; display: block; min-height: 420px; background: var(--bg-lilac); }
.ma4b-clip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.ma4b-clip-body { display: flex; flex-direction: column; gap: 16px; padding: 40px 48px 44px; }
.ma4b-clip-outlet { padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: clamp(34px, 3.2vw, 46px); }
main.ma4b .ma4b-clip-title { margin: 6px 0 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.ma4b-clip-title a { color: var(--ink); text-decoration: none; }
.ma4b-clip-title a:hover { color: var(--accent-strong); }
.ma4b-clip-text { max-width: 36em; color: var(--ink-soft); }
.ma4b-clip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: auto; padding-top: 8px; }
.ma4b-clip-actions .ma4-btn-dark { height: 46px; }

/* Las demás notas por año: el año queda fijo al costado mientras se recorre su lista. */
.ma4b-archive .ma4-wrap { display: flex; flex-direction: column; gap: 72px; }
.ma4b-year { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 48px; align-items: start; }
.ma4b-year-num { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 104px); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; color: var(--accent-strong); }
.ma4b-press-list { list-style: none; border-top: 3px double var(--ink); }
.ma4b-press-row { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px 40px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
.ma4b-press-row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent-strong); transform: scaleX(0); transform-origin: left center; }
.ma4b-press-row:hover::before, .ma4b-press-row:focus-within::before { transform: scaleX(1); }
.ma4b-press-src { display: flex; flex-direction: column; gap: 6px; }
/* La imagen destacada de la nota (TASK-0006), arriba del medio; sin ella, la columna queda como
   antes. */
.ma4b-press-media { display: block; aspect-ratio: 3 / 2; margin-bottom: 10px; overflow: hidden; background: var(--bg-lilac); }
.ma4b-press-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ma4b-press-outlet { font-size: 27px; }
.ma4b-press-body { display: flex; flex-direction: column; gap: 10px; }
.ma4b-press-title { font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: 21px; line-height: 1.3; letter-spacing: -.016em; text-wrap: pretty; }
.ma4b-press-title a { color: var(--ink); text-decoration: none; }
.ma4b-press-title a:hover { color: var(--accent-strong); }
.ma4b-press-text { max-width: 40em; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* ------------------------------------------------------------------------------------------
 * Tablet (≤ 1100 px): el índice de temas y el año pasan debajo / encima de su lista.
 * --------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ma4b-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .ma4b-index { position: static; }
  main.ma4b .ma4b-prose blockquote, main.ma4b .ma4b-prose .wp-block-pullquote { margin: 48px 0; }
  .ma4b-year { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ma4b-year-num { position: static; }
}
@media (max-width: 900px) {
  .ma4b-clip { grid-template-columns: minmax(0, 1fr); }
  .ma4b-clip-media { min-height: 0; aspect-ratio: 9 / 5; }
}

/* ------------------------------------------------------------------------------------------
 * Celular (≤ 760 px)
 * --------------------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .ma4b-section { padding: 72px 0; }
  .ma4b-section--tight { padding-top: 16px; }
  .ma4b-intro { padding: 48px 0 32px; }
  .ma4b-lead { font-size: 17px; }
  .ma4b-feature { grid-template-columns: minmax(0, 1fr); }
  .ma4b-feature-media { min-height: 220px; }
  .ma4b-feature-body { padding: 28px; }
  .ma4b-list--dated .ma4b-entry a { grid-template-columns: minmax(0, 1fr); }
  .ma4b-list--dated .ma4b-entry time { grid-row: auto; padding: 0; font-size: 17px; }
  .ma4b-title { font-size: 19px; }
  .ma4b-pager { justify-content: center; }
  .ma4b-post-head { padding: 40px 0 28px; }
  .ma4b-post-img { margin-bottom: 40px; }
  .ma4b-prose { font-size: 18px; }
  main.ma4b .ma4b-prose blockquote, main.ma4b .ma4b-prose .wp-block-pullquote { margin: 40px 0; }
  .ma4b-author { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 56px 24px 0; padding: 24px; }
  .ma4b-author img { width: 88px; height: 88px; }
  .ma4b-next { margin-top: 72px; }
  .ma4b-clip-body { padding: 28px 24px 32px; }
  .ma4b-press-row { grid-template-columns: minmax(0, 1fr); padding: 24px 0 26px; }
  .ma4b-press-outlet { font-size: 24px; }
  .ma4b-press-title { font-size: 19px; }
}

/* ------------------------------------------------------------------------------------------
 * Movimiento: sólo respuestas a la persona (hover y foco). Las entradas son las de v4.css.
 * --------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .ma4b-entry::before, .ma4b-press-row::before { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
  .ma4b-title { transition: color .2s, transform .35s cubic-bezier(.2, .7, .2, 1); }
  .ma4b-tag, .ma4b-pager-step, .ma4b-pager-pages a, .ma4b-ix-name, .ma4b-crumbs a, .ma4b-ix-subs a, .ma4b-press-title a, .ma4b-clip-title a, .ma4b-feature-body h2 a { transition: color .2s, background .2s, border-color .2s; }
  .ma4b-feature-media img, .ma4b-clip-media img, .ma4b-press-media img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .ma4b-feature:hover .ma4b-feature-media img, .ma4b-feature:focus-within .ma4b-feature-media img, .ma4b-press-row:hover .ma4b-press-media img, .ma4b-press-row:focus-within .ma4b-press-media img { transform: scale(1.03); }
}