/* Self-hosted so first paint never waits on fonts.google.com. */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/jbmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/jbmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/fonts/caveat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html{scroll-behavior:auto}
body{margin:0;background:#F2F8FB;color:#10202E;font-family:'Sora',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#1E9CD7;text-decoration:none}
a:hover{color:#0F7FB6}
::selection{background:#29A8DC;color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#EAF3F8}
::-webkit-scrollbar-thumb{background:#B9DCEC;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#8FC9E4}
html[lang="es"] [data-l="en"]{display:none}
html[lang="en"] [data-l="es"]{display:none}
section{scroll-margin-top:80px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dropRipple{to{transform:scale(8);opacity:0}}
@keyframes introFogA{0%{transform:translateX(0);opacity:1}100%{transform:translateX(60%);opacity:0}}
@keyframes introFogB{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-60%);opacity:0}}
@keyframes introRise{from{opacity:0;transform:translateY(16px) scale(0.96)}to{opacity:1;transform:none}}
@keyframes fogDrift{0%{transform:translateX(-40px);opacity:0}25%{opacity:.75}75%{opacity:.75}100%{transform:translateX(90px);opacity:0}}
@keyframes dropGrow{0%,100%{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}
@keyframes dripFall{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(38px);opacity:0}}
@keyframes tankFill{0%{transform:scaleY(0)}45%,100%{transform:scaleY(1)}}
@keyframes burstDrop{0%{transform:translate(0,0) rotate(45deg);opacity:1}100%{transform:translate(var(--dx),130px) rotate(45deg);opacity:0}}
@keyframes shimmer{to{background-position:200% center}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floatyRot{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wave{to{transform:rotate(360deg)}}
@keyframes modalIn{from{opacity:0;transform:scale(0.94) translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes flowX{to{background-position:28px 0}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6vw,-4vh,0) scale(1.14)}66%{transform:translate3d(-4vw,3vh,0) scale(0.92)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-7vw,5vh,0) scale(0.9)}}
@keyframes auroraC{0%,100%{transform:translate3d(0,0,0) scale(0.95)}50%{transform:translate3d(4vw,-6vh,0) scale(1.2)}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:44px 44px,44px 44px}}
@keyframes glowPulse{0%,100%{box-shadow:0 6px 22px rgba(41,168,220,0.45)}50%{box-shadow:0 8px 38px rgba(41,168,220,0.9)}}
.ic{display:inline-block;vertical-align:middle;fill:currentColor;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
@keyframes scrollDot{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(13px)}100%{opacity:0;transform:translateY(13px)}}
#story-strip::-webkit-scrollbar{display:none}
.leaflet-container{font-family:'Sora',sans-serif}
input::placeholder,textarea::placeholder{color:#7A93A5}
img{max-width:100%}
@media(max-width:820px){
nav{flex-wrap:wrap!important;row-gap:10px!important;padding-left:16px!important;padding-right:16px!important;padding-top:calc(16px + env(safe-area-inset-top,0px))!important}
header#top{padding:120px 20px 60px!important;overflow:hidden!important}
[style*="max-width: 800px"],[style*="max-width:800px"],[style*="max-width: 680px"],[style*="max-width: 600px"]{max-width:100%!important}
h1{font-size:38px!important}
[style*="grid-template-columns"]{grid-template-columns:1fr!important}
[style*="flex: 0 0 400px"],[style*="flex:0 0 400px"],[style*="flex: 0 0 420px"],[style*="flex:0 0 420px"]{flex:0 0 84vw!important}
[style*="width: min(460px"]{justify-self:stretch!important;width:100%!important}
[style*="max-width: 1240px"],[style*="max-width:1240px"]{max-width:100%!important}
nav div:has([data-navpill]){display:none!important}
[style*="white-space: nowrap"],[style*="white-space:nowrap"]{white-space:normal!important}
header#top a[href="#donate"],header#top a[href="#help"],header#top a[href="#store"],header#top a[href="#contact"]{padding:15px 22px!important;font-size:15px!important}
img,iframe{max-width:100%}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* focus states lifted out of style-focus attributes */
.fc1:focus{border-color:#29A8DC!important}

/* Overlays (command palette, cart drawer, product modals, toast) ship in the
   markup and are toggled with [hidden] rather than being created by script. */
[hidden]{display:none!important}
.overlay{position:fixed;inset:0}
/* Reveal-on-scroll starts visible; the script only opts elements out once it
   confirms they are below the fold, so a no-JS visitor still sees everything. */
[data-reveal]{opacity:1}

/* 100vh on a phone is the viewport with the browser chrome retracted, so a
   100vh hero is taller than what you can actually see and the page shifts as
   the URL bar slides away. svh is the small (chrome-visible) viewport. */
/* !important is required: both elements carry min-height:100vh as an inline
   style, which would otherwise win. */
@supports (height:100svh){
  header#top{min-height:100svh!important}
  #donate-pin{min-height:100svh!important}
}

@media(max-width:820px){
  /* Keep the fixed nav to one short row. Dropping the wordmark and the ⌘K
     button (which means nothing without a keyboard) leaves the logo, language,
     cart and Donate fitting across a 375px screen instead of wrapping — the
     nav is fixed, so every row it grows is a row of reading area lost. */
  nav{flex-wrap:nowrap!important;gap:6px!important;
      padding:calc(9px + env(safe-area-inset-top,0px)) 12px 9px!important}
  /* Without this the row overflows and flex shrinks the controls until their
     labels wrap ("Donar" above "→"). Let them keep their natural width. */
  nav>*,nav>div>*{flex:0 0 auto!important}
  nav a[href="#top"] span{display:none!important}
  nav a[href="#donate"]{padding:12px 14px!important;font-size:14px!important}
  nav a[href="#donate"] span,nav button span{white-space:nowrap!important}
  /* The section pills are hidden on mobile, so this palette button is the only
     way to jump between sections — keep it, but drop the "⌘K" hint, which is
     both meaningless and too wide here. font-size:0 hides the bare text node;
     the icon carries its own explicit size. */
  nav button[data-click="openPalette"]{font-size:0!important;gap:0!important;padding:11px!important}

  /* Touch targets. The design was drawn for a mouse; these are the controls
     that fall under the 44x44 minimum on a phone. Inline links inside running
     text are left alone — they are exempt, and padding them out breaks the
     line box. */
  nav button,nav a{min-width:44px;min-height:44px}
  [data-sizebtn]{min-width:44px!important;min-height:44px!important}
  a[aria-label^="LinkedIn"]{min-width:44px!important;min-height:44px!important}
  [data-click="openGray"],[data-click="openBlue"],[data-click="copyEmail"]{
    min-width:44px!important;min-height:44px!important}
  a[href*="instagram.com"],a[href*="tiktok.com"],a[href*="wa.me"],
  a[href*="linktr.ee"],a[href*="forms.gle"],a[href*="docs.google.com"]{min-height:44px}
  #palette [data-click="palGo"]{min-height:44px!important}

  /* Wide letter-spacing on mono labels overflows narrow screens. */
  [style*="letter-spacing:0.2em"],[style*="letter-spacing: 0.2em"]{letter-spacing:0.12em!important}
}

/* Hover styling is meaningless on touch and, worse, sticks after a tap until
   you press something else. Only apply it to devices that really hover. */
@media (hover:hover){
  .hv1:hover,.hv1:focus-visible{background-size:100% 100%!important;color:#fff!important;border-color:#29A8DC!important;transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(41,168,220,0.9)!important}
  .hv2:hover,.hv2:focus-visible{border-color:#29A8DC!important;color:#0F7FB6!important}
  .hv3:hover,.hv3:focus-visible{background:rgba(41,168,220,0.1)!important}
  .hv4:hover,.hv4:focus-visible{border-color:#29A8DC!important}
  .hv5:hover,.hv5:focus-visible{color:#fff!important;background:#1E9CD7!important}
  .hv6:hover,.hv6:focus-visible{background:#29A8DC!important;color:#fff!important}
  .hv7:hover,.hv7:focus-visible{background:#1E9CD7!important}
  .hv8:hover,.hv8:focus-visible{color:#29A8DC!important}
  .hv9:hover,.hv9:focus-visible{background:#1E9CD7!important;color:#fff!important}
  .hv10:hover,.hv10:focus-visible{border-color:#29A8DC!important;background:rgba(41,168,220,0.08)!important;color:#10202E!important}
  .hv11:hover,.hv11:focus-visible{background:#6FD3F2!important;color:#0C2233!important}
  .hv12:hover,.hv12:focus-visible{border-color:#6FD3F2!important;color:#6FD3F2!important}
  .hv13:hover,.hv13:focus-visible{border-color:#29A8DC!important;transform:translateX(6px);box-shadow:0 10px 30px -18px rgba(16,60,90,0.35)!important}
  .hv14:hover,.hv14:focus-visible{transform:translateY(-8px);box-shadow:0 24px 60px -28px rgba(16,60,90,0.3)!important}
  .hv15:hover,.hv15:focus-visible{transform:translateY(-8px);box-shadow:0 24px 60px -22px rgba(12,34,51,0.55)!important}
  .hv16:hover,.hv16:focus-visible{background:#0B5CAB!important;color:#fff!important;transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(10,102,194,1)!important}
  .hv17:hover,.hv17:focus-visible{background:rgba(111,211,242,0.15)!important;color:#6FD3F2!important}
  .hv18:hover,.hv18:focus-visible{border-color:#29A8DC!important;background:rgba(41,168,220,0.14)!important}
  .hv19:hover,.hv19:focus-visible{transform:translateY(-6px);border-color:#29A8DC!important;box-shadow:0 24px 60px -30px rgba(16,60,90,0.4)!important}
  .hv20:hover,.hv20:focus-visible{border-color:#29A8DC!important;background:rgba(41,168,220,0.05)!important}
  .hv21:hover,.hv21:focus-visible{filter:none!important;transform:translateY(-4px)}
  .hv22:hover,.hv22:focus-visible{border-color:#29A8DC!important;background:rgba(41,168,220,0.08)!important;color:#0F7FB6!important}
  .hv23:hover,.hv23:focus-visible{background:rgba(41,168,220,0.1)!important;color:#0F7FB6!important}
  .hv24:hover,.hv24:focus-visible{background:rgba(41,168,220,0.12)!important}
}