/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--sky) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand svg{flex:none}
.brand b{font-family:var(--f-display);font-weight:800;font-size:1.05rem;line-height:1.1;display:block}
.brand small{display:block;color:var(--muted);font-size:.78rem;line-height:1.2}
nav.links{display:flex;gap:4px;align-items:center}
nav.links a{text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--muted);transition:background .2s,color .2s}
nav.links a:hover{background:var(--leaf-soft);color:var(--ink)}
nav.links a.cta{background:var(--leaf);color:var(--on-accent);white-space:nowrap}
nav.links a.cta:hover{background:var(--ink);color:var(--sky)}
nav.links a.give{color:var(--leaf);box-shadow:inset 0 0 0 2px var(--leaf)}
nav.links a.give:hover,nav.links a.give[aria-current="page"]{background:var(--leaf-soft);color:var(--ink)}
@media (max-width:820px){nav.links a:not(.cta):not(.give){display:none}}
/* Phones: tighten the header so the logo, Donar and Cómo llegar fit on one row */
@media (max-width:420px){.top .wrap{gap:10px}.brand b{white-space:nowrap}nav.links{gap:6px}nav.links a{padding:7px 11px;font-size:.9rem}}
@media (max-width:360px){.brand b{white-space:normal}.brand small{display:none}}
.brand img{flex:none;width:44px;height:44px;object-fit:contain}
nav.links a[aria-current="page"]:not(.give){color:var(--ink);background:var(--leaf-soft)}
@media (max-width:940px){nav.links a.opt{display:none}}