/* Tulbrain — CSS propio, sin toolchain. Tokens de marca:
   azul #289ace · amarillo #f9c819 · rosa #f48fb1 · tinta #141414
   Neutros papel-cómic (dirección visual aprobada por Ricardo, ref. estilo cómic):
   crema base #faf4e2 · sepia de banda #f3ead0
   Tipografía de cuerpo: system stack (interino — BLOQUEO #5). */
:root{
  --blue:#289ace; --yellow:#f9c819; --pink:#f48fb1; --ink:#141414;
  --paper:#faf4e2; --paper-deep:#f3ead0;
  --maxw:1140px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;font-size:1.0625rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1rem}

/* header de idiomas — banda blanca con regla de tinta, como viñeta superior */
.lang-bar{border-bottom:3px solid var(--ink);background:#fff}
.lang-bar nav{max-width:var(--maxw);margin:0 auto;padding:.6rem 1rem;display:flex;
  flex-wrap:wrap;gap:.4rem .5rem;justify-content:center}
.lang-bar a{display:inline-block;color:var(--ink);text-decoration:none;font-size:.95rem;
  padding:.45rem .9rem;border-radius:999px;border:2px solid transparent;line-height:1.2}
.lang-bar a:hover{border-color:var(--ink);background:var(--paper)}
.lang-bar a.active{font-weight:700;background:var(--yellow);border-color:var(--ink);
  pointer-events:none}

/* bandas de sección — separadas por reglas de tinta de borde a borde */
.band{padding:3rem 0;border-bottom:3px solid var(--ink)}
.band h2{font-size:1.8rem;line-height:1.2;margin:0 0 1rem;font-weight:800;
  letter-spacing:-.01em}
/* banda sepia con trama de puntos (halftone) */
.band-dots{background-color:var(--paper-deep);
  background-image:radial-gradient(circle, rgba(20,20,20,.06) 1px, transparent 1.4px);
  background-size:14px 14px}
/* banda azul con rayos radiales — el golpe de energía del cómic */
.band-blue{background-color:var(--blue);
  background-image:repeating-conic-gradient(from 0deg at 50% 40%,
    rgba(255,255,255,.07) 0deg 5deg, transparent 5deg 11deg);
  color:#fff;text-align:center}
.band-blue h2{color:#fff;font-size:2rem}
.band-blue p{max-width:60ch;margin-left:auto;margin-right:auto}

/* hero */
.hero{text-align:center;padding-top:3.5rem}
.hero img{max-width:220px;height:auto}
.tagline{font-size:1.7rem;font-weight:800;margin:1.2rem auto .4rem;max-width:36ch}
.hero-sub{max-width:60ch;margin:.5rem auto 1.5rem}
.btn{display:inline-block;background:var(--yellow);color:var(--ink);text-decoration:none;
  font-weight:800;padding:.85rem 1.7rem;border-radius:.6rem;border:3px solid var(--ink);
  box-shadow:5px 6px 0 var(--ink)}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 4px 0 var(--ink)}
.hero-note{font-size:.9rem;margin-top:1.25rem;color:#3d3a33}

/* video */
.video{position:relative;aspect-ratio:16/9;max-width:860px;margin:1.5rem auto 0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:3px solid var(--ink);
  border-radius:.75rem;background:#fff;box-shadow:7px 8px 0 var(--ink)}

/* módulos — viñetas blancas con sombra dura */
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;
  margin-top:1.5rem}
.module{background:#fff;border:3px solid var(--ink);border-radius:.85rem;padding:1.25rem;
  box-shadow:7px 8px 0 var(--ink)}
.module h3{margin:0 0 .5rem;font-size:1.2rem;display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;font-weight:800}
.badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:.15rem .55rem;border-radius:999px;border:2px solid var(--ink);background:var(--pink)}
.badge.live{background:var(--yellow)}
.hook{font-weight:700;margin:.25rem 0 .5rem}
.work{font-size:.95rem;color:#333;margin-bottom:0}
.center{text-align:center}

/* programas — banda sepia punteada */
.grants{padding:2.5rem 1rem;text-align:center;background-color:var(--paper-deep);
  background-image:radial-gradient(circle, rgba(20,20,20,.06) 1px, transparent 1.4px);
  background-size:14px 14px;border-bottom:3px solid var(--ink)}
.grants .grants-heading{display:block;margin-bottom:1.25rem;color:#3d3a33;font-size:.95rem}
.grants .grant-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem}
.grants a{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none}
.grants a:hover{text-decoration:underline}
.grants img{width:250px;height:auto;display:block}
.grants svg{display:block}
.grants .grant-label{font-size:20px;font-weight:600;color:#5f6368;white-space:nowrap}

footer{padding:1.5rem 1rem;text-align:center;font-size:.9rem;background:var(--paper)}
footer a{color:var(--blue);font-weight:600}

@media (max-width:600px){
  .tagline{font-size:1.4rem}
  .band h2{font-size:1.5rem}
  .band-blue h2{font-size:1.6rem}
}

/* páginas legales — estilo viñeta */
.legal-chip{display:inline-block;background:var(--ink);color:#fff;font-weight:800;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .75rem}
.legal h1{font-size:2.1rem;font-weight:800;margin:.5rem 0 1.75rem;line-height:1.15}
.legal h1::after{content:"";display:block;width:110px;height:6px;background:var(--yellow);
  border-radius:3px;margin-top:.6rem}
.legal p{background:#fff;border:3px solid var(--ink);border-radius:.6rem;
  box-shadow:6px 7px 0 var(--ink);padding:1.1rem 1.35rem;margin:0 0 1.5rem;max-width:860px}
.legal p strong:first-child{display:block;font-size:1rem;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:.35rem}
.legal h1 + p, .legal p:has(> em:only-child){background:none;border:0;box-shadow:none;
  padding:0;font-size:.9rem;color:#3d3a33}
.legal-back{margin-top:2rem}
.legal-back a{color:var(--blue);font-weight:700;text-decoration:none}
.legal-back a:hover{text-decoration:underline}
footer .footer-legal{margin-bottom:.5rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;
  justify-content:center}
footer .footer-legal a{color:var(--ink);text-decoration:none;font-weight:600}
footer .footer-legal a:hover{text-decoration:underline}