/* ============================================================
IndústriaON — tokens da identidade visual
Fonte: identidade/Apresentacao_IndustriaON_Final.pdf (manual da marca)
Paleta oficial Tipografia oficial
#00365E azul-escuro Inter textos em geral
#007CE2 azul-claro (Orbitron, do manual, NÃO é usada na web: ilegível)
#FF6464 vermelho
#F6F6F6 branco
============================================================ */
/* ---------- fontes da marca, servidas do próprio domínio ----------
Subconjunto latino (pt-BR): 83 KB para os quatro arquivos.
Nada de CDN externo — a auditoria do blog achou 2.914 KB por página. */
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/_marca/fontes/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("/_marca/fontes/inter-600.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/_marca/fontes/inter-700.woff2") format("woff2");
}
/* Títulos. A Orbitron do manual NÃO entra na web em lugar nenhum: é display
quadrada e não se lê nem em rótulo curto. Fica só dentro do desenho do
logotipo, que é vetor. Títulos e detalhes usam Instrument Sans. */
@font-face {
font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url("/_marca/fontes/instrument-sans-var.woff2") format("woff2-variations");
}
:root {
/* --- cores da marca, exatamente como no manual --- */
--azul-escuro: #00365E;
--azul-claro: #007CE2;
--vermelho: #FF6464;
--branco: #F6F6F6;
--preto-marca: #0C1014; /* consta nos arquivos de logotipo */
/* --- derivadas para contraste (ver DECISOES.md) ---
A paleta do manual é de origem gráfica e três pares reprovam em
texto pequeno no WCAG AA. Estas são as ÚNICAS variações, todas
mínimas, e só entram onde há texto por cima. */
--azul-link: #0077DA; /* #007CE2 escurecido 4%: 4,52:1 no branco */
--vermelho-texto: #D13434; /* #FF6464 como TEXTO: 4,94:1 no branco, 4,57:1 no #F6F6F6 */
--vermelho-claro: #FF8A8A; /* #FF6464 como texto sobre azul-escuro: 5,48:1 */
/* --- superfícies ---
O portal é claro, sempre. color-scheme: light abaixo impede que o
navegador inverta campos de formulário, barra de rolagem e select
quando o sistema do visitante está em modo escuro. */
--papel: #FFFFFF;
--papel-2: var(--branco);
--papel-3: #E9EBED;
--borda: #D7DBDF;
--borda-forte: #B9C0C7;
/* --- tinta --- */
--tinta: var(--preto-marca);
--tinta-suave: #434B53;
--tinta-fraca: #656E77; /* 4,80:1 no #F6F6F6 — o #6B747D dava 4,39 e reprovava */
/* --- papéis semânticos --- */
--titulo: var(--azul-escuro);
--link: var(--azul-link);
--acento: var(--vermelho); /* fio, borda, fundo — nunca texto */
--acento-texto:var(--vermelho-texto); /* rótulo e numeral em vermelho */
--acento-fundo:#FFF0F0;
--cta-fundo: var(--vermelho);
--cta-tinta: var(--preto-marca); /* 6,60:1 — passa AA */
--ok: #1E7A4D;
/* --- marca (lidas pelos SVGs de logotipo) --- */
--marca-simbolo: var(--azul-claro);
--marca-texto: var(--azul-escuro);
/* --- tipografia ---
texto : corpo, formulários, tabelas
titulo : h1/h2/h3 e botões — grotesca, "Helvetica com mais caráter"
detalhe : rótulo curto em caixa alta (seção, tabela, rodapé) — mesma
Instrument Sans, diferenciada por tamanho e tracking. */
--fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--fonte-titulo: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--fonte-detalhe: var(--fonte-titulo);
/* --- forma --- */
--raio: 6px;
--sombra: 0 1px 2px rgba(0, 54, 94, .07), 0 4px 14px rgba(0, 54, 94, .06);
--largura: 1120px;
/* Respiro entre seções: o site inteiro usa estes dois, para o intervalo
ser o mesmo em toda página. Cresce com a tela e não aperta no celular. */
--respiro: clamp(56px, 8vw, 96px);
--respiro-menor: clamp(36px, 5vw, 60px);
color-scheme: light;
}
/* IndústriaON — molde de página de produto.
Depende de /_marca/marca.css para cores, fontes e forma. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0; background: var(--papel); color: var(--tinta);
font-family: var(--fonte-texto); font-size: 17px; line-height: 1.65;
font-feature-settings: "calt" 1, "kern" 1;
overflow-x: hidden;
}
.env { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 16px; }
/* Tudo em Instrument Sans + Inter. A Orbitron do manual não é usada:
ilegível em tela, em qualquer tamanho. Rótulos curtos se diferenciam
por caixa alta, tamanho e tracking, não por outra fonte. */
h1, h2, h3, .marca {
font-family: var(--fonte-titulo);
font-weight: 700;
letter-spacing: -.022em;
}
/* Instrument Sans vai de 400 a 700: pedir 800 não engorda, o navegador
trava em 700 e o H1 fica igual ao H2. A hierarquia vem do tamanho
e do tracking mais fechado. */
h1 { font-weight: 700; letter-spacing: -.03em; }
h1, h2, h3 { color: var(--titulo); }
/* --- rótulos curtos em caixa alta --- */
.rotulo {
font-family: var(--fonte-detalhe);
font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--acento-texto);
}
.so-leitor {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--azul-claro); outline-offset: 2px; border-radius: 3px;
}
/* ---------- topo: duas faixas ----------
1ª faixa azul-escuro, fixa no alto: marca em branco, busca larga, porta
do fornecedor. 2ª faixa, um tom abaixo, rola junto: departamentos. */
.topo { background: var(--azul-escuro); position: sticky; top: 0; z-index: 20;
--marca-texto: #FFFFFF; --marca-simbolo: #4DA8F0; }
.topo-1 { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.marca { display: flex; align-items: center; text-decoration: none; flex: none; }
.marca svg { height: 28px; width: auto; display: block; }
.topo-espaco { flex: 1; }
.busca {
flex: 1 1 320px; max-width: 600px; margin-inline: auto; display: flex; align-items: center;
min-width: 0; position: relative;
}
.busca svg { position: absolute; left: 15px; color: var(--tinta-fraca); pointer-events: none; }
.busca input {
flex: 1; min-width: 0; padding: 12px 16px 12px 42px; font: inherit; font-size: 15px; color: var(--tinta);
background: #fff; border: 2px solid #fff; border-right: 0;
border-radius: var(--raio) 0 0 var(--raio); outline: none;
}
.busca input:focus { border-color: var(--azul-claro); }
.busca input::placeholder { color: var(--tinta-fraca); }
.busca button {
align-self: stretch; padding: 0 24px; font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 700;
cursor: pointer; color: #fff; background: var(--azul-claro); border: 0;
border-radius: 0 var(--raio) var(--raio) 0; transition: background .15s ease;
}
.busca button:hover { background: #1A8FEF; }
.topo-conta { display: flex; align-items: center; gap: 22px; flex: none; }
.topo-conta a {
font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; text-decoration: none;
white-space: nowrap; transition: color .15s ease;
}
.topo-anuncie { color: #fff; }
.topo-anuncie:hover, .topo-anuncie[aria-current="page"] { color: var(--vermelho-claro); }
.topo-entrar {
color: #fff; padding: 9px 18px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 100px;
}
.topo-entrar:hover { border-color: #fff; }
.topo-2 { background: #002845; border-bottom: 1px solid #001C31; }
.topo-2 .env {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
min-height: 44px; overflow-x: auto; scrollbar-width: none;
}
.topo-2 .env::-webkit-scrollbar { display: none; }
.topo-2-deps, .topo-2-extra { display: flex; align-items: center; gap: 22px; flex: none; }
.topo-2-rotulo {
display: inline-flex; align-items: center; gap: 8px; padding-right: 22px;
border-right: 1px solid rgba(255, 255, 255, .16);
font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 700; color: #fff;
}
.topo-2 a {
font-size: 13.5px; font-weight: 500; color: #C7D8E6; text-decoration: none; white-space: nowrap;
padding-block: 12px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.topo-2 a:hover { color: #fff; border-bottom-color: var(--azul-claro); }
.topo-2 .topo-2-parceiro { color: #7CC0F5; font-weight: 600; }
.topo-2-extra { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
@media (max-width: 860px) {
.topo-1 { flex-wrap: wrap; gap: 12px 16px; padding-block: 12px; min-height: 0; }
.topo-1 .marca { margin-right: auto; }
.busca { order: 3; flex-basis: 100%; max-width: none; }
.topo-anuncie { display: none; }
.topo-2-extra { display: none; }
}
/* Cabeçalho da página de cadastro: só o logo. Sem busca e sem menu não há
nada para centralizar, então o logo fica onde sempre esteve — alinhado
à mesma margem do formulário, e não flutuando no meio da tela. */
.topo-nu { background: var(--papel); border-bottom: 1px solid var(--borda); --marca-texto: var(--azul-escuro); --marca-simbolo: var(--azul-claro); }
.topo-nu .env { display: flex; align-items: center; gap: 21px; min-height: 64px; }
/* ---------- migalhas ---------- */
.migalhas { font-size: 13.5px; color: var(--tinta-fraca); padding: 18px 0 0; }
.migalhas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.migalhas li::after { content: "›"; margin-left: 8px; color: var(--borda-forte); }
.migalhas li:last-child::after { content: ""; }
.migalhas a { color: var(--tinta-suave); text-decoration: none; }
.migalhas a:hover { color: var(--link); text-decoration: underline; }
/* ---------- capa ---------- */
.capa { padding: 24px 0 var(--respiro-menor); border-bottom: 1px solid var(--borda); }
.capa h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 18px; }
.capa .resumo { font-size: 18.5px; color: var(--tinta-suave); max-width: 62ch; margin: 0 0 29px; }
.acoes { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.btn {
display: inline-block; padding: 16px 31px; cursor: pointer; text-decoration: none;
font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; letter-spacing: -.005em;
border-radius: var(--raio); border: 1px solid transparent;
}
.btn-1 { background: var(--cta-fundo); color: var(--cta-tinta); border-color: var(--cta-fundo); }
.btn-1:hover { filter: brightness(.94); }
.btn-2 { background: transparent; color: var(--titulo); border-color: var(--borda-forte); }
.btn-2:hover { background: var(--papel-2); border-color: var(--azul-claro); color: var(--link); }
.selo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinta-fraca); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
/* ---------- layout ---------- */
.corpo { display: grid; grid-template-columns: minmax(0,1fr) 304px; gap: 57px; padding: var(--respiro-menor) 0 10px; align-items: start; }
@media (max-width: 900px) { .corpo { grid-template-columns: minmax(0, 1fr); gap: 39px; } }
/* min-width:0 impede que a tabela (min-width:520px) estique a coluna
do grid e estoure a viewport no celular. */
.corpo > main, .corpo > aside { min-width: 0; }
article h2 { font-size: clamp(21px, 3vw, 27px); line-height: 1.22; margin: var(--respiro-menor) 0 14px; }
article h2:first-child { margin-top: 0; }
article h3 { font-size: 17.5px; margin: 34px 0 10px; }
article p { margin: 0 0 21px; }
article ul { margin: 0 0 23px; padding-left: 29px; }
article li { margin-bottom: 7px; }
article a { color: var(--link); text-underline-offset: 2px; }
.tabela-envolve { overflow-x: auto; margin: 0 0 29px; border: 1px solid var(--borda); border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 520px; }
th, td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th {
background: var(--papel-2); color: var(--titulo);
font-family: var(--fonte-detalhe); font-weight: 700; font-size: 12.5px;
letter-spacing: .06em; text-transform: uppercase;
}
.nota {
background: var(--papel-2); border-left: 3px solid var(--acento);
padding: 20px 22px; margin: 0 0 29px; font-size: 15.5px; border-radius: 0 var(--raio) var(--raio) 0;
}
.nota strong { color: var(--titulo); }
/* ---------- blocos comerciais ---------- */
.oferta { margin: var(--respiro-menor) 0; scroll-margin-top: 80px; }
.oferta > h2 { margin-bottom: 4px; }
.oferta .sub { color: var(--tinta-fraca); font-size: 15.5px; margin: 0 0 23px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 21px; }
.cartao {
border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel);
overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra);
}
.cartao .foto { aspect-ratio: 4/3; background: var(--papel-3); display: grid; place-items: center; }
.cartao .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Card sem foto: a faixa de cor no topo faz o lugar da imagem sem fingir
que existe uma. Sem ela o card vira um retângulo de texto solto no meio
dos que têm foto. */
.cartao-nu { border-top: 3px solid var(--azul-escuro); }
.cartao-nu .txt { padding-top: 20px; }
.cartao .txt { padding: 17px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cartao h3 { font-size: 15.5px; margin: 0; line-height: 1.35; }
.cartao .empresa, .cartao .local { font-size: 13px; color: var(--tinta-fraca); }
.cartao .btn { margin-top: 16px; padding: 12px 18px; font-size: 13px; text-align: center; }
/* ---------- lateral ---------- */
.lateral { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 26px; }
@media (max-width: 900px) { .lateral { position: static; } }
.caixa { border: 1px solid var(--borda); border-radius: var(--raio); padding: 25px; background: var(--papel-2); }
.caixa.destaque { border-color: var(--azul-escuro); border-width: 2px; }
.caixa h2, .caixa h3 { font-size: 15.5px; margin: 0 0 17px; }
.caixa label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--tinta-suave); }
.caixa input, .caixa textarea, .caixa select {
width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; margin-bottom: 16px;
color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
}
.caixa textarea { resize: vertical; min-height: 68px; }
.caixa .btn { width: 100%; text-align: center; }
.caixa .aviso { font-size: 12.5px; color: var(--tinta-fraca); margin: 14px 0 0; line-height: 1.5; }
.caixa p { font-size: 14.5px; color: var(--tinta-suave); margin: 0 0 17px; }
.indice { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.indice li { margin-bottom: 10px; }
.indice a { color: var(--tinta-suave); text-decoration: none; }
.indice a:hover { color: var(--link); text-decoration: underline; }
/* ---------- relacionadas ---------- */
.relacionadas { border-top: 1px solid var(--borda); margin-top: var(--respiro); padding: var(--respiro-menor) 0 10px; }
.relacionadas h2 { font-size: 19px; margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips a {
display: inline-block; padding: 9px 20px; font-size: 14.5px; text-decoration: none;
color: var(--tinta-suave); background: var(--papel-2);
border: 1px solid var(--borda); border-radius: 999px;
}
.chips a:hover { border-color: var(--azul-claro); color: var(--link); background: var(--papel); }
/* ---------- rodapé ---------- */
.rodape {
background: var(--azul-escuro); color: #AFC4D4; margin-top: var(--respiro);
font-size: 14.5px; line-height: 1.6;
}
.rodape-grade {
display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
gap: 44px 36px; padding-block: var(--respiro) var(--respiro-menor);
}
.rodape-marca svg { height: 26px; width: auto; display: block; margin-bottom: 20px; }
.rodape-marca p { margin: 0 0 22px; max-width: 36ch; color: #AFC4D4; }
.rodape-cta {
display: inline-block; padding: 12px 22px; border-radius: var(--raio);
font-family: var(--fonte-titulo); font-weight: 700; font-size: 14.5px;
color: var(--cta-tinta); background: var(--cta-fundo); text-decoration: none;
transition: filter .15s ease;
}
.rodape-cta:hover { filter: brightness(.94); }
.rodape .rodape-selo { margin: 12px 0 0; font-size: 13px; color: #8FB1CB; }
.rodape h3 {
font-family: var(--fonte-detalhe); color: #fff; font-size: 12px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; margin: 4px 0 18px;
padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rodape-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.rodape-col a {
color: #D6E3EC; text-decoration: none; position: relative;
transition: color .15s ease, transform .15s ease;
}
.rodape-col a:hover { color: #fff; transform: translateX(3px); }
.rodape-legal {
display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center;
padding-block: 24px 28px; border-top: 1px solid rgba(255, 255, 255, .12);
font-size: 13px; color: #8FB1CB;
}
.rodape-legal p { margin: 0; }
.rodape-legal-links { display: flex; gap: 24px; }
.rodape-legal a { color: #D6E3EC; text-decoration: none; }
.rodape-legal a:hover { color: #fff; }
@media (max-width: 1000px) {
.rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .rodape-grade { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rodape-col a { transition: none; } }
/* ---------- departamento (hub) ---------- */
.corpo-largo { padding: var(--respiro-menor) 0 10px; }
.grade-dep { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 21px; }
.cartao-dep {
border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 25px;
background: var(--papel); box-shadow: var(--sombra);
}
.cartao-dep .rotulo { margin: 0 0 9px; }
.cartao-dep h3 { font-size: 18px; margin: 0 0 9px; line-height: 1.25; }
.cartao-dep h3 a { color: var(--titulo); text-decoration: none; }
.cartao-dep h3 a:hover { color: var(--link); text-decoration: underline; }
.cartao-dep p { font-size: 14.5px; color: var(--tinta-suave); margin: 0; line-height: 1.55; }
.corpo-largo article { max-width: 76ch; }
/* ---------- home ---------- */
.heroi { padding: var(--respiro) 0 var(--respiro-menor); border-bottom: 1px solid var(--borda); background: var(--papel-2); }
.heroi h1 {
font-size: clamp(32px, 6vw, 54px); line-height: 1.06; letter-spacing: -.035em;
margin: 10px 0 21px; max-width: 16ch;
}
.heroi .resumo { font-size: 18.5px; color: var(--tinta-suave); max-width: 60ch; margin: 0 0 34px; }
.busca-grande { max-width: 620px; }
.busca-grande input { padding: 20px 23px; font-size: 17px; background: var(--papel); }
.busca-grande button { padding: 20px 34px; font-size: 15px; }
.sugestoes { font-size: 14.5px; color: var(--tinta-fraca); margin: 18px 0 0; }
.sugestoes a { color: var(--link); text-decoration: none; }
.sugestoes a:hover { text-decoration: underline; }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 29px; }
.passo .n {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
background: var(--azul-escuro); color: #fff;
font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; margin-bottom: 16px;
}
.passo h3 { font-size: 17.5px; margin: 0 0 9px; }
.passo p { font-size: 15px; color: var(--tinta-suave); margin: 0; line-height: 1.6; }
.faixa {
border-top: 1px solid var(--borda); margin-top: var(--respiro); padding: var(--respiro-menor) 0 10px;
display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 47px; align-items: start;
}
@media (max-width: 760px) { .faixa { grid-template-columns: 1fr; gap: 26px; } }
.faixa-txt h2 { font-size: clamp(22px, 3.4vw, 30px); margin: 8px 0 16px; }
.faixa-txt p { color: var(--tinta-suave); max-width: 56ch; margin: 0 0 26px; }
.faixa-nota {
font-size: 13px; color: var(--tinta-fraca); background: var(--papel-2);
border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 21px; margin: 0;
}
/* ---------- formulário de cotação ---------- */
.dupla { display: grid; grid-template-columns: 1fr 88px; gap: 0 13px; }
/* Honeypot: precisa existir para o robô e sumir para a pessoa. `display:none`
é ignorado por parte dos robôs, então tira-se da tela sem tirar do fluxo. */
.fora-de-tela {
position: absolute; left: -9999px; width: 1px; height: 1px;
overflow: hidden; opacity: 0;
}
.cf-turnstile { margin: 0 0 16px; }
.retorno {
margin: 16px 0 0; padding: 14px 17px; font-size: 14.5px; line-height: 1.5;
border-radius: 0 var(--raio) var(--raio) 0; border-left: 3px solid var(--borda-forte);
background: var(--papel-3);
}
.retorno.ok { background: #E4F3EA; border-left-color: var(--ok); color: #14603A; }
.retorno.erro { background: var(--acento-fundo); border-left-color: var(--acento); color: #9E2F2F; }
@media (max-width: 900px) {
/* No celular o menu vai para a segunda linha, com rolagem lateral em vez de
sumir atrás de um ícone: o tráfego chega fundo e precisa ver as saídas. */
.topo .env { padding-bottom: 10px; }
.menu { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
.menu a { padding: 9px 14px; font-size: 14px; }
}
/* ═══════════════════════════════════════ página de produto "foto total"
Aprovado em 2026-09-18. Marcadores .ph mostram o brief da foto que falta;
.foto-real embrulha a ![]()
quando o arquivo existe. */
.ph {
position: relative; display: grid; place-content: center; justify-items: center;
gap: 8px; padding: 21px; text-align: center; overflow: hidden;
color: var(--tinta-fraca); border: 1.5px dashed var(--borda-forte); border-radius: var(--raio);
background:
linear-gradient(180deg, rgba(0,54,94,.04), rgba(0,54,94,0)),
repeating-linear-gradient(135deg, #EDEFF1 0 12px, #E4E7EA 12px 24px);
}
.ph svg { color: var(--azul-escuro); opacity: .55; }
.ph-tipo {
font-family: var(--fonte-detalhe); font-size: 11.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--azul-escuro);
}
.ph-brief { font-size: 12.5px; line-height: 1.4; max-width: 30ch; }
.ph-43 { aspect-ratio: 4 / 3; }
.ph-1610 { aspect-ratio: 16 / 10; }
.ph-1 { aspect-ratio: 1 / 1; }
.foto-real { overflow: hidden; border-radius: var(--raio); background: var(--papel-3); }
.foto-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-real.ph-43 { aspect-ratio: 4 / 3; } .foto-real.ph-1610 { aspect-ratio: 16 / 10; }
.foto-real.ph-1 { aspect-ratio: 1 / 1; }
/* ---------- mídia dentro do texto ---------- */
.fig-lado { float: right; width: 46%; margin: 4px 0 16px 36px; }
.fig-lado figcaption, .video figcaption { font-size: 13px; color: var(--tinta-fraca); margin-top: 9px; line-height: 1.45; }
article h2 { clear: both; }
@media (max-width: 700px) { .fig-lado { float: none; width: 100%; margin: 0 0 23px; } }
.versus { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 31px; clear: both; }
.versus-item { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--papel); box-shadow: var(--sombra); }
.versus-item .ph, .versus-item .foto-real { border: 0; border-radius: 0; }
.versus-item h3 { margin: 16px 18px 4px; font-size: 16.5px; }
.versus-item p { margin: 0 18px 18px; font-size: 14px; color: var(--tinta-suave); line-height: 1.5; }
.versus-ou {
position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); z-index: 1;
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
background: var(--azul-escuro); color: #fff; border: 3px solid var(--papel);
font-family: var(--fonte-detalhe); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 560px) { .versus { grid-template-columns: 1fr; } .versus-ou { display: none; } }
.configs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 4px 0 23px; clear: both; }
.config { display: flex; flex-direction: column; gap: 3px; }
.config strong { margin-top: 10px; font-family: var(--fonte-titulo); color: var(--titulo); font-size: 15.5px; }
.config span { font-size: 13px; color: var(--tinta-fraca); line-height: 1.45; }
@media (max-width: 640px) { .configs { grid-template-columns: 1fr 1fr; } }
/* vídeo: a única superfície escura da página, de propósito */
.video { margin: 36px 0 10px; scroll-margin-top: 80px; clear: both; }
.video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--raio); background: var(--azul-escuro); display: block; }
.ph-video {
position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden;
display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 26px;
background:
radial-gradient(60% 80% at 50% 100%, rgba(0,124,226,.35), transparent),
repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
var(--azul-escuro);
color: #D6E3EC;
}
.ph-video .ph-tipo { color: #fff; }
.ph-video .ph-brief { max-width: 44ch; color: #C4D4E0; }
.play {
width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
background: var(--vermelho); color: var(--preto-marca); margin-bottom: 10px;
box-shadow: 0 0 0 10px rgba(255,100,100,.22), 0 8px 24px rgba(0,0,0,.35);
transition: transform .2s ease;
}
.ph-video:hover .play { transform: scale(1.06); }
/* ---------- mosaico de fotos ---------- */
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.mosaico li:first-child { grid-column: span 2; grid-row: span 2; }
.mosaico li:first-child .ph, .mosaico li:first-child .foto-real { height: 100%; aspect-ratio: auto; }
@media (max-width: 640px) {
.mosaico { grid-template-columns: 1fr 1fr; }
.mosaico li:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}
/* cards de fornecedor: foto maior */
.grade { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.cartao .foto { aspect-ratio: 16 / 10; }
.cartao:hover { border-color: var(--azul-claro); }
/* ═══════════════════════════════════════════════════════════════
HOME — VITRINE DE CATEGORIAS
A home anterior era fotográfica: ladrilho com foto para cada
categoria. Com 48 categorias publicadas e foto real para 11, isso
ou repetia imagem (mentira) ou deixava buraco. A vitrine passou a
ícone e o filtro digitado tomou o lugar da rolagem: a pessoa chega
sabendo o nome da máquina, e o caminho mais curto é escrevê-lo.
Tudo que o filtro faz é esconder. As 48 fichas estão no HTML,
agrupadas por departamento, para quem chega sem script e para o
buscador.
═══════════════════════════════════════════════════════════════ */
/* ---------- hero: foto inteira, uma pergunta ---------- */
.hm-hero { position: relative; overflow: hidden; background: var(--azul-escuro); }
.hm-hero > img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
/* O véu é o que faz o H1 branco passar em contraste sobre qualquer
pedaço da foto — sem ele o texto depende do que a imagem tiver ali. */
.hm-veu {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0, 32, 56, .80), rgba(0, 32, 56, .88));
}
.hm-hero-txt {
position: relative; width: 100%; max-width: 720px; margin-inline: auto;
padding: var(--respiro) 16px var(--respiro); text-align: center;
}
.hm-hero-txt h1 {
color: #fff; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.06;
margin: 0 0 31px; text-wrap: pretty;
}
/* ---------- o campo que filtra ---------- */
.hm-filtro {
display: flex; align-items: center; gap: 10px;
padding: 10px 10px 10px 23px; text-align: left;
background: var(--papel); border-radius: calc(var(--raio) * 2.6);
box-shadow: 0 14px 40px rgba(0, 20, 38, .32);
}
.hm-filtro input {
flex: 1; min-width: 0; padding: 16px 0;
font: inherit; font-size: 17.5px; color: var(--tinta);
background: transparent; border: 0; outline: none;
}
.hm-filtro input::placeholder { color: var(--tinta-fraca); }
.hm-filtro button {
flex: none; display: grid; place-items: center; width: 44px; height: 44px;
cursor: pointer; color: #fff; background: var(--azul-escuro);
border: 0; border-radius: calc(var(--raio) * 1.8);
transition: background .15s ease;
}
.hm-filtro button:hover { background: var(--azul-claro); }
/* ---------- vitrine de categorias ---------- */
.hm-cats { padding-top: var(--respiro-menor); scroll-margin-top: 80px; }
.hm-cats-topo {
display: flex; flex-wrap: wrap; gap: 8px 23px; align-items: baseline;
justify-content: space-between; margin-bottom: 29px;
}
.hm-cats-topo h2 { font-size: clamp(21px, 2.8vw, 26px); margin: 0; }
.hm-limpar {
font: inherit; font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600;
color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.hm-limpar:hover { color: var(--azul-escuro); }
.hm-grupo[hidden] { display: none; }
/* As principais numa linha só, sem cartão: o círculo é o botão. Com o
filtro ou o "ver todas", a lista quebra em várias linhas. */
.hm-fichas {
list-style: none; margin: 0 0 18px; padding: 8px 0 4px;
display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px;
}
.hm-ficha[hidden] { display: none; }
.hm-extra { display: none; }
.hm-cats.todas .hm-extra, .hm-cats.filtrando .hm-extra { display: block; }
.hm-cats.todas .hm-extra[hidden], .hm-cats.filtrando .hm-extra[hidden] { display: none; }
.hm-cats.todas .hm-fichas, .hm-cats.filtrando .hm-fichas { row-gap: 23px; }
/* Blocos cheios, na linha da referência: ícone no alto, nome embaixo.
Azul-escuro da marca com o ícone no azul do símbolo do logo. */
.hm-ficha a {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
height: 100%; min-height: 148px; padding: 18px 16px 16px;
text-decoration: none; color: #4DA8F0; background: var(--azul-escuro);
border-radius: 10px;
transition: background .2s ease, transform .2s cubic-bezier(.2,.8,.3,1.2), box-shadow .2s ease;
}
/* a engrenagem do logo espiando no canto, aparece mais no hover */
.hm-ficha a::after {
content: ""; position: absolute; z-index: -1; right: -26px; bottom: -30px; width: 96px;
aspect-ratio: 174.82 / 180.06; opacity: .6;
background: url("/_marca/simbolo-agua-branco.svg") no-repeat center / contain;
transition: transform .4s ease, opacity .2s ease;
}
.hm-icone { display: block; width: 34px; height: 34px; flex: none; transition: color .2s ease; }
.hm-icone svg { width: 34px; height: 34px; display: block; }
.hm-nome {
font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600;
line-height: 1.3; letter-spacing: -.005em; color: #fff; text-align: left;
hyphens: auto; overflow-wrap: break-word;
}
.hm-ficha a:hover, .hm-ficha a:focus-visible {
background: var(--azul-claro); color: #fff; transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 54, 94, .22); outline: none;
}
.hm-ficha a:hover::after { transform: rotate(40deg) scale(1.15); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hm-ficha a, .hm-ficha a::after { transition: none; } }
.hm-todas {
font: inherit; font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700;
color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
}
.hm-todas span { display: inline-block; margin-left: 6px; transition: transform .15s ease; }
.hm-todas:hover { color: var(--azul-escuro); }
.hm-todas:hover span { transform: translateX(4px); }
.hm-cats.filtrando .hm-todas { display: none; }
@media (max-width: 1100px) {
/* no celular a linha rola de lado em vez de espremer oito círculos */
.hm-cats:not(.todas):not(.filtrando) .hm-fichas {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
margin-inline: -16px; padding: 6px 16px 10px; gap: 10px; scrollbar-width: none;
}
.hm-cats:not(.todas):not(.filtrando) .hm-ficha { flex: 0 0 132px; scroll-snap-align: start; }
.hm-cats.todas .hm-fichas, .hm-cats.filtrando .hm-fichas { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (min-width: 1101px) {
.hm-cats.todas .hm-fichas, .hm-cats.filtrando .hm-fichas { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.hm-vazio {
padding: 34px 26px; text-align: center;
border: 1px dashed var(--borda-forte); border-radius: calc(var(--raio) * 1.5);
background: var(--papel-2);
}
.hm-vazio[hidden] { display: none; }
.hm-vazio-t {
font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px;
color: var(--titulo); margin: 0 0 8px;
}
.hm-vazio p { margin: 0; font-size: 15px; color: var(--tinta-suave); }
/* ---------- como funciona: três colunas, uma linha ---------- */
.hm-passos {
margin-top: var(--respiro-menor);
display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.6);
background: var(--papel-2);
}
.hm-passos > div { padding: 26px 29px; border-right: 1px solid var(--papel-3); }
.hm-passos > div:last-child { border-right: 0; }
.hm-passos .n {
font-family: var(--fonte-titulo); font-size: 12px; font-weight: 700;
color: var(--acento-texto); margin: 0 0 6px;
}
.hm-passos h3 { font-size: 16px; margin: 0 0 4px; }
.hm-passos p { margin: 0; font-size: 14.5px; color: var(--tinta-suave); }
/* ---------- sanfonas: anúncios e departamentos ---------- */
.hm-sanfonas { margin-top: var(--respiro); display: grid; gap: 13px; }
.hm-sanfona {
border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.3);
background: var(--papel);
}
.hm-sanfona > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 15px 18px;
font-family: var(--fonte-titulo); font-weight: 700; font-size: 16.5px; color: var(--titulo);
}
.hm-sanfona > summary::-webkit-details-marker { display: none; }
.hm-sanfona > summary:hover { background: var(--papel-2); }
.hm-sanfona > summary > span {
font-family: var(--fonte-texto); font-weight: 400; font-size: 14px;
color: var(--tinta-fraca); text-align: right;
}
.hm-sanfona-corpo { padding: 0 18px 18px; }
.hm-sanfona-intro {
margin: 0 0 18px; font-size: 15px; color: var(--tinta-suave);
display: flex; flex-wrap: wrap; gap: 4px 18px;
justify-content: space-between; align-items: baseline;
}
.hm-sanfona-intro a { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
/* ---------- publicados agora: os 4 anúncios mais novos ---------- */
.hm-recentes { margin-top: var(--respiro); }
.hm-recentes-topo {
display: flex; flex-wrap: wrap; gap: 4px 18px;
justify-content: space-between; align-items: baseline; margin-bottom: 14px;
}
.hm-recentes-topo h2 { margin: 0; }
.hm-recentes-topo a { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.hm-anuncios {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 13px;
}
.hm-anuncio {
display: flex; flex-direction: column; align-items: flex-start; gap: 7px; height: 100%;
padding: 15px 16px; text-decoration: none; color: inherit;
border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel);
transition: border-color .15s ease;
}
.hm-anuncio:hover { border-color: var(--azul-claro); }
.hm-anuncio strong {
font-family: var(--fonte-titulo); font-size: 15.5px; line-height: 1.3; color: var(--titulo);
}
.hm-empresa { font-size: 13.5px; color: var(--tinta-fraca); margin-top: auto; }
.hm-tag {
font-family: var(--fonte-detalhe); font-size: 10.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
padding: 3px 9px; border-radius: 100px;
color: var(--titulo); background: #E9EFF4;
}
.hm-deps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hm-deps a {
display: block; padding: 20px 21px; text-decoration: none; color: inherit;
border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.3);
transition: border-color .15s ease;
}
.hm-deps a:hover { border-color: var(--azul-claro); }
.hm-deps strong {
display: block; font-family: var(--fonte-titulo); font-size: 16px;
color: var(--titulo); margin-bottom: 3px;
}
.hm-deps span { font-size: 14.5px; color: var(--tinta-suave); }
/* ---------- faixa do fornecedor ---------- */
.hm-cta {
margin: var(--respiro) 0; padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 44px);
border-radius: calc(var(--raio) * 1.6); background: var(--azul-escuro); color: #D6E3EC;
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 23px 44px; align-items: center;
}
.hm-cta .rotulo { margin: 0 0 9px; color: var(--vermelho-claro); }
.hm-cta h2 {
color: #fff; font-size: clamp(20px, 2.6vw, 25px); line-height: 1.15; margin: 0 0 10px;
}
.hm-cta p { margin: 0; font-size: 15.5px; max-width: 52ch; }
.hm-cta-acoes { display: flex; flex-wrap: wrap; gap: 13px; }
.hm-cta .btn-2 { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.hm-cta .btn-2:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
@media (max-width: 720px) {
.hm-passos > div { border-right: 0; border-bottom: 1px solid var(--papel-3); }
.hm-passos > div:last-child { border-bottom: 0; }
}
/* ═══════════════════════════════════════════════════════════════
CADASTRO DE EMPRESA — página inteira, em passos
O formulário era uma barra lateral de ~150px de largura útil ao lado
de um texto longo: o que a página existe para fazer ficava espremido
no canto. Aqui ele é a página, e as perguntas vêm em passos curtos.
Sem JavaScript todos os passos aparecem empilhados e o envio funciona
igual — o script só esconde os que não são o passo atual.
═══════════════════════════════════════════════════════════════ */
.cad { max-width: 860px; margin-inline: auto; padding: 10px 0 78px; }
/* Sem capa nem migalhas acima, o formulário nasceria colado no cabeçalho. */
.cad-nu { padding-top: clamp(28px, 6vw, 56px); }
/* o topo é sticky: sem esta margem a pergunta do passo nasce debaixo dele */
.cad-progresso { scroll-margin-top: 82px; }
/* ---------- progresso ---------- */
.cad-progresso { margin: 0 0 39px; }
.cad-progresso-topo {
display: flex; align-items: baseline; justify-content: flex-start; gap: 16px;
margin: 0 0 12px;
}
.cad-progresso-topo strong {
font-family: var(--fonte-detalhe); font-size: 12.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--titulo);
}
.cad-trilho { height: 5px; border-radius: 100px; background: var(--papel-3); overflow: hidden; }
.cad-trilho i {
display: block; height: 100%; width: 20%; border-radius: 100px;
background: var(--azul-claro); transition: width .28s ease;
}
@media (prefers-reduced-motion: reduce) { .cad-trilho i { transition: none; } }
/* ---------- passo ---------- */
.cad-passo { border: 0; margin: 0; padding: 0; }
.cad-passo + .cad-passo { margin-top: 60px; }
/* com JS, só o passo atual fica na tela */
.cad-js .cad-passo { display: none; }
.cad-js .cad-passo.esta { display: block; margin-top: 0; }
.cad-passo legend { padding: 0; }
.cad-pergunta {
font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.022em;
color: var(--titulo); font-size: clamp(22px, 3.2vw, 29px); line-height: 1.16;
margin: 0 0 10px; display: block;
}
.cad-ajuda { color: var(--tinta-suave); font-size: 15.5px; margin: 0 0 29px; max-width: 58ch; }
/* ---------- cartões de escolha única ---------- */
.cad-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cad-opcao { display: block; position: relative; cursor: pointer; }
.cad-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.cad-opcao-txt {
display: block; padding: 22px 25px; height: 100%;
border: 1.5px solid var(--borda); border-radius: calc(var(--raio) * 2);
background: var(--papel); transition: border-color .15s ease, background .15s ease;
}
.cad-opcao-txt strong {
display: block; font-family: var(--fonte-titulo); font-size: 16.5px;
color: var(--titulo); margin-bottom: 3px;
}
.cad-opcao-txt span { display: block; font-size: 14.5px; color: var(--tinta-suave); line-height: 1.5; }
.cad-opcao:hover .cad-opcao-txt { border-color: var(--borda-forte); }
.cad-opcao input:checked + .cad-opcao-txt {
border-color: var(--azul-claro); background: #F2F8FE;
box-shadow: inset 0 0 0 1px var(--azul-claro);
}
.cad-opcao input:focus-visible + .cad-opcao-txt { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
/* ---------- grupos de categoria ----------
A categoria é o GRUPO — linha amarela, elevação e acesso, serviços de
engenharia. As fichas dentro dele são os equipamentos e serviços. Sem
esta separação, "terraplenagem" e "lombada eletrônica" apareciam como
coisas do mesmo tipo, que não são. */
.cad-grupo + .cad-grupo { margin-top: 34px; }
.cad-grupo-topo {
display: flex; align-items: baseline; justify-content: space-between;
gap: 18px; margin: 0 0 14px; padding-bottom: 10px;
border-bottom: 1px solid var(--borda);
}
/* Rótulo de grupo dentro do formulário, não título do documento: como
ele pulava do H1 direto para o H3 e virava estrutura falsa para o leitor
de tela. Mesma aparência do título. */
.cad-grupo-topo .cad-grupo-nome {
font-family: var(--fonte-titulo); font-weight: 700; color: var(--titulo);
font-size: 16px; margin: 0; letter-spacing: -.01em;
}
/* O grupo com alguma ficha marcada ganha peso: numa tela de quatro grupos,
é o que diz de relance onde a pessoa já passou. */
.cad-grupo.tem-marca .cad-grupo-topo { border-bottom-color: var(--azul-escuro); }
.cad-grupo-todos {
font: inherit; font-family: var(--fonte-titulo); font-weight: 600; font-size: 13.5px;
color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px; flex: none;
}
.cad-grupo-todos:hover { color: var(--azul-escuro); }
/* ---------- fichas de múltipla escolha (categoria, UF) ---------- */
.cad-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cad-chip { display: block; cursor: pointer; }
.cad-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cad-chip span {
display: block; padding: 12px 20px; font-size: 15px; line-height: 1.3;
border: 1.5px solid var(--borda); border-radius: 100px; background: var(--papel);
color: var(--tinta); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cad-chip:hover span { border-color: var(--borda-forte); }
.cad-chip input:checked + span {
border-color: var(--azul-escuro); background: var(--azul-escuro); color: #fff;
}
.cad-chip input:focus-visible + span { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
.cad-chips-uf span { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.cad-atalho {
margin: 18px 0 0; font-size: 14.5px; color: var(--tinta-fraca);
display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.cad-atalho button {
font: inherit; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14.5px;
color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.cad-atalho button:hover { color: var(--azul-escuro); }
/* ---------- campos de texto ---------- */
.cad-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 23px; }
.cad-campo { display: flex; flex-direction: column; min-width: 0; }
.cad-campo.largo { grid-column: 1 / -1; }
.cad-campo label {
font-family: var(--fonte-detalhe); font-size: 12.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
margin: 0 0 9px;
}
.cad-campo input, .cad-campo textarea {
font: inherit; font-size: 16.5px; color: var(--tinta);
padding: 17px 20px; background: var(--papel);
border: 1.5px solid var(--borda); border-radius: var(--raio);
min-width: 0; width: 100%;
}
.cad-campo input:focus, .cad-campo textarea:focus { border-color: var(--azul-claro); }
.cad-campo .dica { font-size: 13.5px; color: var(--tinta-fraca); margin: 8px 0 0; }
/* ---------- navegação ---------- */
.cad-navegar {
display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
margin-top: 42px; padding-top: 31px; border-top: 1px solid var(--borda);
}
.cad-navegar .btn { font-size: 16px; padding: 18px 36px; }
/* `.btn` declara display: inline-block e vence o [hidden] do navegador, que é
regra de agente de usuário. Sem isto os três botões aparecem juntos. */
.cad-navegar .btn[hidden], .cad-erro[hidden] { display: none; }
.cad-navegar .espaco { flex: 1; }
.cad-erro {
/* mesma folga do progresso: o topo é fixo e comeria a primeira linha */
scroll-margin-top: 82px;
margin: 0 0 23px; padding: 17px 21px; font-size: 15px;
color: var(--tinta); background: var(--acento-fundo);
border-left: 3px solid var(--acento); border-radius: 0 var(--raio) var(--raio) 0;
}
.cad-aviso { font-size: 13.5px; color: var(--tinta-fraca); margin: 21px 0 0; max-width: 62ch; }
/* ═══════════════════════════════════════════════════════════════
CADASTRO DE FORNECEDOR — handoff 1a "Vitrine"
/faca-parte/ vende; /cadastro/ é o wizard com resumo lateral;
/cadastro/enviado/ e /confirmado/ fecham o fluxo.
═══════════════════════════════════════════════════════════════ */
/* ---------- faixa escura reutilizável ---------- */
.mk-tile-escuro {
background: radial-gradient(120% 130% at 100% 0%, #014E88 0%, var(--azul-escuro) 58%, #002845 100%);
color: #fff;
}
.mk-tile-escuro h1, .mk-tile-escuro h2 { color: #fff; }
.mk-tile-escuro .rotulo { color: var(--vermelho-claro); }
/* ---------- landing: hero ---------- */
.fp-hero-grade {
display: grid; grid-template-columns: 1.06fr .94fr; gap: 47px; align-items: center;
padding-block: var(--respiro);
}
.fp-hero h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.05; letter-spacing: -.03em; max-width: 17ch; margin: 13px 0 21px; }
.fp-hero .resumo { font-size: 18px; color: #CFE0EE; max-width: 44ch; margin: 0 0 36px; }
.fp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 29px; }
.fp-cta .btn { padding: 20px 39px; font-size: 16px; }
.fp-selo { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; color: #9AC8EF; }
.fp-selo i { width: 8px; height: 8px; border-radius: 50%; background: #3DD68C; }
.fp-foto { margin: 0; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: #002845; }
.fp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-pilulas { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.fp-pilula {
font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: var(--azul-escuro);
background: #fff; padding: 9px 16px; border-radius: 100px; box-shadow: var(--sombra);
}
.fp-foto figcaption {
position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: rgba(255,255,255,.85);
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* ---------- landing: provas ---------- */
.fp-provas { border-bottom: 1px solid var(--borda); background: var(--papel); }
.fp-provas-grade { display: grid; grid-template-columns: repeat(3, 1fr); }
.fp-prova { padding: var(--respiro-menor) 28px; }
.fp-prova + .fp-prova { border-left: 1px solid var(--borda); }
.fp-prova:first-child { padding-left: 0; }
.fp-prova h2 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.fp-prova p { margin: 0; color: var(--tinta-suave); font-size: 15px; }
/* ---------- landing: como funciona ---------- */
.fp-como { padding-block: var(--respiro); }
.fp-como-grade { display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: start; }
.fp-titulo { font-size: clamp(24px, 3.2vw, 30px); letter-spacing: -.02em; margin: 0 0 29px; }
.fp-passos { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mk-passo {
display: flex; gap: 18px; padding: 26px; border: 1px solid var(--borda);
border-radius: 10px; background: var(--papel); box-shadow: var(--sombra);
}
.mk-passo-n {
flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
background: var(--azul-escuro); color: #fff; font-family: var(--fonte-titulo); font-weight: 700;
}
.mk-passo h3 { font-size: 16.5px; margin: 4px 0 4px; }
.mk-passo p { margin: 0; font-size: 14.5px; color: var(--tinta-suave); }
.fp-quem { background: var(--papel-2); border-radius: 12px; padding: 31px; }
.fp-quem h2 { font-size: 17px; margin: 0 0 16px; }
.fp-quem ul { margin: 0 0 18px; padding-left: 23px; font-size: 15px; color: var(--tinta); }
.fp-quem li + li { margin-top: 8px; }
.fp-nota { margin: 0; padding-top: 16px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--tinta-fraca); }
@media (max-width: 860px) {
.fp-hero-grade, .fp-como-grade { grid-template-columns: 1fr; }
.fp-provas-grade { grid-template-columns: 1fr; }
.fp-prova, .fp-prova:first-child { padding: 26px 0; }
.fp-prova + .fp-prova { border-left: 0; border-top: 1px solid var(--borda); }
}
@media (max-width: 560px) { .fp-passos { grid-template-columns: 1fr; } }
/* ---------- wizard: topo ---------- */
.topo-cad .env { gap: 23px; }
.topo-cad-nome {
font-family: var(--fonte-detalhe); font-size: 12px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--tinta-fraca); padding-left: 23px; border-left: 1px solid var(--borda);
}
.cad-salvar {
margin-left: auto; font: inherit; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px;
color: var(--link); background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.cad-salvar[hidden] { display: none; }
@media (max-width: 560px) { .topo-cad-nome { display: none; } }
/* ---------- wizard: layout ---------- */
.cad-mago {
max-width: none; display: grid; grid-template-columns: 1fr 316px; padding: 0;
margin-block: clamp(20px, 4vw, 36px) 60px;
border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: var(--papel);
}
.cad-principal { padding: 44px 57px 52px; min-width: 0; }
.cad-progresso-topo span { font-size: 14px; color: var(--tinta-fraca); }
.cad-trilho i { width: 25%; }
@media (max-width: 900px) {
.cad-mago { grid-template-columns: 1fr; }
.cad-principal { padding: 34px 26px 39px; }
}
/* ---------- passo 1: CNPJ ---------- */
.cad-cnpj { max-width: 460px; }
.cad-cnpj-linha { display: flex; gap: 13px; }
.cad-cnpj input { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cad-buscar { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); flex: none; }
.cad-buscar:hover { filter: brightness(1.15); }
.cad-buscar[hidden], .cad-receita[hidden], .cad-manual[hidden], .cad-busca[hidden],
.cad-sugestoes[hidden] { display: none; }
.cad-receita {
margin-top: 23px; padding: 26px 29px; border: 1.5px solid var(--ok); background: #E4F3EA;
border-radius: 10px; max-width: 560px;
}
.cad-receita.inativa { border-color: var(--acento); background: var(--acento-fundo); }
.cad-receita-selo {
margin: 0 0 8px; font-family: var(--fonte-detalhe); font-size: 12px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: #14603A;
}
.cad-receita-nome { margin: 0 0 4px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 21px; color: var(--azul-escuro); line-height: 1.2; }
.cad-receita-linha { margin: 0; font-size: 14.5px; color: var(--tinta-suave); }
.cad-receita .cad-campo { margin-top: 16px; }
.cad-receita-outra { margin: 13px 0 0; }
.cad-receita-outra button, .cad-editar {
font: inherit; font-size: 13.5px; color: var(--link); background: none; border: 0; padding: 0;
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.cad-manual { margin-top: 23px; }
/* ---------- passo 2: categorias ---------- */
.cad-selecionadas { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cad-selecionadas li {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px 9px 18px;
background: var(--azul-escuro); color: #fff; border-radius: 100px; font-size: 14.5px;
}
.cad-selecionadas button {
font: inherit; font-size: 17px; line-height: 1; width: 24px; height: 24px; border-radius: 50%;
border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.cad-selecionadas button:hover { background: rgba(255,255,255,.28); }
.cad-busca, .cad-cidade { position: relative; max-width: 560px; }
.cad-busca input {
font: inherit; font-size: 16.5px; width: 100%; padding: 17px 20px;
border: 1.5px solid var(--borda); border-radius: var(--raio); background: var(--papel);
}
.cad-busca input:focus { border-color: var(--azul-claro); outline: none; }
.cad-sugestoes {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
background: var(--papel); border: 1px solid var(--borda-forte); border-radius: 10px;
box-shadow: var(--sombra); overflow: hidden;
}
.cad-sug {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 14px 20px; cursor: pointer; border-top: 1px solid var(--papel-3);
}
.cad-sug:first-child { border-top: 0; }
.cad-sug strong { display: block; font-family: var(--fonte-titulo); font-size: 15.5px; color: var(--azul-escuro); }
.cad-sug span { display: block; font-size: 13px; color: var(--tinta-fraca); }
.cad-sug em { font-style: normal; font-family: var(--fonte-titulo); font-weight: 700; font-size: 13.5px; color: var(--link); visibility: hidden; }
.cad-sug.foco, .cad-sug:hover { background: #F2F8FE; }
.cad-sug.foco em, .cad-sug:hover em { visibility: visible; }
.cad-sug-vazio { margin: 0; padding: 16px 20px; font-size: 14.5px; color: var(--tinta-fraca); }
.cad-sug-rodape {
display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--tinta-suave);
background: var(--papel-2); border: 0; border-top: 1px solid var(--borda); padding: 14px 20px; cursor: pointer;
}
.cad-sug-rodape u { color: var(--link); }
.cad-todas { margin-top: 26px; }
.cad-todas summary {
cursor: pointer; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14.5px; color: var(--link);
}
.cad-todas .cad-grupos { margin-top: 16px; }
.cad-sugerir { margin-top: 29px; max-width: 560px; }
.cad-sugerir p { margin: 0 0 13px; font-size: 14.5px; color: var(--tinta-suave); }
/* ---------- passo 3: área ---------- */
.cad-area { display: grid; grid-template-columns: 1fr 1fr; gap: 31px; align-items: start; }
.cad-cidade select { margin-top: 10px; font: inherit; padding: 13px; border: 1.5px solid var(--borda); border-radius: var(--raio); }
.cad-cidade select[hidden] { display: none; }
.cad-raio-valor { margin: 0 0 8px; font-family: var(--fonte-titulo); color: var(--azul-escuro); }
.cad-raio-valor output { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cad-raio-valor span { font-size: 15px; font-weight: 700; }
.cad-raio input[type=range] { padding: 0; border: 0; accent-color: var(--azul-claro); }
.cad-estados { margin-top: 36px; }
.cad-estados-titulo {
margin: 0 0 4px; font-family: var(--fonte-detalhe); font-size: 12.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
}
.cad-estados .dica { font-size: 13.5px; color: var(--tinta-fraca); margin: 0; }
.cad-mapa {
display: grid; grid-template-columns: repeat(7, 46px); grid-template-rows: repeat(8, 38px);
gap: 6px; margin-top: 12px;
}
.cad-uf { grid-column: var(--c); grid-row: var(--l); position: relative; cursor: pointer; }
.cad-uf input { position: absolute; opacity: 0; width: 0; height: 0; }
.cad-uf span {
display: grid; place-items: center; height: 100%; border-radius: var(--raio);
font-family: var(--fonte-titulo); font-weight: 700; font-size: 13.5px; color: var(--azul-escuro);
background: var(--papel-3); border: 1.5px solid transparent; transition: background .12s ease;
}
.cad-uf:hover span { border-color: var(--borda-forte); }
.cad-uf input:checked + span { background: var(--azul-escuro); color: #fff; }
.cad-uf input:focus-visible + span { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
.cad-atalho span { color: var(--tinta-suave); }
.cad-alerta {
margin: 31px 0 0; padding: 17px 21px; font-size: 15px; background: var(--acento-fundo);
border-left: 3px solid var(--acento); border-radius: 0 var(--raio) var(--raio) 0;
}
@media (max-width: 640px) {
.cad-area { grid-template-columns: 1fr; }
.cad-mapa { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(8, 36px); gap: 4px; }
}
/* sem JS o mapa vira lista de caixas: posição não ajuda quem não vê o grid */
/* ---------- passo 4: contato ---------- */
.cad-campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cad-campos-2 { grid-template-columns: 1fr; } }
.cad-lgpd { display: flex; gap: 16px; align-items: flex-start; margin-top: 29px; font-size: 14.5px; color: var(--tinta-suave); cursor: pointer; max-width: 62ch; }
.cad-lgpd input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azul-escuro); flex: none; }
/* ---------- resumo lateral ---------- */
.cad-resumo { background: var(--papel-2); border-left: 1px solid var(--borda); padding: 39px 34px; }
.cad-resumo-titulo {
margin: 0 0 23px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; color: var(--azul-escuro);
}
.cad-resumo dl { margin: 0; }
.cad-resumo dl > div { padding: 16px 0; border-top: 1px solid var(--borda); }
.cad-resumo dt {
display: flex; justify-content: space-between; font-family: var(--fonte-detalhe); font-size: 11.5px;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 3px;
}
.cad-resumo dt .cad-editar { display: none; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.cad-resumo.conferir dt .cad-editar { display: inline; }
.cad-resumo dd { margin: 0; font-size: 14.5px; color: var(--tinta); overflow-wrap: anywhere; }
.cad-resumo dd.vazio { color: var(--borda-forte); }
.cad-resumo-nota { margin: 23px 0 0; font-size: 13px; color: var(--tinta-fraca); }
@media (max-width: 900px) { .cad-resumo { border-left: 0; border-top: 1px solid var(--borda); } }
/* ---------- enviado / confirmado ---------- */
.cad-fim {
display: grid; grid-template-columns: 1fr 360px; gap: 52px; align-items: start;
padding-block: clamp(32px, 6vw, 64px) 72px;
}
.cad-pilula-ok {
display: inline-block; margin: 0 0 18px; padding: 8px 16px; border-radius: 100px;
background: #E4F3EA; color: #14603A; font-family: var(--fonte-detalhe); font-size: 12px;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cad-fim h1 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.08; margin: 0 0 18px; }
.cad-fim-resumo { font-size: 17.5px; color: var(--tinta-suave); max-width: 52ch; margin: 0 0 31px; }
.cad-fim-resumo strong { color: var(--tinta); }
.cad-fim-acoes { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 21px; }
.cad-fim-acoes .btn { font-size: 16px; padding: 18px 34px; }
.cad-fim-acoes .btn[hidden], .cad-retorno[hidden] { display: none; }
.cad-fim-acoes .btn:disabled { opacity: .6; cursor: default; }
.cad-fim-nota { font-size: 14.5px; color: var(--tinta-fraca); margin: 0; }
.cad-retorno { margin: 0 0 21px; font-size: 15px; color: #14603A; }
.cad-depois { background: var(--papel-2); border-radius: 12px; padding: 31px 34px; }
.cad-depois h2 { font-size: 17px; margin: 0 0 18px; }
.cad-depois ol { margin: 0; padding-left: 26px; font-size: 15px; color: var(--tinta-suave); }
.cad-depois li + li { margin-top: 16px; }
.cad-depois strong { color: var(--azul-escuro); }
@media (max-width: 860px) { .cad-fim { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════
PÁGINA DE CATEGORIA — DIREÇÃO C ("configurador")
O tráfego chega fundo, direto do Google, com uma intenção só:
cotar. Então a página tem uma tarefa só. O formulário saiu da
lateral e virou o corpo, logo abaixo da capa; o editorial, que
empurrava o pedido para 7,7 telas abaixo no celular, recolheu-se
em sanfonas — continua inteiro no HTML, que é o que o buscador lê.
A coluna estreitou para 880px: com uma coluna só, 1120px deixa a
linha de texto longa demais para ler.
═══════════════════════════════════════════════════════════════ */
.env.estreita { max-width: 880px; }
/* ---------- capa ---------- */
.capa-c {
display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
gap: 34px; align-items: center; padding: 8px 0 4px;
}
.capa-c-foto { margin: 0; border-radius: calc(var(--raio) * 1.6); overflow: hidden; }
.capa-c-foto .ph, .capa-c-foto .foto-real { border-radius: calc(var(--raio) * 1.6); }
.capa-c h1 { font-size: clamp(28px, 4.2vw, 38px); line-height: 1.05; margin: 8px 0 16px; }
.capa-c .resumo { font-size: 17.5px; color: var(--tinta); margin: 0 0 18px; }
.capa-c .rotulo { margin: 0; font-size: 12px; }
/* A ficha rápida virou uma linha: na primeira tela o que se lê de
relance são os quatro números, não uma tabela de rótulos. */
.ficha-linha {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 23px;
font-size: 14.5px; color: var(--tinta-suave);
}
.ficha-linha .sep { color: var(--borda); }
/* Legenda da foto ilustrativa, na página de anúncio. Foto de banco de imagem
tem que se declarar: sem isso, a genérica vira promessa de um equipamento
que ninguém prometeu, e é o cliente que descobre na entrega. */
.capa-c-foto .foto-real { position: relative; }
.foto-nota {
position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 16px;
font-size: 12.5px; line-height: 1.35; color: #fff;
background: linear-gradient(transparent, rgba(0, 24, 43, .72) 45%);
}
/* Anúncio sem foto: no celular o marcador seria a primeira tela inteira. */
@media (max-width: 760px) { .capa-c-foto .ph.sem-foto { display: none; } }
/* ---------- o configurador ---------- */
.conf {
margin-top: 39px; scroll-margin-top: 80px;
border: 1px solid var(--borda); border-top: 3px solid var(--azul-escuro);
border-radius: calc(var(--raio) * 1.6); background: var(--papel);
box-shadow: 0 1px 2px rgba(0, 54, 94, .06), 0 10px 30px rgba(0, 54, 94, .07);
overflow: hidden;
}
.conf-cabeca { padding: 31px 34px 23px; }
.conf-cabeca h2 { font-size: clamp(22px, 3vw, 27px); line-height: 1.15; margin: 0 0 8px; }
.conf-cabeca p { font-size: 15.5px; color: var(--tinta-fraca); margin: 0; max-width: 56ch; }
/* Rótulo à esquerda, campo à direita: numa coluna estreita o rótulo
em cima de cada campo dobraria a altura do formulário. No celular
as duas faixas empilham sozinhas pelo flex-wrap. */
.conf-linha {
display: flex; flex-wrap: wrap; gap: 4px 29px;
padding: 22px 34px; border-top: 1px solid var(--papel-3);
}
.conf-dados { background: #FBFBFC; }
.conf-rotulo { flex: 0 0 150px; font-size: 14.5px; font-weight: 600; color: var(--tinta); padding-top: 13px; }
.conf-campo { flex: 1 1 300px; min-width: 0; }
.conf-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .conf-grade { grid-template-columns: 1fr; } }
.conf .conf-grade .com-icone {
padding-left: 52px;
background-repeat: no-repeat;
background-position: 13px 50%;
background-size: 17px 17px;
}
.conf .conf-grade .icone-empresa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B747D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M14 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
.conf .conf-grade .icone-nome { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B747D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.conf .conf-grade .icone-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B747D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7.5 9 5.5 9-5.5'/%3E%3C/svg%3E"); }
.conf .conf-grade .icone-telefone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B747D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 3 5.2 2 2 0 0 1 5 3z'/%3E%3C/svg%3E"); }
/* ---------- cidade com sugestões ---------- */
.conf-cidade { position: relative; }
.conf-cidade select[hidden] { display: none; }
.conf-cidade select { margin-top: 8px; }
.conf-sugestoes {
list-style: none; margin: 0; padding: 6px;
position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; right: 0;
background: var(--papel); border: 1px solid var(--borda);
border-radius: calc(var(--raio) * 1.3); box-shadow: 0 12px 28px rgba(0, 54, 94, .16);
max-height: 244px; overflow-y: auto;
}
.conf-sugestoes[hidden] { display: none; }
.conf-sugestoes li {
display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
padding: 12px 14px; font-size: 15px; border-radius: var(--raio); cursor: pointer;
}
.conf-sugestoes li:hover, .conf-sugestoes li.ativo { background: #F1F4F6; }
.conf-sugestoes .uf {
font-family: var(--fonte-detalhe); font-size: 12.5px; font-weight: 700;
color: var(--tinta-fraca); flex: none;
}
.conf-dica { margin: 9px 0 0; font-size: 13.5px; color: var(--tinta-fraca); }
.conf-dica[hidden] { display: none; }
.conf input[type=text], .conf input[type=email], .conf input[type=tel],
.conf select, .conf textarea {
width: 100%; padding: 14px 17px; font: inherit; font-size: 16px; color: var(--tinta);
background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
}
.conf textarea { resize: vertical; min-height: 62px; }
.conf input:focus, .conf select:focus, .conf textarea:focus {
border-color: var(--azul-claro); outline: none; box-shadow: 0 0 0 3px rgba(0, 124, 226, .15);
}
.conf-chips { margin: 0; }
.conf-chips .chip-g span { font-size: 14.5px; padding: 12px 22px; }
/* ---------- "especificar o equipamento" ---------- */
.conf-mais { border-top: 1px solid var(--papel-3); }
.conf-mais > summary {
list-style: none; cursor: pointer;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
padding: 20px 34px; font-size: 14.5px; font-weight: 600; color: var(--link);
}
.conf-mais > summary::-webkit-details-marker { display: none; }
.conf-mais > summary:hover { background: var(--papel-2); }
.conf-mais > summary span { font-weight: 400; color: var(--tinta-fraca); }
.conf-mais-corpo { padding: 2px 34px 26px; display: grid; gap: 18px; }
.conf-linha-2 { display: flex; flex-wrap: wrap; gap: 4px 29px; }
.conf-rotulo-2 { flex: 0 0 150px; font-size: 13.5px; color: var(--tinta-fraca); padding-top: 12px; }
/* ---------- envio ---------- */
.conf-envio { padding: 26px 34px 31px; border-top: 1px solid var(--papel-3); }
.conf-enviar { width: 100%; padding: 21px 29px; font-size: 16.5px; }
.conf-destino {
margin: 16px 0 0; font-size: 14px; color: var(--tinta-suave);
display: flex; gap: 12px; align-items: flex-start;
}
.conf-ponto, .conf-ponto-frio {
width: 8px; height: 8px; border-radius: 50%; margin-top: 10px; flex: none; background: var(--ok);
}
/* Sem fornecedor cadastrado o ponto não pode ser verde: o verde afirma
que há quem responda. */
.conf-ponto-frio { background: var(--borda-forte); }
.conf-aviso { font-size: 12.5px; color: var(--tinta-fraca); margin: 12px 0 0; line-height: 1.5; }
/* ---------- sanfonas do editorial ---------- */
.sanfonas { margin-top: var(--respiro); }
.sanfonas > h2 { font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 4px; }
.sanfonas > .sub { color: var(--tinta-fraca); font-size: 15px; margin: 0 0 26px; }
.sanfona {
border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.3);
background: var(--papel); margin-bottom: 13px; scroll-margin-top: 80px;
}
.sanfona > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 15px 18px;
font-family: var(--fonte-titulo); font-weight: 700; font-size: 16.5px; color: var(--titulo);
}
.sanfona > summary::-webkit-details-marker { display: none; }
.sanfona > summary:hover { background: var(--papel-2); }
.sanfona .sinal { flex: none; width: 14px; height: 14px; position: relative; color: var(--borda-forte); }
.sanfona .sinal::before, .sanfona .sinal::after {
content: ""; position: absolute; background: currentColor; border-radius: 1px;
}
.sanfona .sinal::before { inset: 6px 0; height: 2px; }
.sanfona .sinal::after { inset: 0 6px; width: 2px; }
.sanfona[open] .sinal::after { display: none; }
.sanfona-corpo { padding: 0 18px 18px; }
.sanfona-corpo > :first-child { margin-top: 0; }
.sanfona-corpo .sub { color: var(--tinta-fraca); font-size: 15px; margin: 0 0 18px; }
.sanfona-corpo .mosaico { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.sanfona-corpo .mosaico li:first-child { grid-column: auto; grid-row: auto; }
/* ---------- ofertas e saída lateral ---------- */
.ofertas-c { margin-top: var(--respiro-menor); }
.ofertas-c .oferta:first-child { margin-top: 0; }
.alternativas {
margin-top: 44px; padding: 21px 23px;
background: var(--papel-2); border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.3);
display: flex; flex-wrap: wrap; align-items: center; gap: 13px 18px;
}
.alternativas strong {
font-family: var(--fonte-titulo); font-size: 15px; color: var(--titulo); flex: none;
}
.alternativas .chips a { background: var(--papel); font-size: 14px; font-weight: 600; color: var(--titulo); }
.alternativas > a { font-size: 14px; font-weight: 600; }
@media (max-width: 620px) {
.conf-cabeca, .conf-linha, .conf-envio, .conf-mais > summary { padding-inline: 18px; }
.conf-mais-corpo { padding-inline: 18px; }
.conf-rotulo, .conf-rotulo-2 { flex: 1 1 100%; padding-top: 0; }
}
/* Bloco comercial sem anúncio numa categoria que tem fornecedor: diz o que há
e leva ao formulário, em vez de deixar buraco na grade. */
.cartao-vazio { border-style: dashed; background: var(--papel-2); }
.cartao-vazio h3 { color: var(--tinta-suave); }
/* ═══════════════════════════════════════════════════════════════
O SÍMBOLO COMO TEXTURA
A engrenagem do logo volta pelo site como marca-d'água: grande,
cortada pela borda e quase transparente (7%). Nunca atrás de texto
longo, nunca em mais de um lugar por dobra. Os arquivos já trazem a
transparência: fundo em camadas, sem pseudo-elemento nem HTML novo.
═══════════════════════════════════════════════════════════════ */
/* rodapé: engrenagem grande saindo pelo canto inferior direito */
.rodape {
background:
url("/_marca/simbolo-agua-branco.svg") no-repeat right -90px bottom -140px / 420px auto,
var(--azul-escuro);
}
/* faixa azul do fornecedor na home e hero da landing */
.hm-cta {
background:
url("/_marca/simbolo-agua-branco.svg") no-repeat right -50px center / 260px auto,
var(--azul-escuro);
}
.mk-tile-escuro {
background:
url("/_marca/simbolo-agua-branco.svg") no-repeat left -120px bottom -160px / 460px auto,
radial-gradient(120% 130% at 100% 0%, #014E88 0%, var(--azul-escuro) 58%, #002845 100%);
}
/* caixas claras: a engrenagem no canto, como um carimbo */
.hm-passos, .fp-quem, .cad-depois, .cad-resumo, .faixa-nota, .hm-vazio {
background:
url("/_marca/simbolo-agua-azul.svg") no-repeat right -34px bottom -42px / 150px auto,
var(--papel-2);
}
.cartao-nu .txt {
background: url("/_marca/simbolo-agua-azul.svg") no-repeat right -26px bottom -30px / 110px auto;
}
/* laterais de seção: meia engrenagem encostada na borda da tela */
.hm-cats, .fp-como, .heroi { position: relative; isolation: isolate; }
.hm-cats::before, .fp-como::before, .heroi::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
width: 340px; aspect-ratio: 174.82 / 180.06;
background: url("/_marca/simbolo-agua-azul.svg") no-repeat center / contain;
}
.hm-cats::before { right: -190px; top: 10px; }
.fp-como::before { left: -210px; top: 40px; }
.heroi::before { right: -150px; bottom: -110px; }
.heroi { overflow: hidden; }
@media (max-width: 860px) {
.hm-cats::before, .fp-como::before { width: 220px; }
.hm-cats::before { right: -150px; }
}
/* título de seção com a engrenagem pequena na frente */
.hm-cats-topo h2, .fp-titulo, .fp-quem h2, .cad-depois h2 {
display: flex; align-items: center; gap: 10px;
}
.hm-cats-topo h2::before, .fp-titulo::before, .fp-quem h2::before, .cad-depois h2::before {
content: ""; flex: none; width: .9em; aspect-ratio: 174.82 / 180.06;
background: url("/_marca/simbolo.svg") no-repeat center / contain;
}
/* ---------- anúncio e empresa (Functions): hero em faixa, corpo em duas colunas ----------
Sem foto, não há quadro de foto: um placeholder de tela inteira dizia
"falta algo" antes de dizer o que é o item. */
.an-hero { background: var(--azul-escuro); color: #D6E3EC; padding: 0 0 clamp(28px, 4vw, 44px); }
.an-hero .migalhas, .an-hero .migalhas a { color: #AFC4D4; }
.an-hero .migalhas a:hover { color: #fff; }
.an-hero-grade { display: grid; gap: 28px; align-items: center; padding-top: clamp(18px, 3vw, 30px); }
.an-hero-grade.com-foto { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.an-hero .rotulo { color: #FF9C94; margin: 0 0 10px; }
.an-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05; margin: 0 0 14px; max-width: 20ch; }
.an-hero h1 span { display: block; font-size: .55em; font-weight: 600; color: #AFC4D4; margin-top: 6px; letter-spacing: 0; }
.an-hero .resumo { font-size: 17.5px; color: #D6E3EC; margin: 0 0 12px; max-width: 58ch; }
.an-quem { font-size: 15px; margin: 0 0 22px; color: #AFC4D4; }
.an-quem a, .an-hero-grade p a { color: #fff; font-weight: 600; }
.an-hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.an-btn-2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.an-btn-2:hover { border-color: #fff; }
.an-foto { margin: 0; border-radius: calc(var(--raio) * 1.6); overflow: hidden; position: relative; }
.an-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.an-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px;
font-size: 12px; color: #fff; background: rgba(0, 0, 0, .55); }
.an-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 52px);
align-items: start; padding-top: clamp(26px, 4vw, 40px); padding-bottom: var(--respiro); }
.an-corpo h2 { font-size: 21px; margin: 34px 0 10px; }
.an-form { position: sticky; top: 18px; }
.an-dados { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.3); overflow: hidden; }
.an-dados div { padding: 13px 16px; border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); margin: 0 -1px -1px 0; }
.an-dados dt { font-family: var(--fonte-detalhe); font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: 3px; }
.an-dados dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--titulo); }
.an-irmaos { list-style: none; margin: 0; padding: 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.an-irmaos a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px;
text-decoration: none; color: inherit; border: 1px solid var(--borda); border-radius: var(--raio);
transition: border-color .15s ease; }
.an-irmaos a:hover { border-color: var(--azul-claro); }
.an-irmaos strong { font-size: 15px; color: var(--titulo); }
.an-irmaos span { font-size: 13.5px; color: var(--tinta-fraca); }
@media (max-width: 900px) {
.an-corpo, .an-hero-grade.com-foto { grid-template-columns: 1fr; }
.an-form { position: static; }
}
/* ═══════════════════════════════════════════════════════════════
ENTRAR (/entrar, servida por Function)
Cartão central sobre papel claro, sem senha: e-mail, link, Google.
═══════════════════════════════════════════════════════════════ */
.ent-corpo { min-height: 100vh; display: flex; flex-direction: column; background: var(--papel-2); }
.topo-nu .env { justify-content: space-between; }
.ent-topo-link { font-family: var(--fonte-titulo); font-weight: 700; font-size: 14.5px; color: var(--link); text-decoration: none; }
.ent-topo-link:hover { color: var(--azul-escuro); }
.ent {
flex: 1; display: flex; justify-content: center; align-items: flex-start;
padding: clamp(40px, 8vh, 96px) 16px var(--respiro);
background: url("/_marca/simbolo-agua-azul.svg") no-repeat right -160px bottom -200px / 520px auto;
}
.ent-cartao { width: 100%; max-width: 460px; }
.ent-cartao h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.1; margin: 0 0 12px; }
.ent-resumo { font-size: 16.5px; color: var(--tinta-suave); margin: 0 0 30px; }
.ent-pilula {
display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 100px;
background: #E4F3EA; color: #14603A; font-family: var(--fonte-detalhe); font-size: 12px;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ent-form label { display: block; font-size: 14.5px; font-weight: 600; color: var(--tinta); margin: 0 0 8px; }
.ent-form input {
width: 100%; padding: 15px 17px; font: inherit; font-size: 16px; color: var(--tinta);
background: var(--papel); border: 1.5px solid var(--borda-forte); border-radius: var(--raio);
margin: 0 0 22px;
}
.ent-form input:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(0, 124, 226, .15); }
.ent-botao {
width: 100%; padding: 16px 22px; font-size: 16px; color: #fff; background: var(--azul-escuro);
border-color: var(--azul-escuro); text-align: center;
}
.ent-botao:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.ent-cadastro {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 32px; font-size: 15.5px; color: var(--tinta-suave);
}
.ent-botao-2 {
font-family: var(--fonte-titulo); font-weight: 700; font-size: 15px; color: var(--link);
text-decoration: none; padding: 10px 16px; border: 1.5px solid var(--link); border-radius: var(--raio);
transition: background .15s ease, color .15s ease;
}
.ent-botao-2:hover { background: var(--link); color: #fff; }
.ent-ou { display: flex; align-items: center; gap: 14px; margin: 34px 0 22px; color: var(--tinta-fraca); font-size: 14.5px; }
.ent-ou::before, .ent-ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.ent-social {
display: flex; align-items: center; gap: 16px; padding: 15px 18px;
background: var(--papel); border: 1px solid var(--borda); border-radius: 10px;
font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px; color: var(--tinta);
text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.ent-social span { flex: 1; }
.ent-social .ent-seta { color: var(--azul-claro); transition: transform .15s ease; }
.ent-social:hover { border-color: var(--azul-claro); box-shadow: var(--sombra); }
.ent-social:hover .ent-seta { transform: translateX(3px); }
.ent-erro {
margin: 0 0 22px; padding: 13px 16px; font-size: 15px; background: var(--acento-fundo);
border-left: 3px solid var(--acento); border-radius: 0 var(--raio) var(--raio) 0;
}
.ent-nota { font-size: 14.5px; color: var(--tinta-suave); margin: 26px 0 0; }
.ent-nota a, .ent-erro a { color: var(--link); }
.ent-rodape {
background: var(--azul-escuro); color: #AFC4D4; font-size: 13px; text-align: center;
padding: 16px; line-height: 1.6;
}