*{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}
.Card_wrapper__0RldK{max-width:640px;margin:0 auto;padding:0 20px}
.Wrapper_head__4QCb7{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.Wrapper_head__4QCb7 h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.Wrapper_head__4QCb7 p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.Wrapper_head__4QCb7 a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.Grid_area__iCHOp{padding:20px 0}
.Grid_area__iCHOp h2{font-size:18px;font-weight:400;margin-bottom:4px}
.Grid_area__iCHOp h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.Grid_area__iCHOp h2 a:hover{border-bottom-color:#2a2a2a}
.Grid_area__iCHOp .Article_area__nr4bX{font-size:12px;color:#aaa;margin-bottom:6px}
.Grid_area__iCHOp p{font-size:14px;color:#666}
.Banner_content__CTq8x{color:#888;font-size:13px;text-decoration:none}
.Banner_content__CTq8x:hover{color:#2a2a2a}
.Sidebar_content__PKYVh{padding-bottom:60px}
.Sidebar_content__PKYVh h1{font-size:28px;font-weight:400;margin-bottom:8px}
.Sidebar_content__PKYVh .Article_area__nr4bX{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.Sidebar_content__PKYVh h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.Sidebar_content__PKYVh h3{font-size:17px;margin:28px 0 8px}
.Sidebar_content__PKYVh p{margin-bottom:18px;font-size:16px}
.Sidebar_content__PKYVh ul,.Sidebar_content__PKYVh ol{margin:0 0 18px 20px}
.Sidebar_content__PKYVh a{color:#555;border-bottom:1px solid #ccc}
.Sidebar_content__PKYVh a:hover{color:#000;border-bottom-color:#000}
.Sidebar_content__PKYVh img{max-width:100%;height:auto;margin:24px 0}
.Main_wrap__Y7xCZ{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.Main_wrap__Y7xCZ a{color:#aaa;text-decoration:none}
.Card_item__mmyu1{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.Article_wrapper__3poO0{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.Header_head__OTQk8{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.Container_root__Gky8u{margin:0 auto 32px;max-width:720px}
.Module_head__4StR1{width:100%;height:auto}
.Module_block__VD7uw{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.Module_block__VD7uw em{color:#aaa}
.Module_block__VD7uw a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.Section_foot__ZZweh{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.Section_foot__ZZweh p{padding:3px 0;margin:0;font-size:15px}
.Section_foot__ZZweh a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.Section_foot__ZZweh a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#3D5A75;--accent:#D9A87A;--bg:#F0EAE0;--fg:#0F1820;--border:#B8B0A8;--r:6px;--fb:'Public Sans';--fh:'Cormorant Garamond'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* v.6ff72a — layout revision */

:root {
  --moment: #8B2E2E;
  --surface: #f6efe1;
  --surface-2: #faf5ec;
  --line: rgba(61,90,117,.15);
  --jpad-x: 34px;
  --jpad-y: 26px;
}

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.72; font-size: 16.5px; }
::selection { background: var(--accent); color: #23150e; }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 34px 0; }

/* ============================================================
   MASTHEAD — photo + gradient + serif-italic wordmark + manifesto
   ============================================================ */
:root > body > header {
  background: linear-gradient(rgba(28,40,52,.74), rgba(28,40,52,.58)), url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center 42%;
  color: #f4ece0;
  padding: 58px 0 34px;
  margin-bottom: 0;
  border-bottom: 3px solid var(--accent);
  text-align: center;
}
:root > body > header::before {
  content: "PEELINGS CASEROS · MASCARILLAS · UNA MESITA EN LIMA";
  display: block;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
:root > body > header > h1, :root > body > header h1 {
  max-width: 900px; margin: 0 auto 6px; padding: 0 24px;
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 47px; line-height: 1.08; color: #f8f1e4; letter-spacing: .005em;
}
:root > body > header > p, :root > body > header p {
  max-width: 600px; margin: 0 auto; padding: 0 24px;
  font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-style: italic;
  color: rgba(244,236,224,.9); line-height: 1.62;
}
:root > body > header::after {
  content: "— desde 2023, fracasos incluidos —";
  display: block; margin-top: 15px;
  font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 15px;
  color: rgba(240,214,192,.92);
}
/* article masthead: wordmark only */
:root > body > header > a {
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 31px; color: #f8f1e4; text-decoration: none;
}

/* ============================================================
   MAIN widths — narrow reading column for articles, wide grid for home
   ============================================================ */
:root main { margin: 0 auto; padding: 0 24px 64px; background: transparent; }
:root main:has(> article) { max-width: 724px; }
:root main:not(:has(> article)) { max-width: 1060px; }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
:root main:has(> article) { padding-top: 44px; }
:root main:has(> article) > h1 {
  font-family: var(--fh), Cambria, serif; font-weight: 600; font-size: 39px;
  color: var(--primary); line-height: 1.14; margin: 0 0 10px;
}
:root main:has(> article) > span {
  display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px;
  color: var(--accent); margin-bottom: 30px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; font-style: normal;
}

:root main > article > p { margin-bottom: 19px; font-size: 18px; line-height: 1.8; }
:root main > article > p:first-of-type::first-letter {
  font-family: var(--fh), Cambria, serif; font-weight: 700; font-size: 52px;
  line-height: .82; float: left; color: var(--primary); margin: 6px 10px 0 0;
}
:root main > article > h2 {
  font-family: var(--fh), Cambria, serif; font-size: 27px; font-weight: 600;
  color: var(--primary); margin: 1.9em 0 .55em; padding-bottom: 8px;
  border-bottom: 1px solid var(--accent); line-height: 1.18;
}
:root main > article > h2::before {
  content: "✷ ✷ ✷"; display: block; text-align: center;
  color: var(--accent); font-size: 13px; letter-spacing: .5em;
  margin: 0 0 22px; font-weight: 400; opacity: .8;
}
:root main > article ul, :root main > article ol { margin: 0 0 19px 24px; }
:root main > article li { margin-bottom: 7px; font-size: 17px; line-height: 1.7; }
:root main > article li strong, :root main > article > p strong { color: var(--primary); font-weight: 700; }

:root main > article > blockquote {
  margin: 26px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--accent);
  font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 21px;
  line-height: 1.5; color: var(--primary);
}

:root main > article > img, :root main > article > figure { margin: 0 0 30px; }
:root main > article > img, :root main > article > figure > img {
  width: 100%; height: auto; display: block; border-radius: var(--r);
  box-shadow: 0 3px 16px rgba(15,24,32,.13);
}

/* body links */
:root main > article > p a, :root main > article > p a:visited,
:root main > article > li a, :root main > article > ul a {
  color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600;
}
:root main > article > p a:hover, :root main > article > li a:hover, :root main > article > ul a:hover {
  color: var(--accent); text-decoration-color: var(--primary);
}

/* affiliate CTA chips — must out-specify body-link rule (RULE J) */
:root main > article > p a[href^="/visit/"], :root main > article > p a[href^="/visit/"]:visited,
:root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"],
:root main > article > p a[href^="/go/"], :root main > article > p a[href^="/out/"],
:root main > article > p a[href^="/check/"], :root main > article > p a[href^="/partner/"],
:root main > article > li a[href^="/visit/"], :root main > article > ul a[href^="/visit/"] {
  background: rgba(217,168,122,.24); color: var(--primary);
  border: 1px solid rgba(217,168,122,.72); border-radius: 6px;
  padding: 1px 9px; text-decoration: none; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:root main > article > p a[href^="/visit/"]:hover, :root main > article > p a[href^="/ref/"]:hover,
:root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/go/"]:hover,
:root main > article > p a[href^="/out/"]:hover, :root main > article > p a[href^="/check/"]:hover,
:root main > article > p a[href^="/partner/"]:hover, :root main > article > li a[href^="/visit/"]:hover {
  background: var(--accent); color: #23150e; border-color: var(--accent);
}

/* affiliate disclaimer callout (the single <div> inside article) */
:root main > article > div {
  background: var(--surface-2); border: 1px solid rgba(217,168,122,.5);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 15px 22px; margin: 26px 0; font-size: 14.5px; font-style: italic;
  color: rgba(15,24,32,.78); line-height: 1.6;
}
:root main > article > div em { font-style: italic; }

/* closing note (<section> at end of article) */
:root main > article > section {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; font-style: italic; color: rgba(15,24,32,.6); line-height: 1.65;
}
:root main > article > section b { font-weight: 600; font-style: normal; color: var(--primary); }

/* related-articles nav */
:root main > nav {
  margin-top: 42px; padding: 22px 26px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px;
}
:root main > nav p { margin: 0; font-size: 14.5px; line-height: 1.9; }
:root main > nav em {
  display: block; font-family: var(--fb), system-ui, sans-serif; font-style: normal;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: var(--accent); margin-bottom: 8px;
}
:root main > nav a { color: var(--primary); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(61,90,117,.3); }
:root main > nav a:hover { border-bottom-color: var(--primary); }

/* ============================================================
   HOMEPAGE — grid: hero (full) + Editor's Picks (2-col) + journal + strips
   ============================================================ */
:root main:not(:has(> article)) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 26px;
  align-items: stretch; padding-top: 42px;
}

/* generic card = full-width framed journal entry */
:root main:not(:has(> article)) > div {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 1px 4px rgba(20,24,28,.05);
  padding: var(--jpad-y) var(--jpad-x);
}
:root main:not(:has(> article)) > div > p:first-child {
  font-family: var(--fb), system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--primary); opacity: .68;
  margin: 0 0 9px;
}
:root main:not(:has(> article)) > div > h2 {
  font-family: var(--fh), Cambria, serif; font-weight: 600; font-size: 24px;
  line-height: 1.2; margin: 0 0 10px; color: var(--primary); padding: 0; border: 0;
}
:root main:not(:has(> article)) > div > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div > h2 a:hover { color: var(--accent); }
:root main:not(:has(> article)) > div > p:not(:first-child) {
  font-family: var(--fb), system-ui, sans-serif; font-size: 15.5px; line-height: 1.65;
  color: rgba(15,24,32,.82); margin: 0 0 14px; max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root main:not(:has(> article)) > div > a:last-child {
  margin-top: auto; align-self: flex-start;
  font-family: var(--fb), system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary);
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}
:root main:not(:has(> article)) > div > a:last-child:hover { border-bottom-color: var(--primary); }

/* ---- HERO (first card, full width, the loud voice) ---- */
:root main:not(:has(> article)) > div:first-of-type {
  position: relative; padding: 44px 50px 40px; margin-bottom: 58px;
  background: var(--surface-2); border: 1px solid rgba(217,168,122,.42);
  border-radius: 12px; box-shadow: 0 6px 26px rgba(20,24,28,.09);
}
:root main:not(:has(> article)) > div:first-of-type::before {
  content: "ÚLTIMO ENSAYO"; align-self: flex-start;
  background: var(--moment); color: #f6ece0;
  font-family: var(--fb), system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; padding: 6px 13px; border-radius: 5px;
  margin-bottom: 18px;
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child {
  font-size: 11.5px; letter-spacing: .16em; opacity: .78; margin-bottom: 12px;
}
:root main:not(:has(> article)) > div:first-of-type > p:first-child::before { content: "POR VALENTINA REYES · "; }
:root main:not(:has(> article)) > div:first-of-type > p:first-child::after { content: " · LECTURA DE 6 MIN"; }
:root main:not(:has(> article)) > div:first-of-type > h2 {
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 43px; line-height: 1.07; margin: 4px 0 16px;
}
:root main:not(:has(> article)) > div:first-of-type > p:not(:first-child) {
  font-size: 20px; line-height: 1.5; color: rgba(15,24,32,.86); max-width: 60ch;
  display: block; overflow: visible; -webkit-line-clamp: none; margin-bottom: 4px;
}
:root main:not(:has(> article)) > div:first-of-type > p:not(:first-child)::first-letter {
  font-family: var(--fh), Cambria, serif; font-weight: 700; font-style: italic;
  font-size: 58px; line-height: .78; float: left; color: var(--moment); margin: 6px 12px 0 0;
}
:root main:not(:has(> article)) > div:first-of-type > a:last-child {
  margin-top: 22px; padding: 11px 27px; border: 1.5px solid var(--primary); border-radius: 30px;
  color: var(--primary); background: transparent; letter-spacing: .14em;
}
:root main:not(:has(> article)) > div:first-of-type > a:last-child:hover {
  background: var(--primary); color: var(--surface-2); border-color: var(--primary);
}
/* Editor's Picks section label — full-width, sits in gap below hero (RULE B) */
:root main:not(:has(> article)) > div:first-of-type::after {
  content: "EDITOR'S PICKS — LÉELOS PRIMERO";
  position: absolute; left: 0; right: 0; bottom: -40px; padding-bottom: 11px;
  border-bottom: 1px solid rgba(61,90,117,.28);
  font-family: var(--fb), system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
}

/* ---- EDITOR'S PICKS band (cards 2 & 3, 2-col) ---- */
:root main:not(:has(> article)) > div:nth-of-type(2),
:root main:not(:has(> article)) > div:nth-of-type(3) {
  grid-column: span 1; position: relative; padding-top: 34px;
  border: 1px solid rgba(217,168,122,.5); border-left: 3px solid var(--accent);
}
:root main:not(:has(> article)) > div:nth-of-type(2) > h2,
:root main:not(:has(> article)) > div:nth-of-type(3) > h2 { font-size: 21px; }
:root main:not(:has(> article)) > div:nth-of-type(2)::before,
:root main:not(:has(> article)) > div:nth-of-type(3)::before {
  position: absolute; top: 14px; left: var(--jpad-x);
  font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 15px; font-weight: 600;
  color: var(--accent); letter-spacing: .04em;
}
:root main:not(:has(> article)) > div:nth-of-type(2)::before { content: "N.º I"; }
:root main:not(:has(> article)) > div:nth-of-type(3)::before { content: "N.º II"; }

/* ---- HERO STRIPS as section breaks (RULE F) ---- */
:root main:not(:has(> article)) > div:nth-of-type(4)::before,
:root main:not(:has(> article)) > div:nth-last-of-type(2)::before {
  display: flex; align-items: flex-end; justify-content: center;
  height: 172px; margin: calc(-1 * var(--jpad-y)) calc(-1 * var(--jpad-x)) 26px;
  border-radius: 8px 8px 0 0; padding-bottom: 18px;
  background-image: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/article-hero.jpg");
  background-size: cover;
  color: #f4ece0; font-family: var(--fb), system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:nth-of-type(4)::before {
  content: "MÁS ABAJO"; background-position: center 30%, center 30%;
}
:root main:not(:has(> article)) > div:nth-last-of-type(2)::before {
  content: "MÁS ENTRADAS"; background-position: center 70%, center 70%;
}

/* ============================================================
   FOOTER
   ============================================================ */
:root footer {
  background: transparent; border-top: 1px solid var(--border); padding: 26px 0 34px;
  margin-top: 56px; text-align: center; font-family: var(--fb), system-ui, sans-serif;
  font-size: 12px; color: var(--fg); opacity: .62; letter-spacing: .03em; font-style: italic;
}
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); font-style: normal; }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  :root { --jpad-x: 22px; --jpad-y: 22px; }
  :root > body > header > h1, :root > body > header h1 { font-size: 34px; }
  :root main:has(> article) > h1 { font-size: 30px; }
  :root main > article > p { font-size: 17px; }
  :root main:not(:has(> article)) { grid-template-columns: 1fr; gap: 26px; }
  :root main:not(:has(> article)) > div:nth-of-type(2),
  :root main:not(:has(> article)) > div:nth-of-type(3) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:first-of-type { padding: 32px 26px 30px; margin-bottom: 56px; }
  :root main:not(:has(> article)) > div:first-of-type > h2 { font-size: 32px; }
  :root main:not(:has(> article)) > div:first-of-type > p:not(:first-child) { font-size: 18px; }
}


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


/* refix iter1: masthead bleed, floating hero pill, archive tail polish */
/* refix iter1 (M6): full-bleed applies to ALL mastheads — the article-page
   header carries a wordmark <a> (no <h1>), so scoping to :has(> h1) left the
   article masthead pinned to the narrow reading column. */
:root > body > header {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
:root > body > header:has(> h1) > h1,
:root > body > header:has(> h1) > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

:root main:not(:has(> article)) > div:first-of-type {
  overflow: visible;
}
:root main:not(:has(> article)) > div:first-of-type::before {
  position: absolute;
  top: 0;
  left: 50px;
  transform: translateY(-50%);
  display: inline-block;
  margin: 0;
  line-height: 1.1;
  z-index: 2;
}

@media (min-width: 641px) {
  :root main:not(:has(> article)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  :root main:not(:has(> article)) > div:nth-of-type(2),
  :root main:not(:has(> article)) > div:nth-of-type(3) {
    grid-column: span 3;
  }
  :root main:not(:has(> article)) > div:nth-last-of-type(-n+3) {
    grid-column: span 2;
    margin-top: 214px;
  }
  :root main:not(:has(> article)) > div:nth-last-of-type(3)::before {
    content: "MÁS ENTRADAS";
    position: absolute;
    top: -214px;
    left: 0;
    width: calc(300% + 52px);
  }
}

:root main:not(:has(> article)) > div:nth-last-of-type(2)::before {
  content: none;
  display: none;
}
:root main:not(:has(> article)) > div:nth-last-of-type(3) {
  position: relative;
}
:root main:not(:has(> article)) > div:nth-last-of-type(3)::before {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 172px;
  border-radius: 8px;
  padding-bottom: 18px;
  box-sizing: border-box;
  background-image: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/article-hero.jpg");
  background-position: center 70%, center 70%;
  background-size: cover;
  color: #f4ece0;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(20,24,28,.05);
  min-height: 100%;
  padding: 20px 22px 21px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3):hover {
  transform: translateY(-2px);
  border-color: rgba(217,168,122,.55);
  box-shadow: 0 6px 18px rgba(20,24,28,.08);
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > p:first-child {
  margin: 0 0 10px;
  font-size: 10.5px;
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.22;
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > p:not(:first-child),
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > a:last-child {
  display: none;
}

:root main:not(:has(> article)) > section {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
:root main:not(:has(> article)) > section > ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  columns: auto;
}
:root main:not(:has(> article)) > section > p {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}
:root main:not(:has(> article)) > section > ul > li,
:root main:not(:has(> article)) > section > p > a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(20,24,28,.05);
  padding: 19px 22px;
  min-height: 100%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> article)) > section > ul > li:hover,
:root main:not(:has(> article)) > section > p > a:hover {
  transform: translateY(-2px);
  border-color: rgba(217,168,122,.55);
  box-shadow: 0 6px 18px rgba(20,24,28,.08);
}
:root main:not(:has(> article)) > section > ul > li > a,
:root main:not(:has(> article)) > section > p > a {
  color: var(--primary);
  font-family: var(--fh), Cambria, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.22;
  text-decoration: none;
}

:root main:has(> article) > span::before {
  content: "POR VALENTINA REYES · ";
}
:root main:has(> article) > span::after {
  content: " · LECTURA DE 6 MIN · LIMA";
}

@media (max-width: 640px) {
  :root main:not(:has(> article)) {
    padding-top: 48px;
  }
  :root main:not(:has(> article)) > div:first-of-type::before {
    left: 26px;
  }
  :root main:not(:has(> article)) > div:nth-last-of-type(3) {
    margin-top: 214px;
  }
  :root main:not(:has(> article)) > div:nth-last-of-type(3)::before {
    content: "MÁS ENTRADAS";
    position: absolute;
    top: -214px;
    left: 0;
    right: 0;
    width: auto;
  }
  :root main:not(:has(> article)) > section > ul {
    grid-template-columns: 1fr;
  }
  :root main:not(:has(> article)) > section > p {
    grid-template-columns: 1fr;
  }
}


/* refix iter2: make final homepage archive cells compact, title-only index cards */
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) {
  min-height: 0;
  align-self: stretch;
  justify-content: center;
  padding: 22px 24px;
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > p:first-child {
  display: none;
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > h2 {
  margin: 0;
  min-height: 0;
  font-size: 21px;
  line-height: 1.24;
}
:root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > h2 > a {
  display: block;
}

@media (min-width: 641px) {
  :root main:not(:has(> article)) > div:nth-last-of-type(-n+3) {
    min-height: 116px;
  }
}

@media (max-width: 640px) {
  :root main:not(:has(> article)) > div:nth-last-of-type(-n+3) {
    min-height: 0;
    padding: 20px 22px;
  }
  :root main:not(:has(> article)) > div:nth-last-of-type(-n+3) > h2 {
    font-size: 20px;
  }
}


/* refix iter3 (M7): the real archive tail is the trailing <div> (Section_foot)
   holding <p><a> title rows and NO <h2>. The compact nth-last-of-type(-n+3)
   sweep was catching it and hiding every <p> (both p:first-child and
   p:not(:first-child) get display:none), so it rendered as an empty cream card
   — the "third card with no title" on desktop / blank bordered row on mobile —
   while the 6 real archive links stayed invisible. Pull that div out of the
   compact-card sweep and render its links as a full-width boxed-cream magazine
   index (same paper/border/radius/shadow/hover tokens as the top cards). Keep
   the two real journal cards before it as compact title cards but widen them to
   span the full row so no empty columns remain. The trailing div is targeted
   structurally as the last div lacking an <h2> (Section_foot's class hash
   rotates on redeploy). */
:root main:not(:has(> article)) > div:last-of-type:not(:has(> h2)) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: stretch;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  min-height: 0;
}
/* un-hide + box each archive title row (overrides the compact display:none on
   p:first-child / p:not(:first-child) at higher specificity, later in source) */
:root main:not(:has(> article)) > div:last-of-type:not(:has(> h2)) > p:nth-of-type(n) {
  display: block;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(20,24,28,.05);
  padding: 19px 22px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> article)) > div:last-of-type:not(:has(> h2)) > p:nth-of-type(n):hover {
  transform: translateY(-2px);
  border-color: rgba(217,168,122,.55);
  box-shadow: 0 6px 18px rgba(20,24,28,.08);
}
:root main:not(:has(> article)) > div:last-of-type:not(:has(> h2)) > p:nth-of-type(n) > a {
  display: block;
  color: var(--primary);
  font-family: var(--fh), Cambria, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.22;
  text-decoration: none;
}
:root main:not(:has(> article)) > div:last-of-type:not(:has(> h2)) > p:nth-of-type(n) > a:hover {
  color: var(--accent);
}

@media (min-width: 641px) {
  /* the two real journal cards just before the archive fill their row (was
     span 2 each, leaving 2 empty columns once the archive div left the row) */
  :root main:not(:has(> article)) > div:nth-last-of-type(2),
  :root main:not(:has(> article)) > div:nth-last-of-type(3) {
    grid-column: span 3;
  }
  /* the "MÁS ENTRADAS" strip band now spans two span-3 cards + one column gap
     (was calc(300% + 52px) for three span-2 cards) */
  :root main:not(:has(> article)) > div:nth-last-of-type(3)::before {
    width: calc(200% + 26px);
  }
}

@media (max-width: 640px) {
  :root main:not(:has(> article)) > div:last-of-type:not(:has(> h2)) {
    grid-template-columns: 1fr;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=The-Sill-botanical overlay=25% grid=mixed 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; }
}