/* Landing de INDEC Engine, un proyecto de Sudlar.
   Solo tokens de tokens.css (--color-*, --radius-*, --elevation-*, --space-*, --fs-*, --fw-display, --duration-*).
   Minimalismo de producto: lienzo casi blanco, tarjetas de relleno cálido sin borde, botón primario negro en píldora,
   titulares ligeros, mucho aire entre secciones. El color vive en los datos (azul austral solo para enlaces y gráficos).
   Temas claro y oscuro por tokens; alto contraste con forced-colors; movimiento reducido sin desplazamientos. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root { --wrap: var(--maxw); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { margin: 0; background: var(--color-background); color: var(--color-on-surface); font: 400 var(--fs-0)/var(--lh-body) var(--font-body); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; }
h1, h2 { font-weight: var(--fw-display); letter-spacing: var(--ls-display); text-wrap: balance; }
h3 { font-weight: 500; letter-spacing: var(--ls-title); }
p { margin: 0; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }
code { font: 400 .875em var(--font-mono); background: var(--color-surface-container); color: var(--color-on-surface); padding: 1px 6px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-2); top: var(--space-2); transform: translateY(-200%); background: var(--color-action); color: var(--color-on-action); padding: 10px var(--space-4); border-radius: var(--radius-full); z-index: 100; font-weight: 500; transition: transform var(--duration-fast) var(--ease-standard); }
.skip:focus { transform: none; color: var(--color-on-action); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
[hidden] { display: none !important; }

/* Logo: dos imágenes; la variante oscura solo en tema oscuro. Nunca por debajo de 120 px de ancho (marca). */
html img.logo-dark { display: none; }
:root[data-theme="dark"] img.logo-light { display: none; }
:root[data-theme="dark"] img.logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo-light { display: none; }
  :root:not([data-theme="light"]) img.logo-dark { display: block; }
}

/* ---------- Botones: píldora; el primario es negro (blanco en oscuro) ---------- */
.btn { font: 500 var(--fs-sm)/1.2 var(--font-body); border: 1px solid transparent; background: var(--color-surface-container); color: var(--color-on-surface); padding: 10px var(--space-6); min-height: 40px; border-radius: var(--radius-full); cursor: pointer; text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: center; justify-content: center; text-align: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.btn:hover { color: var(--color-on-surface); background: var(--color-outline-variant); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--color-action); color: var(--color-on-action); }
.btn.primary:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.btn.quiet { background: transparent; color: var(--color-on-surface); padding-inline: var(--space-4); }
.btn.quiet:hover { background: var(--color-surface-container); }
.btn.lg { font-size: var(--fs-0); padding: 14px 28px; min-height: 52px; }
.btn.lg.quiet { padding-inline: var(--space-6); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--color-on-surface); cursor: pointer; display: inline-grid; place-items: center; transition: background-color var(--duration-fast) var(--ease-standard); }
.icon-btn:hover { background: var(--color-surface-container); }
.icon-btn .ico-moon { display: block; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-outline-variant); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--color-on-surface); min-height: 44px; }
.brand:hover { color: var(--color-on-surface); }
.brand img, .foot-brand img { height: 27px; width: auto; display: block; }
.brand .sep { width: 1px; height: 22px; background: var(--color-outline-variant); }
.brand .prod { font: 500 var(--fs-1)/1 var(--font-display); white-space: nowrap; letter-spacing: var(--ls-title); }
.nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: var(--space-8); }
.nav a { text-decoration: none; color: var(--color-on-surface-variant); padding: 8px var(--space-4); font: 500 var(--fs-sm)/1.2 var(--font-body); border-radius: var(--radius-full); transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.nav a:hover { color: var(--color-on-surface); background: var(--color-surface-container); }
.spacer { flex: 1; }
@media (max-width: 1000px) { .nav { order: 5; width: 100%; margin: 0 0 0 calc(-1 * var(--space-4)); } }
@media (max-width: 620px) {
  .brand { gap: 10px; }
  .brand img { height: 22px; }
  .brand .prod { font-size: var(--fs-0); }
  .cta-top { display: none; }
  .top { position: static; }
  html { scroll-padding-top: 16px; }
  .nav a { padding-inline: var(--space-3); }
}
@media (max-width: 400px) { .brand .prod { font-size: .875rem; } .brand img { height: 21px; } .brand .sep { height: 18px; } .brand { gap: var(--space-2); } }

/* ---------- Tipografía de sección ---------- */
.eyebrow { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--color-on-surface-variant); margin-bottom: var(--space-6); }
h2 { font-size: var(--fs-display); max-width: 20ch; }
.lead { font-size: var(--fs-1); line-height: 1.45; color: var(--color-on-surface-variant); max-width: 52ch; margin-top: var(--space-4); }
.fine { font-size: var(--fs-sm); color: var(--color-on-surface-variant); max-width: 70ch; }
.sec { padding-block: var(--section-gap); }
.sec.alt { background: var(--color-surface-container); }
.head { margin-bottom: clamp(32px, 5vw, 56px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.tag { display: inline-block; font: 500 var(--fs-xs)/1.4 var(--font-body); color: var(--color-on-surface); background: var(--color-background); border-radius: var(--radius-full); padding: 3px var(--space-3); white-space: nowrap; }
.sec:not(.alt) .tag { background: var(--color-surface-container); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin-top: var(--space-6); font-weight: 500; }
.links a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- Portada ---------- */
.hero { padding: clamp(56px, 9vw, 120px) 0 var(--section-gap); text-align: center; }
.hero .eyebrow { margin-bottom: var(--space-6); }
.hero h1 { font-size: var(--fs-hero); max-width: 16ch; margin-inline: auto; }
.hero .lede { font-size: var(--fs-1); line-height: 1.45; color: var(--color-on-surface-variant); max-width: 48ch; margin: var(--space-6) auto 0; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero .cta-row { justify-content: center; }
.hero-ex { max-width: 60ch; margin: var(--space-8) auto 0; color: var(--color-on-surface-variant); font-size: var(--fs-0); }
.hero-ex b { display: block; font: 500 var(--fs-xs)/1.4 var(--font-body); color: var(--color-on-surface-muted); margin-bottom: var(--space-1); }
.direct { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.direct span { margin-right: var(--space-2); }
.direct a { text-decoration: none; color: var(--color-on-surface); padding: 6px var(--space-4); border-radius: var(--radius-full); background: var(--color-surface-container); min-height: 32px; display: inline-flex; align-items: center; }
.direct a:hover { background: var(--color-outline-variant); color: var(--color-on-surface); }

/* Pieza del mes: diferencias con su intervalo de confianza (HTML y CSS, sin texto dentro de SVG) */
.find { margin: clamp(48px, 7vw, 80px) 0 0; text-align: left; background: var(--color-surface-container); border-radius: var(--radius-lg); padding: clamp(24px, 4.5vw, 64px); }
.kicker { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--color-on-surface-variant); }
.find-title { font-size: clamp(var(--fs-2), 3.4vw, var(--fs-4)); line-height: 1.12; margin-top: var(--space-3); max-width: 26ch; }
.find-sub { color: var(--color-on-surface-variant); margin-top: var(--space-4); max-width: 70ch; }
.find-body { margin-top: var(--space-8); }
.find-empty { border: 1px dashed var(--color-outline); border-radius: var(--radius-md); padding: var(--space-6); color: var(--color-on-surface-variant); }
.find-foot { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-outline-variant); display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
#find-note:empty { display: none; }
.find-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); font-weight: 500; margin-top: var(--space-2); }
.find-links a { display: inline-flex; align-items: center; min-height: 24px; }

.fp { list-style: none; margin: 0; padding: 0; }
.fp-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 13rem); gap: var(--space-2) var(--space-8); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--color-outline-variant); }
.fp-row:first-child { border-top: 0; }
.fp-k b { display: block; font-weight: 500; }
.fp-k span { display: block; font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.fp-plot { position: relative; height: 36px; }
.fp-v { font-size: var(--fs-sm); color: var(--color-on-surface-variant); display: grid; gap: 2px; justify-items: start; }
.fp-v b { font: 500 var(--fs-1)/1.1 var(--font-display); color: var(--color-on-surface); }
.fp-v .tag { margin-top: 4px; }
.fp-v .tag.sig { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.fp-grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--color-outline-variant); }
.fp-zero { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px solid var(--color-on-surface); margin-left: -1px; }
.fp-ci { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: var(--color-primary); border-radius: var(--radius-full); }
.fp-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--radius-full); background: var(--color-surface-container); border: 2px solid var(--color-primary); }
.fp-dot.sig { background: var(--color-primary); }
.fp-axis { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 13rem); gap: 0 var(--space-8); border-top: 1px solid var(--color-outline-variant); padding-top: var(--space-2); }
.fp-ticks { grid-column: 2; position: relative; height: 1.5em; font-size: var(--fs-xs); color: var(--color-on-surface-variant); }
.fp-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.fp-axis-t { grid-column: 2; font-size: var(--fs-xs); color: var(--color-on-surface-variant); margin-top: var(--space-1); }
.fp-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.fp-key span { display: inline-flex; align-items: center; gap: var(--space-2); }
.fp-key i { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: var(--radius-full); border: 2px solid var(--color-primary); background: var(--color-surface-container); flex: none; }
.fp-key i.sig { background: var(--color-primary); }
@media (max-width: 760px) {
  .fp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-k { grid-column: 1; }
  .fp-v { grid-column: 2; grid-row: 1; justify-items: end; text-align: right; }
  .fp-plot { grid-column: 1 / -1; }
  .fp-axis { grid-template-columns: minmax(0, 1fr); }
  .fp-ticks, .fp-axis-t { grid-column: 1; }
}
@media (max-width: 420px) {
  .fp-row { grid-template-columns: minmax(0, 1fr); }
  .fp-v { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; }
}

/* ---------- Alcance (cifras leídas de los datos) ---------- */
.scope { padding: 0 0 var(--section-gap); }
.figs { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); }
.figs dt { font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.figs dd { margin: 0; font: var(--fw-display) clamp(var(--fs-3), 4vw, var(--fs-5))/1 var(--font-display); letter-spacing: var(--ls-display); }
.scope .fine { margin-top: var(--space-6); }
@media (max-width: 900px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Qué hay (bento) ---------- */
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tile { position: relative; background: var(--color-surface-container); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); min-height: 220px; display: flex; flex-direction: column; gap: var(--space-3); transition: background-color var(--duration-base) var(--ease-standard); }
.tile:hover, .tile:focus-within { background: var(--color-outline-variant); }
.tile.big { grid-column: span 2; }
.tile.wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-8); align-items: center; }
.tile.wide h3 { grid-row: 1 / span 2; }
.tile.wide .live { margin-top: 0; padding-top: 0; }
.tile h3 { font-size: var(--fs-2); }
.tile h3 a { color: var(--color-on-surface); text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.tile > p { color: var(--color-on-surface-variant); max-width: 40ch; }
.tile .live { margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-on-surface); font-weight: 500; }
.tile .live:empty { display: none; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.big { grid-column: 1 / -1; } }
@media (max-width: 600px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile, .tile.wide { min-height: 0; display: flex; } }

/* ---------- Por qué ---------- */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) clamp(24px, 4vw, 56px); }
.why li { border-top: 1px solid var(--color-on-surface); padding-top: var(--space-6); }
.why h3 { font-size: var(--fs-1); line-height: 1.25; }
.why p { color: var(--color-on-surface-variant); margin-top: var(--space-3); max-width: 38ch; }
@media (max-width: 800px) { .why { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Para quién ---------- */
.who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.who a { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface-container); color: var(--color-on-surface); text-decoration: none; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); min-height: 108px; justify-content: center; transition: background-color var(--duration-base) var(--ease-standard); }
.who a:hover { background: var(--color-outline-variant); color: var(--color-on-surface); }
.who b { font: 500 var(--fs-1)/1.2 var(--font-display); letter-spacing: var(--ls-title); }
.who span { color: var(--color-on-surface-variant); font-size: var(--fs-sm); }
@media (max-width: 900px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .who { grid-template-columns: minmax(0, 1fr); } .who a { min-height: 0; padding: var(--space-4) var(--space-6); } }

/* ---------- Qué tan firme es ---------- */
.levels { margin: 0 0 var(--space-12); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.levels > div { display: grid; gap: var(--space-2); align-content: start; }
.levels dd { margin: 0; color: var(--color-on-surface-variant); font-size: var(--fs-sm); }
.levels dt { justify-self: start; }
.hon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12) clamp(24px, 6vw, 96px); }
.hon-block h3 { font-size: var(--fs-2); line-height: 1.2; margin-bottom: var(--space-6); }
.checks, .limits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.checks li, .limits li { padding-left: var(--space-6); position: relative; color: var(--color-on-surface-variant); max-width: 52ch; }
.checks li::before, .limits li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--color-on-surface); }
.checks sup { font-size: .7em; line-height: 0; }
.checks li b, .limits li b { color: var(--color-on-surface); font-weight: 500; }
@media (max-width: 900px) { .hon { grid-template-columns: minmax(0, 1fr); } .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Datos y API ---------- */
.dev-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.code-col { display: grid; gap: var(--space-4); min-width: 0; }
.code { margin: 0; background: var(--color-surface-container); border-radius: var(--radius-md); min-width: 0; overflow: hidden; }
.sec.alt .code { background: var(--color-background); }
.code figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); font-size: var(--fs-sm); color: var(--color-on-surface-variant); font-weight: 500; }
.copy { font: 500 var(--fs-sm)/1 var(--font-body); color: var(--color-on-surface); background: var(--color-background); border: 0; border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); min-height: 32px; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.sec.alt .copy { background: var(--color-surface-container); }
.copy:hover { background: var(--color-outline-variant); }
.code pre { margin: 0; padding: var(--space-2) var(--space-6) var(--space-6); font: 400 .875rem/1.65 var(--font-mono); color: var(--color-on-surface); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.code pre code { background: none; padding: 0; font: inherit; }
.code .c { color: var(--color-on-surface-variant); }
.cite pre { font-family: var(--font-body); font-size: var(--fs-0); line-height: 1.5; }
.cli-col h3 { font-size: var(--fs-2); margin-bottom: var(--space-4); }
.cli { margin: 0; }
.cli > div { padding: var(--space-4) 0; border-top: 1px solid var(--color-outline-variant); }
.cli > div:last-child { border-bottom: 1px solid var(--color-outline-variant); }
.cli dt code { font-size: .875rem; background: transparent; padding: 0; }
.cli dd { margin: var(--space-1) 0 0; color: var(--color-on-surface-variant); font-size: var(--fs-sm); }
@media (max-width: 960px) { .dev-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cómo citar ---------- */
.lic { margin: var(--space-8) 0 0; }
.lic > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-outline-variant); }
.lic dt { font-weight: 500; }
.lic dd { margin: 0; color: var(--color-on-surface-variant); }
@media (max-width: 560px) { .lic > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cierre: panel invertido (negro en claro, claro en oscuro) ---------- */
.close { padding-block: 0 var(--section-gap); }
.panel { background: var(--color-action); color: var(--color-on-action); border-radius: var(--radius-lg); padding: clamp(40px, 8vw, 96px) clamp(24px, 6vw, 80px); text-align: center; }
.panel :focus-visible { outline-color: var(--color-on-action); }
.panel h2 { font-size: var(--fs-display); margin-inline: auto; max-width: 14ch; }
.panel .lead { color: var(--color-on-action); margin-inline: auto; max-width: 44ch; }
.panel .cta-row { justify-content: center; }
.panel .btn { background: transparent; color: var(--color-on-action); }
.panel .btn:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.panel .btn.primary { background: var(--color-on-action); color: var(--color-action); }
.panel .btn.primary:hover { background: var(--color-outline-variant); color: var(--color-ink); }

/* ---------- Pie ---------- */
.foot { padding: var(--space-12) 0 var(--space-16); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) clamp(24px, 6vw, 96px); }
.foot-brand img { height: 28px; width: auto; }
.foot-brand p { margin-top: var(--space-3); color: var(--color-on-surface-variant); }
.foot-brand p b { color: var(--color-on-surface); font-weight: 500; }
.foot-links { display: grid; gap: var(--space-1); justify-items: start; align-content: start; }
.foot-links a { color: var(--color-on-surface); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.foot-links a:hover { color: var(--color-primary); }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid var(--color-outline-variant); padding-top: var(--space-6); font-size: var(--fs-sm); color: var(--color-on-surface-variant); max-width: 80ch; }
@media (max-width: 640px) { .foot-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Puntero grueso: objetivos de 44 px ---------- */
@media (pointer: coarse) {
  .btn, .copy, .nav a, .links a, .find-links a, .foot-links a, .brand, .direct a, .icon-btn { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .nav a, .copy, .direct a { display: inline-flex; align-items: center; }
}

/* ---------- Movimiento reducido: sin desplazamientos ni escalas ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
  .skip, .btn, .nav a, .tile, .who a, .copy, .icon-btn { transition-duration: 0ms; }
}

/* ---------- Alto contraste (forced-colors) ---------- */
@media (forced-colors: active) {
  .btn, .copy, .tile, .who a, .find, .code, .tag, .panel, .direct a { border: 1px solid CanvasText; }
  .btn.primary { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .fp-ci, .fp-zero, .fp-dot, .fp-dot.sig, .fp-key i { forced-color-adjust: none; }
  .fp-ci { background: CanvasText; }
  .fp-zero { border-left-color: CanvasText; }
  .fp-dot, .fp-key i { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .fp-dot.sig, .fp-key i.sig { background: CanvasText; }
  .fp-grid { border-left-color: GrayText; }
  .panel { forced-color-adjust: auto; }
  :focus-visible { outline: 2px solid Highlight; }
}

@media print {
  .top, .btn, .copy, .skip, .direct { display: none; }
  .sec.alt, .find, .tile, .who a { background: none; }
  .panel { background: none; color: inherit; }
}

/* Lista de archivos descargables (rutas relativas del sitio) */
.files-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.files-list a { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-container); color: var(--color-on-surface); text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard); }
.files-list a:hover { background: var(--color-container-hover); }
.files-list code { background: none; padding: 0; font: 500 var(--fs-sm)/1.3 var(--font-mono); overflow-wrap: anywhere; }
.files-list span { font-size: var(--fs-sm); color: var(--color-on-surface-variant); }

/* Navegación de la presentación en móvil: dos filas (marca y acciones arriba, enlaces debajo) */
@media (max-width: 720px) {
  .top-in { flex-wrap: wrap; row-gap: 0; }
  .top-in .nav { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-1); padding-bottom: var(--space-2); }
  .top-in .nav a { white-space: nowrap; }
}