/* Animación de bienvenida · todo dibujado a mano, sin imágenes externas */
.intro-note{margin:0;padding:0 16px 10px;text-align:center;font-size:11px;color:#8b7fa0}
.intro{--ink:#3b0a6e;--coral:#ff6b6b;--blue:#3d85f6;--sun:#fdc25a;--green:#2e9e5b;--txt:#6b5f7a;
  position:fixed;inset:0;z-index:9999;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--txt);overflow:hidden;
  background:radial-gradient(circle at 18% 8%,#fff 0,rgba(255,255,255,0) 42%),linear-gradient(160deg,#fff3e2 0%,#ffe5d6 55%,#eef3ff 100%)}
.intro[hidden]{display:none}
.intro:focus{outline:none}
.intro::before{content:"";position:absolute;top:0;left:0;width:min(22vw,230px);height:min(18vw,190px);background:var(--coral);border-bottom-right-radius:100% 92%;z-index:0}
.intro::after{content:"";position:absolute;right:0;bottom:0;width:min(20vw,210px);height:min(34vw,330px);background:#eaf0ff;border-top-left-radius:100% 40%;z-index:0}
.intro>*{position:relative;z-index:1}
html.intro-open,html.intro-open body{overflow:hidden}

.intro-brand{display:flex;align-items:center;gap:10px;padding:16px 22px 0 clamp(60px,9vw,110px);font-weight:600;color:var(--ink);font-size:clamp(14px,2vw,18px)}
.intro-brand svg{width:34px;height:34px;flex:none}
.intro-skip{position:absolute;top:14px;right:16px;z-index:5;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:10px 20px;
  font:600 12px/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .15s}
.intro-skip:hover{transform:translateY(-2px)}
.intro-skip:focus-visible,.ibtn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.intro-caption{min-height:2.6em;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 18px 0;
  font-weight:600;color:var(--ink);font-size:clamp(20px,3.4vw,34px);letter-spacing:-.02em;line-height:1.15}
.intro-caption span{display:inline-block;opacity:0}
.intro-caption.in span{animation:capIn .7s ease forwards}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.intro-stage{min-height:0;padding:0 clamp(6px,2vw,24px)}
.intro-stage svg{width:100%;height:100%;display:block}
#introCam{transform-origin:0 0;transition:transform 2.2s cubic-bezier(.65,0,.25,1)}
.land{fill:none;stroke:var(--ink);stroke-opacity:.38;stroke-width:3.6;stroke-linecap:round;opacity:0;transition:opacity 1.4s ease}
.map-in .land{opacity:1}

#introMap #village{opacity:0;transition:opacity .6s;color:var(--coral)}
#introMap.s-need #village,#introMap.s-project #village,#introMap.s-done #village{opacity:1}
#introMap.s-project #village{color:var(--blue)}
#introMap.s-done #village{color:var(--green)}
.core{fill:currentColor;stroke:#fff;stroke-width:1.4}
.ring{fill:none;stroke:currentColor;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
.ring.r2{animation-delay:1.2s}
@keyframes ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(5);opacity:0}}
.lbl{font-family:'Poppins',sans-serif;font-weight:600;font-size:calc(9px * var(--inv,1));fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:#fff3e2;stroke-width:calc(3px * var(--inv,1));stroke-linejoin:round;transition:font-size 2.2s cubic-bezier(.65,0,.25,1),stroke-width 2.2s cubic-bezier(.65,0,.25,1)}
#village.hit .core{animation:hit .4s ease}
@keyframes hit{50%{transform:scale(1.9)}}
#village .core{transform-box:fill-box;transform-origin:center}

.donor{color:var(--blue);opacity:0;transition:opacity .7s ease,transform .7s ease}
.donors-on .donor{opacity:1}
.donor .ring{animation-duration:2.8s}
.arc{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-opacity:.65;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;transition:opacity .8s}
.fin .arc{opacity:0}
.fin .donor{opacity:0!important}
.coin{opacity:0}
.coinBase{fill:var(--sun);stroke:var(--ink);stroke-width:.9}
.txt .kv{margin-top:6px;font-size:clamp(11px,1.5vw,13px);color:var(--ink);font-weight:500}

#introWater{opacity:0;transition:opacity 1s}
#introMap.s-done #introWater{opacity:1}
.rip{fill:none;stroke:var(--blue);stroke-width:1.3;transform-box:fill-box;transform-origin:center;animation:rip 2.6s ease-out infinite}
.rip:nth-child(3){animation-delay:.9s}.rip:nth-child(4){animation-delay:1.8s}
@keyframes rip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.6);opacity:0}}

.intro-panel{position:relative;width:min(640px,92vw);height:clamp(176px,27vh,226px);margin:4px auto 6px}
.p{position:absolute;inset:0;display:flex;align-items:center;gap:clamp(10px,2vw,20px);background:#fff;border-radius:26px;
  box-shadow:0 18px 44px rgba(59,10,110,.14);padding:12px clamp(14px,2.4vw,22px);opacity:0;transform:translateY(16px) scale(.98);
  pointer-events:none;transition:opacity .6s ease,transform .6s ease}
.p.on{opacity:1;transform:none;pointer-events:auto}
.ill{flex:0 0 clamp(88px,19vw,130px);width:clamp(88px,19vw,130px);height:auto;max-height:100%}
.txt{min-width:0}
.txt h3{margin:0 0 4px;color:var(--ink);font-size:clamp(15px,2.3vw,20px);line-height:1.2;font-weight:600}
.txt p{margin:0;font-size:clamp(12px,1.75vw,14.5px);line-height:1.5}
.rec{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}
.p.on .wave{animation:wave 1.6s ease-in-out infinite}
@keyframes wave{50%{transform:translateX(3px)}}

.chip{display:inline-block;border-radius:999px;background:#e9f8ef;color:#1d6b3a;font-size:11px;font-weight:600;padding:3px 10px;margin-top:6px}
.chip.code{background:#fff0c2;color:var(--ink)}
.mini{flex:0 0 clamp(150px,34vw,230px);background:#fff;border:2px solid #f0e4f7;border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;gap:3px}
.mini b{color:var(--ink);font-size:clamp(12px,1.9vw,15px);line-height:1.2}
.mini small{font-size:11px;color:var(--txt)}
.mbar{height:9px;background:#eaf0ff;border-radius:99px;overflow:hidden;margin:5px 0 2px}
.fill{display:block;height:100%;width:0;background:var(--coral);border-radius:99px;transition:width 3.4s linear}
.mrow{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink)}
.mrow span:last-child{font-weight:400;color:var(--txt)}

.avs{display:flex;margin-top:8px}
.avs i{width:34px;height:34px;border-radius:50%;border:3px solid #fff;margin-left:-8px;color:#fff;font:600 11px/28px 'Poppins',sans-serif;text-align:center;font-style:normal}
.avs i:first-child{margin-left:0}

.chk{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.chk li{display:flex;align-items:center;gap:9px;font-size:clamp(12.5px,1.9vw,15px);color:var(--ink);font-weight:500;opacity:.25;transition:opacity .5s}
.chk li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:#dcdcdc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;transition:background-color .4s}
.chk li.on{opacity:1}.chk li.on::before{background-color:var(--green)}

.ibtn{display:inline-block;border:0;border-radius:999px;background:var(--coral);color:#fff;text-decoration:none;cursor:pointer;
  padding:10px 20px;font:600 11px/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:10px 8px 0 0;transition:transform .15s}
.ibtn.blue{background:var(--blue)}
.ibtn:hover{transform:translateY(-2px)}

.intro-dots{display:flex;justify-content:center;gap:8px;padding:6px 0 14px}
.intro-dots i{width:8px;height:8px;border-radius:50%;background:#d9cfe6;transition:all .4s}
.intro-dots i.on{background:var(--coral);width:26px;border-radius:99px}

@media (max-width:560px){.intro-brand{padding-left:64px}.intro-brand span{display:none}.intro-skip{padding:9px 14px}.p{border-radius:22px}.avs i{width:30px;height:30px;line-height:24px}}
@media (prefers-reduced-motion:reduce){.ring,.rip,.rec,.p.on .wave{animation:none}#introCam{transition-duration:.3s}}

/* paso blockchain */
.chain .cb rect{fill:#eaf0ff;stroke:#3b0a6e;stroke-width:2.5}
.chain .cb text{font:600 12px Poppins,sans-serif;fill:#3b0a6e}
.chain .cb text.sm{font-size:8px;fill:#3d85f6}
.chain .cb.new rect{fill:#fdc25a}
.chain .cl{stroke:#3d85f6;stroke-width:3;stroke-dasharray:14;stroke-dashoffset:14;fill:none;stroke-linecap:round}
.chain .lock{fill:none;stroke:#2e9e5b;stroke-width:3;stroke-linecap:round;opacity:0}
.chain .cb{opacity:0;transform-box:fill-box;transform-origin:center}
.p.on .chain .cb1{animation:cbIn .5s .2s forwards}
.p.on .chain .cl1{animation:clIn .4s .8s forwards}
.p.on .chain .cb2{animation:cbIn .5s 1s forwards}
.p.on .chain .cl2{animation:clIn .4s 1.6s forwards}
.p.on .chain .cb3{animation:cbIn .6s 2.2s forwards}
.p.on .chain .lock{animation:cbIn .5s 3s forwards}
@keyframes cbIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes clIn{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.chain .cb,.chain .lock{opacity:1}.chain .cl{stroke-dashoffset:0}.p.on .chain *{animation:none!important}}

/* Fronteras: se dibujan al empezar y se borran cuando Kishu cruza el mundo */
.borders{fill:none;stroke:var(--coral);stroke-opacity:.8;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1000 1000;stroke-dashoffset:1000;opacity:0}
.map-in .borders{opacity:1}
.bd-on .borders{stroke-dashoffset:0;transition:stroke-dashoffset 3.6s ease-in-out}
.bd-off .borders{stroke-dashoffset:-1000;opacity:1;transition:stroke-dashoffset 1.6s ease-out}
@media (prefers-reduced-motion:reduce){.bd-on .borders,.bd-off .borders{transition-duration:.01s}}

/* Ayuda de siempre (gris, lenta) */
.arc.grey{stroke:#9a90ab;stroke-opacity:.8;stroke-dasharray:3 5;stroke-linejoin:round}
.coin.grey circle{fill:#d3cde0;stroke:#8a809a;stroke-width:1}
.coin.grey text{font:700 8px Poppins,sans-serif;fill:#6f6580}
.hub rect{fill:#efeaf7;stroke:#8a809a;stroke-width:1}
.hub path{fill:#d8d0e6;stroke:#8a809a;stroke-width:1;stroke-linejoin:round}
.hub .clk{font-size:9px;animation:clk 1.4s ease-in-out infinite}
@keyframes clk{50%{transform:translateY(-2px);opacity:.55}}
.mood{font-size:12px}
.chip.bad{background:#ffe9e9;color:#b3261e}
/* Llega Kishu: trueno */
#introFlash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.thunder #introFlash{animation:tflash .95s ease-out}
@keyframes tflash{0%{opacity:0}7%{opacity:.95}18%{opacity:.1}28%{opacity:.8}100%{opacity:0}}
.thunder .intro-stage{animation:tshake .5s linear}
@keyframes tshake{0%,100%{transform:none}15%{transform:translate(-5px,3px)}35%{transform:translate(5px,-3px)}55%{transform:translate(-4px,2px)}75%{transform:translate(3px,-2px)}}
#introKishu .bolt{fill:var(--sun);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;opacity:0}
.thunder #introKishu .bolt{animation:tbolt .95s}
@keyframes tbolt{0%{opacity:0}6%{opacity:1}16%{opacity:.15}26%{opacity:1}60%{opacity:.85}100%{opacity:0}}
#introKishu .kcoin{opacity:0;transform-box:fill-box;transform-origin:center}
.kishu-in #introKishu .kcoin{animation:kpop 3s .15s forwards}
@keyframes kpop{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.2)}18%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.thunder #introFlash,.thunder .intro-stage{animation:none}}

.hub .hubl{font:600 6.5px Poppins,sans-serif;fill:#6f6580}
.bcbadge rect{fill:#fff;stroke:var(--blue);stroke-width:1.4}
.bcbadge text{font:600 10px Poppins,sans-serif;fill:var(--ink)}
.bcbadge{animation:bdgin .6s ease-out both}
@keyframes bdgin{from{opacity:0;transform:translate(500px,44px)}to{opacity:1}}

/* Medidor de equilibrio */
.eq{position:absolute;left:clamp(8px,1.6vw,26px);top:214px;width:176px;z-index:2;background:rgba(255,255,255,.88);border:2px solid #e3d9f2;border-radius:18px;padding:10px 12px 11px;text-align:center;opacity:0;transform:translateX(-14px);transition:opacity .7s,transform .7s,border-color .8s,box-shadow .8s;box-shadow:0 6px 18px rgba(59,10,110,.08)}
.eq-in .eq{opacity:1;transform:none}
.eq-t{font:600 11px Poppins,sans-serif;color:var(--ink);letter-spacing:.02em;text-transform:uppercase}
.eq-planet{width:64px;height:64px;display:block;margin:6px auto 4px}
.eq-planet .pl{fill:#8fa3c8;transition:fill 1.2s}
.eq-planet .cont{fill:#7d8fb0;transition:fill 1.2s}
.eq-planet .ey{fill:var(--ink)}
.eq-planet .mo{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;display:none}
.eq-planet[data-m=sad] .m-sad,.eq-planet[data-m=neu] .m-neu,.eq-planet[data-m=hap] .m-hap{display:block}
.eq-planet[data-m=neu] .pl{fill:#6fb3e6}.eq-planet[data-m=neu] .cont{fill:#5fae8a}
.eq-planet[data-m=hap] .pl{fill:#3d85f6}.eq-planet[data-m=hap] .cont{fill:#2e9e5b}
.eq-planet .tear{fill:#7ec8ff;opacity:0}
.eq-planet[data-m=sad] .tear{opacity:.95;animation:tear 2.2s ease-in infinite}
@keyframes tear{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}100%{transform:translateY(12px);opacity:0}}
.eq-planet[data-m=sad]{animation:sadshake 3s ease-in-out infinite}
@keyframes sadshake{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.eq-planet[data-m=hap]{animation:hapjump 1.4s ease-in-out infinite}
@keyframes hapjump{50%{transform:translateY(-4px) scale(1.05)}}
.eq-bar{position:relative;display:flex;height:12px;border-radius:99px;overflow:hidden;background:#eaf0ff}
.eq-bar i{display:block;height:100%;transition:width .12s linear}
.eq-bar .L{background:linear-gradient(90deg,#ffb35a,var(--coral))}
.eq-bar .R{background:linear-gradient(90deg,#3d85f6,#5db7ff)}
.eq-bar .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.45;transform:translateX(-1px)}
.eq-lab{display:flex;justify-content:space-between;font:600 9.5px Poppins,sans-serif;color:var(--txt);margin-top:3px}
.eq-st{font:600 11.5px Poppins,sans-serif;color:var(--coral);margin-top:6px;min-height:15px;transition:color .6s}
.eq-ok .eq{border-color:#9edbb6;box-shadow:0 6px 22px rgba(46,158,91,.3)}
.eq-ok .eq-st{color:var(--green)}
.eq-n{margin-top:5px;border-top:1px dashed #e3d9f2;padding-top:5px}
.eq-n small{display:block;font:500 9.5px Poppins,sans-serif;color:var(--txt);text-transform:uppercase;letter-spacing:.04em}
.eq-n b{font:700 17px Poppins,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.pt{pointer-events:none}
@media (max-width:900px){
  .eq{left:0;right:0;margin:0 auto;top:126px;width:min(92vw,340px);padding:7px 12px;display:grid;grid-template-columns:46px 1fr auto;grid-template-areas:"pl bar n" "pl lab n" "pl st n";column-gap:10px;align-items:center;text-align:left;transform:translateY(-8px)}
  .eq-in .eq{transform:none}
  .eq-t{display:none}
  .eq-planet{grid-area:pl;width:46px;height:46px;margin:0}
  .eq-bar{grid-area:bar}.eq-lab{grid-area:lab}.eq-st{grid-area:st;margin:2px 0 0;min-height:0}
  .eq-n{grid-area:n;margin:0;border:0;padding:0;text-align:right}
}
@media (prefers-reduced-motion:reduce){.eq-planet{animation:none!important}}

/* Salud del mundo */
.eq-h{margin-top:6px;text-align:left}
.eq-h small{display:block;font:500 9.5px Poppins,sans-serif;color:var(--txt);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.eq-h .hb{display:block;height:7px;border-radius:99px;background:#eaf0ff;overflow:hidden}
.eq-h .hb i{display:block;height:100%;width:10%;background:hsl(0,72%,50%);border-radius:99px;transition:width .12s linear}
.health .eq-h .hb i{animation:hpulse 1.2s ease-in-out infinite}
@keyframes hpulse{50%{filter:brightness(1.25)}}
.hbeat{stroke-dasharray:260;stroke-dashoffset:260}
#p7h.on .hbeat{animation:hdraw 2.2s ease-out .2s forwards}
@keyframes hdraw{to{stroke-dashoffset:0}}
#p7h.on .hheart{transform-box:fill-box;transform-origin:center;animation:hb 1s ease-in-out infinite}
@keyframes hb{0%,100%{transform:scale(1)}20%{transform:scale(1.14)}40%{transform:scale(1)}}
@media (max-width:900px){.eq{grid-template-areas:"pl bar n" "pl lab n" "pl st n" "pl h n"}.eq-h{grid-area:h;display:flex;align-items:center;gap:6px;margin:3px 0 0}.eq-h small{margin:0;white-space:nowrap}.eq-h .hb{flex:1}}
@media (prefers-reduced-motion:reduce){.hbeat{stroke-dashoffset:0}#p7h.on .hheart,.health .eq-h .hb i{animation:none}}

/* Versión simple: solo titular + mapa; la tarjeta final aparece encima del mapa */
.intro-panel{position:absolute;left:0;right:0;bottom:clamp(30px,6vh,56px);margin:0 auto;width:min(520px,92vw);height:auto;z-index:4}
.intro-panel .p{position:relative;inset:auto;padding:16px 20px;justify-content:center}
.intro-panel .p:not(.on){position:absolute;inset:auto;left:0;right:0;bottom:0;visibility:hidden}
.intro-panel .ibtn{margin:10px 6px 0}
.intro-caption{font-size:clamp(22px,3.8vw,38px)}