*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.astro-LIucu7c5{max-width:1100px;margin:0 auto;padding:0 24px}
.astro-kF4Q4mY9{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.astro-kF4Q4mY9 h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.astro-kF4Q4mY9 p{font-size:16px;opacity:.8;font-style:italic}
.astro-kF4Q4mY9 .astro-SClcSRHM{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.astro-gJQgEHyJ{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.astro-EExcIK2G{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.astro-EExcIK2G:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.astro-EExcIK2G h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.astro-EExcIK2G h2 a{color:#2c3e50;text-decoration:none}
.astro-EExcIK2G .astro-Kk4KAem3{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.astro-EExcIK2G p{font-size:15px;color:#555;margin-bottom:14px}
.astro-hdfZFGRX{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.astro-GIQACn8n{max-width:780px;margin:0 auto;padding:0 24px 60px}
.astro-GIQACn8n h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.astro-GIQACn8n .astro-Kk4KAem3{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.astro-GIQACn8n h2{font-size:24px;margin:36px 0 14px}
.astro-GIQACn8n h3{font-size:19px;margin:28px 0 10px}
.astro-GIQACn8n p{margin-bottom:18px;font-size:17px}
.astro-GIQACn8n ul,.astro-GIQACn8n ol{margin:0 0 18px 28px}
.astro-GIQACn8n a{color:#e74c3c}
.astro-GIQACn8n img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.astro-GCUyBUEp{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.astro-GCUyBUEp a{color:#888}
.astro-4zOaPvGC{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}
.astro-tzKYL4b4{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.astro-PTerSBdj{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.astro-lepxdbBE{margin:0 0 28px}
.astro-N3FpUanJ{width:100%;height:auto;border-radius:4px}
.astro-toSLbDXL{margin:28px 0}
.astro-MgRWn9kR{width:100%;height:auto;border-radius:4px}
.astro-sX1Pnmci{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.astro-sX1Pnmci 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}
/* === Theme === */
:root{--primary:#1E3052;--accent:#C87D16;--bg:#ECEAE5;--fg:#1E3052;--border:#BEB9AE;--r:9px;--fb:'IBM Plex Sans';--fh:'Barlow Condensed'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/*
 * Site: cd-cad-es — Plano Experto
 * Design: Acero y Concreto
 * Reference: 1990s catálogos de materiales de construcción CONAVI/INFONAVIT,
 *            proveedores industriales fronterizos Baja California.
 *            Functional, utilitarian, blueprint-adjacent. Para quien lee
 *            fichas técnicas, no revistas de diseño.
 */

/* ─── Global Base ─────────────────────────────────────────────────────────── */

:root body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--fb);
  font-size: 1rem;
  line-height: 1.72;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

p {
  margin: 0 0 1.1em 0;
}

a, a:visited {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

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

ul, ol {
  padding-left: 1.5em;
  margin: 0 0 1.1em 0;
}

li {
  margin-bottom: 0.3em;
}

blockquote {
  border-left: 4px solid var(--accent);
  margin: 1.6em 0;
  padding: 0.6em 1.2em;
  font-style: italic;
  color: var(--fg);
  background: transparent;
}

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

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

strong, b {
  font-weight: 600;
}

/* ─── Site Header ─────────────────────────────────────────────────────────── */

:root > body > header {
  background-color: var(--primary);
  border-bottom: 3px solid var(--accent);
  padding: 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

:root > body > header h1 {
  font-family: var(--fh);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin: 0;
  line-height: 1.1;
}

:root > body > header p {
  font-family: var(--fb);
  font-size: 0.8rem;
  color: #a8b4c4;
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:root > body > header a {
  color: inherit;
  text-decoration: none;
}

:root > body > header a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ─── Main Content Area ───────────────────────────────────────────────────── */

:root main {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

:root main > h1 {
  font-family: var(--fh);
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4em;
  margin-bottom: 0.4em;
}

:root main > time {
  display: block;
  font-family: var(--fb);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8898;
  margin-bottom: 1.8em;
}

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

:root main > article > p {
  font-size: 1rem;
  line-height: 1.8;
}

:root main > article > h2 {
  font-size: 1.45rem;
  border-left: 4px solid var(--accent);
  padding-left: 0.65em;
  margin-top: 2.75em;
  margin-bottom: 0.5em;
}

:root main > article > h3 {
  font-size: 1.2rem;
  color: var(--primary);
}

:root main > article > h4 {
  font-size: 1.05rem;
}

:root main > article > h5 {
  font-size: 0.95rem;
}

:root main > article > h6 {
  font-size: 0.88rem;
  color: #5a6a7a;
}

:root main > article ul,
:root main > article ol {
  font-size: 1rem;
}

:root main > article li {
  margin-bottom: 0.35em;
}

:root main > article blockquote {
  border-left: 4px solid var(--accent);
  padding: 0.7em 1.3em;
  margin: 1.8em 0;
  background-color: rgba(190, 185, 174, 0.18);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
}

:root main > article > p strong {
  font-weight: 600;
  color: var(--primary);
}

:root main > article > p a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  font-weight: 500;
}

:root main > article > p a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

:root main > article > figure > img {
  max-width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--border);
  display: block;
}

:root main > article > figure > figcaption {
  font-size: 0.78rem;
  color: #7a8898;
  margin-top: 0.45em;
  letter-spacing: 0.03em;
  font-style: italic;
}

:root main > article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.6em 0;
  border: 1px solid var(--border);
}

:root main > article table th {
  background-color: var(--primary);
  color: #fff;
  font-family: var(--fh);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55em 0.85em;
  text-align: left;
  font-size: 0.82rem;
}

:root main > article table td {
  padding: 0.5em 0.85em;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

:root main > article table tr:nth-child(even) {
  background-color: rgba(190, 185, 174, 0.22);
}

/* ─── Home Page Cards ─────────────────────────────────────────────────────── */

:root main > div > div:has(> h2) {
  background-color: #fff;
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

:root main > div > div:has(> h2):hover {
  box-shadow: 0 2px 12px rgba(30, 48, 82, 0.1);
  border-left-color: var(--primary);
}

:root main > div > div:has(> h2) > p:first-child {
  font-family: var(--fh);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.3em;
}

:root main > div > div:has(> h2) > h2 {
  font-size: 1.25rem;
  margin: 0 0 0.45em 0;
  border: none;
  padding: 0;
  text-transform: uppercase;
}

:root main > div > div:has(> h2) > h2 a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}

:root main > div > div:has(> h2) > h2 a:hover {
  color: var(--accent);
  text-decoration: none;
}

:root main > div > div:has(> h2) > p:not(:first-child) {
  font-size: 0.93rem;
  color: #4a5a6a;
  margin-bottom: 0.7em;
  line-height: 1.62;
}

:root main > div > div:has(> h2) > a:last-child {
  display: inline-block;
  font-family: var(--fh);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.15s ease;
}

:root main > div > div:has(> h2) > a:last-child:hover {
  color: var(--accent);
}

/* ─── Related Articles Widget ─────────────────────────────────────────────── */

.mag-related-grid .mag-related-item {
  background-color: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r);
  padding: 0.9rem 1rem;
  font-size: 0.88rem;
  transition: border-top-color 0.15s ease;
}

.mag-related-grid .mag-related-item:hover {
  border-top-color: var(--accent);
}

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

:root footer {
  background-color: var(--primary);
  color: #a8b4c4;
  font-family: var(--fb);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 1.4rem 2rem;
  text-align: center;
  border-top: 2px solid var(--accent);
}

:root footer a {
  color: #c8d4e0;
  text-decoration: none;
}

:root footer a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ─── Responsive: Mobile ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root > body > header {
    padding: 1rem 1rem;
  }

  :root > body > header h1 {
    font-size: 1.45rem;
  }

  :root main {
    padding: 1.2rem 1rem 2rem;
  }

  :root main > h1 {
    font-size: 1.65rem;
  }

  :root main > article > h2 {
    font-size: 1.2rem;
  }

  :root main > div > div:has(> h2) {
    padding: 0.9rem 1rem;
  }

  :root main > article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  :root footer {
    padding: 1rem;
    font-size: 0.73rem;
  }
}

/* === R2 fixes (2026-06-16T22:30:19.987933+00:00) === */

/* Fix 1: article H1 — remove uppercase on long titles */
body .astro-GIQACn8n h1 {
  text-transform: none;
  line-height: 1.25;
}

/* Fix 4: affiliate/course recommendation links — distinct from editorial links */
a[href^="/to/"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #1e3a5f;
}

/* Fix 5: homepage article cards — Astro component class */
.astro-EExcIK2G {
  border-left: 3px solid #1e3a5f;
  padding-left: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

/* === R3 fixes (2026-06-16T23:10:19.714030+00:00) === */

/* Fix 2 (R3): article paragraph spacing — open up dense sections */
article p {
  margin-bottom: 1.6em;
}

/* Fix 3 (R3): nav header padding — compact the oversized header */
nav.astro-kF4Q4mY9 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Fix 5 (R3): article images — cap height so photos don't interrupt scroll rhythm */
.astro-GIQACn8n article figure img,
.astro-toSLbDXL img {
  max-height: 320px;
  object-fit: cover;
  object-position: center;
}

/* === R4 fixes (2026-06-17T00:00:23.039960+00:00) === */

/* Fix 1+2 (R4): article paragraphs — more air for dense technical sections (layer logic, AIA standards, software comparisons) */
article p {
  line-height: 1.9;
  margin-bottom: 1.85em;
}

/* Fix 3 (R4): related articles section — clear visual boundary between editorial content and complementary navigation */
.astro-sX1Pnmci {
  border-top: 2px solid #c4b89a;
  margin-top: 3rem;
  padding: 1.5rem 1.5rem 1rem;
  background-color: #eee8dc;
  border-radius: 4px;
}

/* Fix 4 (R4): related article items — each title as a discrete scannable unit */
.mag-related-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid #d4c9b8;
  display: block;
}

/* Fix 5 (R4): affiliate/course links — stronger distinction from editorial references */
a[href^="/to/"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  color: #1e3a5f;
}