*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --c-primary:#1A1C1E; --c-secondary:#6C7278; --c-accent:#2A7A4B; --c-accent-dk:#1D5C37;
  --c-neutral:#F7F5F2; --c-surface:#FFFFFF; --c-border:#D5D2CE; --c-border-sub:#E8E5E1;
  --f-head:'Public Sans',sans-serif; --f-label:'Space Grotesk',sans-serif;
}
body { font-family:var(--f-head); background:var(--c-neutral); color:var(--c-primary); }
nav.site { position:sticky; top:0; z-index:100; background:var(--c-surface); border-bottom:1px solid var(--c-border); height:56px; }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 40px; height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-secondary); text-decoration:none; }
.nav-links a:hover, .nav-links a[aria-current] { color:var(--c-primary); }
.nav-cta { font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-surface); background:var(--c-accent); padding:8px 18px; text-decoration:none; }
.nav-cta:hover { background:var(--c-accent-dk); }
.wrap { max-width:760px; margin:0 auto; padding:48px 40px 72px; }
.crumbs { font-family:var(--f-label); font-size:11px; letter-spacing:.06em; color:var(--c-secondary); margin-bottom:24px; }
.crumbs a { color:var(--c-secondary); text-decoration:none; }
.crumbs a:hover { color:var(--c-accent); }
.kicker { font-family:var(--f-label); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--c-accent); margin-bottom:14px; }
article h1 { font-size:36px; font-weight:600; line-height:1.15; letter-spacing:-.02em; margin-bottom:20px; }
article h2 { font-size:20px; font-weight:600; letter-spacing:-.01em; margin:36px 0 12px; }
article p { font-size:16px; line-height:1.7; color:var(--c-primary); margin-bottom:18px; }
article ul { margin:0 0 18px 0; padding-left:0; list-style:none; }
article ul li { font-size:16px; line-height:1.7; padding:10px 0 10px 18px; border-bottom:1px solid var(--c-border-sub); position:relative; }
article ul li:last-child { border-bottom:none; }
article ul li::before { content:''; position:absolute; left:0; top:19px; width:6px; height:6px; background:var(--c-accent); }
article a { color:var(--c-accent); text-decoration:none; border-bottom:1px solid rgba(42,122,75,.3); }
article a:hover { border-bottom-color:var(--c-accent); }
article figure { margin:28px 0; }
article figure img { max-width:100%; height:auto; display:block; border:1px solid var(--c-border); background:var(--c-surface); }
article figcaption { font-family:var(--f-label); font-size:11px; color:var(--c-secondary); margin-top:8px; }
.src { font-family:var(--f-label); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-secondary); margin-bottom:28px; }
.callout { background:var(--c-surface); border-left:2px solid var(--c-accent); padding:18px 20px; margin:32px 0; }
.callout p { font-size:14px; color:var(--c-secondary); line-height:1.65; margin:0; }
.callout a { font-weight:600; }
.related { margin-top:48px; padding-top:28px; border-top:1px solid var(--c-border); }
.related-label { font-family:var(--f-label); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--c-accent); margin-bottom:16px; }
.related ul { list-style:none; }
.related ul li { padding:0; border:none; }
.related ul li::before { display:none; }
.related ul li a { display:block; padding:12px 0; border-bottom:1px solid var(--c-border-sub); font-size:15px; font-weight:600; color:var(--c-primary); text-decoration:none; }
.related ul li a:hover { color:var(--c-accent); }
.related ul li span { display:block; font-size:13px; font-weight:400; color:var(--c-secondary); margin-top:3px; }
footer.site { background:var(--c-surface); border-top:1px solid var(--c-border); padding:28px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a { font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-secondary); text-decoration:none; }
.footer-links a:hover { color:var(--c-primary); }
.footer-copy { font-size:12px; color:var(--c-secondary); }
@media (max-width:768px) {
  .nav-inner { padding:0 20px; }
  .nav-links { gap:16px; }
  .wrap { padding:32px 20px 56px; }
  article h1 { font-size:27px; }
  footer.site { flex-direction:column; text-align:center; }
}

/* ── Nav responsive: en pantallas estrechas el wordmark estorba ── */
@media (max-width:860px) {
  .nav-wordmark { display:none; }
}
@media (max-width:560px) {
  .nav-inner { padding:0 14px; gap:10px; }
  .nav-links { gap:14px; }
  .nav-links a { font-size:10px; letter-spacing:.06em; }
  .nav-cta { padding:7px 12px; font-size:10px; white-space:nowrap; }
  .nav-logo img { height:30px !important; }
}
@media (max-width:380px) {
  .nav-links a { font-size:9.5px; letter-spacing:.04em; }
  .nav-links { gap:10px; }
}

/* ── Tablas de datos ── */
.table-wrap { overflow-x:auto; margin:24px 0 28px; -webkit-overflow-scrolling:touch; }
.table-wrap table { width:100%; border-collapse:collapse; font-family:var(--f-label); font-size:14px; background:var(--c-surface); min-width:460px; }
.table-wrap th { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-secondary); padding:10px 12px; text-align:right; border-bottom:2px solid var(--c-border); white-space:nowrap; }
.table-wrap th:first-child { text-align:left; }
.table-wrap td { padding:11px 12px; text-align:right; border-bottom:1px solid var(--c-border-sub); white-space:nowrap; }
.table-wrap td:first-child { text-align:left; font-weight:600; }
.table-wrap tbody tr:last-child td { border-bottom:none; }
article em { font-style:italic; }
article strong { font-weight:600; }

/* ── Diagramas SVG ── */
figure.diagram { margin:28px 0 32px; }
figure.diagram svg { width:100%; height:auto; display:block; background:var(--c-surface); border:1px solid var(--c-border); padding:16px; color:var(--c-primary); }
figure.diagram figcaption { font-family:var(--f-head); font-size:13.5px; line-height:1.6; color:var(--c-secondary); margin-top:10px; }
figure.diagram figcaption strong { color:var(--c-primary); font-weight:600; }