/* bacul.es: los mismos colores y letras que la app. Nada de fondos crema. */
:root {
  --noche: #0b2a5b;
  --hondo: #1f4fa8;
  --sol: #ffc93c;
  --cielo: #8ec9ff;
  --bg: #ffffff;
  --ink: #0d1e3a;
  --muted: #586a85;
  --line: rgba(13, 30, 58, 0.12);
  --soft: #ebf3ff;
  --link: #1f4fa8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #06122a;
    --ink: #eef5ff;
    --muted: #a3b6d3;
    --line: rgba(238, 245, 255, 0.14);
    --soft: #0f2449;
    --link: #8ec9ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 'Atkinson Hyperlegible', -apple-system, system-ui, sans-serif;
}
a { color: var(--link); }
h1, h2, h3, .marca { font-family: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif; text-wrap: balance; }

.cabecera { background: var(--noche); color: #fff; padding: 18px 20px; }
.cabecera nav { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cabecera .marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: .02em; margin-right: auto; }
.cabecera .marca svg { height: 30px; width: auto; display: block; }
.cabecera nav a:not(.marca) { color: #b3cdf0; text-decoration: none; font-size: 15px; }
.cabecera nav a[aria-current] { color: #fff; }

main { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
main.texto h1 { font-size: 40px; line-height: 1.1; margin: 0 0 6px; }
main.texto .fecha { color: var(--muted); margin: 0 0 28px; font-size: 15px; }
main.texto h2 { font-size: 24px; margin: 36px 0 8px; }
main.texto p, main.texto li { max-width: 66ch; }
main.texto li + li { margin-top: 6px; }
.aviso { background: var(--soft); border-left: 4px solid var(--sol); border-radius: 10px; padding: 14px 18px; margin: 20px 0; }
.tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 700; }

.portada { background: var(--noche); color: #fff; }
.portada main { padding-top: 56px; padding-bottom: 72px; }
.portada h1 { font-size: clamp(44px, 9vw, 76px); line-height: 1; margin: 0 0 18px; }
.portada h1 span { color: var(--sol); }
.portada p.lead { font-size: 20px; color: #dbe7f7; max-width: 34ch; margin: 0 0 30px; }
.portada .puntos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 0 34px; padding: 0; list-style: none; }
.portada .puntos li { background: rgba(255, 255, 255, .08); border-radius: 16px; padding: 16px 18px; color: #dbe7f7; }
.portada .puntos b { display: block; color: #fff; font-size: 17px; margin-bottom: 2px; }
.portada .boton { display: inline-block; background: var(--sol); color: var(--noche); font-weight: 700; padding: 14px 24px; border-radius: 999px; text-decoration: none; }
.portada .ayuda { margin-top: 40px; color: #b3cdf0; font-size: 15px; }
.portada .ayuda a { color: #fff; }

footer { border-top: 1px solid var(--line); }
footer div { max-width: 760px; margin: 0 auto; padding: 20px; display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14.5px; }
footer a { color: var(--muted); }
.portada footer { border-color: rgba(255, 255, 255, .14); }
.portada footer div, .portada footer a { color: #b3cdf0; }