*{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}
.astro-xzdoGttn{max-width:640px;margin:0 auto;padding:0 20px}
.astro-CtC5RNlv{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.astro-CtC5RNlv h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-CtC5RNlv p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.astro-CtC5RNlv a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-BCbCP4oa{padding:20px 0}
.astro-BCbCP4oa h2{font-size:18px;font-weight:400;margin-bottom:4px}
.astro-BCbCP4oa h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-BCbCP4oa h2 a:hover{border-bottom-color:#2a2a2a}
.astro-BCbCP4oa .astro-KtUrvFjb{font-size:12px;color:#aaa;margin-bottom:6px}
.astro-BCbCP4oa p{font-size:14px;color:#666}
.astro-cVs7PgGQ{color:#888;font-size:13px;text-decoration:none}
.astro-cVs7PgGQ:hover{color:#2a2a2a}
.astro-ISjJnF9u{padding-bottom:60px}
.astro-ISjJnF9u h1{font-size:28px;font-weight:400;margin-bottom:8px}
.astro-ISjJnF9u .astro-KtUrvFjb{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.astro-ISjJnF9u h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.astro-ISjJnF9u h3{font-size:17px;margin:28px 0 8px}
.astro-ISjJnF9u p{margin-bottom:18px;font-size:16px}
.astro-ISjJnF9u ul,.astro-ISjJnF9u ol{margin:0 0 18px 20px}
.astro-ISjJnF9u a{color:#555;border-bottom:1px solid #ccc}
.astro-ISjJnF9u a:hover{color:#000;border-bottom-color:#000}
.astro-ISjJnF9u img{max-width:100%;height:auto;margin:24px 0}
.astro-P25s8bMJ{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.astro-P25s8bMJ a{color:#aaa;text-decoration:none}
.astro-jmmAWNMD{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.astro-WLA76Y1M{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.astro-PtLQAbxB{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.astro-GZpyR7wE{margin:0 auto 32px;max-width:720px}
.astro-53YkA2vX{width:100%;height:auto}
.astro-wf4RGLuz{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.astro-wf4RGLuz em{color:#aaa}
.astro-wf4RGLuz a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.astro-pX2kd6DF{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.astro-pX2kd6DF p{padding:3px 0;margin:0;font-size:15px}
.astro-pX2kd6DF a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-pX2kd6DF a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#2B4A6F;--accent:#7A5C3A;--bg:#F2F0EB;--fg:#1C1C1C;--border:#B0A898;--r:3px;--fb:'Crimson Pro';--fh:'Libre Baskerville';--fm:'Archivo';--moment:#7C4A5C}
/* === Custom === */
/* v.b13e3c — layout revision */
/* Diario del Cuidador — ge-elder-es · editorial signature pass
   Almanaque PAMI/ANSES + cuaderno del cuidador. Structural/element selectors only
   (Astro hashes are volatile); :root + a real pseudo-class keeps specificity above
   the base .astro-* pairs. */

/* ---- Fonts (declared, not @import: the concatenated import is dropped by Chromium) ---- */
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNZaxMaC82U.woff2) format('woff2');}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKWZrc3Hgbbcjq75U4uslyuy4kn0qNccR04_RUJeby2OU36SjNNlufweKgfqIc.woff2) format('woff2');}
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/crimsonpro/v28/q5uDsoa5M_tv7IihmnkabARboYF6CsKj.woff2) format('woff2');}
@font-face{font-family:'Crimson Pro';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/crimsonpro/v28/q5uBsoa5M_tv7IihmnkabARekYNwDeChrlU.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format('woff2');}

:root{
  --primary:#2B4A6F;
  --accent:#7A5C3A;
  --bg:#EAE3D4;
  --paper:#F7F2E6;
  --paper2:#F1EAD9;
  --fg:#241F19;
  --muted:#6E655A;
  --border:#D8CFBC;
  --moment:#7C4A5C;
  --fb:'Crimson Pro';
  --fh:'Libre Baskerville';
  --fm:'Archivo';
}

/* ---- Base typography ---- */
body{
  font-family:var(--fb),Georgia,serif;
  font-size:18px;line-height:1.8;color:var(--fg);
  background-color:var(--bg);margin:0;padding:0;
}
h1,h2,h3,h4,h5,h6{font-family:var(--fh),Georgia,serif;color:var(--primary);line-height:1.25;font-weight:400;}
p{margin:0 0 1.1em;}
a{color:var(--primary);text-decoration:none;}
::selection{background:var(--primary);color:#F4EFE3;}

/* =====================================================================
   MASTHEAD  (shared <header>; home = h1 + p tagline, article = single <a>)
   ===================================================================== */
:root body > header{
  max-width:none;
  margin:0;
  padding:76px 24px 60px;
  text-align:center;
  background-image:linear-gradient(rgba(21,28,42,.74),rgba(21,28,42,.52)),url("/theme-assets/masthead-bg.jpg");
  background-size:cover;background-position:center 42%;
  border-bottom:3px solid var(--accent);
}
/* kicker above the wordmark */
:root body > header::before{
  content:"CÓRDOBA · DIARIO DE UN CUIDADOR";
  display:block;
  font-family:var(--fm),system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.3em;
  color:#D9CDBB;margin-bottom:16px;
}
/* wordmark — h1 on home, anchor on article */
:root body > header h1,
:root body > header > a{
  display:inline-block;
  font-family:var(--fh),Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(34px,5.4vw,52px);letter-spacing:0;
  color:#F5EFE2;margin:0;border:none;line-height:1.05;
}
/* home tagline */
:root body > header > p{
  font-family:var(--fm),system-ui,sans-serif;font-style:normal;
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#CBBFAD;margin:14px 0 0;
}
/* manifesto signature (moment colour #1) */
:root body > header::after{
  content:"Escrito en la cocina, cuando el viejo por fin se duerme.";
  display:block;max-width:520px;margin:20px auto 0;padding-top:16px;
  border-top:1px solid var(--moment);
  font-family:var(--fh),Georgia,serif;font-style:italic;font-size:16px;
  color:#E7DCC9;line-height:1.5;
}

/* =====================================================================
   HOME  (main:has(> div > h2))  — 6-column editorial grid
   ===================================================================== */
:root main:has(> div > h2){
  max-width:1140px;margin:0 auto;padding:0 28px 96px;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:40px 36px;align-items:stretch;
}

/* -- generic card shell for every entry div -- */
:root main:has(> div > h2) > div:has(> h2){
  background:var(--paper);
  border:1px solid var(--border);border-radius:9px;
  box-shadow:0 1px 4px rgba(40,30,15,.05);
  padding:26px 32px 28px;margin:0;
  display:flex;flex-direction:column;
}
/* date kicker (scoped to real card divs; must NOT reach the h2-less compact tail div's first <p>) */
:root main:has(> div > h2) > div:has(> h2) > p:first-child{
  order:-1;
  font-family:var(--fm),system-ui,sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;line-height:1.4;
}
/* card title */
:root main:has(> div > h2) > div > h2{
  font-size:20px;font-weight:400;line-height:1.28;margin:0 0 10px;
}
:root main:has(> div > h2) > div > h2 > a{
  color:var(--primary);border:none;
}
:root main:has(> div > h2) > div > h2 > a:hover{color:var(--moment);}
/* excerpt */
:root main:has(> div > h2) > div > p:nth-of-type(2){
  font-size:15.5px;line-height:1.6;color:#4B443A;
  margin:0 0 16px;max-width:64ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* read-more */
:root main:has(> div > h2) > div > a:last-child{
  margin-top:auto;align-self:flex-start;
  font-family:var(--fm),system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--primary);border-bottom:1px solid var(--accent);padding-bottom:2px;
}
:root main:has(> div > h2) > div > a:last-child:hover{color:var(--moment);border-color:var(--moment);}

/* -- HERO (card 1) -- full width, centred, the loud voice -- */
:root main:has(> div > h2) > div:first-of-type{
  grid-column:1/-1;position:relative;
  align-items:center;text-align:center;
  background:var(--paper);
  border:1px solid var(--border);border-top:4px solid var(--primary);
  border-radius:11px;padding:44px 40px 48px;
  box-shadow:0 2px 10px rgba(40,30,15,.07);
}
:root main:has(> div > h2) > div:first-of-type::before{
  content:"ÚLTIMA ENTRADA";
  font-family:var(--fm),system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.28em;color:#fff;
  background:var(--accent);padding:5px 13px;border-radius:3px;margin-bottom:20px;
}
:root main:has(> div > h2) > div:first-of-type > p:first-child{
  color:var(--muted);margin-bottom:14px;}
:root main:has(> div > h2) > div:first-of-type > h2{
  font-style:italic;font-size:clamp(30px,4vw,44px);line-height:1.14;
  margin:0 auto 18px;max-width:16ch;}
:root main:has(> div > h2) > div:first-of-type > p:nth-of-type(2){
  -webkit-line-clamp:4;font-size:19px;line-height:1.55;color:#40382E;
  max-width:56ch;margin:0 auto 22px;text-align:left;}
:root main:has(> div > h2) > div:first-of-type > a:last-child{
  align-self:center;border:1px solid var(--primary);border-radius:4px;
  padding:9px 22px;letter-spacing:.15em;}
:root main:has(> div > h2) > div:first-of-type > a:last-child:hover{
  background:var(--primary);color:var(--paper);border-color:var(--primary);}
/* picks section label — full-width band that sits in the gap ABOVE the picks row
   (label #1). Opaque paper background + tight top offset keep the hairline underline
   off the card photos below (was overlapping the three-card row → M2 fail). */
:root main:has(> div > h2) > div:first-of-type::after{
  content:"PARA EMPEZAR · LO QUE LEERÍA PRIMERO";
  position:absolute;left:0;top:calc(100% + 30px);width:100%;
  background:var(--bg);box-sizing:border-box;
  font-family:var(--fm),system-ui,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.26em;color:var(--accent);
  border-bottom:1px solid var(--border);padding:6px 0 12px;
}

/* -- EDITOR'S PICKS band (cards 2-4) -- 3 across -- */
/* margin-top opens a clear gap under the full-width hero so the absolutely-positioned
   label band above has room and never crosses the card images (M2). */
:root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4){
  grid-column:span 2;margin-top:118px;
  border-top:3px solid var(--accent);
}

/* -- FEATURE lead (card 5) -- full-width, hosts Strip 1 band -- */
:root main:has(> div > h2) > div:nth-of-type(5){
  grid-column:1/-1;position:relative;
  background:var(--paper2);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;padding:0 0 40px;align-items:center;text-align:center;
}
/* Strip 1 — EL CUADERNO */
:root main:has(> div > h2) > div:nth-of-type(5)::before{
  content:"EL CUADERNO";order:-2;
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;min-height:200px;margin-bottom:34px;box-sizing:border-box;
  padding:0 20px 26px;
  background-image:linear-gradient(rgba(20,24,28,.35),rgba(20,24,28,.62)),url("/theme-assets/story-bg.jpg");
  background-size:cover;background-position:center 30%;
  font-family:var(--fm),system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.34em;color:#F6EFE2;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
:root main:has(> div > h2) > div:nth-of-type(5) > p:first-child{color:var(--muted);margin-bottom:12px;}
:root main:has(> div > h2) > div:nth-of-type(5) > h2{
  font-style:italic;font-size:clamp(24px,3vw,32px);max-width:20ch;margin:0 auto 14px;}
:root main:has(> div > h2) > div:nth-of-type(5) > p:nth-of-type(2){
  font-size:17px;max-width:58ch;margin:0 auto 18px;text-align:left;-webkit-line-clamp:3;}
:root main:has(> div > h2) > div:nth-of-type(5) > h2,
:root main:has(> div > h2) > div:nth-of-type(5) > p,
:root main:has(> div > h2) > div:nth-of-type(5) > a{padding-left:28px;padding-right:28px;}
:root main:has(> div > h2) > div:nth-of-type(5) > a:last-child{align-self:center;}

/* -- JOURNAL grid (cards 6+) -- 2 across, quieter -- */
:root main:has(> div > h2) > div:nth-of-type(n+6):has(> h2){
  grid-column:span 3;
}
/* closing full-width entry so the last row never leaves an empty column */
:root main:has(> div > h2) > div:has(> h2):nth-last-child(2){
  grid-column:1/-1;text-align:center;align-items:center;background:var(--paper2);
}
:root main:has(> div > h2) > div:has(> h2):nth-last-child(2) > a:last-child{align-self:center;}
:root main:has(> div > h2) > div:has(> h2):nth-last-child(2) > p:nth-of-type(2){
  max-width:58ch;margin-left:auto;margin-right:auto;text-align:left;}

/* =====================================================================
   Strip 2 + compact TAIL index  (main's div with no h2 = last child)
   ===================================================================== */
:root main:has(> div > h2) > div:not(:has(> h2)){
  grid-column:1/-1;position:relative;
  margin-top:20px;padding:0;border:none;background:transparent;
  columns:2;column-gap:44px;
}
/* Strip 2 — SEGUIR LEYENDO (must not sit inside a column) */
:root main:has(> div > h2) > div:not(:has(> h2))::before{
  content:"SEGUIR LEYENDO";column-span:all;
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;min-height:210px;margin-bottom:36px;box-sizing:border-box;padding:0 20px 26px;
  border-radius:10px;
  background-image:linear-gradient(rgba(20,24,28,.30),rgba(20,24,28,.60)),url("/theme-assets/story-bg.jpg");
  background-size:cover;background-position:center 72%;
  font-family:var(--fm),system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.34em;color:#F6EFE2;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
:root main:has(> div > h2) > div:not(:has(> h2)) > p{
  break-inside:avoid;margin:0;padding:9px 0;
  border-bottom:1px dotted rgba(40,30,15,.22);
}
:root main:has(> div > h2) > div:not(:has(> h2)) > p > a{
  font-size:15px;color:var(--fg);border:none;line-height:1.45;
}
:root main:has(> div > h2) > div:not(:has(> h2)) > p > a:hover{color:var(--moment);}

/* =====================================================================
   ARTICLE  (main:has(> article))
   ===================================================================== */
:root main:has(> article){
  max-width:720px;margin:0 auto;padding:0 24px 72px;
}
:root main:has(> article) > h1{
  font-size:clamp(30px,4.4vw,42px);font-weight:400;line-height:1.16;
  color:var(--primary);margin:44px 0 14px;letter-spacing:-.01em;
}
:root main:has(> article) > span:first-of-type{
  display:block;font-family:var(--fm),system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:40px;
}
:root main:has(> article) > span:first-of-type::before{content:"Por Ignacio Rendón · Córdoba · Diario · ";color:var(--muted);}

/* body copy */
:root main:has(> article) > article > p{
  font-size:18.5px;line-height:1.82;color:var(--fg);margin:0 0 20px;}
/* opening drop cap (moment colour #2) */
:root main:has(> article) > article > p:first-of-type::first-letter{
  float:left;font-family:var(--fh),Georgia,serif;font-style:italic;
  font-size:3.4em;line-height:.82;padding:6px 12px 0 0;color:var(--moment);}
:root main:has(> article) > article > p > a{
  color:var(--primary);border-bottom:1px solid var(--accent);}
:root main:has(> article) > article > p > a:hover{color:var(--moment);border-color:var(--moment);}

/* section headings + dinkus divider */
:root main:has(> article) > article > h2{
  font-size:26px;font-weight:400;color:var(--primary);
  margin:14px 0 14px;border:none;padding:0;text-align:center;}
:root main:has(> article) > article > h2::before{
  content:"✳  ✳  ✳";display:block;
  color:var(--accent);font-size:15px;letter-spacing:.4em;
  margin:0 0 24px;opacity:.75;}
:root main:has(> article) > article > h3{
  font-size:20px;font-weight:400;color:var(--primary);margin:30px 0 10px;}

/* images */
:root main:has(> article) > article img{
  width:100%;height:auto;border-radius:8px;border:1px solid var(--border);
  margin:30px 0;box-shadow:0 2px 8px rgba(40,30,15,.08);}

/* hanging-quote blockquote */
:root main:has(> article) > article > blockquote{
  position:relative;margin:30px 0;padding:6px 0 6px 34px;
  border-left:3px solid var(--moment);
  font-style:italic;color:#463C31;background:transparent;}
:root main:has(> article) > article > blockquote::before{
  content:"\201C";position:absolute;left:-2px;top:-14px;
  font-family:var(--fh),Georgia,serif;font-size:52px;color:var(--accent);opacity:.5;line-height:1;}

/* disclaimer aside — "nota del cuaderno" */
:root main:has(> article) > article > aside{
  margin:44px 0 0;padding:22px 26px;
  background:var(--paper2);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:8px;
  font-size:14.5px;line-height:1.6;color:var(--muted);}
:root main:has(> article) > article > aside > b{color:var(--accent);letter-spacing:.02em;}

/* related links — "seguir leyendo" card */
:root main:has(> article) > nav{
  margin-top:52px;padding:26px 28px 22px;
  background:var(--paper);border:1px solid var(--border);border-radius:9px;
  box-shadow:0 1px 4px rgba(40,30,15,.05);color:var(--fg);font-size:16px;}
:root main:has(> article) > nav > p{margin:0;}
:root main:has(> article) > nav em{
  display:block;font-family:var(--fm),system-ui,sans-serif;font-style:normal;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;}
:root main:has(> article) > nav a{
  display:block;padding:9px 0;color:var(--primary);
  border:none;border-bottom:1px dotted rgba(40,30,15,.2);line-height:1.4;}
:root main:has(> article) > nav a:hover{color:var(--moment);}

/* =====================================================================
   FOOTER
   ===================================================================== */
:root body > footer{
  max-width:1140px;margin:0 auto;padding:28px;
  border-top:1px solid var(--border);
  font-family:var(--fm),system-ui,sans-serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}
:root body > footer a{color:var(--accent);margin-right:18px;border:none;}
:root body > footer a:hover{color:var(--moment);}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:760px){
  :root main:has(> div > h2){grid-template-columns:1fr;gap:26px;padding:0 18px 64px;}
  :root main:has(> div > h2) > div:has(> h2){grid-column:1/-1;}
  :root main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4){grid-column:1/-1;margin-top:0;}
  :root main:has(> div > h2) > div:nth-of-type(n+6):has(> h2){grid-column:1/-1;}
  :root main:has(> div > h2) > div:first-of-type::after{
    position:static;width:auto;margin-top:30px;display:block;}
  :root main:has(> div > h2) > div:not(:has(> h2)){columns:1;}
  :root body > header{padding:56px 20px 44px;}
  :root main:has(> article){padding:0 20px 56px;}
}


/* 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: M7 boxed compact archive tail */
:root main:has(> div > h2) > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: stretch;
  columns: auto;
  column-gap: normal;
}

:root main:has(> div > h2) > div:last-child::before {
  grid-column: 1 / -1;
}

:root main:has(> div > h2) > div:last-child > p {
  min-height: 78px;
  height: 100%;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(40,30,15,.05);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  break-inside: auto;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

:root main:has(> div > h2) > div:last-child > p:hover {
  border-color: rgba(122,92,58,.42);
  box-shadow: 0 3px 10px rgba(40,30,15,.08);
  transform: translateY(-1px);
}

:root main:has(> div > h2) > div:last-child > p > a {
  display: block;
  width: 100%;
  font-family: var(--fh), Georgia, serif;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.36;
  color: var(--primary);
}

@media (max-width: 640px) {
  :root main:has(> div > h2) > div:last-child {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  :root main:has(> div > h2) > div:last-child > p {
    min-height: 72px;
    padding: 19px 20px;
  }
}


/* refix iter2: fold final title-only orphan into archive tail rhythm */
:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  text-align: left;
  align-items: stretch;
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2)))::before {
  content: "SEGUIR LEYENDO";
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 210px;
  margin-bottom: 16px;
  box-sizing: border-box;
  padding: 0 20px 26px;
  border-radius: 10px;
  background-image: linear-gradient(rgba(20,24,28,.30), rgba(20,24,28,.60)), url("/theme-assets/story-bg.jpg");
  background-size: cover;
  background-position: center 72%;
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .34em;
  color: #F6EFE2;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) > p:first-child {
  display: none;
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) > h2 {
  min-height: 78px;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(40,30,15,.05);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-family: var(--fh), Georgia, serif;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.36;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) > h2:hover {
  border-color: rgba(122,92,58,.42);
  box-shadow: 0 3px 10px rgba(40,30,15,.08);
  transform: translateY(-1px);
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) > h2 > a {
  display: block;
  width: 100%;
  color: var(--primary);
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) + div:not(:has(> h2)) {
  margin-top: 0;
}

:root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) + div:not(:has(> h2))::before {
  content: none;
  display: none;
}

@media (max-width: 640px) {
  :root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2)))::before {
    min-height: 190px;
    margin-bottom: 12px;
    padding-bottom: 24px;
  }

  :root main:has(> div > h2) > div:nth-last-child(2):has(> h2):not(:has(> p:nth-of-type(2))) > h2 {
    min-height: 72px;
    padding: 19px 20px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Monocle-Swiss overlay=55% grid=equal scale=dramatic 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: card 6 gets a photo header.
   NOTE: card 5 (the feature) intentionally does NOT get a premium photo band —
   it already owns the labelled "EL CUADERNO" hero strip (::before). Stacking a
   second, label-less photo band on top of it was the M6 failure. ── */
: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; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}


/* premium-upgrade v5 */
/* premium-upgrade v5 — big M2 band + wider M10 CTA net + M8 breathing. 2026-08-31. */

/* ── M2 (refix iter2): full-row section BAND, not a narrow centered decorative label.
   Root cause: main is a 6-col grid, so this ::before was auto-placed into ONE cell
   (1/6 width) → the label text AND its hairline underline only spanned a sliver on
   desktop; on mobile the ≤720px rule below forced min-height:240px, leaving short
   centered text in a tall empty box (the "small centered decorative label" the codex
   flagged). Fix = grid-column:1/-1 to span the full row, min-height:0 to drop the
   240px ghost, and adopt the site's own band system (--fm sans, accent tracked caps,
   left-aligned, hairline underline) so it reads like the "PARA EMPEZAR"/"EL CUADERNO"
   bands. Dropped the ◆ ornaments + English text for a Spanish section header. ── */

/* ── M2 refix iter1 (2026-09-03): diagnosis = STALE DEPLOY, not a CSS bug.
   Live layout.css?h=c7b981 still served the old premium-upgrade v2 rule
   `content:"◆ LATEST FEATURES ◆"` (20px/700 serif, NO grid-column) → it
   auto-placed into ONE 1/6-width grid cell = the "small stacked blue label
   with diamond marks" the codex flagged. Disk already replaced that with the
   full-width band below; this iter re-asserts it as the definitive final
   winner (grid-column:1/-1, every prop !important) so the recompile is
   unambiguous and the crisper accent hairline underline reads clearly as a
   full-width magazine section band above the featured card. ── */
:root main:not(:has(> h1))::before {
  content: "EN PORTADA" !important;
  grid-column: 1 / -1 !important;   /* span all 6 cols → full-width band (was collapsing to a 1/6 cell) */
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  font-family: var(--fm), system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(--accent) !important;
  background: transparent !important;
  border-top: 2px solid var(--primary) !important;
  border-bottom: 1px solid var(--accent) !important;   /* crisper hairline underline for the band */
  padding: 15px 2px 13px !important;
  margin: 0 0 12px !important;
}

/* ── M10: broaden CTA net (Amazon, aff/ path, [target=_blank] product-shaped) ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/offer/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href^="/aff/"],
:root main:has(> h1) a[href^="/product/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"],
:root main:has(> h1) a[href*="amazon."],
:root main:has(> h1) a[href*="/track/"],
:root main:has(> h1) a[href*="/link/"],
:root main:has(> h1) a[href*="lstrk.net"],
:root main:has(> h1) a[href*="thrivecart"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin: 4px 2px !important;
}

/* ── M8: article body breathing ── */
:root main:has(> h1) > article > p {
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}
:root main:has(> h1) > article > h2 {
  margin-top: 48px !important;
  margin-bottom: 18px !important;
}
:root main:not(:has(> h1)) > div:has(> div) {
  gap: 40px 32px !important;
}