*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.wrapper-df5c10{max-width:1100px;margin:0 auto;padding:0 24px}
.outer-ec98a3{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.outer-ec98a3 h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.outer-ec98a3 p{font-size:16px;opacity:.8;font-style:italic}
.outer-ec98a3 .container-0aa6f8{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.footer-65c622{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.sidebar-eedd43{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.sidebar-eedd43:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.sidebar-eedd43 h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.sidebar-eedd43 h2 a{color:#2c3e50;text-decoration:none}
.sidebar-eedd43 .content-8e2357{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.sidebar-eedd43 p{font-size:15px;color:#555;margin-bottom:14px}
.widget-936bdd{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.content-f2de3d{max-width:780px;margin:0 auto;padding:0 24px 60px}
.content-f2de3d h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.content-f2de3d .content-8e2357{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.content-f2de3d h2{font-size:24px;margin:36px 0 14px}
.content-f2de3d h3{font-size:19px;margin:28px 0 10px}
.content-f2de3d p{margin-bottom:18px;font-size:17px}
.content-f2de3d ul,.content-f2de3d ol{margin:0 0 18px 28px}
.content-f2de3d a{color:#e74c3c}
.content-f2de3d img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.container-aa1b6e{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.container-aa1b6e a{color:#888}
.region-fb6951{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.page-228a8e{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.region-6f24a5{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.block-593e67{margin:0 0 28px}
.region-33bc10{width:100%;height:auto;border-radius:4px}
.inner-3784e5{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.inner-3784e5 h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.footer-a1cb99{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.footer-a1cb99 p{font-size:15px;padding:4px 0;margin:0}
.footer-a1cb99 .content-8e2357{margin:0 8px 0 0;display:inline}
.footer-a1cb99 a{color:#2c3e50;text-decoration:none}
.footer-a1cb99 a:hover{color:#e74c3c}
/* === Theme === */
:root{--primary:#26263A;--accent:#4B3FD1;--bg:#F4F1EA;--fg:#23222B;--border:#D9D5CC;--muted:#6E6B7A;--surface:#FBFAF7;--r:8px;--fd:'Instrument Serif';--ft:'Source Serif 4';--fm:'Karla';--fb:'Source Serif 4';--fh:'Source Serif 4'}
/* === Custom === */
/* Design reference: a working illustrator's sketchbook page — cool ultramarine ink against warm paper, no gloss, no neon */

/* The @import that used to sit here was dead: the deploy concatenates template
   CSS + theme + custom.css, so an @import after style rules is dropped per spec
   and no webfont ever loaded. @font-face blocks live in the QA block below. */

:root {
  --primary: #26263A;
  --accent: #4B3FD1;
  --bg: #F4F1EA;
  --fg: #23222B;
  --border: #D9D5CC;
  --muted: #6E6B7A;
  --surface: #FBFAF7;
  --r: 8px;
  --fb: 'Karla';
  --fh: 'Space Grotesk';
}

/* ─── Base ─── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root body {
  font-family: var(--fb), system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  font-size: 1.0625rem;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

:root ::selection {
  background: var(--accent);
  color: #fff;
}

/* ─── Links ─── */

:root a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

:root a:hover {
  color: var(--primary);
}

/* ─── Headings ─── */

:root h1,
:root h2,
:root h3,
:root h4 {
  font-family: var(--fh), system-ui, -apple-system, sans-serif;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

:root h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-top: 0;
}

:root h2 {
  font-size: 1.7rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4em;
}

:root h3 {
  font-size: 1.3rem;
}

:root h4 {
  font-size: 1.1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Body copy ─── */

:root p {
  max-width: 68ch;
  margin: 0 0 1.3em;
}

:root ul,
:root ol {
  max-width: 68ch;
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}

:root li {
  margin-bottom: 0.5em;
}

:root li::marker {
  color: var(--accent);
}

:root strong {
  color: var(--primary);
  font-weight: 700;
}

/* ─── Blockquote ─── */

:root blockquote {
  max-width: 68ch;
  margin: 1.6em 0;
  padding: 0.9em 1.3em;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--muted);
  font-style: italic;
}

:root blockquote p {
  margin-bottom: 0;
}

/* ─── Tables ─── */

:root table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95rem;
}

:root th {
  font-family: var(--fh), system-ui, sans-serif;
  color: var(--primary);
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 2px solid var(--border);
}

:root td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--border);
}

:root tr:hover td {
  background: var(--surface);
}

/* ─── Code ─── */

:root code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

/* ─── Images ─── */

:root img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
}

/* ─── Horizontal rule ─── */

:root hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.4em 0;
}

/* ─── Small print ─── */

:root small {
  color: var(--muted);
  font-size: 0.85em;
}

/* === R2 fixes (2026-07-06T14:40:09.114615+00:00) === */

/* Fix 1 (removed in QA round 1): `header h1` never matched — the masthead is a
   `<nav>`. The QA block below colors the wordmark structurally. */

/* Fix 2: recommendation links — make them stand out from ordinary in-content links */
a[href^="/rec/"] {
  font-weight: 600;
  background: var(--surface);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  text-decoration-thickness: 2px;
}

/* === R3 fixes (2026-07-06T15:20:11.576989+00:00) === */

/* Fix 1 (superseded in QA round 1): this leaned on `nav.outer-ec98a3`, a class
   the deploy pipeline reseeds per site — replaced by a structural selector. */

/* === QA round-1 fixes (2026-07-22T01:14:14+0800) === */

/* Editorial identity: a working illustrator's cuaderno. Ultramarine ink on warm
   paper, ink-navy furniture, and ONE terracotta accent (#B34F2A) used exactly
   twice — the rule under the masthead manifesto and the featured drop cap.
   Selectors are element/structural only (the pipeline reseeds class names), and
   every override carries two class-weight units (`:root` + `:nth-of-type(1)`)
   because the template's own rules are descendant class pairs = (0,2,0). */

/* ─── Webfonts (position-independent, unlike the dead @import) ─── */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7Motmp5g.woff2) format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjnTLgNs.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFI2_tTDB4M7-auWDN0ahZJW1gb8te1Xb7G.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFK2_tTDB4M7-auWDN0ahZJW1gewtW_WpzEpMs.woff2) format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/karla/v33/qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bmMorHA.woff2) format('woff2');
}

/* ─── Three voices, one palette ─── */

:root {
  --fd: 'Instrument Serif';                 /* display  — wordmark, hero, h1 */
  --ft: 'Source Serif 4';                   /* text     — body + headings   */
  --fm: 'Karla';                            /* meta     — kickers, dates    */
  --fb: 'Source Serif 4';
  --fh: 'Source Serif 4';
  --rust: #B34F2A;                          /* moment color — 2 uses only   */
  --ink: #26263A;
  --ink-deep: #1C1C2C;
  --paper: #F4F1EA;
  --hair: #D5D0C5;
}

:root body {
  font-family: var(--ft), Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.72;
}

:root h1,
:root h2,
:root h3,
:root h4 {
  font-family: var(--ft), Georgia, serif;
  letter-spacing: -0.008em;
}

/* ═══════════════ MASTHEAD ═══════════════ */

:root body > nav:nth-of-type(1) {
  background-color: var(--ink-deep);
  background-image:
    radial-gradient(ellipse at 50% 128%, rgba(75, 63, 209, 0.5), transparent 64%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 8px);
  border-bottom: none;
  margin-bottom: 3.6rem;
}

/* Home masthead: monogram + italic wordmark + meta tagline + rust-ruled manifesto */

:root body > nav:nth-of-type(1):has(> div > h1) {
  padding: 4.2rem 0 4rem;
}

:root body > nav:nth-of-type(1):has(> div > h1) > div {
  max-width: 62rem;
}

:root body > nav:nth-of-type(1):has(> div > h1) > div::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M5 43V5h22v7h8v7h8v24z' fill='none' stroke='%23F4F1EA' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='17' cy='31' r='4.6' fill='%237265E8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.95;
}

:root body > nav:nth-of-type(1) > div > h1 {
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.1rem, 7.2vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.022em;
  text-transform: none;
  color: var(--paper);
  margin: 0;
}

:root body > nav:nth-of-type(1) > div > p {
  font-family: var(--fm), system-ui, sans-serif;
  font-style: normal;
  font-size: 0.815rem;
  line-height: 1.65;
  letter-spacing: 0.015em;
  color: rgba(244, 241, 234, 0.62);
  opacity: 1;
  max-width: 58ch;
  margin: 1.15rem auto 0;
}

:root body > nav:nth-of-type(1):has(> div > h1) > div::after {
  content: "\0000AB\0000A0Ning\0000FAn curso vale un mes de tardes si no te ahorra rondas de cambios.\0000A0\0000BB";
  display: block;
  max-width: 44ch;
  margin: 1.7rem auto 0;
  padding-top: 1.55rem;
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.85);
  /* rust moment 1 of 2 */
  background-image: linear-gradient(var(--rust), var(--rust));
  background-size: 48px 2px;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Article/page masthead: compact ink bar, same wordmark voice */

:root body > nav:nth-of-type(1):has(> div > a) {
  padding: 1.5rem 0;
  margin-bottom: 3rem;
}

:root body > nav:nth-of-type(1):has(> div > a) > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
}

:root body > nav:nth-of-type(1):has(> div > a) > div::before {
  content: "";
  width: 25px;
  height: 25px;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M5 43V5h22v7h8v7h8v24z' fill='none' stroke='%23F4F1EA' stroke-width='3.2' stroke-linejoin='round'/%3E%3Ccircle cx='17' cy='31' r='4.6' fill='%237265E8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

:root body > nav:nth-of-type(1) > div > a {
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.72rem;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--paper);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

:root body > nav:nth-of-type(1) > div > a:hover {
  color: var(--paper);
  opacity: 0.72;
}

/* ═══════════════ HOME ═══════════════ */

:root main:nth-of-type(1):has(> div > div > h2) {
  max-width: 68rem;
  padding-bottom: 1rem;
}

/* Six-column stage: hero spans all, picks span 2, cuaderno spans 3 */

:root main:nth-of-type(1):has(> div > div > h2) > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 2.4rem;
  row-gap: 0;
  align-items: stretch;
}

/* Baseline card — quiet, paper, hairline-ruled. No boxes, no shadows. */

:root main:nth-of-type(1):has(> div > div > h2) > div > div {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--hair);
  padding: 1.85rem 0 2.15rem;
  position: relative;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:hover {
  box-shadow: none;
}

/* Date — meta voice with an ultramarine tick */

:root main:nth-of-type(1):has(> div > div > h2) > div > div > p:first-of-type {
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.665rem;
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
  margin: 0 0 0.7rem;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div > p:first-of-type::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.6rem;
  vertical-align: 0.06em;
  background: var(--accent);
}

/* Title */

:root main:nth-of-type(1):has(> div > div > h2) > div > div > h2 {
  font-family: var(--ft), Georgia, serif;
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  border-bottom: none;
  padding: 0;
  margin: 0 0 0.6rem;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div > h2 > a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.24s ease, color 0.18s ease;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div > h2 > a:hover {
  color: var(--accent);
  background-size: 100% 1px;
}

/* Excerpt — clamped to three lines so the grid keeps its rhythm */

:root main:nth-of-type(1):has(> div > div > h2) > div > div > p:last-of-type {
  font-size: 0.955rem;
  line-height: 1.6;
  color: #5D5A66;
  max-width: none;
  margin: 0 0 1.15rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* CTA — the template ships English "Continue Reading" on a Spanish site;
   swap the visible label without touching the HTML. */

:root main:nth-of-type(1):has(> div > div > h2) > div > div > a {
  font-size: 0;
  line-height: 0;
  color: var(--accent);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div > a::after {
  content: "Leer el apunte\0000A0\002192";
  display: inline-block;
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.675rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(75, 63, 209, 0.35);
  padding-bottom: 0.18rem;
  transition: border-color 0.18s ease;
}

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

:root main:nth-of-type(1):has(> div > div > h2) > div > div > a:hover::after {
  border-bottom-color: var(--ink);
}

/* ─── 1. THE HERO — the one loud voice ─── */

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  column-gap: 3.4rem;
  border-top: none;
  border-bottom: 2px solid var(--ink);
  padding: 0 0 3.4rem;
  margin-bottom: 3.6rem;
}

/* Left rail: kicker + date + byline, hairline running the full height so the
   row never reads as content pinned to one side. */

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:first-of-type {
  grid-column: 1;
  /* `1 / -1` would resolve against the *explicit* grid (one line), so the rail
     hairline would only cover the title row — span the three implicit rows. */
  grid-row: 1 / span 3;
  align-self: stretch;
  border-right: 1px solid var(--hair);
  padding-right: 2.2rem;
  font-size: 0.685rem;
  letter-spacing: 0.16em;
  line-height: 2;
  color: var(--muted);
  margin: 0.55rem 0 0;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:first-of-type::before {
  content: "\0000DALTIMO APUNTE";
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 0.9rem;
  background: none;
  vertical-align: baseline;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:first-of-type::after {
  content: "\00000APOR PALOMA AGUIRRE\00000AILUSTRADORA\0000A0\0000B7\0000A0VALENCIA";
  display: block;
  white-space: pre-line;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hair);
  font-size: 0.645rem;
  letter-spacing: 0.14em;
  line-height: 1.9;
  color: #85818F;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > h2 {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.9vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: -0.35rem 0 1.15rem;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > h2 > a {
  background-image: none;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:last-of-type {
  grid-column: 2;
  grid-row: 2;
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  font-size: 1.135rem;
  line-height: 1.66;
  color: #4A4854;
  max-width: 58ch;
  margin: 0 0 1.6rem;
}

/* rust moment 2 of 2 */
:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:last-of-type::first-letter {
  float: left;
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-size: 4.2em;
  line-height: 0.76;
  color: var(--rust);
  padding: 0.06em 0.1em 0 0;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > a {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  margin-top: 0;
  color: var(--ink);
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > a::after {
  content: "Leer el apunte completo\0000A0\002192";
  font-size: 0.71rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.7rem 1.65rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > a:hover::after {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ─── 2. SELECCIÓN DE PALOMA — the change of gear ─── */

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(n+2):nth-of-type(-n+4) {
  grid-column: span 2;
  margin-top: 3.1rem;
  margin-bottom: 3.4rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--hair);
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(n+2):nth-of-type(-n+4)::before {
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(2)::before { content: "01"; }
:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(3)::before { content: "02"; }
:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(4)::before { content: "03"; }

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

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

/* Band label — anchored to the first pick, ruled across all three */

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(2)::after {
  content: "LA SELECCI\0000D3N DE PALOMA\0000A0\002014\0000A0EMPIEZA POR AQU\0000CD";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.15rem);
  width: calc(300% + 4.8rem);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.685rem;
  font-weight: 700;
  letter-spacing: 0.185em;
  color: var(--ink);
}

/* ─── 3. EL CUADERNO — the chronological feed ─── */

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

:root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(5)::after {
  content: "EL CUADERNO\0000A0\002014\0000A0TODO, POR FECHA";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.15rem);
  width: calc(200% + 2.4rem);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.685rem;
  font-weight: 700;
  letter-spacing: 0.185em;
  color: var(--ink);
}

/* ═══════════════ ARTICLE + STATIC PAGES ═══════════════ */

:root main:nth-of-type(1):has(> article > p) {
  max-width: 46rem;
  padding-bottom: 4rem;
}

:root main:nth-of-type(1):has(> article > p) > h1,
:root main:nth-of-type(1):has(> article > p) > article > h1 {
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.35rem, 5.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}

:root main:nth-of-type(1):has(> article > p) > h1::before {
  content: "APUNTE DEL CUADERNO";
  display: block;
  font-family: var(--fm), system-ui, sans-serif;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1.05rem;
}

:root main:nth-of-type(1):has(> article > p) > time {
  display: block;
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.665rem;
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 1.15rem;
  margin: 0 0 2.3rem;
}

:root main:nth-of-type(1):has(> article > p) > time::after {
  content: "\0000A0\0000B7\0000A0POR PALOMA AGUIRRE";
  color: #8A8694;
}

:root main:nth-of-type(1):has(> article > p) > article > p {
  font-size: 1.115rem;
  line-height: 1.76;
  color: var(--fg);
  max-width: none;
  margin: 0 0 1.35em;
}

/* Lede */

:root main:nth-of-type(1):has(> article > p) > article > p:first-of-type {
  font-size: 1.24rem;
  line-height: 1.62;
  color: #35333F;
}

:root main:nth-of-type(1):has(> article > p) > article > h2 {
  font-family: var(--ft), Georgia, serif;
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.014em;
  color: var(--ink);
  border-bottom: none;
  padding: 0;
  margin: 2.6rem 0 0.9rem;
}

/* Dinkus: three ultramarine pencil hatches between sections. Drawn as SVG —
   a repeating-linear-gradient clips its end strokes at the box edge. */

:root main:nth-of-type(1):has(> article > p) > article > h2:not(:first-of-type)::before {
  content: "";
  display: block;
  width: 44px;
  height: 14px;
  margin: 0 auto 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cg stroke='%234B3FD1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 11.5L9 2.5'/%3E%3Cpath d='M19 11.5L24 2.5'/%3E%3Cpath d='M34 11.5L39 2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

:root main:nth-of-type(1):has(> article > p) > article > h3 {
  font-family: var(--ft), Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  margin: 2rem 0 0.6rem;
}

/* In-content links: ink text on an ultramarine rule, not the template's tomato */

:root main:nth-of-type(1):has(> article > p) > article a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.06em;
  transition: color 0.16s ease, background-size 0.16s ease;
}

:root main:nth-of-type(1):has(> article > p) > article a:hover {
  color: var(--accent);
  background-size: 100% 2px;
}

:root main:nth-of-type(1):has(> article > p) > article > ul,
:root main:nth-of-type(1):has(> article > p) > article > ol {
  max-width: none;
  font-size: 1.08rem;
  margin: 0 0 1.35em;
  padding-left: 1.3em;
}

:root main:nth-of-type(1):has(> article > p) > article > blockquote {
  background: none;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  max-width: none;
  margin: 2.1rem 0;
  padding: 0.2rem 0 0.2rem 1.9rem;
  position: relative;
  font-family: var(--fd), Georgia, serif;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--ink);
}

:root main:nth-of-type(1):has(> article > p) > article > blockquote::before {
  content: "\00201C";
  position: absolute;
  left: -0.62rem;
  top: -0.7rem;
  font-family: var(--fd), Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(75, 63, 209, 0.28);
}

:root main:nth-of-type(1):has(> article > p) > article > figure {
  margin: 0 0 2rem;
}

:root main:nth-of-type(1):has(> article > p) > article > figure img {
  border-radius: 2px;
  border: 1px solid var(--hair);
  width: 100%;
}

/* Related — keep the block the reviewer liked, dress it in the new voice */

:root main:nth-of-type(1):has(> article > p) > aside {
  border-top: 2px solid var(--ink);
  margin-top: 3.4rem;
  padding-top: 1.6rem;
}

:root main:nth-of-type(1):has(> article > p) > aside > h4 {
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.685rem;
  font-weight: 700;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.3rem;
}

:root main:nth-of-type(1):has(> article > p) > aside > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

:root main:nth-of-type(1):has(> article > p) > aside > div > div {
  border-top: 1px solid var(--hair);
  padding-top: 0.85rem;
}

:root main:nth-of-type(1):has(> article > p) > aside > div > div > a {
  display: block;
  font-family: var(--ft), Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.34;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.16s ease;
}

:root main:nth-of-type(1):has(> article > p) > aside > div > div > a:hover {
  color: var(--accent);
}

/* ═══════════════ FOOTER ═══════════════ */

:root body > footer:nth-of-type(1) {
  border-top: 1px solid var(--hair);
  margin-top: 4.4rem;
  padding: 2.4rem 0 3.2rem;
  background: none;
  color: var(--muted);
}

:root body > footer:nth-of-type(1) > p {
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  max-width: none;
  margin: 0 auto;
}

:root body > footer:nth-of-type(1) > p > a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

:root body > footer:nth-of-type(1) > p > a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ═══════════════ RESPONSIVE ═══════════════ */
/* `grid-column: span N` creates implicit tracks, so every span MUST be reset
   inside each breakpoint or the desktop layout survives the media query. */

@media (max-width: 1000px) {
  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) {
    grid-template-columns: 12.5rem minmax(0, 1fr);
    column-gap: 2.4rem;
  }

  :root main:nth-of-type(1):has(> article > p) > aside > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  :root body > nav:nth-of-type(1):has(> div > h1) {
    padding: 2.9rem 0 2.7rem;
    margin-bottom: 2.4rem;
  }

  :root body > nav:nth-of-type(1) > div > h1 {
    font-size: 2.5rem;
  }

  :root body > nav:nth-of-type(1):has(> div > h1) > div::after {
    font-size: 1.02rem;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  /* Media queries add no specificity, so each span reset must match the weight
     of the desktop rule that set it — hence the doubled :nth-of-type() below. */
  :root main:nth-of-type(1):has(> div > div > h2) > div > div,
  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1),
  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(5),
  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(6) {
    grid-column: 1 / -1;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    padding-bottom: 2.4rem;
    margin-bottom: 2.6rem;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:first-of-type {
    border-right: none;
    border-bottom: 1px solid var(--hair);
    padding-right: 0;
    padding-bottom: 1rem;
    margin: 0 0 1.3rem;
    line-height: 1.85;
  }

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

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > h2 {
    font-size: 2.1rem;
    margin: 0 0 0.9rem;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(1) > p:last-of-type {
    font-size: 1.06rem;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(n+2):nth-of-type(-n+4) {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

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

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(n+2):nth-of-type(4) {
    margin-bottom: 3.2rem;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(2)::after,
  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(5)::after {
    width: 100%;
    font-size: 0.63rem;
    letter-spacing: 0.15em;
  }

  :root main:nth-of-type(1):has(> div > div > h2) > div > div:nth-of-type(6) {
    border-top: 1px solid var(--hair);
    margin-top: 0;
  }

  :root main:nth-of-type(1):has(> article > p) > article > p {
    font-size: 1.06rem;
  }

  :root main:nth-of-type(1):has(> article > p) > article > p:first-of-type {
    font-size: 1.14rem;
  }

  :root main:nth-of-type(1):has(> article > p) > aside > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
}