/* Cripto.ico · camada de acabamento (carregada depois de site.css).
   Para desfazer tudo: remova de cada página as duas linhas que carregam acabamento.css e acabamento.js.
   Etapa 1: vidro fumê com filete nos cards, botões de vidro, barra do topo com fundo, campos. */

/* ---------- vidro fumê com filete: verde em cima, roxo embaixo ---------- */
.eco-card:not(.enode),.eco-detail,.radar-demo,.gx-screen,.lg-box,.wl-box,.tcard,.cc{
  border-color:rgba(57,255,20,.38) rgba(255,255,255,.1) rgba(176,38,255,.46) rgba(255,255,255,.1);
}
.eco-card:not(.enode),.eco-detail,.radar-demo,.lg-box,.wl-box,.cc{
  background:rgba(8,8,8,.58);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
/* os depoimentos são muitos e ficam em movimento: fumê sem desfoque, para não pesar.
   (o site fixa a cor deles com prioridade máxima; por isso a prioridade aqui também) */
.tw-card,.tw-card.tone-black,.tw-card.tone-graphite,.tw-card.tone-green{
  background:linear-gradient(180deg,#0e0e10,#060607)!important;
  border-color:rgba(57,255,20,.34) rgba(255,255,255,.1) rgba(176,38,255,.42) rgba(255,255,255,.1)!important;
}
/* os nós do mapa do ecossistema ficam como estão: a cor da borda deles indica o passo ativo */

/* ---------- botões de vidro, com uma luz que acompanha o mouse ---------- */
.btn:not(.skip){
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--white);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4);
  transition:border-color .25s var(--ease-out,ease),transform .25s var(--ease-out,ease);
}
.btn:not(.skip):before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(57,255,20,.38),transparent 60%);
  transition:opacity .3s;
}
.btn.line:not(.skip):before{background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(176,38,255,.42),transparent 60%)}
.btn:not(.skip):hover:before,.btn:not(.skip):focus-visible:before{opacity:1}
.btn:not(.skip):hover,.btn.line:not(.skip):hover{
  border-color:rgba(57,255,20,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4)!important;
}
.btn.line:not(.skip):hover{border-color:rgba(176,38,255,.75)}
.btn:not(.skip):active{transform:scale(.98)}
.btn:not(.skip):focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------- barra do topo: sempre com fundo, para o texto não passar por trás ---------- */
.nav{
  background:rgba(4,4,4,.62);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav.solid{background:rgba(4,4,4,.78)}

/* ---------- campos do formulário da lista de espera ---------- */
.wl-form input:not([type=range]):not([type=checkbox]):not([type=radio]){
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s,box-shadow .25s;
}
.wl-form input:not([type=range]):not([type=checkbox]):not([type=radio]):focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(57,255,20,.16);
}

@media (prefers-reduced-motion:reduce){
  .btn:not(.skip),.btn:not(.skip):before{transition:none}
}

/* ---------- Etapa 2: pontos de luz que acompanham o mouse, e inclinação ---------- */
.ac-card{isolation:isolate}
.ac-dots{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.2px);background-size:14px 14px;
  -webkit-mask:radial-gradient(180px circle at var(--ax,50%) var(--ay,50%),#000,transparent 72%);
  mask:radial-gradient(180px circle at var(--ax,50%) var(--ay,50%),#000,transparent 72%)}
.ac-card.ac-on>.ac-dots{opacity:1}

/* ---------- Etapa 4: movimentos conduzidos pela rolagem ---------- */
.ac-fly{z-index:5;will-change:translate,rotate,scale}
.ac-scrub{will-change:translate,opacity}
@media (prefers-reduced-motion:reduce){ .ac-dots{display:none} }

/* ---------- Etapa 6: topo com o elemento líquido sobre o corredor renderizado ---------- */
#acTopo{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
/* no celular o texto ocupa a largura toda: o véu escurece a tela inteira, para a luz do fundo não atrapalhar a leitura */
@media (max-width:860px){ .hero:before{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.74) 30%,rgba(0,0,0,.8) 100%)} }

/* ---------- Etapa 5: cards de curso que giram (página Evolua) ---------- */
@property --flip{syntax:"<angle>";inherits:false;initial-value:0deg}
.ac-cursos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:36px 0 52px;perspective:1100px}
.ac-curso{--flip:0deg;position:relative;display:grid;min-height:308px;border:1px solid;border-color:rgba(57,255,20,.38) rgba(255,255,255,.1) rgba(176,38,255,.46) rgba(255,255,255,.1);
  border-radius:18px;cursor:pointer;transform:rotateY(var(--flip));transform-style:preserve-3d;transition:--flip .85s cubic-bezier(.22,1,.36,1);touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.ac-curso.flip{--flip:180deg}
.ac-curso:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* a placa fica numa camada própria. Sem desfoque: nesta página o fundo é preto liso, e o desfoque piscava em cinza durante o giro */
.ac-curso .ac-bg{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#101012,#070708);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ac-curso .ac-face{grid-area:1/1;position:relative;display:flex;flex-direction:column;padding:24px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ac-curso .ac-back{transform:rotateY(180deg)}
.ac-curso:not(.flip) .ac-back,.ac-curso.flip .ac-front{pointer-events:none}
.ac-curso .ac-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto;padding-bottom:30px}
.ac-curso .ac-lvl{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.ac-curso .ac-lvl b{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.ac-curso .ac-lvl b.f{background:var(--green)}
.ac-curso .ac-lvl b.p{background:var(--purple)}
.ac-curso .ac-lvl span{margin-left:6px}
.ac-curso .ac-go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:none;transition:color .3s,border-color .3s,background .3s}
.ac-curso .ac-go svg{width:15px;height:15px}
.ac-curso.ac-on .ac-go{color:#000;background:var(--green);border-color:var(--green)}
.ac-curso h3{margin:0 0 10px;font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:500;color:var(--white)}
.ac-curso .ac-front p{margin:0;min-height:3.1em;font-size:15px;line-height:1.55;color:#b4b4b4}
.ac-curso .ac-turn{margin-top:18px;font-size:13px;color:var(--muted)}
.ac-curso.ac-on .ac-turn{color:var(--white)}
.ac-curso .ac-nm{margin:0 0 14px;font-size:13px;color:var(--green)}
.ac-curso dl{margin:0}
.ac-curso dt{margin:0 0 2px;font-size:13px;font-weight:600;color:var(--white)}
.ac-curso dd{margin:0 0 12px;font-size:14px;line-height:1.45;color:#b4b4b4}
.ac-curso .ac-link{margin-top:auto;font-size:13px;color:var(--white);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.ac-cursos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ac-cursos{grid-template-columns:1fr}.ac-curso{min-height:270px}}
@media (prefers-reduced-motion:reduce){.ac-curso{transition:none}}

/* ---------- painéis que tinham ficado de fora: Gênesis Labs e as páginas do relatório ---------- */
.glass.device,.pages .page{
  border:1px solid;border-color:rgba(57,255,20,.38) rgba(255,255,255,.1) rgba(176,38,255,.46) rgba(255,255,255,.1);
}
.glass.device{background:rgba(8,8,8,.6);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
/* páginas do relatório: fumê fechado (elas giram em 3D; desfoque ali borra o texto), com as caixas internas no mesmo filete */
.pages .page{background:linear-gradient(180deg,#111113,#070708);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px #000}
.pages .page .box,.pages .page .gauge,.pages .page .donut,.device .row,.forces div{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.035)}
.device .row{transition:border-color .3s,background-color .3s}
.device .row:hover{border-color:rgba(57,255,20,.5);background:rgba(57,255,20,.05)}

/* ---------- páginas internas: cada assunto vira um card de vidro, que entra conforme a rolagem ---------- */
.ac-sec{position:relative;margin:0 0 16px;padding:26px 28px 24px;border:1px solid;border-radius:18px;
  border-color:rgba(57,255,20,.38) rgba(255,255,255,.1) rgba(176,38,255,.46) rgba(255,255,255,.1);
  background:rgba(8,8,8,.58);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.ac-sec>:first-child{margin-top:0}
.ac-sec>:last-child{margin-bottom:0}
.ac-sec .ac-n{display:block;margin:0 0 14px;font-size:13px;color:var(--green);font-variant-numeric:tabular-nums}
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;max-width:none}
.ac-grid .ac-sec{margin:0;height:100%}
.ac-grid .ac-sec.ac-wide{grid-column:1/-1}
@media (max-width:860px){.ac-grid{grid-template-columns:1fr}.ac-sec{padding:22px 20px 20px}}
/* fundo das páginas internas: o mesmo corredor, parado e bem escuro */
body.ac-inner:before{content:"";position:fixed;inset:0;z-index:-1;background:#000 url(/assets/img/topo/cena_1.webp?v=d4500cf23e) center/cover no-repeat;opacity:.5}
body.ac-inner{background:transparent}

/* Rodapé de todas as páginas · botão "Entrar na lista de espera" no modelo Traço lateral (escolhido pelo Fabrício):
   só o texto, com um traço verde à esquerda que cresce ao passar o mouse; nenhuma borda, sombra ou brilho */
footer .lbtn .la{display:none}
footer .lbtn .lt{position:relative;z-index:1}
footer .lbtn .lf{position:absolute;pointer-events:none;border-radius:inherit}
footer .lb2:before,footer .lb2:after{content:none!important;display:none!important}
footer .lb2{position:relative;isolation:isolate;background:none!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0 0 0 16px!important;min-height:34px!important;font-weight:500!important;color:#fff!important;transform:none!important;transition:color .4s,padding .4s cubic-bezier(.16,1,.3,1)!important}
footer .lb2 .lf{display:block;left:0;top:32%;bottom:32%;width:2px;border-radius:2px;background:#39FF14;transition:top .45s cubic-bezier(.16,1,.3,1),bottom .45s cubic-bezier(.16,1,.3,1)}
footer .lb2:hover .lf{top:0;bottom:0}
html body footer a.lb2.lb2,html body footer a.lb2.lb2:hover,html body footer a.lb2.lb2:focus{border:0!important;box-shadow:none!important;background:none!important;outline:0!important;text-decoration:none!important}
html body footer a.lb2.lb2:focus-visible .lf{top:0;bottom:0}

/* Páginas internas no celular · nenhum bloco passa da largura da tela; tabela larga (5 colunas ou mais) vira uma lista:
   cada linha é um bloco, com o nome da coluna ao lado de cada valor */
@media (max-width:860px){
  .ac-grid{grid-template-columns:minmax(0,1fr)}
  .ac-sec{min-width:0}
  .legal th,.legal td{overflow-wrap:anywhere}
}
@media (max-width:600px){
  .legal table.ac-pilha,.legal table.ac-pilha tbody,.legal table.ac-pilha tr,.legal table.ac-pilha td{display:block;width:100%}
  .legal table.ac-pilha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legal table.ac-pilha tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .legal table.ac-pilha td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0;border:0;text-align:right}
  .legal table.ac-pilha td:before{content:attr(data-label);color:var(--muted);text-align:left;flex:none}
  .legal table.ac-pilha td:first-child{justify-content:flex-start;text-align:left;font-weight:600;padding-bottom:6px}
  .legal table.ac-pilha td:first-child:before{content:none}
}
/* exemplo do Radar News no celular: a frase de status ocupa a própria linha, inteira (antes era cortada em "Envi…") */
@media (max-width:600px){
  .rd-top .rd-status{flex:1 1 100%;width:100%;white-space:normal;overflow:visible;text-overflow:clip}
}