/* ==========================================================================
   Ric-Mar Materiais para Construção — style.css
   Agência Pine — Light/Clean
   ========================================================================== */

/* Registra as duas larguras de fade da barra de categorias como comprimentos.
   Sem @property uma custom property é apenas texto para o motor de estilo e a
   `transition` declarada em .categorias-nav__lista seria ignorada — o degradê
   apareceria e sumiria de estalo. Onde @property não existir, o fade continua
   funcionando; só perde a suavização. */
@property --fade-esq {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --fade-dir {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ---------- Custom properties ---------- */
:root {
  /* Cores da marca — calibradas a partir das artes de social (amostragem de pixel).
     Atenção: os campos do site seguem esta paleta, mas o logotipo tem a sua
     própria: a identidade nova traz #D10219 e #FCD102 dentro do vetor. São
     valores próximos, não idênticos — não tente casar um com o outro no olho.

     O logo vem em três versões (ver images/):
       logo-ricmar.svg           bicolor — padrão, para fundo claro ou marrom
       logo-ricmar-vermelho.svg  monocromática — para o campo amarelo
       logo-ricmar-amarelo.svg   monocromática — para o campo vermelho e o hero
     A regra antiga de "nunca sobre campo vermelho, usar placa branca" caiu:
     agora é só escolher a versão certa para o fundo. */
  --cor-vermelho: #A3181D;           /* base da marca */
  --cor-vermelho-rgb: 163, 24, 29;
  --cor-vermelho-brilho: #BF1117;    /* vermelho vivo das formas / miolo da luz */
  --cor-vermelho-brilho-rgb: 191, 17, 23;
  --cor-vermelho-escuro: #76060A;    /* sombra dura sob plates */
  --cor-amarelo: #FFC700;            /* campo amarelo base */
  --cor-amarelo-rgb: 255, 199, 0;
  --cor-amarelo-luz: #FFDB00;        /* centro do efeito de luz */
  --cor-amarelo-brilho: #FFEF00;     /* hotspot */
  --cor-amarelo-brilho-rgb: 255, 239, 0;
  --cor-amarelo-escuro: #FF9B00;     /* traço do pattern e borda do campo */
  --cor-whatsapp: #25D366;
  --cor-whatsapp-rgb: 37, 211, 102;

  /* Neutros crus — sistema de sinalização (Opção B) */
  --cor-bg: #FFFFFF;            /* branco (seções default) */
  --cor-bg-alt: #F8F6F3;        /* cinza-50 (seções alt) */
  --cor-texto: #1A1614;         /* tinta (quase-preto) */
  --cor-texto-suave: #57504B;   /* cinza-600 */
  --cor-borda: #E6E2DD;         /* cinza-200 */
  --cor-branco: #FFFFFF;        /* branco p/ cards e texto sobre cor */

  /* O antigo --toldo (listras tinta+amarelo) foi aposentado: era um gradiente
     genérico sem leitura de marca. O motivo de identidade agora é a fita
     da marca — ver .fita e images/fita.svg. O lettering não vive mais no vetor:
     é texto em Bebas Neue montado por cima (ver .fita__trilho). */

  /* Tipografia
     --fonte-display: condensada caixa-alta, só para títulos e números de impacto.
     --fonte-titulo: Poppins de propósito — botão, pergunta de FAQ e rótulos de UI
       perdem legibilidade em condensada. Nas artes, a chamada de ação é Poppins bold. */
  --fonte-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --fonte-titulo: 'Poppins', Arial, Helvetica, sans-serif;
  --fonte-corpo: 'Poppins', Arial, Helvetica, sans-serif;

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 5rem;

  /* Raios e sombras (sóbrios = sinalização) */
  --radius-md: 8px;
  --radius-lg: 12px;
  --sombra-card: 0 2px 12px rgba(26, 22, 20, 0.08);
  --sombra-card-hover: 0 10px 28px rgba(26, 22, 20, 0.14);
  --sombra-header: 0 2px 16px rgba(26, 22, 20, 0.10);

  /* Transições */
  --transicao: 0.25s ease;

  /* Layout */
  /* Subiu de 4.5rem para caber o logo maior com a mesma folga proporcional que
     tinha antes (14px acima e abaixo). Tudo que se ancora no header — o menu
     mobile, a barra de categorias de /produtos, o scroll-margin das âncoras —
     lê esta variável, então o ajuste se propaga sozinho. */
  --header-altura: 5.5rem;
  --container-largura: 1200px;
}

/* ---------- Reset moderno ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background-color: var(--cor-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3 {
  font-family: var(--fonte-display);
  /* Bebas Neue tem um peso só: pedir 700 aqui geraria bold sintético (borrado). */
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* h4 fica em Poppins — nesse tamanho a condensada já custa legibilidade. */
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilitários ---------- */
.container {
  width: 100%;
  max-width: var(--container-largura);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.secao-eyebrow {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-branco);
  background-color: var(--cor-vermelho);
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: var(--space-3);
}

.secao-titulo {
  /* +15% sobre a escala antiga: Bebas é bem mais estreito que Montserrat
     e, no mesmo font-size, o título encolhia visualmente. */
  font-size: clamp(2rem, 1.6rem + 1.75vw, 2.9rem);
  line-height: 0.9;
  margin-bottom: var(--space-3);
}

.secao-subtitulo {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
}

.secao-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sistema visual — primitivas
   Traduzem a linguagem das peças de social: campo com luz quente, pattern de
   telhados no negativo, forma de cor atrás do produto e plate de título.
   Todas são componíveis: .tem-pattern + .tem-luz na mesma seção, por exemplo.
   ========================================================================== */

/* ---------- Pattern de telhados ----------
   Usa mask-image, não background-image: assim a cor vem do background-color e
   um único SVG serve campo amarelo e campo vermelho. */
.tem-pattern {
  position: relative;
  isolation: isolate;
}

.tem-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--pattern-cor, var(--cor-amarelo-escuro));
  opacity: var(--pattern-opacidade, 0.18);
  -webkit-mask: url('/images/pattern-telhado.svg') repeat 0 0 / var(--pattern-escala, 200px) auto;
          mask: url('/images/pattern-telhado.svg') repeat 0 0 / var(--pattern-escala, 200px) auto;
}

/* Variante para seções claras: o pattern entra só na faixa do topo e some antes
   do conteúdo, para não competir com a leitura. Duas máscaras compostas — a do
   pattern e um degradê de recorte. */
.tem-pattern--topo::before {
  -webkit-mask-image:
    url('/images/pattern-telhado.svg'),
    linear-gradient(to bottom, #000 0%, transparent var(--pattern-fim, 45%));
  -webkit-mask-size: var(--pattern-escala, 200px) auto, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    url('/images/pattern-telhado.svg'),
    linear-gradient(to bottom, #000 0%, transparent var(--pattern-fim, 45%));
  mask-size: var(--pattern-escala, 200px) auto, 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
}

/* ---------- Efeito de luz ----------
   Clareia o miolo do campo e deixa as bordas caírem para o tom quente.
   Medido nas artes: centro #FFEF00 → base #FFC700 → borda #FF9B00. */
.tem-luz {
  position: relative;
  isolation: isolate;
}

.tem-luz::after {
  content: '';
  position: absolute;
  inset: 0;
  /* -2 e não -1: a luz precisa ficar ABAIXO do pattern, senão o clarão do miolo
     apaga justamente os telhados do centro do campo. */
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
    var(--luz-tamanho, 70% 55%) at var(--luz-posicao, 50% 35%),
    var(--luz-centro, rgba(var(--cor-amarelo-rgb), 0.55)) 0%,
    transparent 62%
  );
}

/* ---------- Formas positivo × negativo ----------
   Ficam atrás do produto e maiores que ele. A cor inverte conforme o campo:
   forma vermelha em campo amarelo, forma amarela em campo vermelho. */
.forma {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--forma-cor, var(--cor-vermelho));
  pointer-events: none;
}

.forma--raio {
  clip-path: polygon(
    45% 0%, 10% 55%, 38% 55%, 25% 100%,
    90% 42%, 55% 42%, 80% 0%
  );
}

/* A estrela também veste os ícones dos cards — mesma polygon, uma definição só.
   É o produto/ícone em evidência sobre forma de cor, na escala do card. */
.forma--estrela,
.diferencial-card__icone,
.categoria-card__icone,
.indice-card__icone,
.categoria-secao__icone {
  clip-path: polygon(
    50% 0%, 60% 20%, 79% 10%, 76% 31%, 97% 30%, 84% 46%,
    100% 58%, 80% 65%, 90% 84%, 68% 81%, 66% 100%, 50% 87%,
    34% 100%, 32% 81%, 10% 84%, 20% 65%, 0% 58%, 16% 46%,
    3% 30%, 24% 31%, 21% 10%, 40% 20%
  );
}

.forma--domo {
  border-radius: 50% 50% 0 0 / 65% 65% 0 0;
}

/* ---------- Plate de título ----------
   Retângulo de cor com contorno deslocado e sombra dura, levemente girado. */
.plate {
  position: relative;
  display: inline-block;
  background-color: var(--plate-fundo, var(--cor-vermelho));
  border-radius: 18px;
  padding: 0.4em 0.75em 0.5em;
  transform: rotate(var(--plate-giro, -2deg));
  /* O contorno é um anel de box-shadow, não um ::before.
     Motivo: o `transform` acima já cria contexto de empilhamento no .plate, e
     dentro de um contexto próprio o fundo do elemento é pintado ANTES dos
     filhos de z-index negativo. O ::before com inset:-7px cobria a tarja
     inteira — a cor de fundo ficava correta no computed style e invisível na
     tela. O anel pinta por fora e não tem esse problema. */
  box-shadow:
    0 0 0 7px var(--plate-contorno, var(--cor-amarelo)),
    0 16px 0 var(--plate-sombra, var(--cor-vermelho-escuro)),
    0 26px 34px rgba(0, 0, 0, 0.28);
}

.plate > * {
  margin: 0;
  color: var(--plate-texto, var(--cor-branco));
  text-shadow: 0 4px 0 var(--plate-sombra, var(--cor-vermelho-escuro));
}

/* Sobre campo vermelho o plate inverte: tarja AMARELA com texto em tinta.
   Um plate vermelho sobre fundo vermelho simplesmente sumiria — é a mesma
   regra de negativo/positivo aplicada aos ícones. */
.cta-final .plate {
  --plate-fundo: var(--cor-amarelo);
  --plate-contorno: var(--cor-vermelho-escuro);
  --plate-sombra: var(--cor-vermelho-escuro);
  --plate-texto: var(--cor-texto);
}

.cta-final .plate > * {
  text-shadow: none;
}

/* O título vira só o contêiner do plate: sem ele o inline-block herdaria a
   caixa do h2 e a rotação cortaria nas bordas do bloco. */
.cta-final__titulo:has(.plate) {
  line-height: 1;
  padding-block: var(--space-2);
}

/* ---------- Placeholder de imagem ----------
   Proporção travada + legenda dizendo exatamente o que entra no lugar.
   Trocar por <img> mantendo a mesma proporção. */
.ph {
  aspect-ratio: var(--ph-proporcao, 1);
  width: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  border: 2px dashed rgba(26, 22, 20, 0.35);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      rgba(26, 22, 20, 0.04) 10px 20px
    ),
    var(--cor-branco);
}

/* Sobre campo de cor o placeholder precisa de corpo próprio: translúcido demais,
   a forma atravessa por trás e o rótulo fica ilegível. */
.ph--sobre-cor {
  border-color: rgba(255, 255, 255, 0.55);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 10px,
      rgba(255, 255, 255, 0.10) 10px 20px
    ),
    rgba(26, 22, 20, 0.42);
}

.ph__label {
  font-family: var(--fonte-corpo);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  max-width: 26ch;
}

.ph--sobre-cor .ph__label {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Fita "EM OBRAS" ----------
   Substitui a antiga faixa zebrada. É o vetor da marca, não um gradiente
   genérico — diz "obra" literalmente.

   O arquivo já vem com 7,74° de inclinação embutida: --fita-angulo é um ajuste
   SOBRE isso, não o ângulo absoluto. Para deixar a fita reta, use -7.74deg.

   Movimento: balanço dentro da própria folga, não letreiro infinito. Emendar
   duas cópias daria salto visível — a largura da peça (288) não é múltiplo
   inteiro nem do período dos losangos (10,86) nem do lettering (71,34).
   Balançando, nenhuma extremidade entra em cena e não há emenda para errar. */
.fita {
  position: absolute;
  z-index: -1;
  width: var(--fita-largura, 130%);
  aspect-ratio: 334 / 70;
  background: url('/images/fita.svg') no-repeat center / contain;
  pointer-events: none;
  /* Referência para o trilho de texto medir-se em cqh/cqw. `size` (e não
     `inline-size`) porque o texto se dimensiona pela ALTURA da tarja — é a calha
     interna que manda, não a largura da peça. Seguro aqui: a fita tem width e
     aspect-ratio próprios, então não depende do conteúdo para ter tamanho. */
  container-type: size;
  /* rotate/translate independentes em vez de transform: assim o keyframe anima
     só o deslocamento sem ter que repetir o ângulo em cada passo */
  rotate: var(--fita-angulo, -3deg);
  animation: fita-balanca 16s ease-in-out infinite alternate;
}

@keyframes fita-balanca {
  from { translate: -4% 0; }
  to   { translate: 4% 0; }
}

/* ---------- Texto da fita ----------
   O lettering "EM OBRAS" era vetor dentro do SVG. Virou texto de verdade para
   que cada faixa possa dizer uma coisa diferente — trocar a palavra agora é
   editar o HTML, não abrir o Illustrator.

   Toda a geometria abaixo foi medida nos paths do lettering original antes de
   removê-los, para o texto assentar exatamente onde o vetor assentava. */
.fita__trilho {
  position: absolute;
  left: 0;
  right: 0;
  /* 52,7% da altura: onde corria a linha média do lettering original, medida no
     centro horizontal da peça (no viewBox, y≈214,9 de um campo que vai de 178 a
     248). Não é 50% porque a calha clara do SVG não é centrada na tarja. */
  top: 52.7%;
  translate: 0 -50%;
  /* Os 7,74° que o SVG traz embutidos nas coordenadas. A fita já gira por
     --fita-angulo, e o filho herda essa rotação — aqui só se repõe a inclinação
     interna do vetor, para o texto correr DENTRO da calha e não atravessá-la. */
  rotate: 7.74deg;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 2cqw;
}

.fita__palavra {
  font-family: var(--fonte-display);
  font-weight: 400;
  /* Bebas Neue tem cap-height ≈ 0,73em. O lettering original media 8,32 de 70 de
     altura de fita (11,9%), logo 11,9 / 0,73 = 16,3cqh para bater a altura de
     caixa-alta do vetor que saiu daqui. */
  font-size: 16.3cqh;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  /* Mesma tinta dos losangos do SVG (.st0), não o preto puro — sobre o amarelo
     do gradiente o preto absoluto vibra. */
  color: #0c0c0c;
}

/* O bloco global de prefers-reduced-motion zera a duração para 0.01ms, o que
   aqui faria a fita SALTAR para o extremo do balanço em vez de parar.
   Precisa desligar a animação e devolver a fita ao ponto neutro. */
@media (prefers-reduced-motion: reduce) {
  .fita {
    animation: none;
    translate: 0 0;
  }
}

/* ---------- Junta hero → diferenciais ----------
   A fita não mora mais DENTRO do hero: ela cavalga a divisa entre o hero e a
   seção de diferenciais, metade sobre o campo vermelho, metade sobre o amarelo.
   Costurar os dois blocos é o ponto — por isso o elemento é irmão dos dois, e
   não filho de nenhum (o hero tem overflow:hidden e recortaria a metade de baixo).

   `height: 0` faz a junta não ocupar linha nenhuma no fluxo: ela é só um marco
   de posição na divisa. A fita se pendura nele e transborda para os dois lados.

   `overflow-x: clip` (e não `hidden`) é essencial: `hidden` num eixo força o
   outro para `auto`, o que recortaria a fita na vertical e ainda criaria um
   scroll interno. `clip` recorta só a horizontal e deixa a vertical transbordar,
   que é exatamente o que a junta precisa. */
.emenda {
  position: relative;
  height: 0;
  z-index: 3;
  overflow-x: clip;
  overflow-y: visible;
}

.emenda__fita {
  left: -15%;
  top: 0;
  --fita-angulo: -3deg;
  /* -50% na vertical centra a fita na divisa. Como o keyframe do deslize anima a
     propriedade `translate` inteira, o eixo Y precisa ser repetido em cada passo
     dele — daí o keyframe próprio (fita-desliza) em vez de reusar fita-balanca. */
  translate: 0 -50%;
  animation: fita-desliza 16s ease-in-out infinite alternate;
  /* A .fita base nasce com z-index:-1 (dentro do hero ela ficava atrás do
     conteúdo). Na junta ela é a camada da frente: precisa cobrir a base do campo
     vermelho e o topo do amarelo. */
  z-index: 1;
}

/* Amplitude maior que o balanço do CTA (±4%) porque aqui o movimento é a viagem,
   não o respiro. O teto é a folga: a fita tem 130% de largura em left:-15%, logo
   sobram 15% de contêiner de cada lado. Como % em `translate` resolve contra a
   largura do PRÓPRIO elemento, 8% da fita = 10,4% do contêiner — ainda deixa
   ~4,6% de folga, e nenhuma das duas pontas do SVG entra em cena. */
@keyframes fita-desliza {
  from { translate: -8% -50%; }
  to   { translate: 8% -50%; }
}

/* A viagem é comandada pelo scroll, não pelo relógio: `view()` mapeia a passagem
   da fita pela viewport (cover 0% = encostando na borda de baixo, cover 100% =
   saindo por cima) sobre os 0→100% do keyframe. Rolar para baixo empurra a fita
   para a direita; rolar de volta a traz — o movimento fica preso ao gesto.

   Fica em @supports porque scroll-driven animations ainda não são universais:
   onde não houver, o `animation` de 16s declarado acima segue valendo como
   fallback e a fita continua balançando sozinha. */
@supports (animation-timeline: view()) {
  .emenda__fita {
    animation: fita-desliza linear both;
    animation-timeline: view();
    animation-range: cover;
  }
}

/* O reduced-motion global (logo acima) devolve `translate: 0 0` e perderia a
   centralização na divisa — a fita saltaria meia altura para baixo. Aqui ela
   para de se mover mas continua montada na emenda. */
@media (prefers-reduced-motion: reduce) {
  .emenda__fita {
    animation: none;
    translate: 0 -50%;
  }
}

/* A seção de baixo reserva a metade inferior da fita. Sem isso a tarja cai por
   cima do título ("...há 38 anos").

   A conta, toda em % da LARGURA (é contra ela que padding em % resolve, e é dela
   que a fita deriva o tamanho — daí as duas escalarem juntas em qualquer tela):

     altura da fita  = 130% de largura × 70/334  = 27,25%
     metade dela     = 13,6%
     queda da ponta  = 65% × sen(3°)             =  3,4%   ← a rotação de -3°
     ---------------------------------------------------
     espaço ocupado                                17,0%

   Os 19% dão os 17% que a fita come mais 2% de folga proporcional, e o --space-7
   por cima é o respiro de verdade — o que impede o título de nascer colado na
   borda da tarja. Em tela de 1440px isso são ~354px de topo: 245 de fita e 109
   de ar. */
.secao--sob-fita {
  padding-top: calc(var(--space-7) + 19%);
}

/* O outro lado da mesma conta. A fita está CENTRADA na divisa, então ela come
   espaço nas duas seções, não só na de baixo — a metade de cima subia por cima
   dos contadores do hero ("38 anos", "6 categorias", "2 gerações").

   O hero centraliza o conteúdo com justify-content: center dentro de 100dvh, e é
   por isso que o padding funciona aqui: ele encurta a área útil e o conteúdo
   sobe junto, em vez de ficar preso embaixo da tarja.

   Aqui NÃO se repete os 19% da seção de baixo. A fita sobe menos do que desce
   (o vetor é assimétrico: a calha do texto fica abaixo do meio da peça), e o
   hero não tem texto encostando na divisa — tem contadores que terminam bem
   antes. Reservar os 19% dos dois lados abria um vazio de ~255px de vermelho
   morto entre os contadores e a tarja.

   O teto de 200px é o que fecha essa distância; o clamp evita que em celular o
   valor fixo coma metade da tela e que em monitor largo o vazio volte. */
.hero.secao--sobre-fita {
  padding-bottom: clamp(120px, 14vw, 200px);
}

/* No CTA a fita fica reta: -7.74deg cancela a inclinação do próprio arquivo.

   O `margin-bottom` negativo desce o elemento em exatamente meia altura, o que
   deixa o centro da tarja na borda inferior do bloco — metade dentro, metade
   recortada. É o que produz uma faixa fina sem encolher o elemento.

   Precisa ser margin e não `bottom`: porcentagem de `bottom` resolve contra a
   ALTURA do contêiner, e a altura da fita deriva da largura dela (aspect-ratio
   334/70 sobre 130% de largura = 27,25% da largura do bloco, logo metade =
   13,6%). Porcentagem de margem resolve contra a largura — que é a referência
   correta aqui. */
.cta-final__fita {
  left: -15%;
  bottom: 0;
  /* -13.6% deixaria o centro exato na borda e cortaria o lettering ao meio,
     o que lê como defeito. Subindo ~4,8% a tarja inteira cabe dentro do bloco
     e só a folga transparente do SVG é recortada. */
  margin-bottom: -8.8%;
  --fita-angulo: -7.74deg;
  z-index: 2;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-md);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao), background-color var(--transicao), color var(--transicao), border-color var(--transicao);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Em telas estreitas o botão precisa poder quebrar. Com `white-space: nowrap`
   e 40px de padding de cada lado, "Peça seu orçamento no WhatsApp" mede 452px
   e estoura um viewport de 386px — a página inteira ganhava scroll horizontal.
   O Poppins, mais largo que o Inter, agravou um problema que já existia. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    text-align: center;
  }

  .btn--grande {
    padding-inline: var(--space-3);
  }

  .hero__ctas .btn,
  .cta-final__ctas .btn {
    width: 100%;
  }
}

.btn--primario {
  background-color: var(--cor-vermelho);
  color: var(--cor-branco);
  box-shadow: 0 4px 14px rgba(var(--cor-vermelho-rgb), 0.28);
}

/* Botão de WhatsApp das categorias. O token --cor-whatsapp já existia no
   projeto, servindo só ao botão flutuante — aqui ele passa a valer para todo
   botão que leva à conversa.

   Sai do vermelho de propósito: são seis destes na página, e em vermelho eles
   disputavam atenção com o campo da marca e com o CTA do fim. No verde o
   destino é reconhecido antes mesmo de ler o rótulo. */
.btn--whatsapp {
  background-color: var(--cor-whatsapp);
  color: #06331A;
  box-shadow: 0 4px 14px rgba(var(--cor-whatsapp-rgb), 0.3);
}

.btn--whatsapp:hover {
  background-color: #1FB855;
}

/* O ícone é sólido (fill), ao contrário dos demais SVGs do site, que são de
   traço — é a marca do WhatsApp, e o contorno a descaracterizaria. */
.btn--whatsapp svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

.btn--primario:hover {
  background-color: var(--cor-vermelho-escuro);
  box-shadow: 0 8px 20px rgba(var(--cor-vermelho-rgb), 0.32);
}

.btn--secundario {
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
  box-shadow: 0 4px 14px rgba(var(--cor-amarelo-rgb), 0.28);
}

.btn--secundario:hover {
  background-color: var(--cor-amarelo-escuro);
}

.btn--outline {
  background-color: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-borda);
}

.btn--outline:hover {
  border-color: var(--cor-vermelho);
  color: var(--cor-vermelho);
}

.btn--grande {
  padding: 1.25rem 2.5rem;
  font-size: 1.15rem;
}

.btn--full {
  width: 100%;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visivel {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-altura);
  background-color: var(--cor-bg);
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

.header > .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header--scrolled {
  box-shadow: var(--sombra-header);
  border-bottom-color: var(--cor-borda);
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 60px;
  width: auto;
  display: block;
}

.nav--desktop {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* `:not(.btn)` porque o CTA do menu carrega .nav__link E .btn--primario. As duas
   classes têm a mesma especificidade e esta vem depois no arquivo, então sem o
   filtro ela vencia: o botão ficava com texto marrom sobre o vermelho (ilegível)
   e com o peso 500 do link, fora do padrão dos outros botões do site. Mesmo
   motivo do :not(.btn) em .nav__link--ativo, logo abaixo. */
.nav__link:not(.btn) {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cor-texto);
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--transicao);
}

.nav__link:not(.btn):hover {
  color: var(--cor-vermelho);
}

.nav__link--ativo:not(.btn) {
  color: var(--cor-vermelho);
}

.nav__link--ativo:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background-color: var(--cor-amarelo);
}

/* Só modificador de tamanho: cor, peso, caixa alta e sombra vêm do .btn--primario,
   iguais aos demais botões do site. */
.nav__cta {
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
}

.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--cor-texto);
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}

.header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Nav mobile ---------- */
.nav--mobile {
  position: fixed;
  top: var(--header-altura);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cor-bg);
  z-index: 999;
  padding: var(--space-5) var(--space-4);
  transform: translateX(100%);
  transition: transform var(--transicao);
  overflow-y: auto;
}

.nav--mobile.nav--mobile--aberto {
  transform: translateX(0);
}

.nav--mobile .nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.nav--mobile .nav__link {
  font-size: 1.15rem;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--cor-borda);
}

.nav--mobile .nav__cta {
  border-bottom: none;
  margin-top: var(--space-3);
  text-align: center;
}

/* ---------- Hero (home) ---------- */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-altura);
  /* Foto do ensaio (ver .hero__foto). Único ponto a editar para trocar a imagem
     do hero. Enquanto o arquivo não existir o hero segue vermelho, sem quebrar. */
  --hero-foto: url('/images/hero-loja.webp');
  /* O radial preto de 18% saiu: escurecia o campo. As artes fazem o contrário —
     clareiam o miolo com o vermelho vivo e deixam as bordas caírem. */
  background-color: var(--cor-vermelho);
  color: var(--cor-branco);
  position: relative;
  overflow: hidden;
  --luz-centro: rgba(var(--cor-vermelho-brilho-rgb), 0.9);
  --luz-tamanho: 85% 70%;
  --luz-posicao: 62% 30%;
  --pattern-cor: var(--cor-branco);
  --pattern-opacidade: 0.07;
  --pattern-escala: 240px;
}

/* A faixa zebrada que ficava colada no rodapé do hero foi aposentada.
   A fita "EM OBRAS" também não mora mais dentro do hero: ela passou a cavalgar a
   divisa com a seção de diferenciais — ver .emenda / .emenda__fita. */

/* ---------- Foto de campo do hero ----------
   A foto do ensaio é o fundo da primeira seção. Fica numa camada própria (e não
   no background do .hero) porque os dois pseudo-elementos do hero já estão
   ocupados: ::before é o pattern de telhados, ::after é a luz.

   z-index 0 empilha a foto acima do background-color do hero e abaixo do
   .hero__inner (z-index 1), que carrega o texto. */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-foto);
  background-size: cover;
  /* A foto é a fachada de frente: céu no topo, telhado com as ferramentas no
     meio, o toldo amarelo e o beiral laranja logo abaixo, e a placa RIC-MAR no
     terço inferior. 65% centra a faixa que vai do toldo à placa — é onde estão
     as cores da marca e o nome da loja, e é o que precisa sobreviver ao corte
     em telas largas.

     Mais alto que isso entrega telhado cinza; mais baixo entrega a vitrine e o
     banner de promoção, que datam a foto. Trocar a foto pede revisar este
     número junto. */
  background-position: 50% 65%;
  pointer-events: none;
}

/* O scrim. Sem ele o título branco cai sobre uma foto de contraste imprevisível
   e fica ilegível.

   Era um véu vermelho cobrindo o quadro inteiro. Saiu: tingia a fachada e matava
   justamente o que a foto tem de melhor — o toldo amarelo e o azul do céu. No
   lugar entrou um escurecimento neutro, no marrom da paleta, que segura a leitura
   sem alterar a cor da foto.

   O gradiente é assimétrico de propósito: fecha em 92% à esquerda, onde mora o
   texto, e zera em 78% da largura — daí para a direita a fachada aparece crua.
   A identidade vermelha da primeira dobra passou a vir dos botões e da fita, não
   de um filtro por cima da foto.

   Enquanto não houver arquivo em --hero-foto, isto escurece o vermelho sólido do
   .hero: o hero continua legível, só mais escuro. Degradação limpa. */
.hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 14, 9, 0.92) 0%,
    rgba(20, 14, 9, 0.80) 32%,
    rgba(20, 14, 9, 0.35) 58%,
    rgba(20, 14, 9, 0) 78%
  );
}

/* No mobile o texto ocupa a largura toda, então o véu tem que fechar por igual —
   o gradiente lateral deixaria a última linha do subtítulo sobre foto crua. */
@media (max-width: 767px) {
  .hero__foto::after {
    background: linear-gradient(
      180deg,
      rgba(20, 14, 9, 0.90) 0%,
      rgba(20, 14, 9, 0.78) 55%,
      rgba(20, 14, 9, 0.62) 100%
    );
  }
}

.hero__inner {
  padding-block: var(--space-5);
  position: relative;
  z-index: 1;
}

/* Coluna única desde sempre: a foto virou o campo inteiro, então não existe mais
   a coluna do palco à direita para dividir espaço com o texto. O `max-width`
   impede que a linha do subtítulo estique além do confortável em telas largas. */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

.hero__conteudo {
  max-width: 60ch;
}

.hero__badge {
  display: inline-block;
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.hero__titulo {
  font-size: clamp(2.6rem, 1.9rem + 2.9vw, 4.4rem);
  line-height: 0.88;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

/* Grifo amarelo. O box-shadow inset antigo era ancorado nas métricas do
   Montserrat e descolava do texto com o line-height 0.88 do Bebas. Aqui a barra
   é um pseudo-elemento preso à caixa do próprio termo — independe da fonte. */
.hero__titulo em {
  font-style: normal;
  /* Medido no navegador: no Bebas a baseline fica 0.354em acima do fundo da
     caixa de conteúdo (descender reservado que as maiúsculas não usam). A barra
     é ancorada a 0.30em do fundo para invadir o pé das letras — marca-texto, não
     sublinhado. Feito com background em vez de pseudo-elemento para não virar
     inline-block e não alterar a altura da linha do H1. */
  background: linear-gradient(rgba(var(--cor-amarelo-rgb), 0.9) 0 100%) no-repeat;
  /* Barra fina de propósito: mais grossa que isso, ela invade as letras e o
     texto branco passa a ficar sobre amarelo (contraste ~1.9:1, ilegível). */
  background-size: 100% 0.12em;
  background-position: left 0 bottom 0.30em;
}

.hero__subtitulo {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin-bottom: var(--space-4);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.hero__prova {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__prova-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.hero__prova-numero {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 0.9;
  color: var(--cor-amarelo);
}

.hero__prova-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Botões dentro do hero vermelho: primário vira amarelo, outline vira branco */
.hero .btn--primario {
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.hero .btn--primario:hover {
  background-color: var(--cor-amarelo-escuro);
}

.hero .btn--outline {
  color: var(--cor-branco);
  border-color: rgba(255, 255, 255, 0.55);
}

.hero .btn--outline:hover {
  border-color: var(--cor-branco);
  color: var(--cor-branco);
  background-color: rgba(255, 255, 255, 0.1);
}

/* O palco do produto (.hero__palco / .hero__produto / .hero__imagem) foi
   aposentado junto com a coluna direita do hero: a foto do ensaio virou o campo
   inteiro da seção e faz o trabalho que a forma amarela fazia. O padrão do palco
   segue vivo em .sobre__palco e .hero-interno__palco. */


/* ---------- Heroes compactos (páginas utilitárias) ---------- */
.produtos-hero,
.orcamento-hero,
.privacidade-hero {
  padding-top: calc(var(--header-altura) + var(--space-7));
  padding-bottom: var(--space-7);
  /* O radial preto de 18% saiu, como já tinha saído do hero da home: escurecia
     o campo, e as artes fazem o contrário — clareiam o miolo com o vermelho
     vivo e deixam as bordas caírem. */
  background-color: var(--cor-vermelho);
  color: var(--cor-branco);
  position: relative;
  overflow: hidden;
  --luz-centro: rgba(var(--cor-vermelho-brilho-rgb), 0.9);
  --luz-tamanho: 85% 70%;
  --luz-posicao: 62% 30%;
  --pattern-cor: var(--cor-branco);
  --pattern-opacidade: 0.07;
  --pattern-escala: 240px;
}

/* Só as duas páginas que recebem a fita reservam a faixa dela no rodapé.
   Em % pelo mesmo motivo do .cta-final: a espessura da tarja deriva da largura,
   então padding fixo deixaria a fita por cima do conteúdo em telas largas. */
.produtos-hero,
.orcamento-hero {
  padding-bottom: calc(var(--space-7) + 8.5%);
}

/* Foto de campo nos heros internos — mesma imagem e mesmo tratamento da home,
   para a primeira dobra das três páginas ler como a mesma seção. Reaproveita
   .hero__foto (e o escurecimento no ::after dele); aqui só se declara a variável.
   Privacidade fica de fora: é página de texto e não recebe foto.

   Cada página tem a sua declaração, e não um seletor único, justamente para
   poder receber uma foto própria depois: basta trocar a URL de uma delas. */
.produtos-hero {
  --hero-foto: url('/images/hero-loja.webp');
}

/* Orçamento tem foto própria: atendimento no balcão, que é o assunto da página.
   Foto frontal, com a pessoa no centro para a direita e o rosto no terço
   superior — daí o corte mais alto que o da fachada, que é contra-plongée. */
.orcamento-hero {
  --hero-foto: url('/images/hero-orcamento.webp');
}

.orcamento-hero .hero__foto {
  background-position: 50% 32%;
}

/* Sem o palco, as duas seções são de coluna única. O max-width evita que o
   subtítulo estique por cima da foto em telas largas — mesma razão do
   .hero__conteudo na home. */
.orcamento-hero .hero-interno__grid,
.produtos-hero .hero-interno__grid {
  grid-template-columns: 1fr;
}

.orcamento-hero .hero-interno__grid > div,
.produtos-hero .hero-interno__grid > div {
  max-width: 56ch;
}

/* O conteúdo precisa subir acima da camada da foto (z-index 0), como o
   .hero__inner faz na home. */
.produtos-hero > .container,
.orcamento-hero > .container {
  position: relative;
  z-index: 1;
}

/* O gradiente que fechava o lado direito saiu junto com a estrela: existia só
   para dar contraste a ela. Produtos e Orçamento voltaram ao scrim padrão da
   home, que zera em 78% e deixa a foto aparecer crua à direita. */

/* Palco do hero interno — mesma receita do hero da home, em escala menor.
   Só produtos e orçamento: privacidade é página de texto e não recebe. */
.hero-interno__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-interno__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.hero-interno__palco {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.hero-interno__palco .forma {
  --forma-cor: var(--cor-amarelo);
  inset: -12% -6%;
  --pattern-cor: var(--cor-amarelo-escuro);
  --pattern-opacidade: 0.45;
  --pattern-escala: 130px;
}

.hero-interno__produto {
  width: min(82%, 260px);
  transform: translateY(-4%);
}

/* A fita entra pela base do hero, reta — ocupa o lugar exato da faixa zebrada
   que saiu na rodada 1. Mesma técnica do CTA: ver .cta-final__fita. */
.hero-interno__fita {
  left: -15%;
  bottom: 0;
  margin-bottom: -8.8%;
  --fita-angulo: -7.74deg;
  z-index: 2;
}

/* Etiqueta amarela e botão amarelo sobre o vermelho dos heros internos */
.produtos-hero .secao-eyebrow,
.orcamento-hero .secao-eyebrow,
.privacidade-hero .secao-eyebrow {
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
}

.produtos-hero .btn--primario,
.orcamento-hero .btn--primario,
.privacidade-hero .btn--primario {
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.produtos-hero .btn--primario:hover,
.orcamento-hero .btn--primario:hover,
.privacidade-hero .btn--primario:hover {
  background-color: var(--cor-amarelo-escuro);
}

.produtos-hero__titulo,
.orcamento-hero__titulo,
.privacidade-hero__titulo {
  font-size: clamp(2.2rem, 1.7rem + 2.1vw, 3.2rem);
  line-height: 0.9;
  text-transform: uppercase;
  max-width: 760px;
  margin-bottom: var(--space-3);
}

.produtos-hero__subtitulo,
.orcamento-hero__subtitulo,
.privacidade-hero__subtitulo {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
  max-width: 620px;
  margin-bottom: var(--space-4);
}

/* ---------- Seções genéricas ---------- */
.secao {
  padding-block: var(--space-7);
}

.secao--alt {
  background-color: var(--cor-bg-alt);
  position: relative;
  border-top: 1px solid rgba(26, 22, 20, 0.10);
  border-bottom: 1px solid rgba(26, 22, 20, 0.10);
  /* Campo claro é onde a página respira entre dois campos saturados — o pattern
     entra discreto e só na faixa do topo (ver .tem-pattern--topo). */
  --pattern-cor: var(--cor-vermelho);
  --pattern-opacidade: 0.08;
  --pattern-escala: 190px;
  --pattern-fim: 40%;
}

/* O friso zebrado do topo das seções alternadas foi removido — era o uso mais
   diluído da faixa, presente em toda seção alt. A separação entre seções agora
   vem do próprio contraste de campo (vermelho → amarelo → claro). */

/* Seção com fundo amarelo (bloco de destaque pontual) */
.secao--amarelo {
  background-color: var(--cor-amarelo);
  position: relative;
  /* Campo amarelo com luz quente e telhados no negativo — a inversão exata do
     hero, que é campo vermelho com forma amarela. */
  --luz-centro: rgba(var(--cor-amarelo-brilho-rgb), 0.85);
  --luz-tamanho: 75% 60%;
  --pattern-cor: var(--cor-amarelo-escuro);
  --pattern-opacidade: 0.22;
  --pattern-escala: 200px;
}

.secao--amarelo .secao-subtitulo {
  color: var(--cor-texto);
}

/* Seção com fundo vermelho (bloco de destaque pontual) */
.secao--vermelho {
  background-color: var(--cor-vermelho);
  color: var(--cor-branco);
  position: relative;
}

.secao--vermelho .secao-titulo {
  color: var(--cor-branco);
}

.secao--vermelho .secao-subtitulo {
  color: rgba(255, 255, 255, 0.88);
}

.secao--vermelho .secao-eyebrow {
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
}

/* ---------- Diferenciais ---------- */
.diferenciais__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 1200px) {
  .diferenciais__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.diferencial-card {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-card);
  padding: var(--space-4);
  text-align: center;
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.diferencial-card:hover {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-4px);
}

/* ---------- Regra de negativo/positivo da marca ----------
   Onde o fundo é VERMELHO, o ícone é AMARELO. Onde o fundo é AMARELO, o ícone
   é VERMELHO. Branco não entra: não é cor da marca.

   Hoje só existem contêineres de ícone com fundo vermelho — nenhum com fundo
   amarelo. A metade amarela da regra fica registrada aqui para quando aparecer
   um; não vale inventar um elemento só para cumprir a simetria. */
.diferencial-card__icone {
  /* maior que os 56px antigos: a estrela come as quinas, e o ícone precisa
     caber inteiro dentro do miolo da forma */
  width: 76px;
  height: 76px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-vermelho);
  /* Negativo/positivo da marca: sobre vermelho o ícone é AMARELO, nunca branco.
     O branco não pertence à paleta — ver a regra em .diferencial-card__icone. */
  color: var(--cor-amarelo);
}

.diferencial-card__icone svg {
  width: 28px;
  height: 28px;
}

.diferencial-card__titulo {
  font-size: 1.4rem;
  margin-bottom: var(--space-2);
  text-wrap: balance;
}

.diferencial-card__texto {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

/* ---------- Categorias de produtos ---------- */
.categorias__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* Duas colunas em 386px deixam ~163px por card — títulos em Bebas como
   "IMPERMEABILIZANTES" não cabem sem quebrar feio. */
@media (max-width: 560px) {
  .categorias__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .categorias__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.categoria-card {
  display: flex;
  flex-direction: column;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-card);
  padding: var(--space-4);
  transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}

.categoria-card:hover {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-4px);
  border-color: var(--cor-amarelo);
}

/* ---------- Foto da categoria no card da home ----------
   Mesma proporção 3:2 e MESMOS arquivos das seções de /produtos
   (`cat-eletrica.webp` … `cat-impermeabilizantes.webp`). Proporção divergente
   entre os dois lugares apareceria como corte diferente da mesma foto.
   O ícone continua abaixo, como marcador da categoria — a foto diz o que tem
   na prateleira, o ícone diz de que seção se trata. */
/* height: auto é obrigatório aqui. Os atributos width/height do <img> viram
   propriedades de apresentação, e sem esta linha o height="800" do HTML vence o
   aspect-ratio: o card renderizava 318×800 — retrato, cortando a foto inteira.
   Os atributos continuam no HTML de propósito: é o que reserva o espaço e evita
   salto de layout enquanto a imagem carrega. */
.categoria-card__foto {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background-color: var(--cor-bg-alt);
}

.categoria-card__icone {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-vermelho);
  color: var(--cor-amarelo);
  margin-bottom: var(--space-3);
}

.categoria-card__icone svg {
  width: 26px;
  height: 26px;
}

.categoria-card__titulo {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
  text-wrap: balance;
}

.categoria-card__texto {
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-3);
  flex-grow: 1;
}

.categoria-card__link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-vermelho);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transicao);
}

.categoria-card__link:hover {
  gap: var(--space-2);
}

/* ---------- Sobre ---------- */
.sobre__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

.sobre__imagem img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card);
}

/* Palco da seção Sobre — domo amarelo com pattern atrás da foto.
   Mesma receita do hero, invertida: campo claro, forma quente. */
.sobre__palco {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.sobre__palco .forma {
  --forma-cor: var(--cor-amarelo);
  inset: 12% -4% 0 -4%;
  --pattern-cor: var(--cor-amarelo-escuro);
  --pattern-opacidade: 0.40;
  --pattern-escala: 150px;
}

/* --ph-proporcao servia ao placeholder tracejado; com a foto real no lugar ela
   deixou de ter efeito, e a imagem esticava na altura do palco — virava retrato
   e cortava o assunto. aspect-ratio + object-fit resolvem, como já era feito em
   .categoria-card__foto e .categoria-secao__foto. */
.sobre__foto {
  --ph-proporcao: 4 / 3;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
  width: min(94%, 460px);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card-hover);
}

.sobre__titulo {
  font-size: clamp(1.85rem, 1.5rem + 1.4vw, 2.55rem);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.sobre__texto {
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-3);
}

.sobre__destaques {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.sobre__destaque {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--cor-bg-alt);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
}

.sobre__destaque svg {
  width: 18px;
  height: 18px;
  color: var(--cor-vermelho);
  flex-shrink: 0;
}

/* ---------- Mapa / Como chegar ---------- */
.mapa__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.mapa__info {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card);
  padding: var(--space-5);
}

.mapa__titulo {
  font-size: 1.75rem;
  margin-bottom: var(--space-3);
}

.mapa__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mapa__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.mapa__item svg {
  width: 22px;
  height: 22px;
  color: var(--cor-vermelho);
  flex-shrink: 0;
  margin-top: 2px;
}

.mapa__item strong {
  display: block;
  font-size: 0.9rem;
}

.mapa__item span {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.mapa__iframe-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  border: 1px solid var(--cor-borda);
  min-height: 320px;
}

.mapa__iframe-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}


/* ---------- FAQ ---------- */
.faq__lista {
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.faq-item__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
}

.faq-item__pergunta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cor-vermelho);
  transition: transform var(--transicao);
}

.faq-item[data-aberto="true"] .faq-item__pergunta svg {
  transform: rotate(180deg);
}

.faq-item__resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicao), padding var(--transicao);
  padding-inline: var(--space-4);
}

.faq-item__resposta p {
  color: var(--cor-texto-suave);
  padding-bottom: var(--space-4);
  font-size: 0.95rem;
}

.faq-item[data-aberto="true"] .faq-item__resposta {
  max-height: 400px;
}

/* ---------- CTA final ----------
   Espelho da arte do WhatsApp: campo vermelho com pattern e luz, domo amarelo
   subindo do rodapé e a faixa zebrada marcando a urgência.
   É o ÚNICO bloco da home que carrega a faixa. */
.cta-final {
  background-color: var(--cor-vermelho);
  color: var(--cor-branco);
  text-align: center;
  border-radius: var(--radius-lg);
  /* O padding inferior reserva a faixa da fita. Precisa ser em % (que resolve
     contra a LARGURA) porque a espessura da tarja deriva da largura do bloco:
     130% de largura × 70/334 de proporção × 31% de tarja ≈ 8,5%. Com padding
     fixo, a fita passaria por cima do botão em telas largas. */
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + 8.5%);
  position: relative;
  overflow: hidden;
  --luz-centro: rgba(var(--cor-vermelho-brilho-rgb), 0.9);
  --luz-tamanho: 80% 70%;
  --luz-posicao: 50% 20%;
  --pattern-cor: var(--cor-branco);
  --pattern-opacidade: 0.08;
  --pattern-escala: 210px;
}

/* Variação full-bleed: a faixa vermelha atravessa a tela inteira, sem raio e
   sem container por fora. Toda a geometria da peça (espessura da fita, folga
   reservada embaixo) é proporcional à LARGURA do bloco — que aqui deixou de ser
   os ~1136px do container e passou a ser a viewport. Manter as porcentagens do
   card faria a fita engordar junto com o monitor. Por isso os valores voltam em
   vw, calculados para preservar a MESMA proporção que a peça tinha no card. */
.cta-final--full {
  border-radius: 0;
  /* 130% de ~1136px ≈ 118vw numa tela de 1250 — a fita continua ultrapassando
     os dois lados, agora pelas bordas reais da tela. */
  --fita-largura: 118vw;
  /* A folga inferior era 8,5% da largura do bloco, ou 6,54% da largura da fita
     (8,5 / 130). Mesma razão aplicada aos 118vw = 7,7vw. */
  padding: var(--space-7) 0 calc(var(--space-6) + 7.7vw);
  /* O clarão precisa encolher em relação ao campo: 80% de uma viewport larga
     viraria um degradê difuso na tela toda, sem centro. */
  --luz-tamanho: 55% 75%;
}

/* Em campo de 100vw o domo com inset:0 vira uma faixa rasa de ponta a ponta e
   perde a forma. Aqui ele volta a ser uma cúpula: largura limitada e centrada. */
.cta-final--full .cta-final__domo {
  left: 50%;
  right: auto;
  width: min(1100px, 84vw);
  translate: -50% 0;
  height: 58%;
}

/* Mesma conta da folga inferior: -8,8% do bloco eram -6,77% da largura da fita,
   que sobre 118vw dá -8vw. Em vw e não em %, porque a % aqui resolveria contra
   os 100vw do pai e não contra a fita. */
.cta-final--full .cta-final__fita {
  /* Centra sem mexer em translate: a fita tem 118vw num campo de 100vw, logo
     sobra 18vw — 9 de cada lado. Usar translate aqui não funcionaria, porque o
     keyframe `fita-balanca` já anima essa propriedade e a animação vence. */
  left: -9vw;
  right: auto;
  margin-bottom: -8vw;
}

/* O .container interno recupera o respiro lateral que o padding do card dava. */
.cta-final__inner {
  position: relative;
  z-index: 1;
}

/* As 2 palavras extras existem para preencher a fita em tela larga. Numa tela
   estreita a faixa encolhe junto e as 7 se espremem — abaixo de 700px volta-se
   às 5 originais, que é a densidade para a qual o espaçamento foi desenhado. */
@media (max-width: 700px) {
  .cta-final--full .fita__palavra:nth-child(n + 6) {
    display: none;
  }
}

/* A fita vem como elemento próprio (.fita no markup), não como pseudo-elemento:
   os dois do bloco já são da camada de pattern (::before) e de luz (::after).
   Empilhar a faixa num deles fazia ela herdar a opacidade e a máscara do
   pattern e sumir da tela. */

/* O domo substitui o antigo círculo preto de 10%: o mesmo papel de quebrar o
   campo chapado, agora na cor da marca e com a forma das artes. */
.cta-final__domo {
  --forma-cor: var(--cor-amarelo);
  top: auto;
  height: 42%;
  opacity: 0.16;
  z-index: -1;
}

/* Botão do CTA vermelho vira amarelo (contraste sobre o vermelho) */
.cta-final .btn--primario {
  background-color: var(--cor-amarelo);
  color: var(--cor-texto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.cta-final .btn--primario:hover {
  background-color: var(--cor-amarelo-escuro);
}

.cta-final__titulo {
  font-size: clamp(1.85rem, 1.5rem + 1.4vw, 2.65rem);
  margin-bottom: var(--space-3);
  position: relative;
  text-wrap: balance;
}

.cta-final__texto {
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  position: relative;
}

.cta-final__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  position: relative;
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--cor-bg-alt);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--space-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}

.footer__marca {
  margin-bottom: var(--space-3);
}

.footer__marca img {
  height: 76px;
  width: auto;
  display: block;
}

.footer__texto {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  max-width: 320px;
  margin-bottom: var(--space-3);
}

.footer__redes {
  display: flex;
  gap: var(--space-2);
}

.footer__rede {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  /* Era var(--cor-texto): eram os únicos ícones do site fora do sistema de
     marca, em tinta quase-preta. Sobre fundo claro, o positivo é o vermelho. */
  color: var(--cor-vermelho);
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.footer__rede:hover {
  background-color: var(--cor-vermelho);
  border-color: var(--cor-vermelho);
  color: var(--cor-amarelo);
}

.footer__rede svg {
  width: 18px;
  height: 18px;
}

.footer__col-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.footer__col-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__col-lista a,
.footer__col-lista span {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  transition: color var(--transicao);
}

.footer__col-lista a:hover {
  color: var(--cor-vermelho);
}

/* Crédito de autoria da Agência Pine — discreto por definição: repousa no peso
   visual do rodapé e só ganha destaque no hover.

   Rodapé claro (--cor-bg-alt), então a cor de repouso vem de --cor-texto-suave,
   a mesma que .footer__rodape já aplica: o crédito herda a tinta do texto ao
   lado em vez de introduzir um cinza próprio. O azul da Pine entra só no hover,
   que é onde a skill o reserva para fundo claro. */
.footer__credito a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--cor-texto-suave);
  text-decoration: none;
  transition: color var(--transicao);
}

/* focus-visible junto com hover: quem navega por teclado precisa enxergar o
   foco, e o link não tem sublinhado em repouso para sinalizá-lo. */
.footer__credito a:hover,
.footer__credito a:focus-visible {
  color: #0090D4;
}

/* height em `em` faz a marca acompanhar o tamanho do texto ao redor; width auto
   preserva a proporção retrato do pinheiro (424×588) sem achatá-lo. Fixar as
   duas medidas juntas o deformaria. */
.footer__credito svg {
  height: 1.35em;
  width: auto;
  fill: currentColor;
}

.footer__credito strong {
  font-weight: 600;
}

.footer__rodape {
  border-top: 1px solid var(--cor-borda);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
}

/* Reserva a faixa do botão flutuante de WhatsApp.

   Ele é `position: fixed` a 24px da borda e mede 60px, então cobre o canto
   inferior direito da página — justamente onde o space-between encosta o
   crédito da Pine. Sem esta folga o botão fica POR CIMA do link: um clique na
   palavra "Pine" abre o WhatsApp em vez do site da agência.

   A faixa tem os dois limites medidos no navegador:

   Acima de 1368px o container de 1200px já está centralizado o bastante para o
   botão cair fora dele — a conta é (vw + 1200) / 2 < vw − (24 + 60 + 24).

   Abaixo de ~820px o flex-wrap desce o crédito para uma linha só dele, à
   esquerda, longe do botão. Ali a reserva não protege nada e ainda cobrava
   caro: em 390px os 84px empurravam o copyright de duas para três linhas. */
@media (min-width: 820px) and (max-width: 1368px) {
  .footer__rodape {
    padding-right: 5.25rem;
  }
}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--cor-whatsapp);
  color: var(--cor-branco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(var(--cor-whatsapp-rgb), 0.4);
  z-index: 900;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao);
}

.whatsapp-flutuante.visivel {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.whatsapp-flutuante svg {
  width: 30px;
  height: 30px;
}

/* ---------- Página Produtos: navegação de âncoras (chips) ---------- */
/* ---------- Índice de categorias (produtos.html) ---------- */

/* Mesma escada de colunas do .categorias__grid da home, pelo mesmo motivo: em
   duas colunas num celular de 390px sobram ~163px por card, e "IMPERMEABILIZANTES"
   em Bebas não cabe sem quebrar feio. */
.indice__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 560px) {
  .indice__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .indice__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.indice-card {
  display: flex;
  flex-direction: column;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-card);
  padding: var(--space-4);
  transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}

.indice-card:hover,
.indice-card:focus-visible {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-2px);
  border-color: var(--cor-vermelho);
}

/* 92px contra os 76px das seções: aqui a estrela é o único elemento visual do
   card — não há foto disputando atenção com ela — e é o que dá à página o peso
   gráfico que faltava entre o hero e a primeira categoria. O SVG interno cresce
   junto para manter a proporção com o miolo da estrela. */
.indice-card__icone {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-vermelho);
  color: var(--cor-amarelo);
  margin-bottom: var(--space-3);
  transition: background-color var(--transicao);
}

.indice-card__icone svg {
  width: 36px;
  height: 36px;
}

.indice-card:hover .indice-card__icone {
  background-color: var(--cor-amarelo);
  color: var(--cor-vermelho);
}

.indice-card__titulo {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

/* O auto empurra o link para o pé do card: com textos de alturas diferentes,
   sem isso as setas ficariam desalinhadas de card para card. */
.indice-card__texto {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.indice-card__link {
  margin-top: auto;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cor-vermelho);
}

.indice-card:hover .indice-card__link span {
  margin-left: 4px;
  display: inline-block;
  transition: margin-left var(--transicao);
}

/* Nomes de classe alinhados ao script.js: container .categorias-nav,
   chips são <a href="#..."> dentro dela, estado ativo = .chip--ativo */
.categorias-nav {
  position: sticky;
  top: var(--header-altura);
  background-color: var(--cor-bg);
  border-bottom: 1px solid var(--cor-borda);
  z-index: 50;
  padding-block: var(--space-3);
}

.categorias-nav__lista {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--space-1);

  /* A lista rola em qualquer tela abaixo de ~795px, e rolava sem dizer isso: em
     390px sobravam 405px de chips fora de vista (Tintas e Impermeabilizantes
     nunca existiam no celular). O degradê nas bordas é o aviso.

     A largura do fade vem de custom properties em vez de valor fixo porque um
     fade permanente apagaria "Elétrica" já com a lista no início — o que é pior
     que o problema original. Quem acende e apaga cada lado é
     inicializarChipsCategorias() no script.js, lendo a posição real do scroll. */
  --fade-esq: 0px;
  --fade-dir: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-esq),
    #000 calc(100% - var(--fade-dir)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-esq),
    #000 calc(100% - var(--fade-dir)),
    transparent 100%
  );
  transition: --fade-esq var(--transicao), --fade-dir var(--transicao);
}

/* Sangria até a borda da tela na faixa onde a lista realmente rola.

   Dentro do .container os chips somem 24px antes da borda, o que lê como margem
   e não como corte. Passando o padding do container para a própria lista, o chip
   atravessa a borda da tela — o sinal universal de "tem mais para o lado". O
   scroll-padding repõe essa folga quando o scrollspy centraliza um chip.

   Os 800px vêm da medição: acima de ~795px todos os chips cabem e não há o que
   sinalizar. Reconferir este número se os nomes das categorias mudarem de
   tamanho. */
@media (max-width: 800px) {
  .categorias-nav .container {
    padding-inline: 0;
  }

  .categorias-nav__lista {
    padding-inline: var(--space-4);
    scroll-padding-inline: var(--space-4);
  }
}

.categorias-nav__link {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.categorias-nav__link:hover,
.categorias-nav__link:focus-visible,
.categorias-nav__link.chip--ativo {
  background-color: var(--cor-vermelho);
  color: var(--cor-branco);
  border-color: var(--cor-vermelho);
}

.categoria-secao {
  padding-block: var(--space-7);
  scroll-margin-top: calc(var(--header-altura) + 4.5rem);
}

/* A alternância de fundo saiu do `:nth-child(even)` e virou classe explícita
   no HTML (.secao--alt nas seções pares). O seletor antigo contava TODOS os
   irmãos dentro de <main>, inclusive o <nav> dos chips — inserir ou remover
   qualquer elemento ali invertia a zebra inteira. Além disso ele aplicava só a
   cor, sem as variáveis --pattern-* que .secao--alt traz. */

.categoria-secao__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

.categoria-secao__icone {
  /* 76px e não os 60px antigos: o ícone de 30px precisa caber no miolo da
     estrela. A 60px o miolo é de 37,9px — sobrariam 4px de folga de cada lado,
     e qualquer traço que estourasse cairia em amarelo sobre fundo claro. */
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-vermelho);
  color: var(--cor-amarelo);
  margin-bottom: var(--space-3);
}

.categoria-secao__icone svg {
  width: 30px;
  height: 30px;
}

/* ---------- Box de foto da categoria ----------
   O ícone de linha diz "elétrica" em abstrato; a foto diz o que tem na
   prateleira. Quem procura material de construção quer ver o produto, então a
   foto entra ACIMA do ícone na hierarquia — o ícone continua, menor, como
   marcador da seção.

   3:2 fixo (1200×800) nas seis: é uma grade visual mesmo estando em seções
   separadas, e proporção variável entre elas quebraria a leitura de conjunto.
   É a mesma proporção das demais fotos do ensaio (ver images/LEIA-ME-FOTOS.md),
   então o arquivo entregue entra sem corte. `object-fit: cover` garante que
   foto fora de medida seja cortada, nunca distorcida. */
/* Mesmo motivo do .categoria-card__foto: sem height: auto o atributo height do
   <img> vence o aspect-ratio e a foto estica em retrato. */
.categoria-secao__foto {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card);
  background-color: var(--cor-bg-alt);
}

.categoria-secao__titulo {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.3rem);
  margin-bottom: var(--space-3);
}

.categoria-secao__texto {
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-4);
  max-width: 640px;
}

/* Os itens deixaram de morar num card de duas colunas e viraram etiquetas que
   fluem. O card branco com sombra competia com a foto ao lado — dois blocos
   sólidos disputando a mesma linha — e as duas colunas fixas deixavam buracos
   sempre que um item era muito mais curto que o vizinho. */
.categoria-secao__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Aqui havia uma media query forçando 1 coluna abaixo de 560px: em duas colunas
   o min-content de itens como "impermeabilizante" somava 392px dentro de uma
   coluna de 327 e devolvia scroll horizontal a /produtos no mobile. Ela saiu
   junto com o grid — chips com flex-wrap se acomodam sozinhos em qualquer
   largura, e a mesma proteção agora vive no max-width do chip. */

.categoria-secao__lista li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  /* Branco, e não --cor-bg-alt: as seções alternam entre campo branco e campo
     creme, e um chip creme sumiria nas seções creme. Branco + borda se sustenta
     nos dois campos. */
  background-color: var(--cor-branco);
  font-size: 0.9rem;
  /* Trava a largura ao container. Sem isto, "Fitas isolantes e conduítes" num
     celular estreito estica a faixa e devolve o scroll horizontal que o
     min-width: 0 do layout antigo existia para evitar. */
  max-width: 100%;
  min-width: 0;
}

.categoria-secao__lista li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Era amarelo sobre card branco — ~1,6:1, praticamente invisível.
     Sobre fundo claro o positivo da marca é o vermelho. */
  background-color: var(--cor-vermelho);
  flex-shrink: 0;
}

/* ---------- Página Orçamento ---------- */
/* Em coluna única os quatro passos viravam faixas de ~1000px de largura para
   duas linhas de texto — muita distância entre o número e o fim da frase. Em
   2×2 a medida do parágrafo cai para algo confortável de ler. */
.orcamento-passos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .orcamento-passos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.orcamento-passo {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-card);
  padding: var(--space-4);
}

.orcamento-passo__numero {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--cor-vermelho);
  color: var(--cor-amarelo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.orcamento-passo__titulo {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.orcamento-passo__texto {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

/* O bloco virou campo de urgência: usa .cta-final no markup. O fundo #F8F6F3, a
   borda e o padding saíram daqui — vinham depois do .cta-final no arquivo e o
   sobrescreviam, deixando o bloco claro e sem a reserva de espaço da fita.

   A margem vertical também saiu: agora que o bloco é uma faixa full-bleed, ela
   abria duas listras do fundo da página acima e abaixo do vermelho e desfazia o
   corte de ponta a ponta. Esta regra vem DEPOIS de .cta-final--full no arquivo e
   tem a mesma especificidade, então venceria a disputa se continuasse aqui. */

.orcamento-cta-box__texto {
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.orcamento-diferenciais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .orcamento-diferenciais {
    grid-template-columns: repeat(3, 1fr);
  }
}

.orcamento-diferencial {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
}

.orcamento-diferencial svg {
  width: 22px;
  height: 22px;
  color: var(--cor-vermelho);
  flex-shrink: 0;
}

.orcamento-info {
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card);
  padding: var(--space-5);
}

.orcamento-info__titulo {
  font-size: 1.2rem;
  margin-bottom: var(--space-3);
}

.orcamento-info__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.orcamento-info__lista li {
  display: flex;
  gap: var(--space-2);
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
}

.orcamento-info__lista svg {
  width: 20px;
  height: 20px;
  color: var(--cor-vermelho);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Página Privacidade ---------- */
/* Pattern bem discreto no topo, só para o campo não ser branco absoluto de
   ponta a ponta. Página de leitura: nada além disso. */
.privacidade-secao {
  position: relative;
  --pattern-cor: var(--cor-vermelho);
  --pattern-opacidade: 0.05;
  --pattern-escala: 190px;
  --pattern-fim: 30%;
}

.privacidade-conteudo {
  padding-block: var(--space-7);
  max-width: 760px;
  margin-inline: auto;
}

.privacidade-conteudo h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.privacidade-conteudo h2:first-child {
  margin-top: 0;
}

.privacidade-conteudo p {
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-3);
}

.privacidade-conteudo ul {
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
}

.privacidade-conteudo ul li {
  list-style: disc;
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-2);
}

.privacidade-conteudo strong {
  color: var(--cor-texto);
}

.privacidade-conteudo .privacidade-atualizacao {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (min-width: 768px) {
  .hero__ctas {
    flex-wrap: nowrap;
  }

  .sobre__grid {
    grid-template-columns: 1fr 1fr;
  }

  .mapa__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Era 280px fixos, herdados de quando esta coluna carregava foto + ícone +
     título empilhados. Agora que ela tem só a foto, 280px deixavam a imagem em
     280×187 — pequena demais ao lado de uma coluna de texto três vezes mais
     larga. Em fração a foto vai a ~445px e as duas colunas ficam equilibradas. */
  .categoria-secao__grid {
    grid-template-columns: 2fr 3fr;
  }

  /* Só no desktop, onde a foto divide a linha com a coluna de texto: em 3/2 ela
     fecha 137px antes do conteúdo ao lado e deixa um degrau visível embaixo. Em
     4/3 essa sobra cai para 99px.

     Testei também esticar a foto até a altura do conteúdo (sobra zero), mas com
     object-fit: cover a arte perde as margens laterais — o chuveiro da Elétrica
     encosta na borda. As cat-*.webp são artes compostas, não fotos de ambiente:
     têm enquadramento próprio e não sobrevivem a um corte de 31%. */
  .categoria-secao__foto {
    aspect-ratio: 4 / 3;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .nav--desktop {
    display: block;
  }

  .header__hamburger {
    display: none;
  }

  .nav--mobile {
    display: none;
  }


  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}