*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.sidebar-b2a34d{max-width:640px;margin:0 auto;padding:0 20px}
.wrapper-dffb3c{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.wrapper-dffb3c h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.wrapper-dffb3c p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.wrapper-dffb3c a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.module-42e53c{padding:20px 0}
.module-42e53c h2{font-size:18px;font-weight:400;margin-bottom:4px}
.module-42e53c h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.module-42e53c h2 a:hover{border-bottom-color:#2a2a2a}
.module-42e53c .widget-93a38c{font-size:12px;color:#aaa;margin-bottom:6px}
.module-42e53c p{font-size:14px;color:#666}
.region-338309{color:#888;font-size:13px;text-decoration:none}
.region-338309:hover{color:#2a2a2a}
.inner-0f0188{padding-bottom:60px}
.inner-0f0188 h1{font-size:28px;font-weight:400;margin-bottom:8px}
.inner-0f0188 .widget-93a38c{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.inner-0f0188 h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.inner-0f0188 h3{font-size:17px;margin:28px 0 8px}
.inner-0f0188 p{margin-bottom:18px;font-size:16px}
.inner-0f0188 ul,.inner-0f0188 ol{margin:0 0 18px 20px}
.inner-0f0188 a{color:#555;border-bottom:1px solid #ccc}
.inner-0f0188 a:hover{color:#000;border-bottom-color:#000}
.inner-0f0188 img{max-width:100%;height:auto;margin:24px 0}
.layout-54d92b{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.layout-54d92b a{color:#aaa;text-decoration:none}
.outer-d86bcc{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.outer-10ba66{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.shell-7141b0{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.shell-8561aa{margin:0 auto 32px;max-width:720px}
.inner-37383a{width:100%;height:auto}
.section-e15825{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.section-e15825 em{color:#aaa}
.section-e15825 a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.frame-ac095e{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.frame-ac095e p{padding:3px 0;margin:0;font-size:15px}
.frame-ac095e a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.frame-ac095e a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#2D2926;background:#FDF8F5}
.wrapper-dffb3c{background:#5D3A4B;color:#fff}
.wrapper-dffb3c h1{font-family:'Playfair Display',serif;color:#fff}
.wrapper-dffb3c p{color:rgba(255,255,255,.75)}
.wrapper-dffb3c a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#5D3A4B}
.card h2 a:hover{color:#E67E7E}
.read-more{color:#E67E7E}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#E67E7E}
.article-content img{border-radius:12px}
.affiliate-disclosure{border-radius:12px}
.ymyl-disclaimer{border-radius:12px}
/* === Custom === */
/* pf-poder-es — minimal template
   Magdalena Aranda · Asunción · cuaderno semanal de crecimiento personal
   Palette: terracota-salvia #A6552F / #45604A on linen paper #F8F1E7
   Fonts: Literata (heading) + Karla (body)
*/

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --color-bg:           #F8F1E7;
  --color-surface:      #EFE1CF;
  --color-text:         #2A211A;
  --color-text-muted:   #776354;
  --color-primary:      #A6552F;
  --color-primary-dark: #7A3E22;
  --color-secondary:    #45604A;
  --color-accent:       #C99A45;
  --color-border:       #E2D2BC;
  --color-heading:      #221A14;
  --color-link:         #A6552F;
  --color-link-hover:   #7A3E22;

  --font-heading: 'Literata', Georgia, serif;
  --font-body:    'Karla', Arial, sans-serif;

  --size-base: 18px;
  --size-h1:   2.2rem;
  --size-h2:   1.7rem;
  --size-h3:   1.35rem;

  --lh-body:    1.7;
  --lh-heading: 1.3;

  --space:         1rem;
  --space-section: 2.75rem;
  --max-content:   68ch;
  --max-page:      820px;

  --radius: 8px;
}

/* ── Reset ───────────────────────────────────────────────── */
:root *,
:root *::before,
:root *::after {
  box-sizing: border-box;
}

:root body {
  margin: 0;
  padding: 0;
}

/* ── Body ────────────────────────────────────────────────── */
:root body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  min-height: 100vh;
}

html {
  font-size: var(--size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ── Headings ────────────────────────────────────────────── */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  font-weight: 600;
  margin-top: calc(var(--space) * 2);
  margin-bottom: calc(var(--space) * 0.75);
}

:root h1 {
  font-size: var(--size-h1);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

:root h2 {
  font-size: var(--size-h2);
  letter-spacing: -0.005em;
}

:root h3 {
  font-size: var(--size-h3);
}

:root h4,
:root h5,
:root h6 {
  font-size: 1.1rem;
}

/* ── Paragraphs ──────────────────────────────────────────── */
:root p {
  max-width: var(--max-content);
  margin: 0 0 calc(var(--space) * 1.25);
}

:root p + p {
  margin-top: 0;
}

/* ── Links ───────────────────────────────────────────────── */
:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-link) 75%, transparent);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

:root a:hover,
:root a:focus-visible {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

:root a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Lists ───────────────────────────────────────────────── */
:root ul,
:root ol {
  max-width: var(--max-content);
  padding-left: 1.5em;
  margin: 0 0 calc(var(--space) * 1.25);
}

:root li {
  margin-bottom: 0.45em;
  line-height: var(--lh-body);
}

:root li > ul,
:root li > ol {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

/* ── Blockquote ──────────────────────────────────────────── */
:root blockquote {
  max-width: var(--max-content);
  border-left: 3px solid var(--color-secondary);
  padding: calc(var(--space) * 0.8) calc(var(--space) * 1.4);
  margin: calc(var(--space) * 1.75) 0;
  background-color: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--color-text);
}

:root blockquote p {
  margin-bottom: 0;
  font-size: 1.05rem;
}

:root blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ── Horizontal rule ─────────────────────────────────────── */
:root hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-section) auto;
  max-width: 6ch;
}

/* ── Images ──────────────────────────────────────────────── */
:root img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

:root figure {
  margin: calc(var(--space) * 1.75) 0;
}

:root figcaption {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5em;
  font-style: italic;
  line-height: 1.45;
}

/* ── Inline emphasis ─────────────────────────────────────── */
:root strong {
  color: var(--color-heading);
}

:root em {
  color: var(--color-primary-dark);
}

/* ── Page layout ─────────────────────────────────────────── */
:root .site-wrapper,
:root .container,
:root main,
:root article {
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: calc(var(--space) * 1.5);
}

/* === R2 fixes (2026-07-07T01:30:10.692184+00:00) === */

/* ── Post list separators on homepage ── */
:root main > div + div {
  border-top: 1px solid var(--color-border);
  padding-top: calc(var(--space) * 1.5);
  margin-top: calc(var(--space) * 1.5);
}

/* === R3 fixes (2026-07-07T02:10:09.473479+00:00) === */

/* ── "Leer más →" link on homepage — differentiate from the muted date ── */
:root main > div > a:last-child {
  color: var(--color-link);
  font-weight: 500;
}

/* === QA round-1 fixes (2026-07-22T02:12:17+0800) === */
/* Raíces y Alas — editorial pass.
   Voice: Literata italic = display (wordmark, featured + article titles)
          Literata roman = text (body, excerpts, cards)
          Karla uppercase-tracked = meta (kickers, dates, bylines, CTA)
   Colour: linen paper #F8F1E7 · ink-sage #24352A as the STRUCTURAL second
           colour (masthead field, kickers, band, notes) · terracotta #A6552F
           as the moment colour (masthead rule, drop caps, CTA pill).
   Signature: "raíces y alas" seal — wings above, roots below, in a ring.
   NOTE: the concatenated site.css puts custom.css last, so the two @import
   rules above are dropped by the parser. Webfonts are declared here as
   position-independent @font-face so they actually load.               */

/* ── Webfonts (real, not @import) ────────────────────────── */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/literata/v40/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTEKVt8k.woff2) format('woff2');
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/literata/v40/or3NQ6P12-iJxAIgLYT1PLs1a-t7PU0AbeE9KPxYzNiCp1OUedn8VrLmTkiSlcuFog.woff2) format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/karla/v33/qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bmMorHA.woff2) format('woff2');
}

/* ── Tokens (second pass) ────────────────────────────────── */
:root {
  --font-body:    'Literata', Georgia, 'Times New Roman', serif;
  --font-heading: 'Literata', Georgia, 'Times New Roman', serif;
  --font-meta:    'Karla', 'Helvetica Neue', Arial, sans-serif;

  --color-sage-deep: #33513C;
  --color-masthead:  #24352A;
  --color-cream:     #F2E8D9;

  /* the seal: wings over a stem over roots, inside a ring */
  --seal-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23E2D2BC' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='21.2'/%3E%3Cpath d='M24 33.5V18.5'/%3E%3Cpath d='M24 18.5c0-4.2 3.2-6.4 7.6-6.4 0 4.2-3.2 6.4-7.6 6.4z'/%3E%3Cpath d='M24 18.5c0-4.2-3.2-6.4-7.6-6.4 0 4.2 3.2 6.4 7.6 6.4z'/%3E%3Cpath d='M24 33.5c-1.6 1.8-3.4 2.7-5.6 3.1M24 33.5c1.6 1.8 3.4 2.7 5.6 3.1M24 33.5v3.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Masthead: deep sage field, seal, italic wordmark ───── */
:root body > header {
  max-width: none;
  margin: 0 0 3.4rem;
  padding: 3.2rem 1.5rem 2.9rem;
  background-color: var(--color-masthead);
  background-image:
    linear-gradient(178deg, rgba(36, 53, 42, 0.88) 0%, rgba(26, 38, 30, 0.95) 100%),
    url("/theme-assets/hero-masthead.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 3px solid var(--color-primary);
  text-align: center;
}

:root body > header::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 1.1rem;
  background: var(--seal-light) center / contain no-repeat;
  opacity: 0.9;
}

:root body > header h1,
:root body > header > a {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-cream);
  text-decoration: none;
  display: block;
  margin: 0;
}

:root body > header h1::after,
:root body > header > a::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 0.95rem auto 0;
  background-color: var(--color-primary);
}

:root body > header > a::before {
  margin: 0 auto 0.95rem;
}

/* home: the site description carries the manifesto */
:root body > header p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.62;
  color: rgba(242, 232, 217, 0.7);
  max-width: 40rem;
  margin: 1.1rem auto 0;
}

/* article/static pages: header holds only the wordmark link */
:root body > header > a::after {
  content: "CUADERNO SEMANAL\0000A0\0000B7\0000A0ASUNCI\0000D3N";
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(242, 232, 217, 0.55);
}

/* ═══════════════════════════════════════════════════════════
   HOME — hero · "para empezar" band · archive grid
   ═══════════════════════════════════════════════════════════ */

:root main:has(> div > h2) {
  max-width: 1060px;
  padding-inline: 2rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 2.4rem;
  row-gap: 2.9rem;
  align-items: start;
  padding-bottom: 1rem;
}

/* neutralise the R2 flat-feed separators — rhythm is set per band below */
:root main:has(> div > h2) > div + div {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

:root main:has(> div > h2) > div {
  position: relative;
  padding: 0;
  margin: 0;
}

/* shared card voices ------------------------------------- */
:root main > div > p:first-child {
  font-family: var(--font-meta);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
  margin: 0 0 0.55rem;
  max-width: none;
}

:root main > div > h2 {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 0.6rem;
}

:root main > div > h2 > a {
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

:root main > div > h2 > a:hover,
:root main > div > h2 > a:focus-visible {
  color: var(--color-primary-dark);
  border-bottom-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

:root main > div > h2 + p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.66;
  color: var(--color-text-muted);
  margin: 0 0 0.8rem;
  max-width: 42ch;
}

/* "read more" → Spanish, set as a tracked meta CTA */
:root main > div > a:last-child {
  display: inline-block;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  border-bottom: none;
}

:root main > div > a:last-child::after {
  content: "Leer la entrada\0000A0\002192";
  font-family: var(--font-meta);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

:root main > div > a:last-child:hover::after {
  color: var(--color-primary-dark);
}

/* ── 1 · The hero: two-column editorial spread ──────────── */
:root main:has(> div > h2) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 14.5rem 1fr;
  column-gap: 3rem;
  align-items: start;
  padding-bottom: 3.2rem;
  border-bottom: 1px solid var(--color-border);
}

/* left rail = kicker + date + byline, so no side of the row is empty */
:root main > div:nth-of-type(1) > p:first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
  border-top: 2px solid var(--color-sage-deep);
  padding-top: 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

:root main > div:nth-of-type(1) > p:first-child::before {
  content: "\0000DALTIMA ENTRADA";
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-sage-deep);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

:root main > div:nth-of-type(1) > p:first-child::after {
  content: "POR MAGDALENA ARANDA\0000A0\0000B7\0000A0ASUNCI\0000D3N";
  display: block;
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-weight: 400;
  letter-spacing: 0.13em;
  line-height: 1.7;
  color: var(--color-text-muted);
}

:root main:has(> div > h2) > div:nth-of-type(1) > h2 {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.05rem);
  line-height: 1.09;
  letter-spacing: -0.025em;
  margin: -0.35rem 0 1.1rem;
}

:root main:has(> div > h2) > div:nth-of-type(1) > h2 > a {
  color: var(--color-heading);
}

:root main:has(> div > h2) > div:nth-of-type(1) > h2 + p {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--color-text);
  max-width: 46ch;
  margin-bottom: 1.4rem;
}

/* drop cap — moment colour, used on the hero and on article openers only */
:root main:has(> div > h2) > div:nth-of-type(1) > h2 + p::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 3.5em;
  line-height: 0.78;
  padding: 0.08em 0.12em 0 0;
  color: var(--color-primary);
}

/* outlined pill CTA, hero only */
:root main:has(> div > h2) > div:nth-of-type(1) > a:last-child {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  padding: 0.62rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  border-radius: 999px;
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

:root main:has(> div > h2) > div:nth-of-type(1) > a:last-child:hover {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
}

/* ── 2 · "Para empezar" band — three tinted cards ───────── */
:root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) {
  grid-column: span 2;
  margin-top: 4.3rem;
  padding: 1.35rem 1.35rem 1.5rem;
  border-top: 2px solid var(--color-sage-deep);
  background-color: color-mix(in srgb, var(--color-secondary) 6%, transparent);
}

:root main:has(> div > h2) > div:nth-of-type(2)::before {
  content: "PARA EMPEZAR\0000A0\002014\0000A0TRES ENTRADAS DEL CUADERNO";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1rem);
  font-family: var(--font-meta);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-sage-deep);
  white-space: nowrap;
}

:root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2 {
  font-size: 1.12rem;
}

/* ── 3 · The archive — quiet 2-col grid, hairline rows ──── */
:root main:has(> div > h2) > div:nth-of-type(n+5) {
  grid-column: span 3;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

:root main:has(> div > h2) > div:nth-of-type(5),
:root main:has(> div > h2) > div:nth-of-type(6) {
  margin-top: 4.6rem;
}

:root main:has(> div > h2) > div:nth-of-type(5)::before {
  content: "EL ARCHIVO\0000A0\002014\0000A0SEMANA A SEMANA";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.5rem);
  font-family: var(--font-meta);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-sage-deep);
  white-space: nowrap;
}

/* fills the odd empty cell at the end of the archive grid */
:root main:has(> div > h2)::after {
  content: "Hasta la pr\0000F3xima entrada. Escribo cuando hay algo honesto que contar, no antes.";
  grid-column: span 3;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 32ch;
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE
   ═══════════════════════════════════════════════════════════ */

:root main:nth-of-type(1):has(> article) {
  max-width: 730px;
  padding-inline: 1.6rem;
}

:root main:has(> article) > h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.1rem;
}

:root main:has(> article) > h1::before {
  content: "CUADERNO SEMANAL";
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-sage-deep);
}

/* date left / byline right — the meta row reads as a masthead rule */
:root main:nth-of-type(1):has(> article) > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 2.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--color-sage-deep);
  font-family: var(--font-meta);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

:root main:nth-of-type(1):has(> article) > span::after {
  content: "POR MAGDALENA ARANDA";
  font-weight: 400;
  color: var(--color-text-muted);
}

:root main:has(> article) > article > img {
  border-radius: 3px;
  margin: 0 0 2.2rem;
}

:root main:has(> article) > article > p + img,
:root main:has(> article) > article > img + img {
  margin: 2.4rem 0;
}

:root main:has(> article) > article > p {
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.78;
  margin-bottom: 1.25rem;
  color: var(--color-text);
}

/* opening paragraph: drop cap (moment colour #2) */
:root main:has(> article) > article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 3.3em;
  line-height: 0.8;
  padding: 0.08em 0.12em 0 0;
  color: var(--color-primary);
}

/* dinkus between sections, in place of the flat h2 underline */
:root main:has(> article) > article > h2 {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 600;
  font-size: 1.42rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 0.9rem;
}

:root main:has(> article) > article > h2::before {
  content: "\002737\0000A0\0000A0\002737\0000A0\0000A0\002737";
  display: block;
  margin: 3rem 0 2.4rem;
  text-align: center;
  font-family: var(--font-meta);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

:root main:has(> article) > article > h3 {
  font-family: var(--font-heading);
  font-size: 1.14rem;
  margin: 2rem 0 0.6rem;
}

/* affiliate CTA links read as a decision, not as prose links */
:root main a[href^="/visit/"] {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  padding-bottom: 1px;
}

:root main a[href^="/visit/"]:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
}

/* body links: quiet, editorial */
:root main:has(> article) > article > p > a {
  color: var(--color-primary-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-decoration: none;
}

/* long <em> passages (the note at the foot of static pages) stay quiet —
   terracotta is reserved for drop caps, the CTA and the masthead rule */
:root main > article > p > em {
  color: var(--color-text-muted);
}

/* ── Notes: transparency (top) and disclaimer (bottom) ──── */
:root main > article > div:first-of-type,
:root main > article > div:last-of-type {
  font-family: var(--font-meta);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border: none;
  border-left: 2px solid var(--color-sage-deep);
  padding: 0.9rem 1.15rem;
  border-radius: 0 3px 3px 0;
}

:root main > article > div:first-of-type {
  margin: 0 0 2.4rem;
}

:root main > article > div:last-of-type {
  margin: 3rem 0 0;
}

:root main > article > div:first-of-type em {
  font-style: normal;
  color: var(--color-text-muted);
}

:root main > article > div:last-of-type strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-meta);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

/* ── Related articles: a labelled block, not a paragraph ── */
:root main:nth-of-type(1) > nav {
  margin-top: 3.4rem;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--color-sage-deep);
  color: var(--color-text);
}

:root main:nth-of-type(1) > nav p {
  max-width: none;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  line-height: 2.1;
  color: var(--color-border);
}

:root main:nth-of-type(1) > nav em {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

:root main:nth-of-type(1) > nav a {
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

:root main:nth-of-type(1) > nav a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

/* ── Pull quotes ─────────────────────────────────────────── */
:root main blockquote {
  position: relative;
  background-color: transparent;
  border-left: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  margin: 2.6rem 0;
  padding: 1.7rem 0 1.5rem 2.6rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--color-heading);
}

:root main blockquote::before {
  content: "\00201C";
  position: absolute;
  left: -0.15rem;
  top: 1.1rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 3.2rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

:root main blockquote p {
  font-size: inherit;
  line-height: inherit;
}

/* ── Static pages (about / autor / privacidad) ──────────── */
:root main > article > h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-sage-deep);
}

/* ── Footer ──────────────────────────────────────────────── */
:root body > footer {
  margin-top: 4.5rem;
  padding: 2.4rem 1.5rem 2.8rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

:root body > footer::before {
  content: "\002737";
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

:root body > footer small {
  font-family: var(--font-meta);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

:root body > footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

:root body > footer a:hover {
  color: var(--color-primary-dark);
}

/* ── Column balance: no half-empty cells in a full-width row ─ */

/* hero rail stretches, byline drops to the foot of the column */
:root main:has(> div > h2) > div:nth-of-type(1) > p:first-child {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

:root main:has(> div > h2) > div:nth-of-type(1) > p:first-child::after {
  margin-top: auto;
}

/* band cards share one baseline, CTAs align at the foot */
:root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

:root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > a:last-child {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 0.9rem;
}

/* ── Responsive — every spanning band must be reset here ── */
@media (max-width: 900px) {
  :root main:has(> div > h2) {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 2.4rem;
    padding-inline: 1.5rem;
  }

  :root main:has(> div > h2) > div:nth-of-type(1),
  :root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4),
  :root main:has(> div > h2) > div:nth-of-type(n+5),
  :root main:has(> div > h2)::after {
    grid-column: 1 / -1;
  }

  :root main:has(> div > h2) > div:nth-of-type(1) {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding-bottom: 2.4rem;
  }

  :root main > div:nth-of-type(1) > p:first-child {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 1.2rem;
  }

  :root main > div:nth-of-type(1) > p:first-child::after {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
  }

  :root main:has(> div > h2) > div:nth-of-type(1) > h2,
  :root main:has(> div > h2) > div:nth-of-type(1) > h2 + p,
  :root main:has(> div > h2) > div:nth-of-type(1) > a:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  :root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) {
    margin-top: 0;
  }

  :root main:has(> div > h2) > div:nth-of-type(2) {
    margin-top: 3.8rem;
  }

  :root main:has(> div > h2) > div:nth-of-type(5),
  :root main:has(> div > h2) > div:nth-of-type(6) {
    margin-top: 0;
  }

  :root main:has(> div > h2) > div:nth-of-type(5) {
    margin-top: 4rem;
  }

  :root main:has(> div > h2) > div:nth-of-type(2)::before,
  :root main:has(> div > h2) > div:nth-of-type(5)::before {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  :root body > header {
    padding: 2.4rem 1.2rem 2.2rem;
  }

  :root main:nth-of-type(1):has(> article) > span {
    flex-direction: column;
    gap: 0.35rem;
  }

  :root main:has(> article) > article > h2::before {
    margin: 2.2rem 0 1.8rem;
  }
}