">
  /* CSS inline y ligero (sin imágenes, sin fuentes externas) */
/* Fondo claro y texto gris-neutro (casi negro) */
body{
  margin:0;
  background:#fff;
  color:#1a1a1a;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  text-align:center; /* si ya lo tenías */
}

/* Enlaces accesibles en fondo blanco */
a{
  color:#0b57d0;                  /* AA sobre blanco */
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:.1em;
}
a:hover{ color:#174ea6; }
a:visited{ color:#681da8; }
a:focus-visible{ outline:3px solid #111; outline-offset:3px; }
  .stack{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}

    /* Contraste AA sobre fondo #fff */
  .link{
    color:#0b57d0;                 /* ~8:1 contra blanco */
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: .1em;
  }
  .link:hover{ color:#174ea6; }    /* ~6:1 */
  .link:visited{ color:#681da8; }  /* ~7:1 */
  .link:focus-visible{
    outline:3px solid #111; outline-offset:3px;
  }
 ul, ol{ margin:0 0 2em 1.25em!important; padding:0!important; }

ul li + li,
ol li + li{ margin-top: 2em; }

:root{
    --blue-1:#2a7ff0;   /* inicio */
    --blue-2:#5aa3ff;   /* transición intermedia */
    --blue-3:#e6f0ff;   /* final muy claro */
    --on-blue:#0a2342;  /* texto oscuro (AA) */
    --grad-start: 27%;  /* punto donde empieza a notarse */
    --grad-blend: 65%;  /* fin de mezcla larga (puedes subirlo a 70%) */
  }
  .toolbar{
    background: linear-gradient(
      90deg,
      var(--blue-1) 0%,
      var(--blue-1) var(--grad-start),  /* color sólido hasta 27% */
      var(--blue-2) var(--grad-blend),  /* mezcla amplia del 27% al 65% */
      var(--blue-3) 100%                /* se aclara hasta el final */
    );
    color: var(--on-blue);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }
    /* Enlace de marca (logo "Pedir Ayudas") */
  .toolbar .brand {
    color:#fff !important;              /* blanco normal */
    text-decoration:none;               /* sin subrayado */
  }
  .toolbar .brand:visited {
    color:#fff !important;              /* blanco también si está visitado */
  }
  .toolbar .brand:hover {
    color:#f2f2f2 !important;           /* gris claro en hover */
  }
  .toolbar .brand:focus-visible {
    outline:3px solid #fff;
    outline-offset:3px;
    border-radius:6px;
  }
  .toolbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    max-width:1200px; margin:0 auto; padding:10px 16px; min-height:56px;
  }

  /* Marca / logo (objetivo táctil ≥44px) */
  .brand{ display:inline-flex; align-items:center; gap:10px;
          color:inherit; text-decoration:none; min-height:44px; }
  .logo{ font:700 18px/1 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; }

  /* Navegación */
  .nav{ display:flex; gap:8px; }
  .navlink{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 12px; min-height:44px; border-radius:8px;
    color:var(--on-blue); text-decoration:none;
  }
  .navlink:hover{
    text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:.1em;
  }

  /* Foco visible (teclado) */
  .brand:focus-visible, .navlink:focus-visible{
    outline:3px solid #111; outline-offset:3px; border-radius:8px;
  }

  @media (prefers-reduced-motion: reduce){ *{transition:none !important} }