/* ============================================================
   AREA DE MEMBROS DARKRHINO
   Mesmo sistema visual de darkrhino.com.br, portado pra um APP.
   O que veio do site: Gotham com hierarquia por PESO, canto de 3px,
   divisao por FIO (nunca card arredondado), o par 900/200 na mesma
   frase, o padrao do monograma, a regua e os botoes.
   O que NAO veio: hero de 176px, secoes de 126px e o rodape de LP.
   Aqui e' ferramenta: a densidade e' de app, a casca e' a da marca.
   ============================================================ */
@font-face{font-family:'Gotham';src:url('fonts/gothamthin-webfont.woff2') format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothamxlight-webfont.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothamlight-webfont.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothambook-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothammedium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothambold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothamblack-webfont.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothamultra-webfont.woff2') format('woff2');font-weight:950;font-display:swap}

:root{
  --tinta:#0B0A0C; --tinta-2:#0F0E11;
  --branco:#FAFAFA; --cinza:#9C9CA5; --cinza-fraco:#6E6E78;
  --roxo:#865EFE; --roxo-claro:#A98EFF;
  --fio:rgba(250,250,250,.10);
  --fio-malha:rgba(250,250,250,.085);
  --fio-forte:rgba(250,250,250,.16);
  --ok:#4ADE80; --alerta:#FFB84D; --erro:#FF5A5A;
  --col:1240px;
  --r:3px;              /* canto praticamente reto: e' a regra da marca */
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--tinta);color:var(--branco);min-height:100vh;
  font-family:'Gotham',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.col{max-width:var(--col);margin:0 auto;padding:0 32px;position:relative}

/* ============================================================
   HIERARQUIA: grosso carrega a informacao, fino e' apoio.
   900 display/numero · 700 h3/botao/eyebrow/label · 500 nav
   300 paragrafo · 200 SO' no <em> do titulo.
   Caixa alta so' de eyebrow/label/selo pra baixo. No display e'
   reprovada.
   ============================================================ */
.olho{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--roxo-claro);line-height:1.7}
.display{font-weight:900;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(1.7rem,3.2vw,2.5rem);text-wrap:balance}
/* a segunda oracao: mesmo tamanho, peso oposto. e' a hierarquia. */
.display em{font-style:normal;font-weight:200;color:var(--cinza);letter-spacing:-.028em}
.sub{color:var(--cinza);font-size:.98rem;line-height:1.7;font-weight:300;
  margin-top:16px;max-width:56ch;text-wrap:pretty}
.sub b{color:var(--branco);font-weight:700}

h2{font-weight:900;letter-spacing:-.018em;font-size:1.32rem;margin:0}
h3{font-weight:700;font-size:1.12rem;letter-spacing:-.012em}

/* ---- cabecalho de secao: eyebrow + fio, como as secoes do site ---- */
.secao{margin-top:64px}
.secao > .olho{padding-bottom:14px;border-bottom:1px solid var(--fio);display:block}
.secao > h2{margin-top:22px}

/* ============================================================
   NAV: identica a' do site. Menu a esquerda, wordmark a direita,
   blur SEMPRE (sobre o monograma, barra transparente fica ilegivel).
   ============================================================ */
header{position:sticky;top:0;z-index:100;
  background:rgba(11,10,12,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--fio)}
.nav{display:grid;grid-template-columns:1fr auto;align-items:center;height:70px;gap:20px}
.nav nav{display:flex;gap:28px;align-items:center}
.nav nav a{font-size:13.5px;font-weight:500;color:var(--cinza);transition:color .2s}
.nav nav a:hover,.nav nav a.on{color:var(--branco)}
.nav nav a.on{font-weight:700}
.marca{display:flex;align-items:center;justify-self:end;gap:14px}
.marca .wordmark{height:13px;width:auto}
/* o `justify-self:center` da .marca vale ate' em block layout no Chrome
   e encolhe/centraliza a wordmark sem motivo aparente. Aqui ela ja'
   nasce `end`, mas fica registrado: se encolher, procurar justify-self. */
.sair{background:none;border:0;color:var(--cinza-fraco);cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;transition:color .2s}
.sair:hover{color:var(--branco)}
.hamb{display:none;background:none;border:0;color:var(--branco);cursor:pointer;padding:6px}
.hamb span{display:block;width:20px;height:1px;background:currentColor;margin:5px 0}

.envelope{max-width:var(--col);margin:0 auto;padding:52px 32px 110px}

/* ============================================================
   BOTOES: retangulo de canto minimo, nada de pilula.
   ============================================================ */
.bt{display:inline-flex;align-items:center;gap:11px;padding:13px 21px;border-radius:var(--r);
  font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.005em;cursor:pointer;
  border:0;transition:background .2s,color .2s,border-color .2s,transform .18s;white-space:nowrap}
/* a textura de pontos do botao do site */
.bt .sinal{width:15px;height:15px;flex:none;border-radius:1px;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 1.4px);
  background-size:3px 3px;opacity:.55}
.bt-roxo{background:var(--roxo);color:#fff}
.bt-roxo:hover{background:#7A4FFE;transform:translateY(-1px)}
.bt-branco{background:var(--branco);color:#0B0A0C}
.bt-branco:hover{background:#fff;transform:translateY(-1px)}
.bt-fio{border:1px solid var(--fio-forte);color:var(--branco);background:none}
.bt-fio:hover{border-color:var(--branco)}
.bt-perigo{border:1px solid rgba(255,90,90,.4);color:#FF8A8A;background:none}
.bt-perigo:hover{border-color:var(--erro);color:var(--erro)}
.bt-sm{padding:9px 15px;font-size:12px}

/* ============================================================
   PADRAO DA MARCA (monograma + dots). So' no login: e' o momento
   de hero da area. Geometria medida no SVG: tile 10 col x 6 lin.
   ============================================================ */
.padrao{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  --tile:clamp(2000px,220vw,3400px);
  --ch:calc(var(--tile)*0.0627);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.padrao .m2,.padrao .m3{position:absolute;inset:0}
/* o fade central mora no ::before (monograma). No pai, ele apagaria os
   dots junto, e dot nao desbota: ou existe, ou nao existe. */
.padrao .m3::before{content:'';position:absolute;inset:0;
  background-image:url('assets/padrao-cinza.svg');
  background-size:var(--tile) auto;background-repeat:repeat;
  background-position:0 calc(var(--ch)*-.6);opacity:.17;
  -webkit-mask-image:radial-gradient(ellipse 44% 46% at 50% 50%, transparent 0%, transparent 38%, rgba(0,0,0,.45) 64%, #000 90%);
          mask-image:radial-gradient(ellipse 44% 46% at 50% 50%, transparent 0%, transparent 38%, rgba(0,0,0,.45) 64%, #000 90%)}
/* mesmo centro, borda DURA: nenhum dot desbotado, nenhum atras do texto */
.padrao .m3::after{content:'';position:absolute;inset:0;
  background-image:url('assets/dots.svg');
  background-size:var(--tile) auto;background-repeat:repeat;
  background-position:0 calc(var(--ch)*-.6);
  -webkit-mask-image:radial-gradient(ellipse 36% 34% at 50% 50%, transparent 0 99%, #000 100%);
          mask-image:radial-gradient(ellipse 36% 34% at 50% 50%, transparent 0 99%, #000 100%)}
.padrao .m2{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 74%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 74%,transparent 100%)}
.aura{position:absolute;left:50%;bottom:-260px;transform:translateX(-50%);
  width:min(1150px,120vw);height:420px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 40% 100% at 30% 100%, rgba(134,94,254,.42), transparent 70%),
             radial-gradient(ellipse 34% 100% at 62% 100%, rgba(169,142,255,.26), transparent 70%);
  filter:blur(58px)}

/* ---- regua: 2 linhas, blocos correndo por cima delas ---- */
.regua{position:relative;z-index:2;height:60px;overflow:hidden;
  border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.regua::before,.regua::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--fio-malha)}
.regua::before{top:38%} .regua::after{top:68%}
.regua span{position:absolute;left:0;height:1px;animation:corre 26s linear infinite}
.regua .a{top:38%;width:32%;opacity:.85;animation-duration:24s;
  background:linear-gradient(90deg,transparent,var(--roxo-claro) 24%,var(--roxo-claro) 76%,transparent)}
.regua .b{top:38%;width:16%;opacity:.42;animation-duration:39s;animation-delay:-13s;
  background:linear-gradient(90deg,transparent,var(--branco) 30%,var(--branco) 70%,transparent)}
.regua .c{top:68%;width:42%;opacity:.75;animation-duration:31s;animation-delay:-19s;
  background:linear-gradient(90deg,transparent,var(--roxo) 20%,var(--roxo) 80%,transparent)}
.regua .d{top:68%;width:20%;opacity:.5;animation-duration:45s;animation-delay:-6s;
  background:linear-gradient(90deg,transparent,var(--roxo-claro) 30%,var(--roxo-claro) 70%,transparent)}
@keyframes corre{from{transform:translateX(-110%)}to{transform:translateX(calc(100vw + 10%))}}
@media (prefers-reduced-motion:reduce){.regua span{animation:none;left:18%}}

/* ============================================================
   NUMEROS: 900 grande + label caixa alta fina. Vem da secao de
   prova do site, aqui vira o placar do aluno.
   ============================================================ */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fio);margin-top:26px}
.numeros div{padding:28px 24px 24px;border-right:1px solid var(--fio)}
.numeros div:last-child{border-right:0}
.numeros b{display:block;font-weight:900;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-.02em}
.numeros b.peq{font-size:clamp(1rem,1.6vw,1.2rem);letter-spacing:-.01em}
.numeros span{display:block;margin-top:12px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-fraco)}

/* ---- barra de progresso: um fio que enche ---- */
.barra{height:2px;background:var(--fio);overflow:hidden;margin-top:20px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--roxo),var(--roxo-claro))}

/* ============================================================
   LISTA RETA (o .item do site): fio, nunca card arredondado.
   Ultima coluna FIXA de proposito: com `auto`, "Assistir"/"Abrir"
   tem larguras diferentes e cada linha empurra o texto pra um x
   diferente.
   ============================================================ */
.lista{border-top:1px solid var(--fio);margin-top:26px}
/* o eyebrow da secao ja' fecha com um fio. Sem isto, o fio dele mais o
   border-top da lista desenham DUAS linhas com um vao no meio. */
.olho + .lista,.olho + .numeros,.olho + .rolagem > table tr:first-child th{border-top:0}
.olho + .lista,.olho + .numeros{margin-top:0}
.item{display:grid;grid-template-columns:minmax(0,52px) minmax(0,1fr) 132px;
  gap:28px;align-items:center;padding:26px 12px;border-bottom:1px solid var(--fio);
  transition:background .25s,padding-left .25s}
.item:hover{background:rgba(134,94,254,.05);padding-left:22px}
.item .n{font-size:11px;font-weight:700;color:var(--cinza-fraco);letter-spacing:.12em}
.item .nome{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.item h3{font-weight:700;font-size:1.14rem;letter-spacing:-.012em}
.item p{color:var(--cinza);font-size:.9rem;line-height:1.6;font-weight:300;margin-top:7px}
.item .ir{justify-self:end;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza);display:inline-flex;align-items:center;gap:9px;
  transition:color .2s}
.item:hover .ir{color:var(--roxo-claro)}
.item .ir b{font-weight:400;transition:transform .2s;display:inline-block}
.item:hover .ir b{transform:translateX(4px)}
.item.visto .n{color:var(--ok)}

/* ---- selo: caixa alta minuscula, canto 2px ---- */
.selo{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid var(--fio-forte);
  border-radius:2px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza);white-space:nowrap}
.selo.grupo{border-color:rgba(134,94,254,.45);color:var(--roxo-claro)}
.selo.individual{border-color:rgba(255,184,77,.45);color:var(--alerta)}
.selo.ok{border-color:rgba(74,222,128,.4);color:var(--ok)}
.selo.off{border-color:rgba(255,90,90,.4);color:var(--erro)}

/* ============================================================
   BLOCO: substitui o "cartao". Fio de 1px e canto de 3px, nunca
   raio grande. Divisao por fio e' a regra da marca.
   ============================================================ */
.bloco{border:1px solid var(--fio);border-radius:var(--r);padding:26px;background:var(--tinta-2)}
.bloco + .bloco{margin-top:12px}
.malha{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:26px}

/* ---- player: 16:9 travado, senao o iframe nasce com 150px ---- */
.player{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border:1px solid var(--fio);border-radius:var(--r);overflow:hidden;margin-top:30px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.visor{width:100%;height:78vh;border:1px solid var(--fio);border-radius:var(--r);background:#fff;margin-top:26px}

/* ============================================================
   TABELA: cabecalho em label caixa alta, linhas separadas por fio
   ============================================================ */
table{width:100%;border-collapse:collapse;font-size:14px;font-weight:300}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--fio)}
th{color:var(--cinza-fraco);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
td b{font-weight:700}
tr:hover td{background:rgba(134,94,254,.04)}
.rolagem{overflow-x:auto;margin-top:26px}
.fraco{color:var(--cinza)}

/* ============================================================
   FORMULARIO
   ============================================================ */
label{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza-fraco);margin:20px 0 9px}
input,select,textarea{width:100%;padding:13px 14px;background:var(--tinta);color:var(--branco);
  border:1px solid var(--fio);border-radius:var(--r);font-family:inherit;font-weight:300;font-size:14px;
  transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--roxo)}
input::placeholder,textarea::placeholder{color:var(--cinza-fraco);font-weight:300}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cinza) 50%),
  linear-gradient(135deg,var(--cinza) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
form .bt{margin-top:22px}

/* ---- recados ---- */
.recado{padding:14px 17px;border-radius:var(--r);font-size:13.5px;line-height:1.6;
  margin-bottom:22px;word-break:break-word;font-weight:300;border:1px solid}
.recado b{font-weight:700}
.recado.bom{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.3)}
.recado.ruim{background:rgba(255,90,90,.07);border-color:rgba(255,90,90,.32)}
.recado.dica{background:rgba(134,94,254,.06);border-color:rgba(134,94,254,.28);color:var(--cinza)}

.token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--roxo-claro);word-break:break-all;font-weight:400}
.vazio{color:var(--cinza-fraco);font-size:14px;padding:44px 24px;text-align:center;
  border:1px dashed var(--fio);border-radius:var(--r);font-weight:300;margin-top:26px}

/* ============================================================
   ENTRADA (login): e' aqui que o padrao da marca aparece
   ============================================================ */
.entrada{position:relative;min-height:100svh;display:flex;align-items:center;
  justify-content:center;padding:40px 24px;overflow:hidden}
.entrada .caixa{position:relative;z-index:2;width:100%;max-width:392px;text-align:center}
.entrada .wordmark{height:17px;width:auto;margin:0 auto 34px}
.entrada .display{font-size:clamp(1.6rem,4vw,2.1rem)}
.entrada form{margin-top:34px;text-align:left}
.entrada .bt{width:100%;justify-content:center}
.entrada .rodape{margin-top:30px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-fraco)}

/* ---- rodape do app ---- */
.pe-app{border-top:1px solid var(--fio);margin-top:80px;padding:26px 0;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-fraco)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .envelope{padding:36px 22px 80px}
  .col{padding:0 22px}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .numeros div:nth-child(2n){border-right:0}
  .numeros div:nth-child(n+3){border-top:1px solid var(--fio)}
  .item{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .item:hover{padding-left:0}
  .item .n{display:none}
  .item .ir{justify-self:start;margin-top:4px}
  .nav{grid-template-columns:auto 1fr}
  .nav nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;
    padding:10px 22px 22px;background:var(--tinta);border-bottom:1px solid var(--fio)}
  .nav nav.aberto{display:flex}
  .nav nav a{padding:15px 0;font-size:15px;border-bottom:1px solid var(--fio);width:100%}
  .hamb{display:block}
  .marca{justify-self:end}
}