:root{
  --ink:#0d0e14; --muted:#4f5362; --line:#e3e5ec; --soft:#f4f5f9;
  --cyan:#0cc0df; --blue:#2563eb; --violet:#8b5cf6; --pink:#ec2fbf;
  --grad:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  --display:'Anton','Impact','Arial Narrow Bold',sans-serif;
  --marker:'Permanent Marker','Comic Sans MS',cursive;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3,.brand{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em}

/* Navbar */
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:3px solid var(--ink)}
header::after{content:"";display:block;height:5px;background:var(--grad)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{font-size:1.5rem;line-height:1}
.brand small{display:block;font-family:var(--body);text-transform:none;font-weight:500;font-size:.7rem;color:var(--muted);letter-spacing:0;margin-top:3px}
nav ul{list-style:none;padding:0;display:flex;align-items:center;gap:4px}
nav li{position:relative}
nav a.l{display:block;padding:10px 11px;font-weight:700;font-size:.92rem;border-bottom:4px solid transparent}
nav a.l:hover,nav a.l:focus-visible{border-color:var(--c,var(--ink))}
.sub{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--cyan);padding:6px}
li:hover>.sub,li:focus-within>.sub{display:block}
.sub a{display:block;padding:9px 12px;font-weight:500;font-size:.92rem}
.sub a:hover{background:var(--soft)}
.donar{display:inline-block;background:var(--ink);color:#fff;font-weight:700;padding:10px 20px;margin-left:8px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--pink);transition:transform .12s,box-shadow .12s}
.donar:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pink)}
.menu-btn{display:none;background:#fff;border:3px solid var(--ink);padding:8px 14px;font:inherit;font-weight:700;cursor:pointer}

/* Hero */
.hero{padding:72px 0 48px}
.hero .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(3.2rem,9vw,7.2rem);line-height:.92}
.hero h1 span{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-block;font-family:var(--marker);font-size:1.5rem;background:var(--cyan);padding:2px 14px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:rotate(-3deg);margin-bottom:22px}
.hero p{max-width:46ch;margin-top:26px;font-size:1.2rem;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.btn{display:inline-block;padding:14px 28px;font-weight:700;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn.main{background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--cyan)}
.btn.main:hover{box-shadow:7px 7px 0 var(--cyan)}
.chips{display:grid;gap:18px}
.chip{padding:18px 26px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);font-family:var(--display);font-size:2.1rem;text-transform:uppercase;line-height:1;transform:rotate(var(--r))}
.chip small{display:block;font-family:var(--body);text-transform:none;font-size:.85rem;font-weight:500;margin-top:6px}

/* Franja */
.band-wrap{overflow:hidden;padding:28px 0}
.band{background:var(--ink);color:#fff;transform:rotate(-1.5deg);margin:0 -24px;border-block:4px solid var(--cyan)}
.track{display:flex;gap:44px;width:max-content;padding:14px 0;font-family:var(--display);font-size:1.6rem;text-transform:uppercase;white-space:nowrap;animation:run 30s linear infinite}
.track i{width:14px;height:14px;background:var(--grad);transform:rotate(45deg);align-self:center;flex:none}
@keyframes run{to{transform:translateX(-50%)}}

/* Causa */
.causa{padding:72px 0}
.box{max-width:860px;border:3px solid var(--ink);box-shadow:12px 12px 0 var(--pink);padding:44px}
.box blockquote{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.02}
.box p{margin-top:22px;color:var(--muted);max-width:60ch}

/* Pilares */
.pilares{padding:56px 0 88px}
.pilares h2,.panel h2{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1}
.pilares .intro{margin-top:12px;color:var(--muted);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px}
.p{padding:24px;background:#fff;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--c);transition:transform .12s,box-shadow .12s}
.p:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--c)}
.p b{display:grid;place-items:center;width:52px;height:52px;background:var(--c);color:var(--on);font-family:var(--display);font-size:1.7rem;font-weight:400}
.p h3{margin-top:16px;font-size:1.7rem;line-height:1}
.p em{display:block;margin-top:6px;font-style:normal;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.p p{margin-top:10px;color:var(--muted);font-size:.95rem}
.p a{display:inline-block;margin-top:14px;font-weight:700;border-bottom:3px solid var(--c)}

/* Paneles CTA */
.panels{display:grid;grid-template-columns:1fr 1fr;border-block:3px solid var(--ink)}
.panel{padding:56px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.panel+.panel{border-left:3px solid var(--ink)}
.panel.a{background:var(--cyan)}
.panel.b{background:var(--pink)}
.panel p{max-width:38ch;font-weight:500}
.panel .btn.main{box-shadow:5px 5px 0 #fff}

/* Pie */
footer{background:#2b2d33;color:#c9ccd6;border-top:5px solid transparent;border-image:var(--grad) 1}
.sociales{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 24px 44px}
.cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding:56px 0}
footer h4{color:#fff;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.2rem;margin-bottom:14px}
footer ul{list-style:none;padding:0}
footer li{margin:7px 0;font-size:.95rem}
footer li a:hover{color:#fff}
.c{text-align:center}
.legal{border-top:1px solid #42454e;text-align:center;padding:18px;font-size:.85rem}

@media (max-width:960px){
  .menu-btn{display:block}
  nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:3px solid var(--ink);display:none;padding:12px 24px 20px}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch}
  .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 12px}
  .donar{text-align:center;margin:10px 0 0}
  .hero .wrap{grid-template-columns:1fr}
  .chips{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
  .panel+.panel{border-left:0;border-top:3px solid var(--ink)}
  .cols{grid-template-columns:1fr}
  .c{text-align:left}
}
@media (max-width:560px){.grid,.chips{grid-template-columns:1fr}.hero{padding:48px 0 32px}.box{padding:28px;box-shadow:8px 8px 0 var(--pink)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{animation:none}.btn:hover,.p:hover,.donar:hover{transform:none}}
.sociales a{width:44px;height:44px;display:grid;place-items:center;color:#fff;border:0;background:none;transition:color .12s,transform .12s}
.sociales a:hover,.sociales a:focus-visible{color:var(--pink);transform:translateY(-2px)}
.sociales svg{width:26px;height:26px;fill:currentColor}
@media (prefers-reduced-motion:reduce){.sociales a:hover{transform:none}}