/* Cáscara mínima. Los estilos definitivos vienen con las pantallas reales. */

:root {
  --fondo: #ffffff;
  --texto: #1a1a1a;
  --tenue: #4a4a4a;
  --acento: #1f3864;
  --borde: #d4d4d4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16181d;
    --texto: #ececec;
    --tenue: #b4b4b4;
    --acento: #9db8e8;
    --borde: #3a3d44;
  }
}

body {
  margin: 0;
  padding: 2rem 1.25rem;
  max-width: 46rem;
  margin-inline: auto;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1 { font-size: 1.75rem; margin: 0; }
h2 { font-size: 1.25rem; }

.subtitulo { color: var(--tenue); margin-top: 0.25rem; }

ul { padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

.boton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--acento);
  border-radius: 6px;
  background: transparent;
  color: var(--acento);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover { background: var(--acento); color: var(--fondo); }

/* El foco tiene que verse siempre: el tamizaje se opera enteramente con teclado. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}