/* Hoja común de las páginas legales de Salvá.
   Sin frameworks ni fuentes remotas: son tres páginas de texto que tienen que
   abrir rápido en un teléfono con mala señal, y que Google tiene que poder
   leer sin que nada se caiga. */
:root {
  color-scheme: light dark;
  --azul: #0d5eaf;
  --hoja: #d07a0e;
  --tinta: #16202c;
  --tinta-suave: #52616f;
  --fondo: #f7f8fa;
  --papel: #ffffff;
  --borde: #e3e7ec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --azul: #6fb0f5;
    --hoja: #f0a542;
    --tinta: #e8edf3;
    --tinta-suave: #9aa7b4;
    --fondo: #10151b;
    --papel: #171e26;
    --borde: #28323d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 16px 64px;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 720px; margin: 0 auto; }
header { max-width: 720px; margin: 0 auto; padding: 32px 0 8px; }
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px; color: var(--azul);
  text-decoration: none;
}
.marca svg { width: 28px; height: 28px; }
h1 { font-size: 28px; line-height: 1.25; margin: 24px 0 4px; }
h2 { font-size: 19px; margin: 32px 0 8px; }
.fecha { color: var(--tinta-suave); font-size: 14px; margin: 0 0 24px; }
.tarjeta {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 20px 22px; margin: 16px 0;
}
.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos li {
  counter-increment: paso; position: relative;
  padding: 0 0 0 42px; margin: 0 0 18px;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azul); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td {
  text-align: left; padding: 10px 8px;
  border-bottom: 1px solid var(--borde); vertical-align: top;
}
th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
     color: var(--tinta-suave); }
a { color: var(--azul); }
code {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 5px; padding: 1px 5px; font-size: 14px;
}
footer {
  max-width: 720px; margin: 48px auto 0; padding-top: 20px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave); font-size: 14px;
}