/* Hoja compartida por las páginas legales.

   Sobrias y legibles: las lee alguien que está decidiendo si confía en una app
   que le pide una foto de su cédula, o un revisor de Apple y Google
   comprobando que dice lo que tiene que decir. Ninguno de los dos viene a
   mirar el diseño, pero los dos abandonan si no se lee. */
:root {
  --azul: #00349c;
  --oro: #ffc907;
  --tinta: #10182f;
  --tinta-suave: #3d4767;
  --apagado: #6b7592;
  --linea: #dfe3ee;
  --fondo: #f4f6fb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.hoja { max-width: 760px; margin: 0 auto; padding: 0 20px 72px; }
header {
  background: #fff;
  border-bottom: 1px solid var(--linea);
  padding: 22px 0;
  margin-bottom: 36px;
}
header .hoja { padding-bottom: 0; display: flex; align-items: center; gap: 12px; }
header img, header svg { width: 42px; height: 42px; object-fit: contain; flex: none; }
/* La marca va como SVG en línea, no como archivo: una petición menos y
   nada que se rompa si alguien mueve el PNG de sitio. */
header b { display: block; font-size: 14px; letter-spacing: 1.2px; color: var(--azul); }
header span { font-size: 12.5px; color: var(--apagado); }
h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.8px; margin: 0 0 6px; }
.fecha { color: var(--apagado); font-size: 13.5px; margin: 0 0 8px; }
.regla { width: 34px; height: 3px; background: var(--oro); border-radius: 2px; margin: 18px 0 30px; }
h2 { font-size: 19px; margin: 38px 0 12px; letter-spacing: -0.3px; }
h3 { font-size: 15.5px; margin: 24px 0 8px; }
p, li { color: var(--tinta-suave); }
ul { padding-left: 20px; }
li { margin-bottom: 7px; }
table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--apagado); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
.caja {
  background: #fff;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--oro);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.caja p:last-child { margin-bottom: 0; }
.caja p:first-child { margin-top: 0; }
.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 18px 42px;
  margin: 0;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azul); color: #fff;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
footer { border-top: 1px solid var(--linea); margin-top: 48px; padding-top: 20px; font-size: 13.5px; color: var(--apagado); }
a { color: var(--azul); }
@media (max-width: 520px) {
  h1 { font-size: 25px; }
  .hoja { padding: 0 16px 56px; }
  table { font-size: 13.5px; }
  th, td { padding: 9px 8px; }
}