/* =============================================================================
   ELASTOMEROS.ORG · style.css
   Versión:        2.1 — INTEGRACIÓN
   Filosofía:      Editorial industrial técnico premium. Sin SaaS.
                   Cubre TODAS las clases legacy del sitio para que las 322
                   páginas adopten el nuevo look sin tocar su HTML.

   --- ÍNDICE ----------------------------------------------------------------
   §00  RESET + base
   §01  TOKENS
   §02  TIPOGRAFÍA (Fraunces + General Sans + JetBrains Mono)
   §03  TOPBAR / NAV  (.topbar, .nav, .navlinks, .logo, .search, .searchbox)
   §04  HERO  (.hero, .minihero, .eyebrow, .lede, .lead, .molecule, .cta, .btn)
   §05  SECTIONS  (.section, .section.dark, .wrap)
   §06  GRIDS  (.grid, .cols-3, .cols-4, .visual-pair, .chapter-list)
   §07  CARDS  (.card, .route-card, .decision-card, .route-plan, .related, .pillnav, .chapter-list a)
   §08  ARTICLE  (.crumb, .article-wrap, .toc, .article)
   §09  MISC contenido (.meta, .tag, .tablewrap, table, .callout, .deep-note, .criteria, .matrix-key, .spec-grid, .formula, .checklist, .faq-grid, .faq-item, .source-list, .reading-meta, .print-link)
   §10  DIAGRAMS  (.diagram, .diagram.light)
   §11  RANKS (top providers)
   §12  PROCESS STRIP
   §13  FOOTER (.footer, .inner)
   §14  QUICKDOCK
   §15  READ-PROGRESS, theme toggle, helpers
   §16  RESPONSIVE
   §17  PRINT
   §18  DARK MODE (.theme-dark)
   ============================================================================= */


/* §00 RESET ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }


/* §01 TOKENS --------------------------------------------------------------- */
:root {
  /* Neutrals — warm, tactile */
  --ink:        #0a0c10;
  --ink-2:      #15191f;
  --graphite:   #1a1d24;
  --graphite-2: #262b35;
  --graphite-3: #3a414d;
  --paper:      #fafaf7;
  --paper-2:    #f4f3ed;
  --paper-3:    #e8e6df;
  --line:       #d8d6cf;
  --line-2:     #c0bdb2;
  --muted:      #6b6f78;
  --muted-2:    #9a9da4;

  /* Accent — PU amber, single saturated color of the UI */
  --amber:      #e8a247;
  --amber-deep: #b87a2a;
  --amber-soft: #f4c97f;

  /* Semantic (used in matrix dots, ok/warn/bad markers) */
  --ok:         #4d8a3e;
  --ok-soft:    #9bb88c;
  --warn:       #d97706;
  --warn-soft:  #e8b370;
  --bad:        #a8311c;
  --bad-soft:   #c97a6a;

  /* Legacy compat — keep old tokens working */
  --bg:         #0a0c10;
  --panel:      #15191f;
  --panel2:     #1a1d24;
  --text:       #fafaf7;
  --brand:      #e8a247;
  --brand2:     #b87a2a;
  --soft:       #f4f3ed;
  --green:      #4d8a3e;
  --red:        #a8311c;

  /* Type */
  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans:  "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes */
  --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 17px;
  --t-lg: 20px; --t-xl: 26px; --t-2xl: 34px; --t-3xl: 48px;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,.9,.3,1);
  --dur-1: 180ms; --dur-2: 320ms;

  /* Layout */
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --topbar-h: 64px;
}


/* §02 TIPOGRAFÍA + BASE --------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","ss02","calt";
  text-rendering: optimizeLegibility;
}
::selection { background: var(--amber); color: var(--ink); }
p { line-height: 1.65; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
h1 {
  font-variation-settings: "opsz" 96, "SOFT" 75;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
h2 {
  font-variation-settings: "opsz" 48, "SOFT" 80;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.03em;
}
h3 {
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.02em;
}

code, pre, .mono, .formula, .kbd {
  font-family: var(--mono);
  font-feature-settings: "tnum","zero";
}


/* §03 TOPBAR / NAV ------------------------------------------------------- */
/* The old .topbar > .nav structure is preserved; we just restyle it. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,247,.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(216,214,207,.6);
  box-shadow: none;
}
.nav {
  max-width: 1480px;
  margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--gutter);
  min-height: var(--topbar-h);
  flex-wrap: nowrap;
}

/* Logo: serif brand, amber TLD */
.logo {
  font-family: var(--serif);
  font-variation-settings: "opsz" 14, "SOFT" 80;
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.logo span { color: var(--amber); }
/* Replace old emoji hex with a clean SVG mark */
.logo:before {
  content: "";
  width: 22px; height: 22px;
  background: none;
  border: none;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0c10' stroke-width='1.4'><path d='M12 2 L21 6.5 L21 17.5 L12 22 L3 17.5 L3 6.5 Z'/><path d='M12 2 L12 22 M3 6.5 L21 17.5 M21 6.5 L3 17.5' opacity='.4'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
  border-radius: 0;
}

.navlinks {
  display: flex; gap: 0;
  flex: 1; min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: 0.82rem;
  scroll-behavior: smooth;
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a {
  color: var(--ink-2);
  font-weight: 500;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  position: relative;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  white-space: nowrap;
  flex: 0 0 auto;
}
.navlinks a:hover {
  color: var(--ink);
  background: var(--paper-2);
  text-decoration: none;
}
.navlinks a.is-active {
  color: var(--ink);
  background: var(--paper-2);
  position: relative;
}
.navlinks a.is-active:after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; bottom: 3px;
  height: 2px;
  background: var(--amber);
  border-radius: 1px;
}
.navlinks a:hover:after { display: none; }

/* Menu hamburguesa: SIEMPRE visible — acceso al sitemap completo (mega-drawer) */
.nav-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--line);
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  margin-left: var(--s-2);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  flex: 0 0 auto;
}
.nav-toggle:hover {
  background: var(--paper-2);
  border-color: var(--ink-3);
}
.nav-toggle.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.nav-toggle svg { display: block; transition: transform var(--dur-1) var(--ease); }
.nav-toggle.is-active svg { transform: rotate(90deg); }

/* Mega drawer: cubre la pantalla con backdrop oscuro y 4 columnas */
.nav-drawer {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(10,12,16,.12);
  z-index: 49;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  animation: drawer-slide .25s ease-out;
}
.nav-drawer.is-open { display: block; }
@keyframes drawer-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-drawer-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.nav-drawer-col h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3) 0;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.nav-drawer-col a {
  display: block;
  padding: 7px 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color var(--dur-1) var(--ease), padding var(--dur-1) var(--ease);
}
.nav-drawer-col a:hover {
  color: var(--amber);
  text-decoration: none;
  padding-left: 4px;
}
@media (max-width: 1100px) {
  .nav-drawer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .nav-drawer-inner { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Search */
.search { margin-left: auto; position: relative; }
.search input {
  width: 160px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 14px 8px 32px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f78' stroke-width='1.5'><circle cx='11' cy='11' r='7'/><path d='M21 21 l-4.3 -4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px 14px;
}
.search input:focus { outline: none; border-color: var(--ink); }
.searchbox {
  display: none;
  position: absolute; right: 0; top: 44px;
  width: 420px; max-height: 420px; overflow: auto;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(10,12,16,.18);
  padding: 8px;
}
.result {
  display: block; padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.result:hover { background: var(--paper-2); text-decoration: none; }
.result b { color: var(--ink); }


/* §04 HERO -------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Aurora boreal de fondo: 3 capas de gradientes radiales */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 30%, rgba(232,162,71,.22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 70%, rgba(106,168,255,.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(176,96,255,.14), transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 10%, rgba(255,102,204,.12), transparent 60%);
  filter: blur(40px);
  animation: aurora-drift 28s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Grid técnico tenue sobre el hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}
@keyframes aurora-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(2%, -1%) rotate(2deg); }
  66%  { transform: translate(-2%, 1%) rotate(-1deg); }
  100% { transform: translate(1%, 2%) rotate(1deg); }
}
.hero .wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter) var(--s-8);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero h1 {
  color: var(--paper);
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 55;
  font-size: clamp(48px, 6.5vw, 96px);
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin: var(--s-4) 0 var(--s-5);
  max-width: 13ch;
  /* Glow sutil */
  text-shadow: 0 0 60px rgba(232,162,71,.15);
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--amber);
  text-shadow: 0 0 40px rgba(232,162,71,.4);
}
.hero p { color: rgba(250,250,247,.78); font-size: var(--t-lg); max-width: 56ch; position: relative; z-index: 1; }
.hero .eyebrow { position: relative; z-index: 1; }
.hero .cta { position: relative; z-index: 1; }

/* Minihero — used on inner index pages */
.minihero { background: var(--ink); color: var(--paper); }
.minihero .wrap { padding: var(--s-8) var(--gutter); }
.minihero h1 {
  color: var(--paper);
  font-family: var(--serif);
  font-variation-settings: "opsz" 96, "SOFT" 75;
  font-size: clamp(36px, 4.5vw, 60px);
  margin: var(--s-3) 0;
  letter-spacing: -0.035em;
}
.minihero p, .minihero .lead { color: rgba(250,250,247,.78); }

/* Editorial eyebrow / kicker — sits above a title. Default uses ink/muted; */
/* on dark surfaces is overridden via .hero / .section.dark / .minihero. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--s-2);
}
.eyebrow:before {
  content: ""; width: 6px; height: 6px; background: var(--amber); border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(232,162,71,.8);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(232,162,71,.6); transform: scale(1); }
  50%      { box-shadow: 0 0 18px rgba(232,162,71,1); transform: scale(1.2); }
}
.eyebrow:empty { display: none; }
.hero .eyebrow, .minihero .eyebrow, .section.dark .eyebrow { color: rgba(250,250,247,.7); }

/* Hero molecule: contenedor para canvas 3D animado */
.molecule {
  height: auto;
  min-height: 480px;
  aspect-ratio: 16/10;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(232,162,71,.10), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(120,80,200,.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.005)),
    #07090d;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow:
    inset 0 0 100px rgba(232,162,71,.08),
    0 30px 100px rgba(0,0,0,.5),
    0 0 60px rgba(232,162,71,.10);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* Borde luminoso animado ámbar */
.molecule::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(232,162,71,.4) 0%,
    rgba(232,162,71,0) 30%,
    rgba(106,168,255,0) 50%,
    rgba(176,96,255,.4) 80%,
    rgba(232,162,71,.4) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  animation: border-glow 8s linear infinite;
}
@keyframes border-glow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.molecule canvas.mol3d {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto;
}
.molecule img {
  max-width: 100%;
  height: auto;
  opacity: 0.85;
}
/* Loading dots mientras carga Three.js */
.mol-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.mol-loading span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--amber);
  animation: mol-loading-bounce 1.4s infinite ease-in-out both;
}
.mol-loading span:nth-child(1) { animation-delay: -0.32s; }
.mol-loading span:nth-child(2) { animation-delay: -0.16s; }
@keyframes mol-loading-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}
@media (max-width: 820px) {
  .molecule { min-height: 320px; aspect-ratio: 16/11; }
}

/* CTAs del hero con glow ámbar al hover */
.hero .btn.primary {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.hero .btn.primary:hover {
  box-shadow: 0 0 40px rgba(232,162,71,.35), 0 4px 16px rgba(0,0,0,.4);
  transform: translateY(-1px);
}
.hero .btn.secondary {
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hero .btn.secondary:hover {
  box-shadow: 0 0 28px rgba(232,162,71,.18);
}

/* CTAs (legacy .cta + .btn) */
.cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--dur-2) var(--ease);
  text-decoration: none !important;
}
.btn.primary {
  background: var(--paper);
  color: var(--ink);
}
.btn.primary:hover { background: var(--amber); transform: translateY(-2px); }
.btn.secondary {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250,250,247,.22);
}
.btn.secondary:hover { border-color: var(--amber); color: var(--amber); }


/* §05 SECTIONS ---------------------------------------------------------- */
.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter);
}
.section h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 60, "SOFT" 80;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-3);
}
.section h2:before { content: none; }  /* kill old ▣ glyph */
.section.dark {
  max-width: none;
  background: var(--ink);
  color: var(--paper);
  padding: 0;
}
.section.dark .inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter);
}
.section.dark h2 { color: var(--paper); }
.section.dark p, .section.dark .lead { color: rgba(250,250,247,.72); }
.section.dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.section.dark .card h3 { color: var(--paper); }
.section.dark .card p { color: rgba(250,250,247,.72); }

.lead, .lede {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: var(--s-3) 0 var(--s-5);
}


/* §06 GRIDS ------------------------------------------------------------ */
.grid { display: grid; gap: var(--s-4); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.visual-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }


/* §07 CARDS ------------------------------------------------------------ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: 0 1px 2px rgba(10,12,16,.03);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(10,12,16,.12);
}
.card h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: var(--t-xl);
  font-weight: 500;
  margin: 0 0 var(--s-2);
  line-height: 1.2;
}
.card p { color: var(--muted); margin: 0 0 var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.card a:not(.btn):not(.tag) { color: var(--amber-deep); font-weight: 600; }
.card a:not(.btn):not(.tag):hover { color: var(--ink); }

/* Route cards (used in nav-routes section) */
.route-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  color: var(--ink);
  transition: all var(--dur-2) var(--ease);
  text-decoration: none !important;
}
.route-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(10,12,16,.12);
}
.route-card strong {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: var(--t-xl);
  font-weight: 500;
  margin-bottom: var(--s-2);
  letter-spacing: -0.02em;
}
.route-card span { display: block; color: var(--muted); font-size: var(--t-base); }

/* Route plans (numbered step lists) */
.route-plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: 0 1px 2px rgba(10,12,16,.03);
}
.route-plan h3 { margin: 0 0 var(--s-2); font-size: var(--t-xl); }
.route-plan ol { counter-reset: item; list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.route-plan li {
  display: flex; gap: var(--s-3);
  margin: var(--s-3) 0;
  align-items: flex-start;
  color: var(--ink-2);
}
.route-plan li:before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  flex: 0 0 32px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--amber-deep);
  padding-top: 2px;
}

/* Decision cards */
.decision-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.decision-card h3 { margin: 0 0 var(--s-2); }
.decision-card p { color: var(--muted); }

/* Related */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.related a {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--t-sm);
  transition: all var(--dur-2) var(--ease);
}
.related a:hover { border-color: var(--ink); background: var(--paper-2); text-decoration: none; }

/* Pillnav */
.pillnav { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) 0; }
.pillnav a {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: 500;
  transition: all var(--dur-1) var(--ease);
}
.pillnav a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }

/* Chapter list (used in inner index pages) */
.chapter-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin: var(--s-5) 0;
  list-style: none;
  padding: 0;
}
.chapter-list a {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-family: var(--serif);
  font-variation-settings: "opsz" 18, "SOFT" 80;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: all var(--dur-2) var(--ease);
}
.chapter-list a:hover { border-color: var(--ink); background: var(--paper-2); text-decoration: none; }


/* §08 ARTICLE LAYOUT --------------------------------------------------- */
.crumb {
  max-width: var(--wrap);
  margin: var(--s-5) auto 0;
  padding: 0 var(--gutter);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); text-decoration: none; }

.article-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) var(--s-10);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-8);
}
/* When the article-wrap has no aside.toc (section index pages),
   collapse to a single column so .article isn't forced into a narrow track. */
.article-wrap:not(:has(aside.toc)):not(:has(.toc)) {
  grid-template-columns: 1fr;
  gap: 0;
}

.toc {
  position: sticky; top: calc(var(--topbar-h) + var(--s-5));
  align-self: start;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  max-height: calc(100vh - var(--topbar-h) - var(--s-7));
  overflow-y: auto;
}
.toc strong {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.toc a {
  display: block;
  padding: 6px 0 6px var(--s-3);
  border-left: 2px solid var(--line);
  color: var(--muted);
  transition: all var(--dur-1) var(--ease);
  border-bottom: none;
}
.toc a:hover { color: var(--ink); }
.toc a.active {
  color: var(--ink);
  border-left-color: var(--amber);
  font-weight: 600;
  padding-left: var(--s-3);
}

.article {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 72ch;
}
/* When the parent article-wrap collapsed to 1 column (no TOC), let .article use full width.
   This is the section-index case: grids of cards, not body text. */
.article-wrap:not(:has(aside.toc)):not(:has(.toc)) > .article {
  max-width: none;
}
.article h1 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 96, "SOFT" 75;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 var(--s-5);
  color: var(--ink);
}
.article h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 36, "SOFT" 80;
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: var(--s-8) 0 var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.article h2:first-of-type { border-top: none; padding-top: 0; }
.article h2:before { content: none; } /* kill the § glyph */
.article h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: var(--t-xl);
  font-weight: 500;
  margin: var(--s-6) 0 var(--s-2);
}
.article p {
  margin: var(--s-3) 0;
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--ink-2);
}
.article ul, .article ol { padding-left: var(--s-5); margin: var(--s-3) 0; }
.article li { margin: 6px 0; color: var(--ink-2); }
.article a:not(.btn) {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-underline-offset: 3px;
  transition: border-color var(--dur-1) var(--ease);
}
.article a:not(.btn):hover { border-bottom-color: var(--amber); text-decoration: none; }
.article blockquote {
  border-left: 3px solid var(--amber);
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-5);
  background: var(--paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.article section { scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.article section:target { animation: none; }


/* §09 MISC CONTENIDO --------------------------------------------------- */

/* meta strip of tags above h1 */
.meta {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.meta .tag:first-child:before { content: none; } /* kill pushpin emoji */

/* Tag chip */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  margin: 0 4px 4px 0;
}

/* Tables */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  margin: var(--s-5) 0;
}
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); background: transparent; }
th, td {
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
th {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
tr:last-child td { border-bottom: none; }
.dense-table td { font-size: var(--t-sm); }

/* Callouts */
.callout {
  border-left: 3px solid var(--amber);
  background: var(--paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
}
.callout.warning { border-left-color: var(--warn); background: rgba(217,119,6,.06); }
.callout.danger  { border-left-color: var(--bad);  background: rgba(168,49,28,.05); }

.deep-note {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
}

.criteria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.criteria .box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.criteria .box b { display: block; color: var(--amber-deep); margin-bottom: 4px; font-size: var(--t-sm); }

.matrix-key {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin: var(--s-4) 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.matrix-key span {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  color: var(--ink-2);
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.spec {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.spec b {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.spec span {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
}

.formula {
  font-family: var(--mono);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0;
  overflow-x: auto;
  font-size: var(--t-sm);
  line-height: 1.6;
}

.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding-left: var(--s-6);
  margin: var(--s-2) 0;
}
.checklist li:before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 14px;
  border: 1.5px solid var(--amber);
  border-radius: 3px;
  background: transparent;
}
.checklist li:after {
  content: "";
  position: absolute;
  left: 3px; top: 11px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--amber);
  border-bottom: 1.5px solid var(--amber);
  transform: rotate(-45deg);
}

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin: var(--s-4) 0;
}
.faq-item, details.card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease);
  padding: 0;
  margin: var(--s-2) 0;
  box-shadow: none;
}
.faq-item:hover, details.card:hover { border-color: var(--ink-2); transform: none; }
.faq-item summary, details.card > summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  font-family: var(--serif);
  font-variation-settings: "opsz" 18, "SOFT" 80;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.faq-item summary::-webkit-details-marker,
details.card > summary::-webkit-details-marker { display: none; }
.faq-item summary::marker,
details.card > summary::marker { content: ""; }
.faq-item summary:after, details.card > summary:after {
  content: "+";
  position: absolute;
  right: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 20px;
  color: var(--amber);
  font-weight: 400;
  transition: transform var(--dur-2) var(--ease);
}
.faq-item[open] summary:after,
details.card[open] > summary:after { transform: translateY(-50%) rotate(45deg); }
.faq-item > div, .faq-item > p,
details.card > div, details.card > p { padding: 0 var(--s-5) var(--s-5); color: var(--ink-2); margin: 0; }
details.card > summary b { font-family: var(--serif); font-weight: 500; }

/* Source list */
.source-list { padding-left: var(--s-5); }
.source-list li { font-size: var(--t-sm); margin: 6px 0; color: var(--muted); }
.source-list li a { color: var(--ink); }
.source-list li a:hover { border-bottom-color: var(--amber); }

/* Reading meta + print link */
.reading-meta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-5); }
.reading-meta span {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 500;
}
.print-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
}
.print-link:hover { border-color: var(--ink); }


/* §10 DIAGRAMS -------------------------------------------------------- */
.diagram {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: var(--s-5) 0;
  overflow: hidden;
}
.diagram.light {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
}


/* §11 RANKS — top providers ------------------------------------------ */
.rank {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-5);
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: var(--s-3) 0;
  background: var(--paper);
  transition: all var(--dur-2) var(--ease);
}
.rank:hover { border-color: var(--ink); transform: translateY(-1px); }
.ranknum {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-variation-settings: "opsz" 36, "SOFT" 80;
  font-size: var(--t-2xl);
  font-weight: 500;
}


/* §12 PROCESS STRIP --------------------------------------------------- */
.process-strip {
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
  margin: var(--s-5) 0;
}
.process-strip span {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--paper);
}
.process-strip b { color: var(--amber); font-weight: 600; }


/* §13 FOOTER --------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(250,250,247,.7);
  padding: var(--s-9) var(--gutter) var(--s-7);
  margin-top: var(--s-9);
}
.footer .inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--s-7);
}
/* When enriched with sitemap columns by site.js, switch to 6-column layout.
   The first two cols are legacy (brand block + advertencia), the rest are new. */
.footer .inner:has([data-enriched]) {
  grid-template-columns: 1.6fr 1.2fr repeat(4, 1fr);
}
/* Fallback for browsers without :has() */
@supports not (selector(:has(*))) {
  .footer .inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-7);
  }
}
@media (max-width: 1100px) {
  .footer .inner:has([data-enriched]) {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .footer .inner,
  .footer .inner:has([data-enriched]) {
    grid-template-columns: 1fr 1fr;
  }
}
.footer .logo { color: var(--paper); }
.footer .logo:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafaf7' stroke-width='1.4'><path d='M12 2 L21 6.5 L21 17.5 L12 22 L3 17.5 L3 6.5 Z'/><path d='M12 2 L12 22 M3 6.5 L21 17.5 M21 6.5 L3 17.5' opacity='.4'/></svg>");
}
.footer p { font-size: var(--t-sm); line-height: 1.5; color: rgba(250,250,247,.6); }
.footer b { color: var(--paper); }
.footer h4 {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,250,247,.5);
  margin: 0 0 var(--s-3);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 6px 0; }
.footer a {
  font-size: var(--t-sm);
  color: rgba(250,250,247,.72);
  transition: color var(--dur-1) var(--ease);
}
.footer a:hover { color: var(--amber); text-decoration: none; }
.footer .small {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: rgba(250,250,247,.4);
  margin-top: var(--s-3);
}


/* §14 QUICKDOCK ------------------------------------------------------ */
.quickdock {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 60;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.quickdock a, .quickdock button {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(10,12,16,.12);
  transition: all var(--dur-1) var(--ease);
}
.quickdock a:hover, .quickdock button:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  text-decoration: none;
}


/* §15 READ-PROGRESS + helpers --------------------------------------- */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--amber);
  z-index: 100;
  transition: width 60ms linear;
  box-shadow: none;
}

.long-index { columns: 2; column-gap: var(--s-7); margin: var(--s-5) 0; }
.long-index a {
  display: block;
  break-inside: avoid;
  padding: 6px 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid transparent;
}
.long-index a:hover { border-bottom-color: var(--amber); text-decoration: none; }

.kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
}

.small { font-size: var(--t-sm); color: var(--muted); }
.ok { color: var(--ok); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }

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

/* Action panel (legacy) */
.action-panel { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); margin-top: var(--s-5); margin-bottom: var(--s-5); }
.panel-head { max-width: 60ch; }

/* Route grid inside action panel (legacy: needed grid declaration) */
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.route-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .route-grid, .route-grid.compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .route-grid, .route-grid.compact { grid-template-columns: 1fr; }
}


/* §16 RESPONSIVE ---------------------------------------------------- */
@media (max-width: 1280px) {
  /* Pantallas portátiles típicas (1366×768): ajustar search para que el nav quepa */
  .search input { width: 140px; padding-left: 30px; font-size: 11px; }
  .navlinks { font-size: 0.78rem; }
  .navlinks a { padding: 6px 6px; }
}
@media (max-width: 1100px) {
  .hero .wrap, .article-wrap { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .related, .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .footer .inner { grid-template-columns: 1fr 1fr; }
  .visual-pair { grid-template-columns: 1fr; }
  .criteria { grid-template-columns: 1fr; }
  /* Cuando hay poco espacio, ocultar el menú de 14 enlaces; el hamburger sigue activo */
  .navlinks { display: none; }
  .search input { width: 130px; }
  .logo { font-size: 1rem; }
}
@media (max-width: 820px) {
  :root { --topbar-h: 56px; }
  .nav { gap: var(--s-3); padding: 12px var(--gutter); }
  .search input { width: 130px; }
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr 1fr; }
  .chapter-list { grid-template-columns: 1fr; }
  .footer .inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .related { grid-template-columns: 1fr; }
  .footer .inner { grid-template-columns: 1fr; }
  .search { display: none; }
  .section { padding: var(--s-7) var(--gutter); }
  .article-wrap { padding: var(--s-5) var(--gutter) var(--s-8); }
  .quickdock { right: 10px; bottom: 10px; }
  .quickdock a, .quickdock button { width: 40px; height: 40px; }
}


/* §17 PRINT --------------------------------------------------------- */
@media print {
  .topbar, .footer, .quickdock, .read-progress, .search, .toc { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }
  .article-wrap { display: block; padding: 0; }
  .article { max-width: none; }
  a { color: black; }
  .article a:not(.btn) { border-bottom: none; text-decoration: underline; }
}


/* §18 DARK MODE ---------------------------------------------------- */
html[data-theme="dark"] body,
body.theme-dark {
  background: #0a0c10;
  color: #e8e6df;
}
html[data-theme="dark"] .topbar,
body.theme-dark .topbar {
  background: rgba(10,12,16,.85);
  border-bottom-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .logo,
body.theme-dark .logo {
  color: #fafaf7;
}
html[data-theme="dark"] .logo:before,
body.theme-dark .logo:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafaf7' stroke-width='1.4'><path d='M12 2 L21 6.5 L21 17.5 L12 22 L3 17.5 L3 6.5 Z'/><path d='M12 2 L12 22 M3 6.5 L21 17.5 M21 6.5 L3 17.5' opacity='.4'/></svg>");
}
html[data-theme="dark"] .navlinks a,
body.theme-dark .navlinks a { color: #e8e6df; }
html[data-theme="dark"] .navlinks a:hover,
body.theme-dark .navlinks a:hover { background: #15191f; color: #fafaf7; }
html[data-theme="dark"] .search input,
body.theme-dark .search input { background: #15191f; border-color: #2a2f38; color: #fafaf7; }

html[data-theme="dark"] .article h1,
html[data-theme="dark"] .article h2,
html[data-theme="dark"] .article h3,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .route-card strong,
html[data-theme="dark"] .toc strong,
body.theme-dark .article h1,
body.theme-dark .article h2,
body.theme-dark .article h3,
body.theme-dark .card h3,
body.theme-dark .route-card strong,
body.theme-dark .toc strong { color: #fafaf7; }
html[data-theme="dark"] .article p,
html[data-theme="dark"] .article li,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .lede,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .route-card span,
html[data-theme="dark"] .decision-card p,
body.theme-dark .article p,
body.theme-dark .article li,
body.theme-dark .lead,
body.theme-dark .lede,
body.theme-dark .card p { color: #c4c2bb; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .route-card,
html[data-theme="dark"] .route-plan,
html[data-theme="dark"] .decision-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .action-panel,
html[data-theme="dark"] .tablewrap,
body.theme-dark .card,
body.theme-dark .route-card,
body.theme-dark .route-plan,
body.theme-dark .decision-card,
body.theme-dark .faq-item { background: #15191f; border-color: #2a2f38; }

html[data-theme="dark"] th,
body.theme-dark th { background: #1a1d24; color: #c4c2bb; border-bottom-color: #2a2f38; }
html[data-theme="dark"] td,
body.theme-dark td { border-bottom-color: #2a2f38; color: #c4c2bb; }

html[data-theme="dark"] .toc a,
body.theme-dark .toc a { border-left-color: #2a2f38; color: #9a9da4; }
html[data-theme="dark"] .toc a.active,
body.theme-dark .toc a.active { color: #fafaf7; border-left-color: var(--amber); }

html[data-theme="dark"] .related a,
html[data-theme="dark"] .pillnav a,
body.theme-dark .related a,
body.theme-dark .pillnav a { background: #15191f; border-color: #2a2f38; color: #e8e6df; }

/* Chapter list cards (Índice técnico, Entradas principales, etc) in dark mode */
/* Higher specificity to override .article a:not(.btn) rule below */
html[data-theme="dark"] .chapter-list a:not(.btn),
body.theme-dark .chapter-list a:not(.btn) {
  background: #15191f;
  border-color: #2a2f38;
  color: #e8e6df;
  border-bottom-color: #2a2f38;
}
html[data-theme="dark"] .chapter-list a:not(.btn):hover,
body.theme-dark .chapter-list a:not(.btn):hover {
  background: #1a1d24;
  border-color: var(--amber);
}
html[data-theme="dark"] .chapter-list a:not(.btn) b,
body.theme-dark .chapter-list a:not(.btn) b { color: #fafaf7; }
html[data-theme="dark"] .chapter-list a:not(.btn) span,
body.theme-dark .chapter-list a:not(.btn) span { color: #9a9da4; }

/* Long index (lists of materials) in dark mode */
html[data-theme="dark"] .long-index a:not(.btn),
body.theme-dark .long-index a:not(.btn) {
  color: #e8e6df;
  border-bottom-color: #2a2f38;
}
html[data-theme="dark"] .long-index a:not(.btn):hover,
body.theme-dark .long-index a:not(.btn):hover { border-bottom-color: var(--amber); color: #fafaf7; }

html[data-theme="dark"] .tag,
body.theme-dark .tag { background: #15191f; border-color: #2a2f38; color: #c4c2bb; }

html[data-theme="dark"] .callout,
html[data-theme="dark"] .deep-note,
html[data-theme="dark"] .criteria .box,
body.theme-dark .callout,
body.theme-dark .deep-note { background: #15191f; }

html[data-theme="dark"] .article a:not(.btn),
body.theme-dark .article a:not(.btn) { color: #fafaf7; border-bottom-color: #2a2f38; }

html[data-theme="dark"] .crumb,
body.theme-dark .crumb { color: #9a9da4; }
html[data-theme="dark"] .crumb a,
body.theme-dark .crumb a { color: #9a9da4; }
html[data-theme="dark"] .crumb a:hover,
body.theme-dark .crumb a:hover { color: #fafaf7; }

html[data-theme="dark"] .rank,
body.theme-dark .rank { background: #15191f; border-color: #2a2f38; }
html[data-theme="dark"] .ranknum,
body.theme-dark .ranknum { background: #fafaf7; color: #0a0c10; }

/* Editorial dark moments stay dark in BOTH themes */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .section.dark,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .diagram:not(.light) {
  background: #0a0c10;
  color: #fafaf7;
}

/* Active nav state in dark: subtle background, no harsh white */
html[data-theme="dark"] .navlinks a.is-active,
body.theme-dark .navlinks a.is-active {
  background: transparent;
  color: #fafaf7;
}
html[data-theme="dark"] .navlinks a.is-active:after,
body.theme-dark .navlinks a.is-active:after {
  background: var(--amber);
}
html[data-theme="dark"] .navlinks a:hover,
body.theme-dark .navlinks a:hover {
  background: rgba(255,255,255,0.04);
  color: #fafaf7;
}

/* IMPRIMIR + print-link must remain visible: explicit colors not affected by inversion */
html[data-theme="dark"] .print-link,
body.theme-dark .print-link {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: #fafaf7;
}
html[data-theme="dark"] .print-link:hover,
body.theme-dark .print-link:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* reading-meta chips in dark */
html[data-theme="dark"] .reading-meta span,
body.theme-dark .reading-meta span {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
  color: rgba(250,250,247,0.7);
}

/* .diagram with native dark SVG inside dark mode: don't double-frame it */
html[data-theme="dark"] .diagram,
body.theme-dark .diagram {
  background: transparent;
  padding: 0;
}
html[data-theme="dark"] .diagram.light,
body.theme-dark .diagram.light {
  background: var(--paper-2);
}

/* Section index pages: h1/section in dark mode */
html[data-theme="dark"] .section h1,
html[data-theme="dark"] .section h2,
html[data-theme="dark"] .section h3,
body.theme-dark .section h1,
body.theme-dark .section h2,
body.theme-dark .section h3 {
  color: #fafaf7;
}


/* §15b TECHNICAL FIGURES (visual library) -------------------------- */
.technical-figure {
  margin: var(--s-6) 0;
  width: 100%;
}
.technical-figure img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 1200 / 670;
  object-fit: cover;
  border-radius: var(--r-lg, 14px);
  background: var(--paper-2);
  box-shadow: 0 18px 45px rgba(10, 12, 16, 0.14);
  border: 1px solid var(--line);
}
.technical-figure figcaption {
  display: block;
  max-width: 1200px;
  margin: var(--s-3) auto 0;
  font-family: var(--font-sans, inherit);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-3, #4a5360);
  font-style: normal;
  letter-spacing: 0.005em;
}
.technical-figure--hero {
  margin-top: var(--s-5);
  margin-bottom: var(--s-7);
}
.technical-figure--inline {
  margin: var(--s-5) 0;
}
.technical-figure--inline img {
  border-radius: var(--r-md, 10px);
}
.technical-figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-6) 0;
}
.technical-figure-pair .technical-figure { margin: 0; }
html[data-theme="dark"] .technical-figure img,
body.theme-dark .technical-figure img {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .technical-figure figcaption,
body.theme-dark .technical-figure figcaption {
  color: rgba(255, 255, 255, 0.65);
}

/* Technical-figure responsive overrides */
@media (max-width: 820px) {
  .technical-figure { margin: var(--s-5) 0; }
  .technical-figure img { border-radius: var(--r-md, 10px); }
  .technical-figure figcaption { font-size: 0.88rem; padding: 0 var(--s-1); }
  .technical-figure-pair { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 480px) {
  .technical-figure { margin: var(--s-4) 0; }
  .technical-figure figcaption { font-size: 0.85rem; line-height: 1.45; }
}
@media print {
  .technical-figure img { box-shadow: none; border: 1px solid #ccc; }
  .technical-figure figcaption { color: #444; font-size: 9.5pt; }
}



/* §19 ENCICLOPEDIA ------------------------------------------------------- */
.ency-entry { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ency-entry h2 { margin-top: var(--s-6); }
.ency-entry h2:first-child { margin-top: 0; }
.ency-entry p + p { margin-top: var(--s-3); }
.ency-entry .related { margin-top: var(--s-5); }
@media (max-width: 768px) { .ency-entry { margin-top: var(--s-6); } }


/* Enciclopedia total: bloques de referencia, diagramas y tablas largas */
.article .ency-section { margin: 2.2rem 0; }
.article .ency-section h2 { margin-top: 0; }
/* Cuando .ency-section va directo bajo <main> o <body> (sin .article), centrar igual que .section */
main > .ency-section,
body > .ency-section { max-width: var(--wrap); margin: 2.2rem auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main > .ency-section h2,
body > .ency-section h2 { margin-top: 0; }
/* También .ency-entry directamente bajo body */
body > .ency-entry { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.article .ency-note { border-left: 4px solid rgba(30,64,175,.35); background: rgba(59,130,246,.07); padding: 1rem 1.1rem; border-radius: 14px; margin: 1.2rem 0; }
.article .term-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.article .term-card { border:1px solid rgba(148,163,184,.25); border-radius:16px; padding:1rem; background:rgba(255,255,255,.7); }
.article .diagram-figure img { background:#fff; object-fit:contain; }
.article .ency-columns { columns:2; column-gap:2rem; }
.article .ency-columns p { break-inside:avoid; }
.article .mega-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.article .mega-index a { display:block; border:1px solid rgba(148,163,184,.28); border-radius:16px; padding:1rem; text-decoration:none; background:rgba(255,255,255,.75); }
.article .mega-index strong { display:block; color:var(--ink); margin-bottom:.35rem; }
.article .mega-index span { color:var(--muted); font-size:.92rem; line-height:1.35; }
.article .ref-small { font-size:.9rem; color:var(--muted); }
@media (max-width: 860px){ .article .term-grid,.article .mega-index{grid-template-columns:1fr}.article .ency-columns{columns:1} }


/* §19 LINK-GRID / CARDLINK ------------------------------------------ */
/* Used in "Véase también" sections to render related-entry cards. */
.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
}
.link-grid .cardlink {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 12px 14px;
  background: var(--paper);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.link-grid .cardlink:hover {
  border-color: var(--amber);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(10,12,16,.06);
}
.link-grid .cardlink strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.link-grid .cardlink span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}
@media (max-width: 820px) {
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
}
@media (max-width: 480px) {
  .link-grid { grid-template-columns: 1fr; }
}
/* Dark mode */
html[data-theme="dark"] .link-grid .cardlink,
body.theme-dark .link-grid .cardlink {
  background: #15191f;
  border-color: #2a2f38;
}
html[data-theme="dark"] .link-grid .cardlink strong,
body.theme-dark .link-grid .cardlink strong { color: #fafaf7; }
html[data-theme="dark"] .link-grid .cardlink span,
body.theme-dark .link-grid .cardlink span { color: rgba(250,250,247,.7); }