*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;color:#111;background:#fff}
.sc-PjDaPF{max-width:900px;margin:0 auto;padding:0 28px}
.sc-rSGPfS{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.sc-rSGPfS h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.sc-rSGPfS p{font-size:18px;opacity:.7}
.sc-rSGPfS a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.sc-KBzvYk{padding:0}
.sc-mQpWyc{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.sc-mQpWyc h2{font-size:24px;font-weight:700;margin-bottom:6px}
.sc-mQpWyc h2 a{color:#111;text-decoration:none}
.sc-mQpWyc h2 a:hover{text-decoration:underline}
.sc-mQpWyc .sc-yDoKft{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.sc-mQpWyc p{font-size:15px;color:#444;margin-bottom:10px}
.sc-Fapudg{display:inline-block;background:#111;color:#fff;padding:8px 20px;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px}
.sc-Fapudg:hover{background:#333}
.sc-KRcnDV{padding-bottom:60px}
.sc-KRcnDV h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.sc-KRcnDV time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.sc-KRcnDV h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.sc-KRcnDV h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.sc-KRcnDV p{margin-bottom:18px;font-size:17px}
.sc-KRcnDV ul,.sc-KRcnDV ol{margin:0 0 18px 24px}
.sc-KRcnDV a{color:#111;font-weight:600;text-decoration:underline}
.sc-KRcnDV img{max-width:100%;height:auto;margin:20px 0}
.sc-hnKsUO{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.sc-hnKsUO a{color:#888;text-decoration:none}
.sc-JfeGXt{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.sc-UZRlQL{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.sc-pWnGsG{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:1px;margin:-20px 0 28px;padding-left:12px;border-left:2px solid #ccc}
.sc-jHVrer{margin:0 0 24px}
.sc-wJQwCb{width:100%;height:auto;border-radius:0}
.sc-LaXeqG{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.sc-LaXeqG h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sc-LaXeqG ul{list-style:none;padding:0}
.sc-LaXeqG li{padding:6px 0}
.sc-LaXeqG a{color:#111;text-decoration:underline;font-weight:600}
.sc-ahXbky{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.sc-ahXbky ul{list-style:none;padding:0}
.sc-ahXbky li{padding:6px 0;font-size:16px}
.sc-ahXbky a{color:#111;text-decoration:none;font-weight:600}
.sc-ahXbky a:hover{text-decoration:underline}
.sc-ahXbky .sc-yDoKft{margin:0 0 0 8px}
/* === Theme === */
:root{--primary:#2A3D5C;--accent:#AD7A2F;--rust:#B34F2A;--bg:#F4EDE3;--paper:#FBF7F1;--fg:#1B2030;--border:#D8CDBB;--r:0px;--fb:'Petrona';--fh:'Petrona';--fm:'Khand'}
/* === Custom === */
/* Design reference: Catálogos técnicos de acabados para vivienda, México 1990-2000 | Persona: Bruno Carvajal, Pachuca de Soto */

/* ─── Variables & Base ──────────────────────────────────── */

:root {
  --primary: #2A3D5C;
  --accent: #AD7A2F;
  --bg: #F4EDE3;
  --fg: #1B2030;
  --border: #C4C2BB;
  --r: 3px;
  --fb: 'Hind';
  --fh: 'Khand';
}

body {
  font-family: var(--fb), system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.72;
  margin: 0;
  padding: 0;
}

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

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

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

/* ─── Typography ────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fh), system-ui, sans-serif;
  color: var(--primary);
  line-height: 1.15;
  margin-top: 1.8rem;
  margin-bottom: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h3 {
  font-size: 1.3rem;
  color: var(--accent);
}

h4 {
  font-size: 1.1rem;
  color: var(--fg);
}

h5,
h6 {
  font-size: 1rem;
  color: var(--fg);
  font-weight: 600;
}

p {
  margin-top: 0;
  margin-bottom: 1.1rem;
  max-width: 70ch;
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

a:hover {
  color: var(--accent);
}

ul {
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
}

li {
  margin-bottom: 0.45rem;
}

blockquote {
  border-left: 3px solid var(--accent);
  margin: 2rem 0;
  padding: 0.75rem 1.3rem;
  background-color: rgba(42, 61, 92, 0.06);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  color: var(--primary);
}

blockquote p {
  margin-bottom: 0;
}

/* ─── Article content ───────────────────────────────────── */

.sc-KRcnDV {
  max-width: 780px;
  margin: 2rem auto;
  padding: 0 1.25rem;
}

.sc-KRcnDV h1 {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

.sc-KRcnDV h2 {
  margin-top: 3rem;
  margin-bottom: 0.7rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

.sc-KRcnDV h3 {
  margin-top: 1.8rem;
}

.sc-KRcnDV a {
  color: var(--accent);
  font-weight: 600;
}

.sc-KRcnDV a:hover {
  color: var(--primary);
}

.sc-KRcnDV img {
  margin: 1.5rem auto;
  border: 1.5px solid var(--border);
}

.sc-KRcnDV ul {
  border-left: 2px solid var(--border);
  padding-left: 1.5rem;
}

.sc-KRcnDV li {
  margin-bottom: 0.45rem;
}

/* === R2 fixes (2026-06-21T15:30:23.530704+00:00) === */

/* Footer: explicit override so no template rule darkens it past --primary (#2A3D5C) */
/* Related articles section: separator so it reads as recommendation, not footer noise */
.sc-LaXeqG,
div[class*='LaXeqG'] {
  border-top: 1.5px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}

/* === R3 fixes (2026-06-21T16:10:19.564082+00:00) === */

/* Fix 1: Card titles — add wildcard selectors so Styled Components card variants also lose uppercase */
/* Fix 2: H3 inside article content — restore hierarchy so H3 doesn't outrank H2 visually */
.sc-KRcnDV h3,
main article h3 {
  color: var(--primary);
  font-size: 1.05em;
  font-weight: 600;
}

/* Fix 3: Footer background — cover generic footer element and Styled Components hash so it matches header navy */
footer,
.sc-hnKsUO {
  background-color: #2A3D5C;
}

/* === R4 fixes (2026-06-21T16:50:22.794190+00:00) === */

/* Fix: main h2 — override global uppercase for all h2 inside <main>, regardless of Styled Components hashed wrapper class */
main h2 {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* === QA round-1 fixes (2026-07-22T15:24:42+0800) === */
/*
   Editorial pass for di-deco-es "Deco con Criterio" — Bruno Carvajal, Pachuca.
   Signature: the CINTA MÉTRICA — a gold tape-measure tick strip that closes the
   masthead, rules every article H2 and caps the footer. It is the one motif that
   says "this guy measures the room before he talks about vibes".
   Voices: Petrona italic (display/wordmark) + Petrona roman (body) + Khand
   uppercase-tracked (kickers/meta). Rust #B34F2A appears exactly twice, both
   times as a drop cap (home featured excerpt, article opening paragraph).
   Selectors are element/structural only — class names are obfuscated at deploy.
*/

/* Webfonts must be @font-face: the top-of-file @import lands after rules in the
   concatenated site.css and Chromium drops it, so the site rendered in fallbacks. */
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/petrona/v38/mtG64_NXL7bZo9XXgXJYtUkS0CQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Petrona';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/petrona/v38/mtG44_NXL7bZo9XXgXdot0MV8ia-Fg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Khand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/khand/v22/TwMN-IINQlQQ0bKNdmEwbQel_O-D.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Khand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/khand/v22/TwMN-IINQlQQ0bLpd2EwbQel_O-D.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --primary: #2A3D5C;
  --accent: #AD7A2F;
  --rust: #B34F2A;
  --bg: #F4EDE3;
  --paper: #FBF7F1;
  --fg: #1B2030;
  --border: #D8CDBB;
  --r: 0px;
  --fb: 'Petrona';
  --fh: 'Petrona';
  --fm: 'Khand';
  --tape: repeating-linear-gradient(90deg, rgba(20, 30, 48, 0.78) 0 1px, transparent 1px 9px);
}

body {
  font-family: var(--fb), Georgia, 'Times New Roman', serif;
  background-color: var(--bg);
  color: var(--fg);
  font-size: 1.0625rem;
  line-height: 1.68;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fh), Georgia, serif;
  font-weight: 600;
}

main h1,
main h2 {
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ─── Masthead: photo wash + italic wordmark + tape-measure edge ─── */

body > div:nth-of-type(1) {
  position: relative;
  background-color: var(--primary);
  background-image:
    linear-gradient(176deg, rgba(20, 30, 48, 0.56) 0%, rgba(20, 30, 48, 0.82) 58%, rgba(20, 30, 48, 0.94) 100%),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center 58%;
  max-width: none;
  padding: 0;
  margin: 0 0 0;
  border-bottom: 0;
}

body > div:nth-of-type(1)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background-color: var(--accent);
  background-image: var(--tape);
}

body > div:nth-of-type(1) > div {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 4.1rem 28px 3.6rem;
}

body > div:nth-of-type(1) > div::before {
  content: "PACHUCA, HIDALGO\0000A0\002014\0000A0CINTA, LIBRETA Y CRITERIO";
  display: block;
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}

body > div:nth-of-type(1) > div > h1 {
  font-family: var(--fh), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #fff;
  max-width: none;
  margin: 0 0 1.25rem;
}

body > div:nth-of-type(1) > div > p {
  font-family: var(--fh), Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
}

/* Interior pages: same masthead, slim bar, wordmark as text (not the amber pill) */
body > div:nth-of-type(1):not(:has(h1)) {
  background-image:
    linear-gradient(180deg, rgba(20, 30, 48, 0.84) 0%, rgba(20, 30, 48, 0.95) 100%),
    url("/theme-assets/hero-masthead.jpg");
  background-position: center 45%;
}

body > div:nth-of-type(1):not(:has(h1)) > div {
  padding: 1.5rem 28px 1.8rem;
}

body > div:nth-of-type(1):not(:has(h1)) > div::before {
  font-size: 0.66rem;
  margin-bottom: 0.5rem;
}

body > div:nth-of-type(1) > div > a {
  display: inline-block;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--fh), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #fff;
  text-decoration: none;
}

body > div:nth-of-type(1) > div > a:hover {
  background-color: transparent;
  color: var(--accent);
}

/* ─── Home: hero → Selección del editor → archivo ────────────────── */

main:nth-of-type(1):has(> div > h2) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 2.2rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 3.4rem 28px 1.5rem;
}

main:nth-of-type(1):has(> div > h2) > div {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 3;
  border-left: 0;
  padding: 0;
  margin: 0;
}

/* links sit on a shared baseline across a row instead of drifting with copy length */
main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2) > a {
  margin-top: auto;
  align-self: flex-start;
}

main:nth-of-type(1):has(> div > h2) > div > h2 {
  font-family: var(--fh), Georgia, serif;
  text-transform: none;
  margin: 0 0 0.5rem;
}

main:nth-of-type(1):has(> div > h2) > div > h2 > a {
  color: var(--primary);
  text-decoration: none;
}

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

main:nth-of-type(1):has(> div > h2) > div > p:nth-of-type(1) {
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(27, 32, 48, 0.5);
  margin: 0 0 0.6rem;
}

main:nth-of-type(1):has(> div > h2) > div > p:nth-of-type(2) {
  font-family: var(--fb), Georgia, serif;
  color: rgba(27, 32, 48, 0.78);
  max-width: 46ch;
  margin: 0 0 1rem;
}

/* THE hero — full bleed, italic display title, rust drop cap, ficha on the right */
main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  column-gap: 3rem;
  align-content: start;
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-top: 5px solid var(--primary);
  padding: 2.5rem 2.8rem 2.6rem;
  margin-bottom: 5rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1)::before {
  content: "LA ENTRADA M\0000C1S RECIENTE";
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--primary);
  padding: 0.3rem 0.8rem 0.22rem;
  margin-bottom: 1.5rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  margin-bottom: 0.9rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1)::after {
  content: "\0000A0\0000B7\0000A0POR BRUNO CARVAJAL";
  color: rgba(27, 32, 48, 0.5);
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > h2 {
  grid-column: 1;
  grid-row: 3;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.05rem, 5vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 21ch;
  margin: 0 0 1.1rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2) {
  grid-column: 1;
  grid-row: 4;
  font-size: 1.12rem;
  line-height: 1.62;
  color: rgba(27, 32, 48, 0.86);
  max-width: 54ch;
  margin: 0 0 1.7rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter {
  float: left;
  font-family: var(--fh), Georgia, serif;
  font-weight: 600;
  font-size: 3.85rem;
  line-height: 0.8;
  color: var(--rust);
  padding: 0.3rem 0.55rem 0 0;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > a {
  grid-column: 1;
  grid-row: 5;
  justify-self: start;
  display: inline-block;
  background-color: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 0;
  padding: 0.72rem 1.7rem 0.6rem;
  font-size: 0;
  text-decoration: none;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > a::before {
  content: "LEER LA ENTRADA";
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

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

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > a:hover::before {
  color: #fff;
}

/* the ficha — fills the right half of the hero row instead of dead space */
main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1)::after {
  content: "N\0000BA\0000A001\00000A\00000ADECO CON CRITERIO\00000APACHUCA, HIDALGO\00000A\00000ASIN T\0000CDTULO,\00000ACON CINTA M\0000C9TRICA";
  grid-column: 2;
  grid-row: 1 / span 5;
  white-space: pre-line;
  text-align: right;
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.95;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(27, 32, 48, 0.45);
  border-top: 2px solid var(--accent);
  padding-top: 0.85rem;
}

/* Second gear: the Editor's Picks band (cards 2–4) */
main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) {
  grid-column: span 2;
  border-top: 2px solid var(--primary);
  padding: 1.15rem 0 2.4rem;
  margin-top: 2.8rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(2)::before {
  content: "SELECCI\0000D3N DEL EDITOR\0000A0\002014\0000A0EMPIEZA POR AQU\0000CD";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.05rem);
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(2) > p:nth-of-type(1)::before {
  content: "01\0000A0/\0000A0";
  color: var(--accent);
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(3) > p:nth-of-type(1)::before {
  content: "02\0000A0/\0000A0";
  color: var(--accent);
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(4) > p:nth-of-type(1)::before {
  content: "03\0000A0/\0000A0";
  color: var(--accent);
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2 {
  font-size: 1.3rem;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > p:nth-of-type(2) {
  font-size: 0.97rem;
  line-height: 1.6;
}

/* Chronological archive (cards 5+) — consistent 2-col, hairline per row */
main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+5) {
  grid-column: span 3;
  border-top: 1px solid var(--border);
  padding: 1.7rem 0 1.9rem;
}

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

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(5)::before {
  content: "EL ARCHIVO\0000A0\002014\0000A0TODO, POR FECHA";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.1rem);
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+5) > h2 {
  font-size: 1.18rem;
  line-height: 1.28;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+5) > p:nth-of-type(2) {
  font-size: 0.93rem;
  line-height: 1.58;
}

/* every card below the hero: quiet tracked text link, never a flat black button */
main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2) > a {
  display: inline-block;
  background-color: transparent;
  border-radius: 0;
  border-bottom: 1.5px solid var(--accent);
  padding: 0 0 0.15rem;
  font-size: 0;
  text-decoration: none;
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2) > a::before {
  content: "LEER\0000A0\002192";
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2) > a:hover {
  border-bottom-color: var(--primary);
}

main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+2) > a:hover::before {
  color: var(--primary);
}

/* odd card count would strand the last item in the left column — centre it as a close */
main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  text-align: center;
  border-top: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  padding: 2.2rem 0 2.4rem;
  margin-top: 1.5rem;
}

main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) > h2,
main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) > p:nth-of-type(2) {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) > a {
  margin-top: 0.3rem;
  align-self: center;
}

/* ─── Article ────────────────────────────────────────────────────── */

main:nth-of-type(1):has(> article) {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.4rem 28px 3.5rem;
}

main:nth-of-type(1):has(> article) > hgroup {
  margin-bottom: 2.5rem;
}

main:nth-of-type(1):has(> article) > hgroup > h1 {
  font-family: var(--fh), Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.15rem, 5.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--primary);
  margin: 0 0 0.9rem;
}

main:nth-of-type(1):has(> article) > hgroup > time {
  display: block;
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

main:nth-of-type(1):has(> article) > hgroup > time::after {
  content: "\0000A0\0000B7\0000A0POR BRUNO CARVAJAL";
  color: rgba(27, 32, 48, 0.5);
}

main:nth-of-type(1):has(> article) > hgroup::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: 1.5rem;
  background-color: var(--accent);
  background-image: var(--tape);
}

/* static pages (about/contact/…) put the h1 inside <article>, not <hgroup> */
main:nth-of-type(1):has(> article) > article > h1 {
  font-family: var(--fh), Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--primary);
  margin: 0 0 1.6rem;
}

main:nth-of-type(1):has(> article) > article > h1::after {
  content: "";
  display: block;
  width: 76px;
  height: 8px;
  margin-top: 1.3rem;
  background-color: var(--accent);
  background-image: var(--tape);
}

main:nth-of-type(1):has(> article) > article > section:first-child > img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0;
  margin: 0 0 2.2rem;
}

main:nth-of-type(1):has(> article) > article > p {
  font-family: var(--fb), Georgia, serif;
  font-size: 1.09rem;
  line-height: 1.72;
  color: #22283A;
  max-width: none;
  margin-bottom: 1.3rem;
}

main:nth-of-type(1):has(> article) > article > p:nth-of-type(1)::first-letter {
  float: left;
  font-family: var(--fh), Georgia, serif;
  font-weight: 600;
  font-size: 3.55rem;
  line-height: 0.82;
  color: var(--rust);
  padding: 0.24rem 0.5rem 0 0;
}

main:nth-of-type(1):has(> article) > article > h2 {
  font-family: var(--fh), Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--primary);
  margin: 3.2rem 0 1rem;
}

/* the dinkus is a ruler, not a flourish */
main:nth-of-type(1):has(> article) > article > h2::before {
  content: "";
  display: block;
  width: 76px;
  height: 8px;
  margin-bottom: 1.15rem;
  background-color: var(--accent);
  background-image: var(--tape);
}

main:nth-of-type(1):has(> article) > article > h3 {
  font-family: var(--fh), Georgia, serif;
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--primary);
  margin: 2.4rem 0 0.7rem;
}

main:nth-of-type(1):has(> article) > article > ul,
main:nth-of-type(1):has(> article) > article > ol {
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  padding: 1.2rem 1.5rem 1.2rem 2.6rem;
  margin: 1.9rem 0;
}

main:nth-of-type(1):has(> article) > article > ul > li,
main:nth-of-type(1):has(> article) > article > ol > li {
  margin-bottom: 0.55rem;
}

main:nth-of-type(1):has(> article) > article > ul > li > b:first-child {
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

main:nth-of-type(1):has(> article) > article > blockquote {
  position: relative;
  background-color: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 1.25rem 1.5rem 1.25rem 2.9rem;
  margin: 2.2rem 0;
  font-style: italic;
  color: var(--primary);
}

main:nth-of-type(1):has(> article) > article > blockquote::before {
  content: "\00201C";
  position: absolute;
  left: 0.5rem;
  top: 0.15rem;
  font-family: var(--fh), Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
}

/* affiliate links read as a recommendation, editorial links stay plain */
main:nth-of-type(1):has(> article) > article a[href^="/see/"] {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  background-color: rgba(173, 122, 47, 0.16);
  box-shadow: inset 0 -2px 0 var(--accent);
  padding: 0.05em 0.25em;
}

main:nth-of-type(1):has(> article) > article a[href^="/see/"]:hover {
  background-color: var(--accent);
  box-shadow: none;
  color: #fff;
}

main:nth-of-type(1):has(> article) > div:last-of-type {
  border-top: 2px solid var(--primary);
  border-left: 0;
  padding: 2.1rem 0 0;
  margin-top: 3.4rem;
}

main:nth-of-type(1):has(> article) > div:last-of-type > h3 {
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

main:nth-of-type(1):has(> article) > div:last-of-type > ul {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

main:nth-of-type(1):has(> article) > div:last-of-type li {
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  margin: 0;
}

main:nth-of-type(1):has(> article) > div:last-of-type a {
  font-family: var(--fh), Georgia, serif;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

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

/* ─── Footer ─────────────────────────────────────────────────────── */

body > footer:nth-of-type(1) {
  position: relative;
  background-color: var(--primary);
  color: rgba(255, 255, 255, 0.6);
  border-top: 0;
  padding: 0;
  margin-top: 2rem;
}

body > footer:nth-of-type(1)::before {
  content: "";
  display: block;
  height: 10px;
  background-color: var(--accent);
  background-image: var(--tape);
}

body > footer:nth-of-type(1) > div {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 28px 2.2rem;
}

body > footer:nth-of-type(1) p {
  font-family: var(--fm), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  max-width: none;
  margin: 0;
}

body > footer:nth-of-type(1) a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

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

/* ─── Narrow ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  main:nth-of-type(1):has(> div > h2) {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 2.4rem 22px 1rem;
  }

  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) {
    grid-template-columns: 1fr;
    padding: 1.9rem 1.5rem 2rem;
    margin-bottom: 3.6rem;
  }

  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1)::before,
  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1),
  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > h2,
  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2),
  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1) > a {
    grid-column: 1;
    grid-row: auto;
  }

  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(1)::after {
    display: none;
  }

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

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

  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(n+5) {
    grid-column: 1 / -1;
  }

  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(5) {
    margin-top: 3.6rem;
  }

  main:nth-of-type(1):has(> div > h2) > div:nth-of-type(6) {
    margin-top: 0;
  }

  main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    text-align: left;
  }

  main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) > h2,
  main:nth-of-type(1):has(> div > h2) > div:last-child:nth-child(odd) > p:nth-of-type(2) {
    margin-left: 0;
    margin-right: 0;
  }

  body > div:nth-of-type(1) > div {
    padding: 2.8rem 22px 2.6rem;
  }

  main:nth-of-type(1):has(> article) {
    padding: 2.4rem 22px 2.8rem;
  }
}


/* === QA tail polish (2026-07-24T15:42:42.902225+00:00) — style Lambda [SB-20] compact tail across templates === */
/* The tail wrapper is always the LAST block child of <main> on the homepage,
   containing title-only rows of older articles. Various templates use different
   inner structures (ul>li / p / direct <a>) — this handles all three. */

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article)) {
  grid-column: 1 / -1;
  max-width: min(720px, 92vw);
  margin: 88px auto 0;
  padding: 40px 0 32px;
  border-top: 2px double rgba(0, 0, 0, .16);
  background: transparent;
  box-shadow: none;
}

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article))::before {
  content: "\2014  MORE FROM THE ARCHIVE  \2014";
  display: block;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 36px;
}

/* Any list / paragraph rows: 2-col on desktop, single on mobile */
:root main > *:last-child ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 48px;
}
@media (max-width: 899px) {
  :root main > *:last-child ul { columns: 1; }
}

:root main > *:last-child li,
:root main > *:last-child > p,
:root main > *:last-child > a {
  padding: 10px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.4;
  border-bottom: 1px dotted rgba(0, 0, 0, .12);
  break-inside: avoid;
  display: block;
}

:root main > *:last-child li a,
:root main > *:last-child p a,
:root main > *:last-child > a {
  text-decoration: none;
  font-weight: 600;
}

:root main > *:last-child li a:hover,
:root main > *:last-child p a:hover,
:root main > *:last-child > a:hover {
  text-decoration: underline;
}

/* dates (first inline child of li/p) — subtle mono */
:root main > *:last-child p > :first-child,
:root main > *:last-child li > :first-child:not(a) {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .5;
  margin-right: 10px;
}