:root{
  --noite:#131619; --noite-2:#1b1f22; --noite-3:#262b2e;
  --claro:#f4f5ef; --claro-2:#9aa1a3; --claro-3:#6c7376;
  --lima:#c7f23c; --tinta:#1f2223; --linha:#2c3134; --erro:#ff6f60;
  color-scheme:dark;
  --g:max(20px, env(safe-area-inset-left,0px));
  --gd:max(20px, env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--noite); color:var(--claro); margin:0;
  font:400 16px/1.5 Figtree, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Archivo, Figtree, sans-serif; font-weight:800; letter-spacing:-.03em; margin:0}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}

/* ---------------------------------------------------------------- marca viva */
.marca{position:relative; display:flex; flex-direction:column; align-items:center}
.sim{position:relative; width:clamp(76px,11vh,118px); aspect-ratio:528/548; display:block}
.sim::before{content:""; position:absolute; inset:-85%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(199,242,60,.28), rgba(199,242,60,.07) 42%, transparent 68%);
  animation:respira 5.5s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1); opacity:.72}50%{transform:scale(1.14); opacity:1}}
.sim svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.mv-cheio{fill:var(--lima); opacity:0; animation:enche .7s ease .55s forwards}
@keyframes enche{to{opacity:1}}
.mv-traco{fill:none; stroke:var(--lima); stroke-width:13; stroke-linecap:round; stroke-linejoin:round}
.mv-luz{fill:none; stroke:#f7ffe3; stroke-width:17; stroke-linecap:round; stroke-linejoin:round;
  opacity:.95; filter:drop-shadow(0 0 7px rgba(199,242,60,.95))}
.mv-nome{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:16px}
.mv-pal{height:clamp(22px,3.4vh,34px); aspect-ratio:895/275; width:auto; fill:var(--claro); display:block;
  clip-path:inset(0 100% 0 0); animation:limpa .9s cubic-bezier(.16,1,.3,1) 1.05s forwards}
@keyframes limpa{to{clip-path:inset(0 0 0 0)}}
.mv-tag{font:700 10px/1 Figtree; text-transform:uppercase; color:var(--lima); opacity:0;
  letter-spacing:-.02em; animation:abre-letras 1s cubic-bezier(.16,1,.3,1) 1.5s forwards}
@keyframes abre-letras{to{opacity:1; letter-spacing:.5em; text-indent:.5em}}

/* ---------------------------------------------------------------- entradas e subidas */
.sobe{opacity:0; transform:translateY(22px); filter:blur(5px);
  animation:sobe .72s cubic-bezier(.16,1,.3,1) forwards}
@keyframes sobe{to{opacity:1; transform:none; filter:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}.d4{animation-delay:.32s}
.d5{animation-delay:.41s}.d6{animation-delay:.50s}.d7{animation-delay:.59s}.d8{animation-delay:.68s}

/* ---------------------------------------------------------------- centro (entrada, recados) */
.centro{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px var(--gd) 48px var(--g); text-align:center}
.olho{font:700 11px/1 Figtree; letter-spacing:.28em; text-transform:uppercase; color:var(--claro-2); margin-top:30px}
.forma{margin-top:26px; width:min(400px,100%); display:flex; flex-direction:column; gap:11px; text-align:left}
.forma label{font:700 10.5px/1 Figtree; letter-spacing:.2em; text-transform:uppercase; color:var(--claro-3); padding-left:2px}
.forma input{width:100%; background:var(--noite-2); border:1px solid var(--linha); border-radius:14px;
  padding:15px 17px; color:var(--claro); font:500 15.5px/1.2 Figtree; outline:none;
  transition:border-color .22s, background .22s}
.forma input::placeholder{color:#565d60}
.forma input:focus{border-color:var(--lima); background:var(--noite-3)}
.bt{width:100%; border-radius:999px; padding:15px 20px; background:var(--lima); color:var(--tinta);
  font:800 15px/1 Figtree; text-align:center; display:block; transition:transform .18s, filter .2s}
.bt:disabled{background:var(--noite-3); color:var(--claro-3); cursor:default}
.bt:not(:disabled):hover{transform:translateY(-1px); filter:brightness(1.05)}
.bt.fraco{background:transparent; border:1px solid var(--linha); color:var(--claro-2)}
.bt.fraco:hover{border-color:var(--lima); color:var(--lima)}
.pe{font-size:12.5px; line-height:1.5; color:var(--claro-3); padding-top:2px}
.pe.erro{color:var(--erro)}
.pe.bom{color:var(--lima)}
h1.tit{font-size:clamp(28px,4.6vh,42px); line-height:1.08}
.sub{font-size:15.5px; line-height:1.55; color:var(--claro-2); margin-top:10px; max-width:52ch}

/* ---------------------------------------------------------------- topo */
.topo{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--gd) 18px var(--g); border-bottom:1px solid var(--linha)}
.topo-marca{display:flex; align-items:center; gap:11px}
.topo-marca .s{width:26px; height:27px; fill:var(--lima); overflow:visible}
.topo-marca .w{height:15px; width:auto; fill:var(--claro)}
.topo-dir{display:flex; align-items:center; gap:14px}
.quem{font:500 13px/1.2 Figtree; color:var(--claro-2); text-align:right}
.quem b{display:block; font-weight:700; color:var(--claro); font-size:13.5px}
.sair{font:600 12.5px/1 Figtree; color:var(--claro-3); border:1px solid var(--linha);
  border-radius:999px; padding:9px 15px; transition:all .2s; display:inline-block}
.sair:hover{color:var(--lima); border-color:var(--lima)}
.corpo{width:min(1080px,100%); margin:0 auto; padding:clamp(28px,5vh,52px) var(--gd) 56px var(--g)}

/* ---------------------------------------------------------------- biblioteca */
.cartoes{display:grid; gap:14px; margin-top:clamp(22px,3.6vh,34px)}
.ap{display:flex; align-items:center; gap:18px; background:var(--noite-2); border:1px solid var(--linha);
  border-radius:20px; padding:20px 22px; transition:border-color .25s, transform .25s}
.ap.pronta:hover{border-color:rgba(199,242,60,.45); transform:translateY(-2px)}
.ap .capa{flex:0 0 auto; width:84px; height:62px; border-radius:12px; border:1px solid var(--linha);
  background:linear-gradient(150deg,#0f1215,#1b1f22); display:grid; place-items:center}
.ap .capa svg{width:26px; height:27px; fill:var(--lima); opacity:.9; overflow:visible}
.ap.breve .capa svg{fill:var(--claro-3); opacity:.5}
.ap .txt{flex:1 1 auto; min-width:0}
.ap h3{font-size:17.5px; letter-spacing:-.025em}
.ap .txt>p{font-size:13.5px; line-height:1.5; color:var(--claro-2); margin-top:5px}
.ap .meta{display:flex; gap:7px; align-items:center; margin-top:9px; flex-wrap:wrap;
  font:600 11px/1 Figtree; letter-spacing:.08em; text-transform:uppercase; color:var(--claro-3)}
.ap .meta i{width:3px; height:3px; border-radius:50%; background:var(--claro-3); font-style:normal}
.ap .acao{flex:0 0 auto}
.ap .acao .bt{width:auto; padding:12px 22px; font-size:13.5px}
.selo-breve{font:700 10.5px/1 Figtree; letter-spacing:.18em; text-transform:uppercase; color:var(--claro-3);
  border:1px solid var(--linha); border-radius:999px; padding:9px 14px; white-space:nowrap; display:inline-block}
.ap.breve{opacity:.62}
.dica{margin-top:clamp(20px,3.4vh,30px); background:rgba(199,242,60,.06);
  border:1px solid rgba(199,242,60,.26); border-radius:14px; padding:14px 16px}
.dica b{color:var(--lima); font-weight:700}
.dica p{font-size:13.5px; line-height:1.5; color:var(--claro-2)}

/* ---------------------------------------------------------------- gestão */
.secao{margin-top:clamp(24px,4vh,38px)}
.secao h2{font:700 11px/1 Figtree; letter-spacing:.2em; text-transform:uppercase; color:var(--claro-3);
  display:flex; align-items:center; gap:9px; margin-bottom:12px}
.bolha{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--noite-3); color:var(--claro-2); font:700 11px/1 Figtree; letter-spacing:0}
.lista{display:flex; flex-direction:column; gap:8px}
.item{display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--noite-2); border:1px solid var(--linha); border-radius:14px; padding:13px 16px}
.item .i-txt{min-width:0}
.item .i-txt strong{display:block; font:600 14px/1.3 Figtree; color:var(--claro); word-break:break-word}
.item .i-txt span{display:block; font:400 12px/1.4 Figtree; color:var(--claro-3); margin-top:2px}
.item .i-bts{display:flex; gap:7px; flex:0 0 auto}
.item .i-bts button{border:1px solid var(--linha); border-radius:999px; padding:8px 13px;
  font:600 12px/1 Figtree; color:var(--claro-2); transition:all .2s; white-space:nowrap}
.item .i-bts button:hover{border-color:var(--claro-2); color:var(--claro)}
.item .i-bts button.forte{background:var(--lima); border-color:var(--lima); color:var(--tinta); font-weight:800}
.vazio{font:400 12.5px/1.4 Figtree; color:#565d60}
.suspenso{color:var(--erro); font-weight:700}

.rodape{padding:0 var(--gd) 34px var(--g); text-align:center;
  font:500 11px/1 Figtree; letter-spacing:.14em; color:#454b4e; text-transform:uppercase}

@media (max-width:720px){
  .ap{flex-wrap:wrap}
  .ap .capa{width:56px; height:44px}
  .ap .acao{width:100%}
  .ap .acao .bt,.selo-breve{width:100%; display:block; text-align:center}
  .item{flex-wrap:wrap}
  .item .i-bts{width:100%}
  .item .i-bts button{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .sobe{opacity:1; transform:none; filter:none}
  .mv-pal{clip-path:none}.mv-cheio{opacity:1}
  .mv-tag{opacity:1; letter-spacing:.5em; text-indent:.5em}
}