*{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-rgWhQW{margin:20px 0}
.sc-YhItGk{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}
/* === Theme === */
:root{--primary:#2A3D5C;--accent:#AD7A2F;--bg:#F0F1F3;--fg:#1B2030;--border:#C4C2BB;--r:3px;--fb:'Hind';--fh:'Khand'}
/* === Custom === */
/* Design reference: Catálogos técnicos de acabados para vivienda, México 1990-2000 | Persona: Bruno Carvajal, Pachuca de Soto */

@import url('https://fonts.googleapis.com/css2?family=Khand:wght@400;500;600;700&family=Hind:wght@400;600;700&display=swap');

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

/* ─── Navigation ────────────────────────────────────────── */

.bld-nav {
  background-color: var(--primary);
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--accent);
}

.bld-nav a {
  color: #fff;
  text-decoration: none;
  font-family: var(--fh), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.88;
  transition: opacity 0.18s ease;
}

.bld-nav a:hover {
  color: #fff;
  opacity: 1;
}

/* ─── Hero ──────────────────────────────────────────────── */

.sc-rSGPfS {
  background-color: var(--primary);
  color: #fff;
  padding: 3.5rem 2rem 3rem;
  border-bottom: 3px solid var(--accent);
}

.sc-rSGPfS h1 {
  color: #fff;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: 0.9rem;
  max-width: 20ch;
}

.sc-rSGPfS p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  max-width: 52ch;
  margin-bottom: 1.4rem;
}

.sc-rSGPfS a {
  display: inline-block;
  background-color: var(--accent);
  color: #fff;
  font-family: var(--fh), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  padding: 0.6rem 1.3rem;
  border-radius: var(--r);
  transition: background-color 0.18s ease;
}

.sc-rSGPfS a:hover {
  background-color: #c49438;
  color: #fff;
}

/* ─── Cards ─────────────────────────────────────────────── */

.card {
  background-color: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.18s ease;
}

.card:hover {
  border-color: var(--primary);
}

.card h2 {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 0.25rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--primary);
}

.card h2 a {
  color: var(--primary);
  text-decoration: none;
}

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

.card p {
  font-size: 0.93rem;
  color: var(--fg);
  opacity: 0.82;
  margin-bottom: 0;
  max-width: none;
}

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

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

.article-content h1,
.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;
}

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

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

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

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

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

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

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

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

.bld-footer {
  background-color: var(--primary);
  color: rgba(255, 255, 255, 0.72);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  border-top: 2px solid var(--accent);
}

.bld-footer a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
}

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

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

/* Footer: explicit override so no template rule darkens it past --primary (#2A3D5C) */
.bld-footer {
  background-color: var(--primary);
}

/* 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 */
.card h2,
[class*='Card'] h2,
[class*='card'] h2 {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Fix 2: H3 inside article content — restore hierarchy so H3 doesn't outrank H2 visually */
.sc-KRcnDV h3,
.article-content 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;
}