/*
 * Hoja compartida por /privacidad y /eliminar-cuenta.
 *
 * El landing lleva todo su CSS embebido porque es una sola página y así se
 * sirve en un viaje. Estas dos son documentos de texto, se leen una vez y
 * conviene que se vean iguales entre sí, así que acá sí paga un archivo aparte.
 * Los tokens son los mismos que en index.html; si cambian allá, cambian acá.
 */

:root {
  --p600: #0a8560;
  --p700: #08694d;
  --ink900: #0f1b2a;
  --ink950: #0a1420;
  --n0: #ffffff;
  --n50: #f6f8fa;
  --n100: #edf0f3;
  --n200: #dee3e8;
  --n500: #6b7684;
  --n600: #4d5866;
  --n900: #16202a;
  --err: #d92d20;
  --err-bg: #fef0ef;
  --warn: #c0710a;
  --warn-bg: #fff8eb;
  --r-md: 8px;
  --r-lg: 12px;
  --f-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body: Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--n50);
  color: var(--n900);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--ink950);
  padding: 18px 0;
}

.topbar a {
  color: #fff;
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

main.wrap {
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: var(--r-lg);
  padding: 40px;
  margin-block: 40px;
}

@media (max-width: 620px) {
  main.wrap {
    padding: 24px;
    border-radius: 0;
    border-inline: 0;
    margin-block: 0;
  }
}

h1,
h2,
h3 {
  font-family: var(--f-display);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

h1 {
  font-size: 32px;
  font-weight: 800;
}

h2 {
  font-size: 21px;
  font-weight: 700;
  margin-top: 36px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin-top: 24px;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin-bottom: 0.4em;
}

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

.updated {
  color: var(--n500);
  font-size: 14px;
  margin-top: 6px;
}

.lede {
  font-size: 17px;
  color: var(--n600);
  margin-top: 18px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--n200);
  vertical-align: top;
}

th {
  background: var(--n50);
  font-weight: 600;
}

.note {
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 1.5em;
  font-size: 15px;
}

.note > :last-child {
  margin-bottom: 0;
}

.note-warn {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
}

.note-err {
  background: var(--err-bg);
  border-left: 3px solid var(--err);
}

.note-flat {
  background: var(--n50);
  border-left: 3px solid var(--n200);
}

.steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  margin-bottom: 18px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--p600);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}

footer.wrap {
  color: var(--n500);
  font-size: 14px;
  padding-block: 28px 48px;
}

footer.wrap a {
  color: var(--n500);
}