:root{
  --void:#0B0820; --void-2:#130F33; --uv:#A06BFF; --cyan:#0EDBD2; --ink:#000; --paper:#F4F6FF;
  --muted:#A9A6C9; --line:rgba(160,107,255,.22); --ok:#3DDC97; --erro:#FF5C7A;
  --lol-navy:#091428; --lol-blue:#0AC8B9; --lol-gold:#C8AA6E; --lol-gold-2:#F0E6D2;
  --val-red:#FF4655; --val-dark:#0F1923; --val-bone:#ECE8E1;
  --f-display:"Chakra Petch",system-ui,sans-serif; --f-body:"Barlow",system-ui,sans-serif; --f-lol:"Cinzel",Georgia,serif;
  --wrap:1180px;--barra:38px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + var(--barra));-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--paper);font:400 1.0625rem/1.6 var(--f-body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* topo */
.top{position:fixed;top:var(--barra);left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(var(--void),rgba(11,8,32,.88));backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;height:68px}
.top .brand img{height:44px;width:auto}
.nav{display:flex;gap:1.4rem;margin-left:auto;font:600 .95rem var(--f-display)}
.nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--paper)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 1rem var(--f-display);text-decoration:none;
  padding:.8rem 1.4rem;border:0;cursor:pointer;color:var(--ink);background:var(--paper);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.btn-brand{background:linear-gradient(100deg,var(--uv),var(--cyan))}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px currentColor;clip-path:none}
.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.85}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid var(--line);color:var(--paper);width:44px;height:44px;font-size:1.3rem;cursor:pointer}

/* hero versus */
.versus{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(var(--n,2),1fr);padding-top:calc(68px + var(--barra));overflow:hidden;isolation:isolate}
.side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:3rem clamp(1.25rem,4vw,4rem) 9rem;overflow:hidden}
.side .arte{position:absolute;z-index:-1;pointer-events:none}
.side .arte-svg{width:min(92%,560px);top:10%;opacity:.55;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 92%);mask-image:linear-gradient(#000 55%,transparent 92%)}
.side .arte-foto{inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.side::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--fundo,var(--void)) 18%,transparent 70%)}
.side h2{line-height:1;margin-bottom:.6rem;max-width:9ch}
.side p{color:var(--muted);max-width:30ch}
.side .slots{margin-top:1.1rem;font:600 .95rem var(--f-display)}
.side .slots b{font-size:1.6rem;color:var(--cor)}
.side.esq .arte-svg{left:-6%}
.side.dir .arte-svg{right:-6%}
.side.centro .arte-svg{left:50%;transform:translateX(-50%)}
.side.lol{--fundo:var(--lol-navy);background:radial-gradient(120% 80% at 10% 100%,rgba(10,200,185,.22),transparent 60%),linear-gradient(160deg,#0d1f3c,var(--lol-navy) 70%)}
.side.lol h2{font:700 clamp(2rem,4vw,3.4rem) var(--f-lol);color:var(--lol-gold-2);letter-spacing:.02em}
.side.val{--fundo:var(--val-dark);background:linear-gradient(200deg,#2a0f17,var(--val-dark) 65%)}
.side.val h2{font:700 clamp(2.4rem,5vw,4.2rem) var(--f-display);color:var(--val-bone);text-transform:uppercase;letter-spacing:-.01em}
.side.generico{--fundo:var(--void-2);background:linear-gradient(180deg,var(--void-2),var(--void))}
.side.generico h2{font:700 clamp(2rem,4.4vw,3.6rem) var(--f-display)}
.side.dir{text-align:right;align-items:flex-end}
.side.centro{text-align:center;align-items:center}
.side.centro p{margin-inline:auto}
.versus .sep{position:absolute;top:0;bottom:0;width:14px;transform:translateX(-50%) skewX(-8deg);
  background:linear-gradient(var(--uv),var(--cyan));z-index:2;box-shadow:0 0 40px rgba(14,219,210,.55)}
.emblem{position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,-50%);width:min(380px,30vw);text-align:center}
.emblem img{width:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.ribbon{display:inline-block;margin-top:-.4rem;background:var(--ink);color:var(--paper);
  box-shadow:0 0 0 4px var(--paper),8px 8px 0 4px var(--uv);transform:rotate(-3deg);
  padding:.55rem 1.4rem;font:700 clamp(1.05rem,2vw,1.45rem) var(--f-display);letter-spacing:.04em}
.ribbon small{display:block;font-size:.72em;color:var(--cyan);letter-spacing:.02em}
.lobby{position:absolute;z-index:4;left:50%;bottom:1.6rem;transform:translateX(-50%);width:min(760px,100% - 2rem);
  display:flex;align-items:center;gap:1.2rem;justify-content:space-between;flex-wrap:wrap;
  background:rgba(11,8,32,.86);border:1px solid var(--line);padding:1rem 1.25rem;backdrop-filter:blur(8px)}
.lobby .label{font:600 .9rem var(--f-display);color:var(--muted)}
.count{display:flex;gap:.9rem;font:700 clamp(1.4rem,3vw,2rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.count span{display:flex;flex-direction:column;align-items:center;min-width:2.6ch}
.count small{font:500 .8rem var(--f-body);color:var(--muted);margin-top:.3rem}

/* seções */
section{padding:clamp(4rem,9vw,7rem) 0}
.alt{background:var(--void-2)}
.head{max-width:60ch;margin-bottom:2.5rem}
.head h2,.page-title{font:700 clamp(1.9rem,4vw,2.8rem)/1.1 var(--f-display);margin-bottom:.6rem}
.head p{color:var(--muted)}

/* modalidades */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.mod{position:relative;padding:1.8rem;display:flex;flex-direction:column;gap:1rem;min-height:360px;color:var(--cor)}
.mod h3{line-height:1.05}
.mod dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.98rem}
.mod dt{color:var(--muted)}
.mod dd{font-weight:600;color:var(--paper)}
.mod p{color:var(--paper)}
.meter{height:10px;background:rgba(255,255,255,.08);position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:currentColor}
.meter-txt{display:flex;justify-content:space-between;font:600 .9rem var(--f-display);margin-top:.4rem}
.mod .acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:.75rem}
.mod .btn-mod{background:var(--cor);color:var(--ink)}
.mod.lol{background:linear-gradient(170deg,#10284a,var(--lol-navy));border:1px solid rgba(200,170,110,.55)}
.mod.lol::before,.mod.lol::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--lol-gold)}
.mod.lol::before{top:8px;left:8px;border-right:0;border-bottom:0}
.mod.lol::after{bottom:8px;right:8px;border-left:0;border-top:0}
.mod.lol h3{font:700 1.75rem var(--f-lol);color:var(--lol-gold-2)}
.mod.lol dd,.mod.lol p{color:var(--lol-gold-2)}
.mod.lol .btn-mod{background:linear-gradient(var(--lol-gold),#a8884e);color:var(--lol-navy)}
.mod.val{background:var(--val-dark);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px))}
.mod.val::before{content:"";position:absolute;top:0;right:0;width:34px;height:34px;background:var(--val-red);clip-path:polygon(0 0,100% 100%,100% 0)}
.mod.val h3{font:700 2rem var(--f-display);text-transform:uppercase;color:var(--val-bone)}
.mod.val dd,.mod.val p{color:var(--val-bone)}
.mod.val .btn-mod{background:var(--val-red);color:#fff}
.mod.generico{background:var(--void-2);border:1px solid var(--line)}
.mod.generico h3{font:700 1.75rem var(--f-display);color:var(--paper)}
.mod.add{border:2px dashed var(--line);color:var(--muted);align-items:flex-start;justify-content:center;background:none}
.mod.add h3{font:700 1.5rem var(--f-display);color:var(--paper)}
.mod.add p{color:var(--muted)}
.mod.add .plus{font:700 3rem/1 var(--f-display);background:linear-gradient(100deg,var(--uv),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.selo{display:inline-block;font:700 .8rem var(--f-display);padding:.2rem .6rem;background:rgba(255,255,255,.1);color:var(--paper);align-self:flex-start}
.selo.aberta{background:var(--ok);color:var(--ink)}

/* passos */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s;border-top:1px solid var(--line)}
.steps li{list-style:none;padding:1.6rem 1.4rem 1.6rem 0;border-bottom:1px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s);display:block;font:700 2.6rem/1 var(--f-display);color:transparent;-webkit-text-stroke:1.5px var(--cyan);margin-bottom:.8rem}
.steps h3{font:700 1.2rem var(--f-display);margin-bottom:.35rem}
.steps p{color:var(--muted);font-size:.98rem}

/* cronograma */
.crono{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;align-items:start}
.timeline{position:relative;margin-left:.6rem;border-left:2px solid var(--line)}
.tl{position:relative;padding:0 0 2rem 2rem}
.tl::before{content:"";position:absolute;left:-9px;top:.35rem;width:16px;height:16px;background:var(--void-2);border:2px solid var(--muted);transform:rotate(45deg)}
.tl.set::before{background:linear-gradient(var(--uv),var(--cyan));border-color:transparent}
.tl time{font:700 1.35rem var(--f-display)}
.tl.tbd time{color:var(--muted);font-size:1.05rem}
.tl h3{font:600 1.1rem var(--f-body)}
.tl p{color:var(--muted);font-size:.96rem}

/* chaves */
.tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}
.tab{font:700 1rem var(--f-display);padding:.65rem 1.2rem;cursor:pointer;background:transparent;color:var(--muted);border:2px solid var(--line)}
.tab[aria-selected="true"]{color:var(--paper);border-color:var(--tab,var(--cyan));background:color-mix(in srgb,var(--tab,var(--cyan)) 18%,transparent)}
.bk-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.bk-bar p{color:var(--muted);font-size:.98rem}
.bk-nav{display:flex;gap:.4rem}
.bk-nav button{width:42px;height:42px;border:2px solid var(--line);background:var(--void-2);color:var(--paper);font:700 1.1rem var(--f-display);cursor:pointer}
.bk-nav button:hover:not(:disabled){border-color:var(--acc,var(--cyan))}
.bk-nav button:disabled{opacity:.35;cursor:default}
.bk-shell{position:relative;border:1px solid var(--line);background:var(--void-2)}
.bk-shell::before,.bk-shell::after{content:"";position:absolute;top:0;bottom:12px;width:60px;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}
.bk-shell::before{left:0;background:linear-gradient(90deg,var(--void-2),transparent)}
.bk-shell::after{right:0;background:linear-gradient(270deg,var(--void-2),transparent)}
.bk-shell.esq::before,.bk-shell.dir::after{opacity:1}
.bracket-scroll{overflow-x:auto;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--acc,var(--uv)) transparent}
.bracket-scroll.arrastando{cursor:grabbing;user-select:none}
.bracket-scroll::-webkit-scrollbar{height:6px}
.bracket-scroll::-webkit-scrollbar-track{background:transparent}
.bracket-scroll::-webkit-scrollbar-thumb{background:var(--acc,var(--uv));border-radius:0}
.bk-panel[hidden]{display:none}
.bk{padding:1.4rem;min-width:max-content}
.bk h4{font:700 1.05rem var(--f-display);margin:0 0 .8rem;color:var(--acc,var(--cyan))}
.bk h4:not(:first-child){margin-top:2rem}
.rounds{display:flex;gap:2rem}
.round{display:flex;flex-direction:column;min-width:180px;max-width:200px}
.round>b{font:600 .85rem var(--f-display);color:var(--muted);margin-bottom:.6rem}
.round .ms{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:.8rem}
.match{background:var(--void);border-left:3px solid var(--acc,var(--cyan));font-size:.88rem;position:relative}
.match .id{display:flex;justify-content:space-between;gap:.5rem;padding:.25rem .6rem;color:var(--muted);font:600 .8rem var(--f-display);border-bottom:1px solid rgba(255,255,255,.06)}
.match .t{display:flex;justify-content:space-between;gap:.5rem;padding:.35rem .6rem}
.match .t span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match .t+.t{border-top:1px solid rgba(255,255,255,.06)}
.match .t span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.match .t.vaga span:first-child,.match .t.bye span:first-child{color:var(--muted)}
.match .t.venc{font-weight:600}
.match .t.venc span:last-child{color:var(--acc,var(--cyan))}
.match .t.perd{opacity:.5}
.match.final{border-left-width:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,var(--void)),var(--void))}
.podio{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.podio div{padding:1rem 1.4rem;background:var(--void);border-top:3px solid var(--acc,var(--cyan));min-width:180px}
.podio small{display:block;color:var(--muted);font:600 .8rem var(--f-display)}
.podio strong{font:700 1.2rem var(--f-display)}

/* regulamentos, galeria */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.doc{display:flex;gap:1rem;align-items:center;padding:1.2rem 1.3rem;text-decoration:none;border:1px solid var(--line);background:var(--void-2);transition:border-color .2s}
.doc:hover{border-color:var(--cyan)}
.doc .ic{width:44px;height:52px;flex:none;background:var(--c);clip-path:polygon(0 0,70% 0,100% 25%,100% 100%,0 100%)}
.doc b{display:block;font:700 1.05rem var(--f-display)}
.doc span{color:var(--muted);font-size:.92rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:.6rem}
.gallery figure{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(160,107,255,.35),rgba(14,219,210,.25)),var(--void-2);display:flex;align-items:flex-end;padding:.7rem;font-size:.85rem;color:var(--muted)}
.gallery figure:first-child{grid-column:span 2;grid-row:span 2}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:relative;z-index:1;color:var(--paper);text-shadow:0 1px 6px #000}

/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font:600 1.12rem var(--f-display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--cyan);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 1.2rem;color:var(--muted);max-width:68ch}

/* chamada, rodapé */
.cta{background:linear-gradient(100deg,var(--uv),var(--cyan));color:var(--ink);padding:3.2rem 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cta h2{font:700 clamp(1.6rem,3.4vw,2.4rem)/1.1 var(--f-display);max-width:22ch}
.cta .btn{background:var(--ink);color:var(--paper)}
footer{padding:3rem 0 calc(2.5rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;gap:2rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer img{height:56px;width:auto}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}

/* páginas internas e formulário */
.pagina{padding-top:calc(68px + var(--barra) + 3rem)}
.form{display:grid;gap:2rem;max-width:880px}
.form fieldset{border:1px solid var(--line);padding:1.5rem;display:grid;gap:1rem;background:var(--void-2)}
.form legend{font:700 1.15rem var(--f-display);padding:0 .5rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.campo{display:grid;gap:.35rem}
.campo label{font:600 .95rem var(--f-display)}
.campo small{color:var(--muted);font-size:.85rem}
.campo input,.campo select,.campo textarea{font:inherit;color:var(--paper);background:var(--void);border:1px solid var(--line);padding:.7rem .8rem;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--cyan);outline:none}
.campo.erro input{border-color:var(--erro)}
.jog{display:grid;grid-template-columns:2.2rem 1fr 1fr;gap:.6rem;align-items:center}
.jog span{font:700 .95rem var(--f-display);color:var(--muted)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.check input{width:20px;height:20px;margin-top:.2rem;accent-color:var(--cyan)}
.hp{position:absolute;left:-9999px}
.alerta{padding:1rem 1.2rem;border-left:4px solid var(--cyan);background:var(--void-2);margin-bottom:1.2rem}
.alerta-erro{border-color:var(--erro)}
.alerta-ok{border-color:var(--ok)}
.alerta ul{margin:.4rem 0 0 1.2rem}
.protocolo{font:700 clamp(2rem,6vw,3.4rem) var(--f-display);letter-spacing:.06em;background:linear-gradient(100deg,var(--uv),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.regulamento{max-width:78ch}
.regulamento h2{font:700 1.35rem var(--f-display);margin:2rem 0 .6rem}
.regulamento p,.regulamento li{color:#d7d5ea;margin-bottom:.6rem}
.regulamento ul,.regulamento ol{margin:0 0 1rem 1.3rem}

@media (prefers-reduced-motion:no-preference){
  .versus .side.esq{animation:inL .9s cubic-bezier(.2,.8,.2,1) both}
  .versus .side.dir{animation:inR .9s cubic-bezier(.2,.8,.2,1) both}
  .emblem{animation:pop .6s .7s cubic-bezier(.2,1.4,.4,1) both}
  .versus .sep{animation:bar .5s .5s ease-out both}
  @keyframes inL{from{transform:translateX(-12%);opacity:0}}
  @keyframes inR{from{transform:translateX(12%);opacity:0}}
  @keyframes pop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}
  @keyframes bar{from{transform:translateX(-50%) skewX(-8deg) scaleY(0)}}
}

@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
  .top .btn-brand{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--void);padding:1.2rem 1.25rem;border-bottom:1px solid var(--line)}
  .versus{grid-template-columns:1fr;min-height:0;padding-top:calc(68px + var(--barra))}
  .versus .emblem{order:0;position:relative;left:auto;top:auto;transform:none;width:min(300px,78vw);margin:1.5rem auto -1rem}
  .side{min-height:300px;padding:2rem 1.25rem;justify-content:flex-end}
  .versus .side{text-align:left !important;align-items:flex-start !important}
  .side .arte-svg{width:70%;top:-5%;left:auto !important;right:-8% !important;opacity:.45}
  .versus .sep{display:none}
  .lobby{position:relative;left:auto;bottom:auto;transform:none;width:auto;margin:1.25rem}
  @media (prefers-reduced-motion:no-preference){@keyframes pop{from{transform:scale(.6);opacity:0}}}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .jog{grid-template-columns:1fr}
  .jog span{margin-top:.6rem}
}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;padding:1.5rem;margin-top:1rem;border:1px solid var(--line);background:var(--void-2)}
.ficha dt{color:var(--muted)}
.ficha dd{font-weight:500}
@media (max-width:600px){.ficha{grid-template-columns:1fr;gap:.15rem}.ficha dd{margin-bottom:.6rem}}
.match .t.bye,.match .t.bye.venc{font-weight:400;color:var(--muted)}

/* ================= camada gamer ================= */
/* textura de monitor: linhas de varredura bem sutis */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}

/* títulos com aberração cromática e marcador de HUD */
.head h2,.page-title{position:relative;text-shadow:-2px 0 rgba(160,107,255,.55),2px 0 rgba(14,219,210,.45)}
.head h2::before,.page-title::before{content:"";display:block;width:56px;height:6px;margin-bottom:.9rem;
  background:linear-gradient(90deg,var(--uv),var(--cyan));clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);
  box-shadow:0 0 18px rgba(14,219,210,.6)}
.head{position:relative;padding-left:1.25rem;border-left:1px solid var(--line)}

/* botões: brilho que atravessa ao passar o mouse + glow */
.btn{position:relative;overflow:hidden;transition:filter .2s,transform .15s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .45s}
.btn:hover::after{left:130%}
.btn:hover{filter:drop-shadow(0 0 12px rgba(14,219,210,.55))}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"]{filter:grayscale(.4);opacity:.75}
.btn[aria-disabled="true"]::after{display:none}

/* faixa de transmissão abaixo da abertura */
.ticker{overflow:hidden;background:#000;border-block:2px solid transparent;
  border-image:linear-gradient(90deg,var(--uv),var(--cyan)) 1;white-space:nowrap}
.ticker-trilho{display:inline-flex;gap:1.6rem;align-items:center;padding:.7rem 0;font:700 1.05rem var(--f-display);letter-spacing:.06em}
.ticker i{font-style:normal;color:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .ticker-trilho{animation:ticker 40s linear infinite}
  @keyframes ticker{to{transform:translateX(-50%)}}
  .live{animation:pisca 1.4s steps(2) infinite}
  @keyframes pisca{50%{opacity:.25}}
}

/* contagem como cronômetro de lobby */
.lobby{border:1px solid transparent;background:linear-gradient(rgba(11,8,32,.92),rgba(11,8,32,.92)) padding-box,
  linear-gradient(90deg,var(--uv),var(--cyan)) border-box;box-shadow:0 0 40px rgba(160,107,255,.25)}
.lobby .label{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.live{width:9px;height:9px;border-radius:50%;background:#FF4655;box-shadow:0 0 10px #FF4655}
.count span{background:#000;border:1px solid var(--line);padding:.45rem .55rem .35rem;min-width:3.4ch;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.count b{text-shadow:0 0 14px rgba(14,219,210,.6)}

/* cards com cantos de HUD e brilho ao passar o mouse */
.mod{transition:transform .2s,filter .2s}
.mod:not(.add):hover{transform:translateY(-4px);filter:drop-shadow(0 10px 24px color-mix(in srgb,var(--cor) 45%,transparent))}
.mod.generico::before,.mod.generico::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--cor)}
.mod.generico::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.mod.generico::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* modalidades sobre um piso de grade em perspectiva */
#modalidades{position:relative;isolation:isolate;overflow:hidden}
#modalidades::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-10%;height:60%;z-index:-1;opacity:.35;
  background:linear-gradient(transparent 0 49%,rgba(160,107,255,.5) 50%,transparent 51%) 0 0/100% 48px,
             linear-gradient(90deg,transparent 0 49%,rgba(14,219,210,.4) 50%,transparent 51%) 0 0/64px 100%;
  transform:perspective(500px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%)}

/* passos como fases de jogo, com barra de XP */
.fases{border-top:0;gap:1rem;position:relative}
.fases li{border:1px solid var(--line);background:var(--void-2);padding:1.4rem;position:relative}
.fases li::before{content:"Fase " counter(s);font:700 .9rem var(--f-display);-webkit-text-stroke:0;color:var(--ink);
  display:inline-block;padding:.25rem .7rem;margin-bottom:.9rem;background:linear-gradient(90deg,var(--uv),var(--cyan));
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.fases li::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--uv),var(--cyan))}
.fases li:nth-child(1)::after{width:25%}.fases li:nth-child(2)::after{width:50%}
.fases li:nth-child(3)::after{width:75%}.fases li:nth-child(4)::after{width:100%}

/* seções alternadas com corte diagonal */
.alt{clip-path:polygon(0 3vw,100% 0,100% calc(100% - 3vw),0 100%);padding-block:calc(clamp(4rem,9vw,7rem) + 3vw)}

/* chaves: partidas como placas de placar */
.match{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.match .t.venc{background:linear-gradient(90deg,color-mix(in srgb,var(--acc,var(--cyan)) 22%,transparent),transparent)}

/* ================= acessibilidade ================= */
.pular{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--cyan);color:#000;padding:.7rem 1rem;font:700 1rem var(--f-display)}
.pular:focus{top:1rem}
:focus-visible{outline:3px solid #FFD84D;outline-offset:3px}
.dica-form{color:var(--muted)}
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px}
html.a11y-parado *,html.a11y-parado *::before,html.a11y-parado *::after{animation:none !important;transition:none !important}
html.a11y-contraste body::after{display:none}
html.a11y-contraste{--muted:#E6E6F0;--line:rgba(255,255,255,.6);--void-2:#000;--void:#000}
html.a11y-contraste body{background:#000}
html.a11y-contraste .side .arte{opacity:.15}
html.a11y-contraste .head h2,html.a11y-contraste .page-title{text-shadow:none}
html.a11y-contraste a:not(.btn){color:#FFD84D}
html.a11y-contraste .alt{clip-path:none}
[vw]{z-index:110}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}.mod:not(.add):hover{transform:none}}
@media (max-width:900px){.alt{clip-path:none;padding-block:clamp(4rem,9vw,7rem)}.head{padding-left:.9rem}}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--paper);
  -webkit-box-shadow:0 0 0 1000px var(--void) inset;caret-color:var(--paper);transition:background-color 9999s}

/* ================= v1.2 ================= */
/* barra de acessibilidade acima do cabeçalho */
.a11y-barra{position:fixed;top:0;left:0;right:0;height:var(--barra);z-index:60;background:#000;border-bottom:1px solid var(--line);font-size:.85rem}
.a11y-barra .wrap{height:100%;display:flex;align-items:center;gap:.4rem;overflow-x:auto;scrollbar-width:none}
.a11y-barra .wrap::-webkit-scrollbar{display:none}
.a11y-barra .pular{position:static;padding:.2rem .5rem;background:none;color:var(--cyan);font:600 .85rem var(--f-body);white-space:nowrap;margin-right:auto}
.a11y-rotulo{color:var(--muted);margin-right:.2rem;white-space:nowrap}
.a11y-barra button{flex:none;font:600 .82rem var(--f-body);color:var(--paper);background:transparent;border:1px solid var(--line);padding:.2rem .55rem;cursor:pointer;white-space:nowrap}
.a11y-barra button:hover{border-color:var(--cyan)}
.a11y-barra button[aria-pressed="true"]{background:rgba(14,219,210,.18);border-color:var(--cyan)}
[vw] [vw-access-button]{top:calc(50% + var(--barra)) !important}

/* hero em duas metades cortadas pela mesma diagonal da barra neon */
.versus.duo{display:block;height:max(100svh,660px);min-height:0;padding:0;--d:calc(max(100svh,660px) * .0703)}
.versus.duo .side{position:absolute;inset:0;padding:calc(68px + var(--barra) + 2rem) clamp(1.25rem,4vw,4rem) clamp(2rem,6vh,4rem)}
.versus.duo .side.esq{clip-path:polygon(0 0,calc(50% + var(--d)) 0,calc(50% - var(--d)) 100%,0 100%)}
.versus.duo .side.dir{clip-path:polygon(calc(50% + var(--d)) 0,100% 0,100% 100%,calc(50% - var(--d)) 100%)}
.versus.duo .side-txt{max-width:min(30rem,calc(50% - var(--d) - 4rem));position:relative;z-index:1}
.versus.duo .side.dir .side-txt{margin-left:auto}
.side .arte-wrap{position:absolute;top:calc(68px + var(--barra));bottom:0;width:50%;display:grid;place-items:center;pointer-events:none;z-index:-1}
.side.esq .arte-wrap{left:0}
.side.dir .arte-wrap{right:0}
.versus .side .arte{position:static;transform:none}
.versus .side .arte-svg{width:min(78%,560px);top:auto;left:auto !important;right:auto !important;opacity:.85;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.versus .side .arte-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.side::after{background:linear-gradient(to top,var(--fundo,var(--void)) 12%,transparent 55%)}
.versus.duo .side.esq .arte-wrap{left:0;width:calc(50% - var(--d))}
.versus.duo .side.dir .arte-wrap{right:0;width:calc(50% - var(--d))}
.corte{position:absolute;inset:0;z-index:2;pointer-events:none;filter:drop-shadow(0 0 16px rgba(14,219,210,.75))}
.corte::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--uv),var(--cyan));
  clip-path:polygon(calc(50% + var(--d) - 7px) 0,calc(50% + var(--d) + 7px) 0,calc(50% - var(--d) + 7px) 100%,calc(50% - var(--d) - 7px) 100%)}
.versus.duo .emblem{top:46%;z-index:3}

@media (prefers-reduced-motion:no-preference){
  .versus .side.esq,.versus .side.dir{animation:fundo .5s ease-out both}
  @keyframes fundo{from{opacity:0}}
  .corte::before{transform-origin:top;animation:risco .6s .3s cubic-bezier(.6,0,.3,1) both}
  @keyframes risco{from{transform:scaleY(0)}}
  .side .arte-wrap{animation:revela 1s .8s cubic-bezier(.6,0,.3,1) both}
  @keyframes revela{from{clip-path:inset(0 0 100% 0);filter:brightness(2.2) saturate(0)}to{clip-path:inset(0 0 0 0)}}
  .side-txt{animation:sobe .6s 1.2s ease-out both}
  @keyframes sobe{from{opacity:0;transform:translateY(16px)}}
  .versus.duo .emblem{animation:pop .6s 1.5s cubic-bezier(.2,1.4,.4,1) both}
}

/* contagem: seção própria */
.contagem{padding:clamp(3rem,6vw,4.5rem) 0;background:
  linear-gradient(90deg,rgba(160,107,255,.08) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(rgba(14,219,210,.06) 1px,transparent 1px) 0 0/48px 48px,var(--void)}
.contagem-box{display:grid;grid-template-columns:1fr auto;grid-template-areas:"txt count" "acoes count";gap:1.2rem 3rem;align-items:center;
  padding:clamp(1.5rem,4vw,2.6rem);border:2px solid transparent;
  background:linear-gradient(rgba(19,15,51,.95),rgba(19,15,51,.95)) padding-box,linear-gradient(120deg,var(--uv),var(--cyan)) border-box;
  box-shadow:0 0 50px rgba(160,107,255,.2);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.contagem-txt{grid-area:txt}
.contagem-tag{display:flex;align-items:center;gap:.5rem;color:var(--muted);font:600 .95rem var(--f-display);margin-bottom:.4rem}
.contagem h2{font:700 clamp(1.7rem,3.6vw,2.6rem)/1.1 var(--f-display);text-shadow:-2px 0 rgba(160,107,255,.55),2px 0 rgba(14,219,210,.45);margin-bottom:.4rem}
.contagem-txt>p:last-child{color:var(--muted)}
.contagem .count{grid-area:count;gap:.8rem;font-size:clamp(2.2rem,5vw,3.6rem)}
.contagem .count span{min-width:2.6ch;padding:.6rem .7rem .5rem}
.contagem-acoes{grid-area:acoes;display:flex;gap:.8rem;flex-wrap:wrap}

/* cronograma em roadmap */
.roadmap{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;position:relative;padding-top:3.6rem}
.roadmap::before,.roadmap::after{content:"";position:absolute;top:1.3rem;left:1.3rem;height:4px}
.roadmap::before{right:1.3rem;background:rgba(160,107,255,.25)}
.roadmap::after{width:calc((100% - 2.6rem) * var(--feitas) / var(--total));background:linear-gradient(90deg,var(--uv),var(--cyan));box-shadow:0 0 12px rgba(14,219,210,.6)}
.etapa{position:relative}
.etapa .no{position:absolute;top:-3.6rem;left:0;width:2.6rem;height:2.6rem;display:grid;place-items:center;z-index:1;isolation:isolate;
  font:700 .95rem var(--f-display);color:var(--muted);background:rgba(160,107,255,.55);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.etapa .no::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--void-2);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.etapa.feita .no{color:var(--ink);background:var(--cyan)}
.etapa.feita .no::before{background:linear-gradient(135deg,var(--uv),var(--cyan))}
.etapa.proxima .no{color:var(--paper);background:var(--cyan)}
.etapa.proxima .no::before{background:#062b2e}
.etapa-card{height:100%;display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.2rem 1.3rem;background:var(--void);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.etapa.tbd .etapa-card{border-style:dashed;background:transparent}
.etapa.proxima .etapa-card{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan),0 0 30px rgba(14,219,210,.18);
  background:linear-gradient(160deg,rgba(14,219,210,.1),var(--void) 60%)}
.data{display:flex;align-items:baseline;gap:.35rem;font-family:var(--f-display)}
.data b{font-size:2.4rem;line-height:1}
.data span{font-size:1.15rem;font-weight:700;color:var(--cyan)}
.data small{color:var(--muted);font-size:.9rem}
.data.a-definir{align-items:center;gap:.5rem;color:var(--muted);font-weight:700;font-size:1.05rem;min-height:2.4rem}
.selo-prox,.selo-feita{align-self:flex-start;font:700 .8rem var(--f-display);padding:.15rem .55rem}
.selo-prox{background:var(--cyan);color:var(--ink)}
.selo-feita{background:rgba(61,220,151,.18);color:var(--ok)}
.etapa h3{font:700 1.12rem var(--f-display);margin-top:.2rem}
.etapa p{color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion:no-preference){
  .etapa.proxima .no{animation:pulso 2s ease-in-out infinite}
  @keyframes pulso{50%{box-shadow:0 0 0 6px rgba(14,219,210,0);filter:brightness(1.4)}}
}

/* local */
.local-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.local-card{font-style:normal;display:grid;gap:.25rem;padding:1.4rem 1.5rem;margin-bottom:1.4rem;background:var(--void-2);
  border-left:4px solid var(--cyan);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.local-card strong{font:700 1.6rem var(--f-display)}
.local-card span{color:#d7d5ea}
.acoes-local{display:flex;gap:.8rem;flex-wrap:wrap}
.mapa{position:relative;aspect-ratio:4/3;border:2px solid transparent;
  background:linear-gradient(var(--void-2),var(--void-2)) padding-box,linear-gradient(135deg,var(--uv),var(--cyan)) border-box;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:invert(.9) hue-rotate(180deg) saturate(.75) contrast(.95)}
html.a11y-contraste .mapa iframe{filter:none}

/* FAQ centralizado */
.faq-sec .head{margin-inline:auto;text-align:center;border-left:0;padding-left:0}
.faq-sec .head h2::before{margin-inline:auto}
.faq-sec .faq{margin-inline:auto}

@media (max-width:900px){
  .a11y-rotulo{display:none}
  .versus.duo{height:auto;padding-top:calc(68px + var(--barra));display:flex;flex-direction:column}
  .versus.duo .emblem{order:-1}
  .versus.duo .side{position:relative;inset:auto;clip-path:none !important;padding:2rem 1.25rem;min-height:320px}
  .versus.duo .side-txt{max-width:none}
  .versus.duo .side.dir .side-txt{margin-left:0}
  .side .arte-wrap,.versus.duo .side.esq .arte-wrap,.versus.duo .side.dir .arte-wrap{top:0;right:-10% !important;left:auto !important;width:70% !important}
  .corte{display:none}
  .versus.duo .emblem{position:relative;left:auto;top:auto;transform:none;width:min(300px,78vw);margin:1.5rem auto -1rem;animation-name:popm}
  @keyframes popm{from{transform:scale(.6);opacity:0}}
  .contagem-box{grid-template-columns:1fr;grid-template-areas:"txt" "count" "acoes"}
  .contagem .count{justify-content:space-between;gap:.4rem}
  .local-grid{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr;padding-top:0;padding-left:3.6rem;gap:1.2rem}
  .roadmap::before{top:0;bottom:0;left:1.2rem;right:auto;width:4px;height:auto}
  .roadmap::after{display:none}
  .etapa .no{top:.6rem;left:-3.6rem}
}
.side.dir p{margin-left:auto}

/* fale com a organização */
.contato-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contato-lista{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.6rem;align-items:baseline;margin-top:.5rem}
.contato-lista dt{color:var(--muted);font:600 .9rem var(--f-display)}
.contato-lista dd{font:600 1.15rem var(--f-body)}
.contato-lista a{color:var(--cyan);text-decoration:none;word-break:break-word}
.contato-lista a:hover{text-decoration:underline}
.contato-form{display:grid;gap:1rem;padding:clamp(1.3rem,3vw,2rem);border:2px solid transparent;
  background:linear-gradient(var(--void),var(--void)) padding-box,linear-gradient(135deg,var(--uv),var(--cyan)) border-box;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.contato-form textarea{resize:vertical;min-height:140px}
.contato-form select{appearance:none;background:var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230EDBD2' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right .9rem center;padding-right:2.4rem}
.btn-wa{width:100%;padding:1rem;font-size:1.05rem}
.contato-nota{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.contato-grid{grid-template-columns:1fr}}
@media (max-width:1100px) and (min-width:901px){.nav{gap:.9rem;font-size:.88rem}.top .wrap{gap:1rem}}
