/* Tablero Móvil — base compartida (index + legales) */
:root{
  color-scheme: dark;
  --bg:#0b1220;        /* superficie */
  --bg2:#111a2e;       /* superficie 2: tarjetas */
  --line:#223047;      /* borde 1 px */
  --ink:#e5e7eb;       /* texto */
  --mute:#a3aec2;      /* atenuado: 7.7:1 sobre --bg2, 9.6:1 sobre --bg */
  --gold:#e2b857;      /* acento: valores clave, indicadores, enlaces */
  --gold-ink:#0b1220;  /* texto sobre dorado */

  --sans:"Space Grotesk", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* escala tipográfica */
  --fs-0:13px;
  --fs-1:15px;
  --fs-2:clamp(16px, 0.4vw + 14.5px, 17px);
  --fs-3:20px;
  --fs-4:clamp(24px, 1.2vw + 18px, 32px);
  --fs-5:clamp(34px, 5vw, 64px);
  --fs-kpi:clamp(36px, 4.4vw, 56px);

  /* ritmo de 8 px */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;

  --r:3px;
  --measure:68ch;
  --container:1200px;
  --lh:1.65;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--fs-2);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--gold-ink)}

h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.15;margin:0;letter-spacing:-0.01em}
p{margin:0 0 var(--s-2)}
p,li,dd{max-width:var(--measure)}
ul,ol{margin:0 0 var(--s-2);padding-left:1.25em}
a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
code,kbd,.mono{font-family:var(--mono);font-weight:400}
strong{font-weight:700}
em{font-style:italic}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-4) 0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media (min-width:900px){.container{padding-inline:32px}}

/* etiquetas mono: "estado:" "fuente:" */
.lbl{font-family:var(--mono);font-weight:400;font-size:var(--fs-0);color:var(--mute);letter-spacing:0.02em}
.lbl b{font-weight:500;color:var(--ink)}
.num{font-variant-numeric:tabular-nums}

/* botones rectangulares */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:var(--r);
  font-family:var(--mono);font-weight:500;font-size:var(--fs-1);line-height:1;
  text-decoration:none;border:1px solid var(--gold);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-solid{background:var(--gold);color:var(--gold-ink)}
.btn-solid:hover{background:#efc96a;border-color:#efc96a}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* foco */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn:focus-visible{outline-offset:3px}

/* skip link */
.skip{position:absolute;left:16px;top:-200px;z-index:100;background:var(--gold);color:var(--gold-ink);padding:12px 16px;font-family:var(--mono);border-radius:var(--r);text-decoration:none}
.skip:focus{top:8px}

/* texto largo (legales, descargo) */
.prose{max-width:var(--measure)}
.prose p,.prose li{font-weight:500}
.prose h2{font-size:var(--fs-4);margin:var(--s-5) 0 var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line)}
.prose h3{font-size:var(--fs-3);margin:var(--s-4) 0 var(--s-1)}
.prose ul,.prose ol{margin-bottom:var(--s-3)}
.prose li{margin-bottom:6px}
.prose a{overflow-wrap:anywhere}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

@media print{
  body{background:#fff;color:#000}
  a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-family:var(--mono);font-size:11px}
  .skip,.btn{display:none !important}
}