">
  /* 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}

  /* Botón pro */
  :root{--orange-1:#ff8a00;--orange-2:#ffb020;--orange-3:#ff7a00;--text:#1a1a1a}
  .btn-pro{
    width:min(100%,400px);
    display:inline-flex;align-items:center;justify-content:center;
    padding:18px 28px;border-radius:999px;border:0;
    font:600 20px/1.2 inherit;color:var(--text);
    background:linear-gradient(180deg,var(--orange-2) 0%,var(--orange-1) 45%,var(--orange-3) 100%);
    box-shadow:0 8px 18px rgba(255,140,0,.25),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.12);
    text-decoration:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform .12s ease,box-shadow .12s ease,filter .12s ease
  }
  .btn-pro:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,140,0,.30),inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,0,0,.12)}
  .btn-pro:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(255,140,0,.20),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.18);filter:brightness(.98)}
  .btn-pro:focus-visible{outline:3px solid #fff; outline-offset:3px} /* foco visible en fondo negro */
  @media (prefers-reduced-motion: reduce){.btn-pro{transition:none}.btn-pro:hover,.btn-pro:active{transform:none}}
    /* 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} }

  :root{
    --ink:#1a1a1a; --muted:#5c6b7a;
    --card-bg:#fff; --card-border:#e9eef3;
    --shadow:0 6px 16px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
    --shadow-hover:0 10px 24px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.08);
    --radius:16px;
  }

  /* Grid: en laptops se ven 2 columnas lado a lado,
     manteniendo el MISMO ancho visual que tus cards del grid “muchas imágenes” */
  .news.two-up{
    display:grid; gap:16px; margin:16px auto; padding:0 12px;
    grid-template-columns: 1fr;              /* móvil: 1 columna */
    max-width: 1200px;
  }
  @media (min-width: 900px){
    .news.two-up{
      grid-template-columns: repeat(2, minmax(260px, 360px)); /* ancho limitado por card */
      justify-content: center; /* centra las dos columnas */
    }
  }

  .card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:clip;
    contain:content;
  }
  .card-link{
    display:grid; grid-template-rows:auto 1fr;
    color:inherit; text-decoration:none; min-height:100%;
  }

  /* Imagen adaptable con reserva de espacio (evita CLS).
     Mantiene proporción 16:9 pero NO crece en exceso por el límite de 360px de la columna */
  .card-img{
    display:block; width:100%; height:auto;
    aspect-ratio:16/9; object-fit:cover;
  }

  .card-body{ padding:14px 14px 16px; }
  .card-title{
    margin:0 0 6px;
    font:700 16px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
  }
  .card-excerpt,.card-meta{
    margin:0 0 10px;
    font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--muted);
  }
  .card-meta{ font-weight:500; font-size:12px; line-height:1; }

  /* Accesibilidad e interacción */
  .card-link:focus-visible{ outline:3px solid #111; outline-offset:3px; border-radius:calc(var(--radius) - 2px); }
  .card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); transition:transform .12s ease, box-shadow .12s ease; }
  .card:active{ transform:translateY(0); box-shadow:var(--shadow); }
  @media (prefers-reduced-motion: reduce){ .card{ transition:none !important; transform:none !important; } }

  /* Si NO hay imagen en un bloque, quita la fila superior para que no quede hueco */
  .no-img .card-link{ grid-template-rows: 1fr; }