/* ============================================================
   Heredy — Sistema de Diseño
   Azul marino (autoridad, seriedad) + vino/burdeos (acento,
   enlaces, llamadas a la acción). Serif para títulos, sans para
   cuerpo de texto, mono para el registro "de trámite" (fechas,
   firmas, cabeceras de tabla, etiquetas). Sin colores vivos ni
   elementos que transmitan urgencia — ver Parte II del manual
   de ejecución del proyecto.
   ============================================================ */

:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #16233F;              /* azul marino — primario: H1, H2, cabeceras de tabla, logo */
  --ink-soft: #55617A;
  --ink-faint: #8890A3;
  --ink-faint-text: #656F83;   /* variante segura WCAG AA de ink-faint para texto pequeño */
  --gold: #8B2635;             /* vino/burdeos — decorativo/relleno de gráficos, bordes de cita */
  --gold-text: #6E1E2A;        /* variante segura WCAG AA del acento — enlaces, botones, cifras */
  --gold-soft: #F3DEE1;
  --border: #E3E6EC;
  --border-strong: #C9CEDA;
  --danger: #B3261E;

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-text); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Un enlace dentro de una frase, distinguido solo por color, no es
   identificable de forma fiable para lectores con daltonismo (WCAG 1.4.1).
   Los enlaces estructurales (nav, tarjetas, botones, migas de pan)
   mantienen su aspecto porque su posición/forma ya los señala. */
.content p a,
.content li a {
  text-decoration: underline;
  text-decoration-color: rgba(139, 107, 39, 0.35);
  text-underline-offset: 2px;
}
.content p a:hover,
.content li a:hover {
  text-decoration-color: var(--gold-text);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Eyebrow / etiqueta mono ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 600;
}

/* ---------- Cabecera ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.logo {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}
.logo:hover { text-decoration: none; }

.header-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.main-nav a {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--gold-text); text-decoration: none; }
.main-nav a.active {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
}
.main-nav li.has-submenu { position: relative; }
.main-nav .submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(22,35,63,.10);
  min-width: 220px;
  display: none;
  z-index: 25;
}
.main-nav li.has-submenu:hover .submenu,
.main-nav li.has-submenu:focus-within .submenu { display: block; }
.main-nav .submenu li { width: 100%; }
.main-nav .submenu a { display: block; padding: 9px 16px; font-size: 14px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; width: 24px; height: 24px; }

/* ---------- Buscador ---------- */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  border-radius: 6px;
}
.search-toggle svg { display: block; width: 20px; height: 20px; }
.search-toggle:hover { color: var(--gold-text); }
.search-toggle[aria-expanded="true"] { color: var(--gold-text); background: var(--gold-soft); }

.search-panel {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(22,35,63,.10);
  z-index: 30;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.search-panel[hidden] { display: none; }
.search-panel-inner { padding: 20px 24px 28px; }
.search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 11px 14px;
  background: var(--bg);
}
.search-input-row:focus-within { border-color: var(--gold-text); }
.search-input-row svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--ink-faint-text); }
.search-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
}
.search-input-row input::placeholder { color: var(--ink-faint-text); }
.search-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-faint-text);
  padding: 2px 4px;
  font-size: 22px;
  line-height: 1;
  font-family: var(--font-body);
}
.search-close:hover { color: var(--ink); }

.search-hint {
  font-family: var(--font-mono);
  color: var(--ink-faint-text);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 10px 2px 0;
}

.search-results {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-result {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.search-result:hover,
.search-result.is-active {
  border-color: var(--gold-text);
  transform: translateY(-1px);
  text-decoration: none;
}
.search-result .search-result-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.search-result .search-result-title {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 4px;
}
.search-result:hover .search-result-title { color: var(--gold-text); }
.search-result .search-result-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.search-result mark {
  background: var(--gold-soft);
  color: var(--ink);
  padding: 0 1px;
  border-radius: 2px;
}
.search-empty {
  font-family: var(--font-mono);
  color: var(--ink-faint-text);
  font-size: 13.5px;
  padding: 6px 2px;
}

@media (max-width: 760px) {
  .search-panel-inner { padding: 16px; }
  .search-results { gap: 8px; }
}

/* ---------- Migas de pan ---------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint-text);
  padding: 18px 0 0;
}
.breadcrumb a { color: var(--ink-faint-text); }
.breadcrumb a:hover { color: var(--gold-text); }

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 56px;
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 14px 0 18px;
  max-width: 15ch;
  color: var(--ink);
}
.hero p.lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 28px;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  margin: 10px 12px 22px 0;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #0F1930; text-decoration: none; }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.btn-gold:hover { background: #7A212F; text-decoration: none; }
.btn-outline {
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--gold-text); color: var(--gold-text); text-decoration: none; }

/* ---------- Encabezado de sección ---------- */
.section-heading {
  padding-top: 48px;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 6px 0 4px;
  color: var(--ink);
}

/* ---------- Artículo / páginas de contenido ---------- */
.content {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 80px;
}
.content .dateline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint-text);
  margin-bottom: 6px;
}
.content .byline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint-text);
  margin-bottom: 6px;
}
.content .byline a {
  color: var(--ink-faint-text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.content .byline a:hover {
  color: var(--gold-text);
  text-decoration-color: var(--gold-text);
}
.content h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 8px 0 26px;
  color: var(--ink);
}
.content h2 {
  font-family: var(--font-display);
  font-size: 25px;
  margin: 48px 0 16px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--ink);
}
.content h2:first-of-type { border-top: none; padding-top: 0; }
.content h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18.5px;
  margin: 30px 0 12px;
  color: var(--ink);
}
.content p { margin: 0 0 18px; }
.content ul, .content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.content li { margin-bottom: 8px; }
.content strong { color: var(--ink); }

/* ---------- Aviso legal fijo ---------- */
.legal-notice {
  background: var(--gold-soft);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 0 0 28px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.legal-notice strong { color: var(--ink); }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 28px;
}
.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}
.content th, .content td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.content th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.content tr:nth-child(even) td { background: var(--surface); }
.content tr:hover td { background: #FBFAF5; }

.content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 44px 0;
}

.content blockquote {
  margin: 0 0 20px;
  padding: 4px 20px;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-style: italic;
}

/* Índice de contenidos (artículos largos) */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 32px;
}
.toc-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 10px;
}
.toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
}
.toc li { margin-bottom: 6px; }
.toc a { color: var(--ink); text-underline-offset: 2px; }
.toc a:hover { color: var(--gold-text); text-decoration: underline; }

/* Cajas de aviso contextual dentro del cuerpo del artículo (Consejo / Atención) */
.callout {
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
}
.callout p:last-child { margin-bottom: 0; }
.callout-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}
.callout-tip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ink);
}
.callout-tip .callout-label { color: var(--ink); }
.callout-warning {
  background: var(--gold-soft);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
}
.callout-warning .callout-label { color: var(--gold-text); }

/* Bloque de ejemplo rápido (tarjetas con cifras, Plantilla A) */
.example-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0 0 28px;
}
.example-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
}
.example-card .example-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint-text);
  margin-bottom: 8px;
  display: block;
}
.example-card .example-figure {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold-text);
  font-weight: 600;
  display: block;
}
.example-card .example-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  display: block;
  margin-top: 4px;
}

/* Rejilla de enlaces cruzados / relacionados */
.related-heading {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 44px 0 18px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--ink);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}
.related-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-card:hover {
  border-color: var(--gold-text);
  transform: translateY(-2px);
  text-decoration: none;
}
.related-card .related-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 8px;
}
.related-card .related-title {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--ink);
}
.related-card:hover .related-title { color: var(--gold-text); }
.related-card .related-arrow {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint-text);
}
.related-card:hover .related-arrow { color: var(--gold-text); }

/* Cuadrícula de comunidades autónomas (silo 1) */
.ccaa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}
.ccaa-grid.ccaa-compacta { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ccaa-grid a {
  display: block;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.ccaa-grid a:hover {
  border-color: var(--gold-text);
  color: var(--gold-text);
  text-decoration: none;
}

/* ---------- Ilustración del hero ---------- */
.hero-grid {
  display: flex;
  align-items: center;
  gap: 48px;
}
.hero-text { flex: 1 1 auto; }
.hero-art { flex: 0 0 300px; }
.hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .hero-grid { flex-direction: column; }
  .hero-art { display: none; }
}

/* ---------- Franja de estadísticas de portada ---------- */
.home-stats {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.home-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
}
.home-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 140px;
  text-align: center;
}
.home-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.home-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint-text);
}
@media (max-width: 640px) {
  .home-stats-row { padding: 18px 24px; }
  .home-stat { flex-basis: 45%; }
}

/* ---------- Tarjetas de silo (portada) ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 8px 0 8px;
}
.topic-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 22px 20px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.topic-card:hover {
  border-color: var(--gold-text);
  transform: translateY(-2px);
  text-decoration: none;
}
.topic-card-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--gold);
  margin-bottom: 14px;
}
.topic-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.topic-card:hover .topic-card-title { color: var(--gold-text); }
.topic-card-desc {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 14px;
}
.topic-card-arrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint-text);
}
.topic-card:hover .topic-card-arrow { color: var(--gold-text); }

/* ---------- Franja de confianza (portada) ---------- */
.home-trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 40px 0;
  margin-top: 12px;
}
.home-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}
.home-trust-item { flex: 1 1 260px; }
.home-trust-item h3 {
  font-family: var(--font-display);
  font-size: 17.5px;
  color: var(--ink);
  margin: 0 0 6px;
}
.home-trust-item p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* Ilustración dentro de artículo */
.section-art { text-align: center; margin: 8px 0 32px; }
.section-art svg { max-width: 600px; width: 100%; height: auto; }

/* Bloque de cita del profesional revisor */
.reviewer-quote {
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  padding: 26px 28px;
  margin: 32px 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.reviewer-quote .quote-mark {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}
.reviewer-quote p { margin: 0 0 8px; font-style: italic; color: #E7E9EF; }
.reviewer-quote cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #B9C0D1;
}

/* Caja CTA */
.cta-box {
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  padding: 32px 32px;
  margin: 40px 0 0;
}
.cta-box h2 {
  border: none;
  margin-top: 0;
  color: #fff;
}
.cta-box p { color: #C7CDDB; }
.cta-box a.btn-primary { background: var(--gold); color: var(--ink); font-weight: 700; }
.cta-box a.btn-primary:hover { background: #7A212F; }

/* ---------- Pie de página ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 40px;
}
.site-footer .wrap {
  padding: 44px 24px 34px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
}
.footer-brand .logo { display: inline-flex; margin-bottom: 10px; }
.footer-brand p {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 42ch;
  margin: 0 0 10px;
}
.footer-brand address {
  font-style: normal;
  color: var(--ink-faint-text);
  font-size: 13.5px;
  font-family: var(--font-mono);
}
.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  gap: 20px;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--ink-soft); font-size: 14px; }
.footer-links a:hover { color: var(--gold-text); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint-text);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Filas de entrada de calculadoras: permiten que las columnas se
   encojan en vez de desbordar, y se apilan en una columna en móvil. */
[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
@media (max-width: 420px) {
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
input[style*="flex:1"] { min-width: 0; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .main-nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    box-shadow: 0 8px 16px rgba(22,35,63,.08);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .main-nav.is-open ul { display: flex; }
  .main-nav ul li { border-top: 1px solid var(--border); }
  .main-nav ul li:first-child { border-top: none; }
  .main-nav a { display: block; padding: 14px 2px; }
  .main-nav a.active { border-bottom: none; border-left: 3px solid var(--gold); padding-left: 12px; }
  .main-nav .submenu {
    position: static;
    border: none;
    box-shadow: none;
    display: block;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-links ul { columns: 1; }
  .tool-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Herramientas interactivas (silo /herramientas-herencias/)
   ============================================================ */
.tool-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  margin: 24px 0;
}
.tool-field { margin-bottom: 18px; }
.tool-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.tool-field input[type="text"],
.tool-field input[type="number"],
.tool-field input[type="email"],
.tool-field input[type="tel"],
.tool-field input[type="date"],
.tool-field select,
.tool-field textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}
.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus {
  outline: none;
  border-color: var(--gold-text);
}
.tool-field textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); }
.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.tool-result {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 20px 22px;
  margin-top: 6px;
}
.tool-result .tool-result-figure {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}
.tool-result-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.tool-result-detail { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.tool-note {
  font-size: 13.5px;
  color: var(--ink-faint-text);
  margin-top: 10px;
}
.tool-quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  cursor: pointer;
}
.tool-quiz-option:hover { border-color: var(--gold-text); }
.print-only { display: none; }
@media print {
  .site-header, .breadcrumb, .site-footer, .legal-notice, .related-heading,
  .related-grid, .no-print, .dateline, .byline { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
  main.content { max-width: 100%; }
}

/* ---------- Fuentes oficiales ---------- */
.content .sources {
  list-style: none;
  margin: 0 0 28px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink);
  border-radius: 4px;
  font-size: 15px;
}
.content .sources li { margin-bottom: 8px; }
.content .sources li:last-child { margin-bottom: 0; }

/* --- Accesibilidad: enlace para saltar al contenido --- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 15px;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* --- Móvil: primera columna fija al desplazar tablas anchas --- */
@media (max-width: 640px) {
  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--border);
  }
  .table-wrap thead th:first-child { background: var(--ink); }
  .table-wrap td:first-child { background: var(--bg); }
  .table-wrap tr:nth-child(even) td:first-child { background: var(--surface); }
}

/* --- Enlace al pilar del silo bajo el resumen --- */
.content .pilar-link {
  font-size: 15px;
  color: var(--ink-soft);
  margin: -4px 0 24px;
}

/* Migas de pan: conservar el margen lateral de .wrap */
.breadcrumb.wrap { padding: 18px 24px 0; }

/* Indice plegable en paginas con muchas secciones: plegado por CSS para no mover el contenido al cargar */
.toc:not(.is-open) ol:has(> li:nth-child(10)) > li:nth-child(n+7) { display: none; }
.toc:has(ol > li:nth-child(10)) { position: relative; padding-bottom: 52px; }
.toc-more {
  position: absolute;
  left: 22px;
  bottom: 12px;
  margin: 0;
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toc-more:hover { color: var(--ink); }

/* Menu movil: una sola columna con desplazamiento, sin saltar a una segunda */
@media (max-width: 760px) {
  .main-nav ul { flex-wrap: nowrap; }
  .main-nav .submenu { max-height: none; overflow: visible; }
  .main-nav ul li { flex: 0 0 auto; }
}

/* Enlaces al glosario y bloque de herramienta relacionada */
a.gl { text-decoration: underline dotted; text-underline-offset: 3px; }
.next-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 32px 0;
}

/* Estado normativo de un cambio: en vigor, aprobado o anunciado */
.estado { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: .82rem; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.estado-vigor { color: #16233F; }
.estado-aprobado { color: #8B2635; }
.estado-anunciado { color: #5B6478; border-style: dashed; }

/* Graficos en pantallas estrechas: se mantienen a un tamano legible y se desplazan en horizontal, como las tablas */
@media (max-width: 640px) {
  .section-art { overflow-x: auto; -webkit-overflow-scrolling: touch; text-align: left; scrollbar-width: thin; padding-bottom: 6px; }
  .section-art svg[viewBox^="0 0 7"], .section-art svg[viewBox^="0 0 6"], .section-art svg[viewBox^="-20 0 7"] { min-width: 600px; }
  .section-art svg[viewBox^="0 0 5"], .section-art svg[viewBox^="0 0 48"], .section-art svg[viewBox^="-10 0 5"] { min-width: 420px; }
}