/* ==========================================================================
FONTES SERVIÇOS — Design System "FICHA TÉCNICA"
Tema claro. Papel concreto, tinta preta, amarelo de segurança como
acento único. Estrutura desenhada com fios de 1px, não com sombras.
--------------------------------------------------------------------------
REGRA DE ECONOMIA (a mais importante deste arquivo)
O sistema tem três assinaturas: a tarja zebrada, a malha de engenharia e o
texto monoespaçado. Uma assinatura só funciona sendo rara. Quando as três
foram aplicadas em tudo — mono em nav, botão, etiqueta, rótulo, legenda e
rodapé; malha em cinco fundos; tarja em seis componentes —, o resultado
deixou de parecer desenhado e passou a parecer gerado: o mesmo efeito
repetido até virar textura de fundo.
Onde cada uma pode aparecer, hoje:
tarja zebrada divisor do rodapé, topo do formulário, placa de marca
malha herói da Home, e mais nada
monoespaçado número e especificação — tabela técnica, valor de
calculadora, numeral de cartão, telefone, logotipo
Antes de usar uma delas num lugar novo, tire de outro.
--------------------------------------------------------------------------
00. Tokens
01. Reset & base
02. Tipografia
03. Layout & utilitários
04. Motivos de marca
05. Botões ← a cor do texto NUNCA muda no hover; rótulo em caixa mista
06. Header & navegação
07. Heróis
08. Faixa de abertura
09. Cartões de produto
10. Setores
11. Processo
12. Declaração
13. Clientes ← cores nativas, dimensões normalizadas
14. Acordeão
15. Ficha técnica, listas, painéis
16. Faixa de CTA
17. Formulário & contato
18. Rodapé
19. Flutuantes
20. Animações
21. Acessibilidade & impressão
22. Ferramentas de conversão ← configurador, calculadora, emergência, barra
23. Camada GSAP ← só sob
========================================================================== */
/* ==========================================================================
FONTES — servidas pelo próprio domínio (assets/fonts/)
--------------------------------------------------------------------------
Antes estas três famílias vinham do fonts.googleapis.com. O custo não era o
tamanho: era a FILA. O navegador precisava baixar o CSS do Google para só
então descobrir quais .woff2 pedir — e esse CSS bloqueia a renderização.
Medido com o Lighthouse, esse único arquivo de 1,2 KB atrasava a primeira
pintura em ~820 ms e respondia por todo o deslocamento de layout da página
(CLS 0,08), porque o texto trocava de fonte depois de já estar desenhado.
Servindo daqui, os .woff2 são pedidos no primeiro instante (há no das páginas) e chegam antes da primeira pintura.
Só o recorte LATIN foi baixado. Português usa ã, ç, õ, é, ê, á, à, ó, ú —
todos dentro de U+0000–00FF. Os recortes vietnamita e latin-ext, que o
Google mandava junto, não têm um único caractere usado por este site.
Archivo e IBM Plex Sans são VARIÁVEIS: um arquivo cobre todos os pesos.
O IBM Plex Mono não tem versão variável, então vai um arquivo por peso.
PARA ATUALIZAR: pegue a URL em fonts.googleapis.com/css2?family=... com
User-Agent de navegador moderno, baixe o .woff2 do recorte `latin` e troque
o arquivo aqui. O nome do arquivo não muda.
========================================================================== */
/* `swap` e não `block`: se por algum motivo a fonte demorar, o texto aparece
na fonte do sistema em vez de ficar invisível. Nunca há tela em branco. */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900; /* eixo wght completo do arquivo variável */
font-stretch: 100%;
font-display: swap;
src: url('../fonts/archivo-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url('../fonts/ibm-plex-sans-latin-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* O CSS pede 600 em vários lugares e 700 em dois. O 700 não existe como
arquivo: o navegador engrossa o 600 sinteticamente — mesmo comportamento
de antes, quando o Google também só mandava 400, 500 e 600. */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
00. TOKENS
========================================================================== */
:root {
/* — Papel (dominante) — */
--paper: #f6f5f1; /* fundo padrão, concreto morno */
--paper-2: #ffffff; /* superfícies elevadas */
--paper-3: #eeece6; /* faixa alternada */
--paper-4: #e2dfd7; /* preenchimento sutil */
/* — Tinta — */
--ink: #14161a;
--ink-2: #454a53;
--ink-3: #767b85;
--ink-4: #9aa0aa;
/* — Escuro (reservado ao rodapé e a poucos blocos) — */
--dark: #14161a;
--dark-2: #1d2026;
--dark-3: #2a2e37;
--on-dark-txt: #eceef1;
--on-dark-dim: #9aa2ae;
/* — Acento — */
--hazard: #ffc400; /* amarelo de segurança */
--hazard-deep: #eeaf00; /* estado pressionado / hover */
--hazard-ink: #9a6f00; /* amarelo legível como TEXTO sobre papel */
--rust: #d3401a; /* erros e obrigatoriedade */
--green: #128c4a; /* WhatsApp */
--green-deep: #0e7440;
/* — Fios — */
--line: rgba(20, 22, 26, .12);
--line-2: rgba(20, 22, 26, .22);
--line-3: rgba(20, 22, 26, .40);
--line-on-dark: rgba(255, 255, 255, .12);
--line-on-dark-2: rgba(255, 255, 255, .24);
/* — Tipografia — */
--f-display: "Archivo", "Arial Narrow", Impact, sans-serif;
--f-body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
--f-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
--t-xs: .75rem;
--t-sm: .8125rem;
--t-base: clamp(.9375rem, .9rem + .18vw, 1.0625rem);
--t-lg: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
--t-xl: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
--t-2xl: clamp(1.4375rem, 1.28rem + .7vw, 2rem);
--t-3xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.75rem);
--t-4xl: clamp(2rem, 1.42rem + 2.5vw, 4rem);
--t-5xl: clamp(2.125rem, .85rem + 5.4vw, 6rem);
/* — Espaço — */
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--section: clamp(4rem, 8vw, 7rem);
--section-sm: clamp(2.75rem, 5vw, 4.5rem);
--maxw: 78rem;
--maxw-narrow: 46rem;
/* — Forma & profundidade — */
--r-sm: 2px;
--r: 3px;
--shadow-1: 0 1px 2px rgba(20, 22, 26, .05), 0 6px 20px rgba(20, 22, 26, .05);
--shadow-2: 0 2px 6px rgba(20, 22, 26, .07), 0 20px 44px rgba(20, 22, 26, .09);
/* — Movimento — */
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--dur: .34s;
--dur-fast: .18s;
--header-h: 76px;
/* Malha de engenharia — hoje só no herói da Home. Era também o fundo dos
heróis internos, de três seções da Home e da faixa de CTA; repetida
assim, deixava de ser textura e virava marca d'água de gerador. */
--grid-size: 56px 56px;
}
@media (max-width: 640px) {
:root { --header-h: 62px; --grid-size: 40px 40px; }
}
/* ==========================================================================
01. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--f-body);
font-size: var(--t-base);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--hazard); color: var(--ink); }
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 1px;
}
* { scrollbar-color: var(--ink-4) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-3); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border: 3px solid var(--paper-3); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.skip-link {
position: absolute;
left: 50%; top: 0;
transform: translate(-50%, -120%);
z-index: 999;
background: var(--ink);
color: var(--paper-2);
font: 600 var(--t-sm)/1 var(--f-body);
padding: 14px 22px;
transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }
/* ==========================================================================
02. TIPOGRAFIA
========================================================================== */
h1, h2, h3, h4, h5 {
font-family: var(--f-display);
font-weight: 700;
line-height: 1.06;
letter-spacing: -.02em;
margin: 0;
text-wrap: balance;
overflow-wrap: break-word;
}
h1 { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -.028em; }
h2 { font-size: var(--t-3xl); letter-spacing: -.024em; }
h3 { font-size: var(--t-2xl); line-height: 1.12; }
h4 { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -.012em; }
h5 { font-size: var(--t-lg); line-height: 1.25; letter-spacing: -.008em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
/* Rótulo de seção.
Era monoespaçado, caixa alta e com .18em de entreletra — o mesmo tratamento
que nav, botões, etiquetas, rodapé e legendas usavam. Quando *todo* texto
pequeno recebe a mesma marcação técnica, ela deixa de ser assinatura e vira
papel de parede. Agora o rótulo é texto comum, e o mono ficou reservado a
número e especificação — onde a largura fixa realmente serve para alguma
coisa. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .7em;
font-family: var(--f-body);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .005em;
color: var(--ink-3);
margin: 0 0 .9rem;
}
.eyebrow::before {
content: "";
width: 18px; height: 2px;
background: var(--hazard-deep);
flex: none;
}
.eyebrow--plain::before { display: none; }
/* Rótulo curto no topo de um painel. Chama-se `.index` por herança: nasceu
para numerais, mas em quase todo uso real carrega palavra ("Preventiva",
"Modelo A", "Mais rápido"). Palavra em monoespaçado com .16em de entreletra
lê como legenda de captura de tela, não como título de bloco. */
.index {
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
color: var(--hazard-ink);
}
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-2); }
.text-mono { font-family: var(--f-mono); }
.text-dim { color: var(--ink-3); }
/* Título de seção */
.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 1rem; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: .55em;
font-family: var(--f-body);
font-size: var(--t-base);
font-weight: 600;
color: var(--ink);
padding-bottom: 4px;
border-bottom: 2px solid var(--hazard);
transition: gap var(--dur-fast) var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover { gap: .95em; }
.link-arrow:hover svg { transform: translateX(2px); }
/* ==========================================================================
03. LAYOUT & UTILITÁRIOS
========================================================================== */
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--maxw-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--sm { padding-block: var(--section-sm); }
/* Superfícies */
.surface-paper { background: var(--paper); color: var(--ink); }
.surface-white { background: var(--paper-2); color: var(--ink); }
.surface-band { background: var(--paper-3); color: var(--ink); }
.surface-ink { background: var(--dark); color: var(--on-dark-txt); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4, .on-ink h5 { color: var(--paper-2); }
.on-ink p { color: var(--on-dark-dim); }
.on-ink .eyebrow, .on-ink .index { color: var(--hazard); }
.on-ink .lead { color: var(--on-dark-dim); }
/* Fio divisor entre seções da mesma tonalidade */
.section--ruled { border-top: 1px solid var(--line); }
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, .875rem); align-items: center; }
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
/* ==========================================================================
04. MOTIVOS DE MARCA
========================================================================== */
/* Faixa zebrada de segurança — usada com parcimônia */
.hazard-bar {
height: 7px;
width: 100%;
background-image: repeating-linear-gradient(-45deg, var(--hazard) 0 13px, var(--dark) 13px 26px);
}
.hazard-bar--thin { height: 4px; }
.hazard-tick {
display: block;
width: 68px; height: 6px;
margin-bottom: 1.35rem;
background-image: repeating-linear-gradient(-45deg, var(--hazard) 0 8px, transparent 8px 16px);
}
/* Logotipo */
.logo { display: inline-flex; align-items: center; gap: .7rem; }
.logo__mark { width: 38px; height: 38px; flex: none; transition: color var(--dur-fast) var(--ease); }
.logo__mark .ring { fill: none; stroke: currentColor; stroke-width: 4.2; }
.logo__mark .glyph { fill: currentColor; }
.logo__type { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
font-family: var(--f-display);
font-weight: 800;
font-size: 1.0625rem;
letter-spacing: .005em;
text-transform: uppercase;
}
.logo__sub {
font-family: var(--f-mono);
font-size: .5625rem;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--hazard-ink);
margin-top: 4px;
}
.on-ink .logo__sub { color: var(--hazard); }
/* Etiqueta */
.tag {
display: inline-flex;
align-items: center;
font-size: var(--t-sm);
font-weight: 500;
padding: .3em .7em;
border: 1px solid var(--line-2);
color: var(--ink-2);
background: var(--paper-2);
}
.on-ink .tag { border-color: var(--line-on-dark-2); color: var(--on-dark-dim); background: transparent; }
/* ==========================================================================
05. BOTÕES
Regra dura 1: a cor do TEXTO nunca muda entre repouso e hover. Só o fundo
varia, e sempre dentro de uma faixa que mantém contraste com esse texto.
Foi assim que o problema de texto sumindo no hover deixou de existir.
Regra dura 2: rótulo em caixa mista, na fonte de texto. O botão era mono,
caixa alta e com .09em de entreletra — "SOLICITAR ORÇAMENTO" ocupava quase
o dobro da largura de "Solicitar orçamento" e lia como interface de
template, não como o botão de uma empresa que atende chamado de doca.
========================================================================== */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
padding: .95rem 1.55rem;
border: 1px solid transparent;
border-radius: var(--r-sm);
font-family: var(--f-body);
font-size: var(--t-base);
font-weight: 600;
letter-spacing: .002em;
line-height: 1.15;
cursor: pointer;
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
/* Primário — texto sempre tinta */
.btn {
background: var(--hazard);
border-color: var(--hazard);
color: var(--ink);
}
.btn:hover, .btn:focus-visible {
background: var(--hazard-deep);
border-color: var(--hazard-deep);
box-shadow: 0 6px 18px rgba(238, 175, 0, .32);
transform: translateY(-2px);
}
/* Escuro — texto sempre claro */
.btn--dark {
background: var(--ink);
border-color: var(--ink);
color: var(--paper-2);
}
.btn--dark:hover, .btn--dark:focus-visible {
background: var(--dark-3);
border-color: var(--dark-3);
box-shadow: 0 6px 18px rgba(20, 22, 26, .24);
transform: translateY(-2px);
}
/* Contorno sobre papel — texto sempre tinta */
.btn--outline {
background: transparent;
border-color: var(--line-3);
color: var(--ink);
}
.btn--outline:hover, .btn--outline:focus-visible {
background: rgba(20, 22, 26, .06);
border-color: var(--ink);
transform: translateY(-2px);
}
/* Contorno sobre escuro — texto sempre claro */
.btn--outline-light {
background: transparent;
border-color: var(--line-on-dark-2);
color: var(--paper-2);
}
.btn--outline-light:hover, .btn--outline-light:focus-visible {
background: rgba(255, 255, 255, .12);
border-color: var(--paper-2);
transform: translateY(-2px);
}
/* WhatsApp — texto sempre branco */
.btn--wa {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.btn--wa:hover, .btn--wa:focus-visible {
background: var(--green-deep);
border-color: var(--green-deep);
box-shadow: 0 6px 18px rgba(18, 140, 74, .3);
transform: translateY(-2px);
}
.btn--sm { padding: .7rem 1.05rem; font-size: var(--t-sm); }
/* Só o corpo cresce. Aumentar também o tamanho da letra deixava o botão do
herói desproporcional ao lado do painel de emergência, que usa a mesma
variante em contexto bem menor. */
.btn--lg { padding: 1.15rem 2rem; }
/* O `white-space: nowrap` acima protege o rótulo curto de quebrar de um jeito
feio. Em botão de largura total, porém, ele vira defeito: um rótulo longo
dentro de um painel num celular de 360 px vazava para fora do bloco e era
cortado. Sendo de largura total, quebrar em duas linhas não custa nada.
(O risco caiu bastante quando o rótulo saiu da caixa alta monoespaçada,
mas a proteção continua valendo para textos longos.) */
.btn--block {
display: flex;
width: 100%;
white-space: normal;
line-height: 1.25;
text-wrap: balance;
}
/* Na tela mais estreita, qualquer botão pode quebrar. A quebra só acontece
quando o texto realmente não cabe — rótulo curto continua em uma linha. */
@media (max-width: 480px) {
.btn { white-space: normal; line-height: 1.25; }
}
@media (max-width: 420px) { .btn { padding-inline: 1.05rem; font-size: var(--t-sm); } }
/* ==========================================================================
06. HEADER & NAVEGAÇÃO
========================================================================== */
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
height: var(--header-h);
display: flex;
align-items: center;
background: rgba(246, 245, 241, .86);
-webkit-backdrop-filter: saturate(150%) blur(12px);
backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid transparent;
color: var(--ink);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
background: rgba(246, 245, 241, .96);
border-bottom-color: var(--line);
box-shadow: 0 6px 24px rgba(20, 22, 26, .06);
}
/* Sobre a capa escura da Home o cabeçalho começa transparente e só assume
o fundo claro depois que a rolagem começa. A classe é aplicada pelo JS
apenas em páginas cujo primeiro bloco é o herói de capa. */
.site-header--over:not(.is-stuck) {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: var(--paper-2);
}
.site-header--over:not(.is-stuck)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, rgba(12, 13, 16, .6), rgba(12, 13, 16, 0));
}
.site-header--over:not(.is-stuck) .nav__link,
.site-header--over:not(.is-stuck) .header-phone { color: rgba(255, 255, 255, .8); }
.site-header--over:not(.is-stuck) .nav__link:hover,
.site-header--over:not(.is-stuck) .nav__link[aria-current="page"],
.site-header--over:not(.is-stuck) .header-phone:hover { color: var(--paper-2); }
.site-header--over:not(.is-stuck) .header-phone svg,
.site-header--over:not(.is-stuck) .logo__sub { color: var(--hazard); }
.site-header--over:not(.is-stuck) .logo:hover .logo__mark { color: var(--hazard); }
.site-header--over:not(.is-stuck) .nav-toggle { border-color: var(--line-on-dark-2); color: var(--paper-2); }
.site-header--over:not(.is-stuck) .nav-toggle:hover {
border-color: var(--paper-2);
background: rgba(255, 255, 255, .14);
}
.site-header__inner {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.site-header .logo:hover .logo__mark { color: var(--hazard-ink); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
position: relative;
font-size: var(--t-base);
font-weight: 500;
color: var(--ink-2);
padding: .5rem 0;
transition: color var(--dur-fast) var(--ease);
}
/* Fio sólido. A versão zebrada repetia, num elemento de 4 px de altura, o
mesmo motivo do divisor do rodapé, da tarja dos painéis e do topo do
formulário — cinco lugares para uma assinatura que só funciona sendo rara. */
.nav__link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--hazard-deep);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: .875rem; }
.header-phone {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--f-mono);
font-size: var(--t-sm);
font-weight: 500;
color: var(--ink-2);
transition: color var(--dur-fast) var(--ease);
}
.header-phone svg { width: 15px; height: 15px; color: var(--hazard-ink); }
.header-phone:hover { color: var(--ink); }
.nav-toggle {
display: none;
width: 44px; height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--ink); background: rgba(20, 22, 26, .05); }
.nav-toggle__lines { position: relative; width: 20px; height: 12px; }
.nav-toggle__lines span {
position: absolute;
left: 0; height: 2px; width: 100%;
background: currentColor;
transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), width var(--dur) var(--ease);
}
.nav-toggle__lines span:nth-child(1) { top: 0; }
.nav-toggle__lines span:nth-child(2) { top: 5px; width: 70%; }
.nav-toggle__lines span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav {
position: fixed;
inset: 0;
z-index: 99;
background: var(--paper);
padding: calc(var(--header-h) + 1.75rem) var(--gutter) 2rem;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__list { border-top: 1px solid var(--line); }
.mobile-nav__list li { border-bottom: 1px solid var(--line); }
.mobile-nav__link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 1.05rem 0;
font-family: var(--f-display);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -.02em;
color: var(--ink);
transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-nav__link:hover, .mobile-nav__link[aria-current="page"] { color: var(--hazard-ink); padding-left: .5rem; }
.mobile-nav__foot { margin-top: auto; padding-top: 2rem; }
.mobile-nav__foot .btn { width: 100%; }
.mobile-nav__meta {
margin-top: 1.5rem;
font-size: var(--t-sm);
color: var(--ink-3);
line-height: 1.85;
}
.mobile-nav__meta a:hover { color: var(--ink); }
@media (max-width: 1024px) {
.nav, .header-phone { display: none; }
.nav-toggle { display: inline-flex; }
.header-actions .btn { display: none; }
}
@media (min-width: 1025px) { .mobile-nav { display: none; } }
/* ==========================================================================
07. HERÓIS
--------------------------------------------------------------------------
O herói da Home é a única capa escura do site: fotografia em tela cheia
com véu, atuando como abertura antes de o conteúdo claro começar.
========================================================================== */
.hero {
position: relative;
min-height: min(100svh, 880px);
display: flex;
align-items: flex-end;
padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
padding-bottom: clamp(3rem, 6vw, 5rem);
background: var(--dark);
color: var(--paper-2);
overflow: hidden;
isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 62% 50%;
filter: grayscale(.3) contrast(1.05) brightness(.66);
animation: heroZoom 22s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(100deg, rgba(12,13,16,.94) 0%, rgba(12,13,16,.8) 34%, rgba(12,13,16,.42) 66%, rgba(12,13,16,.7) 100%),
linear-gradient(to top, rgba(12,13,16,.95) 0%, transparent 44%);
}
.hero__grid {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: var(--grid-size);
-webkit-mask-image: linear-gradient(to top, #000 8%, transparent 70%);
mask-image: linear-gradient(to top, #000 8%, transparent 70%);
}
.hero__inner {
width: 100%;
/* Item flex: sem min-width:0 o `min-width:auto` usa a largura da palavra
mais longa do título e estoura a página em telas estreitas. */
min-width: 0;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative;
}
.hero .eyebrow { color: var(--hazard); }
.hero__title {
font-size: var(--t-5xl);
font-weight: 800;
line-height: .95;
letter-spacing: -.032em;
text-transform: uppercase;
color: var(--paper-2);
margin-bottom: 1.5rem;
}
@media (min-width: 901px) { .hero__title { max-width: 16ch; } }
.hero__title em { font-style: normal; color: var(--hazard); }
.hero__desc {
max-width: 46ch;
font-size: var(--t-lg);
color: rgba(255, 255, 255, .8);
margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Ficha técnica lateral */
.hero__spec {
position: absolute;
right: var(--gutter);
bottom: clamp(3rem, 6vw, 5rem);
width: 15rem;
border-left: 1px solid var(--line-on-dark-2);
padding-left: 1.5rem;
}
.hero__spec dl { margin: 0; display: grid; gap: 1.1rem; }
.hero__spec dt {
font-family: var(--f-mono);
font-size: .625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: .25rem;
}
.hero__spec dd {
margin: 0;
font-family: var(--f-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--paper-2);
}
@media (max-width: 1180px) { .hero__spec { display: none; } }
/* O indicador "ROLE" com o fio pulsante saiu daqui. Ninguém que chega numa
página com fotografia cortada na dobra precisa ser informado de que a
página rola; o elemento existia porque é o que se põe num herói de
template, não porque resolvia alguma dúvida do visitante. */
@media (max-width: 640px) {
.hero { min-height: auto; padding-top: calc(var(--header-h) + 4.5rem); }
.hero__cta .btn { flex: 1 1 auto; }
}
/* Grão sutil sobre a fotografia */
.noise::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .3;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* — Herói de páginas internas — */
.page-hero {
position: relative;
padding-top: calc(var(--header-h) + clamp(2.75rem, 6vw, 4.5rem));
padding-bottom: clamp(2.5rem, 5vw, 4rem);
background: var(--paper);
overflow: hidden;
isolation: isolate;
border-bottom: 1px solid var(--line);
}
/* A malha de engenharia saiu daqui. Ela aparecia no herói da Home, no herói
de toda página interna, em três seções da Home e ainda no fundo da faixa
de CTA — cinco camadas do mesmo truque. Ficou só no herói da Home, que é
onde a fotografia escura dá contraste para a malha significar alguma coisa. */
.page-hero__title { font-size: var(--t-4xl); letter-spacing: -.028em; }
.page-hero__desc { max-width: 52ch; margin-top: 1.25rem; font-size: var(--t-lg); color: var(--ink-2); }
.page-hero__layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: end;
}
@media (max-width: 900px) { .page-hero__layout { grid-template-columns: minmax(0, 1fr); } }
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem;
font-size: var(--t-sm);
color: var(--ink-3);
margin-bottom: 1.5rem;
}
.crumbs a { transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--hazard-ink); }
.crumbs svg { width: 12px; height: 12px; opacity: .45; }
/* ==========================================================================
08. FAIXA DE ABERTURA
--------------------------------------------------------------------------
Eram quatro colunas idênticas: ícone de traço + título de duas palavras +
uma frase de dez palavras, repetido quatro vezes com a mesma métrica.
Agora são três afirmações de comprimentos diferentes, sem ícone. Numa
folha de especificação quem informa é o texto; o ícone genérico só
preenchia a coluna.
========================================================================== */
.trustbar__grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.trustbar__item {
padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.25rem) 0;
border-left: 1px solid var(--line);
padding-left: clamp(1.25rem, 2.4vw, 2rem);
}
.trustbar__item:first-child { border-left: 0; padding-left: 0; }
.trustbar__item h3 {
font-family: var(--f-display);
font-size: var(--t-xl);
font-weight: 700;
line-height: 1.15;
margin-bottom: .55rem;
}
.trustbar__item p { font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; margin: 0; }
@media (max-width: 860px) {
.trustbar__grid { grid-template-columns: minmax(0, 1fr); }
.trustbar__item { border-left: 0; padding-left: 0; padding-right: 0; }
.trustbar__item + .trustbar__item { border-top: 1px solid var(--line); }
}
/* ==========================================================================
09. CARTÕES DE PRODUTO
========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }
.product-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--paper-2);
border: 1px solid var(--line);
overflow: hidden;
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.product-card::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 3px;
background: var(--hazard);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
.product-card:hover::after { transform: scaleX(1); }
.product-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-3);
border-bottom: 1px solid var(--line);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__num {
position: absolute;
top: 0; left: 0;
z-index: 2;
background: var(--hazard);
color: var(--ink);
font-family: var(--f-mono);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .12em;
padding: .4rem .65rem;
}
.product-card__body {
padding: clamp(1.25rem, 2.2vw, 1.6rem);
display: flex;
flex-direction: column;
flex: 1;
gap: .7rem;
}
.product-card__title { font-size: var(--t-xl); letter-spacing: -.015em; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.product-card p { font-size: var(--t-base); color: var(--ink-2); margin: 0; line-height: 1.55; }
.product-card__go {
margin-top: auto;
padding-top: .9rem;
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: var(--t-sm);
font-weight: 600;
color: var(--hazard-ink);
}
.product-card__go svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.product-card:hover .product-card__go svg { transform: translateX(4px); }
/* ==========================================================================
10. SETORES
--------------------------------------------------------------------------
A malha `.sector-grid` (três colunas coladas por fio de 1 px) saiu junto
com a lista de seis setores da Home — ver `.rows`, logo abaixo. O cartão
`.sector` continua, porque atende os atalhos do 404, do obrigado e do
configurador, e ali ele vive dentro de um `.grid` comum.
========================================================================== */
.sector {
position: relative;
background: var(--paper-2);
border: 1px solid var(--line);
padding: clamp(1.5rem, 2.6vw, 2rem);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
display: block;
}
.sector:hover { background: var(--paper-3); border-color: var(--line-2); }
.sector__icon { color: var(--hazard-ink); margin-bottom: 1rem; }
.sector__icon svg { width: 24px; height: 24px; }
.sector h3 { font-size: var(--t-lg); margin-bottom: .4rem; }
.sector p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; margin: 0; }
/* --------------------------------------------------------------------------
Lista de setores — substitui a malha de seis cartões com ícone.
Seis blocos iguais, com ícone genérico e uma frase de tamanho idêntico,
é a forma mais reconhecível de preenchimento automático: o número seis
vinha de fechar duas fileiras de três, não do negócio. Aqui cada setor é
uma linha de ficha — nome à esquerda, o que muda naquele setor à direita —
e a lista pode ter o tamanho que a realidade pedir.
-------------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--line-2); }
.rows > li {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: .35rem clamp(1.5rem, 4vw, 3.5rem);
align-items: baseline;
padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
border-bottom: 1px solid var(--line);
}
.rows h3 {
font-family: var(--f-display);
font-size: var(--t-xl);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.015em;
}
.rows p { margin: 0; color: var(--ink-2); max-width: 58ch; }
@media (max-width: 720px) {
.rows > li { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
11. PROCESSO
========================================================================== */
.process__list {
counter-reset: step;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
.process__item {
counter-increment: step;
padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem) clamp(1.75rem, 3vw, 2.5rem) 0;
border-left: 1px solid var(--line);
padding-left: clamp(1rem, 2vw, 1.75rem);
}
.process__item:first-child { border-left: 0; padding-left: 0; }
.process__item::before {
content: "0" counter(step);
display: block;
font-family: var(--f-mono);
font-size: 1.75rem;
font-weight: 600;
line-height: 1;
color: var(--hazard);
margin-bottom: 1rem;
}
.process__item h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.process__item p { font-size: var(--t-base); color: var(--ink-2); margin: 0; line-height: 1.55; }
@media (max-width: 900px) {
.process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process__item:nth-child(odd) { border-left: 0; padding-left: 0; }
.process__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
.process__list { grid-template-columns: minmax(0, 1fr); }
.process__item { border-left: 0; padding-left: 0 !important; padding-right: 0; }
.process__item + .process__item { border-top: 1px solid var(--line); }
}
/* ==========================================================================
12. DECLARAÇÃO
--------------------------------------------------------------------------
Aqui havia quatro indicadores em contagem animada: "4 linhas de produto",
"100% equipe própria", "24h de retorno", "10+ anos". Três deles nunca
foram confirmados pela empresa, e o quarto contava itens do próprio menu
como se fosse conquista. Número redondo, não verificável e com animação de
contador é a marca registrada de página gerada — e, pior, é o tipo de
afirmação que o comprador industrial checa na primeira ligação.
No lugar entrou uma frase só, empurrada para a direita da página. Todo o
resto do site alinha à esquerda; este bloco não, e é justamente por isso
que ele interrompe o ritmo em vez de repetir mais uma malha de cartões.
========================================================================== */
.statement {
margin-top: clamp(2.75rem, 5.5vw, 4rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--line);
max-width: 42rem;
margin-left: auto;
}
.statement p {
font-family: var(--f-display);
font-weight: 700;
font-size: var(--t-2xl);
line-height: 1.18;
letter-spacing: -.022em;
text-wrap: balance;
margin: 0;
}
.statement p em { font-style: normal; box-shadow: inset 0 -.42em 0 var(--hazard); }
.statement footer {
margin-top: 1.15rem;
font-size: var(--t-base);
color: var(--ink-3);
max-width: 52ch;
}
/* ==========================================================================
13. CLIENTES
Logos nas cores originais, sem filtro e sem revelação no hover.
Os SVGs foram recortados no bounding box real para que a altura
uniforme produza peso óptico equivalente entre marcas.
========================================================================== */
.clients {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.client {
background: var(--paper-2);
min-height: 7.5rem;
display: grid;
place-items: center;
padding: 1.5rem clamp(1rem, 3vw, 2rem);
}
.client img {
/* Altura FIXA, não máxima: `max-height` só encolhe, e as marcas cujo
tamanho intrínseco era menor que o limite ficavam miúdas. */
height: 2.5rem;
width: auto;
max-width: min(100%, 10rem);
object-fit: contain;
/* Ajuste óptico por marca: logos com fundo sólido pesam mais que
marcas abertas no mesmo tamanho geométrico. */
transform: scale(var(--logo-scale, 1));
}
@media (max-width: 720px) {
.clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client { min-height: 6.5rem; }
}
/* ==========================================================================
14. ACORDEÃO
========================================================================== */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 1.35rem 0;
text-align: left;
font-family: var(--f-display);
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.012em;
color: var(--ink);
transition: color var(--dur-fast) var(--ease);
}
.accordion__btn:hover { color: var(--hazard-ink); }
.accordion__icon {
flex: none;
width: 28px; height: 28px;
position: relative;
border: 1px solid var(--line-2);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.accordion__icon::before, .accordion__icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
background: currentColor;
transform: translate(-50%, -50%);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.accordion__icon::before { width: 11px; height: 2px; }
.accordion__icon::after { width: 2px; height: 11px; }
.accordion__btn[aria-expanded="true"] .accordion__icon { background: var(--hazard); border-color: var(--hazard); color: var(--ink); }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
/* O painel é irmão do , não do botão — o botão mora DENTRO do .
A regra que existia aqui era `.accordion__btn[aria-expanded="true"] +
.accordion__panel`, um seletor de irmão adjacente que, por causa disso,
nunca casava. Efeito: o acordeão do site inteiro ficava permanentemente
fechado — nenhuma resposta do FAQ aparecia em página nenhuma, nem a do
primeiro item, que nasce com aria-expanded="true".
São duas regras separadas de propósito, e não uma lista com vírgula: se o
navegador não entender :has(), ele descarta só a segunda. Numa lista
separada por vírgula, um seletor desconhecido derruba a regra inteira.
A primeira é a que vale na prática — o main.js mantém a classe em sincronia
com o aria-expanded. A segunda cobre o caso sem JavaScript, em que o estado
inicial do HTML é tudo o que existe. */
.accordion__item.is-open > .accordion__panel { grid-template-rows: 1fr; }
.accordion__item:has(.accordion__btn[aria-expanded="true"]) > .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 1.35rem; max-width: 62ch; color: var(--ink-2); font-size: var(--t-base); }
/* ==========================================================================
15. FICHA TÉCNICA, LISTAS, PAINÉIS
========================================================================== */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.spec-table caption {
text-align: left;
font-family: var(--f-mono);
font-size: var(--t-xs);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3);
padding-bottom: 1rem;
}
.spec-table th, .spec-table td {
text-align: left;
padding: .9rem 1.1rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.spec-table th {
width: 38%;
font-family: var(--f-mono);
font-size: var(--t-sm);
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-3);
}
.spec-table td { color: var(--ink); font-weight: 500; }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th { background: rgba(255, 196, 0, .1); }
.spec-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
.spec-table th, .spec-table td { padding: .75rem .8rem; }
.spec-table th { width: 44%; font-size: var(--t-xs); }
}
/* Lista com marca de conferido (check em CSS puro) */
.checklist { display: grid; gap: .85rem; }
.checklist li { position: relative; padding-left: 1.8rem; line-height: 1.55; }
.checklist li::before {
content: "";
position: absolute;
left: 2px; top: .3em;
width: 7px; height: 13px;
border: solid var(--hazard-ink);
border-width: 0 2.5px 2.5px 0;
transform: rotate(42deg);
}
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 700px) { .checklist--2 { grid-template-columns: minmax(0, 1fr); } }
.prose > * + * { margin-top: 1.1em; }
.prose h3 { margin-top: 2.2em; }
.prose h3:first-child { margin-top: 0; }
.prose ul { display: grid; gap: .55rem; }
.prose ul li { padding-left: 1.4rem; position: relative; color: var(--ink-2); }
.prose ul li::before {
content: "";
position: absolute;
left: 0; top: .62em;
width: 6px; height: 6px;
background: var(--hazard);
transform: rotate(45deg);
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 980px) { .split { grid-template-columns: minmax(0, 1fr); } }
.sticky-card { position: sticky; top: calc(var(--header-h) + 1.25rem); }
@media (max-width: 980px) { .sticky-card { position: static; } }
/* Painel.
Trazia a tarja zebrada no topo. Como o painel aparece dezenas de vezes no
site — barra lateral de FAQ, compromissos, serviços, produtos relacionados —
a tarja saía impressa em quase toda tela e anulava o efeito de sinalização.
Ficou o contorno de 1 px; quem precisa de ênfase usa `.panel--ink`. */
.panel {
position: relative;
background: var(--paper-2);
border: 1px solid var(--line);
padding: clamp(1.5rem, 2.6vw, 2rem);
display: block;
}
.panel h3 { font-size: var(--t-lg); margin-bottom: .7rem; }
.panel p { font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }
a.panel { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
a.panel:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-1); }
/* `.panel p` (0,1,1) venceria `.index`/`.eyebrow` (0,1,0) quando esses
rótulos são parágrafos — daí o reforço explícito de especificidade. */
.panel .index, .panel .eyebrow { color: var(--hazard-ink); }
.brandplate .index, .brandplate .eyebrow { color: var(--hazard); }
/* Variante escura, usada pontualmente */
.panel--ink { background: var(--dark); border-color: var(--dark); color: var(--on-dark-txt); }
.panel--ink .index, .panel--ink .eyebrow { color: var(--hazard); }
.panel--ink h3 { color: var(--paper-2); }
.panel--ink p { color: var(--on-dark-dim); }
.panel--ink .index { color: var(--hazard); }
/* Placa de identidade */
.brandplate {
position: relative;
background: var(--dark);
color: var(--on-dark-txt);
padding: clamp(1.75rem, 3.5vw, 2.5rem);
overflow: hidden;
}
.brandplate::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6px;
background-image: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, rgba(0,0,0,.85) 10px 20px);
}
.brandplate__mark { width: clamp(4rem, 10vw, 5.5rem); height: auto; color: var(--hazard); margin-top: .75rem; }
.brandplate__mark .ring { fill: none; stroke: currentColor; stroke-width: 4.2; }
.brandplate__mark .glyph { fill: currentColor; }
.brandplate__name {
font-family: var(--f-display);
font-weight: 800;
font-size: clamp(1.375rem, 3vw, 1.75rem);
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--paper-2);
margin: 1.25rem 0 .3rem;
line-height: 1.05;
}
.brandplate__tagline {
font-family: var(--f-mono);
font-size: var(--t-xs);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--hazard);
margin: 0;
}
.brandplate dl { margin: 1.75rem 0 0; border-top: 1px solid var(--line-on-dark); }
.brandplate dl > div {
display: flex;
flex-wrap: wrap;
gap: .3rem 1rem;
justify-content: space-between;
align-items: baseline;
padding: .8rem 0;
border-bottom: 1px solid var(--line-on-dark);
}
.brandplate dt {
font-family: var(--f-mono);
font-size: .625rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--on-dark-dim);
}
.brandplate dd { margin: 0; font-size: var(--t-sm); font-weight: 500; color: var(--paper-2); text-align: right; }
/* Vitrine alternada */
.showcase {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.showcase + .showcase {
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: clamp(3rem, 6vw, 4.5rem);
border-top: 1px solid var(--line);
}
@media (min-width: 861px) { .showcase--flip .showcase__media { order: 2; } }
@media (max-width: 860px) { .showcase { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }
.showcase__media {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
background: var(--paper-3);
aspect-ratio: 4 / 3;
}
.showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.showcase:hover .showcase__media img { transform: scale(1.04); }
.showcase__badge {
position: absolute;
top: 0; left: 0;
z-index: 2;
background: var(--hazard);
color: var(--ink);
font-family: var(--f-mono);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .14em;
padding: .45rem .75rem;
}
.showcase__body h2 { font-size: var(--t-2xl); }
.showcase__body > * + * { margin-top: 1.1rem; }
.showcase__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
/* ==========================================================================
16. FAIXA DE CTA
========================================================================== */
.cta-band { position: relative; background: var(--hazard); color: var(--ink); overflow: hidden; }
.cta-band__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(1.75rem, 4vw, 3.5rem);
align-items: center;
padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cta-band h2 { font-size: var(--t-2xl); letter-spacing: -.025em; max-width: 24ch; }
.cta-band p { margin-top: .8rem; max-width: 50ch; color: rgba(20, 22, 26, .72); }
@media (max-width: 860px) {
.cta-band__inner { grid-template-columns: minmax(0, 1fr); }
.cta-band .btn { flex: 1 1 auto; }
}
/* ==========================================================================
17. FORMULÁRIO & CONTATO
========================================================================== */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: .45rem; }
.field > label {
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink-2);
}
.field .req { color: var(--rust); }
.field input, .field select, .field textarea {
width: 100%;
padding: .875rem 1rem;
background: var(--paper-2);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
font-size: var(--t-base);
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
appearance: none;
-webkit-appearance: none;
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
.field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767b85' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 18px;
padding-right: 2.75rem;
cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(255, 196, 0, .38);
}
.field__hint { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.field__error { font-size: var(--t-sm); font-weight: 500; color: var(--rust); display: none; }
.field.has-error .field__error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--rust); }
.consent {
display: flex;
gap: .7rem;
align-items: flex-start;
font-size: var(--t-sm);
color: var(--ink-3);
line-height: 1.5;
}
.consent input[type="checkbox"] {
flex: none;
width: 20px; height: 20px;
margin-top: 1px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--paper-2);
cursor: pointer;
display: grid;
place-content: center;
appearance: none;
-webkit-appearance: none;
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.consent input[type="checkbox"]::before {
content: "";
width: 11px; height: 11px;
transform: scale(0);
transition: transform var(--dur-fast) var(--ease);
background: var(--ink);
clip-path: polygon(14% 44%, 0 65%, 38% 100%, 100% 20%, 82% 5%, 36% 66%);
}
.consent input[type="checkbox"]:checked { background: var(--hazard); border-color: var(--hazard); }
.consent input[type="checkbox"]:checked::before { transform: scale(1); }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form-card {
position: relative;
background: var(--paper-2);
border: 1px solid var(--line);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6px;
background-image: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, var(--dark) 10px 20px);
}
.contact-list { display: grid; border-top: 1px solid var(--line); }
.contact-item {
display: flex;
gap: 1rem;
padding: 1.15rem 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.contact-item__icon { flex: none; color: var(--hazard-ink); margin-top: 2px; }
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item dt {
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink-3);
margin-bottom: .25rem;
}
.contact-item dd { margin: 0; font-weight: 500; line-height: 1.45; font-size: var(--t-base); }
.contact-item dd a { transition: color var(--dur-fast) var(--ease); }
.contact-item dd a:hover { color: var(--hazard-ink); }
.contact-item dd small { display: block; color: var(--ink-3); font-weight: 400; margin-top: .2rem; }
.map-frame {
position: relative;
border: 1px solid var(--line);
background: var(--paper-3);
aspect-ratio: 16 / 9;
overflow: hidden;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.map-frame__ph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
padding: 2rem;
background: var(--paper-3);
color: var(--ink-2);
}
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 3; } }
/* ==========================================================================
18. RODAPÉ — único bloco escuro do site
========================================================================== */
.site-footer { background: var(--dark); color: var(--on-dark-dim); }
.site-footer__top {
display: grid;
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 3.5rem);
padding-block: clamp(3rem, 6vw, 4.5rem);
}
.site-footer .logo { color: var(--paper-2); }
.site-footer .logo__sub { color: var(--hazard); }
.site-footer__about { max-width: 32ch; margin-top: 1.25rem; font-size: var(--t-sm); line-height: 1.65; color: var(--on-dark-dim); }
.footer-col h3 {
font-family: var(--f-body);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .01em;
color: var(--hazard);
margin-bottom: 1rem;
}
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a {
font-size: var(--t-base);
color: var(--on-dark-dim);
transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
display: inline-block;
}
.footer-col a:hover { color: var(--hazard); padding-left: 4px; }
.footer-col address { font-style: normal; font-size: var(--t-base); line-height: 1.7; }
.site-footer__bottom {
border-top: 1px solid var(--line-on-dark);
padding-block: 1.35rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
font-size: var(--t-sm);
color: var(--ink-4);
}
.site-footer__bottom a:hover { color: var(--hazard); }
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.social a {
width: 38px; height: 38px;
display: grid;
place-items: center;
border: 1px solid var(--line-on-dark-2);
color: var(--on-dark-dim);
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.social a svg { width: 17px; height: 17px; }
.social a:hover { color: var(--ink); background: var(--hazard); border-color: var(--hazard); }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
.site-footer__top { grid-template-columns: minmax(0, 1fr); }
.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
19. FLUTUANTES
========================================================================== */
.fab-wa {
position: fixed;
right: clamp(1rem, 3vw, 1.75rem);
bottom: clamp(1rem, 3vw, 1.75rem);
z-index: 90;
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .8rem 1.1rem;
background: var(--green);
color: #fff;
border-radius: 999px;
box-shadow: 0 8px 26px rgba(18, 140, 74, .3), 0 2px 8px rgba(20, 22, 26, .14);
font-size: var(--t-sm);
font-weight: 600;
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.fab-wa svg { width: 21px; height: 21px; flex: none; }
.fab-wa:hover { transform: translateY(-3px); background: var(--green-deep); }
@media (max-width: 560px) { .fab-wa { padding: .8rem; } .fab-wa__label { display: none; } }
.to-top {
position: fixed;
right: clamp(1rem, 3vw, 1.75rem);
bottom: calc(clamp(1rem, 3vw, 1.75rem) + 58px);
z-index: 89;
width: 42px; height: 42px;
display: grid;
place-items: center;
background: var(--paper-2);
color: var(--ink);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur),
background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
box-shadow: var(--shadow-1);
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--hazard); border-color: var(--hazard); }
.lgpd {
position: fixed;
left: clamp(1rem, 3vw, 1.75rem);
bottom: clamp(1rem, 3vw, 1.75rem);
z-index: 95;
max-width: 24rem;
background: var(--paper-2);
color: var(--ink-2);
border: 1px solid var(--line-2);
padding: 1.25rem 1.4rem;
box-shadow: var(--shadow-2);
transform: translateY(140%);
transition: transform .5s var(--ease-out);
}
.lgpd.is-visible { transform: none; }
.lgpd p { font-size: var(--t-sm); line-height: 1.55; margin-bottom: .9rem; }
.lgpd a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lgpd .cluster { --cluster: .5rem; }
@media (max-width: 560px) {
.lgpd { left: 1rem; right: 1rem; max-width: none; bottom: 5rem; }
.lgpd .btn { flex: 1 1 auto; }
}
/* ==========================================================================
20. ANIMAÇÕES
========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.975); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--delay, 0ms); }
.reveal-scale.is-visible { opacity: 1; transform: none; }
.hero__inner > * { animation: heroUp .85s var(--ease-out) both; }
.hero__inner > *:nth-child(1) { animation-delay: .1s; }
.hero__inner > *:nth-child(2) { animation-delay: .22s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* ==========================================================================
21. ACESSIBILIDADE, MOVIMENTO REDUZIDO & IMPRESSÃO
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
}
@media (prefers-contrast: more) {
:root { --ink-3: #4a4f58; --line: rgba(20,22,26,.28); --line-2: rgba(20,22,26,.42); }
}
@media print {
.site-header, .mobile-nav, .fab-wa, .to-top, .lgpd, .cta-band,
.action-bar, .selector__nav, .selector__bar { display: none !important; }
body { background: #fff; color: #000; }
.surface-ink, .panel--ink, .brandplate, .site-footer { background: #fff !important; color: #000 !important; }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink p { color: #000 !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
.section { padding-block: 1.25rem; }
/* O resultado do configurador e da calculadora precisam sair no papel —
é comum o comprador imprimir para levar à reunião de aprovação. */
.selector__step[hidden] { display: none !important; }
.selector, .calc, .calc__out { border-color: #000 !important; }
.calc__out { background: #fff !important; color: #000 !important; }
.calc__big, .calc__out dt, .calc__out dd { color: #000 !important; }
}
/* ==========================================================================
22. FERRAMENTAS DE CONVERSÃO
Configurador guiado, calculadora de parada, faixa de emergência e a barra
de ação fixa no celular. Referência de mercado: o comprador industrial
chega ao site sem saber o nome do equipamento que precisa — o caminho até
o orçamento tem que ser guiado, e o custo da inércia tem que ficar visível.
========================================================================== */
/* --- 22.1 Bloco de chamada para uma ferramenta ------------------------- */
.tool-cta {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
background: var(--paper-2);
border: 1px solid var(--line-2);
border-left: 4px solid var(--hazard);
padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.tool-cta h2, .tool-cta h3 { font-size: var(--t-2xl); }
.tool-cta p { margin-top: .9rem; color: var(--ink-2); max-width: 54ch; }
.tool-cta__steps {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.4rem;
margin-top: 1.4rem;
font-size: var(--t-sm);
font-weight: 500;
color: var(--ink-3);
}
.tool-cta__steps li { display: flex; align-items: center; gap: .5em; }
.tool-cta__steps li::before {
content: "";
width: 14px; height: 3px;
background: var(--hazard);
flex: none;
}
@media (max-width: 860px) { .tool-cta { grid-template-columns: minmax(0, 1fr); } }
/* --- 22.2 Configurador guiado ------------------------------------------ */
.selector {
background: var(--paper-2);
border: 1px solid var(--line-2);
box-shadow: var(--shadow-1);
}
/* Barra de progresso — só faz sentido com JS conduzindo os passos */
.selector__bar { display: none; }
.selector.is-js .selector__bar {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem clamp(1.25rem, 3vw, 2.25rem);
border-bottom: 1px solid var(--line);
background: var(--paper-3);
}
.selector__count {
font-family: var(--f-mono);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .04em;
color: var(--hazard-ink);
flex: none;
}
.selector__ticks { display: flex; gap: 4px; flex: 1 1 auto; }
.selector__ticks span {
height: 4px;
flex: 1 1 0;
background: var(--line-2);
transition: background-color var(--dur) var(--ease);
}
.selector__ticks span.is-done { background: var(--hazard); }
.selector__step { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.selector.is-js .selector__step + .selector__step { border-top: 0; }
.selector__step + .selector__step { border-top: 1px solid var(--line); }
.selector__step[hidden] { display: none; }
.selector fieldset { border: 0; margin: 0; padding: 0; }
.selector legend {
font-family: var(--f-display);
font-weight: 700;
font-size: var(--t-xl);
line-height: 1.15;
letter-spacing: -.015em;
padding: 0;
margin-bottom: .4rem;
}
.selector__hint {
font-size: var(--t-sm);
color: var(--ink-3);
margin-bottom: 1.35rem;
}
.selector__opts { display: grid; gap: .6rem; }
.selector__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .selector__opts--2 { grid-template-columns: minmax(0, 1fr); } }
.opt {
position: relative; /* prende o input escondido dentro do próprio cartão */
display: flex;
align-items: flex-start;
gap: .9rem;
padding: 1rem 1.15rem;
border: 1px solid var(--line-2);
background: var(--paper-2);
cursor: pointer;
min-height: 44px;
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.opt:hover { border-color: var(--ink-3); background: var(--paper); }
.opt input {
position: absolute;
left: 1rem; top: 1rem;
width: 1px; height: 1px;
opacity: 0;
margin: 0;
}
.opt__mark {
flex: none;
width: 20px; height: 20px;
margin-top: 2px;
border: 1px solid var(--line-3);
background: var(--paper-2);
position: relative;
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.opt input[type="radio"] ~ .opt__mark { border-radius: 50%; }
.opt__mark::after {
content: "";
position: absolute;
inset: 4px;
background: var(--ink);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.opt input[type="radio"] ~ .opt__mark::after { border-radius: 50%; }
.opt__txt { display: block; line-height: 1.4; }
.opt__txt strong { display: block; font-weight: 600; }
.opt__txt small {
display: block;
margin-top: .25rem;
font-size: var(--t-sm);
color: var(--ink-3);
line-height: 1.5;
}
/* Estado marcado: a classe vem do JS; o :has() cobre o uso sem JS. */
.opt.is-checked, .opt:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.opt.is-checked .opt__mark,
.opt:has(input:checked) .opt__mark { border-color: var(--ink); background: var(--hazard); }
.opt.is-checked .opt__mark::after,
.opt:has(input:checked) .opt__mark::after { opacity: 1; }
.opt:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.selector__nav {
display: none;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.15rem clamp(1.25rem, 3vw, 2.25rem);
border-top: 1px solid var(--line);
background: var(--paper-3);
}
.selector.is-js .selector__nav { display: flex; }
/* Ação secundária sem peso de botão — voltar, refazer */
.btn--ghost {
display: inline-flex;
align-items: center;
gap: .5em;
font-size: var(--t-base);
font-weight: 500;
color: var(--ink-3);
padding: .6rem 0;
min-height: 44px;
transition: color var(--dur-fast) var(--ease);
}
.btn--ghost:hover { color: var(--ink); }
.btn--ghost[hidden] { display: none; }
/* Resultado */
.selector__result { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.selector__result[hidden] { display: none; }
.result-head { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.result-head h3 { font-size: var(--t-2xl); }
.result-head p { margin-top: .75rem; color: var(--ink-2); }
.result-list { display: grid; gap: .75rem; }
.result-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.25rem;
border: 1px solid var(--line-2);
background: var(--paper);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.result-item:hover { border-color: var(--ink); background: var(--paper-2); }
.result-item__idx {
font-family: var(--f-mono);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .12em;
color: var(--hazard-ink);
}
.result-item__title {
display: block;
font-family: var(--f-display);
font-weight: 700;
font-size: var(--t-lg);
letter-spacing: -.015em;
line-height: 1.15;
}
.result-item__why { display: block; font-size: var(--t-base); color: var(--ink-2); margin-top: .3rem; line-height: 1.5; }
.result-item svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.result-item:hover svg { color: var(--ink); }
@media (max-width: 560px) {
.result-item { grid-template-columns: auto 1fr; }
.result-item > svg { display: none; }
}
.result-note {
margin-top: 1.5rem;
padding: 1rem 1.15rem;
border: 1px solid var(--line);
border-left: 3px solid var(--ink-4);
background: var(--paper-3);
font-size: var(--t-sm);
color: var(--ink-2);
line-height: 1.55;
}
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.result-actions .btn { flex: 1 1 14rem; justify-content: center; }
/* Captura do lead — último passo do configurador.
Fica dentro do painel de resultado, com fundo branco para separar "o que
descobrimos" (papel) de "o que você envia" (formulário). A tarja no topo é
a mesma do .form-card do contato: é o sinal de que ali se envia algo. */
.lead-form {
position: relative;
margin-top: 1.75rem;
padding: clamp(1.35rem, 3vw, 2rem);
padding-top: clamp(1.6rem, 3vw, 2.25rem);
background: var(--paper);
border: 1px solid var(--line-2);
}
.lead-form::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 5px;
background-image: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, var(--dark) 10px 20px);
}
.lead-form__head { display: grid; gap: .5rem; }
.lead-form__head h4 {
font-family: var(--f-display);
font-weight: 700;
font-size: var(--t-xl);
line-height: 1.15;
letter-spacing: -.015em;
}
.lead-form__head p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.lead-form__foot {
font-size: var(--t-xs);
color: var(--ink-3);
line-height: 1.55;
text-align: center;
}
/* Equipamento parado: o WhatsApp sobe (o JS reordena os blocos) e o
formulário deixa de ser a ação principal — perde a tarja e o peso. */
.selector__result.is-urgent .result-actions { margin-top: 0; }
.selector__result.is-urgent .lead-form { background: var(--paper-3); }
.selector__result.is-urgent .lead-form::before { display: none; }
/* --- 22.3 Calculadora de doca parada ----------------------------------- */
.calc {
display: grid;
grid-template-columns: 1.15fr 1fr;
border: 1px solid var(--line-2);
background: var(--paper-2);
box-shadow: var(--shadow-1);
}
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc__in { padding: clamp(1.5rem, 3.5vw, 2.5rem); display: grid; gap: 1.25rem; align-content: start; }
.calc__field { display: grid; gap: .45rem; }
.calc__field label {
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink-2);
}
.calc__input {
display: flex;
align-items: center;
border: 1px solid var(--line-2);
background: var(--paper);
transition: border-color var(--dur-fast) var(--ease);
}
.calc__input:focus-within { border-color: var(--ink); }
.calc__input span {
flex: none;
padding: 0 .85rem;
font-family: var(--f-mono);
font-size: var(--t-sm);
color: var(--ink-3);
border-right: 1px solid var(--line);
align-self: stretch;
display: flex;
align-items: center;
}
.calc__input input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
border: 0;
background: transparent;
padding: .85rem 1rem;
font-family: var(--f-mono);
font-size: var(--t-base);
font-weight: 500;
}
.calc__input input:focus { outline: 0; }
.calc__field small { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.calc__range { display: grid; gap: .55rem; }
.calc__range-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.calc__range-val {
font-family: var(--f-mono);
font-size: var(--t-lg);
font-weight: 600;
color: var(--hazard-ink);
}
.calc__range input[type="range"] {
width: 100%;
accent-color: var(--hazard-deep);
height: 24px;
cursor: pointer;
}
.calc__out {
padding: clamp(1.5rem, 3.5vw, 2.5rem);
background: var(--dark);
color: var(--on-dark-txt);
display: grid;
align-content: start;
gap: 1.35rem;
border-left: 1px solid var(--dark);
}
@media (max-width: 860px) { .calc__out { border-left: 0; border-top: 1px solid var(--line-2); } }
.calc__out h3 {
color: var(--paper-2);
font-size: var(--t-lg);
}
.calc__big { display: grid; gap: .3rem; }
.calc__big dt {
font-size: var(--t-sm);
font-weight: 600;
color: var(--hazard);
}
.calc__big dd {
font-family: var(--f-display);
font-weight: 800;
font-size: var(--t-3xl);
line-height: 1;
letter-spacing: -.03em;
color: var(--paper-2);
font-variant-numeric: tabular-nums;
}
.calc__rows { display: grid; gap: .85rem; border-top: 1px solid var(--line-on-dark); padding-top: 1.35rem; }
.calc__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
font-size: var(--t-sm);
}
.calc__row dt { color: var(--on-dark-dim); }
.calc__row dd {
color: var(--paper-2);
font-family: var(--f-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.calc__row--accent dd { color: var(--hazard); }
.calc__disclaimer {
border-top: 1px solid var(--line-on-dark);
padding-top: 1.25rem;
font-size: var(--t-xs);
line-height: 1.6;
color: var(--on-dark-dim);
}
.calc__out .btn { justify-content: center; }
/* --- 22.4 Faixa de emergência ------------------------------------------ */
.emergency { background: var(--dark); color: var(--on-dark-txt); }
.emergency__inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: clamp(1.5rem, 3vw, 3rem);
padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}
@media (max-width: 860px) { .emergency__inner { grid-template-columns: minmax(0, 1fr); } }
.emergency h2 {
color: var(--paper-2);
font-size: var(--t-2xl);
}
.emergency p { color: var(--on-dark-dim); margin-top: .85rem; max-width: 56ch; }
.emergency__steps {
display: grid;
gap: .45rem;
margin-top: 1.25rem;
font-size: var(--t-base);
color: var(--on-dark-txt);
}
.emergency__steps li::before { content: "→ "; color: var(--hazard); }
.emergency__actions { display: grid; gap: .65rem; min-width: min(100%, 17rem); }
.emergency__actions .btn { justify-content: center; }
/* Disponibilidade do chamado. É a única informação do bloco que responde
"alguém atende agora?" — por isso ganha a marca amarela e o strong. */
.emergency__hours {
display: flex;
align-items: baseline;
gap: .7rem;
margin-top: 1.35rem;
padding-top: 1.15rem;
border-top: 1px solid rgba(255, 255, 255, .14);
color: var(--on-dark-txt);
font-size: var(--t-base);
}
.emergency__hours strong { color: var(--paper-2); font-weight: 600; }
.emergency__hours-mark {
flex: none;
width: 14px; height: 3px;
background: var(--hazard);
transform: translateY(-3px);
}
/* --- 22.5 Barra de ação fixa (celular) --------------------------------- */
.action-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 94;
display: none;
background: var(--paper-2);
border-top: 1px solid var(--line-2);
box-shadow: 0 -4px 20px rgba(20, 22, 26, .1);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.action-bar__item {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
min-height: 58px;
padding: .55rem .35rem;
border-left: 1px solid var(--line);
font-size: .75rem;
font-weight: 600;
color: var(--ink-2);
text-align: center;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.action-bar__item:first-child { border-left: 0; }
.action-bar__item svg { width: 19px; height: 19px; flex: none; }
.action-bar__item:hover { background: var(--paper-3); color: var(--ink); }
.action-bar__item--wa { color: var(--green); }
.action-bar__item--quote { background: var(--hazard); color: var(--ink); }
.action-bar__item--quote:hover { background: var(--hazard-deep); color: var(--ink); }
@media (max-width: 768px) {
.action-bar { display: flex; }
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
/* Com a barra fixa no rodapé, o balão do WhatsApp vira ruído duplicado. */
.fab-wa { display: none; }
.to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* Vence o `bottom: 5rem` que a faixa LGPD usava para escapar do balão. */
.lgpd { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
/* --- 22.6 Aviso de contexto no formulário ------------------------------ */
.prefill {
display: none;
gap: .9rem;
align-items: flex-start;
padding: 1rem 1.15rem;
margin-bottom: 1.25rem;
border: 1px solid var(--line-2);
border-left: 3px solid var(--hazard);
background: var(--paper-3);
}
.prefill.is-visible { display: flex; }
.prefill svg { width: 18px; height: 18px; color: var(--hazard-ink); flex: none; margin-top: 3px; }
.prefill__title {
font-size: var(--t-sm);
font-weight: 600;
color: var(--hazard-ink);
margin-bottom: .3rem;
}
.prefill p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin: 0; }
/* Falha no envio. Mesma anatomia do .prefill, cor de erro: o visitante
precisa saber que NÃO enviou, e sair daqui com outro caminho na mão. */
.form-alert {
display: flex;
gap: .8rem;
align-items: flex-start;
padding: .95rem 1.1rem;
margin-bottom: 1.5rem;
border: 1px solid var(--rust);
border-left-width: 3px;
background: rgba(211, 64, 26, .06);
}
.form-alert[hidden] { display: none; }
.form-alert svg { width: 18px; height: 18px; color: var(--rust); flex: none; margin-top: 3px; }
.form-alert__title {
font-weight: 600;
color: var(--ink);
margin: 0 0 .2rem;
font-size: var(--t-base);
}
.form-alert p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin: 0; }
.form-alert a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
/* ==========================================================================
23. CAMADA GSAP
--------------------------------------------------------------------------
Só vale quando `assets/js/anim.js` assume as animações — ele marca
. Sem GSAP (ou com movimento reduzido) a classe não
existe e todo o comportamento anterior, feito em CSS, continua valendo.
O que está aqui é desligamento, não decoração: uma transição CSS e uma
animação GSAP disputando a MESMA propriedade produzem tremor. Quem anima
passa a ser um só.
========================================================================== */
/* O GSAP escreve `opacity` e `transform` inline a cada quadro; a transição do
CSS tentaria interpolar cada uma dessas escritas. */
.js-gsap .reveal,
.js-gsap .reveal-left,
.js-gsap .reveal-scale { transition: none; }
/* Entrada do herói e zoom da fotografia migram para a linha do tempo do GSAP.
Uma animação CSS tem precedência sobre estilo inline enquanto roda — mantê-la
ligada anularia a paralaxe do scroll. */
.js-gsap .hero__inner > * { animation: none; }
.js-gsap .hero__media img { animation: none; }
/* Linhas cortadas pelo SplitText. A máscara é criada pelo próprio plugin
(`mask: "lines"`); aqui só se garante que a descida da letra não seja
aparada pelo overflow do wrapper. */
.js-gsap .hero__title .split-line { padding-bottom: .12em; }
/* Barra de progresso de leitura — fio de 2 px na base do cabeçalho.
Nasce escondida: sem GSAP não haveria nada para movê-la. */
.scroll-progress { display: none; }
.js-gsap .scroll-progress {
display: block;
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--hazard);
transform: scaleX(0);
transform-origin: 0 50%;
z-index: 5;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress { display: none !important; }
}