/* =====================================================================
   Blog: the hub (template 11.2) and, since batch 5, its article listing and the
   27 article pages. House territory (wine).
   Ported from the inline <style> block of the delivered blog.html lines 23-137
   (T3, reviewed-pages-batch-1). Faithful port: only colour is tokenized
   (#fff -> --ms-on-dark for a text/icon colour, --mb-white for a surface).
   Loads on the hub and the articles only (key 'blog'), AFTER components.css,
   page.css and polish.css (the
   delivery's inline block sat after those links). Does not load with
   templates.css. The hero focus override is written .pg-hero.bl-hero so it
   outranks templates.css's .pg-hero by specificity, not by stylesheet order.
   ===================================================================== */
.pg-hero.bl-hero { --pg-focus: 40% 60%; --pg-focus-m: 45% 55%; }
.pg-logo--house svg { filter: none; }

/* ---------- Hero: long H1, scaled so it sits on three lines at most ---------- */
.bl-hero .pg-hero__content { width: min(62rem, 74vw); }
.bl-hero .pg-hero__display { font-size: clamp(2.3rem, 1rem + 3.2vw, 4rem); }
.bl-hero .pg-hero__lede { max-width: 38rem; }
/* Balanced display lines; room inside the line-rise mask so "¿" and descenders are not clipped */
.bl-hero .pg-line { padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.14em; margin-block-end: -0.14em; }
.bl-hero .pg-line > span { display: inline-block; text-wrap: balance; }

.bl-temas .ms-line, .bl-close .ms-line { padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.14em; margin-block-end: -0.14em; }
.bl-temas .ms-line > span, .bl-close .ms-line > span { text-wrap: balance; }
.bl-close .pg-close__lede { text-wrap: balance; }
@media (max-width: 64rem) { .bl-hero .pg-hero__content { width: auto; } }

/* ---------- S.01 Temas: five light glass cards (Home .ml-card language; ms-glass + data-glass from the system) ---------- */
.bl-temas .ms-header__side .ms-lede { max-width: 42ch; }
.bl-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
@media (min-width: 64rem) {
	/* 3 + 2 composition: first row thirds, second row halves */
	.bl-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.bl-card { grid-column: span 2; }
	.bl-card:nth-child(n+4) { grid-column: span 3; }
}
.bl-card {
	--d: 0s;
	display: flex; flex-direction: column; gap: 0.9rem; margin: 0;
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background:
		radial-gradient(16rem 11rem at var(--gx) var(--gy), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.4) 42%, rgb(255 255 255 / 0.55) 100%),
		rgb(246 246 246 / 0.3);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.95),
		inset 0 -1px 1px rgb(255 255 255 / 0.5),
		inset 0 0 24px rgb(255 255 255 / 0.35),
		0 1.5rem 3.5rem -1.75rem rgb(51 51 51 / 0.24),
		0 2px 6px rgb(51 51 51 / 0.05);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bl-card:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.95),
		inset 0 -1px 1px rgb(255 255 255 / 0.5),
		inset 0 0 24px rgb(255 255 255 / 0.35),
		0 2.25rem 4.5rem -1.75rem rgb(51 51 51 / 0.32),
		0 3px 10px rgb(51 51 51 / 0.07);
}
.bl-card:nth-child(2) { --d: 0.12s; } .bl-card:nth-child(3) { --d: 0.24s; } .bl-card:nth-child(4) { --d: 0.36s; } .bl-card:nth-child(5) { --d: 0.48s; }
.bl-card__n { margin: 0; font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(3rem, 2.2rem + 2.4vw, 4.25rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ms-brand); }
.bl-card__n::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-block-start: 1rem; background: var(--ms-brand); transition: width 0.7s var(--ms-ease); }
.bl-card:hover .bl-card__n::after { width: 4.5rem; }
.bl-card__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bl-card__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.bl-card__d { margin: 0; font-size: var(--ms-body); line-height: 1.6; color: var(--ms-ink-soft); text-wrap: pretty; }

/* ---------- S.02 Siga explorando: soft vino-01 band + index rows ---------- */
.bl-explora { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--mb-vino-01) 85%, transparent) 9%, color-mix(in srgb, var(--mb-vino-01) 85%, transparent) 91%, transparent 100%); }
.bl-idx { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid rgb(51 51 51 / 0.14); }
.bl-idx li { border-block-end: 1px solid rgb(51 51 51 / 0.14); }
.bl-idx__row {
	position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem;
	padding-block: clamp(1.35rem, 2.2vw, 1.85rem); color: var(--ms-ink); text-decoration: none; isolation: isolate;
}
.bl-idx__row::before { content: ""; position: absolute; inset: 0 -1rem; z-index: -1; border-radius: var(--ms-radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--ms-brand) 7%, transparent), transparent 80%); opacity: 0; transition: opacity 0.5s var(--ms-ease); }
.bl-idx__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ms-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ms-ease); }
.bl-idx__n { align-self: start; padding-block-start: 0.55rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: 0.06em; color: var(--ms-ink-subtle); font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
.bl-idx__body { display: grid; gap: 0.35rem; transition: translate 0.6s var(--ms-ease); }
.bl-idx__t { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.bl-idx__d { max-width: 52ch; font-size: var(--ms-body-sm); line-height: 1.5; color: var(--ms-ink-soft); }
.bl-idx__row:is(:hover, :focus-visible)::before { opacity: 1; }
.bl-idx__row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.bl-idx__row:is(:hover, :focus-visible) .bl-idx__n { color: var(--ms-brand); }
.bl-idx__row:is(:hover, :focus-visible) .bl-idx__body { translate: 0.5rem 0; }
.bl-idx__row:is(:hover, :focus-visible) .bl-idx__t { font-weight: 500; }
.bl-idx__row:is(:hover, :focus-visible) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.bl-idx__row:is(:hover, :focus-visible) .ms-cta__circle svg { transform: translateX(3px); }
.bl-idx__row:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
@media (max-width: 40rem) {
	.bl-idx__row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.85rem; }
	.bl-idx__row::before { inset-inline: -0.5rem; }
}

/* ---------- Closing: longer title needs its own measure ---------- */
.bl-close .pg-close__lead { max-width: 46rem; }
.bl-close .pg-close__h { font-size: clamp(2.4rem, 1.5rem + 3vw, 4.2rem); }

/* ---------- Motion (transform and opacity only; hidden states only while armed) ---------- */
.bl-temas.is-armed:not(.is-in) .bl-card { opacity: 0; translate: 0 2.5rem; }
.bl-temas.is-armed:not(.is-in) .bl-card__n::after { width: 0; }
.bl-temas.is-in .bl-card {
	transition: opacity 1.1s var(--d) ease, translate 1.1s var(--d) var(--ms-ease), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bl-temas.is-in .bl-card__n::after { transition: width 0.9s calc(var(--d) + 0.5s) var(--ms-ease); }
.bl-temas.is-in .bl-card:hover .bl-card__n::after { transition: width 0.7s var(--ms-ease); }

.bl-explora.is-armed:not(.is-in) .bl-idx li { opacity: 0; transform: translateY(1rem); }
.bl-explora.is-in .bl-idx li { transition: opacity 0.7s ease, transform 0.9s var(--ms-ease); }
.bl-explora.is-in .bl-idx li:nth-child(2) { transition-delay: 0.08s; }

@media (prefers-reduced-motion: reduce) {
	.bl-card, .bl-card__n::after, .bl-idx li, .bl-idx__row, .bl-idx__row * { transition: none !important; }
	.bl-temas.is-armed:not(.is-in) .bl-card { opacity: 1; translate: none; }
	.bl-temas.is-armed:not(.is-in) .bl-card__n::after { width: 2.5rem; }
	.bl-card:hover { transform: none; }
}

/* =====================================================================
   Batch 5 (reviewed-pages-batch-5, T4): the article listing (bg-*) that
   replaced the hub's bl-temas index, and the 27 article pages (ba-*).
   Ported from the block the 2026-10-06 delivery appends to the inline
   <style> of blog.html and of every blog-*.html: byte-identical across all
   28 files (10,931 B, 99 rules), so it is taken once and shared. The articles
   link the same five sheets the hub links, in the same order, and this sheet
   sits where their inline block sat: after polish.css.

   Faithful port. Nothing is retyped; 13 declarations were rewritten, all onto
   tokens whose value is identical:
     #f2eeee -> var(--mb-vino-01)      (1x, the topic chip plate; the token is #f2eeee)
     #fff -> var(--ms-on-dark)         (5x, text or icon on the dark hero, a pressed
                                        chip or the current page number; #ffffff)
     #fff -> var(--mb-white)           (3x, a light surface: filter chip, card, empty state)
     999px -> var(--ms-radius-pill)    (3x; the token is exactly 999px)
     -4px -> var(--ms-lift)            (1x; the token is exactly -4px)
     0.5s -> var(--ms-dur-ui)          (2x, one declaration; the token is 0.5s)
   The last three restore the house card motion components.css already writes.
   Three literals stay, each with its declared exemption inline: #e6dede (chip
   hover), #3d3d3d (article body text) and the #f6f3f2 fallback of the undefined
   --ms-surface-2. The rgb() values and the geometry and duration literals without
   an exact token are left as delivered, per the 2026-09-22 decision in build/lint.py
   and the eventos.css precedent. The `pg-fade` keyframes the hero figure animates
   with live in page.css.
   ===================================================================== */
.bg-chip { display: inline-flex; align-items: center; gap: 0.45rem; align-self: start; justify-self: start; padding: 0.35rem 0.8rem; border-radius: var(--ms-radius-pill);
	background: var(--mb-vino-01); color: var(--ms-ink); font-size: 0.78rem; font-weight: 500; line-height: 1.2; }
.bg-chip i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ms-brand); flex: none; }
.bg-chip--light { background: rgb(255 255 255 / 0.92); }
.bg-chip--ghost { background: transparent; border: 1px solid rgb(255 255 255 / 0.35); color: var(--ms-on-dark); }
.bg-chip--ghost i { background: var(--ms-on-dark); }
/* top: featured + recent */
.bg-top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(2rem, 4vw, 3rem); }
.bg-feat { position: relative; display: block; min-height: clamp(22rem, 38vw, 30rem); border-radius: 1.5rem; overflow: hidden; color: var(--ms-on-dark); text-decoration: none; background: var(--ms-dark); }
.bg-feat__img, .bg-feat__img picture, .bg-feat__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bg-feat__img img { object-fit: cover; transition: transform 1.2s var(--ms-ease); }
.bg-feat:hover .bg-feat__img img { transform: scale(1.03); }
.bg-feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(22 10 13 / 0.92) 0%, rgb(22 10 13 / 0.55) 42%, rgb(22 10 13 / 0) 72%); }
.bg-feat__body { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: 0.8rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.bg-feat__t { margin: 0; max-width: 26ch; font-family: var(--ms-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.12; text-wrap: balance; }
.bg-feat__meta { font-size: 0.85rem; color: rgb(255 255 255 / 0.78); }
.bg-feat:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.bg-recent__h { margin: 0 0 1.25rem; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); color: var(--ms-ink); }
.bg-recent ul { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.bg-recent a { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: center; text-decoration: none; color: inherit; }
.bg-recent__img { display: block; aspect-ratio: 1; border-radius: 0.9rem; overflow: hidden; background: var(--ms-ink); }
.bg-recent__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bg-recent__t { display: block; font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--ms-ink); }
.bg-recent a:hover .bg-recent__t { text-decoration: underline; text-underline-offset: 3px; }
.bg-recent__meta { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--ms-ink-soft); }
.bg-recent a:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; border-radius: 0.9rem; }
/* filters */
.bg-filters { display: grid; gap: 0.9rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid rgb(0 0 0 / 0.1); }
.bg-filters[hidden] { display: none; }
.bg-filters__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.bg-filters__label { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-soft); }
.bg-filters__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bg-f { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0 0.95rem; border-radius: var(--ms-radius-pill); cursor: pointer;
	border: 1px solid rgb(0 0 0 / 0.14); background: var(--mb-white); color: var(--ms-ink); font: inherit; font-size: 0.85rem; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.bg-f span { color: var(--ms-ink-soft); font-size: 0.78rem; }
.bg-f:hover { border-color: rgb(0 0 0 / 0.35); }
.bg-f[aria-pressed="true"] { background: var(--ms-dark); border-color: var(--ms-dark); color: var(--ms-on-dark); }
.bg-f[aria-pressed="true"] span { color: rgb(255 255 255 / 0.7); }
.bg-f:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 3px; }
@media (max-width: 40rem) {
	.bg-filters__row { grid-template-columns: 1fr; gap: 0.5rem; }
	/* phone: one swipeable row per group instead of a wall of chips */
	.bg-filters__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--ms-gutter) * -1); padding: 0.15rem var(--ms-gutter); scrollbar-width: none; }
	.bg-filters__chips::-webkit-scrollbar { display: none; }
	.bg-f { flex: none; }
}
/* grid */
.bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.bg-card { display: flex; }
.bg-card[hidden] { display: none; }
.bg-card__in { display: grid; grid-template-rows: auto 1fr; width: 100%; padding: 0.5rem; border-radius: 1.5rem; background: var(--mb-white); text-decoration: none; color: inherit;
	border: 1px solid rgb(0 0 0 / 0.06); transition: transform var(--ms-dur-ui) var(--ms-ease), box-shadow var(--ms-dur-ui) var(--ms-ease); }
.bg-card__in:hover, .bg-card__in:focus-visible { transform: translateY(var(--ms-lift)); box-shadow: 0 1.75rem 3rem -2.25rem rgb(30 12 16 / 0.5); }
.bg-card__in:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.bg-card__img { display: block; aspect-ratio: 16 / 10; border-radius: 1.1rem; overflow: hidden; background: var(--ms-ink); }
.bg-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ms-ease); }
.bg-card__in:hover .bg-card__img img { transform: scale(1.03); }
.bg-card__body { display: grid; align-content: start; gap: 0.65rem; padding: 1.1rem 0.85rem 0.9rem; }
.bg-card__t { font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); line-height: 1.18; color: var(--ms-ink); text-wrap: balance; }
.bg-card__d { font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
.bg-card__meta { font-size: 0.8rem; color: var(--ms-ink-soft); }
.bg-empty { margin: 2rem 0 0; padding: 2rem; border-radius: 1.5rem; background: var(--mb-white); border: 1px dashed rgb(0 0 0 / 0.18); color: var(--ms-ink-soft); text-align: center; }
.bg-empty[hidden] { display: none; }
.bg-pag { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgb(0 0 0 / 0.1); }
.bg-pag[hidden] { display: none; }
.bg-pag__nums { display: flex; gap: 0.4rem; }
.bg-pag button { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.5rem; border-radius: var(--ms-radius-pill); border: 1px solid transparent; background: transparent;
	color: var(--ms-ink); font: inherit; font-size: 0.9rem; cursor: pointer; }
.bg-pag button:hover { border-color: rgb(0 0 0 / 0.2); }
.bg-pag button[aria-current="page"] { background: var(--ms-dark); color: var(--ms-on-dark); }
.bg-pag button:disabled { opacity: 0.3; cursor: default; }
.bg-pag .bg-pag__arrow { border-color: rgb(0 0 0 / 0.16); }
.bg-pag button:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 3px; }
.bg-pag svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (max-width: 64rem) { .bg-top { grid-template-columns: 1fr; } .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .bg-grid { grid-template-columns: 1fr; } .bg-feat { min-height: 24rem; } }
/* article page */
.ba-hero .pg-hero__media { display: none; }
.ba-hero .pg-hero__scrim { background: radial-gradient(55% 60% at 16% 46%, color-mix(in srgb, var(--ms-brand) 38%, transparent), transparent 72%), radial-gradient(40% 50% at 90% 90%, rgb(0 0 0 / 0.45), transparent 70%); }
.ba-hero__fig { position: absolute; z-index: 1; inset-inline-end: var(--ms-container-edge); inset-block: clamp(8.5rem, 17vh, 10.5rem) clamp(2.5rem, 7vh, 4.5rem);
	width: min(34vw, 34rem); margin: 0; border-radius: 1.5rem; overflow: hidden; background: rgb(255 255 255 / 0.06); box-shadow: 0 2.5rem 4rem -2.5rem rgb(0 0 0 / 0.8);
	opacity: 0; animation: pg-fade 1.1s var(--ms-ease) 0.4s forwards; }
.ba-hero__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.ba-hero .pg-hero__meta { margin: 1rem 0 0; font-size: 0.9rem; color: rgb(255 255 255 / 0.72); }
@media (min-width: 64.01rem) {
	.ba-hero .pg-hero__content { width: min(38rem, 42vw); }
	.ba-hero .pg-hero__display { font-size: clamp(2.3rem, 1.1rem + 2.4vw, 3.8rem); }
}
@media (max-width: 64rem) {
	.ba-hero .pg-hero__content { padding-bottom: 2.5rem; }
	.ba-hero__fig { position: relative; inset: auto; width: auto; margin: 0 var(--ms-gutter) 3rem; aspect-ratio: 4 / 3; }
}
.ba-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); row-gap: 2rem; }
.ba-side { grid-column: 1 / span 3; }
.ba-side__in { position: sticky; top: 7rem; display: grid; gap: 1rem; }
.ba-side__label { margin: 0; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-soft); }
.ba-side__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ba-side__chips a { text-decoration: none; }
/* token-exempt: #e6dede is the hover plate of a topic chip in the article's side column, one step darker than the chip's --mb-vino-01 #f2eeee rest state. No token carries it: --mb-vino-02 is a tinted wine, visibly pinker, and the unapproved derived bg-subtle is #eeecec, lighter. Substituting either changes the hover. Kept byte for byte and reported in odd/tasks/reviewed-pages-batch-5.md. */
.ba-side__chips a:hover .bg-chip { background: #e6dede; }
.ba-side__back { font-size: 0.9rem; color: var(--ms-ink); text-underline-offset: 3px; }
.ba-text { grid-column: 5 / span 7; max-width: 44rem; }
.ba-text > * + * { margin-top: 1.15rem; }
/* token-exempt: #3d3d3d is the article body text, a reading grey the delivery set between --ms-ink and the pending derived text-medium #6e6e6e (CLAUDE.md, "Pendientes"); no token in tokens.css carries it and either neighbour would change the reading colour of 27 pages. Kept byte for byte and reported in odd/tasks/reviewed-pages-batch-5.md. */
.ba-text p, .ba-text li { font-size: 1.075rem; line-height: 1.75; color: #3d3d3d; }
.ba-text h2 { margin-top: 2.5rem; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.85rem); line-height: 1.2; color: var(--ms-ink); text-wrap: balance; }
.ba-text h3 { margin-top: 2rem; font-family: var(--ms-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--ms-ink); }
.ba-text ul, .ba-text ol { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; }
.ba-text li::marker { color: var(--ms-brand); }
.ba-text strong { font-weight: 600; color: var(--ms-ink); }
.ba-text a { color: var(--ms-brand); text-underline-offset: 3px; }
.ba-text .ba-lead { font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.55; color: var(--ms-ink); }
@media (max-width: 64rem) { .ba-side, .ba-text { grid-column: 1 / -1; } .ba-side__in { position: static; } }
/* token-exempt: --ms-surface-2 is defined nowhere in this design system, so the fallback #f6f3f2 is the value that actually renders: the ground of the "more articles" band. Same literal, same reasoning and same exemption as .evd-chronicle in eventos.css. Kept byte for byte. */
.ba-more { background: var(--ms-surface-2, #f6f3f2); }
@media (prefers-reduced-motion: reduce) { .bg-card__in, .bg-card__img img, .bg-feat__img img { transition: none; } .ba-hero__fig { animation: none; opacity: 1; } }