/* ============================================================
ADAPTAÇÃO MOBILE — abaixo de 1024px
Acima de 1024px a página é o desktop proporcionalmente
reduzido, o que css/escala.css resolve com zoom. Abaixo disso a
redução deixaria o texto ilegível, então aqui o layout é
refeito: o que era absoluto vira fluxo, as colunas empilham e
os carrosséis passam a arrastar com o dedo.
Este arquivo existe separado de css/estilos.css por uma razão
prática: lá está a transcrição fiel do desenho, aqui está a
adaptação. Mantendo a divisão, dá para reler o desenho sem
filtrar a adaptação, e vice-versa.
Escrito para 390px de largura e conferido de 360 a 1023.
O menu é o que esta marca tem a mais: no celular ele vira um
painel de tela cheia, montado a partir do mesmo HTML do
desktop.
A ordem de carregamento importa: este arquivo vem depois de
css/escala.css no HTML, porque precisa vencer o zoom que o
outro aplica. Inverter a ordem desliga o mobile inteiro.
Cores e fontes continuam vindo de css/marca.css — vários
tokens são redefinidos aqui dentro para os tamanhos de
celular, e é assim que as regras do desktop acompanham sem
serem reescritas.
O limite de 1023px é o mesmo consultado em js/script.js.
Mudar um exige mudar o outro.
============================================================ */
@media (max-width: 1023px) {
/* ---------- Fundação ---------- */
/* Solta a página dos 1920px fixos e desliga o zoom da escala */
.pagina {
width: auto;
zoom: 1;
}
:root {
/* Recuo lateral do celular. Substitui os 70px do grid desktop
em todo lugar que usa o token. */
--recuo-lateral: 24px;
/* Escala tipográfica própria. Reduzir o desktop na proporção da
tela daria 15px no título — tipografia de celular não é o
desktop dividido, é outra escala. */
--fs-display: 25vw;
--fs-h1: 30px;
--fs-olho: 13px;
--fs-botao: 16px;
--fs-corpo-destaque: 18px;
--fs-legenda: 15px;
--fs-corpo: 16px;
--fs-micro: 10px;
--lh-display: 1.02;
--lh-h1: 1.1;
--lh-olho: 20px;
--lh-botao: 20px;
--lh-corpo: 26px;
--lh-micro: 22px;
--lh-legenda: 20px;
--lh-lista-rodape: 34px;
}
.container {
max-width: none;
}
/* ---------- Botão ---------- */
.botao {
width: auto;
min-width: 180px;
height: 48px;
padding-inline: 24px;
}
/* ============================================================
CABEÇALHO E MENU
No desktop o menu está sempre aberto, centrado. Aqui ele vira
painel: o gatilho aparece, o invólucro deixa de ser
`contents` e passa a ser uma camada fixa sobre a página.
============================================================ */
.cabecalho {
height: auto;
align-items: center;
}
/* ---------- Empilhamento do painel ----------
Dois bugs com a mesma raiz: na calculadora o menu abria atrás do
cartão branco (`.calc-topo` tem z-index 0 e `.calc-painel` 2) e no
contato o selo do topo (z-index 2) ficava por cima dele.
`position: fixed` não escapa de contexto de empilhamento — o
painel fica preso no do ancestral mais próximo com z-index.
A saída é desfazer os contextos no caminho entre o cabeçalho e a
página, e deixar a ordem do DOM decidir quem pinta por cima. Onde
um irmão precisava vencer por z-index, ele já vem depois no HTML.
Tentei primeiro o contrário — subir a seção que contém o
cabeçalho com `:has()`. Funcionava para a ordem, e quebrava o
vidro fosco: o `backdrop-filter` passava a enxergar só o que
estava dentro daquela seção, e o cartão branco da calculadora
aparecia nítido atrás dos links. Contexto a menos, não a mais. */
.hero__conteudo,
.faixa-topo,
.faixa-topo__conteudo,
.quem-hero__conteudo,
.contato-hero__conteudo,
.calc-topo,
.calc-topo .container,
.calc-painel,
.quem-topo__selo {
z-index: auto;
}
/* A faixa do topo perdeu o z-index 2 que a mantinha sobre a hero do
produto, que sobe 28px por baixo dela. Em vez de devolver o
contexto, o fundo da hero desce para a camada negativa: ele passa
a ficar atrás da faixa, e o canto arredondado dela reaparece. */
.produto-hero__fundo {
z-index: -1;
}
/* ---------- O que quebrava o vidro fosco ----------
Quem cria "backdrop root" — o limite do que o `backdrop-filter`
enxerga — não é o `overflow: hidden`: é o RECORTE ARREDONDADO.
As três caixas de topo do projeto têm os dois juntos, e por isso
o desfoque via só o que estava dentro delas: no contato a foto e
o formulário apareciam nítidos atrás dos links.
A saída é quadrar os cantos enquanto o menu está aberto: o
recorte continua valendo e ninguém vê o canto, que está
debaixo do painel.
(A home nunca teve o problema porque a hero dela não recorta.) */
.pagina:has(.cabecalho__navegacao[data-aberto])
:is(.faixa-topo, .quem-hero, .contato-hero) {
border-radius: 0;
}
.cabecalho__logo {
position: relative;
z-index: 51;
margin-top: 0;
}
.cabecalho__logo img {
width: 156px;
height: 33px;
}
/* Dois riscos que viram X quando o painel abre. Área de toque de
48px, que é o mínimo confortável — os riscos são menores que
ela de propósito. */
.menu__gatilho {
position: relative;
z-index: 51;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
width: 48px;
height: 48px;
padding: 0;
margin-right: -12px; /* alinha o risco com o rail, não a área de toque */
border: 0;
background: none;
cursor: pointer;
}
.menu__gatilho span {
display: block;
width: 26px;
height: 2px;
margin-left: auto;
border-radius: 2px;
background: var(--cor-branco);
transition:
transform 260ms var(--easing-saida),
opacity 160ms linear;
}
.menu__gatilho[aria-expanded="true"] span:first-child {
transform: translateY(4.5px) rotate(45deg);
}
.menu__gatilho[aria-expanded="true"] span:last-child {
transform: translateY(-4.5px) rotate(-45deg);
}
/* O painel. `visibility` junto com a opacidade: só opacidade
deixaria os links clicáveis com o painel fechado. */
.cabecalho__navegacao {
display: flex;
position: fixed;
inset: 0;
z-index: 50;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 48px;
padding: 96px var(--recuo-lateral) 48px;
/* Mesmo fundo do hero e da coluna de produto. A caixa é
`inset: 0`, ou seja, tem a altura visível — então as paradas
do token servem direto, sem remapear.
A cor chapada fica junto como rede de segurança: o painel
cobre a tela inteira, e se o gradiente não pintar por qualquer
motivo a página apareceria por trás dos links. */
background-color: var(--fundo-vertical-topo);
background-image: var(--grad-fundo-vertical);
opacity: 0;
visibility: hidden;
transition:
opacity 260ms var(--easing-saida),
visibility 0ms linear 260ms;
}
.cabecalho__navegacao[data-aberto] {
opacity: 1;
visibility: visible;
transition-delay: 0ms;
}
/* Vidro fosco: a hero aparece por trás, desfocada.
O `@supports` não é zelo excessivo — sem ele, num navegador sem
`backdrop-filter` o painel ficaria translúcido e sem desfoque
nenhum, com os links por cima da hero nítida. Ilegível. Fora do
bloco o fundo continua opaco; dentro dele vira vidro.
O cabeçalho é `position: relative` dentro da hero e não gruda no
topo, então o hambúrguer só é alcançável com a página no topo —
o que está atrás do painel é sempre a hero. Se um dia o
cabeçalho virar sticky, isso deixa de valer e a decisão volta à
mesa: o painel passaria a desfocar qualquer seção.
O prefixo `-webkit-` é obrigatório: o Safari do iPhone só
entende a versão prefixada, e é justamente onde isso mais vai
ser visto. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.cabecalho__navegacao {
background-color: transparent;
background-image: linear-gradient(
180deg,
rgba(0, 8, 44, 0.85) 0%,
rgba(0, 8, 44, 0.85) 37.2%,
rgba(27, 69, 103, 0.85) 66.3%,
rgba(27, 69, 103, 0.85) 100%
);
/* 28px bastavam quando o que ficava atrás era sempre a hero — um
degradê liso, que borrado continua igual. Agora o painel
cobre a tela em qualquer página, e atrás dele pode estar o
cartão branco da calculadora, cheio de texto de 15px. Desfoque
mata frequência alta: dobrar o raio apaga o texto de trás sem
mudar em nada a aparência de um degradê. */
-webkit-backdrop-filter: blur(56px);
backdrop-filter: blur(56px);
}
}
/* O 0,72 do véu é calibrado, não chutado. O balde da hero fica
desfocado bem na faixa dos itens do menu, e os itens inativos
são branco a 60% — o par mais frágil da tela. Com 0,62 o
"CONTATO" media 4,63 de contraste, 0,13 acima do mínimo AA:
margem que some quando a tela tem outra altura e o borrão do
balde cai noutro lugar. Medir de novo se o véu, o desfoque ou a
posição do balde mudarem. */
.menu {
position: static;
transform: none;
flex-direction: column;
align-items: center;
gap: 28px;
}
.menu a {
font-size: 22px;
line-height: 1.2;
/* O item inativo do menu usa branco a 85%, e não a 60% como no
desktop.
O painel é `fixed` e deixa a página aparecer desfocada por
trás, então o que fica atrás dele muda de página para
página, inclusive fundos claros. A 60% o texto não
sustentaria o contraste mínimo sobre um fundo claro.
Este texto tem 22px em peso 500, que pelo WCAG não conta
como texto grande: a régua é 4,5 e não 3,0. Ao clarear o
véu ou o texto, remeça o contraste sobre a página mais clara
do site.
A página atual continua distinta do resto por ser branco
cheio e ter o risco embaixo. */
color: rgba(255, 255, 255, 0.85);
}
.menu a[aria-current]::after {
bottom: -6px;
}
.cabecalho__navegacao .botao {
width: 100%;
max-width: 320px;
}
/* Com o painel aberto a página não rola por baixo */
body:has(.cabecalho__navegacao[data-aberto]) {
overflow: hidden;
}
/* ============================================================
SEÇÃO 1 · HERO
============================================================ */
/* Altura livre, com o piso de uma tela. `svh` e não `vh`: no
celular a barra do navegador recolhe e `vh` daria um salto. */
.hero {
height: auto;
min-height: 100svh;
display: flex;
flex-direction: column;
}
/* ---------- Camadas de fundo ----------
TODAS as quatro são definidas em pixels de 1920 no estilos.css:
o escurecimento é um radial centrado em x: 960px, o brilho em
1176px, e a máscara é um SVG de 1920 × 1211. Numa caixa de 360px
o centro cai fora da tela e o que sobra é um pedaço quase chapado
— o escurecimento vira preto sólido, por exemplo.
Aqui as quatro ganham a mesma geometria em porcentagem. O radial
do Figma é sempre da mesma família: centro em (960, 73,5) de uma
caixa 1920 × 1211, raios de 1803 × 1137 — ou seja, `at 50% 6.07%`
com raios de 93,9%.
E, tão importante quanto: as caixas passam da altura do hero, como
no desktop (1211 contra 1003). É esse transbordo que faz o fundo
escuro morrer aos poucos em vez de terminar numa linha reta em
cima da seção seguinte. */
/* As três caixas transbordam, mas cada uma com a sua altura. No
desktop elas podem transbordar 208 e 418px porque o vão até o
texto da seção seguinte é de 489px. No celular esse vão é de
140px, e manter a proporção do desktop jogaria o fundo escuro em
cima do texto da seção 2 — foi o que aconteceu.
Então o que se mantém é a ordem em que cada camada morre, e o
ponto em que a máscara zera (104,7% da altura do hero, como lá).
O resto é comprimido para caber no vão:
A ORDEM importa mais que os números. No desktop o brilho morre
DEPOIS do escurecimento (1421 contra 1211): por isso a cauda do
hero é azul e vai clareando. Invertendo a ordem, o escurecimento
sobrevive sozinho sobre o branco da página e a cauda vira cinza,
que é errado.
máscara zera em hero + 34 (o balde e a foto somem)
escurecimento zera em hero + 70
brilho zera em hero + 97, mais a cauda do desfoque
texto da 2 começa em hero + 145 */
.hero__mascara {
left: 0;
top: 0;
width: 100%;
height: 121%;
}
/* O escurecimento fica escondido atrás da foto, como no desktop —
ele é preto opaco do centro até 69,137% da caixa, transparente só
nos cantos. Quem o revela é a máscara: ao dissolver a foto, o
preto aparece por baixo, e só depois ele mesmo morre e entrega o
azul do brilho. Essa é a escada de três degraus do pé do hero.
Sem a foto por cima ele vira a camada de topo e o hero fica quase
preto — foi o que aconteceu na primeira versão desta seção. */
.hero__escurecimento {
left: 0;
top: 0;
width: 100%;
height: 110%;
background-image: radial-gradient(
93.9% 93.9% at 50% 6.07%,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 69.137%,
rgba(0, 0, 0, 0) 100%
);
}
/* A máscara: é ela que dissolve o pé do balde.
O ponto onde ela zera é o do Figma, 85,885% — é o que põe o
desaparecimento em 104,7% da altura do hero, como no desktop.
O ponto onde ela começa não pode ser: no desktop o degradê
abre em 60,5%, e como lá o balde nasce a 42% da altura do hero
só o terço de baixo dele entra no esvanecimento. Aqui o hero é
curto, o texto ocupa a metade de cima e o balde nasce a 72% —
com 60,5% ele entraria quase inteiro no degradê e apareceria
lavado, e não dissolvendo.
73% devolve a leitura do desktop: sólido até dois terços da
parte visível, dissolvendo no último terço. */
/* O raio horizontal é 175%, não os 93,9% do desktop, e é isso que
salva o balde.
A máscara é um radial: quanto mais longe do centro em X, mais cedo
ela apaga em Y. No desktop o balde tem 759px numa caixa de 1920, ou
seja, a borda dele está a 0,227 do raio-x — a curvatura mal se nota
e ele dissolve só no terço de baixo. No celular o balde ocupa quase
a largura toda: a borda ficava a 0,42 do raio-x, a máscara mordia
pelos lados e o balde sumia a partir de 30% da altura. Era esse o
"balde quase todo escondido".
Com 175% (683px numa tela de 390) a borda do balde volta a 0,227 —
a mesma proporção do desktop. As paradas verticais não mudam, então
o pé do hero continua morrendo onde morria: 105% da altura dele.
Ao portar esta máscara para outra caixa, o que se compara é
quanto do raio horizontal o objeto ocupa — não a altura. */
.hero__mascara {
-webkit-mask-image: radial-gradient(
175% 93.9% at 50% 6.07%,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 73%,
rgba(0, 0, 0, 0) 85.885%);
mask-image: radial-gradient(
175% 93.9% at 50% 6.07%,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 73%,
rgba(0, 0, 0, 0) 85.885%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* O fundo do hero no celular é o mesmo gradiente vertical usado
nas colunas de produto, em vez da foto do desktop.
Isso vale só para o campo de cor. O esvanecimento do pé do
hero continua como no desktop, com máscara, escurecimento e
brilho nessa ordem — a ordem importa, porque é o brilho que
sobrevive por último e dá a cor do rastro.
As cores e a origem estão no `--grad-fundo-vertical`, no
css/marca.css. Aqui as paradas são outras, pelo seguinte:
A coluna de produto e o painel do menu têm caixa da altura
visível, então as paradas do token servem direto neles. O hero
tem 700 de altura visível numa caixa de 847 — ela transborda
121% para o esvanecimento existir. Então as paradas dele são
calculadas sobre os 700 visíveis, e a cor final segura até o
fim da caixa:
37,2% de 700 = 260px = 30,7% de 847
66,3% de 700 = 464px = 54,8% de 847
Como o gradiente é opaco, ele segue escondendo o escurecimento
dentro do hero, exatamente como a foto fazia. A caixa continua
dentro da máscara, então ele se dissolve junto com o balde.
A FOTO SAI e a ELIPSE SAI: as duas existem para dar cor e luz
lateral, e este gradiente não tem variação horizontal nenhuma —
a elipse voltaria a ser um facho onde o desenho não tem. */
.hero__foto {
left: 0;
top: 0;
width: 100%;
height: 100%; /* a caixa vive dentro da máscara, que já tem 121% */
background-image: linear-gradient(
180deg,
var(--fundo-vertical-topo) 0%,
var(--fundo-vertical-topo) 30.7%,
var(--fundo-vertical-base) 54.8%,
var(--fundo-vertical-base) 100%
);
}
.hero__foto img {
display: none;
}
/* Caixa e desfoque proporcionais ao desktop: lá são 2352 × 1483 em
-216/-62 com blur de 127 sobre 2352 de largura (5,4%). */
.hero__glow {
left: -11.25%;
top: -6.18%;
width: 122.5%;
height: 120%;
filter: blur(24px);
background-image: radial-gradient(
93.9% 93.9% at 50% 6.07%,
rgba(0, 37, 65, 1) 0%,
rgba(0, 50, 89, 1) 17.284%,
rgba(0, 64, 114, 1) 34.568%,
rgba(0, 91, 163, 1) 69.137%,
rgba(19, 95, 155, 0.875) 72.995%,
rgba(38, 100, 147, 0.75) 76.853%,
rgba(77, 109, 131, 0.5) 84.568%,
rgba(154, 127, 99, 0) 100%
);
}
/* 1695 × 1632 em -692/-658 no desktop; blur de 52 sobre 1695 (3,1%).
O gradiente dela já é proporcional (`at 50% 50%`). */
/* A elipse sai. Ela é luz LATERAL, feita para dar relevo à foto;
sobre um gradiente sem variação horizontal ela vira um facho no
meio da tela que o desenho não tem. */
.hero__elipse {
display: none;
}
/* O letreiro de fundo é uma arte de 1858px de largura: no celular
ele viraria um borrão de uma letra só. Some. */
.hero__letreiro-fundo {
display: none;
}
/* O balde encosta no pé do hero e é cortado por ele — é o mesmo
gesto do desktop, onde a base do mockup sai da tela. O `bottom`
negativo é o que garante o corte mesmo em tela alta. */
/* O balde é dimensionado em unidade de viewport, e não em px, e
é isso que o faz se comportar igual em qualquer aparelho.
A máscara escala com o hero, que ocupa a tela inteira. Com o
balde num tamanho fixo, a proporção entre os dois mudaria a
cada altura de janela e o esvanecimento pegaria o balde num
ponto diferente em cada aparelho. Na mesma unidade, os dois
crescem juntos e o efeito se mantém. */
.hero__balde {
left: 50%;
top: max(430px, 50svh);
bottom: auto;
width: auto;
max-width: 92vw;
height: clamp(320px, 52svh, 440px);
transform: translateX(-50%);
pointer-events: none; /* a caixa passa por cima do CTA */
}
/* Abaixo de 388px o parágrafo do hero ganha uma linha e o cta desce
de 447 para 480 — em 320px vai a 506. O piso do balde acompanha,
senão ele encosta no botão nos aparelhos estreitos.
O 388 é onde a quebra vira, medido de 10 em 10px. Mudou o texto do
hero, remedir: é a quebra que manda neste número, não a tela. */
@media (max-width: 388px) {
.hero__balde {
top: max(492px, 50svh);
}
}
.hero__conteudo {
display: flex;
flex-direction: column;
flex: 1;
padding-top: 55px;
padding-bottom: 40px;
}
/* O texto todo sobe e fica junto da chamada; o balde ocupa o pé da
tela e é cortado pela borda de baixo, como no desktop. */
.hero__chamada { order: 0; }
.hero__texto { order: 1; }
.hero__chamada {
width: auto;
gap: 16px;
margin-top: 48px;
}
/* A faixa do olho tem 449px de largura fixa no desktop e não cabe.
Vira largura livre, com o mesmo degradê e um respiro nas pontas. */
.hero__olho {
width: 100%;
height: auto;
padding: 8px 12px;
white-space: normal;
}
.hero__titulo {
text-align: center;
}
/* Tudo o que é leitura fica no pé, como na Group: o `auto` empurra
o bloco para baixo e a foto ganha o miolo da tela. */
.hero__texto {
width: auto;
margin-top: 28px;
align-items: center;
gap: 24px;
text-align: center;
}
/* Some a altura fixa da caixa do Figma: aqui o texto quebra em
mais linhas e precisa do espaço que ocupar. */
.hero__texto p {
width: auto;
height: auto;
}
.hero__texto .botao,
.cabecalho .botao--verde {
width: 100%;
max-width: 290px;
}
.hero__display {
display: none;
}
/* ============================================================
SEÇÃO 2 · DA MATÉRIA AO HABITAT
============================================================ */
/* A altura de 887px é a caixa do Figma; aqui quem manda é o texto.
O vão de 132px não é respiro decorativo: é onde o escurecimento
do hero, que transborda 20,7% da altura dele, termina de morrer.
Com 72px a seção começava em cima do fundo ainda escuro. */
.materia {
height: auto;
margin-top: 145px;
}
.materia__bloco {
gap: 24px;
padding-top: 0;
}
.materia__olho {
height: auto;
}
.materia__titulos {
gap: 12px;
}
.materia__titulo {
width: 100%;
}
/* O
foi desenhado para uma caixa de 956px. Numa coluna de 342
ele deixa a segunda linha solta — aqui o texto quebra sozinho. */
.materia__titulo br {
display: none;
}
.materia__corpo {
width: 100%;
}
/* Todo bloco de texto corrido no mesmo tamanho. No desktop cada um
tem o seu (22px aqui, 24 no "nosso jeito"), o que faz sentido em
1920px de largura; numa coluna de 342 a diferença vira só texto
grande demais. Headline e subheadline continuam com a escala
delas. */
.materia__corpo,
.jeito__corpo,
.imprensa__fecho {
font-size: var(--fs-corpo);
line-height: var(--lh-corpo);
}
/* ============================================================
SEÇÃO 3 · PRODUTOS
============================================================ */
/* No desktop a seção sobe 290px sobre a anterior e as colunas ficam
lado a lado em posição absoluta. Aqui tudo volta para o fluxo. */
.produtos {
height: auto;
margin-top: 72px;
padding-bottom: 0;
/* Os baldes não afundam no celular: empilhados, cada coluna é um
bloco seu, e o balde de uma sumiria atrás da seguinte — o que
no desktop lê como profundidade e aqui leria como erro. */
--parallax-balde: 0px;
}
/* O selo é decorativo e no celular só atrapalharia a chamada */
.produtos__selo {
display: none;
}
/* O divisor e a chamada saíam do posicionamento absoluto e perdiam
o recuo lateral junto. Recolocado no próprio elemento. */
.produtos__divisor {
position: relative;
left: auto;
top: auto;
width: calc(100% - var(--recuo-lateral) * 2);
margin: 0 var(--recuo-lateral) 32px;
}
/* Centrada no celular. No desktop ela encosta no rail de 70px, que
é o grid da página; numa coluna de 342 o alinhamento à esquerda
deixa a chamada solta em relação aos blocos, que são centrados. */
.produtos__chamada {
position: relative;
left: auto;
top: auto;
align-items: center;
gap: 12px;
margin: 0 var(--recuo-lateral) 40px;
text-align: center;
}
.produtos__olho {
height: auto;
}
.produtos__titulo {
width: 100%;
}
.produtos__titulo br {
display: none;
}
/* De três colunas para uma pilha.
A linha é maior que o bloco de propósito. Com linha e bloco do
mesmo tamanho, o seguinte começa a cobrir no instante em que o
atual termina de entrar — e o balde, que fica no pé, some antes
de ser visto. Os 30svh a mais são o tempo em que o bloco fica
parado e inteiro na tela antes de o próximo subir. */
/* `dvh`, e não `svh`, para blocos que precisam cobrir a tela.
`svh` é a altura da janela com a barra do navegador visível, e
essa barra recolhe assim que o usuário rola — o bloco fica
menor que a tela e aparece uma sobra do fundo embaixo dele.
`dvh` acompanha a janela de verdade, que é o que "ocupar a
tela inteira" quer dizer.
O `svh` fica declarado antes como reserva para navegador que
não conheça `dvh`: lá a sobra volta, mas nada quebra.
A regra inversa vale para o que é desenho dentro do bloco:
esse usa `svh`, senão muda de tamanho na mão do usuário
enquanto a barra recolhe. */
.produtos__grade {
position: relative;
left: auto;
top: auto;
width: 100%;
grid-template-columns: 1fr;
grid-auto-rows: 130svh;
grid-auto-rows: 130dvh;
align-items: start;
}
/* Cada produto gruda no topo e o seguinte sobe por cima dele —
o mesmo empilhamento que a Group usa nos carrosséis. Funciona
porque cada bloco tem uma tela de altura e fundo opaco: quando
o de baixo termina de cobrir, a área do de cima acabou. */
.produto {
position: sticky;
top: 0;
height: 100svh;
height: 100dvh;
min-height: 100svh;
min-height: 100dvh;
padding: 56px var(--recuo-lateral) 0;
text-align: center;
}
/* Quem pediu para não animar vê a pilha como uma lista */
@media (prefers-reduced-motion: reduce) {
.produtos__grade {
grid-auto-rows: auto;
}
.produto {
position: relative;
}
}
.produto__texto {
align-items: center;
}
.produto__botao {
margin-inline: auto;
}
/* `relative` e não `static`: a arte de fundo é elemento posicionado
e pintaria por cima de bloco comum. Mesma armadilha de sempre. */
.produto__texto,
.produto__botao {
position: relative;
z-index: 1;
left: auto;
top: auto;
}
.produto__texto {
gap: 16px;
}
.produto__nome {
width: 100%;
height: auto;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
}
.produto__descricao {
width: 100%;
}
.produto__botao {
margin-top: 28px;
width: 100%;
max-width: 245px;
}
/* O balde encosta no pé do bloco e é cortado por ele, como no
desktop, onde a base do mockup sai da coluna. */
/* `svh` e não `dvh`: a coluna preenche a tela e por isso é `dvh`,
mas o balde é desenho dentro dela — em `dvh` ele crescia enquanto
o usuário rolava, junto com a barra do navegador recolhendo. */
.produto__balde {
left: 50%;
top: auto;
bottom: -56px;
width: auto;
height: clamp(340px, 58svh, 520px);
transform: translateX(-50%);
}
/* ============================================================
SEÇÃO 4 · NOSSO JEITO DE FAZER
============================================================ */
.jeito {
height: auto;
min-height: 760px;
margin-top: 0;
}
/* A foto sangra 15px no desktop; aqui acompanha a caixa.
A máscara também é refeita. A do desktop é transparente nos 25%
de cima — numa seção de 1295px isso são 324px de folga, de sobra
para o texto. Encolhida para 760 viram 190, e o corpo do texto
cai em cima da foto. Aqui a foto só começa depois da metade.
Sem a vinheta lateral: ela existe para esconder a borda de um
retângulo que sangra, e aqui a foto ocupa a largura inteira. */
.jeito__foto {
left: 0;
width: 100%;
-webkit-mask-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 46%,
rgba(0, 0, 0, 0.3) 62%,
rgba(0, 0, 0, 0.7) 78%,
rgba(0, 0, 0, 1) 92%);
mask-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 46%,
rgba(0, 0, 0, 0.3) 62%,
rgba(0, 0, 0, 0.7) 78%,
rgba(0, 0, 0, 1) 92%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
.jeito__conteudo {
padding: 56px var(--recuo-lateral) 0;
}
.jeito__titulo,
.jeito__corpo {
width: 100%;
}
.jeito__titulo {
margin-top: 12px;
}
.jeito__corpo {
margin-top: 28px;
}
.jeito__botao {
margin-top: 32px;
width: 100%;
max-width: 290px;
}
/* ============================================================
SEÇÃO 5 · PADRÕES DE QUALIDADE
============================================================ */
/* Bloco reaproveitado da seção 7 da Group, linha a linha: no celular
os três cards viram uma fila que se arrasta, um por vez, com os
vizinhos espiando nas bordas. Arrasto por scroll-snap nativo. */
.imprensa {
height: auto;
padding-block: 56px 64px;
display: flex;
flex-direction: column;
gap: 36px;
}
.imprensa__chamada,
.imprensa__fecho {
position: relative;
z-index: 1;
left: auto;
top: auto;
transform: none;
width: 100%;
padding-inline: var(--recuo-lateral);
}
.imprensa__olho {
height: auto;
}
/* As quebras manuais foram desenhadas para uma caixa de 957px. O
espaço antes de cada
no HTML é o que separa as frases quando
ele some — sem ele as palavras colariam. */
.imprensa__fecho br {
display: none;
}
.imprensa__titulo {
width: 100%;
}
.imprensa__cards {
position: relative;
z-index: 1;
left: auto;
top: auto;
transform: none;
width: 100%;
height: auto;
display: flex;
gap: 16px;
padding-inline: 28px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 28px;
scrollbar-width: none;
}
.imprensa__cards::-webkit-scrollbar {
display: none;
}
.card,
.card--esq,
.card--dir,
.card--centro,
.card--oculto {
position: relative;
left: auto;
top: auto;
flex: 0 0 auto;
width: calc(100vw - 96px);
max-width: 320px;
height: auto;
aspect-ratio: 522.69 / 652;
scroll-snap-align: center;
opacity: 1;
visibility: visible;
z-index: auto;
transition: none;
}
.card--centro .card__botao {
border: 0;
}
.card--esq .card__botao::after,
.card--dir .card__botao::after,
.card--centro .card__botao::after {
background-image:
linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.74) 92%),
linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.card--esq .card__legenda,
.card--dir .card__legenda,
.card--centro .card__legenda {
left: 20px;
bottom: 20px;
width: calc(100% - 40px);
}
.card--esq .card__selo,
.card--dir .card__selo,
.card--centro .card__selo {
left: 18px;
top: 10px;
width: 62%;
height: auto;
}
.card--centro .card__foto {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cards__indicadores {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
}
/* ============================================================
RODAPÉ
============================================================ */
.rodape {
height: auto;
padding-block: 64px 40px;
}
.rodape__brilho,
.rodape__escuro {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* As elipses do desktop foram desenhadas para 2796 × 2093. Numa
coluna de 390 elas viram bolhas — a mesma leitura (claro em cima,
aço no meio, escuro no pé) sai de gradientes verticais.
O que importa: daqui para baixo o conteúdo é branco. Onde o fundo
não escurecer, ele some. */
.rodape__brilho {
filter: blur(60px);
background-image: linear-gradient(
180deg,
rgba(53, 85, 112, 0) 0%,
rgba(53, 85, 112, 0.45) 10%,
rgba(53, 85, 112, 0.95) 19%,
rgba(53, 85, 112, 0.55) 28%,
rgba(12, 26, 38, 0) 40%
);
}
.rodape__escuro {
background-image: linear-gradient(
180deg,
rgba(21, 46, 68, 0) 6%,
rgba(21, 46, 68, 0.55) 15%,
var(--fundo-rodape-centro) 27%,
var(--fundo-rodape-borda) 55%,
var(--fundo-rodape-borda) 100%
);
}
.rodape__selo {
position: relative;
left: auto;
top: auto;
width: 190px;
height: 186px;
margin: 0 auto 40px;
}
.rodape__conteudo {
position: relative;
z-index: 1;
left: auto;
top: auto;
width: 100%;
padding-inline: var(--recuo-lateral);
}
.rodape__marca {
height: 74px;
}
/* Troca das duas artes do emblema — ver o comentário no HTML */
.rodape__emblema--desktop {
display: none;
}
.rodape__emblema--claro {
display: block;
}
/* Quem manda é o `aspect-ratio`: fixar largura E altura em
porcentagem achata a arte, que tem proporção própria. */
.rodape__emblema {
height: 74px;
width: auto;
aspect-ratio: 48.75 / 48;
}
.rodape__letreiro {
left: 24.97%;
top: 21.72%;
width: 75.03%;
height: auto;
aspect-ratio: 173.4 / 28.3;
}
.rodape__corpo {
gap: 40px;
margin-top: 40px;
}
.rodape__topo {
width: 100%;
gap: 34px;
}
/* Os dois logos ficam lado a lado, como na Group — só encolhem até
caber nos 342px da coluna. */
.rodape__logos {
gap: 16px;
}
.rodape__logo-group {
width: 118px;
height: 24.98px; /* 118 × 53,7/253,7 */
}
.rodape__logo-marca {
width: 128px;
height: 27.15px; /* 128 × 58,6/276,3 */
}
.rodape__divisor-vert {
height: 40px;
}
.rodape__texto {
height: auto;
}
.rodape__botao {
width: 100%;
max-width: 290px;
}
/* Quatro colunas não cabem lado a lado. Duas voltam a partir de
600px, no bloco no fim deste arquivo. */
.rodape__colunas {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
width: 100%;
}
.coluna--navegue,
.coluna--contato,
.coluna--onde,
.coluna--social {
width: auto;
}
.coluna {
gap: 16px;
}
.coluna__lista,
.coluna--navegue .coluna__lista {
height: auto;
white-space: normal;
/* O e-mail é uma palavra só de 26 caracteres e não cabe em 360px.
`anywhere` deixa quebrar dentro dela em vez de sair da tela. */
overflow-wrap: anywhere;
}
.rodape__social {
gap: 18px;
}
.rodape__divisor,
.rodape__copyright {
width: 100%;
}
.rodape__divisor {
margin-top: 40px;
}
/* ---------- Botão flutuante de WhatsApp ---------- */
/* No desktop ele fica em 73/56. Aqui encostava no botão do hero. */
.whatsapp {
right: 16px;
bottom: 16px;
}
.whatsapp img {
width: 52px;
height: 53px;
}
/* ============================================================
PÁGINAS DE PRODUTO
============================================================
Três páginas com o mesmo gabarito: Cimento Queimado, Tinta
Emborrachada e Granilite Fulget. O cabeçalho e o rodapé já vêm
prontos dos blocos compartilhados lá de cima — aqui só as
seções próprias.
============================================================ */
/* ---------- Faixa escura do topo ---------- */
/* No desktop ela tem 178px e o brilho é uma caixa de 2352 x 1483
ancorada em px. O token do brilho virou porcentagem no marca.css,
então a mesma geometria vale aqui: o que muda é só a caixa. */
.faixa-topo {
height: auto;
border-radius: 0 0 28px 28px;
}
.faixa-topo__brilho {
left: -11.25%;
top: -114%;
width: 122.5%;
height: 833%;
}
.faixa-topo__conteudo {
padding-block: 14px 22px;
}
/* ---------- Seção 1 · hero do produto ---------- */
/* No desktop tudo é absoluto dentro de uma caixa de 1053px, com o
balde à direita. Aqui vira uma coluna, e a ordem muda: o balde
sobe para logo depois do nome, que é como se lê uma página de
produto no celular — nome, foto, descrição, ação.
O `display: contents` no invólucro é o que permite isso: sem ele
o balde é irmão do bloco de texto e não teria como entrar no meio
dele. Mesmo truque do `.cabecalho__navegacao`. */
.produto-hero {
height: auto;
margin-top: -28px; /* o mesmo raio da faixa, para ter fundo atrás da curva */
display: flex;
flex-direction: column;
align-items: center;
padding: 56px var(--recuo-lateral) 0;
text-align: center;
}
.produto-hero__conteudo {
display: contents;
}
.produto-hero__olho { order: 1; }
.produto-hero__titulo { order: 2; }
.produto-hero__balde { order: 3; }
.produto-hero__corpo { order: 4; }
.produto-hero__comprar { order: 5; }
.produto-hero__selos { order: 6; }
.produto-hero__olho,
.produto-hero__titulo,
.produto-hero__corpo,
.produto-hero__comprar,
.produto-hero__selos {
position: relative;
left: auto;
top: auto;
width: 100%;
}
.produto-hero__fundo {
height: 100%;
}
/* Decorativa a 4% de opacidade: no desktop ela dá textura atrás do
balde. Num recorte de 342px sobra um pedaço sem leitura. */
.produto-hero__mandala {
display: none;
}
.produto-hero__olho {
font-size: var(--fs-olho);
line-height: var(--lh-olho);
}
/* Maior que os outros títulos de propósito, e é isso que o faz
quebrar em duas linhas como no desktop. Não é só estética: o
gradiente do título vai do azul profundo ao cinza claro, e numa
linha só a segunda palavra cai inteira na ponta clara e some
contra o fundo. Em duas linhas a parte clara fica no canto
inferior direito, como o desenho. */
.produto-hero__titulo {
margin-top: 10px;
font-size: clamp(30px, 10.5vw, 41px);
line-height: 1.05;
}
/* Centrado e com largura contida: em cima ele é um objeto de 583px
encostado na direita, aqui é a foto do produto. */
.produto-hero__balde {
position: relative;
left: auto;
top: auto;
align-self: center;
width: auto;
max-width: 68%;
height: auto;
margin-block: 24px 4px;
}
.produto-hero__corpo {
font-size: var(--fs-corpo);
line-height: var(--lh-corpo);
}
.produto-hero__comprar {
align-self: center;
width: auto;
min-width: 200px;
height: 48px;
margin-top: 28px;
}
/* Quatro selos em linha ocupam 668px no desktop. Aqui viram duas
colunas — e é `grid`, não `flex`, para que os quatro rótulos
fiquem na mesma linha de base mesmo quando um quebra em duas. */
.produto-hero__selos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 16px;
margin-top: 44px;
}
.selo {
width: 100%;
gap: 12px;
}
.selo__disco {
width: 84px;
height: 84px;
}
.selo__icone {
width: auto;
height: auto;
transform: translate(-50%, -50%) scale(0.8);
}
/* A largura por selo existe no desktop para reproduzir a quebra do
Figma. Numa coluna estreita ela seria o que estoura a célula. */
.selo__rotulo {
width: 100%;
font-size: 14px;
line-height: 18px;
}
/* ---------- Seção 2 · veja na prática ---------- */
/* O fundo desta seção é um degradê que começa em `--fundo-claro`, e
a emenda com a seção de cima lê como uma linha divisória. Sem
respiro, a chamada nascia colada nessa linha e os cards morriam
colados no fim do bloco. O `padding` é do lado de dentro de
propósito: o fundo tem `height: 100%` e cresce junto, então o
respiro fica dentro da faixa clara, e não entre ela e a anterior. */
.produto-veja {
height: auto;
margin-top: 56px;
padding-block: 52px 56px;
}
.produto-veja__fundo {
left: 0;
width: 100%;
height: 100%;
}
.produto-veja__chamada {
padding: 0 var(--recuo-lateral);
}
.produto-veja__titulo,
.produto-cores__titulo {
width: 100%;
margin-top: 12px;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
}
.produto-veja__olho,
.produto-cores__olho {
line-height: var(--lh-olho);
}
/* Os dois cards de 760px ficam lado a lado no desktop. Empilhados,
e em retrato: a foto tem `object-fit: cover` e o texto mora no pé,
então um card baixo e largo não teria onde caber o nome. */
.aplicacoes {
position: relative;
left: auto;
top: auto;
flex-direction: column;
gap: 16px;
margin-top: 36px;
padding-inline: var(--recuo-lateral);
}
.aplicacao,
.aplicacoes--unica .aplicacao {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
}
/* O segundo card do Cimento é `scaleMode: CROP` no Figma: a imagem
transborda a caixa com deslocamento próprio, calculado para 760 x
729. Noutra proporção esse enquadramento não quer dizer nada —
volta a ser `cover`, que recorta pelo centro. */
.aplicacao--ambientes .aplicacao__foto {
inset: 0;
left: auto;
top: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.aplicacao__texto {
left: 24px;
right: 24px;
bottom: 26px;
}
/* As larguras por card vêm do Figma e decidem a quebra numa caixa
de 760px. Aqui quem decide é a coluna. */
.aplicacao__nome,
.aplicacao__descricao {
width: 100%;
}
/* Fluido porque a linha mais longa do conjunto — "ÁREAS INTERNAS E"
— é o que decide: em 34px ela mede 292 numa caixa de 294, e num
aparelho de 360 estouraria. O `clamp` amarra a medida à largura
real em vez de apostar num aparelho. */
.aplicacao__nome {
font-size: clamp(24px, 7.6vw, 32px);
line-height: 1.05;
letter-spacing: -1px;
}
.aplicacao__descricao {
margin-top: 18px;
font-size: var(--fs-legenda);
line-height: 22px;
}
/* ---------- Seção 3 · cores disponíveis ---------- */
/* Só no Cimento Queimado e no Granilite Fulget. */
.produto-cores {
height: auto;
margin-top: 0;
padding-block: 56px 56px;
}
.produto-cores__chamada {
padding: 0 var(--recuo-lateral);
}
/* Seis colunas viram duas. O nome continua em `nowrap` — é ele que
garante a linha única que o desenho tem —, então a pílula manda
na largura mínima da coluna e o corpo encolhe para caber. */
.cores {
position: relative;
left: auto;
top: auto;
width: 100%;
/* `minmax(0, 1fr)` e não `1fr`: o piso automático de `1fr` é o
min-content, então uma pílula longa do Granilite ("Barra de
chocolate") esticava a coluna para 159px numa tela de 320 e a
grade estourava sem avisar. */
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
gap: 32px 14px;
margin-top: 36px;
padding-inline: var(--recuo-lateral);
}
.cor {
gap: 14px;
}
.cor__amostra {
width: 100%;
height: 74px;
}
/* No desktop `nowrap` é o que garante a linha única do desenho, com
a pílula abraçando o texto. Numa célula de 129px isso é impossível
para os nomes longos do Granilite — aqui ela deixa de abraçar,
ocupa a coluna e o nome quebra quando precisa. */
.cor__rotulo {
min-width: 0;
width: 100%;
height: auto;
min-height: 42px;
padding: 8px 10px;
white-space: normal;
text-align: center;
font-size: 13px;
line-height: 18px;
}
/* ---------- Seção 4 · aplicações reais ---------- */
/* Mesmo carrossel dos cards de imprensa, e por isso mesmo
tratamento: no celular os três viram uma fila que se arrasta,
com `scroll-snap`. As regras de `.card--*` genéricas lá de cima
não bastam — as do desktop são escopadas em `.reais__cards` e
têm especificidade maior. */
.produto-veja + .produto-reais,
.produto-cores + .produto-reais {
margin-top: 0;
}
.produto-reais {
height: auto;
padding-block: 48px 56px;
display: flex;
flex-direction: column;
gap: 24px;
}
.reais__cards {
position: relative;
left: auto;
top: auto;
transform: none;
width: 100%;
height: auto;
display: flex;
gap: 16px;
padding-inline: 28px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 28px;
scrollbar-width: none;
}
.reais__cards::-webkit-scrollbar {
display: none;
}
.reais__cards .card--esq,
.reais__cards .card--dir,
.reais__cards .card--centro,
.reais__cards .card--oculto {
position: relative;
left: auto;
top: auto;
flex: 0 0 auto;
width: calc(100vw - 96px);
max-width: 320px;
height: auto;
aspect-ratio: 1457.87 / 1006;
scroll-snap-align: center;
opacity: 1;
visibility: visible;
z-index: auto;
transition: none;
}
.reais__cards .card--esq .card__botao,
.reais__cards .card--dir .card__botao,
.reais__cards .card--centro .card__botao {
border: 0;
border-radius: 16px;
cursor: pointer;
}
.reais__cards .card--esq .reais__texto,
.reais__cards .card--dir .reais__texto,
.reais__cards .card--centro .reais__texto {
left: 20px;
top: auto;
bottom: 18px;
width: calc(100% - 40px);
}
/* Os dois são ``. No desktop eles ficam empilhados porque a
caixa de 560px não comporta os dois na mesma linha; numa caixa de
280 o nome é que quebra, e o olho fica pendurado ao lado dele.
Aqui o empilhamento é declarado, não sorteado pela largura. */
.reais__olho,
.reais__nome {
display: block;
}
.reais__cards .card--esq .reais__olho,
.reais__cards .card--dir .reais__olho,
.reais__cards .card--centro .reais__olho {
font-size: 12px;
line-height: 16px;
}
.reais__cards .card--esq .reais__nome,
.reais__cards .card--dir .reais__nome,
.reais__cards .card--centro .reais__nome {
margin-top: 6px;
font-size: 28px;
line-height: 30px;
}
/* No desktop as barras ficam sobre o card do centro. Numa fila que
se arrasta não existe "o do centro" fixo, então elas descem para
baixo da fila, como na seção de imprensa. */
.produto-reais .cards__indicadores {
position: relative;
left: auto;
bottom: auto;
transform: none;
justify-content: center;
}
.produto-reais .carrossel__indicador {
width: 24px;
height: 5px;
}
.produto-reais .carrossel__indicador[aria-current="true"] {
width: 56px;
}
/* ============================================================
TOPO DE FOTO — Quem somos e Contato
============================================================
As duas páginas abrem igual: foto de largura inteira com raio nos
cantos de baixo, véu por cima, cabeçalho e chamada centrada em
branco. No desktop a caixa tem 743px e tudo dentro é absoluto;
aqui ela volta ao fluxo e a altura vem do texto.
============================================================ */
.quem-topo,
.contato-topo {
height: auto;
}
/* De absoluto para RELATIVO, não `static`: ele tem camadas
absolutas dentro e precisa continuar sendo a referência delas. */
.quem-hero,
.contato-hero {
position: relative;
inset: auto;
border-radius: 0 0 28px 28px;
}
/* As fotos vêm com caixa e deslocamento em px de 1920 — recorte
calculado para outra proporção. Aqui voltam a `cover`. */
.quem-hero__foto,
.contato-hero__foto {
position: absolute;
inset: 0;
left: auto;
top: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
/* O véu do Quem somos é uma caixa de 2052 x 1154 deslocada; as
paradas dele já são em porcentagem, então basta a caixa cobrir a
foto inteira. */
.quem-hero__veu {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.quem-hero__conteudo,
.contato-hero__conteudo {
padding-top: 14px;
}
.quem-hero__chamada,
.contato-hero__chamada {
position: relative;
left: auto;
top: auto;
padding: 64px var(--recuo-lateral) 96px;
}
.quem-hero__titulo,
.contato-hero__titulo,
.quem-hero__corpo {
width: 100%;
margin-inline: 0;
}
.quem-hero__titulo,
.contato-hero__titulo {
margin-top: 12px;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
}
.quem-hero__corpo {
margin-top: 20px;
font-size: var(--fs-corpo);
line-height: var(--lh-corpo);
}
/* O selo monta na borda de baixo da foto, como no desktop — só que
centrado, porque a chamada aqui também é centrada. */
.quem-topo__selo {
left: 50%;
top: auto;
bottom: -58px;
width: 116px;
height: 114px;
transform: translateX(-50%);
}
/* ============================================================
QUEM SOMOS
============================================================ */
/* ---------- O que nos move ---------- */
.quem-move {
height: auto;
margin-top: 96px;
padding: 0 var(--recuo-lateral) 8px;
}
.quem-move__olho {
padding-top: 0;
line-height: var(--lh-olho);
}
.quem-move__titulo {
width: 100%;
margin-top: 12px;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
}
.pilares {
position: relative;
left: auto;
top: auto;
transform: none;
flex-direction: column;
gap: 44px;
margin-top: 40px;
}
.pilar,
.pilar:last-child {
width: 100%;
gap: 16px;
}
/* O tracking de 12,88px é desenho de título largo. Numa coluna de
342 ele sozinho comeria metade da linha. */
.pilar__nome {
font-size: 22px;
line-height: 28px;
letter-spacing: 6px;
text-indent: 6px;
}
.pilar__texto {
font-size: var(--fs-corpo);
line-height: var(--lh-corpo);
letter-spacing: var(--ls-corpo);
}
/* ---------- De Passa Quatro ---------- */
/* No desktop a seção é uma cena: duas elipses borradas fazem o fundo
à esquerda e a foto ocupa a metade direita, num painel preto. Aqui
vira uma coluna — chamada, foto, texto — e o fundo deixa de ser
duas imagens de 1990 x 1943 (que numa tela de 390 entrariam só de
raspão) para ser o mesmo degradê, escrito em porcentagem. */
.quem-visao {
height: auto;
margin-top: 72px;
padding: 56px var(--recuo-lateral) 64px;
display: flex;
flex-direction: column;
background-image: radial-gradient(110% 62% at 26% 30%,
#6E8FA6 0%, #4A5666 44%, #292F3B 100%);
background-color: #292F3B;
}
.quem-visao__brilho-claro,
.quem-visao__brilho-escuro,
.quem-visao__painel {
display: none;
}
.quem-visao__chamada {
position: relative;
left: auto;
top: auto;
width: 100%;
order: 1;
}
.quem-visao__olho {
width: 100%;
font-size: 15px;
line-height: 22px;
letter-spacing: -0.4px;
}
.quem-visao__titulo {
width: 100%;
margin-top: 10px;
font-size: clamp(38px, 12vw, 52px);
line-height: 1.04;
letter-spacing: -2px;
}
.quem-visao__foto {
position: relative;
left: auto;
top: auto;
order: 2;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
margin-top: 32px;
border-radius: 14px;
}
/* O recorte em porcentagem foi calculado para uma caixa de 948 x
1496. Noutra proporção ele não quer dizer nada. */
.quem-visao__foto img {
position: absolute;
inset: 0;
left: auto;
top: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.quem-visao__corpo {
position: relative;
left: auto;
top: auto;
order: 3;
width: 100%;
margin-top: 32px;
font-size: var(--fs-corpo);
line-height: var(--lh-corpo);
}
.quem-visao__corpo p + p {
margin-top: 22px;
}
/* ---------- Os três produtos ---------- */
/* ---------- Os três produtos ----------
MESMO efeito da seção 3 da home, regra a regra: cada coluna gruda
no topo com uma tela de altura e a seguinte sobe por cima dela.
A linha da grade é maior que o bloco de propósito — com as duas
iguais, a próxima começa a cobrir no instante em que a atual
termina de entrar, e o balde, que fica no pé, some antes de ser
visto. Os 30svh a mais são o tempo em que o bloco fica parado e
inteiro na tela.
Mexeu aqui, conferir a home: as duas seções têm de andar juntas. */
.quem-produtos {
height: auto;
margin-top: 0;
padding-top: 0;
}
.quem-produtos__grade {
grid-template-columns: 1fr;
grid-auto-rows: 130svh;
grid-auto-rows: 130dvh;
align-items: start;
height: auto;
}
.quem-produtos__chamada {
position: relative;
left: auto;
top: auto;
padding: 56px var(--recuo-lateral) 32px;
font-size: 26px;
line-height: 30px;
color: var(--cor-azul-profundo);
}
.quem-produto {
position: sticky;
top: 0;
height: 100svh;
height: 100dvh;
min-height: 100svh;
min-height: 100dvh;
padding: 56px var(--recuo-lateral) 0;
overflow: hidden; /* corta o balde no pé, como na home */
text-align: center;
}
/* Quem pediu para não animar vê a pilha como uma lista */
@media (prefers-reduced-motion: reduce) {
.quem-produtos__grade {
grid-auto-rows: auto;
}
.quem-produto {
position: relative;
}
}
/* ---------- O pé da última coluna se dissolve ----------
No desktop isso é `mask-image`: a coluna fica transparente no pé e
o brilho do rodapé aparece por baixo. Empilhadas, a máscara não
serve — atrás da última não está o rodapé, estão as outras duas,
e o que aparecia era o nome da Tinta fantasma sob o Granilite.
Aqui o mesmo efeito vem de um degradê opaco por cima, indo para o
branco. Dá no mesmo olhando, e resolve o fantasma de quebra: sendo
opaco, ele esconde as colunas de trás em vez de revelá-las.
Branco é a cor certa, não uma escolha: medido no rodapé desta
página, o brilho dele começa em `rgba(53,85,112,0)` — totalmente
transparente — e só ganha corpo 110px abaixo. Ou seja, na emenda o
que existe é o branco da página. */
.quem-produto {
-webkit-mask-image: none;
mask-image: none;
}
.quem-produto:last-child::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38%;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.72) 55%,
var(--cor-branco) 100%
);
pointer-events: none;
}
/* `relative` e não `static`: a arte de fundo é elemento posicionado
e pintaria por cima de bloco comum. Mesma armadilha de sempre. */
.quem-produto__texto,
.quem-produto__botao {
position: relative;
z-index: 1;
left: auto;
top: auto;
right: auto;
}
.quem-produto__nome,
.quem-produto__descricao {
width: 100%;
}
.quem-produto__nome {
font-size: var(--fs-h1);
line-height: var(--lh-h1);
letter-spacing: var(--ls-titulo);
}
.quem-produto__descricao {
margin-top: 20px;
font-size: var(--fs-corpo);
line-height: var(--lh-corpo);
}
.quem-produto__botao {
width: 100%;
max-width: 245px;
margin: 28px auto 0;
}
/* Mesma medida da home: o balde encosta no pé do bloco e é cortado
por ele, como no desktop, onde a base do mockup sai da coluna. */
.quem-produto__balde {
left: 50%;
top: auto;
bottom: -56px;
width: auto;
height: clamp(340px, 58svh, 520px);
transform: translateX(-50%);
}
/* A linha da grade tem 130dvh e a coluna 100: sobram 30dvh de linha
VAZIA depois da última. O rodapé sobe exatamente isso, para começar
onde a coluna termina — é lá que a dissolução acontece.
Margem negativa no item da grade não serviria: `grid-auto-rows`
fixa a altura da linha e a margem só encolhe a caixa dentro dela. */
.quem-produtos + .rodape {
margin-top: -30svh;
margin-top: -30dvh;
}
.quem-produtos + .rodape .rodape__brilho {
top: 0;
height: 1100px;
}
/* ============================================================
CONTATO
============================================================ */
/* ---------- Formulário ---------- */
/* Duas colunas de 688px viram uma pilha. Os campos são absolutos no
desktop, com `top` por linha; aqui voltam ao fluxo. */
.contato-form {
left: auto;
width: auto;
height: auto;
margin: 56px var(--recuo-lateral) 0;
}
.campo {
position: relative;
left: auto;
top: auto;
width: 100%;
}
.campo--mensagem {
width: 100%;
}
.campo + .campo {
margin-top: 20px;
}
.campo__rotulo {
height: auto;
margin-bottom: 6px;
line-height: var(--lh-olho);
}
.campo__entrada {
height: 52px;
font-size: var(--fs-corpo);
}
.campo--mensagem .campo__entrada {
height: 112px;
}
.contato-form__enviar {
position: relative;
left: auto;
top: auto;
width: 100%;
margin-top: 36px;
transform: none;
}
/* ---------- Outros canais ---------- */
.contato-canais {
height: auto;
margin-top: 64px;
padding: 56px var(--recuo-lateral) 64px;
}
.contato-canais__chamada {
padding-top: 0;
}
.contato-canais__olho {
line-height: var(--lh-olho);
}
.contato-canais__titulo {
width: 100%;
margin-top: 12px;
font-size: var(--fs-h1);
line-height: var(--lh-h1);
}
/* Os três canais têm posição própria no desktop porque o vão até o
risco divisor muda de um para o outro. Empilhados, o risco deixa
de ser vertical entre eles e passa a ser horizontal acima. */
.canais {
position: relative;
inset: auto;
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 40px;
text-align: center;
}
.canal,
.canal--whatsapp,
.canal--email,
.canal--redes {
position: relative;
left: auto;
top: auto;
}
.canal--email::before,
.canal--redes::before {
left: 50%;
top: -14px;
width: 64px;
height: 1px;
transform: translateX(-50%);
}
.canal__redes {
justify-content: center;
margin-top: 8px;
}
.contato-canais + .rodape .rodape__brilho,
.produto-reais + .rodape .rodape__brilho {
top: 0;
height: 1100px;
}
/* ============================================================
CALCULADORA
============================================================ */
/* No desktop o topo tem 743px e o painel sobe 524 por cima da foto.
A proporção se mantém: uma faixa de foto e o painel montando
nela, só que em escala de celular. */
.calc-topo {
height: 260px;
}
/* Quatro camadas ancoradas em px de 1920, dentro de uma caixa de
1920 x 1685 que começa em −260. Aqui a caixa vira a faixa, e as
camadas de dentro voltam a `cover`: o enquadramento calculado
para 2922px de foto não significa nada em 390. */
/* A faixa não acompanha a altura do Contato aqui: lá o topo carrega a
chamada da página e ocupa meia tela; aqui ele tem só o cabeçalho, e
copiar aquela altura deixaria 500px de foto vazia antes do painel. */
.calc-fundo {
left: 0;
top: 0;
width: 100%;
height: 420px;
--raio-fundo: 0 0 28px 28px; /* o `clip-path` do estilos.css segue esta variável */
}
.calc-fundo__nitida,
.calc-fundo__veu-nitida,
.calc-fundo__borrada,
.calc-fundo__veu-borrada {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.calc-fundo__nitida,
.calc-fundo__borrada img {
position: absolute;
inset: 0;
left: auto;
top: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.calc-hero__conteudo,
.calc-topo .container {
padding-top: 14px;
}
/* ---------- Painel ---------- */
.calc-painel {
width: auto;
height: auto;
margin: -150px var(--recuo-lateral) 0;
padding: 24px 20px 32px;
border-radius: 20px;
}
.calc-painel__titulo {
font-size: 24px;
line-height: 28px;
}
.calc-painel__risco {
margin-top: 20px;
}
.calc-painel__rotulo {
margin-top: 24px;
font-size: 17px;
line-height: 20px;
}
/* Os três produtos ficam lado a lado em 464px cada. Aqui empilham,
e cada cartão fica baixo: é um seletor, não uma vitrine. */
.calc-opcoes {
flex-direction: column;
gap: 10px;
}
.calc-opcoes--produto .calc-opcao-item {
width: 100%;
}
.calc-opcoes--produto .calc-opcao {
height: 84px;
padding-left: 20px;
}
.calc-opcao__nome {
font-size: 15px;
line-height: 18px;
}
.calc-opcao__balde {
width: 72px;
height: auto;
}
/* ---------- Como calcular: os três modos ---------- */
/* Os três rótulos somam mais de 600px de texto — lado a lado eles
quebram no meio da frase. Empilhados, cada um vira uma linha de
toque inteira, que é o que se quer num seletor de celular. */
/* No desktop o vão entre rótulo e conteúdo é 47 em todo o painel.
Aqui ele é 24 — mas é UM valor só, pelo mesmo motivo: dois ritmos
dentro do mesmo cartão leem como desalinho. */
.calc-opcoes,
.calc-campo,
.calc-superficies {
margin-top: 24px;
}
.calc-modo {
display: flex;
margin: 24px 0 0;
padding-block: 10px;
font-size: var(--fs-corpo);
line-height: 24px;
}
.calc-modo ~ .calc-modo {
margin-top: 0;
}
.calc-modo + .calc-modo {
border-top: 1px solid var(--linha-formulario);
}
/* ---------- Modo 2 · linhas de medida ---------- */
/* Largura e altura dividem a linha; quantidade e "Remover" dividem a
de baixo. Os quatro em fila dariam campos de 60px. */
.calc-superficie {
flex-wrap: wrap;
gap: 14px;
padding: 18px 16px;
}
.calc-superficie__campo {
flex: 1 1 calc(50% - 7px);
}
.calc-superficie__campo--qtd {
flex: 1 1 calc(50% - 7px);
}
.calc-superficie__campo input {
height: 48px;
padding-inline: 12px;
font-size: 20px;
line-height: 24px;
}
.calc-superficie__rotulo {
margin-bottom: 6px;
font-size: 13px;
line-height: 16px;
}
.calc-superficie__unidade {
font-size: 16px;
line-height: 48px;
}
.calc-superficie__remover {
flex: 1 1 calc(50% - 7px);
height: 48px;
padding-inline: 16px;
font-size: var(--fs-legenda);
}
.calc-adicionar {
width: 100%;
height: 48px;
margin-top: 12px;
}
/* ---------- Modo 3 · tamanhos aproximados ---------- */
/* Empilham, como os cartões de produto — a `.calc-opcoes` já vira
coluna aqui em cima. Só as medidas de dentro mudam. */
.calc-opcoes--estimativa .calc-opcao-item {
width: 100%;
}
.calc-opcoes--estimativa .calc-opcao {
min-height: 0;
padding: 14px 16px 14px 10px;
gap: 10px;
}
.calc-opcao__emblema {
width: 54px;
height: 56px;
flex: 0 0 54px;
}
.calc-estimativa__nome {
font-size: 15px;
line-height: 18px;
}
.calc-estimativa__desc {
margin-top: 4px;
font-size: 13px;
line-height: 17px;
}
.calc-estimativa__area {
margin-top: 8px;
font-size: 19px;
line-height: 22px;
}
/* ---------- Campo de metragem ---------- */
.calc-campo__caixa {
width: 100%;
height: 76px;
padding-inline: 18px;
}
.calc-campo__entrada,
.calc-campo__unidade {
font-size: 34px;
line-height: 40px;
}
.calc-campo__dica {
margin-top: 10px;
font-size: 13px;
line-height: 17px;
}
/* ---------- Resultado ---------- */
/* No desktop o número fica à esquerda e a contagem de latas à
direita, separados por um risco vertical. Numa coluna de 342 os
dois não cabem lado a lado: viram duas linhas, e o risco passa a
ser horizontal. */
.calc-resultado {
margin-top: 28px;
padding-top: 24px;
}
.calc-resultado::after {
left: 0;
top: auto;
bottom: 96px;
width: 100%;
height: 1px;
}
.calc-resultado__valor {
font-size: 56px;
line-height: 64px;
}
.calc-resultado__unidade {
font-size: 28px;
line-height: 34px;
}
.calc-resultado__caixa {
position: relative;
left: auto;
top: auto;
margin-top: 32px;
}
.calc-acoes {
flex-direction: column;
gap: 12px;
margin-top: 28px;
}
.calc-acoes .botao {
width: 100%;
}
.calc-painel + .rodape {
margin-top: 56px;
}
.calc-painel ~ .rodape .rodape__brilho {
top: 0;
height: 1100px;
}
}
/* ------------------------------------------------------------
Faixa de tablet: 600 a 1023px
O layout é o mesmo do celular — só os pontos onde empilhar deixa
vão demais é que voltam a duas colunas.
------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 1023px) {
.rodape__colunas {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.produtos__grade {
grid-template-columns: 1fr 1fr;
}
/* Linha longa demais cansa. O limite é de medida, não de pixels:
acompanha o corpo do texto se ele mudar. */
.materia__corpo,
.jeito__corpo,
.imprensa__fecho,
.rodape__texto {
max-width: 62ch;
margin-inline: auto;
}
.rodape__logos {
gap: 40px;
}
/* Páginas internas: o que empilhar no celular deixa vão demais numa
tela de tablet volta a ficar lado a lado. */
.aplicacoes {
flex-direction: row;
}
.aplicacao,
.aplicacoes--unica .aplicacao {
flex: 1 1 0;
min-width: 0;
aspect-ratio: 3 / 4;
}
.cores {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.produto-hero__selos {
grid-template-columns: repeat(4, 1fr);
}
.pilares {
flex-direction: row;
gap: 32px;
}
.pilar,
.pilar:last-child {
flex: 1 1 0;
}
.quem-produtos__grade {
grid-template-columns: 1fr 1fr;
}
.calc-opcoes {
flex-direction: row;
gap: 12px;
}
.calc-opcoes--produto .calc-opcao-item {
flex: 1 1 0;
}
.calc-acoes {
flex-direction: row;
}
.campo--nome,
.campo--email,
.campo--telefone,
.campo--cidade {
width: calc(50% - 10px);
}
.contato-form {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.campo + .campo {
margin-top: 0;
}
.campo--mensagem {
width: 100%;
}
.contato-form__enviar {
width: 245px;
margin-inline: auto;
}
.rodape__logo-group { width: 168px; height: 35.56px; }
.rodape__logo-marca { width: 182px; height: 38.60px; }
.rodape__divisor-vert {
height: 52px;
}
}