:root {
  --fondo: #0f1115;
  --texto: #e8e8ea;
  --tenue: #9a9aa4;
  --acento: #6ee7b7;
  --borde: #23262e;
}

* { box-sizing: border-box; }

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

.cabecera, main, .pie { max-width: 46rem; margin: 0 auto; }

.marca a { color: var(--tenue); text-decoration: none; font-size: .9rem; }
.marca a:hover { color: var(--acento); }

h1 { font-size: 2rem; margin: .5rem 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

.subtitulo { color: var(--tenue); margin: 0 0 2rem; }

.seccion {
  border: 1px solid var(--borde);
  border-radius: .75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.recursos, .clientes { list-style: none; margin: 0; padding: 0; }

.recurso, .clientes li {
  padding: .6rem 0;
  border-top: 1px solid var(--borde);
}
.recurso:first-child, .clientes li:first-child { border-top: 0; }

a { color: var(--acento); }

.tipo {
  margin-left: .5rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tenue);
}

.descripcion { color: var(--tenue); font-size: .9rem; margin: .25rem 0 0; }
.vacia { color: var(--tenue); font-style: italic; }

.pie { margin-top: 3rem; color: var(--tenue); font-size: .85rem; }

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #ffffff; --texto: #16181d; --tenue: #5c6068;
    --acento: #0d7a5f; --borde: #e3e5ea;
  }
}