*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.75;color:#333;background:#f0f2f5}
.section-a54dd1{max-width:860px;margin:0 auto;padding:0 20px}
.wrapper-678c09{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wrapper-678c09 h1{font-size:22px;font-weight:700;margin-bottom:2px}
.wrapper-678c09 p{font-size:14px;color:#666}
.wrapper-678c09 a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.panel-80004f{display:flex;flex-direction:column;gap:20px}
.content-524fd0{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.content-524fd0:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.content-524fd0 h2{font-size:19px;margin-bottom:6px}
.content-524fd0 h2 a{color:#1a1a1a;text-decoration:none}
.content-524fd0 .shell-d5fe8d{font-size:12px;color:#999;margin-bottom:8px}
.content-524fd0 p{font-size:14px;color:#555;margin-bottom:12px}
.outer-60aaa6{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.outer-60aaa6:hover{background:#4752c4}
.panel-f875a9{padding-bottom:60px}
.panel-f875a9 h1{font-size:30px;font-weight:700;margin-bottom:8px}
.panel-f875a9 time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.panel-f875a9 h2{font-size:22px;margin:32px 0 12px}
.panel-f875a9 h3{font-size:18px;margin:24px 0 8px}
.panel-f875a9 p{margin-bottom:16px}
.panel-f875a9 ul,.panel-f875a9 ol{margin:0 0 16px 24px}
.panel-f875a9 a{color:#5865f2}
.panel-f875a9 img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.sidebar-265a6d{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.sidebar-265a6d a{color:#999;text-decoration:none}
.footer-a165c6{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.block-a977ec{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.page-fea8a5{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.nav-274265{text-align:center;margin:0 0 24px}
.widget-bbde91{max-width:100%;height:auto;border-radius:12px}
.footer-3d8020{text-align:center;margin:24px 0}
.block-6dfc0a{max-width:100%;height:auto;border-radius:12px}
.panel-e43fd6{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.panel-e43fd6 h3{font-size:16px;font-weight:700;margin-bottom:12px}
.crd-related-list{display:flex;flex-direction:column;gap:8px}
.crd-related-link{display:block;background:#fff;border-radius:8px;padding:10px 14px;color:#333;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:14px}
.crd-related-link:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root{--primary:#5C3422;--accent:#C48B30;--bg:#EEEAE0;--fg:#3A2A1E;--border:#C5B9A8;--r:3px;--fb:'IBM Plex Sans';--fh:'Zilla Slab'}
body{font-family:var(--fb),system-ui,sans-serif;color:var(--fg);background:var(--bg)}
.wrapper-678c09{background:var(--primary);color:#fff}
.wrapper-678c09 h1{font-family:var(--fh),Georgia,serif;color:#fff}
.wrapper-678c09 p{color:rgba(255,255,255,.78)}
.wrapper-678c09 a{color:#fff;text-decoration:none}
.card h2{font-family:var(--fh),Georgia,serif}
.card h2 a{color:var(--primary)}
.card h2 a:hover{color:var(--accent)}
.read-more{color:var(--accent)}
.article-content h1{font-family:var(--fh),Georgia,serif}
.article-content h2{font-family:var(--fh),Georgia,serif}
.article-content a{color:var(--accent)}
.article-content img{border-radius:var(--r)}
/* === Custom === */
/* Design ref: Late-1980s IMSS/DIF health pamphlets + Guía Roji cartographic print (~1988 ed.)
   The visual grammar Lucrecia Valdés grew up trusting in Bajío waiting rooms and highway rest stops.
   Palette: deep warm brown (León leather) / amber gold (Guía Roji yellow) / muted off-white paper */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --primary:  #5C3422;
  --accent:   #C48B30;
  --bg:       #EEEAE0;
  --fg:       #3A2A1E;
  --border:   #C5B9A8;
  --muted:    #8A7B6E;
  --surface:  #E4DFD4;
  --r:        3px;
  --fb:       'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --fh:       'Zilla Slab', Georgia, serif;
}

/* ── Reset / base ─────────────────────────────────────────────── */

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fb);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.65;
  margin: 0;
}

/* ── Global typography ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh);
  color: var(--primary);
  line-height: 1.25;
  margin-top: 0;
  font-weight: 600;
}

h1 { font-size: 1.85rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem;  }
h4 { font-size: 1.05rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.88rem; font-weight: 500; }

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

strong {
  font-weight: 600;
}

/* ── HR ───────────────────────────────────────────────────────── */

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

/* ── Blockquote ───────────────────────────────────────────────── */

blockquote {
  margin: 1.5em 0;
  padding: 1em 1.25em;
  background: var(--surface);
  border-left: 4px solid var(--primary);
  border-radius: var(--r);
  color: var(--fg);
  font-size: 1.02rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Lists ────────────────────────────────────────────────────── */

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

li {
  margin-bottom: 0.4em;
  line-height: 1.55;
}

/* ── Selection ────────────────────────────────────────────────── */

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

/* ── Hero / site header (.wrapper-678c09) ────────────────────────────── */

.wrapper-678c09 {
  background: var(--primary);
  color: #fff;
  padding: 2.25rem 1.5rem 1.75rem;
}

.wrapper-678c09 h1 {
  font-family: var(--fh);
  color: #fff;
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.wrapper-678c09 p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.97rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.wrapper-678c09 a {
  color: #fff;
  text-decoration: none;
}

.wrapper-678c09 a:hover {
  color: var(--accent);
}

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

nav {
  background: var(--primary);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  display: inline-block;
}

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

/* ── Card grid ────────────────────────────────────────────────── */

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card h2 {
  font-family: var(--fh);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

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

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

.card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* ── Read-more link ───────────────────────────────────────────── */

.read-more {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-top: auto;
}

.read-more:hover {
  color: var(--primary);
}

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

.article-content {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--fg);
}

.article-content h1 {
  font-family: var(--fh);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.65rem;
}

.article-content h2 {
  font-family: var(--fh);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 2.2em;
  margin-bottom: 0.5em;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--border);
}

.article-content h3 {
  font-family: var(--fh);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
}

.article-content h4 {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  margin-top: 1.2rem;
  margin-bottom: 0.3rem;
}

.article-content p {
  margin: 0 0 1.15em;
  line-height: 1.75;
}

.article-content a {
  color: var(--accent);
  font-weight: 500;
}

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

.article-content ul,
.article-content ol {
  padding-left: 1.5em;
  margin: 0 0 1.15em;
}

.article-content li {
  margin-bottom: 0.45em;
}

.article-content blockquote {
  margin: 1.75em 0;
  padding: 1.1em 1.4em;
  background: var(--surface);
  border-left: 4px solid var(--primary);
  border-radius: var(--r);
}

.article-content hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 2rem 0;
}

.article-content img {
  border-radius: var(--r);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

/* ── Author byline ────────────────────────────────────────────── */

.byline {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

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

footer {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  padding: 1.75rem 1.5rem;
  margin-top: 3rem;
}

footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

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

/* ── Pagination ───────────────────────────────────────────────── */

.pagination a {
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 0.3em 0.7em;
  border-radius: var(--r);
  text-decoration: none;
  font-size: 0.9rem;
}

.pagination a:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Tag chips ────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.15em 0.5em;
  text-decoration: none;
}

.tag:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* === R2 fixes (2026-06-16T15:00:20.378031+00:00) === */

/* Affiliate disclosure — left-border marks it as intentional editorial note */
.footer-a165c6 {
  font-size: 0.9rem;
  border-left: 3px solid #5C3422;
  padding-left: 0.75em;
  opacity: 0.85;
}

/* Stronger bold contrast for scannable list items and inline emphasis */
article p strong,
article li strong {
  font-weight: 700;
  color: inherit;
}

/* Article-page header — more vertical padding for brand presence */
header.wrapper-678c09 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* === R3 fixes (2026-06-16T15:40:19.506376+00:00) === */

/* Selector fix: .article-content p/h2/h3/a rules above target a wrapper that
   does not exist in the rendered HTML; article p/h2/h3/a reaches the real DOM. */

article p {
  line-height: 1.75;
  margin-bottom: 1.15em;
}

article h2 {
  margin-top: 2.2em;
  margin-bottom: 0.5em;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.25rem;
}

article h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;
}

article a {
  color: var(--accent);
  font-weight: 500;
}

/* === R4 fixes (2026-06-16T16:20:19.563108+00:00) === */

/* Integrate the lone indigo button into the site's warm palette */
.outer-60aaa6 {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}