*{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=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Montserrat',sans-serif;color:#2D2327;background:#FDF8F5}
.wrapper-dffb3c{background:#5D2E46;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:#5D2E46}
.card h2 a:hover{color:#D4A373}
.read-more{color:#D4A373}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#D4A373}
.article-content img{border-radius:12px}
.affiliate-disclosure{border-radius:12px}
.ymyl-disclaimer{border-radius:12px}
/* === Custom === */
/* v.6088a3 — layout revision
   pf-poder-es · Velida — cuaderno semanal de Magdalena Aranda, Asunción
   Editorial layer over the minimal base template.
   Live markup (post-obfuscation) targeted via element + structural selectors:
     home    : main.sidebar-b2a34d  >  N× div.module (p.date, h2>a, p.excerpt, a.readmore)  +  div.frame (tail)
     article : main.sidebar-b2a34d.inner  >  h1 + span.date + article(img,p,div[aviso em],…,div[ymyl strong]) + nav(related)
   Voices : Literata italic = display · Literata roman = text · Karla tracked-caps = meta
   Colour : linen paper · terracotta = links/CTA · sage = structural second hue · #8B2E2E = 2 signature accents
   Base single-class rules are beaten with a :root prefix; :nth-of-type(n) pads past .class-element (0,2,0) rules.
*/

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Karla:wght@0,400;0,500;0,600;0,700&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --color-bg:           #F8F1E7;
  --color-card:         #FCF7EE;
  --color-sage-tint:    #E7ECE1;
  --color-surface:      #EFE1CF;
  --color-text:         #2A211A;
  --color-text-muted:   #776354;
  --color-primary:      #A6552F;   /* terracotta — links & CTA */
  --color-primary-dark: #7A3E22;
  --color-secondary:    #45604A;   /* sage — structural second hue */
  --color-sage-deep:    #33513C;   /* kickers / rules */
  --color-masthead:     #24352A;   /* dark green field + strip tint */
  --color-moment:       #8B2E2E;   /* signature accent — used twice only */
  --color-border:       #E2D2BC;
  --color-heading:      #221A14;
  --color-link:         #A6552F;
  --color-link-hover:   #7A3E22;

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

  --size-base: 18px;
  --lh-body:    1.7;
  --lh-heading: 1.25;

  --space:       1rem;
  --max-content: 66ch;
  --max-page:    1080px;
  --max-read:    720px;
  --radius:      9px;
}

/* ── Reset & body ────────────────────────────────────────── */
:root *, :root *::before, :root *::after { box-sizing: border-box; }
html { font-size: var(--size-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root body {
  margin: 0;
  padding: 0;
  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;
}

/* ── Base typography ─────────────────────────────────────── */
: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;
}
:root h1 { font-style: italic; font-weight: 500; letter-spacing: -.01em; }

:root p { margin: 0 0 1.15rem; }
:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-link) 45%, transparent);
  transition: color .18s ease, text-decoration-color .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; }

:root strong { color: var(--color-heading); }
:root em { color: var(--color-primary-dark); }
:root img { max-width: 100%; height: auto; display: block; }

/* ══════════════════════════════════════════════════════════
   MASTHEAD  — dark sage field, cream italic wordmark, seal, rust rule
   ══════════════════════════════════════════════════════════ */
:root body > header {
  max-width: none;
  margin: 0 0 clamp(3rem, 6vw, 4.75rem);
  padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(2.4rem, 5vw, 3.4rem);
  text-align: center;
  border-bottom: none;
  background-color: var(--color-masthead);
  background-image:
    linear-gradient(rgba(26,38,30,.72), rgba(26,38,30,.82)),
    url("/theme-assets/cover.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
:root body > header::before {
  content: "";
  display: block;
  width: 46px; height: 46px;
  margin: 0 auto 1.1rem;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23E7DCC6' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Cpath d='M24 35V18'/%3E%3Cpath d='M24 23C18 21 15 16 16 11c5 1 8 5 8 10'/%3E%3Cpath d='M24 21c6-2 9-7 8-12-5 1-8 5-8 10'/%3E%3Cpath d='M20 37c2-2 6-2 8 0'/%3E%3C/svg%3E");
  opacity: .92;
}
:root body header > h1:nth-of-type(n),
:root body header > a:nth-of-type(n) {
  display: inline-block;
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: -.015em;
  color: #F5EEDF;
  line-height: 1.1;
  text-decoration: none;
}
:root body header > a:nth-of-type(n):hover { color: #FBF6EC; text-decoration: none; }
:root body header > p:nth-of-type(n) {
  max-width: 46ch;
  margin: 1.05rem auto 0;
  padding-top: 1.05rem;
  border-top: 2px solid var(--color-moment);   /* signature accent #1 of 2 */
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: .96rem;
  line-height: 1.6;
  color: rgba(240,233,218,.82);
}
:root body header > p:nth-of-type(n)::before {
  content: "";
  display: block;
  width: 34px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE   H = main with no <article>
   ══════════════════════════════════════════════════════════ */
:root main:not(:has(> article)) {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 3vw, 2rem) 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.6rem, 3vw, 2.6rem);
  row-gap: clamp(1.8rem, 3vw, 2.75rem);
  align-items: stretch;
  grid-auto-flow: dense;
}

/* — shared card voice (journal grid) — */
:root main:not(:has(> article)) > div:has(> h2) {
  padding: 26px 32px 28px;
  background-color: var(--color-card);
  border: 1px solid rgba(69,96,74,.16);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(40,30,20,.05);
  display: flex;
  flex-direction: column;
}
:root main:not(:has(> article)) > div:has(> h2) > p:first-child {
  order: -1;
  margin: 0 0 .55rem;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}
:root main:not(:has(> article)) > div > h2:nth-of-type(n) {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.28;
}
:root main:not(:has(> article)) > div > h2 > a:nth-of-type(n) {
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: none;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease, color .2s ease;
}
:root main:not(:has(> article)) > div > h2 > a:hover { color: var(--color-primary-dark); background-size: 100% 1px; }
:root main:not(:has(> article)) > div > h2 + p:nth-of-type(n) {
  margin: 0 0 1rem;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* read-more → Spanish, tracked caps, sits at the card foot */
:root main:not(:has(> article)) > div > a {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0;
  text-decoration: none;
  color: var(--color-primary);
}
:root main:not(:has(> article)) > div > a::after {
  content: "Leer la entrada \2192";
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  padding-bottom: 2px;
}
:root main:not(:has(> article)) > div > a:hover::after { border-bottom-color: var(--color-primary); }

/* ── HERO — first card, full width, left meta rail + display title ── */
:root main:not(:has(> article)) > div:has(> h2):first-of-type {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  column-gap: clamp(1.6rem, 3.5vw, 3rem);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 3rem) clamp(2.2rem, 3.5vw, 3rem);
  background-color: var(--color-card);
  border-color: rgba(69,96,74,.2);
  box-shadow: 0 2px 12px rgba(40,30,20,.06);
}
/* meta rail (col 1) = badge + date + byline */
:root main:not(:has(> article)) > div:first-of-type > p:first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  order: 0;
  margin: 0;
  padding-top: .35rem;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--color-sage-deep);
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child::before {
  content: "Última entrada";
  display: block;
  margin-bottom: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child::after {
  content: "Por Magdalena Aranda · Cuaderno semanal";
  display: block;
  margin-top: .9rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--color-text-muted);
}
:root main:not(:has(> article)) > div:first-of-type > h2:nth-of-type(n) {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 1rem;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
:root main:not(:has(> article)) > div:first-of-type > h2 + p:nth-of-type(n) {
  grid-column: 2;
  grid-row: 2;
  max-width: 60ch;
  margin: 0 0 1.4rem;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--color-text);
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
:root main:not(:has(> article)) > div:first-of-type > h2 + p::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .78;
  color: var(--color-moment);   /* signature accent #2 of 2 */
}
:root main:not(:has(> article)) > div:first-of-type > a {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin: 0;
  padding: 0;
}
:root main:not(:has(> article)) > div:first-of-type > a::after {
  content: "Leer la entrada \2192";
  padding: .6rem 1.35rem;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-primary);
  transition: background-color .2s ease, color .2s ease;
}
:root main:not(:has(> article)) > div:first-of-type > a:hover::after {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

/* ── EDITOR'S PICK — second card, full width, sage-tinted, kicker label ── */
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) {
  grid-column: 1 / -1;
  padding: 30px clamp(2rem, 3.5vw, 3rem) 32px;
  background-color: var(--color-sage-tint);
  border-color: rgba(51,81,60,.28);
  border-left: 4px solid var(--color-secondary);
}
:root main:not(:has(> article)) > div:nth-of-type(2)::before {
  content: "Para volver — una entrada que releería";
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(51,81,60,.28);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}
:root main:not(:has(> article)) > div:nth-of-type(2) > h2:nth-of-type(n) {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
}
:root main:not(:has(> article)) > div:nth-of-type(2) > h2 + p:nth-of-type(n) {
  max-width: 64ch;
  font-size: 15.5px;
}

/* ── STRIP 1 — band before the journal, on the third card (full width lead) ── */
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) {
  grid-column: 1 / -1;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
}
:root main:not(:has(> article)) > div:nth-of-type(3)::before {
  content: "En orden de escritura";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: .5rem 0 2rem;
  border-radius: var(--radius);
  background-color: var(--color-masthead);
  background-image:
    linear-gradient(rgba(20,24,28,.58), rgba(20,24,28,.3)),
    url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  color: #F3ECDD;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:nth-of-type(3) > p:first-child {
  order: 0;
  margin-bottom: .5rem;
}
:root main:not(:has(> article)) > div:nth-of-type(3) > h2:nth-of-type(n) {
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 500;
}
:root main:not(:has(> article)) > div:nth-of-type(3) > h2 + p:nth-of-type(n) {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}
:root main:not(:has(> article)) > div:nth-of-type(3) > a { align-self: center; }

/* ── colophon — fills the odd trailing grid cell with a quiet sign-off ── */
:root main:not(:has(> article))::after {
  content: "Se escribe los miércoles · con el mate casi siempre frío.";
  align-self: center;
  padding: 1rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── TAIL / archive index — full width, Strip 2 header, two-column list ── */
:root main:not(:has(> article)) > div:not(:has(> h2)) {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  padding: 0;
  border: none;
  background: none;
}
:root main:not(:has(> article)) > div:not(:has(> h2))::before {
  content: "Más entradas";
  column-span: all;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin-bottom: 2.2rem;
  border-radius: var(--radius);
  background-color: var(--color-masthead);
  background-image:
    linear-gradient(rgba(20,24,28,.58), rgba(20,24,28,.3)),
    url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
  color: #F3ECDD;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:not(:has(> h2)) > p:nth-of-type(n) {
  margin: 0;
  padding: 11px 0;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.4;
  border-bottom: 1px dotted rgba(51,81,60,.3);
  break-inside: avoid;
}
@media (min-width: 720px) {
  :root main:not(:has(> article)) > div:not(:has(> h2)) {
    columns: 2;
    column-gap: 3rem;
  }
}
:root main:not(:has(> article)) > div:not(:has(> h2)) p a:nth-of-type(n) {
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: none;
}
:root main:not(:has(> article)) > div:not(:has(> h2)) p a:hover { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
   ARTICLE   A = main with an <article>
   ══════════════════════════════════════════════════════════ */
:root main:has(> article) {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2rem) 3rem;
}
:root main:has(> article) > h1:nth-of-type(n) {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--color-heading);
}
:root main:has(> article) > span:nth-of-type(n) {
  display: block;
  margin: 0 0 2rem;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}

/* body copy */
:root main:has(> article) > article > p:nth-of-type(n) {
  max-width: var(--max-content);
  margin: 0 0 1.3rem;
  font-size: 1.06rem;
  line-height: 1.78;
  color: var(--color-text);
}
:root main:has(> article) > article > p:first-of-type::first-letter {
  float: left;
  margin: .05em .1em 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .78;
  color: var(--color-primary);
}
:root main:has(> article) > article > ul:nth-of-type(n),
:root main:has(> article) > article > ol:nth-of-type(n) {
  max-width: var(--max-content);
  margin: 0 0 1.3rem;
  padding-left: 1.4em;
  font-size: 1.04rem;
  line-height: 1.7;
}
:root main:has(> article) > article li { margin-bottom: .5em; }

/* section headings — dinkus instead of the flat underline */
:root main:has(> article) > article > h2:nth-of-type(n) {
  margin: 2.6rem 0 1rem;
  padding: 0;
  border: none;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--color-heading);
}
:root main:has(> article) > article > h2:nth-of-type(n)::before {
  content: "\2737 \2737 \2737";
  display: block;
  margin-bottom: 1.4rem;
  font-size: .72rem;
  letter-spacing: .5em;
  color: var(--color-secondary);
  opacity: .7;
}
:root main:has(> article) > article > h3:nth-of-type(n) {
  margin: 2rem 0 .7rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.24rem;
  color: var(--color-heading);
}

/* article images — soft frame */
:root main:has(> article) > article > img:nth-of-type(n) {
  margin: 2rem auto;
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(40,30,20,.1);
}

/* pull-quote / blockquote — sage rule + hanging quotation mark */
:root main:has(> article) blockquote {
  position: relative;
  max-width: var(--max-content);
  margin: 2rem 0;
  padding: 1.1rem 1.6rem 1.1rem 2.4rem;
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--color-sage-tint);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--color-sage-deep);
}
:root main:has(> article) blockquote::before {
  content: "\201C";
  position: absolute;
  left: .5rem; top: .35rem;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-secondary);
  opacity: .55;
}
:root main:has(> article) blockquote p { margin: 0; max-width: none; }

/* body links — quiet editorial underline */
:root main:has(> article) > article a:nth-of-type(n) {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-underline-offset: 3px;
  border-bottom: none;
}
:root main:has(> article) > article a:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }

/* affiliate CTA — filled pill, must out-specify the body-link rule (RULE J) */
:root main:has(> article) > article a[href^="/go/"]:nth-of-type(n) {
  display: inline-block;
  margin: .4rem 0;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #FBF6EC;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 8px rgba(122,62,34,.22);
  transition: background-color .2s ease;
}
:root main:has(> article) > article a[href^="/go/"]:hover { background-color: var(--color-primary-dark); color: #FBF6EC; }

/* affiliate transparency note — sage-tinted card with kicker */
:root main:has(> article) > article > div:has(> em) {
  margin: 2rem 0;
  padding: 1rem 1.3rem;
  border: none;
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--color-sage-tint);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--color-sage-deep);
}
:root main:has(> article) > article > div:has(> em)::before {
  content: "Transparencia";
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
:root main:has(> article) > article > div:has(> em) > em:nth-of-type(n) { color: inherit; font-style: italic; }

/* YMYL / personal-experience note — warm card with kicker */
:root main:has(> article) > article > div:has(> strong) {
  margin: 2.2rem 0 0;
  padding: 1rem 1.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
:root main:has(> article) > article > div:has(> strong) > strong:nth-of-type(n) {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

/* related articles — boxed block, clearly not body text */
:root main:has(> article) > nav {
  margin: 3rem 0 1rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(51,81,60,.22);
  border-radius: var(--radius);
  background-color: var(--color-card);
}
:root main:has(> article) > nav p { margin: 0; font-size: .96rem; line-height: 1.8; }
:root main:has(> article) > nav p > em:nth-of-type(n) {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-sage-deep);
}
:root main:has(> article) > nav a:nth-of-type(n) {
  color: var(--color-primary-dark);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 35%, transparent);
}
:root main:has(> article) > nav a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Footer ──────────────────────────────────────────────── */
:root body > footer {
  max-width: none;
  margin-top: 4rem;
  padding: 2rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .82rem;
}
:root body > footer a:nth-of-type(n) { color: var(--color-primary-dark); text-decoration: none; }
:root body > footer a:hover { color: var(--color-primary); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  :root main:not(:has(> article)) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.4rem;
  }
  :root main:not(:has(> article)) > div { min-width: 0; }
  :root main:not(:has(> article)) > div:has(> h2):first-of-type,
  :root main:not(:has(> article)) > div:first-of-type {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .4rem;
  }
  :root main:not(:has(> article)) > div:first-of-type > h2:nth-of-type(n),
  :root main:not(:has(> article)) > div:first-of-type > h2 + p:nth-of-type(n) { overflow-wrap: break-word; }
  :root main:not(:has(> article)) > div:first-of-type > p:first-child { grid-row: auto; }
  :root main:not(:has(> article)) > div:first-of-type > h2:nth-of-type(n),
  :root main:not(:has(> article)) > div:first-of-type > h2 + p:nth-of-type(n),
  :root main:not(:has(> article)) > div:first-of-type > a { grid-column: 1; grid-row: auto; }
  :root main:not(:has(> article)) > div:nth-of-type(3)::before,
  :root main:not(:has(> article)) > div:not(:has(> h2))::before { min-height: 150px; }
  :root main:not(:has(> article))::after { display: none; }
}