/* Mismo lenguaje visual que la app: papel cálido, tinta y un acento rojo. */
:root {
  --fondo: #F3F0E9;
  --tarjeta: #FAF8F3;
  --borde: #E6E1D5;
  --tinta: #232019;
  --suave: #746D5E;
  --acento: #C83543;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #171512;
    --tarjeta: #211E1A;
    --borde: #332E28;
    --tinta: #F2EDE4;
    --suave: #A89F90;
    --acento: #E2535F;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 24px 16px 48px;
}
main { max-width: 760px; margin: 0 auto; }
.marca {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; text-decoration: none; color: inherit;
}
.marca img { width: 44px; height: 44px; border-radius: 11px; }
.marca span { font-weight: 800; font-size: 18px; letter-spacing: -0.2px; }
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 24px;
  padding: 28px clamp(18px, 4vw, 36px);
}
h1 { font-size: clamp(26px, 5vw, 32px); line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.5px; }
h2 { font-size: 19px; margin: 32px 0 8px; }
p, li { color: var(--tinta); }
.fecha { color: var(--suave); font-size: 14px; margin: 0 0 20px; }
.suave { color: var(--suave); }
a { color: var(--acento); font-weight: 600; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
.aviso {
  border-left: 4px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  border-radius: 0 14px 14px 0;
  padding: 12px 16px; margin: 18px 0;
}
.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos li {
  counter-increment: paso; position: relative;
  padding: 10px 0 10px 46px; border-bottom: 1px solid var(--borde);
}
.pasos li:last-child { border-bottom: 0; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--acento); color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 14px;
}
.enlaces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.enlaces a {
  text-decoration: none; padding: 10px 16px; border-radius: 14px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta);
}
footer { color: var(--suave); font-size: 13px; text-align: center; margin-top: 28px; }