*{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}
.css-ghr65lz{max-width:640px;margin:0 auto;padding:0 20px}
.css-8gsskhv{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.css-8gsskhv h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-8gsskhv p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.css-8gsskhv a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-8348b2e{padding:20px 0}
.css-8348b2e h2{font-size:18px;font-weight:400;margin-bottom:4px}
.css-8348b2e h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-8348b2e h2 a:hover{border-bottom-color:#2a2a2a}
.css-8348b2e .css-baqu6gy{font-size:12px;color:#aaa;margin-bottom:6px}
.css-8348b2e p{font-size:14px;color:#666}
.css-etle0po{color:#888;font-size:13px;text-decoration:none}
.css-etle0po:hover{color:#2a2a2a}
.css-1d9k07q{padding-bottom:60px}
.css-1d9k07q h1{font-size:28px;font-weight:400;margin-bottom:8px}
.css-1d9k07q .css-baqu6gy{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.css-1d9k07q h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.css-1d9k07q h3{font-size:17px;margin:28px 0 8px}
.css-1d9k07q p{margin-bottom:18px;font-size:16px}
.css-1d9k07q ul,.css-1d9k07q ol{margin:0 0 18px 20px}
.css-1d9k07q a{color:#555;border-bottom:1px solid #ccc}
.css-1d9k07q a:hover{color:#000;border-bottom-color:#000}
.css-1d9k07q img{max-width:100%;height:auto;margin:24px 0}
.css-fkovgse{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.css-fkovgse a{color:#aaa;text-decoration:none}
.css-19004ub{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.css-p9xltzi{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.css-bj4lnis{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.css-gs4x6fx{margin:0 auto 32px;max-width:720px}
.css-em6bh0l{width:100%;height:auto}
.css-9mi8t1r{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.css-9mi8t1r em{color:#aaa}
.css-9mi8t1r a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.css-mafvh89{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.css-mafvh89 p{padding:3px 0;margin:0;font-size:15px}
.css-mafvh89 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-mafvh89 a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#2C2C2C;background:#FDFCF8}
.css-8gsskhv{background:#1A2238;color:#fff}
.css-8gsskhv h1{font-family:'Cormorant Garamond',serif;color:#fff}
.css-8gsskhv p{color:rgba(255,255,255,.75)}
.css-8gsskhv a{color:#fff;text-decoration:none}
.card h2{font-family:'Cormorant Garamond',serif}
.card h2 a{color:#1A2238}
.card h2 a:hover{color:#D97757}
.read-more{color:#D97757}
.article-content h1{font-family:'Cormorant Garamond',serif}
.article-content h2{font-family:'Cormorant Garamond',serif}
.article-content a{color:#D97757}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* mt-mentor-es — minimal template
   Natalia Pereyra · Bucaramanga · cuaderno de mentoría accidental
   Palette: forest-sage #3A5844 + warm amber #C08A38 on parchment #F5F0E7
   Fonts: Alegreya (heading) + Lato (body)
*/

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

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --color-bg:            #F5F0E7;
  --color-surface:       #EDE7D9;
  --color-text:          #221C13;
  --color-text-muted:    #7A6C5B;
  --color-primary:       #3A5844;
  --color-primary-dark:  #2B4333;
  --color-primary-light: #D8E6DC;
  --color-accent:        #C08A38;
  --color-accent-dark:   #9A6E24;
  --color-border:        #DCCFBC;
  --color-heading:       #221C13;
  --color-link:          #3A5844;
  --color-link-hover:    #C08A38;

  --font-heading: 'Alegreya', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;

  --size-base: 18px;
  --size-h1:   2.3rem;
  --size-h2:   1.75rem;
  --size-h3:   1.35rem;

  --lh-body:    1.78;
  --lh-heading: 1.25;

  --space:         1rem;
  --space-section: 3rem;
  --max-content:   68ch;
  --max-page:      860px;

  --radius: 4px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* ── Body ────────────────────────────────────────────────── */
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;
}

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

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

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

h3 {
  font-size: var(--size-h3);
  color: var(--color-primary);
}

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

/* ── Paragraphs ──────────────────────────────────────────── */
p {
  max-width: var(--max-content);
  margin-bottom: calc(var(--space) * 1.3);
}

p + p {
  margin-top: 0;
}

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

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

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

/* ── Lists ───────────────────────────────────────────────── */
ul, ol {
  max-width: var(--max-content);
  padding-left: 1.6em;
  margin-bottom: calc(var(--space) * 1.3);
}

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

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

ul li::marker { color: var(--color-accent); }
ol li::marker { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; }

/* ── Blockquote — evoca fragmentos de conversación ──────── */
blockquote {
  max-width: var(--max-content);
  border-left: 3px solid var(--color-primary);
  padding: calc(var(--space) * 0.9) calc(var(--space) * 1.4);
  margin: calc(var(--space) * 2) 0;
  background-color: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text);
}

blockquote p {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.82rem;
  font-style: normal;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

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

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

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

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

/* ── Code ────────────────────────────────────────────────── */
code {
  font-size: 0.875em;
  background-color: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  color: var(--color-primary-dark);
}

pre {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
  overflow-x: auto;
  margin-bottom: calc(var(--space) * 1.3);
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.9em;
  color: var(--color-text);
}

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

/* ── Site header ─────────────────────────────────────────── */
.site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: calc(var(--space) * 1.25) 0;
  margin-bottom: var(--space-section);
}

.site-header .site-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-style: italic;
  color: var(--color-heading);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-block;
}

.site-header .site-title:hover {
  color: var(--color-primary);
  text-decoration-color: transparent;
}

.site-header .site-tagline {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.3em;
  font-style: italic;
}

.site-header nav {
  margin-top: 0.65em;
}

.site-header nav a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-right: 1.4em;
  letter-spacing: 0.02em;
}

.site-header nav a:hover {
  color: var(--color-primary);
}

/* ── Post / article ──────────────────────────────────────── */
article {
  margin-bottom: var(--space-section);
}

.post-header {
  margin-bottom: calc(var(--space) * 2);
}

.post-title {
  font-size: var(--size-h1);
  font-style: italic;
  margin-top: 0;
}

.post-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5em;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.post-content {
  margin-top: calc(var(--space) * 1.5);
}

/* ── Entry list — cuaderno verde ─────────────────────────── */
.entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-item {
  padding: calc(var(--space) * 1.5) 0;
  border-bottom: 1px solid var(--color-border);
  padding-left: calc(var(--space) * 1.25);
  border-left: 3px solid transparent;
  transition: border-left-color 0.18s ease;
}

.entry-item:first-child {
  border-top: 1px solid var(--color-border);
}

.entry-item:hover {
  border-left-color: var(--color-primary);
}

.entry-item .entry-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-style: italic;
  line-height: var(--lh-heading);
  margin: 0 0 0.35em;
}

.entry-item .entry-title a {
  color: var(--color-heading);
  text-decoration: none;
}

.entry-item .entry-title a:hover {
  color: var(--color-primary);
}

.entry-item .entry-excerpt {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: var(--max-content);
  margin-bottom: 0.5em;
  line-height: 1.65;
}

.entry-item .entry-date {
  font-size: 0.8rem;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* ── Tags ────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  padding: 0.2em 0.65em;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tag:hover {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  text-decoration-color: transparent;
}

/* ── Site footer ─────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: calc(var(--space) * 1.5) 0;
  margin-top: var(--space-section);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}

.site-footer a {
  color: var(--color-text-muted);
}

.site-footer a:hover {
  color: var(--color-primary);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --size-base:     17px;
    --size-h1:       1.9rem;
    --size-h2:       1.5rem;
    --size-h3:       1.2rem;
    --space-section: 2rem;
  }

  .site-wrapper,
  .container,
  main {
    padding-inline: var(--space);
  }

  .site-header nav a {
    margin-right: 1em;
  }

  .entry-item {
    padding-left: var(--space);
  }
}

/* === R2 fixes (2026-07-04T14:23:25.957138+00:00) === */

/* Link color contrast fix: content/listing links (paragraph links, the
   "Escritos por Natalia Pereyra" list, "read more →") rendered too light
   against the cream background (~2.3:1). Darken to an amber tone consistent
   with the existing accent bullets, restoring ~5:1 contrast. */
:root {
  --color-link: #8A5F22;
}

/* Entry separator fix: add a visible divider between stacked entries so
   consecutive date + title + excerpt blocks read as distinct notebook
   entries instead of blending together. */
.entry-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.entry-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* === R3 fixes (2026-07-04T15:50:38.320947+00:00) === */

/* Entry separator: the R2 rgba(0,0,0,0.08) override rendered fainter than
   the original --color-border value, so the divider was effectively
   invisible. Restore a visible border-color and add breathing room before
   the line so stacked entries read as distinct notebook entries. */
.entry-item {
  padding-bottom: calc(var(--space) * 1.75);
  border-bottom: 1px solid var(--color-border);
}

.entry-item:first-child {
  border-top: 1px solid var(--color-border);
}

/* "read more →" inside the excerpt was reading lighter than body-copy
   links; pin it explicitly to the same link color instead of relying on
   inheritance. */
.entry-item .entry-excerpt a {
  color: var(--color-link);
}

/* Link color: nudge from a flat brown toward the same warm-amber hue as
   the accent bullets/date, keeping contrast at ~4.6:1 on the cream bg. */
:root {
  --color-link: #8F631C;
}

/* v.95eb2e — layout revision
   ────────────────────────────────────────────────────────────────────
   EDITORIAL SIGNATURE PASS. The deployed site is the Lambda template:
   class names are obfuscated to .css-xxxxxx, so every rule above that
   targets .entry-item / .site-header / .post-* matches NOTHING live —
   which is exactly why the intended sage+amber palette never showed and
   the homepage read as one flat feed. Everything below uses only
   element + structural selectors against the real DOM:

     HOMEPAGE  <main> (no <article>) → N× <div> cards, each:
                 <p>date</p><h2><a>title</a></h2><p>excerpt</p><a>read more</a>
     ARTICLE   <main> has > h1, > span(date), > article, > nav(related)

   Homepage-only rules are scoped main:not(:has(> article));
   article-only rules main:has(> article). Palette wired onto real
   elements: forest-sage #3A5844 + amber #C08A38, one slate moment
   #4A5C6B used ONLY as the drop-cap colour (home hero + article intro).
   ──────────────────────────────────────────────────────────────────── */

:root {
  --moment:      #4A5C6B;   /* slate — drop caps only, ≤2 places */
  --paper-card:  #FBF7EF;   /* warm card surface (never #fff) */
  --paper-feat:  #F8F3E9;   /* featured/hero surface */
}

/* ── Masthead — photographic band + serif italic wordmark ──────────── */
body > header {
  position: relative;
  background:
    linear-gradient(rgba(28, 33, 27, .74), rgba(28, 33, 27, .58)),
    url("/theme-assets/backdrop.jpg") center / cover no-repeat;
  border: none;
  border-bottom: 3px solid var(--color-accent);
  padding: clamp(2.6rem, 6vw, 4.6rem) 1.5rem;
  margin-bottom: var(--space-section);
  text-align: center;
}
body > header h1,
body > header > a {
  display: inline-block;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  color: #F5F0E7;
  text-decoration: none;
  margin: 0;
}
body > header > a:hover { color: #F5F0E7; }
body > header p {
  max-width: 58ch;
  margin: 1rem auto 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(245, 240, 231, .88);
}
body > header::after {
  content: "NOTAS DE MENTORÍA ACCIDENTAL · NOMBRES CAMBIADOS, PERMISO PEDIDO";
  display: block;
  margin: 1.35rem auto 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Homepage grid shell ───────────────────────────────────────────── */
main:not(:has(> article)) {
  max-width: 1140px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.4rem;
  row-gap: 3.2rem;
}

/* Base card (journal cell) — warm paper, soft frame */
/* M3 fix — the base theme rule `.css-8348b2e{padding:20px 0}` (specificity
   0,1,0) was OVERRIDING this rule's padding (0,0,3), so the journal cards and
   the "Para leer primero" picks rendered with 0 horizontal inset and their
   date/title/excerpt/READ MORE hugged the left frame edge. The :root prefix
   lifts this to (0,1,3) so it beats the base class, while still yielding to the
   per-card nth-of-type/nth-last-of-type overrides (also 0,1,3 but later in
   source) that set the hero/strip/closing/archive paddings. */
:root main:not(:has(> article)) > div {
  display: flex;
  flex-direction: column;
  background: var(--paper-card);
  border: 1px solid rgba(58, 88, 68, .16);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
  padding: 1.8rem 2.1rem 2rem;
}
main:not(:has(> article)) > div > p:first-of-type {          /* date kicker */
  margin: 0 0 .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
}
main:not(:has(> article)) > div > h2 {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1.22;
}
main:not(:has(> article)) > div > h2 a {
  color: var(--color-heading);
  text-decoration: none;
}
main:not(:has(> article)) > div > h2 a:hover { color: var(--color-primary); }
main:not(:has(> article)) > div > p:nth-of-type(2) {          /* excerpt */
  margin: 0 0 1.1rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
main:not(:has(> article)) > div > a {                          /* read more */
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  text-decoration: none;
}
main:not(:has(> article)) > div > a:hover { color: var(--color-primary); }

/* ── HERO — the loud voice (first card, full width) ────────────────── */
main:not(:has(> article)) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;
  background: var(--paper-feat);
  border-color: rgba(74, 92, 107, .30);
  padding: 3rem 2.6rem 3.1rem;
}
main:not(:has(> article)) > div:nth-of-type(1)::before {       /* badge */
  content: "ÚLTIMA ENTRADA DEL CUADERNO";
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 1rem;
}
main:not(:has(> article)) > div:nth-of-type(1) > h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) {
  display: block;
  max-width: 60ch;
  font-size: 1.24rem;
  line-height: 1.55;
  color: var(--color-text);
}
main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 3.7rem;
  line-height: .78;
  padding: .35rem .42rem 0 0;
  color: var(--moment);
}
main:not(:has(> article)) > div:nth-of-type(1) > a {           /* outlined pill */
  margin-top: 1.2rem;
  padding: .58rem 1.35rem;
  border: 1.5px solid var(--color-accent-dark);
  border-radius: 999px;
  color: var(--color-accent-dark);
}
main:not(:has(> article)) > div:nth-of-type(1) > a:hover {
  background: var(--color-accent-dark);
  color: var(--paper-feat);
}
main:not(:has(> article)) > div:nth-of-type(1)::after {        /* byline */
  content: "UN CUADERNO DE NATALIA PEREYRA · BUCARAMANGA, COLOMBIA";
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(58, 88, 68, .18);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── EDITOR'S PICKS — paired feature (cards 2 & 3) ─────────────────── */
main:not(:has(> article)) > div:nth-of-type(2),
main:not(:has(> article)) > div:nth-of-type(3) {
  margin-top: 2.5rem;
  background: var(--paper-feat);
  border-left: 3px solid var(--color-primary);
}
main:not(:has(> article)) > div:nth-of-type(2) { position: relative; }
main:not(:has(> article)) > div:nth-of-type(2)::before {       /* full-row label */
  content: "PARA LEER PRIMERO · SELECCIÓN DE NATALIA";
  position: absolute;
  left: 0;
  top: -2.35rem;
  width: calc(200% + 2.4rem);
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(58, 88, 68, .28);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

/* ── STRIP 1 — "EL CUADERNO" band + journal lead (card 4) ──────────── */
main:not(:has(> article)) > div:nth-of-type(4) {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
}
main:not(:has(> article)) > div:nth-of-type(4)::before {
  content: "EL CUADERNO";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  margin-bottom: 1.6rem;
  background:
    linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .30)),
    url("/theme-assets/article-hero.jpg") center 30% / cover no-repeat;
  color: #F5F0E7;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
main:not(:has(> article)) > div:nth-of-type(4) > p,
main:not(:has(> article)) > div:nth-of-type(4) > h2,
main:not(:has(> article)) > div:nth-of-type(4) > a { padding-inline: 2.2rem; }
main:not(:has(> article)) > div:nth-of-type(4) > a { padding-bottom: 1.9rem; }
main:not(:has(> article)) > div:nth-of-type(4) > h2 { font-size: 1.7rem; }
main:not(:has(> article)) > div:nth-of-type(4) > p:nth-of-type(2) {
  display: block;
  max-width: 66ch;
}

/* ── Closing feature (3rd-from-last, full width) — avoids ragged tail ─ */
main:not(:has(> article)) > div:nth-last-of-type(3) {
  grid-column: 1 / -1;
  background: var(--paper-feat);
  padding: 2.2rem 2.4rem 2.4rem;
}
main:not(:has(> article)) > div:nth-last-of-type(3)::before {
  content: "OTRA DEL CUADERNO";
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: .6rem;
}
main:not(:has(> article)) > div:nth-last-of-type(3) > h2 { font-size: 1.75rem; }
main:not(:has(> article)) > div:nth-last-of-type(3) > p:nth-of-type(2) {
  display: block;
  max-width: 70ch;
}

/* ── STRIP 2 — "EL ARCHIVO" band + compact index tail (last 2 cards) ─ */
main:not(:has(> article)) > div:nth-last-of-type(2) {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
  background: var(--paper-card);
}
main:not(:has(> article)) > div:nth-last-of-type(2)::before {
  content: "EL ARCHIVO";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background:
    linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .28)),
    url("/theme-assets/article-hero.jpg") center 70% / cover no-repeat;
  color: #F5F0E7;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
main:not(:has(> article)) > div:nth-last-of-type(2) > p:first-of-type {
  display: inline-block;
  margin: 1.3rem 0 0;
  padding-left: 2.2rem;
}
main:not(:has(> article)) > div:nth-last-of-type(2) > h2 {
  margin: .25rem 0 1.4rem;
  padding-inline: 2.2rem;
  font-size: 1.15rem;
}
main:not(:has(> article)) > div:nth-last-of-type(2) > p:nth-of-type(2),
main:not(:has(> article)) > div:nth-last-of-type(2) > a { display: none; }

/* M7 fix — EL ARCHIVO index tail = boxed cream-card magazine grid.
   The real DOM ends <main> with ONE <div> whose children are <p><a>title</a></p>
   rows (no <h2>, no date) — the site's full archive index, distinct from the
   feature cards above. The prior pass styled it transparent with a dotted rule,
   so it read as plain text rows on the page (M7 fail). Render it as a grid of
   boxed cream cards carrying the SAME paper token / border / radius / shadow /
   hover language as the top journal cards, so top-to-bottom reads as one system.
   nth-last-of-type(1) (0,1,3) beats the base `.css-mafvh89` rules (0,1,0/0,1,1). */
main:not(:has(> article)) > div:nth-last-of-type(1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: .4rem;
}
main:not(:has(> article)) > div:nth-last-of-type(1) > p {         /* index cell */
  display: flex;
  margin: 0;
  max-width: none;
  padding: 16px 18px;
  background: var(--paper-card);
  border: 1px solid rgba(58, 88, 68, .16);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
main:not(:has(> article)) > div:nth-last-of-type(1) > p:hover {
  transform: translateY(-2px);
  border-color: rgba(58, 88, 68, .32);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
main:not(:has(> article)) > div:nth-last-of-type(1) > p a {
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.32;
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: none;
}
main:not(:has(> article)) > div:nth-last-of-type(1) > p a:hover {
  color: var(--color-primary);
}

/* ── ARTICLE PAGE ──────────────────────────────────────────────────── */
main:has(> article) > h1 {
  margin: 1.4rem 0 .35rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
main:has(> article) > span {                                   /* date */
  display: block;
  margin-bottom: 1.9rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary);
}
main:has(> article) article > img {
  width: 100%;
  border-radius: 8px;
  margin: 1.7rem 0;
}
main:has(> article) article > p {
  max-width: 68ch;
  margin-bottom: 1.4rem;
  font-size: 1.14rem;
  line-height: 1.8;
  color: var(--color-text);
}
main:has(> article) article > p:first-of-type::first-letter { /* drop cap — moment */
  float: left;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 3.5rem;
  line-height: .8;
  padding: .3rem .5rem 0 0;
  color: var(--moment);
}
main:has(> article) article > h2 {
  margin-top: 2.6rem;
  font-family: var(--font-heading);
  font-size: 1.7rem;
}
main:has(> article) article > h2::before {                     /* dinkus divider */
  content: "✳ ✳ ✳";
  display: block;
  margin: 1.6rem 0 1.4rem;
  text-align: center;
  font-size: .9rem;
  letter-spacing: .5em;
  color: var(--color-accent);
  opacity: .7;
}
main:has(> article) article > div {                            /* transparency note */
  margin: 1.8rem 0;
  padding: 1rem 1.3rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  font-size: .92rem;
  line-height: 1.65;
}
main:has(> article) article > section {                        /* nota / bio boxes */
  margin-top: 2.4rem;
  padding: 1.2rem 1.5rem;
  background: #F1E9D9;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
main:has(> article) > nav {                                    /* related */
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
}
main:has(> article) > nav p em {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Body links vs affiliate CTA — CTA selector carries the full body-link
   path plus [href^="/top/"] so it strictly out-specifies the body rule
   (RULE J): text = dark ink on amber, never amber-on-amber. */
main:has(> article) article p a,
main:has(> article) article li a {
  color: var(--color-accent-dark);
  text-underline-offset: 2px;
}
/* M10 refix (iter=2) — the live affiliate links use /top/ (verified on the
   monetized "por-que-inscribirse-academia-liderazgo" entry, where the pill
   already renders correctly). The reviewer's two sampled entries
   (como-gestionar-prioridades, como-hacer-mentoria-pares) simply carry NO
   affiliate anchor at all — only internal .html cross-links + Wikipedia — so
   nothing in their DOM can become a pill via CSS. To harden M10 across the
   whole corpus regardless of which prefix the pipeline emits (config default
   template is /go/{product_slug}) OR whether the product link sits inline in a
   <p>/<li> or inside an inline-card <div>, broaden the pill to ANY affiliate
   anchor anywhere inside <article>: the standard's four prefixes
   (/try/ /ref/ /go/ /out/) + the existing /top/ + any external hotmart URL.
   The trailing-slash prefixes never match internal slug links (e.g. /gorilas)
   and hotmart never appears in cross-links, so prose/nav links stay untouched.
   Attribute-carrying selector (0,1,4) still out-specifies the body-link rule. */
main:has(> article) article a[href^="/top/"],
main:has(> article) article a[href^="/go/"],
main:has(> article) article a[href^="/ref/"],
main:has(> article) article a[href^="/out/"],
main:has(> article) article a[href^="/try/"],
main:has(> article) article a[href*="hotmart"] {
  display: inline-block;
  margin: .1rem 0;
  padding: .5rem 1.1rem;
  background: var(--color-accent);
  color: #241B0C;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
main:has(> article) article a[href^="/top/"]:hover,
main:has(> article) article a[href^="/go/"]:hover,
main:has(> article) article a[href^="/ref/"]:hover,
main:has(> article) article a[href^="/out/"]:hover,
main:has(> article) article a[href^="/try/"]:hover,
main:has(> article) article a[href*="hotmart"]:hover {
  background: var(--color-accent-dark);
  color: var(--paper-feat);
}

/* ── Footer ────────────────────────────────────────────────────────── */
body > footer {
  margin-top: var(--space-section);
  padding: 2rem 1.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: .85rem;
  color: var(--color-text-muted);
}
body > footer a { color: var(--color-primary); }

/* ── Responsive — collapse homepage grid to one column ─────────────── */
@media (max-width: 760px) {
  main:not(:has(> article)) { grid-template-columns: 1fr; }
  main:not(:has(> article)) > div:nth-of-type(3) { margin-top: 0; }
  main:not(:has(> article)) > div:nth-of-type(2)::before {
    width: 100%;
    white-space: normal;
  }
  /* M7 — archive index collapses to a single column of boxed cream cards */
  main:not(:has(> article)) > div:nth-last-of-type(1) { grid-template-columns: 1fr; }
}


/* related-articles-nav-fix v1 */
:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}


/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}


/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Any 3+ col grid inside main → 1 col on mobile */
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  /* Any CSS multi-column layout → 1 col on mobile */
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  /* Article body images stay inside viewport */
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}


/* mobile-padding-fix v1 */
@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* === QA refix iter=1 (surgical) ==================================== */

/* M6 fix — masthead full-bleed. The base theme gives BOTH <header> and <main>
   the same container class `.css-ghr65lz{max-width:640px;margin:0 auto}`
   (specificity 0,1,0), which pinned the dark masthead band to the same narrow
   central column as the article/homepage body, leaving warm beige margins on
   both sides. Lift the width constraint on the <header> ONLY — <main> keeps its
   reading measure. `:root > body > header` (0,1,2) beats the base class; the
   inner wordmark + tagline are re-centred to a comfortable measure so text
   never touches the band edges on narrow screens. */
:root > body > header {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
:root > body > header > h1,
:root > body > header > a,
:root > body > header > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* S6 note — article personality anchor. The base meta renders a date-only line
   (`<span class="css-baqu6gy">`) under the H1. Append a byline / persona line so
   the article carries Natalia's voice instead of a bare date. */
main:has(> article) > span::after {
  content: " · POR NATALIA PEREYRA · PEOPLE OPS, BUCARAMANGA";
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Monocle-Swiss overlay=25% grid=equal scale=balanced family=flat-divs */


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}