/* ============================================================
   ALPHAZ HABITAT — estilos das seções

   As seções da página, na ordem em que aparecem. Cada bloco abre
   com um cabeçalho dizendo o que é a seção, o que se edita nela e
   de onde vem o conteúdo.

   Tudo aqui está em pixels do desenho a 1920px de largura. A
   página inteira é reduzida ou ampliada proporcionalmente por
   css/escala.css, então nenhuma regra deste arquivo precisa
   conhecer outras larguras — escreva sempre na medida do desenho.

   Abaixo de 1024px vale css/mobile.css, que refaz o layout em vez
   de reduzi-lo.

   Nenhuma cor, fonte ou medida tipográfica é escrita aqui: todas
   chegam como token de css/marca.css.
   ============================================================ */

/* ============================================================
   PRIMITIVAS
   ============================================================ */

/* ---------- Botão pílula ---------- */

.botao {
  /* Deslocamento próprio do botão, se houver. Precisa viver numa
     variável porque os estados abaixo escrevem `transform` inteiro: um
     `translateX(-50%)` solto na regra de posicionamento seria APAGADO
     no hover, e o botão centrado pulava meia largura para o lado.
     Quem centra escreve `--deslocar: translateX(-50%)`, não
     `transform`. */
  --deslocar: translateX(0);

  /* Cor da luz do hover. Cada variante troca esta linha e mais nada —
     a receita da luz está lá embaixo, nos estados. O padrão é o azul,
     que é a cor do botão claro. */
  --cor-luz: var(--luz-azul);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 73px;
  padding: 10px;
  border: 1px solid var(--borda-botao);
  border-radius: var(--raio-botao);

  font-family: var(--fonte-titulo);
  font-weight: var(--peso-botao);
  font-size: var(--fs-botao);
  line-height: var(--lh-botao);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  white-space: nowrap;

  filter: drop-shadow(var(--sombra-botao-repouso));
  transform: var(--deslocar);
  transition:
    transform  240ms var(--easing-saida),
    box-shadow 240ms var(--easing-saida);
}

/* Variante clara, com o texto em gradiente */
.botao--claro {
  background-image: var(--grad-botao-claro);
  color: transparent;
  background-clip: border-box;
}

.botao--claro span,
.botao--branco span,
.produto__botao span,
.rodape__botao span {
  background-image: var(--grad-botao-claro-texto);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Variante branca — só na seção "nosso jeito de fazer", sobre a foto
   clara. Herda a luz azul do `.botao`: é a cor para onde o gradiente
   dela puxa, e sobre o bege da foto um halo frio é o que se enxerga. */
.botao--branco {
  background-image: var(--grad-botao-branco);
  color: transparent;
  background-clip: border-box;
}

/* Botão sem destino — o "Ver produto" da calculadora enquanto nenhum
   produto foi escolhido. O <a> já perde o `href` no script, o que basta
   para não ser link nem receber foco; isto é só o aviso visual, senão
   ele parece clicável e não responde. */
.botao--inerte {
  opacity: 0.4;
  pointer-events: none;
  box-shadow: none;
}

/* Variante verde — a ação principal da marca */
.botao--verde {
  --cor-luz: var(--luz-verde);
  background-image: var(--grad-botao-verde);
  color: var(--cor-branco);
}

/* Estados: mesma gramática da Group. A luz carrega o sinal e a
   escala é só reforço — 1.5% numa pílula já é percebido.

   A receita da luz mora aqui, uma vez só, e lê a cor em `--cor-luz`:
   duas camadas, a de baixo desce e dá peso, a sem deslocamento envolve
   a pílula — é ela que faz parecer luz, e não sombra. */
.botao:focus-visible {
  outline-color: rgb(var(--cor-luz));
}

@media (hover: hover) and (pointer: fine) {
  .botao:hover {
    transform: var(--deslocar) scale(1.015);
    box-shadow:
      0 10px 30px -4px rgb(var(--cor-luz) / 0.5),
      0    0 22px -2px rgb(var(--cor-luz) / 0.4);
  }
}

.botao:focus-visible {
  transform: var(--deslocar) scale(1.015);
  box-shadow:
    0 10px 30px -4px rgb(var(--cor-luz) / 0.5),
    0    0 22px -2px rgb(var(--cor-luz) / 0.4);
}

/* Mesma luz, recolhida: é o que responde ao clique, já que o botão
   volta ao tamanho normal. */
.botao:active {
  transform: var(--deslocar) scale(1);
  box-shadow:
    0  4px 14px -4px rgb(var(--cor-luz) / 0.45),
    0    0 10px -2px rgb(var(--cor-luz) / 0.35);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .botao:hover,
  .botao:focus-visible,
  .botao:active {
    transform: var(--deslocar);
  }
}

/* A seta aponta para baixo — o giro de 180° do nó do Figma já está
   dentro do próprio `seta.svg`, não aqui. Se aparecer apontando para
   cima, é o SVG que voltou ao estado exportado. */
.botao--claro img,
.botao--branco img {
  width: 10px;
  height: 11.97px;
}


/* ---------- Botão flutuante de WhatsApp ---------- */

/* No Figma ele aparece uma vez, parado, porque a arte é estática. No
   site ele acompanha a rolagem: é um atalho de contato, não um
   elemento da primeira tela.

   `fixed` dentro do .pagina funciona porque a escala usa `zoom`, e
   zoom não cria bloco contêiner para elementos fixos como `transform`
   criaria — ele fica preso à janela E acompanha a escala da página. */
.whatsapp {
  position: fixed;
  right: 40px;
  bottom: 32px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #16B841;
  transition:
    transform  240ms var(--easing-saida),
    box-shadow 240ms var(--easing-saida);
}

.whatsapp img {
  width: 42px;
  height: 43px;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 30px -4px rgba(22, 184, 65, 0.55);
  }
}

.whatsapp:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 10px 30px -4px rgba(22, 184, 65, 0.55);
  outline-color: var(--cor-branco);
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp:hover,
  .whatsapp:focus-visible {
    transform: none;
  }
}


/* ============================================================
   SEÇÃO 1 · HERO
   ============================================================ */

/* O conteúdo vai até 974 e o letreiro ALPHAZ começa em 1003,
   transbordando para dentro da seção 2 — é assim no Figma. */
.hero {
  position: relative;
  height: 1003px;
  color: var(--cor-branco);
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Brilho difuso atrás de tudo. Mesma caixa e mesma geometria de
   gradiente do hero da Group; só as cores mudam. Raio de desfoque
   do Figma é o dobro do blur() do CSS: 254 vira 127. */
.hero__glow {
  position: absolute;
  left: -216px;
  top: -62px;
  width: 2352px;
  height: 1483px;
  filter: blur(127px);
  background-image: var(--grad-hero-brilho);
}

/* Mancha azul no canto superior esquerdo. No HTML ela vem depois da
   foto: no Figma é uma camada acima do grupo mascarado, e é ela que
   fecha em azul o canto claro da imagem. Embaixo, a foto opaca a
   esconderia por completo. */
.hero__elipse {
  position: absolute;
  left: -692px;
  top: -658px;
  width: 1695px;
  height: 1632px;
  filter: blur(52px);
  background-image: var(--grad-hero-elipse);
}

/* Escurecimento por trás da foto: a foto é o que dá a cor, e o
   preto radial fecha as bordas. */
.hero__escurecimento {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1211px;
  background-image: radial-gradient(
    1803.5px 1137.5px at 960px 73.5px,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 69.137%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* A máscara vale para o grupo de camadas, não para cada uma: é ela
   que dissolve foto, letreiro e balde na mesma curva. */
.hero__mascara {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1211px;
  -webkit-mask-image: url("../imagens/hero-mascara.svg");
          mask-image: url("../imagens/hero-mascara.svg");
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 1920px 1211px;
          mask-size: 1920px 1211px;
}

.hero__foto {
  position: absolute;
  left: -370px;
  top: 0;
  width: 2668px;
  height: 1080px;
  overflow: hidden;
}

.hero__foto img {
  position: absolute;
  left: -3.2%;
  top: 0;
  width: 106.39%;
  height: 119.17%;
  max-width: none;
  object-fit: cover;
}

/* Letreiro fantasma atrás do balde */
.hero__letreiro-fundo {
  position: absolute;
  left: 62px;
  top: 682px;   /* era 781px no original; 742px no 1º ajuste */
  width: 1857.99px;
  height: 270px;
  max-width: none;
}

.hero__balde {
  position: absolute;
  left: 613px;
  top: 320px;   /* era 419px no original; 380px no 1º ajuste */
  width: 665px;
  height: 791px;
  max-width: none;
  object-fit: cover;
}

/* ---------- Conteúdo ---------- */

.hero__conteudo {
  position: relative;
  z-index: 1;
  padding-top: 55px;
}

/* ---------- Cabeçalho ---------- */

/* O menu é centrado na página, não no espaço que sobra entre logo e
   botão — por isso ele sai do fluxo em vez de virar item do flex. */
.cabecalho {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 73px;
}

.cabecalho__logo {
  margin-top: 11px;
}

.cabecalho__logo img {
  width: 217.4px;   /* altura do Figma (46) na proporção da arte correta */
  height: 46px;
}

/* No desktop este invólucro não existe para o layout: `contents` faz
   os filhos virarem itens do cabeçalho, exatamente como eram antes.
   No celular (mobile.css) ele vira o painel. */
.cabecalho__navegacao {
  display: contents;
}

/* O gatilho do menu só existe no celular */
.menu__gatilho {
  display: none;
}

.menu {
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 38px;
}

.menu a {
  position: relative;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  text-transform: uppercase;
  color: var(--cor-menu-inativo);
  transition: color 200ms var(--easing-saida);
}

.menu a:hover,
.menu a:focus-visible {
  color: var(--cor-branco);
}

/* Página atual: branco cheio e um risco de 1px embaixo. O risco é
   CSS e não imagem — assim acompanha a largura da palavra se o
   cliente renomear um item do menu. */
.menu a[aria-current] {
  color: var(--cor-branco);
}

.menu a[aria-current]::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;
  height: 1px;
  background: var(--cor-branco);
}

/* ---------- Chamada ---------- */

.hero__chamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33.172px;
  width: 935.272px;
  margin-top: 50px;   /* era 90px — conteúdo mais próximo do topo */
  margin-inline: auto;
}

.hero__olho {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 449px;
  height: 38px;
  padding: 9.215px;
  backdrop-filter: blur(3px);
  background-image: linear-gradient(
    to right,
    rgba(21, 46, 68, 0) 0%,
    rgba(70, 87, 107, 0.5) 23.08%,
    #768191 46.165%,
    rgba(70, 87, 107, 0.5) 68.52%,
    rgba(21, 46, 68, 0) 90.865%
  );

  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--cor-branco);
}

.hero__titulo {
  width: 100%;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  text-align: center;
  color: var(--cor-branco);
}

/* ---------- Bloco de texto e botão ---------- */

/* No Figma este bloco começa em 199px. Alinhado ao rail de 70px,
   como todo o resto da página — é o desvio deliberado do projeto. */
.hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
  width: 415px;
  margin-top: 191.29px;   /* era 301.29px — subiu 110px pro botão caber na 1ª dobra */
}

/* A caixa do Figma tem 114px e as três linhas somam 121,2 — a caixa é
   menor que o fluxo, de propósito, e é ela que põe o botão em 895.
   Ao trocar o texto, virar `auto` e conferir onde o botão cai. */
.hero__texto p {
  width: 399px;
  height: 114px;
  font-size: var(--fs-corpo-destaque);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
}

.hero__texto .botao {
  width: 290px;
}

.cabecalho .botao--verde {
  width: 245px;
}

/* ---------- Letreiro gigante ---------- */

/* Começa em 1003 e desce até 1499, entrando por baixo da seção 2.
   Fica absoluto para não empurrar o fluxo. */
.hero__display {
  position: absolute;
  left: -17px;
  top: 1003px;
  width: 1954px;
  margin: 0;

  font-family: var(--fonte-titulo);
  font-weight: var(--peso-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;

  background-image: var(--grad-display);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}


/* ============================================================
   SEÇÃO 2 · DA MATÉRIA AO HABITAT
   ============================================================ */

/* O hero termina em 1003 e esta seção começa em 1362 */
.materia {
  position: relative;
  height: 887.19px;
  margin-top: 359px;
  color: var(--cor-azul-profundo);
}

/* No Figma o bloco fica centrado em 970, não em 960: a seção começa em
   197 e tem 1591px, e o centro dela não é o centro da página. Centrado
   na página, como o resto — é a mesma unificação de deslize milimétrico
   que a Group já usa. */
.materia__bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
  padding-top: 130px;   /* 1492 na página, menos os 1362 da seção */
}

.materia__titulos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.materia__olho {
  height: 49px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* As caixas do título e do parágrafo são mais largas que o bloco que as
   contém — no Figma elas transbordam, centradas. Daí as larguras fixas
   e o alinhamento central. */
.materia__titulo {
  width: 956px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  text-align: center;
  /* Ângulo da caixa de 956 × 156 */
  background-image: linear-gradient(154.209deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* A caixa do Figma tem 65px e as duas linhas somam 80 — a caixa é menor
   que o fluxo, de propósito. Ao trocar o texto, virar `auto`. */
.materia__corpo {
  width: 1022px;
  height: 65px;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 40px;
  letter-spacing: var(--ls-corpo);
  text-align: center;
}


/* ============================================================
   SEÇÃO 3 · PRODUTOS
   ============================================================ */

/* A seção 2 vai até 2249 e esta começa em 1959: elas se sobrepõem
   290px. A margem negativa reproduz isso — a sobreposição cai na folga
   sob o parágrafo da seção anterior, sem cobrir nada. */
.produtos {
  /* Curso do parallax dos baldes: eles descem isto enquanto o usuário
     ultrapassa a seção, afundando atrás da seção seguinte. Parados
     até o usuário chegar aqui — a posição de repouso é a do Figma.

     Único lugar de calibragem: o script lê este valor. Em 0, nada se
     move; é o que o prefers-reduced-motion faz. */
  --parallax-balde: 200px;

  position: relative;
  height: 1695px;
  margin-top: -290.19px;
  color: var(--cor-azul-profundo);
}

/* Selo de cera, a cavaleiro entre as duas seções */
.produtos__selo {
  position: absolute;
  left: 812px;
  top: -17px;      /* 1942 na página, contra os 1959 da seção */
  width: 298px;
  height: 292px;
  overflow: hidden;

  /* O selo passa POR CIMA do divisor, como no Figma — a linha some ao
     chegar nele em vez de atravessá-lo. Sem isto o divisor ganha por
     vir depois no HTML. */
  z-index: 1;
}

/* A imagem entra maior que a caixa e deslocada, como no Figma */
.produtos__selo img {
  position: absolute;
  left: -9.73%;
  top: -5.82%;
  width: 114.09%;
  height: 109.25%;
  max-width: none;
}

.produtos__divisor {
  position: absolute;
  left: var(--recuo-lateral);
  top: 130px;
  width: var(--container);
  height: 1px;
  border: 0;
  background: var(--cor-texto-olho);
}

.produtos__chamada {
  position: absolute;
  left: var(--recuo-lateral);
  top: 176px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.produtos__olho {
  height: 49px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

.produtos__titulo {
  width: 913px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  /* Ângulo da caixa de 913 × 156 */
  background-image: linear-gradient(153.161deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- As três colunas ---------- */

/* No Figma as colunas têm 639, 640 e 639px, com 2px de vão entre elas,
   e o conjunto passa 2px da página. Unificadas em 3 × 640 = 1920: os
   vãos não aparecem no desenho e o acúmulo desalinhava o texto de cada
   coluna em 1 e 3px. */
.produtos__grade {
  position: absolute;
  left: 0;
  top: 460px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 1920px;
}

/* Cada coluna são duas artes: o fundo (com o véu já composto) e o
   balde, separado porque ele anda no scroll. No Figma isso são cinco
   camadas com blend mode; achatar o fundo num arquivo só deixa o CSS
   simples e o cliente trocando imagem, não código.

   O `overflow: hidden` é o que faz o balde sumir "atrás" da seção
   seguinte: a coluna termina exatamente em 3426, que é onde a seção 4
   começa. */
.produto {
  position: relative;
  height: 1007px;
  overflow: hidden;
}

.produto__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O balde, na caixa que o Figma lhe dá em cada coluna — as três
   diferem alguns pixels e é assim que está aprovado. `translate3d`
   promove a camada sozinho; não precisa de `will-change` fixo. */
.produto__balde {
  position: absolute;
  left: var(--balde-x);
  top: var(--balde-y);
  width: var(--balde-w);
  height: var(--balde-h);
  max-width: none;
  pointer-events: none;
}

/* O ritmo interno das três é unificado. No Figma o título começa em
   105, 94 e 80 — desalinhamento visível entre colunas vizinhas. */
.produto__texto {
  position: absolute;
  left: var(--recuo-lateral);
  top: 105px;
  display: flex;
  flex-direction: column;
  gap: 65px;
}

/* A largura da caixa é o que decide onde o nome quebra em duas linhas, e
   ela muda de coluna para coluna no Figma (`--larg-nome`, mais abaixo).
   Não é capricho: cada nome tem um comprimento diferente e a quebra foi
   escolhida à mão. Ao trocar o texto de um produto, ajuste a largura da
   coluna correspondente até a quebra cair onde se quer.

   A altura de 113px é a caixa do Figma — menor que as duas linhas, que
   somam 117,6. É ela que fixa o topo da descrição em 283. */
.produto__nome {
  width: var(--larg-nome);
  height: 113px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 65px;
  line-height: 58.8px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Mesma lógica da largura do nome: é ela que decide a quebra de linha. */
.produto__descricao {
  width: var(--larg-descricao);
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 30.4px;
  letter-spacing: var(--ls-corpo);
}

.produto__botao {
  --cor-luz: var(--luz-pessego);
  position: absolute;
  left: var(--recuo-lateral);
  top: 395px;
  width: 245px;
  background-image: var(--grad-botao-produto);
  color: transparent;
}

/* Cada produto tem a sua cor de título e de texto, e a sua largura de
   caixa de texto — ver o comentário em `.produto__nome`. */
.produto--cimento {
  --larg-nome:      437px;
  --larg-descricao: 324px;
  --balde-x: -27px; --balde-y: 419px; --balde-w: 665px; --balde-h: 791px;
}
.produto--cimento .produto__nome {
  background-image: linear-gradient(142.557deg, #FFFFFF 30.446%, #9CA1B2 69.554%);
}
.produto--cimento .produto__descricao { color: #C4CFFF; }

.produto--tinta {
  --larg-nome:      577px;
  --larg-descricao: 392px;
  --balde-x: -15px; --balde-y: 414px; --balde-w: 670px; --balde-h: 796px;
}
.produto--tinta .produto__nome {
  background-image: linear-gradient(149.888deg, #FFFFFF 30.446%, #CDD2E3 69.554%);
}
.produto--tinta .produto__descricao { color: #EEF4FF; }

.produto--granilite {
  --larg-nome:      537px;
  --larg-descricao: 419px;
  --balde-x:  -4px; --balde-y: 418px; --balde-w: 665px; --balde-h: 791px;
}
.produto--granilite .produto__nome {
  background-image: linear-gradient(147.393deg, #FFFFFF 30.446%, #9CA1B2 69.554%);
}
.produto--granilite .produto__descricao { color: #EFE4D5; }


/* ============================================================
   SEÇÃO 4 · NOSSO JEITO DE FAZER
   ============================================================ */

/* A seção sobe 228px sobre a caixa da 3: no Figma ela começa em 3426,
   que é exatamente onde as colunas de produto terminam, mas a caixa da
   seção 3 segue até 3654. */
.jeito {
  position: relative;
  height: 1295px;
  margin-top: -228px;
  background-color: var(--fundo-pedra);
  color: var(--cor-azul-profundo);
}

/* A foto ocupa a seção inteira e some ao subir. No Figma isso é um
   retângulo de gradiente com LAYER_BLUR servindo de máscara, e o
   desfoque esmaece as quatro bordas — não só o topo. Reproduzir o
   desfoque em CSS não dá (máscara não aceita filtro), então o perfil
   foi medido no próprio render, eixo a eixo, e assado nas paradas
   abaixo: a vertical faz a foto nascer por baixo, a horizontal é a
   vinheta das laterais. `intersect` multiplica as duas.

   Se trocar a foto, nada disto muda — a máscara é da caixa, não da
   imagem. */
.jeito__foto {
  position: absolute;
  left: -15px;
  top: 0;
  width: 1942px;
  height: 100%;

  -webkit-mask-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0)     0%,
      rgba(0, 0, 0, 0)    25%,
      rgba(0, 0, 0, 0.03) 30%,
      rgba(0, 0, 0, 0.08) 35%,
      rgba(0, 0, 0, 0.23) 45%,
      rgba(0, 0, 0, 0.38) 55%,
      rgba(0, 0, 0, 0.50) 62%,
      rgba(0, 0, 0, 0.63) 68%,
      rgba(0, 0, 0, 0.78) 73%,
      rgba(0, 0, 0, 0.90) 78%,
      rgba(0, 0, 0, 0.95) 80.5%,
      rgba(0, 0, 0, 0.98) 83%,
      rgba(0, 0, 0, 1)    87%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.5)      0%,
      rgba(0, 0, 0, 0.615) 0.77%,
      rgba(0, 0, 0, 0.76)  3.24%,
      rgba(0, 0, 0, 0.93)  5.72%,
      rgba(0, 0, 0, 1)     9.18%,
      rgba(0, 0, 0, 1)    91.29%,
      rgba(0, 0, 0, 0.93) 94.75%,
      rgba(0, 0, 0, 0.76) 97.22%,
      rgba(0, 0, 0, 0.615) 99.64%,
      rgba(0, 0, 0, 0.5)    100%);
  mask-image:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0)     0%,
      rgba(0, 0, 0, 0)    25%,
      rgba(0, 0, 0, 0.03) 30%,
      rgba(0, 0, 0, 0.08) 35%,
      rgba(0, 0, 0, 0.23) 45%,
      rgba(0, 0, 0, 0.38) 55%,
      rgba(0, 0, 0, 0.50) 62%,
      rgba(0, 0, 0, 0.63) 68%,
      rgba(0, 0, 0, 0.78) 73%,
      rgba(0, 0, 0, 0.90) 78%,
      rgba(0, 0, 0, 0.95) 80.5%,
      rgba(0, 0, 0, 0.98) 83%,
      rgba(0, 0, 0, 1)    87%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.5)      0%,
      rgba(0, 0, 0, 0.615) 0.77%,
      rgba(0, 0, 0, 0.76)  3.24%,
      rgba(0, 0, 0, 0.93)  5.72%,
      rgba(0, 0, 0, 1)     9.18%,
      rgba(0, 0, 0, 1)    91.29%,
      rgba(0, 0, 0, 0.93) 94.75%,
      rgba(0, 0, 0, 0.76) 97.22%,
      rgba(0, 0, 0, 0.615) 99.64%,
      rgba(0, 0, 0, 0.5)    100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* A foto tem 1942px e começa em -15, como no Figma: sangra 15px à
   esquerda e 7px à direita. As paradas horizontais da máscara foram
   medidas em coordenadas de página e convertidas para esta caixa —
   por isso os 0,77% e 99,64%, que são onde a página começa e acaba
   dentro dela. */
.jeito__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tudo centrado. O Figma centra em 943, não em 960 — mesma regra das
   outras inconsistências milimétricas: centrar é a intenção. */
.jeito__conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 105px;
}

.jeito__olho {
  height: 49px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* Ângulo da caixa de 1466 × 156 — a mais larga da página, e por isso
   a de ângulo mais deitado. */
.jeito__titulo {
  width: 1466px;
  margin-top: 19px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  text-align: center;
  background-image: linear-gradient(162.509deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.jeito__corpo {
  width: 908px;
  margin-top: 82px;
  font-weight: var(--peso-medio);
  font-size: 24px;
  line-height: 40px;
  letter-spacing: var(--ls-corpo);
  text-align: center;
}

.jeito__botao {
  margin-top: 84px;
  width: 290px;
}


/* ============================================================
   SEÇÃO 5 · O QUE FIZEMOS — cards de imprensa
   ============================================================ */

/* Vai de 4721, onde a seção 4 termina, a 6019, onde o rodapé começa.
   No Figma o retângulo de fundo tem 6280px e segue por baixo do
   rodapé; aqui ele para na altura da seção, o que dá no mesmo. */
.imprensa {
  position: relative;
  height: 1298px;
  background-color: var(--fundo-claro);
  color: var(--cor-azul-profundo);
}

/* ---------- Chamada, centralizada ---------- */

.imprensa__chamada {
  position: absolute;
  left: 50%;
  top: 132px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.imprensa__olho {
  height: 43px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

.imprensa__titulo {
  width: 525px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  text-align: center;
  /* Ângulo da caixa de 525 × 153 — a mais estreita da página, e por
     isso a de ângulo mais em pé. */
  background-image: linear-gradient(139.205deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* O que vem daqui para baixo é o mesmo bloco de cards que existe
   na Alphaz Group, linha a linha: mesmas caixas, mesmas posições,
   mesmos véus e mesmos recuos de legenda. Os dois desenhos são
   iguais, então não é reaproveitamento por conveniência.

   Uma alteração aqui precisa ser repetida em
   alphaz-group/css/estilos.css. */

/* ---------- Trio de cards ---------- */

/* Container de 1335px centralizado: 292 a 1627 na página */
.imprensa__cards {
  position: absolute;
  left: 50%;
  top: 435px;
  transform: translateX(-50%);
  width: 1335.22px;
  height: 652px;
}

/* Os cards não têm posição própria: ocupam SLOTS (esquerda, centro,
   direita) e trocam de slot ao serem clicados. A geometria mora no
   slot, não no card — por isso qualquer card pode ocupar qualquer um. */
.card {
  position: absolute;
  transition: left 500ms ease, top 500ms ease,
              width 500ms ease, height 500ms ease;
}

.card__botao {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--raio-card);
  text-align: left;
  cursor: pointer;
}

/* O card do centro não navega para lugar nenhum */
.card--centro .card__botao {
  cursor: default;
}

/* Véu escuro que garante leitura da legenda sobre a foto */
.card__botao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 240ms var(--easing-saida);
}

.card__foto {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.card__legenda {
  position: absolute;
  z-index: 1;
  font-weight: var(--peso-medio);
  font-size: var(--fs-legenda);
  line-height: var(--lh-legenda);
  letter-spacing: var(--ls-corpo);
  color: var(--cor-branco);
}

.card__selo {
  position: absolute;
  z-index: 1;
  max-width: none;
  transition: left 500ms ease, top 500ms ease,
              width 500ms ease, height 500ms ease;
}

/* ---------- Os três slots ---------- */

.card--esq,
.card--dir {
  top: 58.87px;
  width: 429.02px;
  height: 535.16px;
  z-index: 1;
}

.card--esq { left: 0; }
.card--dir { left: 906.2px; }

/* O card central é o maior e fica por cima dos laterais */
.card--centro {
  left: 405.83px;
  top: 0;
  width: 522.69px;
  height: 652px;
  z-index: 2;
}

.card--centro .card__botao {
  border: 0.891px solid var(--cor-branco);
}

/* Degradê: nos laterais desce do topo, no central sobe da base */
.card--esq .card__botao::after,
.card--dir .card__botao::after {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 28.02%, rgba(0, 0, 0, 0.71) 88.614%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card--centro .card__botao::after {
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 44.073%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* Legendas ancoradas pela BASE. No Figma cada uma tem um `top`
   diferente, mas as três terminam a cerca de 33px do pé do card — é a
   base que manda, e é isso que mantém o alinhamento quando um card
   com legenda de quatro linhas troca de lugar com outra de uma. */
.card--esq .card__legenda,
.card--dir .card__legenda {
  left: 33px;
  bottom: 33px;
  width: 216px;
}

.card--centro .card__legenda {
  left: 34.17px;
  bottom: 36.55px;
  width: 217px;
}

/* Selo da revista: só os cards que têm um */
.card--esq .card__selo,
.card--dir .card__selo {
  left: 38.35px;
  top: 18.73px;
  width: 352.97px;
  height: 158.71px;
}

.card--centro .card__selo {
  left: 33.89px;
  top: 10.7px;
  width: 444.26px;
  height: 199.76px;
}

/* A foto do card central entra ampliada e deslocada. scaleMode CROP no
   Figma estica a imagem inteira e deixa a caixa recortar — por isso
   object-fit: fill, e não cover. */
.card--centro .card__foto {
  position: absolute;
  left: -174.01px;   /* -33,29% */
  top: -88.22px;     /* -13,53% */
  width: 697.01px;   /* 133,35% */
  height: 900.93px;  /* 138,18% */
  object-fit: fill;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card__selo {
    transition: none;
  }
}

/* Os indicadores da fila de cards existem só no celular: aqui a
   navegação é o clique que gira os slots. O JavaScript os cria sempre —
   é o CSS que decide onde eles aparecem. */
.cards__indicadores {
  display: none;
}

/* Card fora dos três slots (quando houver mais de três): fica atrás do
   centro, invisível, e entra na rotação quando for a vez dele. */
.card--oculto {
  left: 405.83px;
  top: 0;
  width: 522.69px;
  height: 652px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Card atravessando de uma ponta à outra: fica atrás de todos durante
   o movimento, para a rotação não parecer quebrar no fim do ciclo. */
.card--atras {
  z-index: 0;
}

/* ---------- Resposta ao ponteiro nos cards ---------- */

/* Só onde existe ponteiro de verdade. Em tela de toque o estado de
   hover gruda depois do toque e o card fica preso aumentado. */
@media (hover: hover) and (pointer: fine) {

  /* Apenas os laterais: o central não navega para lugar nenhum, e dar
     resposta de hover a ele sugeriria que é clicável. */
  .card--esq .card__botao,
  .card--dir .card__botao {
    transition:
      transform  240ms var(--easing-saida),
      box-shadow 240ms var(--easing-saida);
  }

  .card--esq .card__botao:hover,
  .card--dir .card__botao:hover {
    transform: scale(1.03);
    box-shadow: 0 18px 40px rgba(21, 46, 68, 0.22);
  }

  /* O véu abre um pouco e a foto respira */
  .card--esq .card__botao:hover::after,
  .card--dir .card__botao:hover::after {
    opacity: 0.8;
  }
}

/* Quem navega por teclado recebe o mesmo destaque de quem usa o mouse */
.card--esq .card__botao:focus-visible,
.card--dir .card__botao:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(21, 46, 68, 0.22);
}

.card--esq .card__botao:focus-visible::after,
.card--dir .card__botao:focus-visible::after {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .card--esq .card__botao,
  .card--dir .card__botao,
  .card__botao::after {
    transition: none;
  }

  /* Sem escala, mas a sombra permanece: o affordance não se perde */
  .card--esq .card__botao:hover,
  .card--dir .card__botao:hover,
  .card--esq .card__botao:focus-visible,
  .card--dir .card__botao:focus-visible {
    transform: none;
  }
}

/* ---------- Frase de fecho ---------- */

.imprensa__fecho {
  position: absolute;
  left: 50%;
  top: 1175px;
  transform: translateX(-50%);
  width: 957px;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 40px;
  letter-spacing: var(--ls-corpo);
  text-align: center;
  color: var(--cor-azul-profundo);
}


/* ============================================================
   RODAPÉ
   ============================================================ */

/* Vai de 6019, onde a seção 5 termina, ao fim da página, em 8112 */
.rodape {
  position: relative;
  height: 2093px;

  /* O fundo claro da seção 5 segue POR BAIXO do rodapé no Figma. É ele
     que o brilho, ainda transparente lá em cima, deixa aparecer — sem
     isto o topo do rodapé sai ~9 tons claro demais. */
  background-color: var(--fundo-claro);
  color: var(--cor-texto-rodape);
}

/* ---------- Fundo em duas camadas ---------- */

.rodape__fundo {
  position: absolute;
  inset: 0;
}

/* Brilho, desfocado em 254px no Figma: é ele que faz a passagem do
   fundo claro da seção anterior para o escuro do rodapé. Começa 56px
   ACIMA do rodapé, por baixo da seção 5.

   Três conversões que não são 1:1, todas documentadas no CLAUDE.md:
   o retângulo tem rotation 180 (o centro do gradiente espelha), o raio
   de desfoque do Figma é o dobro do comprimento do blur do CSS, e as
   paradas em 76,9 / 84,6 / 92,3% existem porque o Figma interpola com
   alfa direto e o CSS pré-multiplica. */
.rodape__brilho {
  position: absolute;
  left: -312px;
  top: -56px;
  width: 2796px;
  height: 1696px;
  filter: blur(127px);
  background-image: radial-gradient(
    2626.3px 1593.06px at 1398px 1593.06px,
    var(--cor-glow-rodape) 0%,
    var(--cor-glow-rodape-meio) 69.137%,
    rgba(45, 75, 101, 0.75) 76.853%,
    rgba(37, 66, 90, 0.5) 84.569%,
    rgba(29, 56, 79, 0.25) 92.284%,
    rgba(21, 46, 68, 0) 100%
  );
}

/* Bloco escuro por cima do brilho. Aqui as duas cores da transição
   final são a MESMA, então não precisa de parada intermediária:
   pré-multiplicar e não pré-multiplicar dá no mesmo. */
.rodape__escuro {
  position: absolute;
  left: -181px;
  top: 208px;
  width: 2282px;
  height: 1885px;
  background-image: radial-gradient(
    2143.5px 1770.59px at 1141px 1770.59px,
    var(--fundo-rodape-centro) 0%,
    var(--fundo-rodape-borda) 69.137%,
    rgba(7, 16, 23, 0) 100%
  );
}

/* ---------- Selo de cera ---------- */

/* Mesma arte e mesmo recorte da seção 3, em caixa maior. Dois
   elementos: a caixa recorta, a imagem transborda. */
.rodape__selo {
  position: absolute;
  left: 695px;
  top: 199px;
  width: 572px;
  height: 560px;
  overflow: hidden;
}

.rodape__selo img {
  position: absolute;
  left: -9.73%;
  top: -5.82%;
  width: 114.09%;
  height: 109.25%;
  max-width: none;
}

/* ---------- Conteúdo, no grid de 70px ---------- */

.rodape__conteudo {
  position: absolute;
  left: var(--recuo-lateral);
  top: 854px;
  width: var(--container);
}

/* Letreiro ALPHAZ gigante com o emblema à esquerda. As duas peças são
   recortes de logo-alphaz.svg, os mesmos arquivos da Group. O letreiro
   é branco a 3% de opacidade; o emblema é uma forma opaca quase da cor
   do fundo — no Figma são tratamentos diferentes que dão no mesmo
   resultado. Cada caixa respeita a proporção do recorte, senão a arte
   distorce (os SVGs têm preserveAspectRatio="none"). */
.rodape__marca {
  position: relative;
  height: 297px;
  overflow: hidden;
}

/* O emblema da Habitat não é o mesmo da Group: aqui é um disco cheio
   com a árvore vazada (o nó "Exclude" do Figma), em #111B24 opaco;
   lá é de traço. Por isso o arquivo tem nome próprio. */
.rodape__emblema {
  position: absolute;
  left: 0;
  top: 0;
  width: 297px;
  height: 297px;
}

/* Das duas artes do emblema, o desktop mostra a da Habitat. A troca é
   por classe e não pelo atributo `hidden`: o `img { display: block }`
   do base.css vence o `[hidden]` da folha do navegador, e a versão
   errada aparecia junto. */
.rodape__emblema--claro {
  display: none;
}

.rodape__letreiro {
  position: absolute;
  left: 355.11px;
  top: 32.24px;
  width: 1424.88px;
  height: 232.53px;
  max-width: none;
}

/* ---------- Corpo ---------- */

/* Vãos de 62px entre os quatro blocos — conferido no Figma: topo,
   colunas, divisor e copyright caem todos em múltiplos exatos. */
.rodape__corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 62px;
  margin-top: 65px;   /* 362 do Frame 70 menos os 297 do letreiro */
}

.rodape__topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 67px;
  width: 739px;
}

/* A fila de logos transborda os 739px da coluna, centrada — é assim no
   Figma. Sem o flex-shrink: 0 o navegador encolhe o item mais frágil
   da fila (o divisor de 1px) até zero: imagem tem min-width automático,
   o span não tem. A altura da fila é a do divisor, 103px, que passa
   dos logos em cima e embaixo. */
.rodape__logos {
  display: flex;
  align-items: center;
  gap: 62px;
  flex-shrink: 0;
}

/* Os dois logos não têm a mesma largura: o da Habitat leva o letreiro
   "HABITAT" embaixo e é mais alto. Larguras do Figma. */
.rodape__logo-group {
  width: 253.7px;
  height: 53.7px;
  flex-shrink: 0;
}

.rodape__logo-marca {
  width: 276.3px;
  height: 58.6px;
  flex-shrink: 0;
}

/* Mesmo gradiente do divisor horizontal, de pé. Feito em CSS em vez de
   SVG: rotacionar um SVG não muda a caixa de layout, e a linha da flex
   continuaria com a altura dos logos. */
.rodape__divisor-vert {
  width: 1px;
  margin-inline: -0.5px;   /* no Figma a linha ocupa 0 no layout da fila */
  flex-shrink: 0;
  height: 103px;
  background-image: linear-gradient(
    180deg,
    rgba(58, 76, 134, 0) 0%,
    var(--cor-linha-rodape) 53.85%,
    rgba(89, 116, 204, 0) 100%
  );
}

.rodape__texto {
  width: 100%;
  height: 94px;   /* caixa do Figma, maior que o fluxo das 3 linhas */
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-corpo);
  text-align: center;
  color: var(--cor-texto-rodape);
}

/* Único botão da página sem borda e sem a sombra pêssego, e o único de
   60px em vez de 73. A luz do hover acende no bege dele. */
.rodape__botao {
  --cor-luz: var(--luz-bege);
  width: 245px;
  height: 60px;
  border: 0;
  background-image: var(--grad-botao-rodape);
  color: transparent;
  filter: none;
}

/* ---------- Quatro colunas ---------- */

.rodape__colunas {
  display: flex;
  align-items: flex-start;
  gap: 183px;
}

.coluna {
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.coluna--navegue { width: 186px; }
.coluna--contato,
.coluna--onde,
.coluna--social { width: 279px; }

.coluna--social { gap: 28px; }

.coluna__titulo {
  font-weight: var(--peso-medio);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--cor-texto-rodape);
}

/* Altura fixa reproduz a caixa do Figma, menor que o fluxo real */
.coluna__lista {
  height: 149px;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  text-transform: uppercase;
  white-space: nowrap;
}

.coluna--navegue .coluna__lista { height: 162px; }

.coluna__lista a {
  transition: color 200ms var(--easing-saida);
}

.coluna__lista a:hover,
.coluna__lista a:focus-visible {
  color: var(--cor-branco);
}

/* ---------- Redes sociais ---------- */

.rodape__social {
  display: flex;
  align-items: center;
  gap: 29px;
}

.rodape__social a {
  display: block;
  transition: opacity 200ms var(--easing-saida);
}

.rodape__social a:hover,
.rodape__social a:focus-visible {
  opacity: 0.65;
}

.rodape__social img {
  width: 35.28px;
  height: 35.22px;
}

/* ---------- Divisor e copyright ---------- */

/* 1771,5px e não os 1780 do container: é a largura do Frame 70, que é
   o que o Figma desenha aqui. */
.rodape__divisor {
  width: 1771.5px;
  height: 1px;
  border: 0;
  background-image: linear-gradient(
    90deg,
    rgba(58, 76, 134, 0) 0%,
    var(--cor-linha-rodape) 53.85%,
    rgba(89, 116, 204, 0) 100%
  );
}

.rodape__copyright {
  width: 1771.5px;
  font-weight: var(--peso-medio);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  text-align: center;
  color: var(--cor-texto-rodape);
}

/* Sem movimento, o balde fica onde o Figma o põe. */
@media (prefers-reduced-motion: reduce) {
  .produtos {
    --parallax-balde: 0px;
  }
}


/* ============================================================
   CABEÇALHO EM FAIXA — páginas internas
   ============================================================

   Na home o cabeçalho é transparente sobre a hero. Nas páginas
   internas ele ganha faixa azul própria. O CONTEÚDO não muda de
   lugar: logo em x 70, botão terminando em 1850, bloco começando
   em y 55 — igual à home. Só o fundo é novo.

   A faixa é o retângulo `2:7634` do Figma: 1920 × 438 em y −260,
   raio 48 nos quatro cantos. Só os 178px de baixo entram na
   página, então na prática é uma faixa de 178px com os cantos
   INFERIORES arredondados.

   O fundo é a mesma composição da hero da home: `--grad-hero-brilho`
   na mesma caixa de 2352 × 1483, subida para y −203, mais uma
   camada de preto a 20%.

   O Figma aplica `blur(127px)` nesta camada e aqui não aplicamos.
   Os cálculos acima são do gradiente sem desfoque e bateram com o
   render que tem desfoque, a 1 tom de 255: num radial já suave o
   desfoque é praticamente identidade. Desfocar uma caixa de
   2352 × 1483 custa caro em toda rolagem, e não muda nada.       */

.faixa-topo {
  position: relative;
  z-index: 2;        /* a hero sobe 103px por baixo da faixa */
  height: 178px;
  overflow: hidden;
  border-radius: 0 0 48px 48px;
  color: var(--cor-branco);
}

.faixa-topo__brilho {
  position: absolute;
  left: -216px;
  top: -203px;
  width: 2352px;
  height: 1483px;
  background-image: var(--grad-hero-brilho);
}

/* O preto de 20% do Figma. Sem ele a faixa sai ~25% mais clara. */
.faixa-topo__veu {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.faixa-topo__conteudo {
  position: relative;
  z-index: 1;
  padding-top: 55px;
}


/* ============================================================
   PRODUTO · SEÇÃO 1 — hero do produto
   ============================================================

   Começa em y 75 da página, ou seja, SOBE 103px por baixo da faixa
   do cabeçalho (178). No Figma a faixa é desenhada depois e fica
   por cima; aqui é o `z-index` da `.faixa-topo` que faz isso.

   Recuo: o Figma põe a coluna de texto em x 200 e os selos em 198.
   Aqui vão os dois para 70, pela regra do rail contínuo — mesma
   decisão que moveu o parágrafo do hero da Group de 199 para 70.  */

.produto-hero {
  position: relative;
  height: 1053px;
  margin-top: -103px;
  color: var(--cor-azul-profundo);
}

.produto-hero__fundo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 990px;
  background-image: linear-gradient(
    180deg,
    var(--fundo-claro) 0%,
    rgba(241, 242, 244, 0) 100%
  );
}

/* Mandala decorativa atrás do balde, a 4% de opacidade.
   `scaleMode: CROP`: a caixa recorta e a imagem transborda. */
.produto-hero__mandala {
  position: absolute;
  left: 882px;
  top: 124px;
  width: 910px;
  height: 929px;
  overflow: hidden;
  opacity: 0.04;
}

.produto-hero__mandala img {
  position: absolute;
  left: -49.35%;
  top: -4.78%;
  width: 198.79%;
  height: 109.38%;
  max-width: none;
  object-fit: fill;
}

.produto-hero__balde {
  position: absolute;
  left: 1035px;
  top: 256px;
  width: 583px;
  height: 693px;
  max-width: none;
}

/* ---------- Coluna de texto ---------- */

.produto-hero__conteudo {
  position: relative;
  z-index: 1;
  /* Sem recuo próprio de propósito: os filhos são absolutos e os
     `left: 70px` deles são medidos da borda da seção. Pôr a classe
     `container` aqui somaria 70 + 70 e jogaria tudo para 140. */
}

.produto-hero__olho {
  position: absolute;
  left: 70px;
  top: 210px;
  width: 440px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: 37.1px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* A largura de 550 é o que quebra "CIMENTO / QUEIMADO" — não há \n
   no Figma. Trocar o nome do produto pode mudar a quebra.
   Ângulo do gradiente: 137,869° para esta caixa de 550 × 168. */
.produto-hero__titulo {
  position: absolute;
  left: 70px;
  top: 302px;
  width: 550px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  background-image: linear-gradient(137.869deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.produto-hero__corpo {
  position: absolute;
  left: 70px;
  top: 518px;
  width: 659px;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 35.4px;
  letter-spacing: var(--ls-corpo);
}

/* Sem borda e sem a sombra pêssego, como o do rodapé. 60px de altura,
   não os 73 das outras pílulas. */
.produto-hero__comprar {
  position: absolute;
  left: 70px;
  top: 708px;
  width: 245px;
  height: 60px;
  border: 0;
  filter: none;
  background-image: var(--grad-botao-escuro);
  color: var(--cor-branco);
}

/* ---------- Selos de atributo ---------- */

.produto-hero__selos {
  position: absolute;
  left: 70px;
  top: 864px;
  display: flex;
  gap: 45.029px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15.39px;
  width: 121.978px;
}

/* Largura do rótulo, por selo, lida do Figma. Ver o comentário em
   `.selo__rotulo`: é a caixa que decide a quebra. */
.selo--durabilidade { --larg-rotulo: 121.978px; }
.selo--rendimento   { --larg-rotulo: 111.718px; }
.selo--aplicacao    { --larg-rotulo: 104.878px; }
.selo--nao-desbota  { --larg-rotulo:  87.779px; }

.selo__disco {
  position: relative;
  width: 104.878px;
  height: 104.878px;
}

.selo__anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Todo ícone é centrado no anel. No Figma cada um tem um `top`/`left`
   próprio, mas os centros caem em (61, 53) contra o centro do anel em
   (61, 52,5) — a diferença é folga de desenho, não intenção. */
.selo__icone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}

/* A largura de cada rótulo vem do Figma, por selo. É ela que decide a
   quebra: com uma largura só para os quatro, "Não desbota" cabe numa
   linha e o desenho tem duas. Mesma regra das colunas de produto da
   home. */
.selo__rotulo {
  width: var(--larg-rotulo, 100%);
  font-weight: var(--peso-medio);
  font-size: 16px;
  line-height: 20.178px;
  letter-spacing: 0.8px;
  text-align: center;
}


/* ============================================================
   PRODUTO · SEÇÃO 2 — veja na prática
   ============================================================ */

.produto-veja {
  position: relative;
  height: 1421px;
  /* A hero termina em 1128 e esta seção começa em 1258 no Figma. */
  margin-top: 130px;
}

/* O retângulo do Figma tem 6280px e atravessa o resto da página, mas
   depois de 20,012% dele já é branco puro — que é a cor da página.
   Só os 1257px do degradê precisam existir aqui; o resto seria pintar
   branco sobre branco e ainda passaria por cima das seções de baixo. */
.produto-veja__fundo {
  position: absolute;
  left: -90px;
  top: 0;
  width: 2121px;
  height: 1257px;
  background-image: linear-gradient(
    180deg,
    var(--fundo-claro) 0%,
    var(--cor-branco) 100%
  );
}

/* A chamada do Figma está centrada em 970,5 e não em 960. Recentrada,
   como de praxe no projeto. */
.produto-veja__chamada {
  position: relative;
  z-index: 1;
  padding-top: 102px;
  text-align: center;
  color: var(--cor-azul-profundo);
}

.produto-veja__olho {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: 38px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* Ângulo 161,524° para esta caixa de 647 × 73. */
.produto-veja__titulo {
  width: 647px;
  margin: 19px auto 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  background-image: linear-gradient(161.524deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Os dois cards ---------- */

/* 760 + 5 + 760 = 1525, centrados em 960. No Figma o par está em 200 e
   965, ou seja 2,5px à direita do centro — recentrado. */
.aplicacoes {
  position: absolute;
  left: 197.5px;
  top: 299px;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aplicacao {
  position: relative;
  width: 760px;
  height: 729px;
  border-radius: 10px;
  overflow: hidden;
  color: var(--cor-branco);
}

.aplicacao__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O segundo card é `scaleMode: CROP`, não `FILL`: a imagem transborda a
   caixa com deslocamento próprio. E leva um véu preto de 16%. */
.aplicacao--ambientes .aplicacao__foto {
  inset: auto;
  left: -41.3%;
  top: -2.63%;
  width: 175.13%;
  height: 136.94%;
  max-width: none;
  object-fit: fill;
}

.aplicacao--ambientes::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.16);
}

/* O texto é ancorado pela base do card, não pelo topo: os dois títulos
   têm número de linhas diferente (1 e 3) e é o pé que fica alinhado. */
.aplicacao__texto {
  position: absolute;
  left: var(--recuo-texto);
  bottom: var(--base-texto);
  z-index: 1;
}

.aplicacao--pisos     { --recuo-texto: 79px; --base-texto: 73px; }
.aplicacao--ambientes { --recuo-texto: 73px; --base-texto: 71px; }

/* Cada nome tem largura própria, que é o que decide a quebra:
   "PISOS" cabe em 202; "ÁREAS INTERNAS E EXTERNAS" precisa de 437
   para quebrar em três linhas como no desenho. */
.aplicacao__nome {
  width: var(--larg-nome);
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 65px;
  line-height: 58.8px;
  letter-spacing: -2.6px;
  text-transform: uppercase;
}

.aplicacao__descricao {
  width: var(--larg-descricao);
  margin: 65px 0 0;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 30.4px;
  letter-spacing: var(--ls-corpo);
}

.aplicacao--pisos     { --larg-nome: 202px; --larg-descricao: 437px; }
.aplicacao--ambientes { --larg-nome: 437px; --larg-descricao: 559px; }


/* ============================================================
   PRODUTO · SEÇÃO 3 — cores disponíveis
   ============================================================

   Seção opcional: nem todo produto a tem, e a ausência é
   proposital, não desenho inacabado. Para incluí-la numa página
   que ainda não a tenha, copie o bloco do HTML de uma que tenha.

   No Figma as 18 amostras são recortes de UM sprite de 1774 × 887,
   cada uma com deslocamento próprio. Aqui viraram 18 arquivos
   (`cor-*.webp`), o que deixa o cliente trocar uma cor sozinha sem
   mexer em coordenada nenhuma.

   Grade: o Figma põe as colunas em 168, 460, 763, 1057, 1363 e 1663,
   com vãos de 20, 31, 22, 28 e 28 — e a última amostra termina em
   1935, ou seja, 15px fora da página. Regularizado para o container
   de 1780: seis colunas de 272 com vão igual de 29,6.               */

.produto-cores {
  position: relative;
  height: 1421px;
  margin-top: -242px;
  background-color: var(--fundo-claro);
  color: var(--cor-azul-profundo);
}

.produto-cores__chamada {
  padding-top: 102px;
  text-align: center;
}

.produto-cores__olho {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: 38px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* Ângulo 163,089° para esta caixa de 711 × 73. */
.produto-cores__titulo {
  width: 711px;
  margin: 19px auto 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  background-image: linear-gradient(163.089deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cores {
  position: absolute;
  left: var(--recuo-lateral);
  top: 359px;
  width: var(--container);
  display: grid;
  grid-template-columns: repeat(6, 272px);
  justify-content: space-between;
  row-gap: 65px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.cor__amostra {
  display: block;
  width: 272px;
  height: 97px;
  border: 1px solid var(--borda-amostra);
  border-radius: 10px;
  object-fit: cover;
}

/* A pílula abraça o texto, com 160 de mínimo — não é largura fixa.
   No Cimento todos os nomes são curtos e as 18 pílulas ficam em 160;
   no Granilite os nomes são longos ("Barra de chocolate", "Caminho de
   pedra") e elas vão de 160 a 272 no Figma. Com largura fixa o nome
   quebrava em duas linhas, que o desenho não tem.

   Por isso `white-space: nowrap`: é ele que garante a linha única,
   independentemente do recuo. */
.cor__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 66px;
  /* 18px: é o recuo do próprio desenho. "Barra de chocolate" tem caixa
     de 236 numa pílula de 272, e "Caminho de pedra" 232 em 265 — os dois
     dão ~18 de cada lado. Com 24 algumas pílulas curtas do Cimento
     passavam dos 160 que o Figma tem. */
  padding-inline: 18px;
  white-space: nowrap;
  border: 1px solid var(--cor-texto-corpo);
  border-radius: var(--raio-botao);
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 35.4px;
  letter-spacing: var(--ls-corpo);
}


/* ============================================================
   PRODUTO · SEÇÃO 4 — aplicações reais
   ============================================================

   Reusa o efeito dos cards de imprensa da home: três cards em slots
   (esquerda, centro, direita), o do centro maior e por cima, e o
   clique num lateral o traz para o centro. O `script.js` já faz isso
   — ele se liga sozinho em `[data-cards]`. Só a geometria é outra,
   e por isso estas regras são escopadas em `.reais__cards`, que tem
   especificidade maior que as regras globais de `.card--*`.

   O recorte da foto: o Figma mostra a fonte (2304 × 4096, retrato) a
   100,02% × 257,68% com o topo em −55,08%. Convertido, isso é a faixa
   do meio, y 876 a 2466, largura inteira — e a razão dessa faixa
   (1,449) é exatamente a da caixa do card. Por isso a arte já vem
   recortada e basta `object-fit: cover`.                            */

/* A caixa dos cards tem 1006, mas a seção tem 1129: os 123 a mais são
   o vão até o rodapé. Ele fica dentro da seção, e não como margem do
   rodapé, para que o fundo corra contínuo — com margem aparecia uma
   faixa da cor da página entre o carrossel e o rodapé. */
.produto-reais {
  position: relative;
  height: 1129px;
}

/* No Figma o conjunto está em x 39 e tem 1828 de largura: centro em
   953, 7px à esquerda do centro da página. Recentrado. */
.reais__cards {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1828px;
  height: 1006px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reais__cards .card--esq,
.reais__cards .card--dir {
  top: 117.58px;
  width: 1117.09px;
  height: 770.85px;
  z-index: 1;
}

.reais__cards .card--esq { left: 0; }
.reais__cards .card--dir { left: 710px; }

.reais__cards .card--centro {
  left: 184.97px;
  top: 0;
  width: 1457.87px;
  height: 1006px;
  z-index: 2;
}

.reais__cards .card__botao {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
}

.reais__cards .card--esq .card__botao,
.reais__cards .card--dir .card__botao { border-radius: 27.335px; }

.reais__cards .card--centro .card__botao {
  border: 1.06px solid var(--cor-branco);
  border-radius: 35.674px;
  cursor: default;
}

.reais__cards .card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O véu do Figma: faixa escura só no pé, para as barras, mais um
   preto chapado de 20% no card inteiro. */
.reais__cards .card__botao::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 9.0024%, rgba(0, 0, 0, 0) 14.971%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* ---------- Chamada dentro do card ---------- */

.reais__texto {
  position: absolute;
  z-index: 1;
  text-align: left;
  color: var(--cor-branco);
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
}

.reais__cards .card--esq .reais__texto,
.reais__cards .card--dir .reais__texto { left: 71.98px; top: 58.31px; width: 429.16px; }
.reais__cards .card--centro .reais__texto { left: 93.94px; top: 76.1px; width: 560.08px; }

.reais__olho { margin: 0; letter-spacing: -0.04em; }
.reais__nome { margin: 0; letter-spacing: -0.04em; }

.reais__cards .card--esq .reais__olho,
.reais__cards .card--dir .reais__olho { font-size: 19.939px; line-height: 26.759px; }
.reais__cards .card--esq .reais__nome,
.reais__cards .card--dir .reais__nome { margin-top: 13.704px; font-size: 53.17px; line-height: 56.094px; }

.reais__cards .card--centro .reais__olho { font-size: 26.021px; line-height: 34.923px; }
.reais__cards .card--centro .reais__nome { margin-top: 17.885px; font-size: 69.389px; line-height: 73.206px; }

/* ---------- Barras indicadoras ---------- */

/* Na home estas barras ficam ocultas no desktop; aqui o desenho as
   mostra, sobre o card do centro. O `script.js` gera os botões e
   marca `aria-current` no card que está no centro. */
.produto-reais .cards__indicadores {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 34.5px;
  transform: translateX(-50%);
  gap: 5.351px;
  align-items: center;
  z-index: 3;
}

.produto-reais .carrossel__indicador {
  width: 42.809px;
  height: 7.135px;
  padding: 0;
  border: 0;
  border-radius: 17.837px;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: width 300ms var(--easing-saida),
              background-color 300ms var(--easing-saida);
}

.produto-reais .carrossel__indicador[aria-current="true"] {
  width: 105.238px;
  background-color: var(--cor-branco);
}



/* ============================================================
   VARIANTES POR PRODUTO
   ============================================================

   O gabarito é o mesmo nas três páginas. O que muda, e por quê:

   - A largura da caixa do TÍTULO, que é o que decide a quebra do
     nome do produto em duas linhas.
   - O ÂNGULO do gradiente do título: o Figma o recalcula para a
     proporção de cada caixa. 550 → 137,869° · 595 → 140,099° ·
     618 → 141,165°. Um ângulo só erraria nas outras duas.
   - A largura de cada rótulo de selo, que decide a quebra dele.
   - Onde a seção de aplicações reais começa, porque a Tinta não
     tem a cartela de cores e tudo sobe.                          */

.produto-hero--cimento   { --larg-olho: 440px; --larg-titulo: 550px; --ang-titulo: 137.869deg; }
.produto-hero--tinta     { --larg-olho: 362px; --larg-titulo: 595px; --ang-titulo: 140.099deg; }
.produto-hero--granilite { --larg-olho: 440px; --larg-titulo: 618px; --ang-titulo: 141.165deg; }

.produto-hero__olho   { width: var(--larg-olho); }
.produto-hero__titulo { width: var(--larg-titulo);
                        background-image: linear-gradient(var(--ang-titulo), var(--paradas-titulo)); }

/* Rótulos dos selos da Tinta e do Granilite */
.selo--cobertura     { --larg-rotulo: 121.978px; }
.selo--resistencia   { --larg-rotulo: 111.718px; }
.selo--elasticidade  { --larg-rotulo: 121.978px; }
.selo--hidro         { --larg-rotulo: 121.978px; }
.selo--rustico       { --larg-rotulo: 121.978px; }
.selo--pedra         { --larg-rotulo: 121.978px; }
.selo--aplicar       { --larg-rotulo: 104.878px; }

/* ---------- Tinta: os dois cards têm outras larguras de texto ---------- */

.aplicacao--versatilidade { --recuo-texto: 79px; --base-texto: 73px;
                            --larg-nome: 528px; --larg-descricao: 528px; }
.aplicacao--personalizacao{ --recuo-texto: 73px; --base-texto: 71px;
                            --larg-nome: 559px; --larg-descricao: 559px; }

/* ---------- Granilite: UM card largo em vez de dois ---------- */

/* No Figma o card tem 1519 × 729 em x 211, ou seja, centro em 970,5.
   Recentrado, como o par de cards das outras páginas. */
.aplicacoes--unica .aplicacao {
  width: 1519px;
}

.aplicacao--premium {
  --recuo-texto: 68px;
  --base-texto: 60px;
  --larg-nome: 343px;
  --larg-descricao: 637px;
}

/* ---------- Onde a seção de aplicações reais começa ---------- */

/* Sem a cartela de cores, a Tinta encurta: a seção vem logo depois
   de "veja na prática", que termina em 2679, e começa em 2509. */
.produto-veja + .produto-reais {
  margin-top: -170px;
}

.produto-cores + .produto-reais {
  margin-top: -32px;
}

/* ---------- Continuidade do fundo até o pé da página ----------

   O fundo do carrossel não é uma cor própria: ele continua o que a
   seção de cima deixou, senão aparece uma linha marcando a emenda.

   - Com cartela de cores (Cimento e Granilite): a cartela é um chapado
     de `--fundo-claro` que no Figma segue até o fim da página. O
     carrossel e o rodapé herdam esse claro.
   - Sem cartela (Tinta): o degradê de "veja na prática" termina em
     BRANCO e assim segue. Pintar o carrossel de `--fundo-claro` ali
     criava exatamente a divisória que não existe no desenho — e o
     mesmo valia para o rodapé, que traz o claro herdado da home. */

.produto-cores + .produto-reais,
.produto-cores ~ .produto-reais + .rodape {
  background-color: var(--fundo-claro);
}

.produto-veja + .produto-reais,
.produto-veja + .produto-reais + .rodape {
  background-color: transparent;
}


/* ============================================================
   QUEM SOMOS
   ============================================================ */

/* ---------- Topo: foto de largura inteira e selo a cavalo ---------- */

/* O selo fica fora da caixa que recorta: ele monta na borda da foto,
   108px acima e 98 abaixo. Dentro dela seria cortado ao meio. */
.quem-topo {
  position: relative;
  height: 743px;
}

.quem-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 48px 48px;
  color: var(--cor-branco);
}

.quem-hero__foto {
  position: absolute;
  left: -86px;
  top: -303px;
  width: 2113px;
  height: 1189px;
  max-width: none;
  object-fit: cover;
}

.quem-hero__veu {
  position: absolute;
  left: -109px;
  top: -328px;
  width: 2052px;
  height: 1154px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(180deg, rgba(46, 37, 26, 0.7) 22.184%, rgba(0, 0, 0, 0) 52.546%, rgba(0, 0, 0, 0) 93.981%);
}

.quem-hero__conteudo {
  position: relative;
  z-index: 1;
  padding-top: 55px;
}

.quem-hero__chamada {
  position: absolute;
  left: 0;
  top: 212px;
  width: 100%;
  text-align: center;
}

.quem-hero__olho {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

.quem-hero__titulo {
  width: 1129px;
  margin: 26px auto 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

.quem-hero__corpo {
  width: 789px;
  margin: 33px auto 0;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
}

/* `scaleMode: CROP`: a caixa recorta e a imagem transborda. Mesmas
   porcentagens do selo da seção 3 da home. */
.quem-topo__selo {
  position: absolute;
  left: 856px;
  top: 635px;
  width: 210px;
  height: 206px;
  overflow: hidden;
  z-index: 2;
}

.quem-topo__selo img {
  position: absolute;
  left: -9.73%;
  top: -5.82%;
  width: 114.09%;
  height: 109.25%;
  max-width: none;
}

/* ---------- O que nos move ---------- */

.quem-move {
  position: relative;
  height: 535px;
  margin-top: 90px;
  color: var(--cor-azul-profundo);
  text-align: center;
}

.quem-move__olho {
  padding-top: 61px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* Ângulo 166,685° para esta caixa de 976 × 78. */
.quem-move__titulo {
  width: 976px;
  margin: 19px auto 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  background-image: linear-gradient(166.685deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Os três pilares. As larguras são as do Figma, por coluna; o conjunto
   soma 1547,7 e fica centrado em 960 (no desenho está em 970). */
.pilares {
  position: absolute;
  left: 50%;
  top: 313px;
  transform: translateX(-50%);
  display: flex;
  gap: 106px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pilar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 430.866px;
}

.pilar:last-child { width: 473.953px; }

.pilar__risco {
  display: block;
  width: 119.5px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.35;
}

.pilar__nome {
  margin: 0;
  font-weight: 300;
  font-size: 36.803px;
  line-height: 44.882px;
  letter-spacing: 12.8811px;
  text-transform: uppercase;
  /* O tracking empurra o texto para a direita; o recuo devolve o
     centro óptico. */
  text-indent: 12.8811px;
}

.pilar__texto {
  margin: 0;
  font-weight: var(--peso-medio);
  font-size: 19.748px;
  line-height: 35.906px;
  letter-spacing: 0.9874px;
}

/* ---------- De Passa Quatro ---------- */

.quem-visao {
  position: relative;
  height: 1220px;
  margin-top: 76px;
  overflow: hidden;
  color: var(--cor-branco);
}

/* As duas elipses vêm como SVG porque já trazem o desfoque dentro —
   o arquivo é maior que o nó na exata medida do borrão (314px de cada
   lado), e é por isso que left/top são negativos. */
.quem-visao__brilho-claro {
  position: absolute;
  left: -510px;
  top: -314px;
  width: 1990px;
  height: 1943px;
  max-width: none;
}

.quem-visao__brilho-escuro {
  position: absolute;
  left: -38px;
  top: -151px;
  width: 1710px;
  height: 1674px;
  max-width: none;
}

.quem-visao__painel {
  position: absolute;
  left: 976px;
  top: -11px;
  width: 944px;
  height: 1379px;
  background-color: #000;
}

.quem-visao__foto {
  position: absolute;
  left: 976px;
  top: -276px;
  width: 948px;
  height: 1496px;
  overflow: hidden;
}

.quem-visao__foto img {
  position: absolute;
  left: -6.28%;
  top: -16.75%;
  width: 112.66%;
  height: 136.79%;
  max-width: none;
  object-fit: fill;
}

.quem-visao__chamada {
  position: absolute;
  left: 189px;
  top: 191px;
  width: 786.808px;
  z-index: 1;
}

.quem-visao__olho {
  width: 413px;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 24.716px;
  line-height: 44.818px;
  letter-spacing: -0.9886px;
  text-transform: uppercase;
}

.quem-visao__titulo {
  width: 694px;
  margin: 16.988px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 95.32px;
  line-height: 102.1px;
  letter-spacing: -3.8128px;
  /* O nó do Figma está em caixa alta. Sem isto o título sai em caixa
     mista e cabe em 3 linhas onde o desenho tem 4. */
  text-transform: uppercase;
}

.quem-visao__corpo {
  position: absolute;
  left: 202px;
  top: 723px;
  width: 615px;
  z-index: 1;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 40px;
  letter-spacing: var(--ls-corpo);
}

.quem-visao__corpo p { margin: 0; }
.quem-visao__corpo p + p { margin-top: 40px; }
.quem-visao__corpo strong { font-weight: var(--peso-forte); }

/* ---------- Os três produtos ---------- */

.quem-produtos {
  position: relative;
  height: 1149px;
  margin-top: 3px;
}

.quem-produtos__grade {
  display: grid;
  grid-template-columns: repeat(3, 640px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A chamada fica por cima da coluna do meio, centrada na página. */
.quem-produtos__chamada {
  position: absolute;
  left: 0;
  top: 76px;
  width: 100%;
  z-index: 1;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 41.824px;
  line-height: 44.5px;
  letter-spacing: var(--ls-titulo);
  text-align: center;
  text-transform: uppercase;
  color: var(--cor-branco);
}

/* O pé da coluna se dissolve, não é cortado.

   A cor atravessa a borda da seção sem nenhum salto e segue
   clareando até se misturar com o brilho do rodapé, que sobe por
   baixo. Nem a arte nem o mockup são cortados ali.

   Por isso não há `overflow: hidden`: o balde transborda 69px e a
   máscara o apaga junto com o fundo. O `mask-size` é maior que a
   caixa justamente para alcançar esse transbordo. */
.quem-produto {
  position: relative;
  color: var(--cor-branco);

  /* As paradas são calibradas, não estimadas. Invertendo a composição
     do render do Figma (alfa = (render − fundo) / (arte − fundo)) sai
     ~0,23 em y 3600 da página e ~0,06 em 3680 — ou seja, a coluna já
     está quase transparente quando chega na borda da seção. Em
     porcentagem da caixa de máscara: opaca até 54%, zerando em 80%. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 54%, rgba(0, 0, 0, 0) 80%);
          mask-image: linear-gradient(180deg,
    #000 0%, #000 54%, rgba(0, 0, 0, 0) 80%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 1280px;
          mask-size: 100% 1280px;
}

.quem-produto__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quem-produto__balde {
  position: absolute;
  left: 57px;
  top: 592px;
  width: 526px;
  height: 626px;
  max-width: none;
}

.quem-produto__texto {
  position: absolute;
  left: 70px;
  top: 248px;
  z-index: 1;
}

.quem-produto__nome {
  width: var(--larg-nome);
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 65px;
  line-height: 56.5px;
  letter-spacing: -2.6px;
  text-transform: uppercase;
}

.quem-produto__descricao {
  width: var(--larg-descricao);
  margin: 65px 0 0;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 29px;
  letter-spacing: var(--ls-corpo);
}

.quem-produto__botao {
  position: absolute;
  left: 66px;
  top: 528px;
  z-index: 1;
  width: 245px;
}

/* Larguras por coluna: é a caixa que decide a quebra do nome. */
.quem-produto--cimento   { --larg-nome: 437px; --larg-descricao: 324px; }
.quem-produto--tinta     { --larg-nome: 511px; --larg-descricao: 392px; }
.quem-produto--granilite { --larg-nome: 437px; --larg-descricao: 419px; }

/* O rodapé sobe 386px por baixo dos produtos: no Figma o brilho dele
   começa dentro da seção de cima, e o conteúdo fica sempre a 1239px do
   pé da página. Fundo transparente para os produtos aparecerem através
   do topo do brilho, que ali ainda é transparente. */
.quem-produtos + .rodape {
  margin-top: -386px;
  background-color: transparent;
}

/* O brilho do rodapé tem geometria própria em cada página — é ele que
   sobe para encontrar a seção de cima, e por isso muda de altura.
   Aqui o Figma o põe em 3518 com 1552 de altura; a caixa do rodapé
   começa em 3430, logo o topo relativo é 88. Com a geometria da home
   (−56) ele começava 144px mais alto e, sendo um radial com o centro
   embaixo, escurecia a dissolução das colunas em ~40 tons. */
.quem-produtos + .rodape .rodape__brilho {
  top: 88px;
  height: 1552px;
}


/* ============================================================
   CONTATO
   ============================================================ */

/* Mesmo topo do Quem somos: foto de largura inteira com raio 48 nos
   cantos inferiores e o selo a cavalo na borda. */
.contato-topo {
  position: relative;
  height: 743px;
}

.contato-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 48px 48px;
  color: var(--cor-branco);
}

.contato-hero__foto {
  position: absolute;
  left: -226px;
  top: -54px;
  width: 2366px;
  height: 1331px;
  max-width: none;
  object-fit: cover;
}

/* O preto de 20% é o do Figma, e sozinho não basta: medido sobre a
   própria foto, o pior 1% do fundo atrás do título dava contraste 2,12
   contra o branco — abaixo do mínimo AA de 3,0 para texto grande, e o
   olho ficava em 1,94 contra os 4,5 que texto pequeno pede. A média
   enganava (14,7): quem decide é o pixel mais claro, não a média.

   O degradê vertical resolve sem apagar a foto — é o mesmo recurso que
   o topo do Quem somos já usa, e ali com 0,7; aqui 0,55 basta. Depois
   dele: título 5,15 e olho 6,93 no desktop, 6,04 e 6,49 em 390px. */
.contato-hero__veu {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 85%
  );
}

.contato-hero__conteudo {
  position: relative;
  z-index: 1;
  padding-top: 55px;
}

/* Chamada do topo. O título é branco: no Figma o preenchimento é um
   gradiente de #FFFFFF para #FFFFFF, ou seja, branco chapado — o
   gradiente ali não faz nada. */
.contato-hero__chamada {
  position: absolute;
  left: 0;
  top: 212px;
  width: 100%;
  text-align: center;
}

.contato-hero__olho {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

.contato-hero__titulo {
  width: 1501px;
  margin: 26px auto 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

/* ---------- Formulário ---------- */

.contato-form {
  position: relative;
  left: 235px;
  width: 1451px;
  height: 754px;
  margin-top: 183px;   /* 926 - 743 */
  color: var(--cor-azul-profundo);
}

.campo {
  position: absolute;
  width: 688px;
}

.campo--nome     { left: 0;    top: 0; }
.campo--email    { left: 762px; top: 0; }
.campo--telefone { left: 0;    top: 157px; }
.campo--cidade   { left: 762px; top: 157px; }
.campo--mensagem { left: 0;    top: 350px; width: 1451px; }

.campo__rotulo {
  display: block;
  height: 49px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: var(--lh-olho);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

.campo__entrada {
  display: block;
  width: 100%;
  height: 72px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--linha-formulario);
  border-radius: 0;
  background: none;
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  letter-spacing: var(--ls-corpo);
  color: var(--cor-azul-profundo);
}

.campo--mensagem .campo__entrada {
  height: 131px;
  resize: none;
}

.campo__entrada:focus-visible {
  outline: 2px solid var(--cor-azul-profundo);
  outline-offset: 4px;
}

/* Campo-armadilha contra robô de spam: invisível para gente, e o
   serviço descarta o envio se vier preenchido. */
.campo--armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contato-form__enviar {
  position: absolute;
  left: 50%;
  top: 577px;
  width: 245px;
  --deslocar: translateX(-50%);
  background-image: var(--grad-botao-enviar);
}

/* ---------- Outros canais ---------- */

.contato-canais {
  position: relative;
  height: 689px;       /* até o rodapé, em 2369 */
  margin-top: 0;
  background-color: var(--fundo-claro);
  color: var(--cor-tinta);
}

.contato-canais__chamada {
  padding-top: 77px;
  text-align: center;
}

.contato-canais__olho {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-olho);
  line-height: 43px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

/* Ângulo 158,926° para esta caixa de 561 × 73. */
.contato-canais__titulo {
  width: 561px;
  margin: 19px auto 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  background-image: linear-gradient(158.926deg, var(--paradas-titulo));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Os três canais ficam em posições próprias, como no Figma — eles não
   são igualmente espaçados: o vão até o risco muda de um para o outro.
   Os riscos são dois, de 84px, em 663 e 1257. */
.canais {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.canal {
  position: absolute;
}

.canal--whatsapp { left: 350px;  top: 297px; }
.canal--email    { left: 775px;  top: 290px; }
.canal--redes    { left: 1355px; top: 280px; }

.canal--email::before,
.canal--redes::before {
  content: "";
  position: absolute;
  top: 6px;
  width: 1px;
  height: 84px;
  background-color: var(--linha-formulario);
}

.canal--email::before { left: -112px; }
.canal--redes::before { left: -98px;  top: 16px; }

.canal__rotulo,
.canal__valor {
  display: block;
  font-weight: var(--peso-medio);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  text-transform: uppercase;
}

.canal__rotulo { font-size: var(--fs-corpo); }
.canal__valor  { font-size: var(--fs-corpo-destaque); }

a.canal__valor { color: inherit; transition: opacity 200ms var(--easing-saida); }
a.canal__valor:hover,
a.canal__valor:focus-visible { opacity: 0.7; }

.canal__redes {
  display: flex;
  gap: 29px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.canal__redes img { width: 35px; height: 35px; }

/* O brilho do rodapé sobe para encontrar o fim dos canais. */
.contato-canais + .rodape .rodape__brilho {
  top: -123px;
  height: 1763px;
}

/* Mesma geometria nas páginas de produto. */
.produto-reais + .rodape .rodape__brilho {
  top: -123px;
  height: 1763px;
}


/* ============================================================
   CALCULADORA
   ============================================================

   A página é a mesma foto de topo das outras internas, com um painel
   branco por cima. O cálculo é feito no `script.js`, que lê o
   rendimento de cada produto do próprio HTML — o cliente troca o
   número lá e a conta acompanha, sem tocar em JavaScript.          */

/* O fundo da Calculadora não é a faixa de canto arredondado das
   outras internas. São duas cópias da mesma foto — uma nítida e uma
   desfocada por cima (LAYER_BLUR 38 no Figma, que é blur(19px) em
   CSS) — sob uma máscara de gradiente vertical que apaga o pé.

   A máscara: caixa de 1920 × 1685 começando em −260, opaca até
   83,15% e zerando em 112,29%. Como a caixa termina antes disso, na
   borda de baixo ela ainda está em ~0,42 — é o corte que o desenho
   tem. Os números saem do `gradientTransform` do nó: gradiente-x =
   0,44427·v + 0,39034, com paradas em 75,977% e 88,923%.            */

.calc-topo {
  position: relative;
  z-index: 0;
  height: 743px;
  color: var(--cor-branco);
}

/* A faixa tem a mesma altura da foto do topo do Contato: 743px, com o
   raio 48 só nos cantos de baixo e corte limpo, sem esvanecimento.

   No Figma esta caixa ia de −260 a 1425 e morria num degradê — o
   painel branco cobria quase tudo e só as laterais apareciam. Encurtada
   para os 743 do Contato, as duas páginas passam a abrir igual.

   A COMPOSIÇÃO DE DENTRO NÃO MUDOU. As camadas continuam nas mesmas
   posições relativas entre si; o que mudou foi a origem da caixa, de
   −260 para 0, e por isso cada `top` de filho desceu 260. A caixa
   agora só recorta mais cedo. */
.calc-fundo {
  position: absolute;
  inset: 0;

  /* O raio vive numa variável porque ele aparece duas vezes: no
     `border-radius` e no `clip-path`. O celular troca só a variável. */
  --raio-fundo: 0 0 48px 48px;
  border-radius: var(--raio-fundo);
  overflow: hidden;

  /* `clip-path` ALÉM do `overflow: hidden`, e não no lugar dele.

     O Safari não recorta filho com `filter` pelo canto arredondado do
     pai — e aqui dentro existe um: a segunda foto leva `blur(19px)`.
     No iPhone o borrão escapava da curva e aparecia como uma mancha
     cinza atrás dos cantos de baixo. O `clip-path` recorta o que o
     `overflow` deixa passar; no Chrome os dois dizem a mesma coisa e
     nada muda. */
  clip-path: inset(0 round var(--raio-fundo));
}

/* Camada 1: a foto nítida (a mesma do topo do Contato), em `cover` —
   a proporção da arte e a da caixa são iguais, 1,777, então não há
   recorte. Por cima dela, preto a 20%. */
.calc-fundo__nitida,
.calc-fundo__veu-nitida {
  position: absolute;
  left: -504px;
  top: -211px;   /* era 49 numa caixa que começava em −260 */
  width: 2922px;
  height: 1644px;
}

.calc-fundo__nitida {
  max-width: none;
  object-fit: cover;
}

.calc-fundo__veu-nitida {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Camada 2: a mesma cena de outro ambiente, desfocada e recortada.
   `LAYER_BLUR 38` do Figma é `blur(19px)` em CSS — o raio do Figma é
   sempre o dobro do comprimento do blur().

   É `scaleMode: CROP`, então são dois elementos: a caixa que recorta
   e a imagem que transborda. Os números saem do `imageTransform`
   [[0,72066, 0, 0,28236], [0, 1,04338, 0,01085]]: a janela visível da
   fonte vai de 28,2% a 100,3% da largura. */
.calc-fundo__borrada,
.calc-fundo__veu-borrada {
  position: absolute;
  left: -70px;
  top: -406px;   /* era −146 numa caixa que começava em −260 */
  width: 2106px;
  height: 2032px;
}

.calc-fundo__borrada {
  overflow: hidden;
}

.calc-fundo__borrada img {
  position: absolute;
  left: -825px;
  top: -21px;
  width: 2922px;
  height: 1948px;
  max-width: none;
  object-fit: fill;
  filter: blur(19px);
}

/* Preto a 30% mais o gradiente que fecha o pé: no Figma ele tem
   opacidade 0,7 e vai de alfa 0 em 39,8% a alfa 1 no fim — daí a
   parada final em 0,7. Sem estas duas camadas o fundo sai muito mais
   claro que o desenho. */
.calc-fundo__veu-borrada {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 39.806%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.calc-hero__conteudo,
.calc-topo .container {
  position: relative;
  z-index: 1;
  padding-top: 55px;
}

/* ---------- Painel ---------- */

/* O painel é irmão do topo, não filho: assim ele entra no fluxo e
   empurra o rodapé. A margem negativa é o que o faz montar sobre a
   foto — 219 de topo contra os 743 do bloco de cima. */
.calc-painel {
  position: relative;
  z-index: 2;
  width: 1505px;
  /* Altura mínima, não fixa: os três modos têm conteúdo de tamanho
     diferente, e o modo "medidas" cresce a cada superfície que o
     visitante acrescenta. 1046 é a caixa do Figma, que continua sendo
     o piso — no modo padrão o painel fecha exatamente nela. */
  min-height: 1046px;
  margin: -524px auto 0;
  /* Os 60px do pé são a folga que o Figma tinha: o painel fechava em
     1265 e os botões terminavam em 1205. Com a altura fixa eles vinham
     de graça; com `min-height` o conteúdo passou a encostar na borda,
     e aí precisam ser declarados. */
  padding: 31px 29px 60px;
  border-radius: 28px;
  background-color: var(--cor-branco);
  color: #022D52;
}

/* Todo o conteúdo do painel se alinha na mesma coluna, em 252 da
   página. O Figma varia — cards de produto em 264, de tamanho em 267,
   número do resultado em 240 — e isso é folga de desenho, não
   intenção. As larguras dos cards são as do Figma; o vão é o que
   sobra, distribuído igual. */

.calc-painel__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 36.184px;
  line-height: 42px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

.calc-painel__risco {
  height: 1px;
  margin: 30px 0 0;
  border: 0;
  background-color: var(--linha-formulario);
}

.calc-painel__rotulo {
  margin: 31px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 24.449px;
  line-height: 26px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

/* ---------- Escolhas ---------- */

.calc-opcoes {
  margin: 47px 0 0;
  padding: 0;
  list-style: none;
}

.calc-opcoes {
  display: flex;
  justify-content: space-between;
}

.calc-opcoes--produto .calc-opcao-item { width: 464px; }

/* ---------- Como calcular: os três modos ----------

   A troca é CSS, não JavaScript. O `:has()` lê qual rádio está
   marcado e esconde os blocos dos outros dois — assim ela continua
   funcionando se o script não carregar, e o que se perde é só a
   conta, não a navegação do painel.

   Os rádios são NATIVOS, escondidos só visualmente: com eles vêm de
   graça o grupo por `name`, a navegação por setas e o anúncio de
   estado no leitor de tela. O círculo desenhado é o `::before` do
   texto ao lado.                                                   */

.calc-modos {
  margin: 31px 0 0;
  padding: 0;
  border: 0;
}

.calc-modos > .calc-painel__rotulo {
  margin: 0;
  padding: 0;
}

.calc-modo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 47px 40px 0 0;
  cursor: pointer;
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo-destaque);
  line-height: 35.4px;
  letter-spacing: var(--ls-corpo);
}

/* Escondido para o olho, presente para o teclado e o leitor de tela.
   `appearance: none` sozinho deixaria a caixa nativa ocupando espaço. */
/* Os 47px valem uma vez, para a primeira linha de rádios; os demais
   ficam ao lado, no mesmo topo. */
.calc-modo ~ .calc-modo {
  margin-top: 0;
}

.calc-modo input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc-modo span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.calc-modo span::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid var(--cor-texto-corpo);
  border-radius: 50%;
  transition: border-color 200ms var(--easing-saida);
}

/* O ponto de dentro é `box-shadow` e não um segundo pseudo-elemento:
   assim ele nasce do próprio anel e não precisa de posicionamento. */
.calc-modo input:checked + span::before {
  border-color: #022D52;
  box-shadow: inset 0 0 0 5px var(--cor-branco), inset 0 0 0 22px #022D52;
}

.calc-modo input:focus-visible + span::before {
  outline: 2px solid #022D52;
  outline-offset: 3px;
}

.calc-modo:hover span::before {
  border-color: #9DA2B3;
}

/* Um bloco por modo. Some quem não for o do rádio marcado. */
.calc-painel:has(#modo-area:checked)    .calc-bloco--medidas,
.calc-painel:has(#modo-area:checked)    .calc-bloco--rapida,
.calc-painel:has(#modo-medidas:checked) .calc-bloco--area,
.calc-painel:has(#modo-medidas:checked) .calc-bloco--rapida,
.calc-painel:has(#modo-rapida:checked)  .calc-bloco--area,
.calc-painel:has(#modo-rapida:checked)  .calc-bloco--medidas {
  display: none;
}


/* ---------- Modo 2 · linhas de medida ---------- */

.calc-superficies {
  margin: 47px 0 0;
  padding: 0;
  list-style: none;
}

.calc-superficie {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid var(--linha-formulario);
  border-radius: 10px;
}

.calc-superficie + .calc-superficie {
  margin-top: 12px;
}

.calc-superficie__campo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

.calc-superficie__campo--qtd {
  flex: 0 0 140px;
}

.calc-superficie__rotulo {
  flex: 1 0 100%;
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 18.181px;
  line-height: 20.5px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-texto-olho);
}

.calc-superficie__campo input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 56px;
  padding: 0 14px;
  border: 1px solid var(--linha-formulario);
  border-radius: 8px;
  background: none;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 26px;
  line-height: 30px;
  letter-spacing: var(--ls-titulo);
  color: #022D52;
  transition: border-color 200ms var(--easing-saida);
}

.calc-superficie__campo input:focus-visible {
  border-color: #9DA2B3;
  outline: 0;
}

.calc-superficie__campo input::-webkit-outer-spin-button,
.calc-superficie__campo input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.calc-superficie__campo input { -moz-appearance: textfield; }

.calc-superficie__unidade {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 20px;
  line-height: 56px;
  color: var(--cor-texto-corpo);
}

/* Contorno e não preenchimento: remover é ação secundária, e uma
   pílula cheia ao lado de três campos puxaria o olho para ela. */
.calc-superficie__remover,
.calc-adicionar {
  height: 56px;
  padding-inline: 26px;
  border: 1px solid #022D52;
  border-radius: var(--raio-botao);
  background: none;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-medio);
  font-size: var(--fs-corpo);
  line-height: 1;
  letter-spacing: var(--ls-corpo);
  color: #022D52;
  transition: background-color 200ms var(--easing-saida),
              opacity 200ms var(--easing-saida);
}

.calc-superficie__remover:hover,
.calc-adicionar:hover {
  background-color: rgba(2, 45, 82, 0.06);
}

/* Com uma linha só não há o que remover — some a última superfície e
   o modo fica sem nenhuma entrada. Fica visível e desativado, para a
   linha não mudar de largura quando a segunda aparece. */
.calc-superficie__remover:disabled {
  opacity: 0.35;
  cursor: default;
}

.calc-adicionar {
  margin-top: 16px;
}


/* ---------- Modo 3 · tamanhos aproximados ----------

   O cartão é o mesmo dos produtos (`.calc-opcao`): mesma borda, mesmo
   raio, mesmo preenchimento quando escolhido, e o emblema da marca a
   24% à esquerda — como o Figma desenhava os tamanhos fixos da
   primeira versão. Só o conteúdo é o novo.

   Quatro em 1447px de painel: 346 cada, com o vão distribuído pelo
   `space-between` que a `.calc-opcoes` já traz. A altura é `stretch`,
   então a descrição que quebra em duas linhas ("Banheiros, lavabos e
   corredores") iguala as quatro em vez de desalinhar uma.          */

.calc-opcoes--estimativa {
  align-items: stretch;
}

.calc-opcoes--estimativa .calc-opcao-item {
  display: flex;
  width: 346px;
}

.calc-opcoes--estimativa .calc-opcao {
  align-items: center;
  min-height: 130px;
  padding: 18px 20px 18px 14px;
  gap: 14px;
  text-align: left;
}

.calc-estimativa__nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 18.181px;
  line-height: 20.5px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--cor-azul-profundo);
}

.calc-estimativa__desc {
  margin-top: 6px;
  font-weight: var(--peso-medio);
  font-size: 15px;
  line-height: 19px;
  letter-spacing: var(--ls-corpo);
  color: var(--cor-texto-corpo);
}

.calc-estimativa__area {
  margin-top: 12px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-titulo);
  color: #022D52;
}

/* Escolhido, o fundo fica cinza-azulado: o cinza do texto de apoio
   sumiria contra ele. */
.calc-opcao[aria-pressed="true"] .calc-estimativa__desc {
  color: #022D52;
}


/* ---------- Campo de metragem ----------

   Substitui os quatro tamanhos fixos do Figma. O motivo é prático: o
   maior deles era 12 × 12, e projeto nenhum precisa caber nisso. O
   campo é em m² e não em largura × comprimento porque os produtos
   revestem piso E parede, e área cobre também ambiente irregular. */

/* O mesmo vão que separa "PRODUTO" dos cartões — 47px, do Figma. Era
   42 aqui e 24 nos blocos novos, e a diferença aparecia como desalinho
   de ritmo dentro do mesmo painel. */
.calc-campo {
  margin-top: 47px;
}

.calc-campo__caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 464px;
  height: 108px;
  padding: 0 28px;
  border: 1px solid var(--linha-formulario);
  border-radius: 10px;
  transition: border-color 200ms var(--easing-saida);
}

.calc-campo__caixa:focus-within { border-color: #9DA2B3; }

.calc-campo__entrada {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 50.344px;
  line-height: 58px;
  letter-spacing: var(--ls-titulo);
  color: #022D52;
}

.calc-campo__entrada:focus-visible { outline: none; }

/* As setinhas do input number roubam espaço e convidam a clicar em vez
   de digitar, que é o gesto errado para uma metragem. */
.calc-campo__entrada::-webkit-outer-spin-button,
.calc-campo__entrada::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

.calc-campo__entrada { -moz-appearance: textfield; }

.calc-campo__unidade {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 50.344px;
  line-height: 58px;
  letter-spacing: var(--ls-titulo);
  color: var(--cor-texto-corpo);
}

/* O rótulo do campo existe para leitor de tela; na tela quem explica é
   a dica logo abaixo, que o desenho já previa como texto de apoio. */
.calc-campo__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc-campo__dica {
  margin: 14px 0 0;
  font-weight: var(--peso-medio);
  font-size: 16px;
  line-height: 19px;
  color: var(--cor-texto-corpo);
}

/* O vão do Figma entre os cards de produto e a segunda chamada. */
.calc-opcoes--produto + .calc-painel__rotulo { margin-top: 51px; }

.calc-opcao {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linha-formulario);
  border-radius: 10px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms var(--easing-saida),
              border-color 200ms var(--easing-saida);
}

.calc-opcao:hover { border-color: #9DA2B3; }

.calc-opcao[aria-pressed="true"] {
  border-color: #9DA2B3;
  background-color: #9DA2B3;
}

.calc-opcoes--produto .calc-opcao { height: 175px; padding-left: 50px; }

.calc-opcao__nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 18.181px;
  line-height: 20.5px;
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
}

.calc-opcao__balde {
  width: 131px;
  height: 155px;
  margin-left: auto;
  margin-right: 28px;
}

.calc-opcao__emblema {
  width: 73px;
  height: 75px;
  opacity: 0.24;
}

.calc-opcao__texto { display: flex; flex-direction: column; }

/* ---------- Resultado ---------- */

.calc-resultado {
  position: relative;
  margin-top: 53px;
  padding-top: 42px;
  border-top: 1px solid var(--linha-formulario);
}

/* O risco vertical que separa o número da contagem de latas. */
.calc-resultado::after {
  content: "";
  position: absolute;
  left: 361px;
  top: 73px;
  width: 1px;
  height: 150px;
  background-color: var(--linha-formulario);
}

.calc-resultado__area,
.calc-resultado__demaos,
.calc-resultado__latas {
  margin: 0;
  font-weight: var(--peso-medio);
  font-size: 16px;
  line-height: 19px;
  color: var(--cor-texto-corpo);
}

.calc-resultado__numero {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 12px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--ls-titulo);
}

.calc-resultado__valor  { font-size: 96.888px; line-height: 112px; }
.calc-resultado__unidade{ font-size: 50.344px; line-height: 58px; text-transform: lowercase; }

/* `min-height` reserva a linha mesmo vazia. Sem ela, no estado neutro
   o parágrafo some, a margem de 12px colapsa junto e os botões sobem
   31px — o painel daria um pulo assim que o visitante digitasse. */
.calc-resultado__demaos { margin-top: 12px; min-height: 19px; }

/* O travessão que ocupa o lugar do número enquanto falta escolher
   produto ou metragem. Esmaecido para ler como espera, e não como um
   risco divisor: a 96,9px ele tem o peso de uma barra. */
.calc-resultado__valor--vazio { opacity: 0.25; }

.calc-resultado__caixa {
  position: absolute;
  left: 402px;
  top: 108px;
}

.calc-resultado__latas-icones {
  display: flex;
  gap: 9px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.calc-resultado__latas-icones img { width: 30px; height: 39px; }

/* ---------- Ações ---------- */

.calc-acoes {
  display: flex;
  gap: 9px;
  /* 33 e não os 78 que a soma das caixas pediria: as caixas de texto
     do resultado no Figma se sobrepõem (o número tem 112 de altura
     para uma fonte de 96,9), e recompor isso caixa a caixa empurraria
     os botões 45px para baixo. O valor aqui é o que põe os botões em
     1132, que é onde o desenho os coloca. */
  margin-top: 33px;
}

.calc-acoes .botao { width: 290px; }

/* Painel termina em 1265 e o rodapé começa em 1398. */
.calc-painel + .rodape {
  margin-top: 133px;

  /* Transparente. O `--fundo-claro` do `.rodape` é herança da home,
     onde o claro da seção 5 corre por baixo dele. Aqui a página é
     branca, e aquele chapado opaco começava em 1398 — 27px antes de
     a foto de fundo terminar, em 1425 — cobrindo justamente o trecho
     onde o canto de 48px curva. Era isso que fazia o arredondamento
     parecer cortado. */
  background-color: transparent;
}

.calc-painel ~ .rodape .rodape__brilho {
  top: -115px;
  height: 1763px;
}