/* Layout: abas em página única; hero tipográfico, faixa em movimento, cards em vidro com bordas em degradê */
:root{
  --bg:#07060d;--bg2:#100d1f;--ink:#f8f6ff;--mut:#b0abc9;
  --red:#ff3b30;--crimson:#e0262e;--flame:#ff6a4d;--blue:#4a35d8;--navy:#2a1a66;--sky:#93a5ff;
  --fire:linear-gradient(100deg,#ff4a3d,#e0262e 55%,#c2185b);
  --ice:linear-gradient(100deg,#6f8cff,#4a35d8 60%,#7a2bd6);
  --duo:linear-gradient(100deg,#ff3b30,#8a2be2 55%,#4a35d8);
  --line:rgba(255,255,255,.13);--glass:rgba(255,255,255,.06);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:Manrope,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--body);overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.grad{background:linear-gradient(100deg,#ff3b30,#ff6a4d 55%,#ffd2c8);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3,h4,.logo,.btn,.stat b,.amts button,.tile .ph{font-family:var(--display);text-transform:uppercase;font-weight:800;letter-spacing:.01em}

/* fundo */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.b1{width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;background:var(--blue)}
.b2{width:50vmax;height:50vmax;right:-15vmax;top:10vmax;background:var(--red);opacity:.45;animation-delay:-6s}
.b3{width:45vmax;height:45vmax;left:20vmax;bottom:-25vmax;background:var(--blue);opacity:.4;animation-delay:-11s}
.bg .grain{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;animation:none;
  background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.025) 46px 48px)}
@keyframes drift{to{transform:translate(6vmax,5vmax) scale(1.12)}}
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:0;background:var(--duo);z-index:100}
.spot{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);left:60%;top:30%;
  background:radial-gradient(circle,rgba(74,53,216,.25),transparent 65%)}

/* navegação */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(8,5,26,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo,.fl{display:flex;align-items:center;gap:10px;font-size:26px;line-height:1}
.logo b,.fl b{background:linear-gradient(100deg,#ff3b30,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.15),0 6px 20px -4px var(--blue)}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--fire);color:#fff;font:900 24px var(--display);transform:skewX(-8deg)}
.nav nav{display:flex;gap:4px;align-items:center}
.nav nav a{padding:9px 14px;border-radius:99px;font-weight:700;font-size:14px;color:var(--mut);transition:.25s}
.nav nav a:hover,.nav nav a.on{color:var(--ink);background:var(--glass)}
.nav nav a.on{box-shadow:inset 0 0 0 1px var(--line)}
.nav nav a.cta{background:var(--fire);color:#fff;margin-left:6px}
.nav nav a.cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.burger i{display:block;height:2px;border-radius:2px;background:var(--ink);margin:7px 8px;transition:.3s}

main{position:relative;z-index:2;max-width:1180px;margin:0 auto;overflow-x:clip}
.page{display:none;padding:48px 0 72px}
.page.on{display:block;animation:in .6s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(22px)}}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--sky);font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--red);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px transparent}}
.title{font-size:clamp(46px,8vw,104px);line-height:.95;margin:8px 0 30px;text-wrap:balance}
.sec{font-size:clamp(32px,4vw,48px);line-height:1;margin-bottom:14px}
.lead{max-width:62ch;font-size:clamp(17px,1.8vw,20px);color:#d9d3ee;margin-bottom:8px}

/* hero */
.hero{position:relative;padding:34px 0 26px}
h1{font-size:clamp(54px,9.2vw,140px);line-height:.88;margin:14px 0 26px;text-wrap:balance}
h1 span{display:block;opacity:0;transform:translateX(-36px) skewX(-6deg);animation:slide .8s cubic-bezier(.2,.8,.2,1) forwards}
h1 .l2{animation-delay:.12s}h1 .l3{animation-delay:.24s;-webkit-text-stroke:2px var(--ink);color:transparent}
@keyframes slide{to{opacity:1;transform:none}}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:14px;font-size:20px;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;color:var(--ink)}
.btn.fire{background:var(--fire);color:#fff;box-shadow:0 14px 40px -12px var(--red)}
.btn.fire:hover{transform:translateY(-3px) skewX(-3deg);box-shadow:0 22px 50px -12px var(--crimson)}
.btn.fire::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:.6s}
.btn.fire:hover::after{transform:translateX(120%)}
.btn.glass{background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(8px)}
.btn.glass:hover{background:var(--ice);transform:translateY(-3px)}
.btn.big{display:flex;width:100%;font-size:26px;padding:20px;margin-top:20px}.btn.sm{font-size:16px;padding:10px 20px;margin-top:12px}
.thai{position:absolute;right:0;bottom:-4%;font:800 clamp(90px,17vw,250px)/1 "Noto Sans Thai",sans-serif;color:rgba(255,255,255,.05);pointer-events:none;user-select:none}

.ticker{overflow:hidden;margin:26px -16px;transform:rotate(-1.2deg);background:var(--duo);padding:10px 0;box-shadow:0 20px 60px -20px var(--red)}
.ticker div{display:flex;gap:34px;width:max-content;animation:tick 28s linear infinite}
.ticker span{font:900 28px var(--display);text-transform:uppercase;color:#fff;white-space:nowrap}
.ticker span::after{content:"✦";margin-left:34px}
@keyframes tick{to{transform:translateX(-50%)}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:44px}
.stat{padding:24px;border-radius:22px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);transition:.35s;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0;opacity:.18;transition:.35s}
.s1::before{background:var(--fire)}.s2::before{background:var(--ice)}.s3::before{background:linear-gradient(135deg,var(--flame),var(--crimson))}.s4::before{background:linear-gradient(135deg,var(--blue),var(--red))}
.stat:hover{transform:translateY(-6px)}.stat:hover::before{opacity:.35}
.stat b{position:relative;display:block;font-size:64px;line-height:1;font-weight:900}
.stat span{position:relative;color:#d9d3ee;font-size:14px;display:block;margin-top:6px}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;margin-top:56px;align-items:start}
.about>*{min-width:0}.about p{color:#d9d3ee;margin-bottom:12px;max-width:62ch}
.punch{text-align:center;padding:30px 20px;border-radius:26px;background:linear-gradient(160deg,rgba(122,60,255,.3),rgba(255,45,120,.2));border:1px solid var(--line)}
.punch h3{font-size:34px}.punch p{color:var(--mut);margin:4px auto 20px;font-size:14px}
.bagwrap{display:flex;gap:28px;align-items:flex-end;justify-content:center;flex-wrap:wrap;padding-top:60px}
#bag{width:92px;height:200px;border:0;border-radius:16px 16px 28px 28px;background:linear-gradient(95deg,#b3124b,var(--red) 40%,var(--crimson));cursor:pointer;transform-origin:top center;position:relative;box-shadow:inset 0 0 0 4px rgba(0,0,0,.25),0 20px 40px -15px var(--red);animation:idle 3s ease-in-out infinite}
#bag::before{content:"";position:absolute;left:50%;top:-60px;width:3px;height:60px;background:#8a82aa}
#bag span{position:absolute;inset:40% 0 auto;font:900 22px var(--display);color:rgba(255,255,255,.7);letter-spacing:.08em;writing-mode:vertical-rl;margin:auto;left:0;right:0;top:25%}
#bag.hit{animation:hit .6s}
@keyframes idle{50%{transform:rotate(1.5deg)}}
@keyframes hit{20%{transform:rotate(-24deg)}50%{transform:rotate(14deg)}75%{transform:rotate(-6deg)}}
.meter{width:min(240px,70vw);height:26px;border-radius:99px;background:rgba(0,0,0,.4);border:1px solid var(--line);position:relative;overflow:hidden;margin-bottom:6px}
#meterfill{height:100%;width:0;background:var(--ice);transition:width .25s}
#meterlbl{position:absolute;inset:0;display:grid;place-items:center;font:800 12px var(--body);font-style:normal}

/* linha do tempo */
.timeline{position:relative;padding-left:36px;display:grid;gap:20px;max-width:860px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--sky),var(--blue),var(--red))}
.timeline article{padding:22px 26px;border-radius:20px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);position:relative;transition:.3s}
.timeline article:hover{transform:translateX(6px);border-color:rgba(255,255,255,.3)}
.timeline article::before{content:"";position:absolute;left:-36px;top:28px;width:21px;height:21px;border-radius:50%;background:var(--bg);border:4px solid var(--crimson);box-shadow:0 0 18px var(--crimson)}
.timeline time{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--flame)}
.timeline h3{font-size:30px;line-height:1.05;margin:4px 0 6px}.timeline p{color:#d9d3ee}
.foot{color:var(--mut);font-size:13px;margin-top:22px;max-width:70ch}

/* conquistas */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.chip{padding:9px 18px;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:700 14px var(--body);cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--sky)}.chip.on{background:var(--ice);border-color:transparent}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{position:relative;padding:24px;border-radius:22px;background:var(--bg2);transition:transform .2s;transform-style:preserve-3d;overflow:hidden;min-width:0}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--fire);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;transition:.3s}
.card:hover::before{opacity:1}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0),rgba(255,106,77,.2),transparent 55%);opacity:0;transition:.3s}
.card:hover::after{opacity:1}
.badge{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;font:900 26px var(--display);color:#fff;margin-bottom:10px}
.g .badge{background:linear-gradient(135deg,#fff3b0,#ffd23f,#e0902a);color:#1a0610}.s .badge{background:linear-gradient(135deg,#fff,#b9b4d6);color:#1a0610}
.b .badge{background:linear-gradient(135deg,#ffd0a0,#e08a3c);color:#1a0610}.t .badge{background:var(--ice);color:#fff}.o .badge{background:var(--fire)}
.card small{display:block;color:var(--sky);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.card h3{font-size:28px;line-height:1.05;margin:4px 0 8px}.card p{color:#d9d3ee;font-size:15px}

/* galeria */
.grid{columns:3 240px;gap:14px}
.tile{break-inside:avoid;margin-bottom:14px;border-radius:20px;overflow:hidden;position:relative;cursor:zoom-in;transition:.35s}
.tile:hover{transform:scale(1.02) rotate(-.4deg)}.tile img{width:100%;display:block}
.tile .ph{display:grid;place-items:center;text-align:center;font-size:26px;padding:20px;color:rgba(255,255,255,.9);background:linear-gradient(135deg,hsl(var(--h) 85% 48%),hsl(calc(var(--h) + 60) 80% 30%))}
.tile.vid{cursor:default;background:#000}.tile.vid:hover{transform:none}.tile video{width:100%;display:block;max-height:80vh}
.tile.vid figcaption{position:static;padding:10px 14px 12px;background:rgba(0,0,0,.6)}
.founder{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(18px,3vw,34px);align-items:center;margin:26px 0 30px;padding:clamp(16px,2.5vw,24px);border-radius:28px;background:linear-gradient(rgba(14,10,34,.9),rgba(14,10,34,.9)) padding-box,linear-gradient(120deg,#ff4a3d,#ffb547 45%,#6f8cff) border-box;border:2px solid transparent}
.founder img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:20px;display:block}
.founder h3{font-size:clamp(30px,4vw,44px);line-height:1;margin:6px 0 14px}
.founder p.txt{color:#e4def6;font-size:clamp(15px,1.6vw,17px);line-height:1.65}
@media(max-width:700px){.founder{grid-template-columns:1fr}.founder img{max-height:420px}}
.tile figcaption{position:absolute;inset:auto 0 0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:13px;font-weight:700}

/* equipe */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.person{padding:28px 22px;border-radius:24px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);text-align:center;transition:.35s;min-width:0}
.person:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.3)}
.person.ph{opacity:.75;border-style:dashed}
.avatar{width:104px;height:104px;margin:0 auto 14px;border-radius:50%;padding:4px;background:conic-gradient(var(--red),var(--blue),#fff,var(--blue),var(--red));animation:spin 8s linear infinite}
.avatar span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--bg2);font:900 40px var(--display);animation:spin 8s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.person h3{font-size:28px;line-height:1.05}.person p{color:var(--mut);font-size:14px;min-height:46px;margin-top:4px}
.ig{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:10px 18px;border-radius:99px;background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);font-weight:800;font-size:14px;transition:.25s}
.social{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.soc{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 26px -12px rgba(0,0,0,.8)}
.soc svg{width:52%;height:52%}
.soc:hover,.soc:focus-visible{transform:translateY(-4px) scale(1.1)}
.soc.instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.soc.youtube{background:#ff0000}.soc.youtube:hover{box-shadow:0 14px 34px -10px #ff0000}
.soc.tiktok{background:#000;box-shadow:-2px -2px 0 #25f4ee,2px 2px 0 #fe2c55}.soc.tiktok:hover{box-shadow:-3px -3px 0 #25f4ee,3px 3px 0 #fe2c55}
.soc.facebook{background:#1877f2}.soc.facebook:hover{box-shadow:0 14px 34px -10px #1877f2}
.soc.instagram:hover{box-shadow:0 14px 34px -10px #d6249f}
.social.big .soc{width:64px;height:64px}
footer .social{justify-content:center;margin:14px 0 6px}
.igs{display:flex;flex-direction:column;align-items:center;gap:6px}.igs .ig{margin-top:6px;max-width:100%;overflow-wrap:anywhere;font-size:12px;padding:8px 12px}
.ig:hover{transform:scale(1.07)}.ig.pending{background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);color:var(--mut)}

/* apoio */
.donate{max-width:660px;margin:30px 0 0;padding:clamp(20px,4vw,36px);border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 40px 90px -40px var(--red)}
.cur{display:flex;gap:4px;background:rgba(0,0,0,.35);padding:4px;border-radius:12px;width:fit-content;margin-bottom:18px}
.cur button{border:0;background:none;color:var(--mut);padding:8px 18px;border-radius:9px;font:800 14px var(--body);cursor:pointer}.cur .on{background:var(--ice);color:#fff}
.amtq{display:block;font:800 clamp(24px,4.5vw,34px)/1.1 var(--display);text-transform:uppercase;margin:4px 0 14px;background:linear-gradient(100deg,#fff,#ffd2c9 40%,#93a5ff);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.amtbox{position:relative;display:flex;align-items:center;gap:10px;padding:10px 22px;border-radius:24px;background:linear-gradient(rgba(10,7,26,.92),rgba(10,7,26,.92)) padding-box,linear-gradient(100deg,#ff4a3d,#ffb547,#6f8cff,#c2185b) border-box;border:3px solid transparent;background-size:100% 100%,300% 100%;animation:amtflow 6s linear infinite;transition:transform .25s,box-shadow .25s}
.amtbox:focus-within{transform:scale(1.02);box-shadow:0 0 0 6px rgba(255,74,61,.18),0 24px 60px -20px #ff4a3d}
.amtbox.lit{box-shadow:0 24px 70px -18px #ff6a4d}
.amtbox .sym{font:800 clamp(30px,6vw,44px) var(--display);color:var(--flame)}
.amtbox input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:800 clamp(44px,10vw,72px)/1.1 var(--display);padding:6px 0;-moz-appearance:textfield}
.amtbox input::-webkit-outer-spin-button,.amtbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amtbox input::placeholder{color:rgba(255,255,255,.22)}
.amtbox .spark{font-size:clamp(30px,6vw,42px);transition:transform .3s}
.amtbox.lit .spark{animation:punch .9s ease-in-out infinite}
.amtbox.nudge{animation:amtflow 6s linear infinite,shake .45s}
.cheer{min-height:1.5em;margin:12px 4px 18px;font-weight:700;color:#ffd2c9}
@keyframes amtflow{to{background-position:0 0,300% 0}}
@keyframes punch{0%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(6px) rotate(-12deg) scale(1.15)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.notice{margin-top:12px;padding:12px 16px;border-radius:12px;background:rgba(255,106,77,.14);color:#ffb4a5;font-size:14px;font-weight:600}
.small{font-size:12px;color:var(--mut);margin-top:12px}
.pix{margin-top:12px}.pix button{background:none;border:1px dashed var(--line);color:var(--ink);padding:12px 18px;border-radius:12px;cursor:pointer;font:700 14px var(--body)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px}
.tiers>div{padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--glass)}
.tiers h4{font-size:28px;background:linear-gradient(100deg,#ff3b30,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.tiers p{color:#d9d3ee;font-size:14px}

footer{position:relative;z-index:2;text-align:center;padding:44px 0 36px;border-top:1px solid var(--line);color:var(--mut);display:grid;gap:8px;justify-items:center}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;background:var(--bg2);border:1px solid var(--line);padding:12px 20px;border-radius:99px;font-weight:700;font-size:14px;z-index:120;transition:.3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.lightbox{position:fixed;inset:0;z-index:110;background:rgba(5,3,15,.92);display:none;place-items:center;padding:20px}.lightbox.on{display:grid}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:14px}.lightbox figure{text-align:center}.lightbox figcaption{margin-top:10px}
.lightbox button{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:22px;background:none;border:0;color:#fff;font-size:44px;cursor:pointer}

@media(max-width:860px){
  .about{grid-template-columns:1fr}
  .burger{display:block}
  .nav nav{position:fixed;top:calc(62px + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(8,5,26,.97);padding:14px max(16px,env(safe-area-inset-left,0px));gap:4px;transform:translateY(-130%);transition:.35s;border-bottom:1px solid var(--line)}
  body.open .nav nav{transform:none}.nav nav a{padding:14px;font-size:17px}.nav nav a.cta{margin:6px 0 0;text-align:center}
  .spot{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}h1 span{opacity:1;transform:none}}

/* logomarca */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center}
.hero>*{min-width:0}
.hero .thai{grid-column:1/-1}
.crest{position:relative;display:grid;place-items:center;perspective:900px}
.crest::before{content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,var(--red),var(--blue),var(--red));filter:blur(44px);opacity:.6;animation:spin 14s linear infinite}
.crest img{position:relative;width:min(100%,400px);aspect-ratio:1;border-radius:50%;box-shadow:0 30px 80px -20px rgba(74,53,216,.8);transition:transform .15s;animation:float 6s ease-in-out infinite;transform-style:preserve-3d}
@keyframes float{50%{translate:0 -12px}}
.fl .brand{width:52px;height:52px}
@media(max-width:860px){.hero{grid-template-columns:1fr}.crest{order:-1;justify-self:center;width:min(60vw,260px)}.logo{font-size:23px}}

/* idiomas */
.langs{display:flex;gap:6px;margin-left:auto;margin-right:8px}
.lang{width:36px;height:26px;padding:0;border-radius:7px;border:2px solid transparent;background:none;cursor:pointer;overflow:hidden;opacity:.55;transition:.25s;box-shadow:0 0 0 1px var(--line)}
.lang svg{display:block;width:100%;height:100%}
.lang:hover{opacity:1;transform:translateY(-2px)}
.lang.on{opacity:1;border-color:#fff;box-shadow:0 0 14px -2px var(--red)}
.nav nav{margin-left:auto}
.langs{margin-left:0}
:lang(th){--display:"Noto Sans Thai","Big Shoulders Display",sans-serif;--body:"Noto Sans Thai",Manrope,sans-serif}
:lang(th) h1{font-size:clamp(46px,7.4vw,112px);line-height:1.18}
:lang(th) .title{line-height:1.2}
:lang(th) h2,:lang(th) h3,:lang(th) h4,:lang(th) .stat b{line-height:1.25;font-weight:800}
:lang(th) body,:lang(th) p{line-height:1.8}
@media(max-width:860px){.langs{margin-left:auto;gap:4px}.lang{width:30px;height:22px}.logo{font-size:20px}.brand{width:36px;height:36px}.burger{width:36px}.nav{gap:8px}}