/* =========================================================================== The Biased Engine — sistema visual do site público Convertido das pranchas do Claude Design (0 - Landing Page/) para CSS puro. Sem framework, sem runtime: o site é HTML + CSS + um JS pequeno. Paleta idêntica à do produto (web/index.html), para que a passagem do site para a ferramenta não pareça troca de empresa. =========================================================================== */ :root{ --pap:#F2F4F8; --sup:#FFFFFF; --lin:#E3E6EE; --ni:#12275C; --nid:#0B1A42; --pin:#24614E; --pinbg:#EDF4F1; --car:#9E1B22; --carbg:#F9EDED; --amb:#E0863B; --ambbg:#FBF0E4; --ambtx:#8A5320; --txt:#3A3E48; --tm:#63687A; --tc:#8B90A0; /* --tm escurecido: em #6B7080 reprovava (4,4:1) sobre a faixa --tint das linhas C */ --tint:#EEF2F9; --tit:#12275C; --azc:#7FA0D8; /* azul claro: acento sobre fundo escuro */ --serif:'Source Serif 4',Georgia,'Times New Roman',serif; --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace; --lar:1320px; --pad:clamp(20px,5vw,64px); --secao:clamp(48px,7vw,96px); } /* Escuro por escolha explícita do visitante. */ :root[data-tema="escuro"]{ --pap:#0E1420; --sup:#161D2B; --lin:#26304A; --ni:#7FA0D8; --nid:#080D16; --pin:#5FA98D; --pinbg:#152520; --car:#D9756B; --carbg:#2A1A1C; --amb:#E0A067; --ambbg:#241B10; --ambtx:#E0A067; --txt:#C6CCDA; --tm:#8B93A6; --tc:#697082; --tint:#1A2336; --tit:#E4E7EE; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--pap);color:var(--txt); font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;font-family:var(--serif);color:var(--tit);letter-spacing:-.015em;line-height:1.15} p{margin:0} a{color:var(--ni);text-decoration:none} img,svg{max-width:100%} /* --- estrutura ------------------------------------------------------------ */ .env{max-width:var(--lar);margin:0 auto;padding:0 var(--pad)} .secao{padding:var(--secao) 0} .escuro{background:var(--nid);color:#EEF2F9} .escuro h1,.escuro h2,.escuro h3{color:#fff} .claro-bg{background:var(--sup);border-top:1px solid var(--lin);border-bottom:1px solid var(--lin)} .grade{display:grid;gap:clamp(24px,4vw,48px)} .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .g4{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))} .pilha{display:flex;flex-direction:column;gap:20px} /* --- tipografia ----------------------------------------------------------- */ .rot{font:500 11px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--tm)} .escuro .rot{color:rgba(238,242,249,.6)} .h-hero{font-weight:700;font-size:clamp(40px,6.4vw,76px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance} .h-pag{font-weight:700;font-size:clamp(34px,5.2vw,60px);line-height:1.08;letter-spacing:-.02em} .h-sec{font-weight:700;font-size:clamp(26px,3.6vw,44px);line-height:1.15} .h-card{font:600 21px/1.3 var(--serif);color:var(--tit)} .lead{font:400 clamp(15px,1.8vw,18px)/1.6 var(--sans);color:var(--tm)} .escuro .lead{color:rgba(238,242,249,.78)} .mini{font:400 13px/1.6 var(--sans);color:var(--tm)} /* --tm, não --tc: --tc dá 3,2:1 e reprova no AA */ .mono{font-family:var(--mono)} .serifa{font-family:var(--serif)} /* --- navegação ------------------------------------------------------------ */ /* A marca empilha o nome da empresa SOB o nome da ferramenta. Antes os dois ficavam lado a lado e comiam a largura da linha: em alemão e francês, onde os rótulos do menu são mais longos, os links caíam para a linha de baixo — a posição deles mudava conforme o idioma. Empilhado, a barra fica estável nas cinco línguas. `flex:none` impede que a marca seja espremida; o menu recebe o espaço restante e se alinha à direita. */ .topo{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;padding:22px 0} .marca{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15} .marca b{font:700 21px var(--serif);color:#fff} .marca span{font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(238,242,249,.55)} .menu{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap} .menu a{font:500 13.5px var(--sans);color:rgba(238,242,249,.82)} .menu a:hover{color:#fff} .menu a.on{color:#fff;font-weight:600;border-bottom:2px solid rgba(238,242,249,.6);padding-bottom:3px} /* `.menu a` (0,1,1) vence `.bt-branco` (0,1,0): sem estas três linhas o botão "Entrar" fica com texto quase branco sobre fundo branco. */ .menu a.bt-branco{color:#0B1A42} .menu a.bt-linha{color:#EEF2F9} .menu a.bt-claro{color:var(--ni)} /* --- botões --------------------------------------------------------------- */ .bt{display:inline-block;font:600 15px var(--sans);border-radius:4px;padding:15px 30px; border:1px solid transparent;cursor:pointer;transition:transform .15s ease,filter .15s ease} .bt:hover{transform:translateY(-1px)} .bt-branco{color:#0B1A42;background:#fff} .bt-linha{color:#EEF2F9;border-color:rgba(238,242,249,.34);padding:14px 28px} .bt-linha:hover{border-color:rgba(238,242,249,.7);color:#fff} .bt-navy{color:#fff;background:var(--ni);width:100%;text-align:center;font-size:15px} /* No escuro --ni vira azul claro: texto branco cairia para 2,65:1. */ :root[data-tema="escuro"] .bt-navy{color:#0B1A42} .bt-claro{color:var(--ni);background:var(--sup);border-color:var(--lin);font-size:14.5px;padding:14px 26px} .bt-peq{font:600 13px var(--sans);padding:11px 24px} .tema-bt{font:500 12px var(--sans);color:rgba(238,242,249,.7);background:none; border:1px solid rgba(238,242,249,.22);border-radius:4px;padding:9px 14px;cursor:pointer;user-select:none} .tema-bt:hover{border-color:rgba(238,242,249,.5);color:#fff} /* --- cartões -------------------------------------------------------------- */ .card{background:var(--sup);border:1px solid var(--lin);border-radius:4px;padding:24px} .card-num{border-top:3px solid var(--ni)} .card-num.risco{border-top-color:var(--car)} .num{font:700 clamp(44px,6vw,62px)/1 var(--serif);color:var(--tit);margin-bottom:12px} .num.risco{color:var(--car)} .passo{border-left:2px solid var(--lin);padding:4px 0 4px 20px} .passo.on{border-left-color:var(--ni)} .passo .n{font:500 12px var(--mono);color:var(--ni);margin-bottom:10px;display:block} .passo h3{font:600 19px/1.3 var(--serif);margin-bottom:8px} /* --- selos e réguas ------------------------------------------------------- */ .selo{flex:none;display:inline-block;font:500 11px var(--mono);color:#fff;border-radius:2px;padding:3px 7px} .selo.A{background:var(--pin)} .selo.B{background:var(--ni)} /* O âmbar é claro demais para texto branco (2,75:1). O selo C mantém a cor da marca e troca o texto por navy — 6,2:1, dentro do AA. */ .selo.C{background:var(--amb);color:#0B1A42} .selo.D{background:var(--car)} :root[data-tema="escuro"] .selo{color:#0B1A42} .legenda{display:flex;flex-wrap:wrap;gap:18px;padding:16px 0 26px;border-bottom:1px solid var(--lin);margin-bottom:26px} .legenda span{display:flex;align-items:center;gap:8px;font:400 13px var(--sans);color:var(--tm)} .regua{display:inline-flex;gap:3px} .regua i{width:18px;height:8px;background:var(--lin);display:block} .regua i.on{background:var(--ni)} .escuro .regua i{background:rgba(127,160,216,.28)} .escuro .regua i.on{background:var(--azc)} /* --- blocos de aviso ------------------------------------------------------ */ .evita{background:var(--carbg);border-left:3px solid var(--car);border-radius:0 4px 4px 0; padding:12px 16px;font:400 13.5px/1.55 var(--sans)} .evita b{color:var(--car)} .ok{background:var(--pinbg);border-left:3px solid var(--pin);border-radius:0 4px 4px 0; padding:12px 16px;font:400 13.5px/1.55 var(--sans)} .ok b{color:var(--pin)} .faixa-demo{height:40px;display:flex;align-items:center;gap:10px;padding:0 var(--pad); background:var(--ambbg);color:var(--ambtx);font:500 12px/1 var(--sans);letter-spacing:.02em} .faixa-demo i{width:8px;height:8px;background:var(--amb);display:block} /* --- citações ------------------------------------------------------------- */ .cit{font:italic 400 clamp(19px,2.3vw,25px)/1.45 var(--serif);color:#fff;margin-bottom:16px} .cit-aut{font:400 12px var(--mono);color:rgba(238,242,249,.5);margin-bottom:18px} .cit-nota{font:400 14.5px/1.6 var(--sans);color:rgba(238,242,249,.72); border-left:1px solid rgba(238,242,249,.22);padding-left:16px} /* --- hero e mandala ------------------------------------------------------- */ .hero{position:relative;overflow:hidden} .spot{position:absolute;inset:0;pointer-events:none; background:radial-gradient(620px circle at 70% 38%,rgba(120,160,235,.20),transparent 70%)} .hero-grade{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(36px,6vw,84px) 0 clamp(56px,8vw,104px)} .mandala-caixa{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px; min-height:clamp(320px,42vw,560px);justify-content:center} .mandala-caixa svg{display:block;width:100%;max-width:620px} .mandala-caixa g[data-mec]{cursor:pointer} .painel-mec{width:100%;max-width:560px;min-height:150px;background:rgba(255,255,255,.05); border:1px solid rgba(174,201,244,.24);border-radius:4px;padding:18px 22px;transition:border-color .4s ease} .painel-mec.ativo{border-color:rgba(174,201,244,.4)} .chip-flu{position:absolute;font:400 12px var(--mono);color:rgba(226,235,250,.72); background:rgba(11,26,66,.72);border:1px solid rgba(174,201,244,.3);border-radius:999px; padding:6px 13px;white-space:nowrap;backdrop-filter:blur(3px);pointer-events:none; animation:flutua 7s ease-in-out infinite} @keyframes flutua{0%,100%{margin-top:0}50%{margin-top:-9px}} @keyframes surge{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .surge{animation:surge .38s ease both} /* --- tabelas -------------------------------------------------------------- */ .tabela{background:var(--sup);border:1px solid var(--lin);border-radius:4px;overflow:hidden} .tabela .rolar{overflow-x:auto} .linha{display:grid;gap:16px;padding:14px 24px;border-bottom:1px solid var(--lin);align-items:baseline} .linha:last-child{border-bottom:0} .linha.cab{font:500 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--tm);padding:10px 24px} .mec-linha{grid-template-columns:52px minmax(190px,1fr) 48px minmax(220px,1.2fr) minmax(220px,1.2fr);min-width:900px} .log-linha{grid-template-columns:110px 140px minmax(320px,1fr);min-width:720px} .linha.destaque{background:var(--tint)} /* --- rodapé --------------------------------------------------------------- */ .rodape{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;padding-top:36px} .rodape a{color:rgba(238,242,249,.7);font:400 13.5px var(--sans);display:block;margin-bottom:9px} .rodape a:hover{color:#fff} .aviso-legal{margin-top:32px;font:400 11.5px/1.7 var(--mono);color:rgba(238,242,249,.35)} @media (max-width:640px){ .chip-flu{display:none} .menu{gap:14px} .menu a{font-size:12.5px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .bt:hover{transform:none} } /* --- camada de chips do hero ---------------------------------------------- */ .chips{position:absolute;left:0;right:0;top:104px;bottom:0;pointer-events:none;overflow:hidden} .regua.peq i{width:13px;height:5px} .selo-linha{display:flex;align-items:flex-start;gap:10px} /* --- listas de sinais e de escopo ----------------------------------------- */ .sinais{display:flex;flex-direction:column;gap:8px;margin-top:12px} .sinal{display:flex;gap:10px;font:400 13.5px/1.5 var(--sans);color:var(--txt)} .sinal b{flex:none;width:14px;font:600 14px var(--mono)} .sinal.mais b{color:var(--pin)} .sinal.menos b{color:var(--car)} .escopo{display:flex;flex-direction:column;gap:11px;margin-top:16px} .escopo li{list-style:none;display:flex;gap:10px;font:400 14px/1.55 var(--sans);color:var(--txt)} .escopo li::before{flex:none;font:600 13px var(--mono)} .escopo.faz li::before{content:"✓";color:var(--pin)} .escopo.naofaz li::before{content:"✕";color:var(--car)} ul.escopo{margin:0;padding:0} /* --- barras de contagem (nunca percentual) -------------------------------- */ .barras{display:flex;flex-direction:column;gap:10px;margin-top:18px} .barra{display:grid;grid-template-columns:46px 1fr 28px;gap:12px;align-items:center; font:500 12px var(--mono);color:var(--tm)} .barra u{display:block;height:9px;background:var(--ni);border-radius:2px;text-decoration:none} .escuro .barra u{background:var(--azc)} .barra s{text-decoration:none;text-align:right;color:var(--tit)} .escuro .barra{color:rgba(238,242,249,.6)} .escuro .barra s{color:#fff} /* --- formulário (tela de entrar) ------------------------------------------ */ .entrar-pag{min-height:100vh;display:flex;flex-direction:column} .entrar-meio{flex:1;display:flex;align-items:center;justify-content:center;padding:48px var(--pad)} .entrar-card{width:100%;max-width:404px} .campo{display:block;margin-bottom:16px} .campo span{display:flex;justify-content:space-between;align-items:baseline; font:500 12.5px var(--sans);color:var(--tm);margin-bottom:7px} .campo span a{font:400 12.5px var(--sans);color:var(--ni)} .campo input{width:100%;font:400 15px var(--sans);color:var(--txt);background:var(--pap); border:1px solid var(--lin);border-radius:4px;padding:13px 14px} .campo input:focus{outline:2px solid var(--ni);outline-offset:-1px;border-color:var(--ni)} .erro{background:var(--carbg);border-left:3px solid var(--car);border-radius:0 4px 4px 0; padding:11px 14px;margin-bottom:20px;font:400 13.5px/1.5 var(--sans);color:var(--car)} .ou{display:flex;align-items:center;gap:14px;margin:22px 0;font:400 12px var(--mono);color:var(--tm)} .ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--lin)} .bt-sso{width:100%;text-align:center;font:500 14px var(--sans);color:var(--tc); background:transparent;border:1px dashed var(--lin);border-radius:4px;padding:14px;cursor:not-allowed} /* --- seletor de idioma ---------------------------------------------------- Fica no menu, antes do botão de tema. Três links curtos em vez de um