/*
Theme Name: El Solidario
Theme URI: https://elsolidario.example
Author: El Solidario
Author URI: https://elsolidario.example
Description: Tema de bloques nativo (Full Site Editing) para El Solidario, periódico digital. Portada replicando el diseño oficial: color principal #047084, titulares en Lora, texto y menús en Public Sans.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: el-solidario
Tags: news, block-theme, full-site-editing, one-column
*/

/* =========================================================
   El Solidario — estilos de portada y estructura del sitio
   ========================================================= */

* { box-sizing: border-box; }

/* .els-internacional and .els-editorial-section break out to 100vw to bleed
   past .els-main's max-width. 100vw is measured from the viewport's outer
   edge (it includes the scrollbar gutter on platforms with a classic,
   space-reserving scrollbar), so on those it's very slightly wider than the
   page's actual content width — enough to draw a horizontal scrollbar of
   its own. overflow-x:hidden on body keeps that from ever showing without
   affecting normal vertical scrolling. */
body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------
   WordPress core gives every group block "is-layout-flow" / "is-layout-
   constrained" support, which adds `margin-block-start: 24px` to every
   child after the first — meant for vertically stacked content. Several
   of our containers below arrange their (block-level) children side by
   side via flex/grid instead, so that margin only pushes the 2nd/3rd
   column down and breaks row alignment. Core writes that rule as
   `:root :where(.is-layout-flow) > *`, and wraps the selector in :where()
   specifically so it carries zero specificity and is trivial to override —
   so a plain two-class selector (already present on the element: it always
   carries both "wp-block-group" and our own class) reliably wins without
   needing !important or fighting stylesheet load order. Column spacing is
   handled entirely by each container's own `gap` instead. */
.wp-block-group.els-hero-row > *,
.wp-block-group.els-actualidad-row > *,
.wp-block-group.els-editorial-grid > *,
.wp-block-group.els-deportes-blogs > *,
.wp-block-group.els-masthead__inner > *,
.wp-block-group.els-nav__inner > *,
.wp-block-group.els-directo__inner > *,
.wp-block-group.els-footer__top > * {
	margin-block-start: 0;
}

/* The same core behavior also reaches two levels we hadn't neutralized yet:
   (1) .els-main itself is a flow-layout group, so EVERY top-level section
   on the front page (hero, actualidad row, each .els-section, internacional,
   editorial-section, deportes-blogs) gets an unwanted extra margin-top.
   We only neutralize margin-block-*start* here — NOT margin-block-end —
   because core's `margin-block-end: 0` on those same children is a
   (0,1,0)-specificity rule that TIES with a plain `.els-deportes-blogs{...}`
   selector, and ties are order-dependent; we don't fight that tie here,
   we resolve it at each section's own selector below by matching this
   same two-class specificity, so each section's own explicit margin-bottom
   (where it sets one) reliably wins instead. (2) header/main/footer are
   themselves the direct children of the theme's root `.wp-site-blocks`
   wrapper, which carries the equivalent rule for the top-level template —
   that's why the footer had a mystery 24px margin-top of its own; core
   writes *that* rule fully wrapped in :where() (zero specificity), so a
   single-class override is already enough to win it outright. */
.wp-block-group.els-main > * {
	margin-block-start: 0;
}
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.els-icon-clock { flex-shrink: 0; vertical-align: -2px; }

/* ---------- Utility bar ---------- */
.els-topbar {
	background: var(--wp--preset--color--primary);
	color: #e9f3f4;
}
.els-topbar__inner {
	max-width: 1220px;
	margin: 0 auto;
	padding: 10px 40px;
	display: flex;
	align-items: center;
	gap: 22px;
}
.els-topbar__label {
	display: block;
	margin: 0;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .1em;
	white-space: nowrap;
	flex-shrink: 0;
	color: #fff;
	text-transform: uppercase;
}
.els-topbar__divider {
	display: block;
	width: 1px;
	height: 15px;
	margin: 0;
	background: rgba(255,255,255,.5);
	flex-shrink: 0;
}
.els-topbar__ticker {
	flex: 1;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	overflow: hidden;
	white-space: nowrap;
	font-size: 12px;
	line-height: 1;
}
.els-topbar__ticker a {
	white-space: nowrap;
	font-weight: 600;
	color: #fff;
	transition: color .18s ease;
}
.els-topbar__ticker a:hover { color: #bfe6ec; }
/* .els-topbar__nav-btn (the ‹ › ticker arrows, header.html) has no
   full-viewport rule of its own — only the mobile media query below styles
   it — so without this base default it was rendering as an unstyled
   native <button> (white box, visible border) on desktop, where the
   ticker never overflows its row and the arrows serve no purpose at all. */
.els-topbar__nav-btn { display: none; }

/* ---------- Masthead ---------- */
/* .els-masthead__inner's block markup must use layout:"default", never
   "constrained" — found live via getComputedStyle + a forced !important
   test that proved justify-self had zero effect on child position despite
   being the winning declaration. Root cause: WP core's global styles inject
   `.is-layout-constrained > :where(...) { margin-left/right: auto
   !important; }` for every direct child of a "constrained" group (its
   normal job is centering a single content column) — auto margins beat
   justify-self outright per the CSS box-alignment spec, regardless of
   selector specificity, so date/logo/search all centered inside their own
   grid track instead of sitting at the track edges. Same reasoning as
   every other custom-grid container in this file (.els-cat-magazine,
   .els-author-magazine, etc.) already using "default" — this was the one
   inconsistent block using "constrained" for a hand-built edge-to-edge
   grid instead of a real single-column content flow. */
.els-masthead { background: var(--wp--preset--color--background); }
.els-masthead__inner {
	max-width: 1220px;
	margin: 0 auto;
	padding: 40px 40px 34px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}
.els-masthead__date {
	justify-self: start;
	display: block;
	margin: 0;
	font-size: 12.5px;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}
.els-masthead__logo { justify-self: center; }
.els-masthead__logo img { height: auto; width: 100%; display: block; }
/* .els-masthead__search-trigger: a plain <div> wrapping input + two real
   <button>s (clear, submit) — was a <label> wrapping a decorative icon +
   input, which meant the only way to actually run a search was pressing
   Enter (the icon did nothing on click). Icon now sits LAST (after the
   input) instead of first, per explicit request; the placeholder text
   reads from the start of the box since nothing precedes it anymore. At
   ≤960px (below) the icon no longer expands anything inline at all —
   theme.js sends the tap straight to the search results page instead, per
   explicit request that no box should open inside the header on mobile.
   The box styling that used to live on .els-masthead__search (the form)
   stays on the trigger div so desktop's rendered output is unchanged. */
.els-masthead__search { justify-self: end; }
.els-masthead__search-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--wp--preset--color--border-light);
	/* Same background as .els-masthead itself (not a near-white #fbfcfc,
	   which read as a lighter, separate box against the masthead's actual
	   background) — only the border should read as a shape here. */
	background: var(--wp--preset--color--background);
	padding: 9px 15px;
	width: 260px;
}
.els-masthead__search input {
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13.5px;
	width: 100%;
	color: var(--wp--preset--color--ink);
}
/* type="search" ships its own native clear "×" in Chrome/Safari — without
   hiding it, it rendered right next to this custom one, two clear buttons
   side by side doing the same thing. */
.els-masthead__search input::-webkit-search-cancel-button { display: none; }
/* Clear (×): hidden by default, shown only once there's text to clear —
   :placeholder-shown is false exactly when the input has a value, so this
   needs no JS-toggled class, just theme.js blanking the value on click. */
.els-masthead__search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 2px;
	margin: 0;
	color: var(--wp--preset--color--faint);
	cursor: pointer;
	flex-shrink: 0;
}
.els-masthead__search input:not(:placeholder-shown) ~ .els-masthead__search-clear {
	display: inline-flex;
}
.els-masthead__search-clear:hover { color: var(--wp--preset--color--muted); }
.els-masthead__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

/* ---------- Nav ---------- */
.els-nav {
	position: relative;
	background: var(--wp--preset--color--background);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.els-nav__inner {
	max-width: 1220px;
	margin: 0 auto;
	padding: 12px 40px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.els-nav__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 3.5px;
	width: 20px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}
/* The masthead's own copy of this button (header.html) is mobile-only —
   see the @media block below, which is the only place that turns this
   back on. */
.els-masthead__burger { display: none; }
.els-nav__burger span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
}
.els-nav__divider {
	width: 1px;
	height: 22px;
	background: var(--wp--preset--color--border);
	flex-shrink: 0;
}
.els-nav .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	flex: 1;
	min-width: 0;
}
/* Found via real inspection at a genuinely narrow viewport (this
   environment's tooling couldn't produce one before, so this was never
   actually tested until now): core/navigation, given this block's own
   flexWrap:"nowrap" attribute, ships WordPress core's OWN responsive
   overlay markup regardless of viewport — a second hamburger-open button
   (.wp-block-navigation__responsive-container-open) plus every single one
   of the 12 real category links living inside a
   .wp-block-navigation__responsive-container that's display:none until
   WP's own core script toggles .is-menu-open on it. Core's own CSS shows
   that container inline above ~600-782px (never caught before, since nothing
   in this project had ever rendered below that) and hides it below — so
   at real mobile widths the categories row was rendering completely empty
   next to a second, unwanted menu icon. This forces the real container to
   always render inline (feeding the overflow-x:auto scroll strip already
   set up below) and removes core's own duplicate open button, leaving
   .els-nav__burger as the page's only menu trigger at every width. */
.els-nav .wp-block-navigation__responsive-container {
	display: flex !important;
	position: static !important;
	inset: auto !important;
	background: transparent !important;
	width: 100%;
}
.els-nav .wp-block-navigation__responsive-container-open,
.els-nav .wp-block-navigation__responsive-container-close {
	display: none !important;
}
.els-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	gap: 20px;
	overflow-x: auto;
	scrollbar-width: none;
}
.els-nav .wp-block-navigation__container::-webkit-scrollbar { display: none; }
.els-nav .wp-block-navigation-item { flex-shrink: 0; }
.els-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 0;
}
.els-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }

/* ---------- Directo / breaking bar ---------- */
.els-directo { background: var(--wp--preset--color--background); border-bottom: 1px solid var(--wp--preset--color--border); }
.els-directo__inner {
	max-width: 1220px;
	margin: 0 auto;
	padding: 11px 40px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.els-directo__label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 13px;
	border-radius: 6px;
	background: #c0392b;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	flex-shrink: 0;
	white-space: nowrap;
}
.els-directo__dot {
	width: 8px; height: 8px; border-radius: 50%; background: #fff;
	animation: elsBlink 1.1s ease-in-out infinite; flex-shrink: 0;
}
@keyframes elsBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.els-directo__headline-wrap {
	position: relative;
	flex: 1; min-width: 0;
	align-self: stretch;
}
.els-directo__headline-item {
	position: absolute; left: 0; right: 0; top: 50%;
	transform: translateY(-50%);
	display: block;
	font-weight: 600; font-size: 14px; line-height: 1.25; letter-spacing: -.005em;
	color: var(--wp--preset--color--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
.els-directo__headline-item.is-active { opacity: 1; pointer-events: auto; }
.els-directo__dots {
	display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.els-directo__dot-item {
	width: 6px; height: 6px; border-radius: 999px;
	background: #c9d3d4;
	transition: all .3s ease;
}
.els-directo__dot-item.is-active { width: 18px; background: #c0392b; }

/* ---------- Main content wrapper ---------- */
.els-main { max-width: 1220px; margin: 0 auto; padding: 0 40px; }

/* ---------- Generic section head ---------- */
.els-section { padding-top: 60px; }
.els-section-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	padding-bottom: 10px;
	margin-bottom: 22px;
}
.els-section-head::before {
	content: "";
	position: absolute; left: 0; bottom: -3px;
	width: 58px; height: 4px;
	background: var(--wp--preset--color--primary);
}
.els-section-head h3 { margin: 0; font-size: 22px; }
/* The section title itself is the only "go to this category" entry point
   now (the separate "Ver sección completa" link — almost all "#", one a
   bare "/actualidad" with no /category/ prefix — was removed per explicit
   request). The hover color swap (ink -> primary) comes for free from
   theme.json's global link ":hover" style — this rule only cancels the
   underline a previous round of this file added on top of it, which
   wasn't wanted. */
.els-section-head h3 a:hover,
.els-blogs__head h3 a:hover { text-decoration: none; }
.els-section-head__title-group { display: flex; align-items: center; gap: 11px; }
.els-section-head__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--primary); flex-shrink: 0; }

/* ---------- Avatars ---------- */
.els-avatar {
	border-radius: 50%;
	background: var(--wp--preset--color--accent-tint);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700; color: var(--wp--preset--color--primary);
	position: relative; overflow: hidden; flex-shrink: 0;
}
.els-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.els-avatar--xl { width: 34px; height: 34px; font-size: 12px; }
.els-avatar--lg { width: 30px; height: 30px; font-size: 12px; }
.els-avatar--md { width: 26px; height: 26px; font-size: 10px; }
.els-avatar--grid { width: 24px; height: 24px; font-size: 9px; }
.els-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.els-avatar--xs { width: 20px; height: 20px; font-size: 8px; }

.els-byline {
	margin-top: 11px;
	display: flex; align-items: center; gap: 8px;
}
.els-byline__meta {
	font-size: 12px; color: var(--wp--preset--color--muted);
	display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
	min-width: 0; overflow: hidden;
}
/* text-overflow:ellipsis was already declared here but never actually
   activated — it only engages once white-space is taken out of its
   normal/wrapping default, which nothing in this rule set did. Harmless
   everywhere byline columns were wide enough for author+date to fit
   (every section except Actualidad, whose 3 cards sit next to the "Lo más
   leído" sidebar and so get less width than a standalone 3-card grid) —
   but with real author names/dates now rendering there instead of the
   mockup's fixed short set, "Vincenzo Gambaretto" and "31 JUL 2026" were
   wide enough to wrap onto a second line inside their own element. */
.els-byline__meta > * { white-space: nowrap; }
.els-byline__meta a,
.els-byline__meta span:not(.els-byline__sep) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.els-byline__meta a { color: var(--wp--preset--color--ink); font-weight: 600; }
.els-byline__meta a:hover { color: var(--wp--preset--color--primary); }
.els-byline__sep { color: var(--wp--preset--color--faint); }
.els-byline__dot { color: #c3cdce; }
.els-byline__read { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Hero row ---------- */
.els-hero-row {
	display: grid; grid-template-columns: 1fr 360px; align-items: stretch;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Explicit request, all viewports: photo first, then title directly
   above its own excerpt, author/date last — pure CSS flex `order` so the
   PHP/DOM (cat, title, photo, standfirst, byline) never has to change. */
.els-hero-main { padding: 26px 32px 26px 0; border-right: 1px solid var(--wp--preset--color--border); display: flex; flex-direction: column; }
.els-hero-photo { order: 1; }
.els-hero-cat { order: 2; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--primary); margin-top: 14px; }
.els-hero-title { order: 3; margin: 8px 0 0 !important; font-size: 38px; line-height: 1.12; }
.els-hero-title a:hover { color: var(--wp--preset--color--primary); }
.els-hero-standfirst { order: 4; }
.els-hero-main > .els-byline { order: 5; }
/* Now an <a> (was a plain <div>) so the photo itself links to the article,
   same destination as the headline — display:block is needed explicitly
   since anchors default to inline, unlike the div this replaced. */
.els-hero-photo { display: block; margin-top: 0; position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--wp--preset--color--surface); }
.els-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.els-hero-standfirst { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--body-text); max-width: 64ch; }

.els-hero-side { display: flex; flex-direction: column; height: 100%; }
.els-side-story {
	display: flex; flex-direction: column; justify-content: center;
	flex: 1; min-height: 0; padding: 16px 0 16px 28px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.els-side-story:first-child { border-top: none; }
/* .els-side-story__link wraps only photo/cat/title/standfirst (not the
   byline, so the author name can be its own real link — nesting an <a>
   inside another <a> isn't valid HTML) — display:flex/column reproduces
   the exact same vertical stacking those 4 elements had as direct
   children of the old single big <a>. */
.els-side-story__link { display: flex; flex-direction: column; }
.els-side-photo { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--wp--preset--color--surface); margin-bottom: 7px; }
.els-side-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.els-side-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.els-side-title { margin: 4px 0 0 !important; font-size: 18px; line-height: 1.18; }
.els-side-story__link:hover .els-side-title { color: var(--wp--preset--color--primary); }
.els-side-standfirst {
	margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--wp--preset--color--muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.els-side-story .els-byline { margin-top: 6px; }

/* ---------- Actualidad ---------- */
/* grid-template-columns used to be the bare "1.9fr 1fr", which really
   means minmax(auto,1.9fr) minmax(auto,1fr) — each track's floor is its
   OWN content's min-content width, not its fr share. Confirmed by testing
   live: with the Actualidad byline's white-space:nowrap fix (needed so
   "Vincenzo Gambaretto" + the date don't wrap), the byline's now-unbroken
   text pushed the first track's min-content past its intended ~1.9/2.9
   share, and the second track (Lo más leído) got starved down to its OWN
   min-content instead of the ~1fr it should get — measured 755px/140px
   instead of the intended ~576px/303px. minmax(0, …) removes each
   track's content-based floor entirely, so they always split by the
   stated ratio and long card text truncates via the byline's own
   overflow:hidden/ellipsis instead of stealing width from the sidebar. */
.wp-block-group.els-actualidad-row { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); column-gap: 20px; align-items: stretch; margin-bottom: 34px; padding-top: 36px; }
/* Divider between Actualidad and Lo más leído: a real border on the
   .els-lo-mas-leido column itself, NOT a ::after pseudo-element grid item
   (tried that first — confirmed live that a generated-content grid item
   computes height:0 here even with align-self:stretch explicit, while an
   actual DOM element in the same grid cell stretches correctly, so the
   pseudo-element approach can't reliably span the row's real height no
   matter how it's positioned). A border on this column stretches exactly
   as reliably as the column itself (already proven — see
   .els-lo-mas-leido below), with zero hardcoded left:NN% guesses. Split
   into a 20px grid gap + this 20px padding so the line still lands
   centered in the original 40px gutter, not flush against either side. */
.els-lo-mas-leido { border-left: 1px solid var(--wp--preset--color--border); padding-left: 20px; }
/* minmax(0, 1fr): without it, a track's floor is its own content's
   min-content — the exact mechanism that caused the outer row's fr split
   to blow out above (a card's now-unbroken byline text pushing this whole
   grid past its own <section>'s width, back into Lo más leído's column).
   Same fix, same reason, one level deeper. */
.els-actualidad-cards { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

.els-lo-mas-leido { display: flex; }
.els-lo-mas-leido__box {
	flex: 1; display: flex; flex-direction: column;
}
.els-lo-mas-leido__box .els-section-head { border-bottom-color: var(--wp--preset--color--primary); }
.els-lo-mas-leido__box .els-section-head h3 { color: var(--wp--preset--color--primary); font-size: 22px; }
.els-lo-mas-leido__today { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--wp--preset--color--muted); white-space: nowrap; }
.els-lo-mas-leido__item {
	flex: 1; display: flex; gap: 14px; align-items: center; padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.els-lo-mas-leido__item:first-of-type { border-top: none; }
.els-lo-mas-leido__num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 30px; line-height: .9; color: var(--wp--preset--color--primary); min-width: 26px; }
.els-lo-mas-leido__title { font-family: var(--wp--preset--font-family--heading); font-size: 16px; line-height: 1.22; letter-spacing: -.01em; min-width: 0; }
.els-lo-mas-leido__item:hover .els-lo-mas-leido__title { color: var(--wp--preset--color--primary); }

.els-actualidad-bottom { border-top: 1px solid var(--wp--preset--color--border); padding-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
/* Up to 2 of these 4 teaser cards (els_front_page_bottom4() in
   functions.php) silently drop out when their category has 0 real posts —
   the same "ciencia"/"deportes" gap the 3 hidden sections above already
   handle. Collapse the grid to however many cards actually rendered
   instead of leaving empty trailing columns. */
.els-actualidad-bottom:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.els-actualidad-bottom:has(> :nth-child(2)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.els-actualidad-bottom:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; }

/* ---------- Cards ---------- */
.els-cards-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.els-card { display: flex; flex-direction: column; cursor: pointer; }
/* .els-card-photo is shared: in the plain "3-card grid" sections
   (Política, Sociedad, Economía, Sostenibilidad, Tecnología, Actualidad,
   the destacada-extra row) it's now an <a> in its own right — display:block
   for the same reason as .els-hero-photo above. In Internacional/editorial/
   Deportes it's still a plain <div> nested inside that card's own outer
   <a> (an <a> can't nest inside another <a>), where block was already the
   default — this rule is harmless there either way. */
.els-card-photo { display: block; position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; background: var(--wp--preset--color--surface); margin-bottom: 14px; }
.els-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.els-card-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.els-card-title { margin: 8px 0 0 !important; font-size: 21px; line-height: 1.17; }
.els-card:hover .els-card-title { color: var(--wp--preset--color--primary); }

.els-card--sm .els-card-photo { aspect-ratio: 16/9; margin-bottom: 12px; }
.els-card--sm .els-card-title { font-size: 20px; line-height: 1.2; margin-top: 7px !important; }
.els-card--sm .els-card-cat { font-size: 10px; }

.els-card--act .els-card-photo { aspect-ratio: 3/2; margin-bottom: 13px; }
.els-card--act .els-card-title { font-size: 20px; line-height: 1.16; }

/* ---------- Carousel (Economía / Sostenibilidad / Tecnología) ----------
   Shared by els_front_page_carousel_posts() in functions.php. On desktop
   this is neutralized to `display:contents` so its .els-card slides drop
   straight into the surrounding .els-cards-grid-3 exactly as the old plain
   3-card grid did (no arrows/dots, every slide visible) — only the mobile
   media query turns it into a real one-slide-visible carousel. */
.els-carousel,
.els-carousel__track { display: contents; }
.els-carousel__slide { display: block; }
.els-carousel__controls { display: none; }

/* ---------- Internacional (franja de color a todo el ancho de la ventana) ---------- */
.wp-block-group.els-internacional {
	width: 100vw;
	margin-top: 56px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--wp--preset--color--internacional-bg);
	border-top: 1px solid var(--wp--preset--color--internacional-border);
	border-bottom: 1px solid var(--wp--preset--color--internacional-border);
	padding: 28px 0 30px;
}
.els-internacional__inner { max-width: 1220px; margin: 0 auto; padding: 0 40px; }
.els-internacional .els-section-head { border-bottom-color: var(--wp--preset--color--internacional-heading); margin-bottom: 24px; }
.els-internacional .els-section-head::before { background: var(--wp--preset--color--internacional-accent); }
.els-internacional .els-section-head h3 { color: var(--wp--preset--color--internacional-heading); }
.els-internacional__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.els-internacional__col { display: flex; flex-direction: column; }
.els-internacional__item { display: flex; flex-direction: column; padding-bottom: 16px; border-bottom: 1px solid var(--wp--preset--color--internacional-border); margin-bottom: 16px; }
.els-internacional__item:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.els-internacional__item .els-card-photo,
.els-internacional__main .els-card-photo { background: #dbe6ee; }
.els-internacional__item .els-card-photo { aspect-ratio: 16/9; margin-bottom: 10px; }
.els-internacional__item .els-card-cat { color: var(--wp--preset--color--internacional-accent); font-size: 10.5px; }
.els-internacional__item .els-card-title { font-size: 16px; line-height: 1.18; margin-top: 6px !important; }
.els-internacional__item:hover .els-card-title,
.els-internacional__main:hover .els-card-title { color: var(--wp--preset--color--internacional-accent); }
.els-internacional__item .els-avatar { background: #d4e2ec; color: var(--wp--preset--color--internacional-accent); }
/* __item-link/__main-link wrap only photo/cat/title(/standfirst) — the
   author name sits outside, in its own real link (an <a> can't nest
   inside another <a>) — flex/column reproduces the same vertical stack
   those elements had as direct children of the old single big <a>. */
.els-internacional__item-link,
.els-internacional__main-link { display: flex; flex-direction: column; }

.els-internacional__main { display: flex; flex-direction: column; }
.els-internacional__main .els-card-photo { aspect-ratio: 4/3; margin-bottom: 14px; }
.els-internacional__main .els-card-cat { color: var(--wp--preset--color--internacional-accent); font-size: 11px; }
.els-internacional__main .els-card-title { font-size: 27px; line-height: 1.1; letter-spacing: -.015em; margin-top: 8px !important; }
.els-internacional__main .els-standfirst { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--body-text); }
.els-internacional__main .els-avatar { width: 26px; height: 26px; font-size: 10px; background: #d4e2ec; color: var(--wp--preset--color--internacional-accent); }

/* ---------- Editorial section: Cultura + Ciencia y Salud (fondo compartido a todo el ancho) ---------- */
.wp-block-group.els-editorial-section {
	width: 100vw;
	margin-top: 58px;
	margin-bottom: 8px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--wp--preset--color--cultura-bg);
	border-top: 1px solid var(--wp--preset--color--cultura-border);
	border-bottom: 1px solid var(--wp--preset--color--cultura-border);
	padding: 28px 0 30px;
}
.els-editorial-section__inner { max-width: 1220px; margin: 0 auto; padding: 0 40px; }
.els-editorial-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
/* Divider between Cultura and Ciencia y Salud, centered in the 44px gutter
   of an even 1fr/1fr grid (so simply 50%), spanning the full row height. */
.els-editorial-grid::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: var(--wp--preset--color--border);
}
.els-editorial-col { display: flex; flex-direction: column; }
/* Ciencia y Salud (or, in principle, Cultura) can render as nothing at all
   when its category has 0 real posts — see els_front_page_ciencia_section()
   in functions.php. When that leaves Cultura as the grid's only child, let
   it reclaim the full width instead of sitting alone in the left column,
   and drop the centered divider (it would otherwise cut a lone full-width
   column in half). */
.els-editorial-grid > *:only-child { grid-column: 1 / -1; }
.els-editorial-grid:has(> *:only-child)::after { display: none; }
.els-editorial-section .els-section-head { border-bottom-color: var(--wp--preset--color--cultura-heading); margin-bottom: 20px; }
.els-editorial-section .els-section-head::before { background: var(--wp--preset--color--cultura-accent); width: 52px; }
.els-editorial-section .els-section-head h3 { color: var(--wp--preset--color--cultura-heading); font-size: 22px; }

.els-editorial-lead { display: flex; flex-direction: column; margin-bottom: 22px; }
/* __link wraps only photo/title — the author name sits outside, in its
   own real link (an <a> can't nest inside another <a>). */
.els-editorial-lead__link { display: flex; flex-direction: column; }
.els-editorial-lead .els-card-photo { height: 264px; aspect-ratio: auto; margin-bottom: 13px; background: #d3e4e4; }
/* min-height (3 lines: 22px × 1.15 × 3 ≈ 76px) — Cultura and Ciencia y
   Salud are two independent columns sharing this exact markup, each
   showing a different real headline. Without a floor here, a 2-line
   headline in one column and a 3-line headline in the other left the
   byline and every list item below visibly misaligned between columns
   (confirmed live: a 25px gap between the two columns' byline rows,
   traced to titleHeight 50.6px vs 75.9px) — never a photo-size issue,
   both photos already matched exactly via the fixed height above. Floor,
   not a line-clamp: a real headline should never be truncated with "…"
   just to keep two side-by-side columns lined up; shorter titles simply
   leave blank space below them instead. */
.els-editorial-lead .els-card-title { font-size: 22px; line-height: 1.15; min-height: 76px; }
.els-editorial-lead:hover .els-card-title { color: var(--wp--preset--color--cultura-accent); }
.els-editorial-section .els-avatar { background: #cfe4e6; color: var(--wp--preset--color--cultura-accent); }

.els-editorial-item { display: grid; grid-template-columns: 104px 1fr; gap: 15px; align-items: center; border-top: 1px solid var(--wp--preset--color--cultura-border); padding: 16px 0; }
.els-editorial-item:first-of-type { border-top: none; }
/* Now an <a> (was a plain <div>) so the photo itself links to the
   article — display:block needed explicitly since anchors default to
   inline. Same reasoning for __title-link below. */
.els-editorial-item__photo { display: block; position: relative; width: 104px; height: 70px; overflow: hidden; background: #d3e4e4; }
.els-editorial-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.els-editorial-item__body { align-self: start; }
.els-editorial-item__title-link { display: block; }
.els-editorial-item__title { margin: 0 !important; font-size: 16.5px; line-height: 1.2; }
.els-editorial-item:hover .els-editorial-item__title { color: var(--wp--preset--color--cultura-accent); }
.els-editorial-item .els-byline { margin-top: 7px; }

/* ---------- Deportes + Blogs ---------- */
.wp-block-group.els-deportes-blogs { margin: 58px 0 80px; display: grid; grid-template-columns: 1.9fr 1fr; gap: 40px; align-items: stretch; }
/* Deportes can render as nothing at all when its category has 0 real posts
   — see els_front_page_deportes_section() in functions.php. Let Blogs
   reclaim the full width instead of sitting alone in the narrow 1fr column. */
.wp-block-group.els-deportes-blogs > *:only-child { grid-column: 1 / -1; }
.els-deportes-lead { display: flex; flex-direction: column; padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--border); margin-bottom: 20px; }
/* __link wraps only photo/title — the author name sits outside, in its
   own real link (an <a> can't nest inside another <a>). */
.els-deportes-lead__link { display: flex; flex-direction: column; }
.els-deportes-lead .els-card-photo { aspect-ratio: 3/2; margin-bottom: 14px; }
.els-deportes-lead .els-card-title { font-size: 26px; line-height: 1.1; letter-spacing: -.015em; }
.els-deportes-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.els-deportes-item { display: flex; flex-direction: column; }
.els-deportes-item__title-link { display: block; }
.els-deportes-pair .els-card-photo { aspect-ratio: 16/9; margin-bottom: 11px; }
.els-deportes-pair .els-card-title { font-size: 17px; line-height: 1.18; margin-top: 6px !important; }

.els-blogs {
	background: var(--wp--preset--color--blogs-bg);
	color: var(--wp--preset--color--blogs-text);
	padding: 28px 26px 26px;
	display: flex; flex-direction: column;
}
.els-blogs__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.els-blogs__head-left { display: flex; align-items: center; gap: 10px; }
.els-blogs__head h3 { margin: 0 !important; font-size: 18px; color: #fff; }
.els-blogs__sub { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .02em; color: #9dc0c2; }
.els-blogs__list { display: flex; flex-direction: column; margin-top: 6px; }
.els-blogs__item { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.els-blogs__item:first-child { border-top: 1px solid rgba(255,255,255,.14); }
.els-blogs__photo { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #123842; }
.els-blogs__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.els-blogs__title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 17px; line-height: 1.22; letter-spacing: -.01em; color: #fff; }

/* ---------- Footer ---------- */
.els-footer { background: var(--wp--preset--color--footer-bg); border-top: 1px solid var(--wp--preset--color--border); }
.els-footer__inner { max-width: 1220px; margin: 0 auto; padding: 34px 40px 28px; }
.els-footer__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; }
.els-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.els-footer__brand img { height: 44px; width: auto; display: block; }
.els-footer__tagline { margin: 0; font-family: var(--wp--preset--font-family--heading); font-style: normal; font-size: 19px; color: var(--wp--preset--color--primary); text-align: center; }
.els-footer__social { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.els-footer__social-label { margin: 0; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--primary); align-self: center; }
.els-footer__social-icons { display: flex; gap: 10px; }
/* Resting state: bare icon, no circle — border kept at 1px but transparent
   (rather than removed outright) so the hover state below doesn't shift
   the icon by adding a border where there wasn't one. */
.els-social-icon {
	width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent;
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--primary);
	transition: all .18s ease;
}
.els-social-icon:hover { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }
.els-social-icon svg { display: block; }
.els-footer__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; justify-content: center; padding: 22px 0 24px; }
.els-footer__cats a { font-size: 13.5px; color: var(--wp--preset--color--body-text); transition: color .18s ease; }
.els-footer__cats a:hover { color: var(--wp--preset--color--primary); }
.els-footer__cats span { color: #b5c2c3; font-size: 13px; }
.els-footer__bottom { margin: 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--border); font-size: 12px; color: #7a8587; }

/* ---------- Mobile nav drawer content (search / social inside overlay) ---------- */
.els-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.els-hero-row { grid-template-columns: 1fr; }
	.els-hero-main { border-right: none; padding-right: 0; }
	/* .wp-block-group.els-actualidad-row (base rule, specificity 0,2,0)
	   beats a bare .els-actualidad-row override (0,1,0) regardless of
	   source order — found by inspecting real computed styles at mobile
	   width: the row was staying at its desktop minmax(0,2.3fr) minmax(0,1fr)
	   split, squeezing the 3-card Actualidad grid and "Lo más leído" each
	   into a sliver a few dozen px wide instead of stacking, which is
	   exactly the "uno encima del otro" collision this was reported as.
	   Matching the base rule's own compound selector fixes it for real. */
	.wp-block-group.els-actualidad-row { grid-template-columns: 1fr; }
	.els-lo-mas-leido { border-left: none; padding-left: 0; }
	.els-actualidad-cards { grid-template-columns: 1fr; }
	/* Same specificity mismatch as .els-actualidad-bottom's own :has()
	   variants below — a bare override can't reliably beat those, so this
	   is scoped to win outright regardless of how many cards rendered. */
	.els-actualidad-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.els-cards-grid-3 { grid-template-columns: 1fr; }
	.els-internacional__grid { grid-template-columns: 1fr; }
	.els-editorial-grid { grid-template-columns: 1fr; }
	.els-editorial-grid::after { display: none; }
	/* .wp-block-group.els-deportes-blogs (base, 0,2,0) — same class of bug
	   as els-actualidad-row above, same fix. */
	.wp-block-group.els-deportes-blogs { grid-template-columns: 1fr; }
	.els-deportes-pair { grid-template-columns: 1fr; }
	.els-masthead__inner { grid-template-columns: 1fr; text-align: center; gap: 10px; }
	.els-masthead__date { justify-self: center; }
	.els-masthead__search { justify-self: center; }
}
@media (max-width: 600px) {
	/* .els-actualidad-bottom (the 2-card row right under "Lo más leído")
	   deliberately has NO 1-column override here — explicit request: it
	   stays a fixed horizontal pair at every width down to mobile, same
	   as the 2-col rule already forced (with !important, for the same
	   :has() specificity reason) further down this file. */

	/* ============================================================
	   Mobile rebuild, referencing the "El Solidario Portada Movil"
	   mockup for structure/type-scale/spacing at this width only —
	   NOT for logic or content, which all stays exactly what desktop
	   already established (dynamic category colors, real photo
	   links, real social-icon show/hide, Actualidad/Lo más leído
	   fallbacks, etc.). The mockup's own "Ver sección" links are
	   deliberately NOT reintroduced — that affordance was removed
	   sitewide on purpose; the section title is still the only entry
	   point. One mockup interaction is still deliberately left out as
	   genuinely new behavior with no desktop equivalent (confirmed
	   with the user rather than assumed): a second "compact" sticky
	   header that slides in on scroll (skipped — one static header,
	   like desktop). The swipeable single-card carousel with dot
	   pagination for Economía/Sostenibilidad/Tecnología, by contrast,
	   IS implemented below (.els-carousel) — explicit follow-up request
	   after the first mobile pass shipped those three as plain stacked
	   cards like Política. */

	.els-main,
	.els-topbar__inner,
	.els-masthead__inner,
	.els-nav__inner,
	.els-directo__inner,
	.els-internacional__inner,
	.els-editorial-section__inner,
	.els-footer__inner { padding-left: 16px; padding-right: 16px; }

	/* ---- Ticker ---- */
	.els-topbar__inner { padding-top: 3px; padding-bottom: 3px; gap: 8px; }
	.els-topbar__label { font-size: 10.5px; }
	.els-topbar__ticker {
		gap: 16px;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-behavior: smooth;
	}
	.els-topbar__ticker::-webkit-scrollbar { display: none; }
	/* appearance was still "auto" (the default for a bare <button>) — its
	   background-color computed transparent, but the browser's own native
	   button chrome still painted on top regardless (a light gray bezel,
	   confirmed via a real screenshot against the teal ticker background,
	   where it stood out clearly). appearance:none turns that off; every
	   other .els-nav__burger/.els-masthead__burger button in this file
	   already resets it implicitly by also setting a background, but this
	   one's background is intentionally transparent so it needs the
	   explicit reset. */
	.els-topbar__nav-btn {
		display: flex; align-items: center; justify-content: center;
		flex-shrink: 0; border: 0; margin: 0; background: transparent; color: #fff;
		padding: 10px 2px; cursor: pointer; appearance: none; -webkit-appearance: none;
	}

	/* ---- Masthead: one compact row (menu | logo | search icon), matching
	   the mockup's own masthead exactly — the menu icon lives HERE next to
	   the logo, not in the categories row below. .els-masthead__burger is
	   a second real <button class="els-nav__burger …"> (see header.html),
	   sharing els-nav__burger's visual styling and JS binding (theme.js
	   now binds every matching burger, not just the first) — desktop
	   keeps using the original one in .els-nav; this one is display:none
	   there and only shown here at mobile, so exactly one is ever visible
	   at once. The date (Fabi's call: not wanted on mobile at all, having
	   tried it once already) is hidden outright here rather than
	   restyled — it stays exactly as before on desktop. Both display:none
	   items drop out of grid auto-placement entirely, so the 3 tracks
	   below still land on the right 3 *visible* children automatically:
	   burger, logo, search. */
	.els-masthead__inner { grid-template-columns: auto 1fr auto; text-align: left; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
	.els-masthead__date { display: none; }
	.els-nav__inner .els-nav__burger { display: none; }
	.els-nav__divider { display: none; }
	.els-masthead__burger { display: inline-flex; justify-self: start; }
	.els-masthead__logo { justify-self: center; }
	.els-masthead__logo img { max-height: 28px; width: auto; }
	.els-masthead__search { justify-self: end; }
	/* Icon-only, permanently — no more inline expand-on-tap here (that
	   used to happen via :focus-within; removed per explicit request: at
	   this width the icon must not open any box inside the header at all).
	   theme.js instead sends the tap straight to the search results page,
	   where the real search bar already lives at the top — so the input
	   itself never needs to grow a visible width at this breakpoint. */
	.els-masthead__search-trigger {
		width: auto; padding: 10px 6px; border: 0; background: transparent; gap: 0;
	}
	.els-masthead__search input { width: 0; opacity: 0; padding: 0; }

	/* ---- Nav / categories: horizontal scroll strip (already
	   overflow-x:auto on desktop for overflow safety — just tightened
	   here since it's now the primary way to reach every category,
	   not a rare overflow fallback). ---- */
	.els-nav__inner { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
	.els-nav .wp-block-navigation__container { gap: 16px; }
	.els-nav .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 12.5px; }

	/* ---- Directo ---- */
	.els-directo__inner { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
	.els-directo__label { padding: 5px 10px; font-size: 10px; gap: 6px; }
	.els-directo__headline-item { font-size: 12.5px; }

	/* ---- Hero: the photo/title/excerpt/byline order itself is now a base
	   rule (all viewports, see .els-hero-main near the top of this file) —
	   this block only has the mobile-specific size/spacing overrides. ---- */
	.els-hero-row { border-bottom: none; }
	.els-hero-main { padding: 18px 0 20px; }
	.els-hero-cat { font-size: 10.5px; }
	.els-hero-title { font-size: 26px !important; line-height: 1.14; }
	.els-hero-standfirst { font-size: 14.5px; }
	/* Wide editorial ratio, not the desktop hero's squarer 4/3 — same rule
	   as every other "one story, full width, photo above title" card. */
	.els-hero-photo { aspect-ratio: 3/2; }

	/* ---- Side stories: full width when stacked, no leftover left
	   padding from the desktop sidebar layout, and the mockup's own
	   3/2 photo ratio for this width (was 16/9, sized for a narrow
	   desktop sidebar column). ---- */
	.els-hero-side { border-top: 1px solid var(--wp--preset--color--border); margin-top: 4px; }
	.els-side-story { padding: 16px 0; }
	.els-side-story:first-child { padding-top: 18px; }
	.els-side-photo { aspect-ratio: 3/2; }
	.els-side-title { font-size: 18px !important; }
	.els-side-standfirst { font-size: 13px; }

	/* ---- Section heads: smaller, no "Ver sección" (removed sitewide;
	   never reintroduced here even though the mockup still shows it). ---- */
	.els-section { padding-top: 40px; }
	.els-section-head h3 { font-size: 17px; }
	.els-lo-mas-leido__box .els-section-head h3 { font-size: 16px; }

	/* ---- Actualidad row: stacked, full-width cards matching the
	   mockup's mobile 3/2 photo ratio (was 16/9 next to the sidebar). ---- */
	.wp-block-group.els-actualidad-row { margin-bottom: 26px; padding-top: 24px; row-gap: 30px; }
	.els-actualidad-cards { gap: 24px; }
	.els-card--act .els-card-photo { aspect-ratio: 3/2; }
	.els-card--act .els-card-title { font-size: 18.5px !important; }

	/* ---- Lo más leído ---- */
	.els-lo-mas-leido__box { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border-light); padding: 18px 16px; }
	.els-lo-mas-leido__num { font-size: 24px; }
	.els-lo-mas-leido__title { font-size: 14.5px; }

	/* ---- Destacada extra (2 cards) ---- */
	.els-actualidad-bottom { gap: 18px 14px; padding-top: 20px; }
	.els-card--sm .els-card-title { font-size: 14.5px !important; }
	/* At this column width (~162px) the byline (avatar + author name +
	   date) doesn't fit on one line at the normal 12px byline size — the
	   author name was getting ellipsis-clipped mid-word. Dropping the
	   small avatar circle and the font size together (not just the font
	   alone — even down at 7.5px, right at the edge of legibility, the
	   longest real author name on this site still only just barely fit
	   with the avatar still taking its ~28px) is what actually clears it
	   with real margin, at a size that stays readable. */
	.els-card--sm .els-avatar { display: none; }
	.els-card--sm .els-byline__meta { font-size: 9px; }

	/* ---- Generic 3-card grid sections (Política): stacked full-width,
	   same real posts as desktop, plain stack — no carousel, no lead. ---- */
	.els-cards-grid-3 { row-gap: 26px; }
	.els-card-title { font-size: 18.5px !important; }

	/* ---- Sociedad: lead full-width (photo+title+author, no excerpt — not
	   part of this pattern) + the other 2 posts as a fixed horizontal pair
	   underneath, same narrow-column byline fix as the destacada-extra
	   pair above. ---- */
	.els-section--sociedad .els-cards-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
	.els-section--sociedad .els-card--lead { grid-column: 1 / -1; }
	.els-section--sociedad .els-card:not(.els-card--lead) .els-card-title { font-size: 15.5px !important; }
	.els-section--sociedad .els-card:not(.els-card--lead) .els-avatar { display: none; }
	.els-section--sociedad .els-card:not(.els-card--lead) .els-byline__meta { font-size: 9px; }

	/* ---- Carousel (Economía / Tecnología / Sostenibilidad): un-neutralize
	   the desktop `display:contents` pass-through into a real one-slide-
	   visible carousel with arrows + dots, cycling the section's own posts
	   (theme.js binds .els-carousel__arrow/.els-carousel__dot clicks). ---- */
	.els-carousel { display: block; grid-column: 1 / -1; }
	.els-carousel__track { display: block; }
	.els-carousel__slide { display: none; }
	.els-carousel__slide.is-active { display: flex; }
	.els-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
	.els-carousel__arrow {
		display: flex; align-items: center; justify-content: center;
		width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
		border: 1px solid var(--wp--preset--color--border); background: transparent;
		color: var(--wp--preset--color--body-text); padding: 0; cursor: pointer;
		appearance: none; -webkit-appearance: none;
	}
	.els-carousel__dots { display: flex; align-items: center; gap: 7px; }
	.els-carousel__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--border); }
	.els-carousel__dot.is-active { background: var(--wp--preset--color--primary); }

	/* ---- Sostenibilidad: lead full-width first, same carousel below. ---- */
	.els-section--sostenibilidad .els-cards-grid-3 { grid-template-columns: 1fr; }

	/* ---- Internacional: the main story (center column on desktop) leads
	   at mobile — order:-1 pulls it to the top of the single-column stack
	   purely visually (DOM/desktop untouched); col1's 2 items and col2's
	   pair follow in their existing order. First 3 stay stacked full-width;
	   the last 2 (col2) are a fixed horizontal pair, same narrow-column
	   byline fix as the destacada-extra/Sociedad pairs above. ---- */
	.wp-block-group.els-internacional { padding: 22px 0 24px; margin-top: 36px; }
	.els-internacional__main { order: -1; }
	.els-internacional__item .els-card-title { font-size: 15.5px !important; }
	.els-internacional__main .els-card-title { font-size: 21px !important; }
	.els-internacional__col { row-gap: 4px; }
	.els-internacional__col:last-of-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
	.els-internacional__col:last-of-type .els-internacional__item { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
	.els-internacional__col:last-of-type .els-internacional__item .els-avatar { display: none; }
	.els-internacional__col:last-of-type .els-internacional__item .els-byline__meta { font-size: 9px; }

	/* ---- Editorial (Cultura / Ciencia y Salud): the photo-beside-title
	   items stretch to the text block's own height instead of a fixed
	   70px box centered inside a taller row (point 14). A *fixed* photo
	   width (not "auto") is what makes this robust — auto-sizing column 1
	   from an aspect-ratio:1/1 photo, whose own height:100% depends on
	   THIS row's height, which depends on column 2's wrapped-text height,
	   which depends on column 1's width being resolved first, is a genuine
	   circular dependency; on a long (3-line) headline it left the row's
	   own box shorter than its actual grid content, so the photo visibly
	   overflowed past the row into the next item. Fixing column 1's width
	   breaks that cycle entirely — no more overflow, at the cost of the
	   photo no longer being perfectly square for every title length. ---- */
	.wp-block-group.els-editorial-section { padding: 22px 0 24px; margin-top: 36px; }
	.els-editorial-grid { row-gap: 30px; }
	.els-editorial-lead .els-card-title { font-size: 19px; }
	.els-editorial-item { grid-template-columns: 96px 1fr; align-items: stretch; }
	.els-editorial-item__photo { width: 96px; height: 100%; }

	/* ---- Deportes: lead on top, the 2 remaining posts stacked
	   vertically underneath (NOT a horizontal pair) with the same
	   photo-beside-title, height-matched pattern as Cultura's items
	   above — same fixed-width fix as .els-editorial-item, same reason
	   (avoids the auto-column/aspect-ratio circular-sizing bug). ---- */
	.wp-block-group.els-deportes-blogs { margin: 40px 0 50px; row-gap: 40px; }
	.els-deportes-lead .els-card-title { font-size: 21px; }
	.els-deportes-pair {
		display: grid; grid-template-columns: 1fr; row-gap: 18px;
	}
	.els-deportes-item {
		display: grid; align-items: stretch; column-gap: 14px;
		grid-template-columns: 96px 1fr;
		grid-template-areas: "photo title" "photo byline";
	}
	.els-deportes-item .els-card-photo {
		grid-area: photo; width: 96px; height: 100%; margin-bottom: 0;
	}
	.els-deportes-item__title-link { grid-area: title; align-self: end; }
	.els-deportes-pair .els-card-title { font-size: 15.5px !important; margin-top: 0 !important; }
	.els-deportes-item .els-byline { grid-area: byline; margin-top: 6px; }

	/* ---- Blogs: first 2 posts as a horizontal pair, the 3rd full-width
	   below (point 11). ---- */
	.els-blogs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
	.els-blogs__item { border-top: none; padding: 0; }
	.els-blogs__item:nth-child(3) {
		grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.14);
		padding-top: 20px; margin-top: 2px;
	}
	.els-blogs__title { font-size: 15px; }

	/* ---- Touch feedback (tap-and-hold shows :hover on touchscreens):
	   Deportes and Blogs never had their own hover-color rule at all — a
	   real gap, not something this pass broke. Everything else on the
	   page already has one (.els-card:hover .els-card-title covers the
	   generic-card zones, .els-byline__meta a:hover already covers every
	   real author link site-wide since that's a single shared class). ---- */
	.els-deportes-lead:hover .els-card-title,
	.els-deportes-item:hover .els-card-title { color: var(--wp--preset--color--primary); }
	.els-blogs__item:hover .els-blogs__title { color: var(--wp--preset--color--blogs-accent); }

	/* ---- Footer ---- */
	.els-footer__inner { padding-top: 26px; padding-bottom: 22px; }
	.els-footer__top { flex-direction: column; align-items: center; text-align: center; }
	.els-footer__social { align-items: center; }
	.els-footer__cats { gap: 6px 10px; }
}

/* =========================================================
   Plantilla de categoría (category.html) — "Sección"
   ========================================================= */

/* WP core/avatar block: make it a plain circle at whatever size we set
   per zone via the block's own "size" attribute. */
/* width/height:34px — a safety-net default, not a design choice: this
   container never had its own size before, it only ever *looked* sized
   because a block-level div wrapping nothing but an <img> shrinks to that
   img's own intrinsic pixel size (its width/height HTML attributes,
   almost always 34 — wp:avatar's own default `size`). That implicit
   sizing broke the moment the img itself got width/height:100% below (a
   flex item with no explicit width and flex-basis:auto instead sizes
   itself from AVAILABLE space, not content, so it inflated to ~234px on
   category.html's destacado, the one spot with no explicit nth-child
   override for this class). Every zone with its own override (22/24/26px
   etc.) still wins on specificity — this only backstops the ones that
   don't have one. */
.wp-block-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; line-height: 0; }
/* width/height:100% + object-fit:cover — without these the <img> keeps
   its own native pixel size (the WP-generated avatar variant's actual
   dimensions, e.g. 34×34) regardless of how small .wp-block-avatar itself
   is resized elsewhere (22/24/26px in various zones of category.html).
   With overflow:hidden on the container and no object-fit, an oversized
   img just renders at its own size and gets clipped from the top-left
   corner instead of being scaled to fit — a lopsided sliver of the photo
   showing instead of the whole face centered. Same fix already applied
   one-off to .els-author-avatar; this covers every other avatar size on
   the site from one place instead of needing a per-zone patch. */
.wp-block-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-block-post-author-name { display: inline; }
.wp-block-post-author-name a:hover { color: var(--wp--preset--color--primary); }

/* Reuses .els-byline / .els-byline__meta (defined earlier) as the wrapper
   around avatar + author-name + date, matching the portada's own byline. */
.els-byline .wp-block-post-date time { font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

/* Category accent (masthead, rail heading, "A fondo" badge, "Más de X"
   heading, topic tags, title-hover) reads from --els-cat-accent-dark/-mid,
   set per-category by els_category_accent_inline_style() in functions.php
   and scoped to .els-main only — with a var()-chained fallback to the
   brand teal preset here so nothing breaks if that inline style is ever
   missing (e.g. outside a real category archive). Internacional's own
   navy comes from Seccion Internacional.dc.html's theme(section); every
   other category defaults to the same teal .els-cat-* already used. */
.els-cat-masthead { padding: 44px 0 26px; }
.els-cat-masthead__inner {
	position: relative;
	border-bottom: 2px solid var(--els-cat-accent-dark, var(--wp--preset--color--section-heading));
	padding-bottom: 14px;
}
.els-cat-masthead__inner::before {
	content: "";
	position: absolute; left: 0; bottom: -3px;
	width: 74px; height: 4px;
	background: var(--els-cat-accent-mid, var(--wp--preset--color--primary));
}
.els-cat-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--els-cat-accent-dark, var(--wp--preset--color--section-heading));
	text-transform: uppercase;
}

/* ---- The 15-post "magazine" grid (lead + rail + two-up + wide + 6-grid) ----
   A single Query Loop, inherited (so it's correctly scoped + paginated to
   the current category — verified empirically: a Query Loop's own perPage/
   offset are silently ignored once "inherit" is on, and a non-inherited
   query loses category scoping entirely unless given an explicit term ID,
   which a generic category.html can't know ahead of time). So instead of
   several separately-offset query loops, this is ONE query showing this
   site's Reading→"Posts per page" count (15, which happens to exactly fit
   lead+rail+two-up+wide+6-grid), laid out into that bento shape entirely
   with :nth-child position ranges on a shared 6-column grid. Going to page
   2 of a category shows a fresh set of 15 in the same layout, rather than
   the mockup's own behavior of a fixed showcase with only its tail list
   paginating — the mockup's client-side pagination model doesn't have a
   direct native WordPress equivalent, and this reads as a clean, honest
   "next page of the section" rather than approximating it awkwardly. */
.els-cat-magazine {
	display: grid;
	/* 5 non-uniform columns, not 6 equal ones: the mockup's lead/rail split
	   is 61.8%/38.2% (golden ratio, confirmed against the mockup source),
	   which a 6-equal-column grid can't reach — 6 equal columns is what's
	   forced two-up to 50/50 and the 6-post grid to even thirds, so lead's
	   span (4 of 6) was always exactly 66.7%, never 61.8%, regardless of
	   which 4-of-6 columns were chosen. Adding two more column *lines* at
	   50% and 61.8% (without moving the existing 33.3%/66.7% thirds lines
	   or the 50% two-up line) lets every zone span from one of these lines
	   to another and land on its own ratio — a spanning item absorbs the
	   gaps between the lines it covers, so this doesn't add any visible
	   split within a single zone's own box, only at real zone boundaries:
	   line 1=0%, 2=33.3333% (thirds), 3=50% (two-up), 4=61.8% (lead/rail),
	   5=66.6667% (thirds), 6=100%.
	   Each track below is calc(percent - Npx), not plain fr/percent: a
	   first pass used plain fr weights and measured ~1.65:1 in the live
	   DOM instead of the required 1.618:1 (61.8/38.2). Root cause: a
	   spanning item's rendered width is its fr-share of the gap-reduced
	   pool PLUS the pixel-width of every gap *internal* to its own span
	   (those gaps get absorbed into one continuous box) — and lead (3
	   tracks, 2 internal gaps) absorbs twice as many gap-pixels as rail
	   (2 tracks, 1 internal gap), so a pure fr ratio systematically favors
	   whichever zone's span crosses more internal gaps, and that skew
	   scales with viewport width rather than cancelling out. Fixing it
	   requires 2 independent knobs per track (the plain-fr version only
	   has 1: the weight) — solved as a system of equations, one pair of
	   constraints (percentage share, pixel offset) per zone (lead, rail,
	   both two-up halves, all three thirds, the full-width wide feature),
	   for the exact px offset each of the 5 tracks needs so every zone's
	   *rendered* width, gap-absorption included, works out to precisely
	   its target ratio for any container width — verified against the
	   live DOM at 1140px content width: lead/rail landed at exactly
	   1.6178:1. minmax(0, …) keeps the original overflow protection (a
	   plain track's minimum width defaults to auto — big enough for its
	   content however wide, e.g. a long unbroken title — which minmax(0,…)
	   floors at 0 so content yields to the track instead of expanding it). */
	grid-template-columns:
		minmax(0, calc(33.3333% - 26.667px))
		minmax(0, calc(16.6667% - 33.333px))
		minmax(0, calc(11.8% - 44.72px))
		minmax(0, calc(4.8667% - 28.613px))
		minmax(0, calc(33.3333% - 26.667px));
	column-gap: 40px;
}
.els-cat-magazine .wp-block-post-template { display: contents; }
.els-cat-magazine .wp-block-post-template > li {
	list-style: none;
	margin: 0;
	cursor: pointer;
	min-width: 0;
}
/* Every zone's photo slot: fixed box via aspect-ratio (set per nth-child
   zone below) with a visible neutral background — same values as the
   portada's .els-hero-photo placeholder — so a missing/failed image never
   leaves a collapsed or blank hole, whether that's our own fallback div
   (functions.php swaps out core/post-featured-image's <img> when the
   thumbnail file doesn't exist on disk) or a real <img> still loading. */
.els-cat-magazine .wp-block-post-featured-image {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	margin: 0;
}
.els-cat-magazine .wp-block-post-featured-image img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.els-cat-magazine .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
/* .els-cat-textcol wraps title+excerpt+byline (needed so the rail zone
   below can treat them as one grid item — see that zone's comment).
   display:contents everywhere else so it's invisible to layout and every
   other zone keeps behaving exactly as if title/excerpt/byline were still
   direct li children, unchanged. */
.els-cat-magazine .els-cat-textcol { display: contents; }
/* Topic tag (e.g. "POLÍTICA", "GUERRA EN GAZA" — Seccion Internacional.dc.html:
   every zone shows the post's secondary category here, always in the
   section's accent-mid color; text and existence are resolved per-post by
   el_solidario_post_topic_tag() in functions.php). Font-size/margin vary
   per zone below, alongside that zone's existing title/excerpt rules.
   :empty hides it when a post has no other category, rather than the PHP
   filter needing to conditionally omit the wrapping block — every zone's
   post-template can share the one marker unconditionally this way.
   .els-cat-tagrow wraps this alongside .els-cat-wide-tag ("A fondo") since
   only the wide zone shows both side by side — display:contents everywhere
   else, same technique as .els-cat-textcol just above. */
.els-cat-tag {
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--els-cat-accent-mid, var(--wp--preset--color--primary));
}
.els-cat-tag:empty { display: none; }
.els-cat-magazine .els-cat-tagrow { display: contents; }
/* wp:avatar's own "size" attribute is shared by every post in the loop
   (one inner-block template for all 15 items), so it's set once to the
   largest zone's need (34, lead/wide) and scaled down per zone here —
   shrinking a fetched image always looks fine, unlike upscaling one. */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-avatar { width: 22px; height: 22px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-avatar { width: 26px; height: 26px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10) .wp-block-avatar { width: 24px; height: 24px; }

/* Rail sub-heading ("Lo más reciente"), a plain sibling of post-template
   inside the same query block, placed into column 2 / row 1. */
/* line-height:1 added after live measurement: neither this nor the
   "Más de X" heading below declares its own line-height, so both inherit
   the theme's global 1.5 — which the mockup's own base styles never set
   (it relies on the browser's unstyled "normal", not an explicit value).
   That inherited 1.5 adds half-leading under the glyphs on top of the
   declared padding-bottom, measured live at ~19.5px total here versus
   the 12px actually declared (and matching the mockup's own 12px for
   this component) — line-height:1 removes the CSS-added leading so
   padding-bottom is what actually controls the gap, as intended.
   align-self:start fixes a second, larger contributor found the same
   way: this is a grid item sharing row 1 with the lead article, and
   with no align-self of its own it defaults to stretch — its box was
   measured at 32.1px tall versus a 26px natural height (14px line-height
   + 12px padding), the extra ~6px landing below the text and pushing the
   border-bottom down with it. Isolated test confirmed Public Sans itself
   contributes ~0px of intrinsic leading at line-height:1, so grid stretch
   — not font metrics — was the second real source of the excess gap. */
.els-cat-rail-head {
	grid-column: 4 / 6;
	grid-row: 1;
	align-self: start;
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--els-cat-accent-dark, var(--wp--preset--color--section-heading));
	padding-bottom: 12px;
	margin: 0 0 4px;
	border-bottom: 2px solid var(--els-cat-accent-mid, var(--wp--preset--color--primary));
}

/* Post 1 — lead */
.els-cat-magazine .wp-block-post-template > li:nth-child(1) {
	grid-column: 1 / 4;
	grid-row: 1 / 7;
	display: flex;
	flex-direction: column;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image { margin-bottom: 16px; aspect-ratio: 16/9; }
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .els-cat-tag { font-size: 11px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-title {
	margin: 10px 0 0; font-size: 40px; line-height: 1.06; letter-spacing: -.02em;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-title a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-excerpt {
	margin: 16px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--wp--preset--color--body-text); max-width: 60ch;
	/* Future-proofing, not a visible change: current content already wraps
	   to exactly 2 lines (verified live), this just stops a longer real
	   entradilla from running past that. Mockup has no explicit line count
	   here (checked — its <p> is unclamped placeholder text), so 2 is the
	   as-currently-rendered value per the fallback rule used for the 48px
	   divider fix. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .els-byline { margin-top: 16px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(1) .els-icon-clock { width: 13px; height: 13px; }

/* Posts 2–6 — rail (right column, one per row, gets its own bottom border
   to line up visually with the lead's border-bottom on the last one).
   Re-verified against the mockup source (lines 170-187): this is genuinely
   a single-row, 2-column grid (grid-template-columns:1fr 92px), not a
   2-row grid-template-areas layout. Column 1 in the mockup is one wrapping
   <div> containing the title and the byline in normal block flow — i.e.
   ONE grid item — with column 2 the fixed 92×66 thumbnail as the other.
   A previous fix here used grid-template-areas spanning the photo across
   2 explicit rows (title's row + byline's row) to solve a different, real
   bug (title/byline landing side-by-side). That stopped the side-by-side
   bug, but a spanning item across 2 auto rows makes each row individually
   inflate to fit the photo's height, inserting extra centering padding
   *between* title and byline as well as around the pair — visually the
   thumbnail read as floating over the byline instead of bracketing the
   whole text block. Using .els-cat-textcol (see above) as a single real
   grid item for title+byline reproduces the mockup's actual mechanism:
   one ~51px text block centered as a unit inside the 66px-tall row,
   padding only above the title and below the byline.
   Follow-up bug (found via real-browser DOM inspection, not just reading
   the CSS): photo and .els-cat-textcol below both only had grid-column
   set, no grid-row — relying on auto-placement to land them in the same
   row. It doesn't: photo (first in DOM, grid-column:2, the LAST column)
   gets placed in row 1, which advances the sparse auto-placement cursor
   past row 1 entirely (per spec, the cursor moves to the next cell in
   flow order after an item's placement — here, off the end of row 1).
   textcol then can't backfill row 1's still-empty column 1; it lands in
   row 2 instead, producing the diagonal photo-top-right/text-bottom-left
   layout. Both now get an explicit grid-row:1 so there's no ambiguity for
   auto-placement to get wrong. */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) {
	grid-column: 4 / 6;
	display: grid;
	grid-template-columns: 1fr 92px;
	column-gap: 14px;
	align-items: center;
	min-height: 66px;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.els-cat-magazine .wp-block-post-template > li:nth-child(2) { grid-row: 2; }
.els-cat-magazine .wp-block-post-template > li:nth-child(3) { grid-row: 3; }
.els-cat-magazine .wp-block-post-template > li:nth-child(4) { grid-row: 4; }
.els-cat-magazine .wp-block-post-template > li:nth-child(5) { grid-row: 5; }
.els-cat-magazine .wp-block-post-template > li:nth-child(6) { grid-row: 6; padding-bottom: 36px; }
/* width/height fixed at 92×66 (mockup line 184) rather than height:100% —
   the mockup's own thumbnail never stretches with the text column, it's a
   constant size that the row just grows around when needed (min-height:66px
   on the row is the mockup's own fallback for short text, same as here). */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-post-featured-image { grid-column: 2; grid-row: 1; width: 92px; height: 66px; margin: 0; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-cat-textcol { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-cat-tag { font-size: 9.5px; margin-bottom: 5px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-post-title { margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-post-title a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
/* margin-top:10px (not a grid row-gap) — this is the mockup's own exact
   mechanism (line 173): title has no margin at all, and byline's own
   margin-top is what creates the gap between them. */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-byline { margin-top: 10px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-post-excerpt { display: none; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-icon-clock { width: 11px; height: 11px; }

/* Posts 7–8 — two-up features, full width, row 7 */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) {
	grid-row: 7;
	display: flex; flex-direction: column;
	padding: 36px 0;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(7) { grid-column: 1 / 3; }
.els-cat-magazine .wp-block-post-template > li:nth-child(8) { grid-column: 3 / 6; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-featured-image { margin-bottom: 14px; aspect-ratio: 3/2; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .els-cat-tag { font-size: 10.5px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-title { margin: 8px 0 0; font-size: 26px; line-height: 1.12; letter-spacing: -.015em; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-title a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
/* Mockup has no explicit line count for this <p> either. Measured live:
   the two current posts sit at 3 and 4 lines respectively — genuinely
   unequal today, which is exactly what was reported. line-clamp only
   ever caps a maximum; it can't pad the 3-line card up to match the
   4-line one, so today's mismatch isn't eliminated by this alone (that
   would need a min-height/fixed-height addition, a different technique
   than what was asked for here). Capping both at 4 — the taller card's
   current value — changes neither card's rendering today, and once real
   content on either side runs past 4 lines it clamps there instead of
   growing further, which is what brings the two into alignment in the
   more common case where entradillas overflow. */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-excerpt {
	margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .els-byline { margin-top: 13px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .els-icon-clock { width: 12px; height: 12px; }

/* Post 9 — wide "A fondo" feature, full width, row 8. Its own internal
   photo+text split (1.1fr / 1fr) is achieved with the block's own layout,
   not the outer grid — this is the one item where the outer grid just
   hands it the full row and its inner CSS does the rest.
   background was an explicit white (confirmed live: rgb(255,255,255)) —
   the rest of the page sits on the body's rgb(244,246,246), so this read
   as a separate white card floating on top of it instead of blending in.
   Dropped (transparent, matching every other zone here) rather than set
   to the page background explicitly, since this whole grid already sits
   inside that background naturally.
   border-top replaces the two two-up items' individual border-bottoms
   (removed from their shared rule above) — those were two disconnected
   1px segments with a column-gap-sized break between them; a single
   border here, on the one element that already spans the full row width,
   draws as one continuous line instead. Sits inside the existing
   margin:36px 0, so that top/bottom spacing is unchanged. */
.els-cat-magazine .wp-block-post-template > li:nth-child(9) {
	grid-column: 1 / 6; grid-row: 8;
	display: grid; grid-template-columns: 1.1fr 1fr;
	margin: 36px 0; padding-bottom: 8px;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* grid-row: 1 / -1 (tried previously) doesn't actually reach all 4 rows
   here: -1 resolves against the EXPLICIT grid, and this container has no
   grid-template-rows — zero explicit row tracks — so -1 falls back to
   line 2, i.e. the same as plain "grid-row: 1". The photo landed confined
   to row 1 (sized to its own min-height, 320px) while wide-tag/title/
   excerpt/byline auto-placed into rows 2-4 kept growing the container well
   past that, leaving the gap below the photo the screenshot showed.
   "span 4" counts tracks instead of naming a line, so it correctly reaches
   across all 4 implicit rows regardless of whether they're explicit.
   height:100% added on top as a second, more direct mechanism, since it
   resolves against the item's own (now correctly 4-row-tall) grid area
   rather than depending on stretch/aspect-ratio being untouched anywhere
   in the cascade. */
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 4; height: 100%; min-height: 320px; margin: 0; }
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-title,
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-excerpt,
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-byline,
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-tagrow {
	grid-column: 2;
}
/* Present on every post in the loop (one shared inner-block template for
   all 15), but the "A fondo" badge only belongs on the wide feature —
   hidden by default, shown only for post 9 below. .els-cat-tagrow (see
   .els-cat-tag comment above) pairs it with the wide zone's own topic tag,
   side by side — the only zone where the badge and the tag share a row;
   everywhere else .els-cat-tag--main (inside .els-cat-textcol) carries the
   tag instead and this wrapper contributes nothing (display:contents). */
.els-cat-wide-tag { display: none; }
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-tagrow {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-self: start; align-self: end;
	margin: 36px 38px 0;
}
/* line-height:1 on both — same cause as .els-cat-rail-head/.els-cat-more-head
   earlier in this file: neither element declares its own line-height, so
   both inherit the theme's global 1.5, and that inherited leading isn't
   necessarily distributed symmetrically above/below the glyph (confirmed
   empirically for this font/weight when line-height:1 was introduced for
   the other two labels). The badge's symmetric 4px top/bottom padding
   partly masked it there, but the tag has no padding to absorb the same
   asymmetry, so align-items:center on .els-cat-tagrow was centering two
   boxes whose *visual* text wasn't centered within either of them. */
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-wide-tag {
	display: inline-block;
	line-height: 1;
	font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: #fff; background: var(--els-cat-accent-dark, var(--wp--preset--color--section-heading)); padding: 4px 11px;
}
/* margin-top:0 — WordPress core's own flow-layout block-gap CSS
   (:root :where(.is-layout-flow) > * { margin-block: 24px 0px; }, zero
   specificity but nothing here was overriding it) injects margin-top:24px
   on any non-first child of a layout:"default" group; .els-cat-tag--wide
   is the second child of .els-cat-tagrow, so it was getting that 24px —
   confirmed live via getComputedStyle before touching anything, and it
   accounted for the exact 12px vertical-center offset measured against
   the badge (an asymmetric top-only margin shifts a centered flex item's
   visible content by half the margin). .els-cat-tag--main is unaffected —
   it's the FIRST child of .els-cat-textcol, where WP core's own
   :first-child reset already zeroes this out, so nothing to change there. */
.els-cat-tag--wide { display: none; font-size: 10.5px; line-height: 1; margin-top: 0; }
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-tag--wide:not(:empty) { display: inline-block; }
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-tag--main { display: none; }
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-title {
	margin: 14px 38px 0; font-size: 31px; line-height: 1.1; letter-spacing: -.02em; color: var(--els-cat-accent-dark, var(--wp--preset--color--section-heading));
}
/* Mockup's <p> here is unclamped too. Current content sits at exactly
   4 lines (verified live), so 4 is the as-currently-rendered value. */
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-excerpt {
	margin: 16px 38px 0; font-size: 15.5px; line-height: 1.55; color: var(--wp--preset--color--body-text);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-byline { margin: 18px 38px 36px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-icon-clock { width: 13px; height: 13px; }

/* Posts 10–15 — 3-column grid, rows 9–10 */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) { display: flex; flex-direction: column; }
.els-cat-magazine .wp-block-post-template > li:nth-child(10) { grid-column: 1 / 2; grid-row: 9; }
.els-cat-magazine .wp-block-post-template > li:nth-child(11) { grid-column: 2 / 5; grid-row: 9; }
.els-cat-magazine .wp-block-post-template > li:nth-child(12) { grid-column: 5 / 6; grid-row: 9; }
.els-cat-magazine .wp-block-post-template > li:nth-child(13) { grid-column: 1 / 2; grid-row: 10; }
.els-cat-magazine .wp-block-post-template > li:nth-child(14) { grid-column: 2 / 5; grid-row: 10; }
.els-cat-magazine .wp-block-post-template > li:nth-child(15) { grid-column: 5 / 6; grid-row: 10; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+12) { margin-bottom: 36px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .wp-block-post-featured-image { margin-bottom: 12px; aspect-ratio: 16/10; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .els-cat-tag { font-size: 10.5px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .wp-block-post-title { margin: 7px 0 0; font-size: 19px; line-height: 1.18; letter-spacing: -.01em; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .wp-block-post-title a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
/* Design adjustment, not a bug fix: unclamped excerpts here could run to
   6 lines depending on post content, making cards in the same row wildly
   uneven in height. Scoped to just this 3-column zone (10-15) — the lead,
   rail, and "Más de X" excerpts are untouched, each keeps its own rule
   above/below and none of them share this selector. */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .wp-block-post-excerpt {
	margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .els-byline { margin-top: 11px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) .els-icon-clock { width: 12px; height: 12px; }

/* Anything past post 15 (categories with more than a page's worth showing
   through some other posts-per-page setting) just falls back to the same
   3-column treatment rather than disappearing. */
.els-cat-magazine .wp-block-post-template > li:nth-child(n+16) {
	grid-column: span 2; display: flex; flex-direction: column; margin-bottom: 36px;
}
.els-cat-magazine .wp-block-post-template > li:nth-child(n+16) .wp-block-post-featured-image { margin-bottom: 12px; aspect-ratio: 16/10; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+16) .wp-block-avatar { width: 24px; height: 24px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+16) .wp-block-post-title { margin: 7px 0 0; font-size: 19px; line-height: 1.18; letter-spacing: -.01em; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+16) .els-byline { margin-top: 11px; }
.els-cat-magazine .wp-block-post-template > li:nth-child(n+16) .els-icon-clock { width: 12px; height: 12px; }

.els-cat-pagination { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 34px 0 60px; }
.els-cat-pagination .wp-block-query-pagination-previous,
.els-cat-pagination .wp-block-query-pagination-next {
	border: 0; background: transparent; color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--body); font-size: 13.5px; font-weight: 600;
}
.els-cat-pagination .wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 14px; }
.els-cat-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 30px; padding: 0 2px;
	color: var(--wp--preset--color--faint);
	font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 500;
	border-bottom: 2px solid transparent; line-height: 1;
}
.els-cat-pagination .page-numbers.current { color: var(--wp--preset--color--ink); font-weight: 700; border-bottom-color: var(--wp--preset--color--ink); }
.els-cat-pagination .page-numbers.dots { border-bottom-color: transparent; }

/* Thin divider before "Más de X" (mockup: height:1px, margin:48px 0 0 —
   no text, just a rule separating the 3-column grid from the list below).
   Found via live DOM (not just reading this rule): margin-top computed to
   0px despite the 48px declared here. Cause: .els-cat-divider is a direct
   child of <main class="els-main"> (it's a sibling wp:html block next to
   the two wp:query blocks), and .wp-block-group.els-main > * — a Round-3
   fix elsewhere in this file that neutralizes WordPress core's own
   block-gap margin injection — has specificity (0,2,0), strictly higher
   than this rule's (0,1,0), and wins regardless of which one appears
   later in the file. Re-declared below at (0,3,0) so it wins unconditionally. */
.els-cat-divider { height: 1px; background: var(--wp--preset--color--border); margin: 48px 0 0; }
.wp-block-group.els-main > .els-cat-divider { margin-top: 48px; }

/* "Más de {sección}" section header — same visual family as "Lo más
   reciente" above (bold uppercase label + accent-colored rule), but with
   its own border-bottom and no accent-bar ::before, matching the mockup's
   Block E header exactly rather than reusing .els-section-head.
   Re-verified against the mockup source (line 272): the label is two-tone,
   "Más de" in ink and only {{ sectionName }} in accentMid/primary — NOT a
   uniform teal like .els-cat-rail-head. A previous round "fixed" this by
   making the whole label teal, which matched a literal ask but not the
   actual mockup; reverted to the real two-tone design here.
   The genuine prior bug was specificity, not a missing rule: .els-cat-more-head
   span (0,1,1) was beating .els-cat-more-head__name (0,1,0) despite coming
   first in the file, because a class+tag selector always outranks a single
   class regardless of source order. .els-cat-more-head span .els-cat-more-head__name
   (0,2,1) is unambiguously higher, so this survives regardless of order. */
.els-cat-more-head {
	padding: 34px 0 0;
	border-bottom: 2px solid var(--els-cat-accent-mid, var(--wp--preset--color--primary));
}
/* line-height:1 — same reasoning as .els-cat-rail-head above: this span
   inherits the theme's global 1.5 (mockup doesn't set one, relies on
   browser default), adding ~2px of extra leading under the glyphs beyond
   the declared 12px padding-bottom. Smaller effect than the rail heading,
   but same cause and same fix.
   > (direct child) instead of a descendant combinator: this markup is
   <span>Más de <span class="…__name">Sociedad</span></span> — a
   descendant selector matches BOTH spans (the inner one is a span too),
   so display:inline-block + padding-bottom:12px were being applied
   twice, once per span, and stacking to ~24-25px instead of 12px
   (confirmed live: outer span 40px tall, inner span independently adding
   its own 12px on top). > matches only the outer span; the inner one
   still inherits color/font-weight/etc normally (those ARE inherited
   properties), it just no longer gets its own separate box model. */
.els-cat-more-head > span {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	padding-bottom: 12px;
}
.els-cat-more-head > span .els-cat-more-head__name { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }

/* "Más de X" list — its own Query Loop (queryId 2, offset 15), a uniform
   horizontal card repeated for every item: title/excerpt/byline stacked in
   a text column on the left, a fixed 268×168 thumbnail on the right. Same
   grid-template-areas technique as the rail cards above and for the same
   reason — post-title/post-excerpt/.els-byline are separate sibling blocks
   with no placement of their own, so explicit areas replace auto-placement
   instead of leaving it to guess. */
.els-cat-more { display: flex; flex-direction: column; }
.els-cat-more .wp-block-post-template { display: contents; }
.els-cat-more .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 1fr 268px;
	grid-template-areas: "tag photo" "title photo" "excerpt photo" "byline photo";
	column-gap: 30px;
	row-gap: 0;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 26px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
}
.els-cat-more .els-cat-tag { grid-area: tag; font-size: 10.5px; }
.els-cat-more .wp-block-post-title { grid-area: title; margin: 8px 0 0; font-size: 24px; line-height: 1.16; letter-spacing: -.015em; }
.els-cat-more .wp-block-post-title a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
/* Optional per-request protection, matching current natural 2-line
   rendering (verified live) — same fallback rule as the other 3 zones. */
.els-cat-more .wp-block-post-excerpt {
	grid-area: excerpt; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.els-cat-more .els-byline { grid-area: byline; margin-top: 12px; }
.els-cat-more .els-icon-clock { width: 12px; height: 12px; }
.els-cat-more .wp-block-post-featured-image {
	grid-area: photo;
	position: relative;
	width: 268px;
	height: 168px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	margin: 0;
}
.els-cat-more .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-cat-more .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.els-cat-more .els-cat-pagination { padding: 34px 0 60px; }

@media (max-width: 960px) {
	.els-cat-magazine { grid-template-columns: 1fr; }
	/* One unconditional reset for every item — not a per-position-range
	   list. The desktop rules above explicitly place all 15 posts by
	   nth-child (including pinning 2 of them, nth-child(7) and (8), to a
	   specific grid-row:7 for the side-by-side "two-up" pair); missing even
	   one position here means it keeps its desktop row/column while
	   everything else collapses to a single column, so it lands on top of
	   whatever auto-flowed there instead — which is exactly what happened
	   with (7)/(8) previously. !important guarantees this wins outright
	   over every desktop nth-child rule above, regardless of how many more
	   get added later, instead of relying on enumerating every range again. */
	.els-cat-rail-head,
	.els-cat-magazine .wp-block-post-template > li {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) { grid-template-columns: 1fr; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-featured-image,
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-title,
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-excerpt,
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-byline,
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-tagrow { grid-column: 1; grid-row: auto; }

	.els-cat-more .wp-block-post-template > li {
		grid-template-columns: 1fr;
		grid-template-areas: "photo" "title" "excerpt" "byline";
	}
	.els-cat-more .wp-block-post-featured-image { width: 100%; height: auto; aspect-ratio: 16/10; margin-bottom: 12px; }
}

/* ==========================================================================
   category.html — genuine mobile (real "El Solidario Seccion Sociedad
   Movil.dc.html" mockup, not the ≤960px fallback above, which is a much
   cruder single-column-everything collapse and doesn't match it). Built
   zone by zone against the mockup's own exact values, confirmed with the
   user first. Dynamic per-category color, {{els_post_tag}} show/hide logic,
   clickable photos, placeholder/date/read-time/line-clamp — all untouched,
   this only resizes/repositions. ========================================== */
@media (max-width: 600px) {
	.els-cat-masthead { padding: 22px 0 18px; }
	.els-cat-masthead__inner { padding-bottom: 10px; }
	.els-cat-masthead__inner::before { width: 50px; }
	.els-cat-title { font-size: 26px; }

	/* Visual order per the mockup: lead, two-up, rail, wide, 6-grid. The
	   query loop's own DOM/nth-child order (unchanged, still lead, rail,
	   two-up, wide, 6-grid — that's desktop's layout, driven by the same
	   golden-ratio grid) differs from this; reconciled with pure CSS
	   `order`, the same technique used everywhere else on this site for a
	   mobile-only visual reorder, so nothing PHP-side has to change. */
	.els-cat-magazine .wp-block-post-template > li:nth-child(1) { order: 1; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) { order: 2; }
	.els-cat-rail-head,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) { order: 3; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) { order: 4; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) { order: 5; }

	/* ---- Lead (post 1): full-width stack, 4/3 photo (mockup — desktop
	   uses 16/9 for this same zone; the mockup's own ratio wins here). ---- */
	.els-cat-magazine .wp-block-post-template > li:nth-child(1) { padding-bottom: 22px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image { aspect-ratio: 4/3; margin-bottom: 14px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-title { margin-top: 0; font-size: 24px !important; line-height: 1.12; letter-spacing: -.015em; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-excerpt { margin-top: 10px; font-size: 14.5px !important; -webkit-line-clamp: 3; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(1) .els-byline { margin-top: 12px; }

	/* ---- Two-up (posts 7-8): the mockup's OWN CSS stacks these full-width,
	   one per row (flex-direction:column) — not a horizontal pair like
	   desktop, despite the mockup's HTML comment saying "en par"; the real
	   CSS behavior is what was built against, confirmed with the user. ---- */
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) {
		grid-column: 1 !important; padding: 22px 0; border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-featured-image { aspect-ratio: 4/3; margin-bottom: 14px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-title { margin-top: 0; font-size: 22px !important; line-height: 1.16; letter-spacing: -.012em; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .wp-block-post-excerpt { margin-top: 10px; font-size: 14px !important; -webkit-line-clamp: 3; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8) .els-byline { margin-top: 12px; }

	/* ---- Rail ("Lo más reciente", posts 2-6): compact row, text left +
	   fixed 84×62 thumbnail right — the mockup's own exact size (desktop's
	   is 92×66, close enough that the mockup's value is used outright here
	   rather than splitting the difference). margin-top:22px gives the
	   divider above it (the previous zone's own border-bottom) room to
	   breathe instead of sitting flush against the heading. Avatar +
	   reading time dropped from every card here so author + date share one
	   line at this card width — the dot separator (.els-byline__dot) and
	   the read-time span it introduces (.els-byline__read, see
	   el_solidario_post_date_with_read_time() in functions.php) go with it,
	   otherwise a dangling "·" would be left with nothing after it. ---- */
	/* margin-top needs !important: .els-cat-magazine carries WP's own
	   .is-layout-flow class (from the query block's layout:"default"),
	   and :root :where(.is-layout-flow) > * { margin-block: 24px 0 }
	   resolves to the exact same (0,1,0) specificity as a plain
	   .els-cat-rail-head selector (:root contributes 0,1,0 on its own —
	   :where() only zeroes its own argument) — so without this, which one
	   wins depends on cascade order alone and this rule was losing. */
	.els-cat-rail-head { margin-top: 22px !important; margin-bottom: 4px; padding-bottom: 10px; font-size: 12px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) { grid-template-columns: 1fr 84px; column-gap: 12px; min-height: 62px; padding: 14px 0; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-post-featured-image { width: 84px; height: 62px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-post-title { font-size: 14.5px !important; line-height: 1.22; letter-spacing: -.008em; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-byline { margin-top: 8px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .wp-block-avatar,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-byline__dot,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6) .els-byline__read { display: none; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(6) { padding-bottom: 14px; }

	/* ---- "A fondo" (post 9): the mockup drops desktop's elaborate
	   side-by-side/min-height-320px treatment entirely at this width —
	   simplified to the same plain full-width stack as the lead/two-up,
	   with the "A fondo" badge sitting above the title. ---- */
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) {
		grid-column: 1 !important; display: flex; flex-direction: column;
		margin: 22px 0 0; padding-bottom: 0; border-top: 0; border-bottom: 0;
	}
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-featured-image {
		grid-column: unset; grid-row: unset; height: auto; min-height: 0;
		aspect-ratio: 4/3; margin-bottom: 0;
	}
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-cat-tagrow { grid-column: unset; justify-self: unset; align-self: unset; margin: 14px 0 0; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-title,
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-excerpt,
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-byline {
		grid-column: unset; margin-left: 0 !important; margin-right: 0 !important;
	}
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-title { font-size: 22px !important; margin-top: 12px !important; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .wp-block-post-excerpt { font-size: 14px !important; margin-top: 10px !important; -webkit-line-clamp: 3; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(9) .els-byline { margin: 12px 0 0 !important; }

	/* ---- Grid de 6 (posts 10-15): full-width(10) → pair(11-12) →
	   pair(13-14) → full-width(15) — a distinct mobile-only pattern from
	   the mockup, not desktop's 3-column asymmetric grid and not the
	   generic "stack all 6 uniformly" ≤960px fallback above either. Needs
	   its own 2-column grid (the outer 1-column grid from ≤960px above is
	   overridden back to 2 columns here, with every zone except 11-14
	   forced to span both via grid-column:1/-1) since a mid-sequence pair
	   can't be expressed by reflowing a single-column grid alone. ---- */
	.els-cat-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px; }
	.els-cat-rail-head,
	.els-cat-magazine .wp-block-post-template > li:nth-child(1),
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+6),
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+7):nth-child(-n+8),
	.els-cat-magazine .wp-block-post-template > li:nth-child(9),
	.els-cat-magazine .wp-block-post-template > li:nth-child(10),
	.els-cat-magazine .wp-block-post-template > li:nth-child(15) {
		grid-column: 1 / -1 !important;
	}
	.els-cat-magazine .wp-block-post-template > li:nth-child(11),
	.els-cat-magazine .wp-block-post-template > li:nth-child(13) { grid-column: 1 !important; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(12),
	.els-cat-magazine .wp-block-post-template > li:nth-child(14) { grid-column: 2 !important; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+10):nth-child(-n+15) { margin-bottom: 0 !important; }
	/* nth-child(15)'s own border-bottom is deliberately NOT set here — it
	   sat right on top of .els-cat-divider below, reading as two parallel
	   lines a few px apart. .els-cat-divider is the one real separator
	   before "Más de X"; this zone's own bottom edge is bare. */
	.els-cat-magazine .wp-block-post-template > li:nth-child(10) { padding: 20px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
	.els-cat-magazine .wp-block-post-template > li:nth-child(15) { padding: 20px 0 0; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(10) .wp-block-post-featured-image,
	.els-cat-magazine .wp-block-post-template > li:nth-child(15) .wp-block-post-featured-image { aspect-ratio: 16/9; }
	/* 11-14 (the two pairs): no photo, no excerpt, no author name/avatar —
	   just the title with only its date underneath. Explicit per-request
	   simplification for this zone only (nothing else on the page); the
	   photo stays real in the DOM/PHP, just hidden here, so nothing about
	   click-through or the underlying query changes. */
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) { padding: 20px 0; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .wp-block-post-featured-image { aspect-ratio: 3/2; margin-bottom: 9px; }
	/* Divider between the top pair (11-12) and bottom pair (13-14). */
	.els-cat-magazine .wp-block-post-template > li:nth-child(13),
	.els-cat-magazine .wp-block-post-template > li:nth-child(14) { border-top: 1px solid var(--wp--preset--color--border); }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .wp-block-post-title { font-size: 14.5px !important; line-height: 1.22; letter-spacing: -.008em; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .wp-block-post-excerpt { display: none; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .els-byline { margin-top: 7px; }
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .wp-block-avatar,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .els-byline__meta a,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .els-byline__sep,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .els-byline__dot,
	.els-cat-magazine .wp-block-post-template > li:nth-child(n+11):nth-child(-n+14) .els-byline__read { display: none; }

	/* Divider before "Más de X": 48px (desktop's value) scaled down for
	   mobile. */
	.els-cat-divider,
	.wp-block-group.els-main > .els-cat-divider { margin-top: 24px; }

	/* ---- "Más de X": same compact rail pattern as "Lo más reciente"
	   above (text left + fixed thumbnail right), not the ≤960px fallback's
	   photo-above-text full stack — matches the mockup's moreArticles
	   zone, just at a bigger 140×102 thumbnail size (its own exact value).
	   grid-template-columns needs minmax(0, 1fr) on the text track, not a
	   bare 1fr — the same overflow this project has already hit more than
	   once (see .els-cat-magazine's own comment on this file, or the
	   front-page carousel work): a bare 1fr's floor is its content's
	   min-content width, so one long unbroken title pushed the whole row
	   wider than the card, shoving the 140px photo column half off the
	   right edge of the screen instead of shrinking the text column to
	   fit. minmax(0, 1fr) floors that track at 0 so text wraps instead. ---- */
	/* margin-bottom needs !important — same .is-layout-flow/margin-block
	   equal-specificity conflict as .els-cat-rail-head above (.els-cat-more-head
	   is also a direct child of .els-main, which carries .is-layout-flow). */
	.els-cat-more-head { font-size: 15px; padding-bottom: 12px; margin-bottom: 16px !important; }
	/* grid-template-areas needs a "tag" row too — omitting it here (while
	   the base rule's .els-cat-tag { grid-area: tag } stays in force) left
	   the tag with no valid area in THIS template, so it fell to implicit
	   grid placement instead of sitting above the title. Invisible on
	   thematic categories (there .els-cat-tag is empty and :empty{display:
	   none} drops it from the grid entirely, so it never showed) — only
	   visible, and broken, on Nacional/Internacional/Actualidad, where a
	   real tag renders. */
	.els-cat-more .wp-block-post-template > li {
		grid-template-columns: minmax(0, 1fr) 140px !important;
		grid-template-areas: "tag photo" "title photo" "excerpt photo" "byline photo" !important;
		column-gap: 14px; padding: 16px 0;
	}
	.els-cat-more .els-cat-tag { font-size: 10px; margin-bottom: 4px; }
	.els-cat-more .wp-block-post-featured-image { width: 140px !important; height: 102px !important; aspect-ratio: auto !important; margin-bottom: 0 !important; }
	.els-cat-more .wp-block-post-title { font-size: 15.5px !important; line-height: 1.2; letter-spacing: -.008em; margin-top: 0; }
	/* Excerpt, avatar and reading time dropped — same "date only" byline
	   as the grid-of-6 pairs above, so only author + date remain. */
	.els-cat-more .wp-block-post-excerpt { display: none; }
	.els-cat-more .els-byline { margin-top: 7px; }
	.els-cat-more .els-byline__meta { font-size: 11px; }
	.els-cat-more .wp-block-avatar,
	.els-cat-more .els-byline__dot,
	.els-cat-more .els-byline__read { display: none; }

	/* Pagination: arrows only, no "Anterior"/"Siguiente" text — priority
	   is screen space at this width. font-size:0 collapses the original
	   label text to nothing without touching the block's own text (still
	   there for screen readers); the arrow itself is a ::before/::after
	   glyph at its own explicit size, not the label text. */
	.els-cat-pagination { gap: 14px; padding: 22px 0 40px; }
	.els-cat-pagination .wp-block-query-pagination-previous,
	.els-cat-pagination .wp-block-query-pagination-next {
		font-size: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
	}
	.els-cat-pagination .wp-block-query-pagination-previous::before { content: "‹"; font-size: 20px; line-height: 1; }
	.els-cat-pagination .wp-block-query-pagination-next::after { content: "›"; font-size: 20px; line-height: 1; }
}

/* ==========================================================================
   author.html (El Solidario Autor.dc.html) — one generic template for any
   author, same architecture as category.html: a single Query Loop for the
   fixed-size "top" section (featured + grid), a second independently-
   paginated Query Loop for "Más de {autor}", both scoped by
   el_solidario_scope_query_loops_to_archive() in functions.php. Reused
   as-is from category.html rather than rebuilt: .els-cat-photo-placeholder
   fallback (global filter, no changes needed), .els-cat-divider,
   .els-cat-pagination (already archive-color-independent — it was always
   ink/faint, never the dynamic category accent, so it's correct here
   unchanged). NOT reused: .els-byline (built around an avatar, but every
   article on an author page is already by that one author — repeating
   their own avatar on every card would be redundant, confirmed against
   the mockup, which drops the avatar here) and the labeled "‹ Anterior" /
   "Siguiente ›" pagination text (this mockup's own pager is bare "‹"/"›"
   with no words, set via the query-pagination-previous/next label attrs
   in the template rather than a new CSS variant). accent color is the
   plain brand teal preset throughout — author pages aren't category-
   scoped, so none of category.html's --els-cat-accent-* custom properties
   apply here. ========================================================== */

.els-author-header {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 38px 0 26px;
}
.els-author-avatar.wp-block-avatar { width: 88px; height: 88px; flex-shrink: 0; }
.els-author-avatar.wp-block-avatar img { width: 88px; height: 88px; object-fit: cover; }
.els-author-header__body { flex: 1; min-width: 0; }
.els-author-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
	text-transform: none;
}
.wp-block-post-author-biography.els-author-bio {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
	max-width: 760px;
}
.els-author-socials {
	margin-top: 16px;
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}
/* An author with zero social links renders this div with no children
   (el_solidario_author_social_icons() builds an empty string in that
   case) — without this, margin-top:16px above still applied to the empty
   box, leaving a bare gap under the bio with nothing in it. :empty
   collapses the whole block instead. */
.els-author-socials:empty { display: none; }
/* Resting state: bare icon, no circle — border kept at 1px but transparent
   (rather than removed outright) so the hover state below doesn't shift
   the icon by adding a border where there wasn't one. */
.els-author-social {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid transparent;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700;
	color: var(--wp--preset--color--primary);
	transition: all .18s ease;
}
.els-author-social:hover { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }
.els-author-social svg { display: block; }

/* Divider between the author header (bio + social icons) and the featured
   article below — not present in the mockup at this exact point (its own
   header→destacado gap there is a plain 26px, no rule), added per explicit
   request with symmetric space above/below. Same visual style (1px line,
   --border color) as .els-cat-divider elsewhere in this file, own class
   because the spacing here is symmetric (34px/34px total) rather than that
   divider's 48px/0. Own margin-top is 8px, not 34px: .els-author-header
   already carries padding-bottom:26px (mockup value, pre-existing), so the
   full visible gap above this div is 26+8=34px — matching the 34px below
   exactly, confirmed live (getBoundingClientRect: 34.00px both sides).
   Needs the higher-specificity child-combinator override below for the
   same reason established throughout this file: this div is a direct
   child of .wp-block-group.els-main, and the Round-3 WP-core
   block-gap-neutralizing rule (.wp-block-group.els-main > *, specificity
   0,2,0) beats this rule's own margin-top (0,1,0) otherwise. Only the top
   margin needs the override — that neutralizer only touches
   margin-block-start, so the bottom 34px here is unaffected. */
.els-author-header-divider { height: 1px; background: var(--wp--preset--color--border); margin: 8px 0 34px; }
.wp-block-group.els-main > .els-author-header-divider { margin-top: 8px; }

/* Top section: featured (post 1, full-width row) + 3-column grid (posts 2-7).
   Explicit grid-column/grid-row on every item, never auto-placement —
   established rule in this file after the rail auto-placement bug earlier:
   a sparse auto-placement cursor doesn't always land where DOM order alone
   would suggest. */
.els-author-magazine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; row-gap: 36px; }
.els-author-magazine .wp-block-post-template { display: contents; }
.els-author-magazine .wp-block-post-template > li { list-style: none; margin: 0; cursor: pointer; min-width: 0; }
.els-author-magazine .els-author-textcol { display: contents; }
.els-author-magazine .wp-block-post-featured-image {
	position: relative; display: block; width: 100%; overflow: hidden;
	background: var(--wp--preset--color--surface); margin: 0;
}
.els-author-magazine .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-author-magazine .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.els-author-magazine .els-author-cat { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.els-author-magazine .els-author-byline { display: flex; align-items: center; flex-wrap: wrap; color: var(--wp--preset--color--muted); }
.els-author-magazine .els-author-byline a { color: var(--wp--preset--color--ink); font-weight: 700; }
.els-author-magazine .els-author-byline a:hover { color: var(--wp--preset--color--primary); }
.els-author-magazine .els-byline__sep { color: var(--wp--preset--color--faint); }
/* text-transform:uppercase was missing here — the "M" date-format token
   ("d M Y") always renders PHP's title-case month abbreviation ("Jul"),
   same as category.html; category.html's own uppercase treatment lives on
   .els-byline .wp-block-post-date time specifically, a class this
   template never used (no avatar here, so a different byline class),
   which is why this rule was never carried over with it. */
.els-author-magazine .wp-block-post-date time { font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.els-author-magazine .els-byline__dot { color: var(--wp--preset--color--faint); }
.els-author-magazine .els-byline__read { display: inline-flex; align-items: center; gap: 4px; }

/* Post 1 — featured, full width, text | image (mockup: 1fr 1.3fr — the
   opposite ratio of category.html's lead, text narrower than the photo). */
.els-author-magazine .wp-block-post-template > li:nth-child(1) {
	grid-column: 1 / 4; grid-row: 1;
	display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 36px; align-items: center;
	padding-bottom: 34px; border-bottom: 1px solid var(--wp--preset--color--border);
}
/* display:contents (the default above) doesn't work here — .els-author-
   textcol needs a real box, not contents, so grid-column:1 actually
   applies to something; a display:contents element has no box of its own
   for a grid rule to place. Confirmed live: with contents left on, the
   4 promoted children didn't reliably land together in column 1 (found
   the title specifically landing in column 2 next to the photo instead —
   the same auto-placement unpredictability already worked around for the
   rail zone in category.html). display:flex;flex-direction:column here
   groups cat+title+excerpt+byline as one real column-1 item instead.
   grid-row:1 explicit on both — the fix above still left them without an
   explicit row each, and the exact same auto-placement bug already found
   and fixed for the rail zone in category.html recurred here: the photo
   (first in DOM, grid-column:2, the LAST column) gets auto-placed into
   row 1, which advances the sparse-packing cursor past row 1 entirely,
   so .els-author-textcol (grid-column:1, row auto) can't backfill row
   1's now-passed column 1 and lands in row 2 instead — confirmed live,
   390px apart vertically, not just off-center. */
.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-author-textcol { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image { grid-column: 2; grid-row: 1; aspect-ratio: 16/10; }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-author-cat { font-size: 11px; }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-title { margin: 12px 0 0; font-size: 30px; line-height: 1.14; letter-spacing: -.015em; }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-excerpt { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--body-text); }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-author-byline { margin-top: 16px; gap: 7px; font-size: 12.5px; }
.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-icon-clock { width: 13px; height: 13px; }

/* Posts 2-7 — 3-column grid, 2 rows of 3. */
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) { display: flex; flex-direction: column; }
.els-author-magazine .wp-block-post-template > li:nth-child(2) { grid-column: 1; grid-row: 2; }
.els-author-magazine .wp-block-post-template > li:nth-child(3) { grid-column: 2; grid-row: 2; }
.els-author-magazine .wp-block-post-template > li:nth-child(4) { grid-column: 3; grid-row: 2; }
.els-author-magazine .wp-block-post-template > li:nth-child(5) { grid-column: 1; grid-row: 3; }
.els-author-magazine .wp-block-post-template > li:nth-child(6) { grid-column: 2; grid-row: 3; }
.els-author-magazine .wp-block-post-template > li:nth-child(7) { grid-column: 3; grid-row: 3; }
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .wp-block-post-featured-image { margin-bottom: 13px; aspect-ratio: 3/2; }
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .els-author-cat { font-size: 10.5px; }
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .wp-block-post-title { margin: 8px 0 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
/* line-clamp:3 — same protection already applied to category.html's own
   3-column grid, for the same reason (unclamped excerpts here can run
   long enough to make cards in the same row visibly uneven in height). */
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .wp-block-post-excerpt {
	margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .els-author-byline { margin-top: 10px; gap: 6px; font-size: 11.5px; }
.els-author-magazine .wp-block-post-template > li:nth-child(n+2):nth-child(-n+7) .els-icon-clock { width: 12px; height: 12px; }

/* "Más de {autor}" heading — a literal h3 is correct here (not the h4
   article-title workaround used elsewhere): this is a genuine section
   header, theme.json's global h3 style (uppercase Public Sans) is
   reserved exactly for that role, and the mockup's own values (Public
   Sans 700, uppercase, .01em tracking) already match it — only font-size
   needs overriding down from the 22px preset to this component's 19px. */
/* margin-top:34px — matches category.html's own .els-cat-more-head
   padding-top exactly, the established value for this same gap (divider
   → "Más de X" heading) there. Previously 0, so the divider and this
   heading sat directly against each other with no space at all.
   .wp-block-group.els-main > .els-author-more-head (0,3,0), not the
   plain class alone (0,1,0) — this h3 is a direct child of .els-main
   (same as .els-cat-divider elsewhere in this file), and the Round-3 WP
   core block-gap reset .wp-block-group.els-main > * { margin-block-start:
   0px } (0,2,0) was winning over the margin declared here and silently
   zeroing it — confirmed live via getComputedStyle before landing on this
   fix rather than assuming the first attempt worked. */
.els-author-more-head { font-size: 19px; margin: 0 0 20px; }
.wp-block-group.els-main > .els-author-more-head { margin-top: 34px; }
/* Nombre del autor en color de marca (mismo criterio de dos tonos que
   .els-cat-more-head__name en category.html) — sin la variable de acento
   por categoría, porque author.html no está scoped a una categoría
   (mismo comentario ya presente arriba en este bloque: "accent color is
   the plain brand teal preset throughout"). */
.els-author-more-head__name { color: var(--wp--preset--color--primary); }

/* "Más de {autor}" list — horizontal cards, text | 220×148 photo. Same
   grid-template-areas technique as .els-cat-more (explicit areas so post-
   title/post-excerpt/post-date, separate sibling blocks with no placement
   of their own, can't land wrong) — "date" here instead of "byline" since
   this zone's mockup drops the avatar/author-name/read-time entirely and
   shows only a bare date (confirmed against the source, not assumed). */
.els-author-more { display: flex; flex-direction: column; }
.els-author-more .wp-block-post-template { display: contents; }
.els-author-more .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 1fr 220px;
	grid-template-areas: "tag photo" "title photo" "excerpt photo" "date photo";
	column-gap: 22px;
	row-gap: 0;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid #e2e8e8;
	cursor: pointer;
}
.els-author-more .els-author-textcol { display: contents; }
.els-author-more .els-author-cat { grid-area: tag; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.els-author-more .wp-block-post-title { grid-area: title; margin: 7px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.els-author-more .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.els-author-more .wp-block-post-excerpt { grid-area: excerpt; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--muted); }
.els-author-more-date.wp-block-post-date { grid-area: date; margin-top: 8px; }
.els-author-more-date.wp-block-post-date time { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.els-author-more .wp-block-post-featured-image {
	grid-area: photo; position: relative; width: 220px; height: 148px;
	overflow: hidden; background: var(--wp--preset--color--surface); margin: 0;
}
.els-author-more .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-author-more .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.els-author-more .els-cat-pagination { padding: 30px 0 50px; }
/* El primer artículo no lleva su propio border-top: el div .els-author-
   header-divider... perdón, .els-cat-divider ya puesto antes de "Más de
   X" hacía de línea real; este border-top (el mismo que separa cada
   tarjeta de la siguiente) quedaba pegado justo debajo del heading,
   leyéndose como una segunda línea paralela — mismo tipo de "divisor
   duplicado" ya resuelto en category.html quitando el border-bottom
   sobrante de su nth-child(15). */
.els-author-more .wp-block-post-template > li:first-child { border-top: none; }

@media (max-width: 960px) {
	.els-author-header { flex-direction: column; align-items: flex-start; }
	.els-author-magazine { grid-template-columns: 1fr; }
	.els-author-magazine .wp-block-post-template > li,
	.els-author-magazine .wp-block-post-template > li:nth-child(1) {
		grid-column: 1 !important; grid-row: auto !important;
		display: flex !important; flex-direction: column;
	}
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-author-textcol,
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image {
		grid-column: auto;
	}
	.els-author-more .wp-block-post-template > li {
		grid-template-columns: 1fr;
		grid-template-areas: "photo" "tag" "title" "excerpt" "date";
	}
	.els-author-more .wp-block-post-featured-image { width: 100%; height: auto; aspect-ratio: 16/10; margin-bottom: 12px; }
}

/* ---------- author.html — móvil real (≤600px) ----------
   Construido contra "El Solidario Autor Movil.dc.html". El ≤960px de arriba
   ya resuelve el colapso estructural genérico (columna única, sin
   auto-placement); este bloque solo cambia tamaños/disposición fina para
   ≤600px, sin tocar lo ya resuelto arriba. */
@media (max-width: 600px) {
	/* Cabecera: centrada (el ≤960px la deja alineada a la izquierda para la
	   franja tablet — eso no se toca, sigue vigente entre 600-960px; esto
	   solo gobierna ≤600px, donde el mockup real la muestra centrada). */
	.els-author-header { align-items: center; text-align: center; padding: 24px 0 16px; gap: 4px; }
	.els-author-avatar.wp-block-avatar,
	.els-author-avatar.wp-block-avatar img { width: 76px; height: 76px; }
	.els-author-header__body { display: flex; flex-direction: column; align-items: center; }
	.els-author-title { font-size: 24px; }
	.wp-block-post-author-biography.els-author-bio { font-size: 14px; text-align: center; margin-top: 10px; }
	.els-author-socials { justify-content: center; margin-top: 14px; }
	.els-author-social { width: 32px; height: 32px; }

	/* Divisor: 8px (propio, sin cambiar) + 16px del padding-bottom de la
	   cabecera de arriba = 24px arriba; mismo criterio de simetría que en
	   escritorio, solo con el valor reescalado — 24px abajo también. */
	.els-author-header-divider,
	.wp-block-group.els-main > .els-author-header-divider { margin: 8px 0 24px; }

	/* Grid superior (destacado + 6): en escritorio es 3 columnas; el ≤960px
	   de arriba ya lo fuerza a 1 columna/flex genérico. Para ≤600px lo
	   reconstruimos como grid de 2 columnas con posición explícita por
	   nth-child (nunca auto-placement — mismo criterio ya establecido en
	   este archivo tras el bug de auto-placement del propio destacado):
	   post 1 = destacado (fila completa), post 2 = artículo completo 16:9
	   (fila completa), posts 3-4 = pareja lado a lado, posts 5-7 = lista
	   compacta horizontal (fila completa cada uno). Coincide 1:1 con el
	   orden del mockup (completo, pareja, lista) sin necesitar reordenar
	   nada — el orden del DOM ya es ese. */
	.els-author-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 26px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(1) { grid-column: 1 / -1 !important; grid-row: 1 !important; padding-bottom: 24px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(2) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(3) { grid-column: 1 !important; grid-row: 3 !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(4) { grid-column: 2 !important; grid-row: 3 !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(5) { grid-column: 1 / -1 !important; grid-row: 4 !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(6) { grid-column: 1 / -1 !important; grid-row: 5 !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(7) { grid-column: 1 / -1 !important; grid-row: 6 !important; }

	/* Destacado (post 1): mockup pide foto 4:3, no 16:10 como escritorio.
	   margin-bottom necesario aquí porque el ≤960px de arriba ya convierte
	   este item en flex-column (foto encima, texto debajo) — a diferencia
	   de escritorio, donde van lado a lado y no hace falta un margen
	   vertical entre ambos. 13px — el mismo valor que el resto de tarjetas
	   de esta página, para que la etiqueta no quede pegada a la foto. */
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image { aspect-ratio: 4/3; margin-bottom: 13px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-title { font-size: 23px; margin-top: 10px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .wp-block-post-excerpt { font-size: 14.5px; margin-top: 10px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-author-byline { font-size: 11px; margin-top: 12px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(1) .els-icon-clock { width: 11px; height: 11px; }

	/* Post 2: artículo completo, foto 16:9, byline completo (con tiempo de
	   lectura) — el único de los 6 restantes que lo conserva. margin-bottom
	   forzado a 13px (con !important): la regla base de escritorio usa un
	   selector de rango, :nth-child(n+2):nth-child(-n+7), que cuenta DOS
	   pseudo-clases de especificidad frente a la una sola de este selector
	   puntual — así que sin !important esta declaración perdía la cascada
	   en silencio y el valor real seguía siendo el 13px heredado de
	   escritorio (confirmado en vivo: un intento anterior de bajarlo a
	   12px no tuvo ningún efecto medible). Mismo valor que la pareja de
	   abajo y que el destacado, para consistencia real en las 4 tarjetas. */
	.els-author-magazine .wp-block-post-template > li:nth-child(2) .wp-block-post-featured-image { aspect-ratio: 16/9; margin-bottom: 13px !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(2) .els-author-cat { font-size: 10px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(2) .wp-block-post-title { font-size: 19px; margin-top: 6px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(2) .wp-block-post-excerpt { font-size: 13px; margin-top: 6px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(2) .els-author-byline { font-size: 11px; margin-top: 8px; }

	/* Divisor entre el artículo completo (post 2) y la pareja (3-4) — mismo
	   truco ya usado en category.html para separar dos grupos dentro de un
	   mismo grid (border-top repetido en ambos items de la fila, en vez de
	   un div aparte, porque un div no podría abarcar limpiamente ambas
	   columnas de este grid explícito). */
	.els-author-magazine .wp-block-post-template > li:nth-child(3),
	.els-author-magazine .wp-block-post-template > li:nth-child(4) {
		border-top: 1px solid var(--wp--preset--color--border);
		padding-top: 22px;
	}

	/* Posts 3-4: pareja lado a lado, foto 3:2, byline compacto "autor | fecha"
	   sin tiempo de lectura (mockup: no se muestra en esta zona). Mismo
	   !important que el post 2 de arriba y por la misma razón (la regla
	   base de rango :nth-child(n+2):nth-child(-n+7) le gana en
	   especificidad a un :nth-child(3)/:nth-child(4) puntual). */
	.els-author-magazine .wp-block-post-template > li:nth-child(3) .wp-block-post-featured-image,
	.els-author-magazine .wp-block-post-template > li:nth-child(4) .wp-block-post-featured-image { aspect-ratio: 3/2; margin-bottom: 13px !important; }
	.els-author-magazine .wp-block-post-template > li:nth-child(3) .els-author-cat,
	.els-author-magazine .wp-block-post-template > li:nth-child(4) .els-author-cat { font-size: 9px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(3) .wp-block-post-title,
	.els-author-magazine .wp-block-post-template > li:nth-child(4) .wp-block-post-title { font-size: 14.5px; margin-top: 6px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(3) .wp-block-post-excerpt,
	.els-author-magazine .wp-block-post-template > li:nth-child(4) .wp-block-post-excerpt {
		font-size: 11.5px; margin-top: 6px;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.els-author-magazine .wp-block-post-template > li:nth-child(3) .els-author-byline,
	.els-author-magazine .wp-block-post-template > li:nth-child(4) .els-author-byline { font-size: 10px; margin-top: 6px; }

	/* Posts 5-7: lista horizontal compacta, foto a la derecha (1fr 96px) —
	   mismo patrón ya resuelto para el destacado (post 1): .els-author-textcol
	   necesita una caja real (flex, no contents) para que grid-column:1 le
	   aplique, y grid-row explícito en ambos para evitar el mismo bug de
	   auto-placement ya documentado arriba en este archivo. */
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 96px;
		column-gap: 12px;
		align-items: center;
		padding: 14px 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) .els-author-textcol {
		grid-column: 1; grid-row: 1; display: flex; flex-direction: column;
	}
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) .wp-block-post-featured-image {
		grid-column: 2; grid-row: 1; aspect-ratio: 3/2; margin-bottom: 0;
	}
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) .els-author-cat { font-size: 9.5px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) .wp-block-post-title { font-size: 15px; margin-top: 4px; }
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) .wp-block-post-excerpt {
		font-size: 11.5px; margin-top: 4px;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.els-author-magazine .wp-block-post-template > li:nth-child(n+5):nth-child(-n+7) .els-author-byline { font-size: 10.5px; margin-top: 4px; }

	/* Posts 3-7 comparten el recorte de tiempo de lectura del byline —
	   el punto separador (.els-byline__dot) va junto, si no queda huérfano
	   al final de la fecha sin nada que separar. */
	.els-author-magazine .wp-block-post-template > li:nth-child(n+3):nth-child(-n+7) .els-byline__read,
	.els-author-magazine .wp-block-post-template > li:nth-child(n+3):nth-child(-n+7) .els-byline__dot { display: none; }

	/* "Más de {autor}": mismo patrón lado-a-lado que escritorio, solo a
	   escala menor (foto 110×80 en vez de 220×148) — NO el apilado del
	   ≤960px de arriba. Igual que la corrección de category.html: hay que
	   declarar las 4 filas completas ("tag/title/excerpt/date" + "photo"
	   en cada una), nunca omitir una, porque .wp-block-post-featured-image
	   sigue teniendo grid-area:photo fijo desde la regla base y cualquier
	   fila faltante lo deja en auto-placement (el mismo bug ya visto en
	   .els-cat-more). */
	.els-author-more .wp-block-post-template > li {
		grid-template-columns: minmax(0, 1fr) 110px !important;
		grid-template-areas: "tag photo" "title photo" "excerpt photo" "date photo" !important;
		column-gap: 14px; padding: 16px 0;
	}
	.els-author-more .els-author-cat { font-size: 9.5px; }
	.els-author-more .wp-block-post-title { font-size: 15.5px; margin-top: 5px; }
	.els-author-more .wp-block-post-excerpt {
		font-size: 12px; margin-top: 5px;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.els-author-more-date.wp-block-post-date time { font-size: 10.5px; }
	.els-author-more .wp-block-post-featured-image { width: 110px; height: 80px; margin-bottom: 0; }

	/* Paginación: se reutiliza tal cual .els-cat-pagination de categoría
	   (ya reducida a solo flechas "‹"/"›" ahí) — aquí el resultado es
	   idéntico al valor real ya presente en el template (bare "‹"/"›", sin
	   texto "Anterior"/"Siguiente"), así que no hace falta duplicar esa
	   regla; solo se ajusta el padding propio de author.html que por mayor
	   especificidad (.els-author-more .els-cat-pagination) le ganaba al
	   valor reducido de categoría. */
	.els-author-more .els-cat-pagination { padding: 20px 0 36px; }
}

/* ---------- Búsqueda (search.html) ---------- */
.els-search-bar { display: flex; align-items: stretch; padding: 36px 0 26px; }
.els-search-bar__input {
	flex: 1; min-width: 0;
	border: 2px solid var(--wp--preset--color--primary); border-right: 0;
	outline: 0; background: transparent;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px; color: var(--wp--preset--color--ink);
	padding: 15px 22px;
}
.els-search-bar__input::placeholder { color: var(--wp--preset--color--faint); }
.els-search-bar__btn {
	border: 0; background: var(--wp--preset--color--primary); color: #fff;
	padding: 0 22px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Same relative-container + ::before accent-bar technique as
   .els-cat-masthead__inner / .els-cat-masthead__inner::before — reused
   here rather than the mockup's literal extra <span>, since the theme
   already solved "border-bottom + short accent bar under a heading" once. */
.els-search-heading { position: relative; border-bottom: 2px solid var(--wp--preset--color--ink); padding-bottom: 14px; margin-bottom: 8px; }
.els-search-heading::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 52px; height: 4px; background: var(--wp--preset--color--primary); }
.els-search-heading__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700; font-size: 22px; letter-spacing: .01em; line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.els-search-heading__count { font-weight: 600; font-size: 16px; text-transform: none; color: var(--wp--preset--color--muted); }

/* Result cards: date | text | 150×100 photo, explicit grid-template-areas
   (never auto-placement) same as .els-author-more's own cards — only 3
   grid-level children here (date, textcol, photo) since, unlike
   .els-author-more, the text column's own children (cat/title/author)
   stay in normal flow inside one grid area rather than each needing a
   separate placement of their own. */
.els-search-results { display: flex; flex-direction: column; }
.els-search-results .wp-block-post-template { display: contents; }
.els-search-results .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 110px 1fr 150px;
	grid-template-areas: "date text photo";
	column-gap: 22px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
	cursor: pointer;
}
.els-search-date.wp-block-post-date { grid-area: date; }
.els-search-date.wp-block-post-date time { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--wp--preset--color--muted); white-space: nowrap; }
.els-search-textcol { grid-area: text; min-width: 0; }
.els-search-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.els-search-cat:empty { display: none; }
.els-search-textcol .wp-block-post-title { margin: 8px 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 20px; line-height: 1.22; letter-spacing: -.01em; }
.els-search-textcol .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
/* .wp-block-post-author-name is display:inline globally (line 613) — correct
   for category.html/author.html, where it sits as one inline segment inside
   a flex byline row alongside avatar/separator/date. Here it's the sole,
   standalone second line under the title, its own row — vertical margins
   are no-ops on inline elements, which is why the mockup's own
   margin-top:10px (kept as-is below, it was never wrong) rendered as a bare
   ~4.5px line-height gap instead. display:block makes it apply. */
.els-search-author.wp-block-post-author-name { display: block; margin-top: 10px; font-size: 12.5px; }
.els-search-author.wp-block-post-author-name a { color: var(--wp--preset--color--ink); font-weight: 600; }
/* First result carries no border-top of its own — .els-search-heading
   right above it already has a real divider (its 2px border-bottom), so
   this light 1px line sat right underneath it, reading as a second,
   fainter duplicate. Same fix already applied to .els-author-more's first
   item for the identical reason. */
.els-search-results .wp-block-post-template > li:first-child { border-top: none; }
.els-search-results .wp-block-post-featured-image {
	grid-area: photo; position: relative; width: 150px; height: 100px;
	overflow: hidden; background: var(--wp--preset--color--surface); margin: 0;
}
.els-search-results .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-search-results .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }

/* Zero-results state — not covered by the mockup (its demo data always
   has 15 fake results), designed to match the site's own type/color
   language rather than left as a bare WordPress default. */
.els-search-empty { padding: 48px 0 60px; text-align: center; }
.els-search-empty__text { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 20px; color: var(--wp--preset--color--ink); }
.els-search-empty__hint { margin: 10px 0 0; font-size: 14px; color: var(--wp--preset--color--muted); }

@media (max-width: 960px) {
	.els-search-bar__input { font-size: 18px; padding: 13px 18px; }
	.els-search-results .wp-block-post-template > li {
		grid-template-columns: 1fr;
		grid-template-areas: "photo" "date" "text";
	}
	.els-search-results .wp-block-post-featured-image { width: 100%; height: auto; aspect-ratio: 3/2; margin-bottom: 4px; }
}

/* .els-search-byline: a SECOND, mobile-only post-date block placed inside
   .els-search-textcol right after the author name (see templates/
   search.html) — the mockup's card keeps date inline with the author on
   one line ("autor | fecha"), not in its own separate grid column like
   desktop's .els-search-date. Rather than fight CSS Grid to pull a
   grid-item sibling (.els-search-date) visually inside a nested box, or
   restructure the one real date block and reconstruct desktop's column
   from scratch, the template just renders the post's date a second time
   in the place it's actually needed at mobile; the two swap visibility at
   the breakpoint below so exactly one is ever shown. Hidden by default
   (desktop/tablet keep the original .els-search-date column, untouched).
   !important: this wp:group block carries layout:{"type":"flex"}, so core
   auto-injects "body .is-layout-flex { display:flex }" (specificity 0,1,1)
   — same class of bug as the .is-layout-flow/margin-block conflicts
   elsewhere in this file, beating the plain class selector (0,1,0) here
   too. Confirmed live: without !important this rendered visible (flex) at
   desktop, duplicating the date already shown in .els-search-date's own
   column. */
.els-search-byline { display: none !important; }

/* ---------- search.html — móvil real (≤600px) ----------
   Built against "El Solidario Buscador Movil.dc.html" — its card is a
   real 2-column grid (grid-template-columns: 1fr 100px, text | photo),
   NOT the photo-stacked-on-top pattern used elsewhere on this site; that
   assumption was wrong in an earlier pass and is corrected here. The
   ≤960px block above still handles the generic tablet collapse (single
   column, date stacked above the text as its own row) — untouched, this
   only replaces the card for true mobile. Pagination isn't touched here:
   it reuses .els-cat-pagination, already reduced to bare arrows at ≤600px
   by category.html's own rule (same class, same text-label markup — "‹
   Anterior"/"Siguiente ›" — so it already renders like the mockup's bare
   arrows for free). */
@media (max-width: 600px) {
	.els-search-bar { padding: 22px 0 18px; }
	.els-search-bar__input { font-size: 17px; padding: 11px 14px; }
	.els-search-bar__btn { padding: 0 16px; }
	.els-search-bar__btn svg { width: 17px; height: 17px; }

	.els-search-heading { padding-bottom: 12px; margin-bottom: 6px; }
	.els-search-heading::before { width: 40px; }
	.els-search-heading__title { font-size: 16px; font-weight: 600; text-transform: none; line-height: 1.35; }
	/* Mockup drops the "—" and puts the count on its own line below the
	   title instead of inline after it — the dash reads as an orphan
	   without something before it once the count wraps, so it's hidden
	   rather than reflowed. */
	.els-search-heading__dash { display: none; }
	.els-search-heading__count { display: block; margin-top: 6px; font-size: 12.5px; }

	/* Card: text | 100×74 photo, same explicit-grid-area discipline used
	   everywhere else in this file (never auto-placement). Only 2 areas
	   now — "date" is dropped entirely; the standalone .els-search-date
	   that used to own it is hidden below in favor of .els-search-byline's
	   inline date, nested inside .els-search-textcol's own "text" area. */
	.els-search-results .wp-block-post-template > li {
		grid-template-columns: 1fr 100px;
		grid-template-areas: "text photo";
		column-gap: 14px;
		padding: 16px 0;
	}
	.els-search-date.wp-block-post-date { display: none; }
	/* The standalone author line (desktop's own, block/its-own-row) is
	   swapped out for the copy nested in .els-search-byline below — same
	   duplicate-and-toggle approach as the date, since this single element
	   can't visually live both on its own line (desktop) and inline next
	   to the date (mobile) at once. */
	.els-search-author.wp-block-post-author-name { display: none; }
	.els-search-cat { font-size: 10px; }
	.els-search-textcol .wp-block-post-title { margin: 6px 0 0; font-size: 15px; }
	.els-search-byline {
		display: flex !important; align-items: center;
		/* core auto-injects gap:24px on any .is-layout-flex block (this
		   wp:group carries layout:{"type":"flex"}) — without zeroing it
		   here, that 24px stacked on top of the separator's own small
		   margin below, reading as author/date sitting much too far apart. */
		gap: 0;
		margin-top: 7px; font-size: 11px;
	}
	.els-search-byline-author.wp-block-post-author-name { margin-top: 0; font-size: 11px; color: var(--wp--preset--color--ink); font-weight: 600; }
	/* !important: core ALSO auto-injects ".is-layout-flex > :is(*, div) {
	   margin:0}" (specificity 0,1,1) on every direct child of this flex
	   group, beating the plain class selector (0,1,0) here — same bug
	   class as .els-search-byline's own display:none fix above, just
	   hitting margin instead of display this time. Confirmed live: without
	   !important this computed to a flat 0px, reading as the separator
	   sitting flush against both neighbors. */
	.els-search-byline__sep { margin: 0 5px !important; color: var(--wp--preset--color--faint); }
	/* Same uppercase/weight/tracking as .els-search-date's own time (its
	   desktop counterpart) — this one had been set to text-transform:none,
	   which undid that and left PHP's raw "d M Y" output mixed-case
	   ("Jul") instead of the site's established all-caps date style. */
	.els-search-byline-date.wp-block-post-date time { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--wp--preset--color--muted); }
	.els-search-results .wp-block-post-featured-image { width: 100px; height: 74px; }
}

/* ---------- Artículo (single.html) ---------- */
/* The mockup's own page background is #f4f6f6 (this theme's --background
   token) here, unlike every other template's white — including its header
   strips (masthead/nav/directo, not the always-teal topbar or the footer,
   which stay unchanged). Scoped to body.single so it only affects this one
   template; WordPress adds that class automatically on singular posts. */
body.single .els-masthead,
body.single .els-nav,
body.single .els-directo,
body.single .els-article-main {
	background: var(--wp--preset--color--background);
}

.els-article-header { max-width: 760px; margin: 0 auto; padding: 40px 0 0; }
.els-article-geo-topic { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
.els-article-title.wp-block-post-title {
	margin: 14px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 44px; line-height: 1.08; letter-spacing: -.02em;
	color: var(--wp--preset--color--ink);
}
.els-article-hero { max-width: 980px; margin: 28px auto 0; }
.wp-block-group.els-main > .els-article-hero { margin-top: 28px; }
.els-article-hero .wp-block-post-featured-image { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--wp--preset--color--surface); margin: 0; }
.els-article-hero .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-article-caption { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--muted); font-style: italic; }

.els-article-meta-row { max-width: 760px; margin: 26px auto 0; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--border); gap: 20px; }
.wp-block-group.els-main > .els-article-meta-row { margin-top: 26px; }
.els-article-byline { gap: 11px; }
.els-article-byline__meta { font-size: 13.5px; color: var(--wp--preset--color--ink); }
.els-article-byline__name.wp-block-post-author-name { display: block; font-weight: 700; color: var(--wp--preset--color--ink); }
.els-article-byline__name.wp-block-post-author-name a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
.els-article-byline__sub { margin-top: 3px; gap: 7px; font-size: 13px; }
.els-article-byline__label { font-weight: 600; letter-spacing: .03em; color: var(--wp--preset--color--ink); }
.els-article-byline__sub .wp-block-post-date time { color: var(--wp--preset--color--muted); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.els-article-byline__sub .els-byline__dot { color: #c3cdce; margin: 0 4px; }
.els-article-byline__sub .els-byline__read { color: var(--wp--preset--color--muted); }
.els-article-share { gap: 10px; }
.els-article-share__icon { flex-shrink: 0; color: var(--wp--preset--color--muted); }
.els-article-share__icons { display: flex; gap: 10px; }
/* Resting state: bare icon, no circle — same treatment as .els-social-icon
   and .els-author-social (border kept at 1px but transparent rather than
   removed, so hover doesn't shift the icon by adding a border where there
   wasn't one). */
.els-article-share-icon {
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid transparent;
	display: flex; align-items: center; justify-content: center;
	color: var(--els-cat-accent-mid, var(--wp--preset--color--primary));
	transition: all .18s ease;
}
.els-article-share-icon svg { display: block; }
.els-article-share-icon:hover { background: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); color: #fff; border-color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }

.els-article-body.wp-block-post-content { max-width: 700px; margin: 0 auto; padding: 34px 0 8px; }
.els-article-body.wp-block-post-content > p { margin: 0 0 22px; font-size: 20px; line-height: 1.75; color: var(--wp--preset--color--ink); }

/* Legacy article body resilience. Pre-redesign posts (some by authors no
   longer on the team — checked real content before writing this, e.g.
   post 20716, one of the site's most-viewed by real wp-postviews count)
   carry whatever raw HTML their old theme produced: unstyled h2/h3s,
   embedded post-preview cards, old "Te puede interesar" boxes with
   unknown classes, occasionally a broken <img>. Their original internal
   design can't be recreated (we don't have the old theme), but this
   container can't be allowed to break the page's own width/margins
   around them either — "Lo más leído" surfaces these old posts by real
   view count, so this isn't a rare edge case. Rules here are tag-based
   (not tied to any specific class) so they apply no matter what markup a
   given legacy box happens to use, and deliberately conservative rather
   than a match for new-article typography.
   NOTE: p/div/span are deliberately NOT overridden broadly here (only the
   already-existing `> p` rule above stays scoped to direct children) —
   broadening those would just as easily wreck a legacy box's OWN internal
   text sizing (e.g. an embedded post-preview card's small excerpt) as fix
   anything, and headings/lists/images/tables are where real breakage
   (overflow, no spacing, invisible links) actually shows up. */
.els-article-body.wp-block-post-content img,
.els-article-body.wp-block-post-content iframe,
.els-article-body.wp-block-post-content video,
.els-article-body.wp-block-post-content embed,
.els-article-body.wp-block-post-content object,
.els-article-body.wp-block-post-content table {
	max-width: 100%;
	height: auto;
}
.els-article-body.wp-block-post-content img { display: block; margin: 20px auto; }
.els-article-body.wp-block-post-content h2,
.els-article-body.wp-block-post-content h3,
.els-article-body.wp-block-post-content h4 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	line-height: 1.25;
	margin: 34px 0 14px;
	max-width: 100%;
}
.els-article-body.wp-block-post-content h2 { font-size: 26px; }
.els-article-body.wp-block-post-content h3 { font-size: 21px; }
.els-article-body.wp-block-post-content h4 { font-size: 18px; }
.els-article-body.wp-block-post-content ul,
.els-article-body.wp-block-post-content ol {
	margin: 0 0 22px;
	padding-left: 28px;
	font-size: 20px;
	line-height: 1.75;
	color: var(--wp--preset--color--ink);
}
.els-article-body.wp-block-post-content li { margin-bottom: 8px; }
.els-article-body.wp-block-post-content blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--wp--preset--color--primary);
	font-style: italic;
	color: var(--wp--preset--color--muted);
}
.els-article-body.wp-block-post-content figure,
.els-article-body.wp-block-post-content .wp-caption {
	margin: 26px 0;
	max-width: 100%;
}
.els-article-body.wp-block-post-content figcaption,
.els-article-body.wp-block-post-content .wp-caption-text {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-top: 8px;
}
.els-article-body.wp-block-post-content a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.els-article-body.wp-block-post-content table th,
.els-article-body.wp-block-post-content table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 8px 10px;
	text-align: left;
}
/* An old-theme "box" (a div/section/aside with its own background, border
   or fixed width we know nothing about — the "Te puede interesar" cards
   are the recurring example) can keep its own look, it just can't spill
   past the article column or overlap what comes after it. */
.els-article-body.wp-block-post-content > div,
.els-article-body.wp-block-post-content > section,
.els-article-body.wp-block-post-content > aside {
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	margin: 26px 0;
}

.els-article-tags { max-width: 700px; margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--border); gap: 10px; display: none; }
.els-article-tags:has(a) { display: flex; }
.els-article-tags__label { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--ink); }
.els-article-tags__list.wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 10px; }
.els-article-tags__list.wp-block-post-terms a {
	font-size: 13px; font-weight: 600; color: var(--els-cat-accent-mid, var(--wp--preset--color--primary));
	background: var(--wp--preset--color--lo-mas-leido-bg); padding: 6px 14px; border-radius: 0;
	transition: all .18s ease;
}
.els-article-tags__list.wp-block-post-terms a:hover { background: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); color: #fff; }

.els-article-author-block { max-width: 700px; margin: 26px auto 0; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--border); }
.wp-block-group.els-main > .els-article-author-block { margin-top: 26px; }
.els-article-author-block__row { gap: 16px; }
.els-article-author-block__id { gap: 16px; }
.els-article-author-block__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
.els-article-author-block__name.wp-block-post-author-name { margin-top: 4px; display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--wp--preset--color--ink); }
.els-article-author-block__name.wp-block-post-author-name a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
.els-article-bio-toggle {
	border: 1px solid var(--els-cat-accent-mid, var(--wp--preset--color--primary)); background: transparent; color: var(--els-cat-accent-mid, var(--wp--preset--color--primary));
	font-family: var(--wp--preset--font-family--body); font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
	padding: 9px 16px; cursor: pointer;
}
.els-article-author-block .els-author-socials { margin-top: 16px; }
/* .els-author-social is shared with author.html, which has no
   category/geo context and must always stay teal — scoped override here so
   only single.html's own usage of it picks up the geo accent. */
.els-article-author-block .els-author-social { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
/* color:#fff must be explicit here — this rule and the resting-state rule
   above share the exact same specificity (0,2,0), so without it the
   resting rule's color (same order-of-appearance tiebreak) kept winning
   even on hover, making the icon the same color as its own hover
   background and effectively invisible. Covers both the teal brand
   default and the Internacional blue override, since both just resolve
   through the same --els-cat-accent-mid variable. */
.els-article-author-block .els-author-social:hover { background: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); border-color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); color: #fff; }
/* Closed by default (mockup's default state) — JS toggles the wrapper's
   is-bio-open class; nothing here depends on the native `hidden` attribute,
   which a core block's own markup can't set. */
.els-article-bio.wp-block-post-author-biography { display: none; margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--body-text); }
.els-article-author-block.is-bio-open .els-article-bio.wp-block-post-author-biography { display: block; }

.els-article-comments { max-width: 700px; margin: 26px auto 0; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--border); }
.wp-block-group.els-main > .els-article-comments { margin-top: 26px; }
/* text-transform:none cancels theme.json's global h3 style (textTransform:
   uppercase) for this one heading only — that global rule is used
   site-wide and stays untouched everywhere else. */
.els-article-comments .wp-block-comments-title { margin: 0 0 20px; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 20px; letter-spacing: .01em; text-transform: none; }
.els-article-comments textarea.comment-form-textarea,
.els-article-comments textarea#comment,
.els-article-comments .comment-form input[type="text"],
.els-article-comments .comment-form input[type="email"] {
	display: block; width: 100%; border: 1px solid var(--wp--preset--color--border-light); padding: 14px 16px;
	font-family: var(--wp--preset--font-family--body); font-size: 14.5px; outline: 0; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--background);
}
.els-article-comments textarea.comment-form-textarea,
.els-article-comments textarea#comment { resize: vertical; }
/* WP core marks each required field with a visible literal "*" — the
   `required` HTML attribute driving real browser validation is untouched,
   this only hides the visual asterisk. */
.els-article-comments .comment-form label .required { display: none; }
/* Real label text above each field ("Nombre", "Correo electrónico",
   "Comentario") — this used to be display:none (along with the name/email
   inputs themselves), on the mistaken assumption that hiding was harmless:
   testing only ever happened logged in, where WP doesn't render these
   fields at all. An anonymous visitor got blank, unlabeled boxes instead —
   WP core's own block-library CSS (.wp-block-post-comments-form .comment-
   form input:not(...)) has higher specificity than this theme's old hide
   rule, so the *inputs* stayed visible regardless; only the *labels*
   actually obeyed display:none. Real bug, not a mobile-only one — fixed
   for every viewport. */
.els-article-comments .comment-form label {
	display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700;
	letter-spacing: .02em; color: var(--wp--preset--color--ink);
}
.els-article-comments .comment-form-cookies-consent label {
	display: inline; margin: 0; font-weight: 400; font-size: 13px; color: var(--wp--preset--color--muted);
}
/* Name + email above the comment box (WP's own default order puts the
   textarea first, fields below — reversed here, purely visually, via
   flex `order`, so the PHP-generated markup/order itself stays untouched). */
.els-article-comments .comment-form { display: flex; flex-direction: column; }
.els-article-comments .comment-form-author { order: 1; }
.els-article-comments .comment-form-email { order: 2; }
.els-article-comments .comment-form-comment { order: 3; }
.els-article-comments .comment-form-cookies-consent { order: 4; display: flex; align-items: center; gap: 8px; }
.els-article-comments .comment-form p.form-submit { order: 5; margin-top: 12px; display: flex; justify-content: flex-end; }
.els-article-comments .comment-form input[type="submit"] {
	border: 0; background: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); color: #fff;
	font-family: var(--wp--preset--font-family--body); font-size: 13.5px; font-weight: 700; letter-spacing: .03em;
	padding: 10px 22px; cursor: pointer;
}
/* "Deja un comentario" — WP core's own reply-form heading, text
   overridden via comment_form_defaults() in functions.php, shown as a
   secondary heading (h4) right above the form, under the "Comentarios (N)"
   section heading (h3) above it. */
.els-article-comments .comment-reply-title {
	margin: 0 0 20px; font-family: var(--wp--preset--font-family--body);
	font-weight: 700; font-size: 16px; letter-spacing: .01em; color: var(--wp--preset--color--ink);
}
/* "Conectado como…" only ever shows when logged in — not in the mockup,
   which assumes an anonymous commenter. */
.els-article-comments .logged-in-as,
.els-article-comments .comment-notes { display: none; }
.els-comment-row { gap: 14px; padding: 20px 0; border-top: 1px solid #e2e8e8; }
.els-comment-body { flex: 1; }
.els-comment-meta { align-items: baseline; gap: 8px; flex-wrap: wrap; }
.els-comment-meta .wp-block-comment-author-name { font-weight: 700; font-size: 14.5px; color: var(--wp--preset--color--ink); }
.els-comment-meta .wp-block-comment-date { font-size: 12px; color: var(--wp--preset--color--faint); }
.els-comment-body .wp-block-comment-content p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wp--preset--color--body-text); }
.els-comment-body .wp-block-comment-reply-link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--wp--preset--color--ink); }

.els-article-related { margin-top: 56px; padding-top: 34px; border-top: 4px solid var(--wp--preset--color--ink); }
.wp-block-group.els-main > .els-article-related { margin-top: 56px; }
.els-article-related__head { margin: 0 0 22px; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 20px; letter-spacing: .01em; text-transform: uppercase; }
.els-related-query { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding-bottom: 56px; }
.els-related-query .wp-block-post-template { display: contents; }
.els-related-query .wp-block-post-template > li { list-style: none; margin: 0; cursor: pointer; }
.els-related-query .wp-block-post-featured-image { position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; background: var(--wp--preset--color--surface); margin: 0 0 12px; }
.els-related-query .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-related-query .wp-block-post-title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 16.5px; line-height: 1.2; letter-spacing: -.01em; }
.els-related-query .wp-block-post-title a:hover { color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); }
.els-article-related__byline { margin-top: 9px; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--wp--preset--color--muted); }
.els-article-related__byline .wp-block-post-author-name { font-weight: 700; color: var(--wp--preset--color--ink); }
.els-article-related__byline .els-byline__sep { color: var(--wp--preset--color--faint); }
.els-article-related__byline .wp-block-post-date time { font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

@media (max-width: 960px) {
	.els-article-title.wp-block-post-title { font-size: 32px; }
	.els-article-body.wp-block-post-content > p { font-size: 17px; }
	.els-related-query { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.els-article-title.wp-block-post-title { font-size: 30px; }
	.els-article-body.wp-block-post-content > p { font-size: 18px; }

	/* Tags: switched from flexbox to plain inline text-flow — the earlier
	   flex/display:contents version left column-gap uneven turn-to-turn on
	   real devices (contents-in-flex has a history of inconsistent mobile
	   browser support). Inline flow is the most robust way to get "label,
	   then pills wrapping like words in a sentence, every wrapped line
	   starting at the same left edge, tight consistent spacing" — exactly
	   the mockup — with no flex/grid involved at all. Specificity has to
	   match the base :has(a)/two-class rules below (this project's
	   recurring gotcha: a plain single/no-pseudo mobile override can't
	   beat those), hence the matching selectors here. */
	.els-article-tags:has(a) { display: block; }
	.els-article-tags__label { display: inline; margin-right: 4px; }
	.els-article-tags__list.wp-block-post-terms { display: inline; }
	.els-article-tags__list.wp-block-post-terms a {
		display: inline-block; margin: 0 4px 8px 0; padding: 5px 10px;
	}

	/* "Sobre el autor" row: at this width the id group (avatar + label +
	   name) and the bio-toggle button don't fit side by side at their
	   desktop sizes — the button wrapped onto its own line below instead
	   of sitting next to the name like the mockup. Shrinking the avatar,
	   name and button together (checked against "Vincenzo Gambaretto",
	   the longest real author name on this site) is what actually keeps
	   them on one row with real margin, not just the button alone. */
	.els-article-author-block__row { gap: 8px; }
	.els-article-author-block__id { gap: 10px; }
	.els-article-author-block__id img { width: 44px; height: 44px; }
	.els-article-author-block__label { font-size: 9.5px; }
	.els-article-author-block__name.wp-block-post-author-name { font-size: 15px; }
	.els-article-bio-toggle { font-size: 10px; padding: 6px 10px; }

	/* "Te recomendamos": one full-width story per row, not a 2-up pair. */
	.els-related-query { grid-template-columns: 1fr; }
}

/* ---------- Error 404 ---------- */
/* The mockup's own outer wrapper is min-height:100vh + flex column with the
   404 block itself flex:1, so the footer stays pinned to the viewport
   bottom on this short-content page instead of floating right under the
   message. Scoped to body.error404 (WordPress's own automatic body class
   on the 404 template) so no other template's layout is touched — every
   other template so far has had enough content that this was never an
   issue. */
body.error404 .wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.els-404-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 70px 40px; }
.els-404__inner { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.els-404__code { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 120px; line-height: 1; letter-spacing: -.03em; color: var(--wp--preset--color--ink); }
/* Spacing below is deliberately NOT the mockup's own values (18/14/30/26px
   — plain typographic rhythm, fine for body copy but too tight for a
   centered hero block on an otherwise-empty page). Widened at the user's
   explicit request, prioritizing "the page should breathe" over mockup
   literalism here — confirmed with them this is a spacing/air decision,
   not a mockup discrepancy. 404→title stays the tightest of the four since
   the numeral and heading read as one title unit; the rest grow toward the
   site's own established section-gap range (34-48px, e.g. category.html's
   divider) as the elements become more distinct from each other. */
.els-404__title { margin: 28px 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 28px; letter-spacing: -.015em; color: var(--wp--preset--color--ink); }
.els-404__desc { margin: 20px 0 0; font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--body-text); }
.els-404__search { margin-top: 48px; display: flex; align-items: stretch; width: 100%; max-width: 420px; }
.els-404__search-input {
	flex: 1; min-width: 0;
	border: 2px solid var(--els-cat-accent-mid, var(--wp--preset--color--primary)); border-right: 0;
	outline: 0; background: transparent;
	font-family: var(--wp--preset--font-family--body); font-size: 15px; color: var(--wp--preset--color--ink);
	padding: 13px 18px;
}
.els-404__search-btn {
	border: 0; background: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); color: #fff;
	padding: 0 20px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.els-404__back { margin-top: 40px; font-size: 14.5px; font-weight: 700; color: var(--els-cat-accent-mid, var(--wp--preset--color--primary)); display: flex; align-items: center; gap: 6px; }

@media (max-width: 960px) {
	.els-404__code { font-size: 88px; }
	.els-404__title { font-size: 24px; }
	.els-404-main { padding: 50px 24px; }
}

/* ---------- Etiqueta (tag.html) ---------- */
/* No mockup for this one — a plain uniform list, deliberately not
   category.html's magazine layout (no destacado/rail/A fondo/3-grid).
   .els-cat-masthead/.els-cat-title reused completely unchanged: they
   already read --els-cat-accent-dark/-mid with a var() fallback to the
   plain teal/section-heading presets, and since is_category()/
   is_singular('post') never fire on a tag archive, that override never
   prints here — this template stays teal by construction, no new
   color logic needed (a tag has no category of its own to derive one
   from anyway, confirmed with the user before building). Same reasoning
   for .els-cat-tag on each row's category badge below. */
.els-tag-list { display: flex; flex-direction: column; }
.els-tag-list .wp-block-post-template { display: contents; }
.els-tag-list .wp-block-post-template > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	grid-template-areas: "photo text";
	column-gap: 34px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 32px 0;
	border-top: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
}
.els-tag-list .wp-block-post-template > li:first-child { border-top: 0; padding-top: 0; }
.els-tag-list .wp-block-post-featured-image {
	grid-area: photo; position: relative; width: 100%; aspect-ratio: 16/9;
	overflow: hidden; background: var(--wp--preset--color--surface); margin: 0;
}
.els-tag-list .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.els-tag-list .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.els-tag-textcol { grid-area: text; min-width: 0; }
.els-tag-textcol .els-cat-tag { font-size: 11px; }
.els-tag-textcol .wp-block-post-title { margin: 10px 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 26px; line-height: 1.18; letter-spacing: -.015em; }
.els-tag-textcol .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.els-tag-textcol .wp-block-post-excerpt {
	margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--muted);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.els-tag-textcol .els-byline { margin-top: 14px; }

@media (max-width: 960px) {
	.els-tag-list .wp-block-post-template > li {
		grid-template-columns: 1fr;
		grid-template-areas: "photo" "text";
		row-gap: 16px;
	}
	.els-tag-list .wp-block-post-featured-image { aspect-ratio: 16/10; }
	.els-tag-textcol .wp-block-post-title { font-size: 22px; }
}

/* ---------- Menú móvil (panel lateral) ---------- */
/* .els-nav__burger previously had no working click handler at all —
   theme.js queried .els-masthead__burger, a class that doesn't exist
   anywhere in the markup (a stale selector left over from an earlier
   round that relocated the button out of the masthead into .els-nav
   without updating the JS to match) — confirmed via inspection, not
   assumed. That old approach also proxy-clicked WP core's own
   navigation-block responsive-menu button, which only ever contained the
   12 nav links, not the full drawer (search + Actualidad + Secciones +
   Síguenos) the mockup actually designs for this. Replaced with a fully
   custom drawer + its own direct toggle (see theme.js) — overlayMenu is
   no longer set on the core/navigation block, since this drawer replaces
   what it would have done. Hidden by default; .is-open (added by JS)
   reveals it — no dependency on the native `hidden` attribute, matching
   the same class-toggle approach already used for single.html's bio. */
.els-mobile-drawer { display: none; position: fixed; inset: 0; z-index: 80; }
.els-mobile-drawer.is-open { display: block; }
.els-mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(13, 43, 51, .38); }
.els-mobile-drawer__panel {
	position: absolute; top: 0; left: 0; bottom: 0;
	width: 380px; max-width: 86vw;
	background: #fff;
	box-shadow: 0 0 50px -12px rgba(20, 30, 32, .4);
	display: flex; flex-direction: column;
	overflow-y: auto;
}
.els-mobile-drawer__panel-top { display: flex; align-items: center; justify-content: flex-end; padding: 16px 30px 4px; }
.els-mobile-drawer__close { border: 0; background: transparent; cursor: pointer; padding: 4px; display: flex; }
.els-mobile-drawer__search-wrap { padding: 20px 30px 26px; border-bottom: 1px solid #e2e8e8; }
/* Same treatment as .els-masthead__search (see the big comment there):
   icon moved to the end as a real submit button, plain clear "×" button
   after the input, native search-cancel hidden — and the box background
   matched to .els-mobile-drawer__panel's own #fff (was the page's grayish
   --background token, which read as a separate lighter/darker box against
   the panel here — the panel is white, not the greyish page background,
   so the fix goes the other direction from the masthead's). */
.els-mobile-drawer__search {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--wp--preset--color--border-light); background: #fff;
	padding: 11px 15px; width: 100%;
}
.els-mobile-drawer__search input {
	border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
	font-family: var(--wp--preset--font-family--body); font-size: 13.5px; color: var(--wp--preset--color--ink);
}
.els-mobile-drawer__search input::-webkit-search-cancel-button { display: none; }
.els-mobile-drawer__search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 2px;
	margin: 0;
	color: var(--wp--preset--color--faint);
	cursor: pointer;
	flex-shrink: 0;
}
.els-mobile-drawer__search input:not(:placeholder-shown) ~ .els-mobile-drawer__search-clear {
	display: inline-flex;
}
.els-mobile-drawer__search-clear:hover { color: var(--wp--preset--color--muted); }
.els-mobile-drawer__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.els-mobile-drawer__nav { display: flex; flex-direction: column; padding: 34px 0; }
.els-mobile-drawer__actualidad {
	padding: 11px 30px 22px; font-size: 14px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--wp--preset--color--ink); transition: color .18s ease;
}
.els-mobile-drawer__actualidad:hover { color: var(--wp--preset--color--primary); }
.els-mobile-drawer__divider { height: 1px; background: #e2e8e8; margin: 0 30px 22px; }
.els-mobile-drawer__label {
	padding: 0 30px 16px; font-size: 14px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--wp--preset--color--primary); display: block;
}
.els-mobile-drawer__nav a {
	padding: 11px 30px; font-size: 14px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--wp--preset--color--ink); transition: color .18s ease;
}
.els-mobile-drawer__nav a:hover { color: var(--wp--preset--color--primary); }
.els-mobile-drawer__follow { margin-top: auto; padding: 34px 30px 38px; border-top: 1px solid #e2e8e8; }
.els-mobile-drawer__follow .els-mobile-drawer__label { padding: 0 0 14px; }
.els-mobile-drawer__socials { display: flex; gap: 10px; }
.els-mobile-drawer__socials .els-social-icon { width: 38px; height: 38px; }