/* Depto de Engenharia e Automacao - Master Automacao - Autor: Derlivon Silva */
/* ============================================================================
PELE PRECISAO - camada visual sobre o moderno.css
Por que uma pele e nao um CSS novo: as 6 paginas usam 171 classes, com
funcoes vivas (painel Prix, painel Pix, sanfona, novidades girando, guia
clicavel). Reescrever o HTML delas e o caminho mais curto para uma funcao
sumir sem ninguem notar. Entao o moderno.css continua cuidando do LAYOUT -
quem esta onde, quantas colunas, o que empilha no celular - e este arquivo
troca so a APARENCIA: cor, letra, canto, fio, textura.
Reverter e uma linha: tirar o desta pele.
Carrega DEPOIS do moderno.css. A ordem importa.
========================================================================== */
/* ---------- 1. Tokens: a troca que faz metade do trabalho ---------------- */
:root{
/* Papel quente no lugar do branco puro. Branco #FFF e o que entrega
template pronto; papel morno le como impresso. */
--fundo:#F2F0EA;
--fundo-2:#E9E6DE;
--tinta:#0B0D12;
--tinta-2:#4A4F5C;
/* #7C8291 dava 3,38:1 sobre o fundo e 3,08 sobre o fundo-2 - abaixo dos
4,5 que texto miudo precisa. E este token pinta quase todo rotulo pequeno
do site: era uma cor errada aparecendo em 40 lugares. #5F6574 da 5,12 e
4,68, e mantem o mesmo cinza-azulado. */
--tinta-3:#5F6574;
--linha:#0B0D1220;
/* marca inalterada - vem do PNG do logo */
--azul:#241F86;
--azul-esc:#12102E;
--verm:#FF0219;
/* o mesmo vermelho, escurecido o suficiente para virar LETRA legivel:
#FF0219 sobre branco da 3,98 e o minimo e 4,5. Este da 5,02.
Usar so em texto - em filete e borda continua o --verm da marca. */
/* Medido de novo em 09-09-2026: #E00016 da 4,41 sobre o fundo - passa raspando
por baixo do minimo de 4,5. #C4000F da 5,49 e 5,02, e continua sendo o
vermelho da marca. O #FF0219 original so serve como FIO ou FUNDO, nunca
como letra: 3,56. */
--verm-txt:#C4000F;
/* vermelho escuro o bastante para levar letra BRANCA em cima: 7,36 */
--verm-fundo:#B00010;
/* Bahnschrift e o DIN da Microsoft: a letra de regua, paquimetro e placa
de maquina. Ja vem no Windows. Cai em Roboto Condensed no Android. */
--display:"Bahnschrift","DIN Alternate","Roboto Condensed",
"Avenir Next Condensed","Segoe UI",system-ui,sans-serif;
--mostrador:"Cascadia Mono","SF Mono","Roboto Mono","Consolas",ui-monospace,monospace;
}
body{background:var(--fundo);color:var(--tinta)}
/* ---------- 2. Tipografia ------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.018em}
h1{letter-spacing:-.028em;line-height:.98}
h2{line-height:1.05}
/* numeral de mostrador: largura fixa, o numero nao dança ao trocar */
.num,.cifra,.numeros-lcd,.peso,.val,.valor,.total,.dado,.qtd,.n,
.pix-numero,.marca-versao,.aferidor-item b,.fab-fatos div b,
.numeros-grade b,.leitura b{
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* rotulo de secao: caixa alta, espacejado, com o numero em vermelho */
.rotulo,.faixa-rot,.selo-topo,.fab-papel,.novidades-tit,.tit{
font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;
}
/* ---------- 3. Canto vivo: instrumento nao tem canto redondo ------------- */
/* Raio unico de 16px em tudo e um dos sinais mais citados de site gerado.
Aqui o canto quase morre: 2 a 3px, so o suficiente para nao cortar. */
.btn,.btn-2,.btn-azul,.btn-borda,.btn-luz,.btn-zap,
.card,.consulta,.nota,.fab,.tab,.etiqueta,.doc,
.faq details,.resposta,.marco,.servico,
.cidade,.uf,.marca-cx,.sinal-bloco,.guia-painel,
.pix-painel,.pix-linha,.tempo li,.passos li,.leitura{
border-radius:3px;
}
.marca,.placa,.master-bloco .placa,.fab-logo{border-radius:6px}
.zap-flutua{border-radius:50%} /* este continua redondo: e um botao de acao */
/* ---------- 4. Superficies: fio no lugar de sombra ----------------------- */
/* Cartao com sombra difusa flutuando e visual de aplicativo. Aqui a peca
assenta no papel e se separa por fio de 1px, como pagina impressa. */
/* .item e .grupo NAO entram aqui: apesar do nome generico, sao as pecas da
faixa rolante, que vive em fundo escuro. Quando entraram nesta lista,
ganharam fundo branco a 48% e borda - viraram caixas cinzas por cima do
texto claro. Nome de classe generico e armadilha: conferir onde ele e
usado antes de estilizar. */
.card,.consulta,.tab,.doc,.servico,.marco,
.fab,.guia-painel{
box-shadow:none;
border:1px solid var(--linha);
background:#FFFFFF7A;
}
.card:hover,.consulta:hover{
border-color:#0B0D1244;background:#FFFFFFB8;
}
/* nota deixa de ser caixa e vira bloco ancorado por um fio vermelho */
.nota{
background:#FFFFFF8C;
border:1px solid var(--linha);
border-left:3px solid var(--verm);
}
.nota.atencao{border-left-color:#C9A227}
/* ---------- 5. Botoes ---------------------------------------------------- */
.btn,.btn-2,.btn-azul,.btn-borda,.btn-luz,.btn-zap{
font-family:var(--display);font-weight:700;
letter-spacing:.05em;text-transform:uppercase;
}
.btn-2{border-width:1.5px}
/* ---------- 6. Capa: papel milimetrado atras do titulo ------------------- */
.capa,.capa-forte{position:relative;overflow:hidden}
.capa::after,.capa-forte::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
repeating-linear-gradient(to right, #FFFFFF0D 0 1px, transparent 1px 72px),
repeating-linear-gradient(to bottom, #FFFFFF0D 0 1px, transparent 1px 72px);
-webkit-mask-image:linear-gradient(125deg,#000 8%,transparent 74%);
mask-image:linear-gradient(125deg,#000 8%,transparent 74%);
}
.capa > *,.capa-forte > *{position:relative;z-index:1}
/* ---------- 7. A regua graduada: assinatura da marca --------------------- */
/* Tiques finos desenhados em CSS, zero imagem. Fecha a capa e separa faixas,
do jeito que uma escala de medicao e desenhada. */
.capa::before,.tira-novidades::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:11px;z-index:2;
background:
repeating-linear-gradient(to right, #FFFFFF33 0 1px, transparent 1px 12px),
repeating-linear-gradient(to right, var(--verm) 0 1px, transparent 1px 60px);
}
.tira-novidades{position:relative}
/* O rotulo JA tem filete vermelho pelo ::before do moderno.css. Nao criar um
segundo aqui - medido: dois filetes, um de 40px e outro de 44px. */
/* ---------- 7b. Tira de novidades: fundo proprio ------------------------ */
/* Defeito que eu embuti quando criei a tira e so apareceu agora que fui
medir: o fundo era preto a 22% contando com uma faixa escura atras, mas a
tira e irma da capa, nao filha - atras dela esta o corpo da pagina, claro.
Texto branco sobre cinza claro deu 1,9:1, quando o minimo legivel e 4,5:1.
Agora a tira carrega o proprio fundo escuro. */
.tira-novidades{
background:var(--tinta);
border-top:3px solid var(--verm);
border-bottom:1px solid #FFFFFF1F;
}
/* ---------- 7c. Tira de novidades: peso de verdade ---------------------- */
/* Estava ilegivel de tao discreta: titulo de 1,06rem e resumo em branco a 60%
de opacidade, numa faixa de 20px de altura. Lida como rodape de anuncio, e
nao como a unica parte do site que muda sozinha - que e justamente o que ela
tem de mais valioso.
Aqui ela ganha altura, escala de titulo e contraste. So aparencia: a grade
de colunas continua sendo do moderno.css, e tirar esta pele devolve tudo. */
.tira-novidades .novidades{padding:40px 0;gap:34px}
/* o rotulo da faixa vira marcador de secao, do tamanho dos outros do site */
.tira-novidades .novidades-tit{font-size:.78rem;color:#FFFFFFB8}
.tira-novidades .novidades-tit::before{width:9px;height:9px;margin-right:11px}
.tira-novidades .novidades-topo{padding-right:30px;border-right-color:#FFFFFF2E}
/* etiqueta de assunto: fundo cheio em vez de fio, para ler de longe */
.tira-novidades .novidades-rot{
background:var(--verm-fundo);border-color:transparent;color:#fff;
font-size:.64rem;letter-spacing:.18em;padding:5px 10px;
}
/* a manchete: e o que a pessoa tem que enxergar do outro lado da sala */
.tira-novidades .novidades-item h3{
font-family:var(--display);
font-size:clamp(1.18rem,1.75vw,1.62rem);
line-height:1.2;letter-spacing:-.01em;
}
/* seta de "isto abre" - sem mexer no HTML das 5 paginas */
.tira-novidades .novidades-item h3::after{
content:" →";color:var(--verm-cla);
display:inline-block;transition:transform .25s ease;
}
.tira-novidades .novidades-item:hover h3::after{transform:translateX(5px)}
.tira-novidades .novidades-item p{
font-size:.95rem;line-height:1.5;color:#FFFFFFC4;
}
.tira-novidades .novidades-pe .fonte{font-size:.78rem;color:#FFFFFF8F}
/* a regua do rodape da tira tem 11px: sem esta folga a data encosta nela */
.tira-novidades .novidades-pe{padding-bottom:6px}
@media(max-width:1000px){
.tira-novidades .novidades{padding:24px 0;gap:16px}
.tira-novidades .novidades-item h3{font-size:1.22rem}
}
@media(max-width:620px){
.tira-novidades .novidades-rot{justify-self:start}
}
/* ---------- 8. Faixas alternadas ---------------------------------------- */
section:nth-of-type(even),.sub-sec:nth-of-type(even){background:transparent}
/* ---------- 9. Cabecalho ------------------------------------------------- */
header{background:var(--fundo);border-bottom:1px solid var(--linha)}
nav a{font-family:var(--display);font-weight:600;letter-spacing:.04em}
.menu-lista a{font-family:var(--display);font-weight:600}
/* ---------- 10. Sanfona de perguntas ------------------------------------ */
.faq details{
background:#FFFFFF7A;border:1px solid var(--linha);
}
.faq details[open]{border-color:#0B0D1240;background:#FFFFFFC4}
.faq summary{font-family:var(--display);letter-spacing:-.008em}
/* ---------- 11. Tabela --------------------------------------------------- */
table{border-color:var(--linha)}
th{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;
font-size:.74rem;color:var(--tinta-3)}
td,th{border-color:var(--linha)}
/* ---------- 12. Rodape --------------------------------------------------- */
.rodape,footer.rodape-novo{background:var(--tinta)}
.rodape h4,.rodape-grid h4{font-family:var(--display);letter-spacing:.2em}
/* ---------- 13. O que NAO se toca --------------------------------------- */
/* Estes tem visual proprio, testado, e mexer neles quebraria a leitura:
- .prix / .janela / .numeros-lcd = o visor da balanca
- .pix-painel = painel do Banco Central
- .etiqueta = a etiqueta impressa
- .progresso = barra de leitura da pagina
Ficam como estao de proposito. */
/* ============================================================================
PAINEL DE SITUACAO DA SEFAZ
Regra do painel: quem abre decide em menos de 3 segundos. Entao o estado
vem em cartao grande com cor semantica, e o detalhe servico a servico
nasce FECHADO - ninguem le parede de texto para saber se pode faturar.
========================================================================== */
.sefaz-painel{
border:1px solid var(--linha);border-left:3px solid var(--verm);
background:#FFFFFF9E;padding:22px 24px;margin-bottom:28px;border-radius:3px;
}
.sefaz-topo{display:flex;align-items:baseline;justify-content:space-between;
gap:14px;flex-wrap:wrap;margin-bottom:16px}
.sefaz-tit{font-family:var(--display);font-size:.72rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);margin:0}
.sefaz-hora{font-size:.82rem;color:var(--tinta-3);
font-variant-numeric:tabular-nums}
.sefaz-cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.sefaz-cartoes{grid-template-columns:1fr}}
.sefaz-cartao{
border:1px solid var(--linha);border-top:3px solid var(--tinta-3);
background:#fff;padding:16px 18px;border-radius:3px;
display:flex;flex-direction:column;gap:6px;
}
.sefaz-uf{font-family:var(--display);font-size:.7rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.sefaz-estado{font-family:var(--display);font-size:1.5rem;font-weight:800;
letter-spacing:-.02em;line-height:1.1}
.sefaz-obs{font-size:.82rem;color:var(--tinta-2)}
/* cor semantica: verde no ar, amarelo instavel, vermelho fora */
.sefaz-cartao.ok{border-top-color:#1B9E4B}
.sefaz-cartao.ok .sefaz-estado{color:#137639}
.sefaz-cartao.alerta{border-top-color:#C9891B}
.sefaz-cartao.alerta .sefaz-estado{color:#8F5F07}
.sefaz-cartao.ruim{border-top-color:var(--verm)}
.sefaz-cartao.ruim .sefaz-estado{color:#C4021A}
.sefaz-cartao.aguardando .sefaz-estado{color:var(--tinta-3);font-size:1.1rem}
/* leitura velha: avisa sem esconder o dado */
.sefaz-velho{border-left-color:#C9891B}
.sefaz-velho .sefaz-hora{color:#8F5F07;font-weight:600}
.sefaz-detalhe{margin-top:16px;border-top:1px solid var(--linha);padding-top:12px}
.sefaz-detalhe summary{cursor:pointer;font-family:var(--display);font-weight:700;
font-size:.88rem;letter-spacing:.04em;color:var(--azul);list-style:none;
display:inline-flex;align-items:center;gap:8px}
.sefaz-detalhe summary::-webkit-details-marker{display:none}
.sefaz-detalhe summary::before{content:"+";font-size:1.1rem;line-height:1;
color:var(--verm);font-weight:800}
.sefaz-detalhe[open] summary::before{content:"\2212"}
.sefaz-detalhe-corpo{margin-top:14px}
.sefaz-detalhe-corpo h4{font-family:var(--display);font-size:.72rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);
margin:16px 0 8px}
.sefaz-detalhe-corpo h4:first-child{margin-top:0}
.sefaz-detalhe-corpo ul{list-style:none;margin:0;padding:0}
.sefaz-detalhe-corpo li{display:flex;justify-content:space-between;gap:14px;
padding:7px 0;border-bottom:1px solid var(--linha);font-size:.9rem;
color:var(--tinta-2)}
.sefaz-detalhe-corpo li:last-child{border-bottom:0}
.sefaz-detalhe-corpo li b{font-family:var(--display);font-weight:700;
white-space:nowrap}
.sefaz-detalhe-corpo li.ok b{color:#137639}
.sefaz-detalhe-corpo li.alerta b{color:#8F5F07}
.sefaz-detalhe-corpo li.ruim b{color:#C4021A}
.sefaz-fonte{margin:14px 0 0;font-size:.84rem;line-height:1.55;color:var(--tinta-3)}
.sefaz-fonte a{color:var(--azul);font-weight:600}
/* ============================================================================
CENTRAL DE CONSULTAS - cartoes que preenchem a linha
Com 6 cartoes a grade fechava certo. Ao remover o Painel Monitor (parado
desde 2015) sobraram 5, e 5 nao divide bem: em 1840px dava 4 + 1, deixando
747px vagos na ultima linha. Medido.
Grade de colunas fixas sempre deixa celula vaga quando o numero de itens
nao e multiplo. Em linha flexivel, os cartoes da ultima fileira crescem e
ocupam a largura toda - o vao deixa de existir em QUALQUER quantidade,
inclusive se voce acrescentar ou tirar cartao depois.
========================================================================== */
.consultas{
display:flex;
flex-wrap:wrap;
gap:16px;
}
.consultas .consulta{
flex:1 1 230px; /* cresce para fechar a linha, nunca menor que 230px */
min-width:0;
}
/* ============================================================================
CALCULADORA DE ERRO DE PESAGEM
Entrada a esquerda, resultado a direita e grudado - o numero acompanha
enquanto a pessoa mexe nos campos, senao ela digita sem ver o efeito.
========================================================================== */
.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr;gap:20px}}
.calc-campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.calc-campos{grid-template-columns:1fr}}
.calc-campo{display:block}
.calc-campo > span{display:block;font-family:var(--display);font-size:.72rem;
font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--tinta-2);margin-bottom:8px}
.calc-entrada{display:flex;align-items:center;gap:8px;
border:1px solid var(--linha);border-bottom:2px solid var(--azul);
background:#fff;border-radius:3px;padding:10px 14px}
.calc-entrada:focus-within{border-color:var(--azul);
box-shadow:0 0 0 3px rgba(36,31,134,.12)}
.calc-entrada input{
flex:1;min-width:0;border:0;outline:0;background:none;
font-family:var(--mostrador);font-size:1.35rem;font-weight:600;
color:var(--tinta);font-variant-numeric:tabular-nums;
-moz-appearance:textfield;
}
.calc-entrada input::-webkit-outer-spin-button,
.calc-entrada input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-entrada em{font-style:normal;font-family:var(--display);font-size:.82rem;
font-weight:700;letter-spacing:.06em;color:var(--tinta-3);white-space:nowrap}
.calc-entrada em.antes{order:-1;font-size:1rem;color:var(--tinta-2)}
.calc-campo small{display:block;margin-top:7px;font-size:.8rem;line-height:1.45;
color:var(--tinta-3)}
/* resultado */
.calc-saida{
position:sticky;top:130px;align-self:start;
background:var(--azul-esc);color:#fff;border-radius:3px;
border-left:3px solid var(--verm);padding:26px 24px;
}
@media(max-width:900px){.calc-saida{position:static}}
.calc-rotulo{margin:0 0 10px;font-family:var(--display);font-size:.7rem;
font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.6)}
.calc-ano{display:block;font-family:var(--display);font-weight:800;
font-size:clamp(2rem,4.6vw,2.9rem);line-height:1;letter-spacing:-.025em;
color:#FF6172}
.calc-periodo{display:block;margin-top:6px;font-family:var(--display);
font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.55)}
.calc-quebra{display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.calc-quebra span{display:block;font-family:var(--display);font-size:.66rem;
letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
margin-bottom:5px}
.calc-quebra b{font-family:var(--mostrador);font-size:1.05rem;font-weight:600;
color:#fff;font-variant-numeric:tabular-nums}
.calc-peso{margin:18px 0 0;font-size:.88rem;line-height:1.5;
color:rgba(255,255,255,.72)}
.calc-peso b{color:#fff}
/* erro zero nao e alarme: e o estado que a gente quer */
.calc-zerado{border-left-color:#1B9E4B}
.calc-zerado .calc-ano{color:#5BE38A}
/* Botao dentro de caixa de nota no celular: largura cheia e texto que quebra.
"Quero conferir a minha balanca" nao cabe em 375px numa linha so - media
338px de largura terminando em 379px, e a pagina passava a rolar de lado.
Largura cheia tambem da alvo de toque maior, que e melhor no balcao. */
/* Vale para os botoes do corpo da pagina - dentro de nota E dentro de .acoes.
O do cabecalho fica de fora de proposito: la ele divide a barra com o logo
e o menu, e largura cheia quebraria o topo. */
@media(max-width:560px){
.nota .btn-zap, .nota .btn-2,
.acoes .btn-zap, .acoes .btn-2{
display:flex;width:100%;justify-content:center;text-align:center;
white-space:normal;padding-inline:16px;line-height:1.3;
}
}
/* Coluna de grade nao pode ser esticada pelo filho mais largo.
Em CSS Grid, "1fr" tem minimo igual ao conteudo minimo - entao dois botoes
lado a lado, que nao quebram, empurram a coluna inteira para alem da tela.
Medido: coluna de 280px virando 313px e a pagina rolando de lado em 320px.
min-width:0 devolve o controle da largura para a grade. */
.dupla > .corpo,
.dupla > .lado{min-width:0}
.acoes{flex-wrap:wrap}
/* ============================================================================
FAIXA ROLANTE - legibilidade em movimento
Medido: contraste ja estava bom (6,3 a 18,4:1). O defeito era outro - texto
PEQUENO E ANDANDO. Letra parada de 13px se le; a mesma letra deslizando,
nao. O olho tem uma fracao de segundo por palavra.
Entao: aumenta tudo, alarga o espaco entre itens e desacelera de 38s para
56s. Quem passa o mouse ainda para a faixa, e quem pediu menos animacao
no sistema continua vendo tudo parado e empilhado.
========================================================================== */
.faixa-rolante{padding:28px 0}
.trilho{animation-duration:56s}
.trilho .grupo{gap:64px;padding-right:64px}
.trilho .item{font-size:1.2rem;letter-spacing:-.005em}
.trilho .item img{height:32px}
.trilho .marca-item{gap:4px}
.trilho .marca-item .nome-marca{font-size:1.34rem;letter-spacing:-.015em}
.trilho .marca-item .area-marca{
font-size:.84rem;letter-spacing:.12em;
color:#FF8C99; /* padrao, para parceiro sem cor cadastrada */
}
/* ---------- A COR DE CADA PARCEIRO -------------------------------------
Estava tudo no vermelho da Master, o que faz o parceiro parecer nosso.
Cada cor abaixo foi LIDA no site do proprio fabricante em 10-09-2026:
Toledo #0B66B2 - o azul dos titulos e das faixas de toledobrasil.com.br
Topdata #006EB3 - lido de dentro do SVG do logo deles, logo-Topdata-1.svg
Fire #D83038 - amostrado nos pixels de logofire-40.png
Por que o texto nao usa o hex exato: sobre esta faixa escura eles dao
3,12 / 3,41 / 3,86, e texto precisa de 4,5. Entao a LETRA leva a mesma
matiz um pouco mais clara (4,6+), e o hex exato aparece no PONTO ao lado,
que por ser grafico precisa so de 3:1 e passa.
Toledo e Topdata sao azuis quase iguais - o contraste entre os dois e 1,09.
Nao e engano: as duas marcas usam o mesmo azul. Quem separa e o nome, e vai
separar de vez quando os logos chegarem em img/marcas/.
--------------------------------------------------------------------- */
.trilho a[href="toledo.html"] .area-marca{color:#0E82E2}
.trilho a[href="topdata.html"] .area-marca{color:#0084D7}
.trilho a[href="fire-sistemas.html"] .area-marca{color:#DE4E55}
/* o ponto que vem depois de cada um leva o hex exato da marca */
.trilho a[href="toledo.html"] + .sep{background:#0B66B2}
.trilho a[href="topdata.html"] + .sep{background:#006EB3}
.trilho a[href="fire-sistemas.html"] + .sep{background:#D83038}
/* no hover o nome assume a cor do parceiro, nao a nossa */
.trilho a[href="toledo.html"]:hover .nome-marca{color:#0E82E2}
.trilho a[href="topdata.html"]:hover .nome-marca{color:#0084D7}
.trilho a[href="fire-sistemas.html"]:hover .nome-marca{color:#DE4E55}
.trilho .leve{font-size:1.12rem;color:rgba(255,255,255,.82);font-weight:600}
.trilho .sep{width:9px;height:9px}
@media(max-width:640px){
.trilho .item{font-size:1.08rem}
.trilho .marca-item .nome-marca{font-size:1.16rem}
.trilho .leve{font-size:1rem}
.trilho .grupo{gap:44px;padding-right:44px}
}
/* A faixa e feita de links. Link tem sublinhado por padrao, e sublinhado em
texto que desliza suja a leitura. Aqui a indicacao de clique vem da cor no
hover, que ja existe. */
.trilho .item,
.trilho a.marca-item{
background:none;border:0;text-decoration:none;border-radius:0;
}
.trilho a.item:hover .nome-marca,
.trilho a.item:hover{color:#FF8C99}
/* Nome e area do fabricante empilhados.
O HTML tem um sem classe entre o link e os dois textos. O link ja
estava em coluna, mas com UM filho so - entao a coluna nao fazia efeito, e
dentro do envolucro os dois textos fluiam lado a lado, grudados:
"TopdataPONTO E CONTROLE DE ACESSO". Medido. O envolucro tambem vira coluna. */
.trilho .marca-item > span{
display:flex;flex-direction:column;
gap:3px;align-items:flex-start;line-height:1.15;
}
/* "cifra" existe porque "num" ja era CARTAO de estatistica no CSS antigo
(fundo branco, 30px de respiro). Reusar o nome punha caixa branca atras
de cada numero da calculadora. Nome generico e armadilha - conferir onde
ele ja e usado antes de reaproveitar. */
.cifra{background:none;padding:0}
/* ============================================================================
BLOCOS DE SINAL - destaque que nao empurra o bloco
A regra antiga puxava o bloco focado 25px para a esquerda (margin-left:-25px)
para a barra vermelha ficar pendurada fora do texto. O efeito colateral e
que o bloco ativo sai da coluna e briga com os vizinhos - desalinhado.
Aqui TODOS os blocos ja reservam o espaco da barra: 3px de borda
transparente mais o recuo. Focar so troca a COR da borda. Geometria
identica em qualquer estado, zero movimento.
========================================================================== */
.sinal-bloco{
border:0;
border-top:1px solid var(--linha);
border-left:3px solid transparent;
padding:24px 18px 24px 19px;
background:none;
border-radius:0;
}
.sinal-bloco:first-of-type{border-top:0}
.sinal-bloco:hover{background:#0B0D1206}
.sinal-bloco.focado{
margin-left:0;
padding-left:19px;
border-left-color:var(--verm);
background:linear-gradient(90deg, rgba(255,2,25,.055), transparent 62%);
}
/* ============================================================================
LEITOR DE ETIQUETA
Entrada a esquerda, diagnostico a direita. O mapa do codigo fica embaixo do
campo para a pessoa entender o que esta digitando enquanto digita.
========================================================================== */
.etiq-lab{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:900px){.etiq-lab{grid-template-columns:1fr;gap:18px}}
.etiq-lab > *{min-width:0}
.etiq-campo{display:block}
.etiq-campo > span{display:block;font-family:var(--display);font-size:.72rem;
font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--tinta-2);margin-bottom:8px}
.etiq-campo input{
width:100%;box-sizing:border-box;
border:1px solid var(--linha);border-bottom:2px solid var(--azul);
background:#fff;border-radius:3px;padding:14px 16px;
font-family:var(--mostrador);font-size:clamp(1.15rem,2.4vw,1.6rem);
font-weight:600;letter-spacing:.12em;color:var(--tinta);
font-variant-numeric:tabular-nums;
}
.etiq-campo input:focus{outline:0;border-color:var(--azul);
box-shadow:0 0 0 3px rgba(36,31,134,.12)}
.etiq-campo small{display:block;margin-top:8px;font-size:.82rem;color:var(--tinta-3)}
/* mapa do codigo: mostra que parte e o que */
.etiq-mapa{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:6px;
margin-top:16px;text-align:center}
.etiq-mapa div{border-top:2px solid var(--verm);padding-top:8px}
.etiq-mapa b{display:block;font-family:var(--mostrador);font-size:.82rem;
color:var(--tinta-3);letter-spacing:.06em}
.etiq-mapa span{display:block;font-family:var(--display);font-size:.62rem;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--tinta-2);margin-top:4px}
/* diagnostico */
.et-saida{background:#fff;border:1px solid var(--linha);
border-left:3px solid var(--tinta-3);border-radius:3px;padding:20px 22px}
.et-saida.et-ok{border-left-color:#1B9E4B}
.et-saida.et-atencao{border-left-color:#C9891B}
.et-saida.et-incompleto{border-left-color:var(--tinta-3)}
.et-aviso{margin:0;font-size:.94rem;color:var(--tinta-2);line-height:1.55}
.et-linha{margin:0 0 8px;font-size:.94rem;font-weight:600;line-height:1.5;
padding-left:22px;position:relative}
.et-linha:empty{display:none}
.et-linha::before{position:absolute;left:0;top:0;font-weight:800}
.et-linha.ok{color:#137639}
.et-linha.ok::before{content:"\2713"}
.et-linha.ruim{color:#C4021A}
.et-linha.ruim::before{content:"\2715"}
.et-leituras{display:grid;gap:10px;margin-top:14px;padding-top:14px;
border-top:1px solid var(--linha)}
/* display:grid vence o atributo hidden - sem isto o bloco fica marcado
como escondido e continua desenhado na tela. Medido. */
.et-leituras[hidden],.et-conselho[hidden]{display:none}
.et-leitura{background:var(--fundo-2);border-radius:3px;padding:12px 14px}
.et-leitura b{display:block;font-family:var(--display);font-size:.68rem;
font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--tinta-2);margin-bottom:5px}
.et-leitura span{font-size:.95rem;color:var(--tinta-2)}
.et-leitura em{font-style:normal;font-family:var(--mostrador);font-weight:600;
color:var(--tinta);font-variant-numeric:tabular-nums}
.et-conselho{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--linha);
font-size:.94rem;line-height:1.6;color:var(--tinta-2)}
/* ============================================================================
SECAO "O QUE NOS SEPARA" - duas colunas de conteudo
Medido em 1600px: titulo, texto e a frase-chave ficavam todos travados na
esquerda, com 783px vagos a direita. Eram tres blocos empilhados numa
coluna so, cada um com max-width proprio.
Agora a frase-chave sobe para a segunda coluna e a largura se preenche com
CONTEUDO, nao com respiro. Os botoes atravessam embaixo, fechando o bloco.
========================================================================== */
/* Padrao geral, nao regra por secao: o CABECALHO da secao vira duas colunas
(rotulo e titulo a esquerda, texto de entrada a direita) e TODO o resto
atravessa a largura cheia.
Antes eu tinha escrito uma regra sob medida para uma secao so, com linha e
coluna fixas. Funcionava naquela, e nas irmas - que tem outra quantidade de
filhos - se equilibrava por acaso. Regra que depende da quantidade de filhos
quebra na proxima secao que alguem criar.
Medido em 1600px antes: titulo com 836px de sobra, texto com 735, e a
trilha de passos comprimida em 717 de 1360 disponiveis. */
@media(min-width:1000px){
.secao > .wrap{
display:grid;
grid-template-columns:1.02fr .98fr;
column-gap:clamp(34px,3.4vw,62px);
align-items:start;
}
/* padrao: largura cheia */
.secao > .wrap > *{grid-column:1 / -1;max-width:none}
/* excecao: o cabecalho ocupa as duas colunas de cima */
.secao > .wrap > .etiq {grid-column:1;grid-row:1}
.secao > .wrap > .titulo{grid-column:1;grid-row:2}
.secao > .wrap > .apoio {grid-column:2;grid-row:1 / 3;align-self:end;margin-top:0}
/* Segundo paragrafo em diante NAO pode herdar a celula do primeiro: dois
elementos na mesma linha/coluna de grade se sobrepoem, e o texto vira
borrao. Aqui eles descem para linha propria, largura cheia. */
.secao > .wrap > .apoio ~ .apoio{grid-column:1 / -1;grid-row:auto;
align-self:auto;max-width:74ch}
/* a frase-chave, quando existe, sobe para a direita do cabecalho */
.secao.escuro > .wrap > .frase{grid-column:2;grid-row:3;margin:0}
/* o par de papeis enche a coluna da esquerda, ao lado da frase */
.secao.escuro > .wrap > .papeis{grid-column:1;grid-row:3;margin:0;align-self:start}
}
/* Trilha de passos em duas colunas na tela larga.
Vinha travada por style="max-width:70ch" escrito no HTML - 717px de 1360,
deixando 640px vagos em media. Em coluna unica, uma lista de 5 passos nao
tem como preencher tela de 1600px sem virar linha quilometrica.
O fio vertical passa de dentro do para cada
, senao ele so
desenharia na coluna da esquerda. */
@media(min-width:1000px){
.trilha{
grid-template-columns:1fr 1fr;
column-gap:clamp(40px,4vw,72px);
border-left:0;margin-left:0;
}
.trilha li{
border-left:2px solid var(--linha);
margin-left:20px;padding-left:40px;
}
.secao.escuro .trilha li{border-left-color:rgba(255,255,255,.18)}
}
/* Aviso sobre a NFC-e dentro do painel de status.
O painel le a pagina de NF-e. Sem esta linha, o lojista de varejo ve
"SEFAZ MT no ar" e conclui que a nota do consumidor dele esta garantida -
e nao esta. Fundo amarelo de atencao porque e ressalva, nao dado. */
.sefaz-nfce{
margin:14px 0 0;padding:12px 14px;
background:#C9891B14;border-left:3px solid #C9891B;border-radius:3px;
font-size:.9rem;line-height:1.6;color:var(--tinta-2);
}
.sefaz-nfce b{color:var(--tinta);font-family:var(--display);letter-spacing:.01em}
/* ============================================================================
LEGENDA DAS CORES DO PAINEL
Medido em 1600px: os cartoes de consulta terminavam em 439px e o painel do
Pix ia ate 744px - 305px de vao morto embaixo. A legenda ocupa esse espaco
com o que faltava: o painel pinta verde, amarelo e vermelho e nunca dizia
o que cada cor significa, nem o que fazer em cada caso.
========================================================================== */
.legenda-cores{
margin-top:16px;padding:18px 20px;
background:#FFFFFF7A;border:1px solid var(--linha);border-radius:3px;
}
.legenda-tit{
margin:0 0 14px;font-family:var(--display);font-size:.72rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);
}
.legenda-item{
display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline;
padding:11px 0;border-top:1px solid var(--linha);
}
.legenda-item:first-of-type{border-top:0;padding-top:0}
.legenda-item b{
font-family:var(--display);font-size:.95rem;font-weight:800;
white-space:nowrap;padding-left:20px;position:relative;
}
/* a bolinha usa a mesma cor do cartao de status, para o olho ligar as duas */
.legenda-item b::before{
content:"";position:absolute;left:0;top:.36em;
width:11px;height:11px;border-radius:50%;
}
.legenda-item.ok b{color:#137639}
.legenda-item.ok b::before{background:#1B9E4B}
.legenda-item.alerta b{color:#8F5F07}
.legenda-item.alerta b::before{background:#C9891B}
.legenda-item.ruim b{color:#C4021A}
.legenda-item.ruim b::before{background:var(--verm)}
.legenda-item span{
grid-column:2;font-size:.9rem;line-height:1.55;color:var(--tinta-2);
}
@media(max-width:520px){
.legenda-item{grid-template-columns:1fr;gap:4px}
.legenda-item span{grid-column:1}
}
/* A legenda e o TERCEIRO filho da grade da central. Sem posicao explicita, o
CSS Grid a colocou sozinha na coluna da direita e empurrou o painel do Pix
para uma linha nova ocupando a largura toda - layout embaralhado. Medido.
Aqui cada peca tem lugar marcado: cartoes e legenda empilhados a esquerda,
painel do Pix atravessando as duas linhas a direita. */
@media(min-width:1000px){
.central{align-items:start}
.central > .consultas {grid-column:1;grid-row:1}
.central > .legenda-cores {grid-column:1;grid-row:2}
.central > aside {grid-column:2;grid-row:1 / span 2}
}
/* ============================================================================
12. COR POR ASSUNTO - o site deixa de ser monocromatico
----------------------------------------------------------------------------
Cada assunto tem a sua cor, e ela aparece no MESMO lugar em toda pagina: o
filete do rotulo de secao, o sublinhado do item de menu, a borda do recado
lateral e o brilho da capa. Quem navega aprende sem ler: roxo e fiscal,
dourado e metrologia, verde-agua e ponto.
As cores sao as mesmas das cenas do novo-visual.html - nada inventado aqui.
Cor que E DADO nao entra nesta brincadeira: verde/amarelo/vermelho de
situacao da SEFAZ, a legenda de cores e o verde do WhatsApp continuam
significando o que significavam.
========================================================================== */
:root{--acento:var(--verm)}
/* As tres cores de parceiro NAO sao escolha de design: foram lidas no site de
cada fabricante em 10-09-2026. Toledo #0B66B2 (azul dos titulos e faixas),
Topdata #006EB3 (de dentro do SVG do logo deles), Fire #D83038 (amostrado
nos pixels de logofire-40.png). Antes estavam inventadas - a Topdata em
verde-agua e a Fire em laranja, sendo que as duas nao usam essas cores.
As demais sao nossas, para separar assunto. */
body[data-tema="balanca"]{--acento:#2E8BFF}
body[data-tema="casa"]{--acento:#FF2D3F}
body[data-tema="fire"]{--acento:#D83038} /* vermelho lido do logo da Fire */
body[data-tema="fiscal"]{--acento:#8E6BFF}
body[data-tema="metrologia"]{--acento:#E0B429}
body[data-tema="parceiros"]{--acento:#FF2D3F}
body[data-tema="perguntas"]{--acento:#FF7A85}
body[data-tema="ponto"]{--acento:#00C2A8}
body[data-tema="toledo"]{--acento:#0B66B2} /* azul do site da Toledo */
body[data-tema="topdata"]{--acento:#006EB3} /* azul lido do SVG do logo da Topdata */
/* 1. o filete do rotulo de secao - a assinatura visual do sistema */
.rotulo::before{background:var(--acento)}
/* 2. o sublinhado do menu: liga o item clicado a cor da pagina que abriu */
nav a::after{background:var(--acento)}
.tem-sub > .sub a:hover,.tem-sub > .sub a.aqui{box-shadow:inset 3px 0 0 var(--acento)}
/* 3. o recado lateral. .atencao continua vermelho: ali vermelho e alerta */
.nota{border-left-color:var(--acento)}
.nota.atencao{border-left-color:var(--verm)}
.nota b{color:var(--tinta)}
/* 4. a capa ganha o brilho do assunto por cima do azul da marca */
.capa::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(680px 380px at 8% 108%,
color-mix(in srgb,var(--acento) 26%,transparent),transparent 66%)}
/* 5. a regua graduada do rodape da capa pinta os tiques com o acento */
.capa::before,.tira-novidades::before{
background:
repeating-linear-gradient(to right,#FFFFFF33 0 1px,transparent 1px 12px),
repeating-linear-gradient(to right,var(--acento) 0 1px,transparent 1px 60px)}
/* 6. cartao que abre outra pagina reage na cor do assunto */
.leitura:hover{border-color:var(--acento);
box-shadow:0 18px 40px color-mix(in srgb,var(--acento) 22%,transparent)}
.leitura:hover .seta{color:var(--azul)}
.consulta:hover{border-color:var(--acento)}
/* 7. o indice da pagina - cor no filete, nunca na letra */
.indice a:hover{color:var(--azul);text-decoration:underline}
.indice b{color:var(--tinta-2)}
.indice b::before{content:"";display:inline-block;width:22px;height:3px;
background:var(--acento);vertical-align:middle;margin-right:9px}
/* ============================================================================
13. ACABAMENTO TECNICO - numero com cara de instrumento
----------------------------------------------------------------------------
Numero de estatistica em fonte proporcional dança quando o valor muda e
nunca alinha em coluna. Em mostrador mono com algarismo de largura fixa,
ele para quieto - e passa a parecer leitura de equipamento, que e o que a
empresa vende.
========================================================================== */
.num b,.fab-fatos div b,.cifra b,.marca-versao{
font-family:var(--mostrador);
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
letter-spacing:-.02em}
/* o numero fica escuro e legivel; quem carrega a cor e o fio acima dele */
.fab-fatos div{border-top:3px solid var(--acento);padding-top:12px}
.fab-fatos div b{color:var(--tinta)}
/* fio fino no topo de cada faixa clara: separa sem desenhar caixa */
section[style*="fundo-2"]{position:relative}
section[style*="fundo-2"]::before{content:"";position:absolute;top:0;left:0;right:0;
height:2px;background:linear-gradient(to right,
var(--acento),color-mix(in srgb,var(--acento) 18%,transparent) 42%,transparent 72%)}
/* ============================================================================
14. COR, SEGUNDA CAMADA - onde o assunto aparece mais forte
----------------------------------------------------------------------------
Acento so como filete, borda ou fundo chapado. NUNCA como cor de texto: o
dourado da metrologia sobre o papel morno da 1,9:1 de contraste, quando o
minimo legivel e 4,5:1.
========================================================================== */
/* o indice da pagina deixa de ser caixa cinza e passa a ter o tom do assunto */
.indice{background:color-mix(in srgb,var(--acento) 7%,var(--fundo-2));
border-left:3px solid var(--acento)}
/* cartao que leva para outro lugar ganha uma tarja do assunto no topo */
.leitura,.consulta{position:relative;overflow:hidden}
.leitura::before,.consulta::before{content:"";position:absolute;top:0;left:0;
right:0;height:3px;background:var(--acento);
transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.leitura:hover::before,.consulta:hover::before{transform:scaleX(1)}
/* Cabecalho de tabela: fundo chapado do assunto com texto ESCURO. Branco por
cima do acento reprova em contraste nos 10 temas (1,96 no dourado, 3,69 no
melhor caso); escuro passa em todos, de 5,27 a 9,93. */
/* ATUALIZADO 10-09-2026: com o acento a 100%, os temas da Toledo e da Topdata
(azuis escuros de verdade, lidos do site deles) derrubaram a letra escura
para 3,29 e 3,59. A 75% o pior tema fica em 5,40 e a cor continua forte.
Nao trocar por letra branca: ai o dourado da metrologia reprova. */
.tab thead th{background:color-mix(in srgb,var(--acento) 75%,#FFFFFF);
color:var(--tinta);border-color:transparent;font-weight:800}
/* passo numerado da lista "como funciona" */
.passos li::before,.tempo li::before{border-color:var(--acento)}
/* ============================================================================
15. VERMELHO QUE E LETRA - correcao de contraste
----------------------------------------------------------------------------
Medido: #FF0219 sobre o fundo claro do recado da 3,98:1, e texto normal
precisa de 4,5:1. Todos os lugares em que o vermelho e LETRA passam a usar
o tom escurecido. Onde ele e filete, borda ou tarja, continua o da marca.
========================================================================== */
.nota.atencao b,
.lista-nao li::before,
.faq summary::before,
.guia-painel .legenda b,
.menu-lista a.atual::after,
.sinal-bloco:hover .toque,.sinal-bloco.focado .toque{color:var(--verm-txt)}
/* ============================================================================
16. OS DOIS PAPEIS - o par que preenche a coluna da esquerda
----------------------------------------------------------------------------
Fica em faixa escura, entao o contraste e medido contra o fundo escuro da
secao, nao contra o papel. Texto branco cheio no nome, e branco a 72% na
explicacao - o suficiente para passar folgado sobre #12102E.
O fio da esquerda separa quem e Estado de quem e oficina: vermelho da marca
na nossa linha, tom neutro na do orgao. Nunca o contrario - dar a cor da
Master para o IPEM seria sugerir vinculo que nao existe.
========================================================================== */
.papeis{display:grid;gap:14px;margin:26px 0 0;align-content:start}
.papel{border:1px solid #FFFFFF24;border-left:3px solid #FFFFFF3D;
background:#FFFFFF0A;border-radius:3px;padding:13px 16px;
display:grid;gap:3px}
.papel-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.papel.casa{border-left-color:var(--verm)}
.papel-tag{font-family:var(--display);font-size:.62rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:#FFFFFFA6}
.papel b{font-family:var(--display);font-size:1.12rem;color:#fff;
letter-spacing:.01em}
.papel-txt{font-size:.92rem;line-height:1.5;color:#FFFFFFB8}
@media(max-width:900px){
.papeis{margin-top:20px}
}
/* ============================================================================
17. VISOR DE VACUO FLUORESCENTE (VFD) - o visor de verdade do Prix 6
----------------------------------------------------------------------------
A Toledo descreve o visor do Prix 6 como "display de vacuo fluorescente".
Num VFD o fosforo emite luz DIRETO, sem iluminacao por tras: por isso o vidro
e quase preto e o simbolo parece flutuar aceso sobre ele. Fundo azul claro,
que estava aqui antes, e assinatura de LCD com backlight - a outra tecnologia,
que a Toledo usa no Prix 3.
A cor e azul-esverdeada, entre o azul de 475 nm e o verde de 510 nm. E a mais
comum em VFD e e o que se ve na balanca do balcao.
========================================================================== */
:root{
--vfd:#6FFFE4; /* fosforo aceso */
--vfd-halo:#12E9C8; /* o brilho que vaza em volta do simbolo */
--vfd-vidro:#03100E; /* o vidro, quase preto com leve verde */
}
/* o vidro: quase preto, com o leve esverdeado do filtro otico */
.prix .janela{
background:
radial-gradient(120% 150% at 50% -10%, #0A211E 0%, #051411 52%, var(--vfd-vidro) 100%);
border:1px solid #000;
box-shadow:inset 0 2px 16px #000000A6, inset 0 0 46px rgba(18,233,200,.10);
position:relative;overflow:hidden;
}
/* Grade do anodo: o VFD tem finas linhas verticais de malha na frente do
fosforo, visiveis de perto. E o detalhe que separa "imitacao de visor" de
"visor". Fica em 4% - de longe some, de perto aparece. */
.prix .janela::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(90deg,
rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
}
/* digito aceso: nucleo claro e halo esverdeado, como fosforo excitado */
.prix .val,
.prix .linha-texto{
color:var(--vfd);
text-shadow:
0 0 4px rgba(111,255,228,.95),
0 0 12px rgba(18,233,200,.7),
0 0 30px rgba(18,233,200,.4),
0 0 60px rgba(18,233,200,.18);
}
/* segmento apagado: no VFD ele nao some nem fica cinza - fica como sombra
fosca do proprio simbolo, sem brilho nenhum */
.prix .fantasma{color:rgba(111,255,228,.075);text-shadow:none}
.prix .val .apagado{opacity:.075}
/* fios de separacao e indicadores seguem o mesmo fosforo */
.prix .linha-texto,.prix .regua{border-top-color:rgba(111,255,228,.16)}
.prix .ind{color:rgba(111,255,228,.26)}
.prix .ind.on{color:var(--vfd);text-shadow:0 0 6px rgba(111,255,228,.9),
0 0 16px rgba(18,233,200,.55)}
.prix .faixa-rot{color:rgba(200,255,248,.66)}
/* reflexo do vidro: uma faixa clara no alto, bem fraca. Vidro de visor sempre
pega luz do ambiente - sem isso a janela parece um buraco, nao um vidro. */
.prix .janela::before{
content:"";position:absolute;left:0;right:0;top:0;height:38%;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.055),transparent);
}
/* ============================================================================
18. CAIXA DE IA - pergunta, triagem e orcamento
----------------------------------------------------------------------------
Um desenho so para os tres modos: muda o texto, nao o formato. A cor e a do
assunto da pagina, entao a caixa nunca parece peca colada de outro site.
========================================================================== */
.ia{border:1px solid var(--linha);border-left:3px solid var(--acento);
background:#FFFFFF9E;border-radius:3px;padding:24px 24px 22px;margin:30px 0}
.ia-tit{font-family:var(--display);font-size:1.06rem;font-weight:800;
letter-spacing:-.01em;margin:0 0 4px;color:var(--tinta)}
.ia-sub{margin:0 0 16px;font-size:.92rem;color:var(--tinta-2);line-height:1.5}
.ia-linha{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.ia-campo{flex:1 1 260px;min-width:0;font:inherit;font-size:.98rem;
padding:12px 14px;border:1px solid var(--linha);border-radius:3px;
background:#fff;color:var(--tinta);resize:vertical;min-height:48px}
.ia-campo:focus{outline:2px solid var(--acento);outline-offset:1px;
border-color:transparent}
.ia-enviar{flex:0 0 auto;font:inherit;font-family:var(--display);font-weight:700;
letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;
padding:12px 22px;border:0;border-radius:3px;cursor:pointer;
background:var(--azul);color:#fff;transition:.2s}
.ia-enviar:hover:not(:disabled){background:var(--tinta)}
.ia-enviar:disabled{opacity:.55;cursor:progress}
/* foto: rotulo que parece botao, com o input escondido atras */
.ia-foto-rot{display:inline-flex;align-items:center;gap:8px;margin-top:11px;
font-size:.86rem;color:var(--tinta-2);cursor:pointer}
.ia-foto-rot input{position:absolute;width:1px;height:1px;opacity:0}
.ia-foto-rot span{border-bottom:1px dashed var(--tinta-3)}
.ia-foto-rot:focus-within span{outline:2px solid var(--acento);outline-offset:3px}
.ia-previa{margin-top:12px}
.ia-previa img{max-width:190px;border:1px solid var(--linha);border-radius:3px}
/* resposta */
.ia-saida{margin-top:18px;padding:16px 18px;border-radius:3px;
border:1px solid var(--linha);background:var(--fundo-2)}
.ia-saida.pensando{color:var(--tinta-2);font-style:italic}
.ia-saida.pronta{border-left:3px solid var(--acento);background:#FFFFFFC4}
.ia-saida.erro{border-left:3px solid var(--verm);background:#FFFFFFC4}
.ia-saida p{margin:0 0 10px;font-size:.96rem;line-height:1.6}
.ia-saida p:last-child{margin-bottom:0}
.ia-saida ul{margin:0 0 10px;padding-left:20px;font-size:.96rem;line-height:1.6}
.ia-saida li{margin-bottom:5px}
.ia-aviso{display:block;margin-top:12px;padding-top:11px;
border-top:1px solid var(--linha);font-size:.83rem;color:var(--tinta-3);
line-height:1.5}
/* O rodape da caixa nao e enfeite: e onde o visitante fica sabendo que quem
respondeu foi um programa, e para onde ir quando a resposta nao servir. */
.ia-pe{margin:14px 0 0;font-size:.8rem;color:var(--tinta-3);line-height:1.5}
.ia-pe a{color:var(--azul)}
@media(max-width:560px){
.ia{padding:20px 18px}
.ia-enviar{width:100%}
}
/* ============================================================================
19. CARTOES DE PROVA - o que se pode conferir
----------------------------------------------------------------------------
Formato de grade de cartoes, um em destaque escuro. A diferenca em relacao a
um mural de depoimentos e que cada cartao aqui tem como ser verificado - e
por isso o que puder levar link, leva.
Sobem 56px sobre a capa (herdado de .numeros): ficam meio dentro da faixa
escura, meio fora. E o que faz o olho parar neles antes do primeiro rolar.
========================================================================== */
.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.provas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.provas{grid-template-columns:1fr}}
.prova{background:#fff;border:1px solid var(--linha);border-radius:3px;
padding:22px 22px 20px;display:flex;flex-direction:column;gap:7px;
box-shadow:0 10px 28px rgba(11,13,18,.07);transition:.22s}
.prova:hover{transform:translateY(-3px);
box-shadow:0 20px 44px rgba(11,13,18,.13)}
.prova-selo{font-family:var(--display);font-size:.62rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3)}
.prova > b{font-family:var(--display);font-size:clamp(1.3rem,2.1vw,1.62rem);
font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--azul)}
.prova p{margin:0;font-size:.9rem;line-height:1.55;color:var(--tinta-2)}
.prova-link{margin-top:auto;padding-top:10px;font-family:var(--display);
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--azul);text-decoration:none}
.prova-link:hover{text-decoration:underline}
/* O destaque e o registro no orgao: e o unico cartao que um concorrente sem
oficina registrada nao consegue copiar. Fundo escuro, como no print. */
.prova.destaque{background:var(--tinta);border-color:transparent}
.prova.destaque .prova-selo{color:#FFFFFF9E}
.prova.destaque > b{color:#fff}
.prova.destaque p{color:#FFFFFFC7}
.prova.destaque .prova-link{color:var(--acento)}
@media(max-width:620px){
.prova{padding:18px 18px 16px}
}
/* ============================================================================
20. FORMULARIO DE AVALIACAO - dentro da faixa escura
----------------------------------------------------------------------------
Vive sobre fundo escuro, entao campo branco e texto escuro dentro dele: o
contrario (campo escuro) some no fundo e a pessoa nao percebe que ha campo.
========================================================================== */
.av{margin-top:30px;max-width:760px}
.av-rot{font-family:var(--display);font-size:.72rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:#FFFFFFA6;margin:0 0 8px}
.av-estrelas{display:flex;gap:4px;margin-bottom:20px}
.av-estrela{font-size:2rem;line-height:1;background:none;border:0;padding:2px 3px;
cursor:pointer;color:#FFFFFF33;transition:color .15s;border-radius:3px}
.av-estrela:hover,.av-estrela.acesa{color:#F2C14E}
.av-estrela:focus-visible{outline:2px solid #fff;outline-offset:2px}
.av-dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.av-dupla{grid-template-columns:1fr}}
.av-campo{display:block;margin-bottom:14px;position:relative}
.av-campo > span{display:block;font-size:.84rem;color:#FFFFFFC7;margin-bottom:6px}
.av-campo em{font-style:normal;color:#FFFFFF80}
.av-campo input,.av-campo textarea{width:100%;font:inherit;font-size:.98rem;
padding:11px 13px;border:1px solid #FFFFFF33;border-radius:3px;
background:#fff;color:var(--tinta);resize:vertical}
.av-campo input:focus,.av-campo textarea:focus{outline:2px solid #fff;
outline-offset:1px;border-color:transparent}
.av-conta{position:absolute;right:2px;bottom:-17px;font-size:.74rem;color:#FFFFFF8F}
/* Campo isca: escondido de quem enxerga E de leitor de tela, mas presente no
HTML. display:none faria robo bom ignorar; assim ele preenche e se entrega.
Nunca use este truque em campo de verdade - aqui e o unico caso legitimo. */
.av-isca-caixa{position:absolute;left:-9999px;width:1px;height:1px;
overflow:hidden}
.av-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.av-nota{margin:16px 0 0;font-size:.83rem;color:#FFFFFF9E;line-height:1.55}
.av-nota a{color:#fff}
.av-saida{margin:0;padding:15px 17px;border-radius:3px;font-size:.95rem;
line-height:1.55}
.av-saida.pronta{background:#FFFFFF14;border-left:3px solid #25D366;color:#fff}
.av-saida.erro{background:#FFFFFF14;border-left:3px solid var(--verm);color:#fff}
/* ============================================================================
21. MURAL DE AVALIACOES APROVADAS
----------------------------------------------------------------------------
Nasce escondido pelo atributo hidden e o JS so revela se vier alguma. Em
fundo escuro, entao aspas em branco cheio e o rodape em branco a 65%.
========================================================================== */
.mural{margin-top:26px}
.mural-rot{font-family:var(--display);font-size:.72rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:#FFFFFFA6;margin:0 0 14px}
.mural-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.mural-grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mural-grade{grid-template-columns:1fr}}
.mural-item{margin:0;background:#FFFFFF12;border:1px solid #FFFFFF24;
border-radius:3px;padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.mural-estrelas{color:#F2C14E;letter-spacing:2px;font-size:.92rem}
.mural-item blockquote{margin:0;font-size:.93rem;line-height:1.55;color:#fff}
.mural-item figcaption{margin-top:auto;padding-top:8px;
border-top:1px solid #FFFFFF1F;display:flex;flex-direction:column;gap:1px}
.mural-item figcaption b{font-size:.9rem;color:#fff}
.mural-item figcaption span{font-size:.8rem;color:#FFFFFF9E}