/* =========================================================================
   SOLUFLEX — seções
   Depende de base.css (tokens, botões, olho, formas, blueprint, animação).
   Nada aqui redefine componente da base: só posiciona, compõe e complementa.
   Ordem: complementos da base -> cabeçalho -> seções da home -> páginas
   internas -> rodapé -> responsivo.
   ========================================================================= */

/* =========================================================================
   0. COMPLEMENTOS DA BASE
   ========================================================================= */

/* icone() devolve <svg> sem width/height: sem medida no CSS o navegador cai no
   default de 300x150. Este é o tamanho de referência, cada bloco ajusta. */
:where(header, main, footer, .topo-barra, .menu-cel, .zap-flutua) svg {
  width: 1em;
  height: 1em;
}

/* A base dá margin-left ao ícone do botão pensando no ícone que vem depois do
   texto. Quando o ícone vem antes (WhatsApp), a margem troca de lado e ele para
   de andar no hover, senão o par ícone-texto "abre". */
.btn > svg:first-child {
  margin-left: 0;
  margin-right: 10px;
}

.btn:hover > svg:first-child { transform: none; }

.btn-texto svg { width: 15px; height: 15px; }

/* Os modificadores entra--esq / entra--dir / entra--baixo funcionam sozinhos,
   sem a classe .entra ao lado (destaques, sobre): a regra está no base.css. */

/* Painel de aba: um só mecanismo serve linhas e processo, e continua certo se o
   JS esquecer de mexer no atributo hidden. */
.abas__paineis { position: relative; }
.abas__painel { display: none; }
.abas__painel.esta { display: block; }

/* Rótulo que só existe para leitor de tela (o placeholder carrega o texto na
   tela). Fora do fluxo pela esquerda: não gera rolagem horizontal. */
.hero__pontos .corta,
.ninho {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   0b. CORTINA DE ABERTURA
   Tela cheia azul com o logo no meio; depois de um respiro ela sobe levando o
   logo junto e revela o site de baixo pra cima. Tudo em CSS: JS travado ou
   lento não pode deixar o visitante olhando uma tela azul. O site.js só escuta
   o fim da animação pra soltar a entrada dos blocos e tirar isto do DOM.
   ========================================================================= */

/* A abertura: uma FITA atravessa a tela e a lacra, e o véu se abre em duas
   metades como caixa que abre. É a marca em movimento no lugar do véu genérico.

   Contrato com o JS, NÃO QUEBRE: quem tira a cortina do DOM é o site.js, ouvindo
   o `animationend` de `.cortina__veu`. Então essa metade precisa ter UMA animação
   só, e ela precisa ser a última a terminar. Duas animações no mesmo elemento
   fariam o site abrir no fim da primeira, com o véu ainda na tela.

   100% CSS de propósito: JS que falha ou demora deixaria o visitante olhando
   para uma tela azul. Aqui a cortina sai sozinha, tendo JS ou não. */
.cortina {
  /* O rolo nasce inteiro fora da tela, inclusive a sombra. O curso maior
     compensa esse recuo e conserva exatamente o mesmo ponto final à direita. */
  --cortina-inicio: -140px;
  --cortina-curso: calc(102vw + 140px);
  --cortina-desnivel: calc(1.42vw + 2px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 200;
}

/* As duas metades. Sem filete nenhum: ele era borda daqui e aparecia ATRAVESSANDO
   a tela inteira antes de a fita chegar, como se a fita seguisse uma linha já
   desenhada. Agora o filete é a borda da própria fita e nasce com ela. */
.cortina__veu,
.cortina__veu-baixo {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;   /* meio por cento de sobra: em altura ímpar sobrava 1px de página no meio */
  background-color: var(--azul-esc);
}

.cortina__veu {
  top: 0;
  animation: cortina-cima 460ms cubic-bezier(.7, 0, .28, 1) 1250ms forwards;
}

.cortina__veu-baixo {
  bottom: 0;
  animation: cortina-baixo 460ms cubic-bezier(.7, 0, .28, 1) 1250ms forwards;
}

/* A fita. O logotipo vem por variável do HTML (--fita-arte) e se repete ao longo
   dela, como fita impressa de verdade sai da máquina.

   O MECANISMO É O SEGREDO: a fita NÃO se desloca. Ela é revelada da esquerda
   para a direita por clip-path, com o fundo ancorado no lugar. Fita de verdade
   não voa: a ponta avança e o resto fica grudado onde encostou, com os
   logotipos parados. Antes ela era um translateX, e objeto rígido atravessando
   a tela lê como cartão voando, que foi exatamente o que o Darlei apontou.

   O clip-path também tira a rotação do meio da animação: ela fica no transform
   estático e nenhum quadro precisa repeti-la. */
.cortina__fita {
  position: absolute;
  top: 50%;
  left: var(--cortina-inicio);
  width: var(--cortina-curso);
  height: 96px;
  margin-top: -48px;
  /* FITA BRANCA, sem filete laranja: decisão do Darlei em 06/08. A fita da
     Soluflex que vai na abertura é a branca impressa, e o filete laranja fazia
     ela parecer outro produto. O degradê é só o volume: fita chapada num fundo
     escuro vira uma tarja de papel. */
  background:
    var(--fita-arte) repeat-x left center / auto 40%,
    linear-gradient(180deg, #FFFFFF 0%, #F5F7F9 46%, #E2E8EC 100%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .38);
  transform: rotate(-1.6deg);
  clip-path: inset(0 100% 0 0);
  /* Duas animações, propriedades diferentes, uma não apaga a outra: a primeira
     aplica a fita (clip-path), a segunda leva ela embora junto com a metade de
     cima (transform), no MESMO tempo e na mesma curva daquela metade, para as
     duas subirem como uma peça só. */
  animation:
    cortina-fita-aplica 1100ms cubic-bezier(.35, .1, .25, 1) 120ms both,
    cortina-fita-sobe 460ms cubic-bezier(.7, 0, .28, 1) 1250ms forwards;
}

@keyframes cortina-fita-aplica {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes cortina-fita-sobe {
  from { transform: rotate(-1.6deg); }
  to   { transform: translateY(-101vh) rotate(-1.6deg); }
}

/* O ROLO. Pedido do Alexander na reunião de 06/08, olhando a abertura ("só faltou
   o rolinho correr assim"), e a foto é a que o Darlei escolheu. É o que fecha o
   mecanismo: antes a fita nascia do nada, e agora ela SAI do rolo, que corre na
   frente aplicando.

   Ele acompanha a ponta da fita porque anda com a MESMA duração, o mesmo atraso e
   a mesma curva do clip-path que revela a fita. Mexeu num, mexa no outro, senão o
   rolo descola da ponta e a cena vira duas coisas soltas.

   NÃO GIRA, de propósito: a foto mostra o rolo de frente, com o tubete visível
   embaixo. Girando a imagem inteira, o tubete sairia orbitando em volta do centro,
   que é o contrário do que um rolo faz. */
.cortina__rolo {
  /* O giro do rolo mora numa variável só: os quatro quadros das duas animações
     leem daqui, então ajustar o ângulo é mexer nesta linha e mais nada.
     A fita corre a -1,6deg; o rolo vai 1,3deg mais deitado para a esquerda
     (-2,9deg), ajustado pelo Darlei olhando a cena na tela. O desnível da subida
     continua saindo do ângulo da FITA, não deste: são coisas separadas. */
  --rolo-giro: -2.9deg;
  position: absolute;
  top: 50%;
  left: var(--cortina-inicio);
  width: 202px;
  height: 149px;
  /* O rolo se apoia SOBRE a fita: o centro dele fica um pouco acima do meio dela,
     como rolo de verdade apoiado na superfície que está colando. A conta é
     -(altura/2 + 24) no topo e -(largura/2 + 6) na esquerda. */
  margin: -99px 0 0 -107px;
  background: var(--rolo-arte) no-repeat center / contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
  /* `both` na PRIMEIRA e `forwards` na segunda, e não é detalhe: a primeira só
     começa aos 120ms, e sem o backwards o rolo fica nesses 120ms na posição sem
     transform e DESPENCA o desnível do primeiro quadro quando a animação entra.
     Era o tranco que aparecia na abertura.
     A segunda NÃO pode levar backwards: ela é a última da lista, então seguraria
     o próprio primeiro quadro (translateX do curso inteiro) desde o começo e o rolo
     nasceria do lado direito da tela, parado, esperando. */
  animation:
    cortina-rolo-anda 1100ms cubic-bezier(.35, .1, .25, 1) 120ms both,
    cortina-rolo-sai 460ms cubic-bezier(.7, 0, .28, 1) 1250ms forwards;
}

/* A DIAGONAL. A fita é `rotate(-1.6deg)` em torno do CENTRO dela, então a ponta
   esquerda nasce mais baixa e a direita termina mais alta. O rolo tem que subir
   junto, senão ele começa colado na fita e termina flutuando acima dela.
   --cortina-desnivel é metade do curso vezes a tangente de 1,6°. O termo fixo
   inclui o pedaço que agora nasce fora da tela. Mexeu no ângulo ou no recuo,
   refaça essa variável. */
@keyframes cortina-rolo-anda {
  from { transform: translateX(0) translateY(var(--cortina-desnivel)) rotate(var(--rolo-giro)); }
  to   { transform: translateX(var(--cortina-curso)) translateY(calc(0px - var(--cortina-desnivel))) rotate(var(--rolo-giro)); }
}

@keyframes cortina-rolo-sai {
  from { transform: translateX(var(--cortina-curso)) translateY(calc(0px - var(--cortina-desnivel))) rotate(var(--rolo-giro)); }
  to   { transform: translateX(var(--cortina-curso)) translateY(calc(0px - var(--cortina-desnivel))) translateY(-101vh) rotate(var(--rolo-giro)); }
}

/* No celular o rolo é MAIOR do que a redução proporcional pedia (a pedido do
   Darlei, 14/08): numa tela de 390 ele é o único objeto da cena, e encolhido na
   mesma proporção da tela ficava miúdo demais para se ler como rolo de fita.
   Está em 195x144, ou seja, 97% do desktop numa tela que tem 29% da largura.

   OS QUATRO NÚMEROS ANDAM JUNTOS, e a ordem de leitura é esta:

   1. o TAMANHO (195x144) mantém a proporção do desktop (202x149);
   2. os RECUOS saem dele pela mesma regra do desktop, escalada por 195/202:
      topo = -(altura/2 + 24x0,97) e esquerda = -(largura/2 + 6x0,97);
   3. o RECUO INICIAL cresce junto, senão o rolo maior passa a nascer DENTRO da
      tela: a caixa GIRADA dele mede 202px (195 de largura mais o que os 2,9° de
      giro somam) e, com os -105 que valiam quando ele tinha 146, a borda direita
      cairia dentro da tela com a sombra de 22px pintando na borda. Os -131
      devolvem os mesmos 35px de folga que ele tinha antes de crescer;
   4. o CURSO leva o mesmo aumento (102vw + 131), e é isso que conserva o ponto
      final da fita: -131 + 102vw + 131 = 102vw, o mesmo de sempre.

   O DESNÍVEL vem da fórmula do bloco de cima, não do olho: metade do curso vezes
   a tangente de 1,6° (o ângulo da FITA, não o do rolo), ou seja
   (51vw + 65,5) x 0,02793 = 1,42vw + 1,8px. Mexeu no curso, refaça esta conta. */
@media (max-width: 767px) {
  .cortina {
    --cortina-inicio: -131px;
    --cortina-curso: calc(102vw + 131px);
    --cortina-desnivel: calc(1.42vw + 1.8px);
  }

  .cortina__rolo {
    width: 195px;
    height: 144px;
    margin: -95px 0 0 -103px;
  }
}

@keyframes cortina-cima  { to { transform: translateY(-101%); } }
@keyframes cortina-baixo { to { transform: translateY(101%); } }

/* Saída entre páginas: as mesmas metades voltam e fecham o site, sem fita nem
   rolo. A página seguinte já nasce fechada e executa a abertura normal acima. */
.cortina--saida { pointer-events: auto; }

.cortina--saida .cortina__veu {
  transform: translateY(-101%);
  animation: cortina-fecha-cima 420ms cubic-bezier(.7, 0, .28, 1) both;
}

.cortina--saida .cortina__veu-baixo {
  transform: translateY(101%);
  animation: cortina-fecha-baixo 420ms cubic-bezier(.7, 0, .28, 1) both;
}

.cortina--saida .cortina__fita,
.cortina--saida .cortina__rolo { display: none; }

@keyframes cortina-fecha-cima  { to { transform: translateY(0); } }
@keyframes cortina-fecha-baixo { to { transform: translateY(0); } }

/* Sem JS a página aparece direto, e quem não aceita movimento não vê cortina. */
html:not(.js) .cortina { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
}

/* =========================================================================
   1. CABEÇALHO
   ========================================================================= */

.topo-barra {
  background: var(--azul-esc);
  color: rgba(var(--branco-rgb), .75);
  font-size: 14px;
  line-height: 22px;
}

.topo-barra__dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 11px;
}

.topo-barra__contato {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.topo-barra__contato li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.topo-barra__contato svg {
  width: 16px;
  height: 16px;
  color: var(--laranja);
}

.topo-barra__contato a { color: inherit; }
.topo-barra__contato a:hover { color: var(--laranja); }

.topo-barra__redes {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topo-barra__redes a {
  display: block;
  color: rgba(var(--branco-rgb), .75);
}

.topo-barra__redes svg { width: 16px; height: 16px; }
.topo-barra__redes a:hover { color: var(--laranja); }

.cabeca {
  /* 35 em 90 é o ângulo da diagonal do logo. Chapa do menu, encaixe do botão e
     filete dele leem daqui: valor solto em cada um sai do compasso. */
  --inclina: 35px;
  /* A ALTURA DA BARRA. Quatro regras liam o 90 solto (o min-height da faixa, a
     altura do link do logo e o border-bottom das duas cunhas): baixar a barra
     no celular era mexer em quatro lugares e esquecer um deixava a chapa azul
     mais alta que a faixa, com um degrau azul embaixo do cabeçalho. Um número,
     quatro leitores, e o celular troca só ele. */
  --altura: 90px;
  position: relative;
  background: var(--branco);
  /* clip e não hidden: hidden nos dois eixos cortaria o megamenu, que desce pra
     fora da caixa do cabeçalho. O clip-x segura só a sangria lateral do laranja
     (a do logo, à esquerda, não gera rolagem; a da direita geraria). */
  overflow-x: clip;
  z-index: 20;
}

/* gap ZERO: menu e botão são chapas encaixadas, e gap aqui vira cunha branca no
   meio da faixa. O respiro do logo vem do margin-right dele. */
.cabeca__dentro {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--altura);
}

/* A chapa atrás do logo sangra até sair da tela pela esquerda e termina numa
   diagonal. Sangria negativa à esquerda não gera rolagem, só à direita.
   A chapa é AZUL ESCURO, não laranja: a marca tem a seta e a assinatura em
   laranja, e laranja sobre laranja sumia (era o defeito apontado). Sobre o azul,
   o branco do logotipo dá 13:1 e o laranja da marca 4,3:1. O filete laranja da
   diagonal mantém a cor da casa na peça sem servir de fundo pro logo. */
.cabeca__marca {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--altura);
  padding-right: 56px;
  margin-right: 20px;
  z-index: 1;
}

/* Um pseudo-elemento só faz as duas coisas: o border-bottom sólido pinta a chapa
   inteira e o border-right transparente corta a ponta direita na diagonal. */
.cabeca__marca::before {
  content: "";
  position: absolute;
  top: 0;
  right: 6px;
  left: -9999px;
  border-bottom: var(--altura) solid var(--azul-esc);
  border-right: 35px solid transparent;
  z-index: -1;
}

/* O filete laranja é a mesma cunha, deslocada: só a fatia dele aparece. */
.cabeca__marca::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 41px;
  border-bottom: var(--altura) solid var(--laranja);
  border-right: 35px solid transparent;
  z-index: -2;
}

/* LOGOTIPO ESPREMIDO. Era `width: auto; height: 58px`, e o reset da base põe
   `max-width: 100%` em toda imagem. Com a ALTURA cravada, o max-width corta a
   largura e a altura fica: o desenho não encolhe, ACHATA. Medido 128px de
   largura onde a proporção pede 255, ou seja, metade — a marca saía deformada
   em todo celular abaixo de 400px e em todo tablet de 1024 a 1199, calada.
   Com as duas dimensões em `auto`, o max-height dá o tamanho e o max-width só
   encolhe, sempre em proporção: nunca mais achata, e nunca mais transborda. */
.cabeca__marca img {
  width: auto;
  height: auto;
  max-height: 58px;
  max-width: 100%;
}

/* stretch na corrente toda: sem ele o link fica 83px num cabeçalho de 90 e sobra
   filete claro em cima e embaixo de cada chapa. margin-left auto (não right) põe
   o vão entre logo e menu, e não entre menu e botão. */
.menu {
  align-self: stretch;
  margin-left: auto;
}

.menu__lista,
.menu__lista > li { height: 100%; }

/* gap ZERO: as chapas inclinadas encostam uma na outra e a barra vira uma faixa
   contínua de losangos, que é o desenho pedido. O respiro entre um rótulo e o
   seguinte vem todo do padding lateral do link, não do gap. */
.menu__lista {
  display: flex;
  align-items: center;
  gap: 0;
}

.menu__lista > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
  /* 30px é o mínimo confortável: no meio da altura a diagonal avança 17,5px
     (metade dos 35), então sobra pouco mais de 12px até a letra. Passando muito
     disso, o vão entre um rótulo e o seguinte fica maior que o próprio rótulo. */
  padding: 0 30px;
  /* Rótulo em duas linhas deforma o paralelogramo: ou cabe numa linha, ou o
     breakpoint de 991 troca a barra pelo hambúrguer. */
  white-space: nowrap;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 17px;
  font-weight: 600;
  transition: color var(--t-micro) ease;
  /* z-index 0 (e não auto) abre contexto de empilhamento PRÓPRIO no link. Sem
     ele, o ::before com z-index -1 desce até o contexto do .cabeca e some atrás
     do fundo branco dele. */
  z-index: 0;
}

/* Chapa inclinada no ângulo do logo, espelhado. Em px, não em %: em % item curto
   e item comprido sairiam com ângulos diferentes. */
.menu__lista > li > a::before {
  content: "";
  position: absolute;
  /* MEIA inclinação por lado: topo [L-17,5 .. R-17,5], base [L+17,5 .. R+17,5].
     A diagonal onde uma chapa acaba é onde a vizinha começa, então ladrilham sem
     vão e sem sobrepor. Transbordando os 35 inteiros elas disputam a mesma faixa. */
  inset: 0 calc(var(--inclina) / -2);
  background: var(--claro);
  clip-path: polygon(0 0, calc(100% - var(--inclina)) 0, 100% 100%, var(--inclina) 100%);
  opacity: 0;
  /* Pseudo-elemento conta no teste de clique: sem isto a ponta da chapa rouba o
     hover do item ao lado. */
  pointer-events: none;
  transition:
    opacity var(--t-micro) ease,
    background var(--t-micro) ease;
  z-index: -1;
}

.menu__lista > li > a:hover::before,
.menu__lista > li > a:focus-visible::before,
.menu__tem-sub:hover > a::before { opacity: 1; }

.menu__lista > li > a:hover,
.menu__tem-sub:hover > a { color: var(--laranja-esc); }

/* Página em que se está: chapa laranja cheia, sem depender de hover. O
   aria-current é a fonte da verdade, então o realce e o que o leitor de tela
   anuncia nunca divergem. */
.menu__lista > li > a[aria-current="page"] {
  color: var(--branco);
}

.menu__lista > li > a[aria-current="page"]::before {
  background: var(--laranja);
  opacity: 1;
}

.menu__lista svg { width: 12px; height: 12px; }

/* --- Busca no fim da barra ---
   Fechada é só a lupa. No hover, e também no foco pelo teclado, a caixa cresce
   PARA A ESQUERDA e passa por cima dos itens vizinhos.
   Três coisas seguram esse desenho:
   1. o form é absolute ancorado no `right`, então o que cresce anda pra esquerda;
   2. o li tem z-index PRÓPRIO, senão a caixa aberta passaria por baixo de "Contato";
   3. o li reserva a largura do botão (o form saiu do fluxo), senão a lupa cairia
      em cima do item ao lado.
   Quem abre é o CSS, nunca o JS: a CSP é script-src 'self', e :focus-within faz o
   campo funcionar por teclado sem uma linha de script. */
/* A largura do li reserva o botão de 64px e a folga das duas diagonais vizinhas.
   O form sai do fluxo para poder crescer por cima do menu sem empurrar nada. */
.menu__busca {
  position: relative;
  z-index: 3;
  width: 92px;
  height: 100%;
}

/* O form é só o botão: a bolha sai do fluxo dele. Quem cresce é ela. */
.lupa {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--inclina) / 2);
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 0;
  background: transparent;
}

/* A BOLHA é a única medida que anda no site inteiro dessa busca, e o campo mora
   dentro dela: é o recorte dela que revela e esconde o texto.
   Foi assim que os defeitos morreram na raiz. Antes, chapa, filete e campo
   animavam larguras DIFERENTES (474, 433 e 340) a partir da mesma borda direita:
   no fim as contas fechavam e o estado aberto parecia certo, mas no MEIO do
   caminho as três bordas esquerdas ficavam em lugares diferentes. Dava filete
   correndo 41px à frente (listra laranja solta no menu) e texto do campo até
   134px FORA do branco, escrito por cima de "A Empresa" e "Contato".
   Com uma medida só não há o que sincronizar: filete é ::before dela, campo é
   filho dela, e os dois andam porque ela anda.
   O `right` negativo é o que faz a bolha nascer e morrer ENTERRADA no CTA: ela
   não encolhe até a beira do ícone (ficava uma borda laranja colada na lupa,
   sumindo de estalo), encolhe até debaixo do laranja, e some lá dentro. */
/* Elemento só de sombra. Ela não pode morar na bolha: `clip-path` recorta o
   RESULTADO do filtro, então drop-shadow (e box-shadow) nasce e é apagado no
   mesmo passo. No pai funciona, porque aí o filtro cai sobre o que o filho já
   pintou, recortado e tudo.
   O `clip-path` daqui é o corte DESSE resultado: `inset(0 -100vw)` deixa a
   sombra escapar pelos lados e corta rente em cima e embaixo, senão ela vaza
   pra fora do cabeçalho e vira uma faixa cinza embaixo dele.
   O z-index saiu da bolha e veio pra cá: `filter` cria contexto de
   empilhamento, então lá dentro o z-index dela não alcançaria mais o botão.
   Sem sombra na barra colada de propósito: sombra escura em fundo escuro não
   dá contraste nenhum, só suja a junta. */
.lupa__sombra {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(-9px 0 10px rgba(var(--azul-rgb), .22));
  clip-path: inset(0 -100vw);
}

.cabeca.colada .lupa__sombra { filter: none; }

.lupa__bolha {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--inclina) * -2);
  width: 0;
  /* Não pega ponteiro: o clique tem que atravessar e chegar no botão de buscar,
     que está embaixo. Quem devolve o ponteiro é o campo. Toda a área visível da
     bolha é campo ou botão, então não sobra pedaço "morto" que faria o hover
     cair fora e a bolha fechar sozinha. */
  pointer-events: none;
  background: var(--branco);
  /* Recorta o elemento E TUDO que está dentro dele, inclusive o texto do campo:
     é isso que dispensa acertar tempo de opacidade pra o texto não escapar.
     NÃO ponha sombra: o clip-path recorta o resultado do filtro, então
     drop-shadow (e box-shadow) nasce e é apagado no mesmo passo. Quem separa a
     bolha do cabeçalho branco é o filete laranja. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--inclina) 100%);
  transition: width var(--t-entrada) cubic-bezier(.16, 1, .3, 1);
}

/* Filete: a borda esquerda da própria bolha. Sem opacidade e sem transição: ele
   aparece e some porque a bolha aparece e some, recortado junto com ela. */
.lupa__bolha::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--inclina) + 6px);
  background: var(--laranja);
  clip-path: polygon(0 0, 6px 0, 100% 100%, var(--inclina) 100%);
  pointer-events: none;
}

/* O campo NÃO anda: fica parado no lugar em que a bolha aberta o mostra, e a
   bolha o descobre. `right` = os 2×inclina enterrados no CTA + o botão.
   Nada de display:none nem visibility:hidden: ele continua alcançável pelo Tab,
   e é o foco dele que dispara a abertura. Fechado ele existe mas está fora do
   recorte, então não pinta nem pega clique do menu que está atrás. */
.lupa__campo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--inclina) * 2 + 64px);
  width: 340px;
  padding: 0 8px 0 56px;
  border: 0;
  background: transparent;
  color: var(--azul);
  /* A MESMA fonte dos itens do menu (display, 17px, 600), a pedido do Darlei: a
     bolha abre em cima da barra e passa a ser mais um rótulo dela.
     Estava em `--fonte-texto`, que NÃO EXISTE: variável indefinida invalida a
     declaração, e aí font-family (que é herdada) caía na do corpo. Rendia
     Public Sans por acidente, não por escolha. */
  font-family: var(--fonte-display);
  font-size: 17px;
  font-weight: 600;
  pointer-events: auto;
}

/* O eco: mesma lupa, mesmo tamanho, EXATAMENTE em cima da do botão (o botão são
   os 64px colados na borda direita do form, e a bolha passa 2×inclina disso).
   Errar essa conta faz o ícone dar um pulinho quando a diagonal passa por ele. */
.lupa__eco {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--inclina) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  color: var(--azul);
}

.lupa__eco svg { width: 20px; height: 20px; }

/* O eco é o que está à mostra com a busca aberta, então é ele que responde ao
   hover do botão. Sem isto o realce some justamente quando o mouse está lá. */
.lupa:has(.lupa__btn:hover) .lupa__eco { color: var(--laranja-esc); }

.lupa__campo::placeholder { color: rgba(var(--azul-rgb), .45); }
.lupa__campo:focus { outline: 0; }

/* O X de limpar do WebKit aparece dentro da bolha e briga com a lupa. */
.lupa__campo::-webkit-search-cancel-button { -webkit-appearance: none; }

.lupa__btn {
  position: relative;
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--azul);
  cursor: pointer;
  transition: color var(--t-micro) ease;
  z-index: 1;
}

/* Depois do .menu__lista svg de propósito: aquele vale 12px pro chevron do
   megamenu, e a lupa precisa dos 20. Mesma especificidade, ganha quem vem depois. */
.lupa__btn svg { width: 20px; height: 20px; }
.lupa__btn:hover { color: var(--laranja-esc); }

/* Aberta: UMA declaração, uma medida. O campo (340) + o botão (64) + o que fica
   enterrado no CTA (2×inclina). É a única conta desta busca. */
.menu__busca:hover .lupa__bolha,
.lupa:focus-within .lupa__bolha {
  width: calc(340px + 64px + var(--inclina) * 2);
}

/* --- Megamenu de Produtos ---
   O item do menu fica STATIC de propósito: o painel se ancora no .cabeca (que é
   relative) e por isso ocupa a largura toda, e não a da palavra "Produtos". */
.menu__tem-sub { position: static; }

/* A .mega é só a JANELA: fica colada embaixo do cabeçalho, corta o que passa da
   borda de cima e não pinta nada. É por ela que o painel some por trás do
   cabeçalho quando está fechado. O padding embaixo é a folga da sombra, que o
   overflow cortaria; ele não pega clique por causa do pointer-events. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-bottom: 30px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  /* O atraso na visibilidade só existe no FECHAR: sem ele a janela some no
     primeiro quadro e ninguém vê o painel subindo de volta. */
  transition: visibility 0s linear var(--t-ui);
  z-index: 5;
}

/* Quem desliza é o painel, de cima para baixo, sem fade nenhum. */
.mega__painel {
  pointer-events: auto;
  background: var(--branco);
  /* O painel desce por trás do cabeçalho: o filete de cima é a primeira coisa
     que aparece, como se a barra tivesse aberto. */
  border-top: 3px solid var(--laranja);
  border-bottom: 3px solid var(--laranja);
  box-shadow: var(--sombra-g);
  transform: translateY(-100%);
  transition: transform var(--t-ui) var(--curva-entrada);
}

.menu__tem-sub:hover > .mega,
.menu__tem-sub:focus-within > .mega {
  visibility: visible;
  transition-delay: 0s;
}

.menu__tem-sub:hover > .mega > .mega__painel,
.menu__tem-sub:focus-within > .mega > .mega__painel { transform: none; }

/* Véu do megamenu aberto. z-index 15 fica abaixo do cabeçalho (20), então só a
   página escurece. No celular o .menu é display:none e nada recebe :hover, então
   a regra não dispara sem precisar de media query. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(var(--azul-esc-rgb), .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-ui) ease;
  z-index: 15;
}

body:has(.menu__tem-sub:hover, .menu__tem-sub:focus-within)::after { opacity: 1; }

/* Foto do produto em destaque, sangrando pro topo do card. */
.mega__foto {
  margin: -30px -28px 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--branco);
}

/* Foto de produto não se corta em lugar nenhum, nem no destaque do megamenu. */
.mega__foto img {
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
}

.mega__dentro {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 45px;
  padding-block: 38px 32px;
}

.mega__titulo {
  margin: 0 0 18px;
  color: var(--laranja-esc);
  font-family: var(--fonte-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mega__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 30px;
}

.mega__grade a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 14px;
  border-radius: var(--raio);
  transition: background var(--t-micro) ease;
}

.mega__grade a:hover { background: var(--claro); }

.mega__ico {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio);
  background: rgba(var(--laranja-rgb), .1);
  color: var(--laranja-esc);
  transition: background var(--t-micro) ease, color var(--t-micro) ease;
}

.mega__ico svg { width: 22px; height: 22px; }

.mega__grade a:hover .mega__ico {
  background: var(--laranja);
  color: var(--branco);
}

.mega__txt { display: block; min-width: 0; }

.mega__txt strong {
  display: block;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 16px;
  font-weight: 600;
}

/* Duas linhas e corta: resumo de categoria varia muito de tamanho e sem o teto
   uma linha comprida empurra a altura do menu inteiro. */
.mega__txt em {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 13px;
  line-height: 19px;
  font-style: normal;
  color: var(--cinza);
}

.mega__pe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}

/* overflow: hidden não é enfeite: a foto sangra pra fora do padding do card
   (margens negativas), e sem o corte ela vazava por cima da coluna vizinha e
   até pra fora do container. */
.mega__destaque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 30px 28px;
  border-radius: var(--raio-g);
  overflow: hidden;
  color: rgba(var(--branco-rgb), .8);
}

.mega__destaque h3 {
  color: var(--branco);
  font-size: 22px;
  line-height: 30px;
}

.mega__destaque p { margin: 0; font-size: 14px; line-height: 22px; }
.mega__destaque .btn { margin-top: auto; }

/* O botão é a última chapa da faixa. A margem negativa de meia inclinação é a
   mesma conta das chapas do menu: sem ela sobra uma cunha branca entre o último
   item e o botão. */
.cabeca__acoes {
  position: relative;
  z-index: 4;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-left: calc(var(--inclina) / -2);
}

/* NÃO existe mais cunha branca aqui, e não recrie: o triângulo à esquerda do
   CTA (o que o clip-path do botão deixa sem laranja) é preenchido pela PRÓPRIA
   bolha da busca, que enterra 2×inclina por baixo do laranja e está num
   z-index abaixo do dele.
   A cunha era um segundo branco, aceso em 0s e apagado em 0s no fim da
   transição, ou seja, ela ficava na tela o tempo TODO da abertura e do
   fechamento, parada, e sumia de estalo. No cabeçalho branco isso não se via;
   na barra colada era um TRIÂNGULO BRANCO piscando ao lado do laranja, que foi
   o que o Darlei viu na tela. Com a bolha fazendo o serviço, o branco só existe
   onde a bolha está, e ela some deslizando por baixo do laranja. */

/* O laranja sangra do botão até a borda da TELA, como a chapa azul do logo faz
   do outro lado. Sem isto sobrava uma tira branca do container até a borda, e a
   faixa ficava torta: sangrada à esquerda e cortada à direita. */
.cabeca__acoes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* -1px de sobreposição: em largura fracionária sobrava um fio branco entre o
     botão e a sangria. */
  left: calc(100% - 1px);
  width: 100vw;
  background: var(--laranja);
  pointer-events: none;
}

/* O botão de orçamento é a última chapa da faixa: mesma altura e MESMA
   inclinação dos itens do menu, então precisa perder o raio de canto do .btn.
   O padding é maior que a inclinação (35px) pra o texto não encostar na
   diagonal, e o clip-path corta também o preenchimento do hover, que é um
   ::before dentro do próprio botão. */
.cabeca__btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 46px 0 52px;
  border-radius: 0;
  line-height: normal;
  /* Só o lado ESQUERDO é inclinado: cortando também o direito, sobrava um
     triângulo branco entre o botão e a borda do container. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--inclina) 100%);
}

/* Filete azul na diagonal, 6px, a mesma espessura do laranja do logo. ::after e
   não ::before porque o ::before do .btn já é o preenchimento do hover. */
.cabeca__btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--inclina) + 6px);
  background: var(--azul-esc);
  clip-path: polygon(0 0, 6px 0, 100% 100%, var(--inclina) 100%);
  pointer-events: none;
}

.cabeca__menu {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
}

.cabeca__menu svg { width: 26px; height: 26px; }

/* .colada entra pelo JS depois que a barra do topo sai da tela.
   A barra colada é AZUL ESCURA, não laranja. Laranja trazia dois defeitos de
   contraste de uma vez: o logotipo (que tem seta e assinatura laranja) sumia
   dentro dela, e o menu ficava branco sobre laranja, 3,12:1, abaixo do mínimo
   para texto de 17px. Sobre o azul escuro o menu dá 13:1 e o logotipo idem.
   O filete laranja embaixo é o que mantém a cor da marca na barra. */
.cabeca.colada {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--azul-esc);
  /* O filete laranja é sombra INTERNA, não border-bottom: borda muda a altura do
     elemento, e a altura é justamente o que o JS devolve ao corpo pra página não
     dar um salto quando o cabeçalho sai do fluxo. 3px de erro é salto visível. */
  box-shadow: inset 0 -3px 0 var(--laranja), 0 6px 25px rgba(var(--azul-esc-rgb), .28);
  animation: cabeca-cola var(--t-ui) ease;
}

@keyframes cabeca-cola {
  from { transform: translateY(-100%); }
}

.cabeca.colada .menu__lista > li > a,
.cabeca.colada .cabeca__menu { color: var(--branco); }

/* Na barra escura a chapa clara do menu apagaria o texto branco por cima dela.
   Aqui ela vira um véu claro de baixa opacidade, e a cor do texto não muda. */
.cabeca.colada .menu__lista > li > a::before { background: rgba(var(--branco-rgb), .14); }
.cabeca.colada .menu__lista > li > a:hover,
.cabeca.colada .menu__tem-sub:hover > a { color: var(--laranja); }
.cabeca.colada .menu__lista > li > a[aria-current="page"] { color: var(--branco); }
.cabeca.colada .menu__lista > li > a[aria-current="page"]::before { background: var(--laranja); }

/* Na barra colada a lupa é BRANCA, e essa cor não muda em momento nenhum: não
   existe estado de "busca aberta" para ela. Quando o branco da bolha chega, ela
   fica ESCONDIDA embaixo dele e quem aparece é o eco (o `.lupa__eco`, azul,
   dentro da bolha). Foi assim que a troca de cor no meio da animação deixou de
   existir: já custou duas rodadas, uma com o ícone azul sobre azul por meio
   segundo no fim do fechamento, outra com ele branco sobre a bolha ainda
   branca no meio dele. Acertar o INSTANTE não se sustenta (a curva é ease-out:
   coberta aos ~30ms abrindo, descoberta aos ~145ms fechando); quem acerta é o
   recorte da bolha, que é exato por construção. */
.cabeca.colada .lupa__btn { color: var(--branco); }

/* A chapa do logo some ao colar: ela já é azul escura, igual à barra, e o
   recorte diagonal no meio de uma barra dessa cor lê como sujeira.
   ATENÇÃO: some pelas DUAS bordas. Zerar só o border-bottom deixa o
   border-right transparente de 35px medindo largura e o logo anda pro lado. */
.cabeca.colada .cabeca__marca::before,
.cabeca.colada .cabeca__marca::after { display: none; }

.cabeca.colada .cabeca__btn { --btn-fundo: var(--laranja); --btn-preenche: var(--azul); }

/* O filete azul do botão some na barra colada: ela já é azul escura, então ele
   não separa nada e ainda corta o filete laranja de baixo, que é o defeito. */
.cabeca.colada .cabeca__btn::after { display: none; }

/* --- Gaveta do celular --- */

.menu-cel {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.menu-cel[hidden] { display: none; }

.menu-cel__fundo {
  position: absolute;
  inset: 0;
  background: rgba(var(--azul-esc-rgb), .72);
  animation: menu-cel-fundo var(--t-ui) ease;
}

@keyframes menu-cel-fundo { from { opacity: 0; } }

.menu-cel__painel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: min(340px, 86vw);
  padding: 25px;
  background: var(--branco);
  overflow-y: auto;
  animation: menu-cel-gaveta var(--t-ui) ease;
}

@keyframes menu-cel-gaveta { from { transform: translateX(100%); } }

.menu-cel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linha);
}

.menu-cel__topo img {
  width: auto;
  height: 38px;
}

.menu-cel__topo button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
}

.menu-cel__topo svg { width: 22px; height: 22px; }

/* Busca da gaveta: campo aberto, sem hover nenhum. Hover em tela de toque não
   existe, e a lupa do cabeçalho nem aparece nesta largura. */
.busca-cel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--claro);
}

.busca-cel input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--azul);
  /* `--fonte-texto` não existe: era declaração inválida caindo na herança do
     corpo, ou seja, a fonte certa por acidente. Aqui é a do corpo mesmo. */
  font-family: var(--fonte);
  font-size: 15px;
}

.busca-cel input:focus { outline: 0; }
.busca-cel input::-webkit-search-cancel-button { -webkit-appearance: none; }

.busca-cel button {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--laranja);
  color: var(--branco);
}

.busca-cel svg { width: 18px; height: 18px; }

.menu-cel__lista a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--linha);
}

.menu-cel__lista a:hover { color: var(--laranja); }

.menu-cel__filho a {
  padding-left: 14px;
  font-size: 15px;
  font-weight: 500;
}

.menu-cel__filho a > span {
  display: flex;
  color: var(--laranja);
}

.menu-cel__lista svg { width: 18px; height: 18px; }

.menu-cel__pe {
  margin-top: auto;
  padding-top: 15px;
  font-size: 15px;
}

.menu-cel__pe p { margin: 10px 0 0; }
.menu-cel__pe a:not(.btn) { color: var(--cinza); }
.menu-cel__pe a:not(.btn):hover { color: var(--laranja); }

/* =========================================================================
   2. HERO
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__palco {
  position: relative;
  height: 700px;
}

/* Só o quadro com .esta existe: os outros somem da tela e do teclado. */
.hero__quadro {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t-conteudo) ease,
    visibility var(--t-conteudo) ease;
}

.hero__quadro.esta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero__arte {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.hero__arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Vídeo de fundo (YouTube), quando o banner tiver um cadastrado ---
   Fica DENTRO do .hero__arte pra ficar debaixo do véu: o ::after do .hero__arte
   pinta depois dos filhos, então o degradê continua por cima do vídeo. */
.hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Nada de clique: o iframe do YouTube abriria menu de contexto e link pro
     canal em cima do título do hero. */
  pointer-events: none;
}

/* Cobre a caixa como object-fit: cover faria numa imagem. As duas medidas
   existem porque o vídeo é 16:9 fixo e a caixa não: manda a maior das duas. */
.hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%);
}

/* Arquivo local: aqui o object-fit resolve, não precisa da conta do iframe. */
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No celular a arte manda: o enquadramento horizontal do vídeo sobra cortado e
   o embed é peso de dados no plano de quem está na rua. */
@media (max-width: 760px) {
  .hero__video { display: none; }
}

/* Quem pediu menos animação não recebe vídeo rodando em laço. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* O texto fica à esquerda, então o véu fecha a esquerda e solta a direita. */
.hero__arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(var(--azul-esc-rgb), .96) 0%,
    rgba(var(--azul-esc-rgb), .92) 32%,
    rgba(var(--azul-esc-rgb), .45) 58%,
    rgba(var(--azul-esc-rgb), 0) 100%
  );
}

.hero__dentro {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 1;
}

.hero__texto {
  max-width: 700px;
  color: rgba(var(--branco-rgb), .85);
}

/* Caixa alta no hero é a peça que o cliente aprovou, e é a única exceção à regra
   da casa (uppercase só em olho, menu e botão). Título de SEÇÃO segue sem caixa
   alta em todo o site. */
.hero__texto h1 {
  margin-bottom: 20px;
  color: var(--branco);
  font-size: 52px;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* destaque() envolve o trecho marcado em <strong>: vira o laranja do título. */
.hero__texto h1 strong {
  color: var(--laranja);
  font-weight: inherit;
}

.hero__sub {
  max-width: 500px;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 28px;
}

/* Os quatro atributos da peça: ícone laranja e duas linhas de texto curto. */
.hero__atributos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-bottom: 32px;
}

.hero__atributos li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hero__atributos span {
  display: flex;
  color: var(--laranja);
}

.hero__atributos svg { width: 26px; height: 26px; }

.hero__atributos strong {
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* --- Selo redondo de tempo de casa ---
   Fica no hero e não no quadro: assim não pisca a cada troca do carrossel. */
/* Disco sólido, e não véu translúcido: sobre a foto do hero o texto perdia
   contraste conforme o quadro do carrossel trocava. Sólido, lê sempre igual. */
.hero__selo {
  position: absolute;
  top: 56px;
  right: max(var(--gutter), (100% - var(--largura)) / 2 + var(--gutter));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 1,5x do desenho original (146px), a pedido do Darlei em 06/08. Tudo que é
     medida do selo foi junto: aro, filete, tipos e respiros. Aumentar só o disco
     deixaria o texto boiando no meio dele. */
  width: 219px;
  height: 219px;
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(var(--azul-rgb), 1) 0%, var(--azul-esc) 60%);
  color: var(--branco);
  box-shadow: 0 12px 34px rgba(var(--azul-esc-rgb), .38);
  text-align: center;
  z-index: 4;
}

/* Aro tracejado girando devagar. É o único movimento do selo, e é lento de
   propósito: no hero já tem carrossel e Ken Burns acontecendo atrás. */
.hero__selo::before {
  content: "";
  position: absolute;
  inset: -16px;
  border: 3px dashed rgba(var(--laranja-rgb), .6);
  border-radius: 50%;
  animation: gira 26s linear infinite;
}

/* Filete interno: separa o disco do aro e dá acabamento de selo, não de bolha. */
.hero__selo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(var(--branco-rgb), .16);
  border-radius: 50%;
}

.hero__selo strong {
  display: block;
  color: var(--laranja);
  font-family: var(--fonte-display);
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* O margin-right negativo cancela o espaço que o letter-spacing deixa DEPOIS da
   última letra. Sem ele a palavra fica um tico à esquerda do centro do disco, e
   com três linhas empilhadas o desalinho aparece. */
.hero__selo span {
  display: block;
  margin: 6px -.16em 0 0;
  font-family: var(--fonte-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* O filete fecha o bloco de texto. É pseudo-elemento de largura fixa, e não
   border-top: a borda acompanhava a largura da palavra, e como "DE MERCADO" é
   bem mais larga que "ANOS", saía um risco atravessando quase o disco inteiro. */
.hero__selo em {
  position: relative;
  display: block;
  margin: 16px -.1em 0 0;
  padding-top: 15px;
  color: rgba(var(--branco-rgb), .7);
  font-size: 15px;
  line-height: 1;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero__selo em::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 57px;
  height: 1px;
  background: rgba(var(--branco-rgb), .26);
  transform: translateX(-50%);
}

/* Entrada escalonada: o estado escondido só vale enquanto o quadro não é o ativo. */
.hero__texto > * {
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity var(--t-conteudo) ease,
    transform var(--t-conteudo) ease;
}

.hero__quadro.esta .hero__texto > * {
  opacity: 1;
  transform: none;
}

.hero__quadro.esta .hero__texto > :nth-child(1) { transition-delay: 200ms; }
.hero__quadro.esta .hero__texto > :nth-child(2) { transition-delay: 350ms; }
.hero__quadro.esta .hero__texto > :nth-child(3) { transition-delay: 500ms; }
.hero__quadro.esta .hero__texto > :nth-child(4) { transition-delay: 650ms; }

.hero__setas {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.hero__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(var(--branco-rgb), .35);
  border-radius: 50%;
  background: transparent;
  color: var(--branco);
  pointer-events: auto;
  transition:
    background var(--t-ui) ease,
    border-color var(--t-ui) ease;
}

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

.hero__seta:hover {
  background: var(--laranja);
  border-color: var(--laranja);
}

.hero__pontos {
  position: absolute;
  left: 50%;
  bottom: 38px;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
  z-index: 3;
}

.hero__pontos button {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--branco-rgb), .5);
  transition: background var(--t-ui) ease;
}

.hero__pontos [aria-selected="true"] { background: var(--laranja); }

.hero__pontos [aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--laranja);
  border-radius: 50%;
}

/* =========================================================================
   4. SOBRE
   ========================================================================= */

/* A foto 2 e o selo sangram 22px pra fora da coluna: sem isto, na largura exata
   do container eles empurram a página e abrem rolagem horizontal. */
.sobre { overflow: hidden; }

.sobre__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

/* O padding-left abre a sangria da foto 2 e o padding-bottom segura a altura
   dela: sem os dois a foto sobreposta escapa do bloco. */
.sobre__fotos {
  position: relative;
  padding-left: 90px;
  margin-right: 22px;
}

/* Filete laranja colado na borda direita do bloco de fotos. */
.sobre__fotos::before {
  content: "";
  position: absolute;
  top: 125px;
  right: -22px;
  bottom: 0;
  width: 7px;
  background: var(--laranja);
}

.sobre__foto1 { margin: 0; }
.sobre__foto1 img { width: 100%; }

.sobre__foto2 {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 300px;
  max-width: 55%;
  margin: 0;
  border: 5px solid var(--branco);
  z-index: 2;
}

.sobre__foto2 img { width: 100%; }

.sobre__selo {
  position: absolute;
  top: 15px;
  right: -22px;
  padding: 14px 22px;
  background: var(--laranja);
  color: var(--branco);
  text-align: center;
  z-index: 3;
}

/* A orelha da base nasce laranja, e laranja sobre laranja não aparece: no selo
   ela escurece pra ler como dobra. */
.sobre__selo::after { border-bottom-color: var(--laranja-esc); }

.sobre__selo strong,
.sobre__selo > span {
  font-family: var(--fonte-display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}

.sobre__selo em {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  font-weight: 600;
}

.sobre__texto h2 { margin-bottom: 22px; }
.sobre__texto h2 strong { color: var(--laranja); font-weight: inherit; }

.sobre__pilares {
  display: grid;
  gap: 25px;
  margin: 30px 0;
}

.sobre__pilares li {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.sobre__pilares h4 { margin-bottom: 6px; }
.sobre__pilares p { margin: 0; font-size: 15px; }

.sobre__pilar-ico {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--laranja);
  box-shadow: var(--sombra);
}

.sobre__pilar-ico svg { width: 36px; height: 36px; }

.sobre__lista {
  display: grid;
  gap: 11px;
  margin-bottom: 32px;
}

.sobre__lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--azul);
  font-weight: 500;
}

.sobre__lista svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--laranja);
}

/* =========================================================================
   4b. ESTRUTURA (as linhas de fabricação, seção escura)
   ========================================================================= */

.estrutura__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.maq {
  position: relative;
  color: rgba(var(--branco-rgb), .75);
}

.maq figure {
  margin: 0 0 30px;
  border-radius: var(--raio-g);
  overflow: hidden;
}

.maq figure img {
  width: 100%;
  transition: transform var(--t-ui) ease;
}

.maq:hover figure img { transform: scale(1.06); }

/* O ícone senta na quina da foto, metade dentro e metade fora. */
.maq__ico {
  position: absolute;
  top: 0;
  left: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: var(--raio);
  background: var(--laranja);
  color: var(--branco);
  transform: translateY(-50%);
  z-index: 2;
}

.maq__ico::after { border-bottom-color: var(--laranja-esc); }
.maq__ico svg { width: 34px; height: 34px; }

.maq h3 {
  margin-bottom: 12px;
  color: var(--branco);
}

.maq p { margin: 0; }

.estrutura__nota {
  max-width: 800px;
  margin: 55px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--laranja);
  color: rgba(var(--branco-rgb), .6);
  font-size: 15px;
  line-height: 25px;
}

/* =========================================================================
   5. LINHAS (abas de categoria)
   ========================================================================= */

/* O nome girado do card transborda a faixa quando é comprido. */
.linhas { overflow: hidden; }

.linhas__topo {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: end;
  padding-bottom: 47px;
}

.linhas__topo h2 strong { color: var(--laranja); font-weight: inherit; }
.linhas__apoio { margin: 0; }

/* Todos os chips à vista, SEM rolagem lateral. Já foi flex com overflow-x: auto,
   e a barrinha de rolagem no meio da página lia como defeito.
   O auto-fit resolve sem número mágico preso à quantidade de categorias: com 7
   em 1350px cabem os 7 numa fileira; mudando a tela ou o número de categorias,
   o grid decide sozinho quantas colunas dá e quebra em linha nova, em vez de
   esconder chip fora da tela. */
.abas__botoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

/* BOTÃO NÃO ESTICA SOZINHO, nem com display: block: sem width os chips saem da
   largura do próprio texto. O height iguala a fileira (nome comprido ocupa duas
   linhas). white-space normal: com nowrap volta a rolagem lateral. */
.abas__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 26px 14px 22px;
  white-space: normal;
  border: 0;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: color var(--t-ui) ease;
  z-index: 1;
}

/* O chip preenche de laranja de cima para baixo. */
.abas__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--laranja);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-ui) ease;
  z-index: -1;
}

.abas__btn:hover::before,
.abas__btn.esta::before { transform: scaleY(1); }

.abas__btn:hover,
.abas__btn.esta { color: var(--branco); }

.abas__ico {
  display: block;
  margin-bottom: 10px;
  color: var(--laranja);
  transition: color var(--t-ui) ease;
}

.abas__ico svg {
  width: 42px;
  height: 42px;
  margin-inline: auto;
}

.abas__btn:hover .abas__ico,
.abas__btn.esta .abas__ico { color: var(--branco); }

.linhas__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* Foto em cima, nome deitado embaixo. O nome girado a -90° na faixa lateral saiu:
   nome comprido quebrava em três linhas empilhadas e elas se encavalavam, e a
   faixa obrigava o card a ter altura fixa. */
.linha-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}

.linha-card:hover {
  border-color: var(--laranja);
  box-shadow: var(--sombra);
}

.linha-card__foto {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--branco);
}

/* Zoom reverso: nasce ampliada e recolhe no hover. Mesma regra do .prod__foto:
   contain para não cortar a peça, e padding para o 1.05 inicial caber. */
.linha-card__foto img {
  width: 100%;
  height: 100%;
  padding: 18px;
  object-fit: contain;
  transform: scale(1.05);
  transition: transform var(--t-ui) ease;
}

.linha-card:hover .linha-card__foto img { transform: scale(1); }

.linha-card__pe {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding-top: 18px;
}

.linha-card__pe h3 {
  flex: 1;
  min-width: 0;
  font-size: 19px;
  line-height: 26px;
}

.linha-card__pe h3 a { color: var(--azul); }
.linha-card__pe h3 a:hover { color: var(--laranja); }

.linha-card__seta {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio);
  background: var(--azul);
  color: var(--branco);
  transition: background var(--t-ui) ease;
}

.linha-card__seta:hover {
  background: var(--laranja);
  color: var(--branco);
}

.linha-card__seta svg { width: 19px; height: 19px; }

.linhas__mais {
  margin: 30px 0 0;
  text-align: center;
}

/* Entrada dos cards ao TROCAR de aba: antes eles apareciam de estalo.
   A classe .trocou é posta pelo JS no painel que acabou de virar, e não pelo
   .esta: com .esta a animação também rodaria no carregamento da página, por
   cima da revelação por rolagem (.entra), e os cards da primeira aba nasceriam
   visíveis antes da hora. */
@keyframes aba-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.abas__painel.trocou .linha-card,
.abas__painel.trocou .linhas__mais {
  animation: aba-entra 520ms var(--curva-entrada) both;
}

.abas__painel.trocou .linha-card:nth-child(2) { animation-delay:  80ms; }
.abas__painel.trocou .linha-card:nth-child(3) { animation-delay: 160ms; }
.abas__painel.trocou .linhas__mais            { animation-delay: 240ms; }

/* =========================================================================
   7. APLICAÇÕES (mosaico com filtro)
   ========================================================================= */

/* A fileira de filtros por setor saiu junto com a marcação: com cinco cards,
   filtrar escondia mais do que mostrava. */
.aplicacoes { overflow: hidden; }

/* Um card alto ocupando as duas linhas à esquerda, quatro em 2x2 à direita. */
.aplicacoes__mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 285px;
  gap: var(--gap);
}

.aplic {
  position: relative;
  border-radius: var(--raio-g);
  overflow: hidden;
}

.aplic--alto { grid-row: span 2; }

.aplic[hidden],
.aplic.fora { display: none; }

.aplic > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-ui) ease;
}

.aplic:hover > img { transform: scale(1.08); }

/* Gradiente preto que sobe de altura zero. */
.aplic::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(
    0deg,
    rgba(var(--azul-esc-rgb), .88) 0%,
    rgba(var(--azul-esc-rgb), .62) 45%,
    rgba(var(--azul-esc-rgb), 0) 100%
  );
  pointer-events: none;
  transition: height var(--t-ui) ease;
  z-index: 1;
}

.aplic:hover::before { height: 100%; }

/* Cunha laranja de 150px entrando pelo canto inferior esquerdo. */
.aplic::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 150px solid var(--laranja);
  border-right: 150px solid transparent;
  transform: translateX(-150px);
  pointer-events: none;
  transition: transform var(--t-ui) ease;
  z-index: 2;
}

.aplic:hover::after { transform: none; }


.aplic__texto {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  opacity: 0;
  color: var(--branco);
  transition:
    bottom var(--t-ui) ease,
    opacity var(--t-ui) ease;
  z-index: 3;
}

.aplic:hover .aplic__texto {
  bottom: 28px;
  opacity: 1;
  transition-delay: 400ms;
}

.aplic__texto p {
  margin: 0 0 4px;
  color: var(--laranja);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.aplic__texto h3 { color: var(--branco); }

/* =========================================================================
   8. TIRA
   ========================================================================= */

/* Quatro garantias mais a chamada, tudo numa faixa só.
   Antes eram quatro colunas iguais com o texto colado à esquerda de cada uma:
   como o texto tem largura diferente, o vão entre um item e outro saía irregular
   e a faixa lia como quatro coisas soltas. Agora cada item é centrado na coluna,
   o filete entre colunas dá o ritmo, e a chamada fecha a linha à direita. */
.tira { padding: 56px 0; }

.tira__dentro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 45px;
  align-items: center;
}

.tira__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tira__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-inline: 18px;
  color: rgba(var(--branco-rgb), .7);
  text-align: center;
}

/* Filete só entre as colunas, nunca antes da primeira. */
.tira__item + .tira__item { border-left: 1px solid rgba(var(--branco-rgb), .15); }

.tira__item strong {
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
}

.tira__leg { font-size: 14px; line-height: 21px; }

.tira__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(var(--branco-rgb), .3);
  border-radius: var(--raio-g);
  color: var(--laranja);
  transition: background var(--t-ui) ease, border-color var(--t-ui) ease;
}

.tira__ico svg { width: 32px; height: 32px; }

.tira__item:hover .tira__ico {
  background: rgba(var(--laranja-rgb), .16);
  border-color: var(--laranja);
}

.tira__acao {
  padding-left: 45px;
  border-left: 1px solid rgba(var(--branco-rgb), .15);
}

.tira__acao p {
  margin: 0 0 16px;
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
}

.tira__acao span {
  display: block;
  color: rgba(var(--branco-rgb), .7);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}

/* =========================================================================
   9. PROCESSO
   ========================================================================= */

.processo { overflow: hidden; }

/* --- A fila de passos com o filete que percorre --- */

.passos {
  position: relative;
  margin-bottom: 50px;
}

/* O trilho começa e termina no CENTRO do primeiro e do último ícone, não na
   borda da lista: com cinco colunas iguais isso é 10% de cada lado (1/(2*5)).
   Encostar nas bordas deixava um toco de linha sobrando fora dos ícones. */
.passos__trilho {
  position: absolute;
  top: 35px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(var(--azul-rgb), .15);
}

.passos__cheio {
  position: relative;
  display: block;
  width: var(--percorre, 0%);
  height: 100%;
  background: var(--laranja);
  transition: width var(--t-conteudo) var(--curva-entrada);
}

/* Ponto na ponta do filete: é ele que dá a leitura de "andando", em vez de só
   uma barra que cresce. Fica preso ao fim do preenchido, então anda junto. */
.passos__cheio::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--laranja);
  transform: translate(50%, -50%);
}

.passos__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.passo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 6px;
  border: 0;
  background: none;
  text-align: center;
}

.passo__ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(var(--azul-rgb), .15);
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul);
  transition:
    background var(--t-ui) ease,
    border-color var(--t-ui) ease,
    color var(--t-ui) ease;
}

.passo__ico svg { width: 30px; height: 30px; }

/* A bolinha do número gruda no canto do círculo. */
.passo__ico em {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  transition: background var(--t-ui) ease;
}

.passo__rot {
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 16px;
  line-height: 23px;
  font-weight: 600;
  transition: color var(--t-ui) ease;
}

.passo:hover .passo__ico,
.passo.esta .passo__ico {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
}

.passo.esta .passo__ico em { background: var(--azul-esc); }
.passo.esta .passo__rot { color: var(--laranja-esc); }

/* --- O palco que desliza --- */

.palco { overflow: hidden; }

.palco__fita {
  display: flex;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: transform var(--t-conteudo) var(--curva-entrada);
}

/* flex: 0 0 100% e não width: 100%: com width o flex encolhe os quadros pra
   caberem todos na tela e a fita nunca sai do lugar. */
.palco__quadro {
  flex: 0 0 100%;
  opacity: .25;
  transition: opacity var(--t-conteudo) ease;
}

.palco__quadro.esta { opacity: 1; }

.palco__dentro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
}

.palco__foto {
  margin: 0;
  border-radius: var(--raio-g) var(--raio-g) var(--raio-g) 0;
  overflow: hidden;
}

.palco__foto img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.palco__texto h3 {
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 44px;
}

.palco__texto .marcada { margin: 22px 0 28px; }

/* =========================================================================
   10b. CUSTO (a tese: o preço do rolo não é o custo da embalagem)
   Quatro cartões claros sobre fundo branco. Sem foto de propósito: o bloco é
   argumento, e foto aqui competiria com a leitura.
   ========================================================================= */

.custo__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 50px;
}

/* Versão de dois cartões (ficha de produto): metade da largura, centralizada. */
.custo__grade--curta {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin-inline: auto;
}

.custo__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition:
    border-color var(--t-ui) ease,
    box-shadow var(--t-ui) ease;
}

.custo__card:hover {
  border-color: transparent;
  box-shadow: var(--sombra-g);
}

.custo__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: var(--raio);
  background: var(--claro);
  color: var(--laranja);
}

.custo__ico svg { width: 28px; height: 28px; }

/* Duas linhas SEMPRE, mesmo quando o título cabe em uma: sem isto o card de
   título curto começava o texto 28px acima dos vizinhos e a fileira inteira
   ficava desalinhada. */
.custo__card h3 {
  min-height: 56px;
  margin-bottom: 12px;
  color: var(--azul);
  font-size: 20px;
  line-height: 28px;
}

/* :not() para não atropelar a virada: `.custo__card p` (classe + elemento) tem
   especificidade MAIOR que `.custo__vira` (classe), então este `margin: 0`
   apagava o `margin-top: auto` da resposta e ela deixava de descer para o pé do
   card. Terceira vez que atalho de margem apaga o irmão neste projeto. */
/* O margin-bottom é o respiro ANTES do filete da virada: com margin 0 o filete
   nascia colado na última linha do texto (o `margin-top: auto` vira zero assim
   que o card enche). O padding-top da .custo__vira é o respiro depois dele. */
.custo__card p:not(.custo__vira) { margin: 0 0 24px; }

/* A virada do cartão: o que a Soluflex faz com aquilo. Fica colada embaixo, com
   filete em cima, para ler como resposta e não como continuação do problema.
   O min-height alinha o FILETE dos quatro cards: só o margin-top: auto alinhava
   a base, e a resposta de duas linhas subia o filete dela sozinha. */
.custo__vira {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 64px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  color: var(--azul);
  font-size: 15px;
  line-height: 23px;
  font-weight: 600;
}

.custo__vira svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--laranja);
}

.custo__fecho {
  margin: 45px 0 0;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  text-align: center;
}

/* =========================================================================
   10c. COMO ESCOLHER (critério dentro da categoria)
   Duas colunas de situação e item. Sem card: é lista de consulta, e caixa em
   volta de cada linha faria o bloco pesar mais que a grade de produtos acima.
   ========================================================================= */

.escolher__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px var(--gap);
  margin-top: 45px;
}

.escolher__item {
  padding-left: 22px;
  border-left: 3px solid var(--laranja);
}

.escolher__caso {
  margin: 0 0 6px;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
}

.escolher__item-nome {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.escolher__item-nome svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--laranja);
}

.escolher__nota { margin: 40px 0 0; }

/* =========================================================================
   12. EQUIPE
   ========================================================================= */

/* O `auto` só centra em título centrado. Num bloco de título à esquerda (o "como
   escolher" da categoria), ele empurrava o parágrafo para o meio da tela e a
   linha nascia desalinhada do H2. Fora do --centro, o apoio começa na margem. */
.sec-titulo__apoio {
  max-width: 640px;
  margin: 14px 0 0;
}

.sec-titulo--centro .sec-titulo__apoio { margin-inline: auto; }

.equipe__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.pessoa {
  margin-bottom: 30px;
  text-align: center;
}

/* Círculo com um canto reto, em medida fixa: é o que deixa o -210px do card
   bater sempre no mesmo ponto da foto. */
.pessoa__foto {
  width: 250px;
  height: 255px;
  margin: 0 auto;
  border: 4px solid var(--linha);
  border-radius: 50%;
  border-bottom-left-radius: 0;
  overflow: hidden;
  transition: border-color var(--t-ui) ease;
  position: relative;
  z-index: 2;
}

.pessoa:hover .pessoa__foto { border-color: var(--laranja); }

.pessoa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O topo em rampa (.rampa) corta 43% do card, então o padding-top devolve o
   espaço que o negativo comeu. */
.pessoa__card {
  margin-top: -210px;
  padding: 248px 25px 26px;
  background: var(--claro);
  position: relative;
  z-index: 1;
}

.pessoa__card h3 {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(var(--azul-rgb), .15);
}

/* O verde vem do .btn--zap. Aqui só o que é do card: o número não é rótulo de
   comando, então não vai em caixa alta, e o espaço entre ícone e número é maior
   que o do botão comum. */
.pessoa__zap {
  gap: 9px;
  text-transform: none;
  font-size: 15px;
  letter-spacing: .01em;
}

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

/* =========================================================================
   13. COMPROMISSOS
   ========================================================================= */

.compromissos__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-top: 30px;
  margin-bottom: 55px;
}

.compromisso {
  position: relative;
  padding: 55px 35px 50px;
  border: 2px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--t-ui) ease;
}

.compromisso:hover { border-color: var(--laranja); }
.compromisso h3 { margin-bottom: 12px; }
.compromisso p { margin: 0; }

/* Ícone saindo pela borda de cima. */
.compromisso__ico {
  position: absolute;
  top: -30px;
  left: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--branco);
}

.compromisso__ico svg { width: 30px; height: 30px; }

/* Aspas penduradas na base, metade pra fora. */
.compromisso__aspas {
  position: absolute;
  right: 35px;
  bottom: -25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--laranja);
}

.compromisso__aspas svg { width: 20px; height: 20px; }

.compromissos__nota {
  margin: 0;
  font-size: 14px;
  color: rgba(var(--cinza-rgb), .8);
}

/* =========================================================================
   14. FAQ
   ========================================================================= */

.faq__grade {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 70px;
  align-items: start;
}

.faq__lado h2 { margin-bottom: 18px; }
.faq__lado h2 strong { color: var(--laranja); font-weight: inherit; }
.faq__lado .btn { margin-top: 10px; }

.faq__lista details {
  position: relative;
  margin-bottom: 15px;
  padding-left: 4px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--t-ui) ease;
}

/* Filete laranja permanente na lateral do item, como no modelo. */
.faq__lista details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--laranja);
}

.faq__lista details[open] { border-color: var(--laranja); }

.faq__lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 26px;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista details[open] summary { color: var(--laranja); }

/* O mais vira x girando 45°. */
.faq__mais {
  flex: 0 0 auto;
  display: flex;
  color: var(--laranja);
  transition: transform var(--t-ui) ease;
}

.faq__mais svg { width: 20px; height: 20px; }
.faq__lista details[open] .faq__mais { transform: rotate(45deg); }

/* O padding mora no parágrafo, não aqui. A abertura é animada por altura, e com
   padding neste elemento a altura zero ainda mediria os 24px de baixo: o acordeão
   fechado ficaria com uma tarja de respiro sobrando. */
.faq__resp {
  overflow: hidden;
  transition: height var(--t-ui) var(--curva-entrada);
}

.faq__resp p { margin: 0; padding: 4px 26px 24px; }

/* =========================================================================
   15. CTA FINAL
   ========================================================================= */

.cta-final {
  position: relative;
  padding: 100px 0;
  background: var(--azul-esc);
  overflow: hidden;
}

.cta-final__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
}

/* A cunha da base já traz a segunda camada em ::before deslocada 30px: as duas
   diagonais saem de um elemento só. */
.cta-final .cunha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 58%;
  background: rgba(var(--laranja-rgb), .9);
  pointer-events: none;
}

.cta-final__dentro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

.cta-final__dentro h2 strong {
  color: var(--branco);
  font-weight: inherit;
}

.cta-final__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* =========================================================================
   16. TOPO DE PÁGINA INTERNA
   ========================================================================= */

/* Faixa baixa: é orientação, não seção. Com 90px ela empurrava o conteúdo da
   interna pra fora da primeira tela sem dizer nada de novo. */
.topo-pagina {
  padding: 52px 0 48px;
  text-align: center;
}

.topo-pagina h1 { font-size: 40px; line-height: 1.15; }

.topo-pagina h1 { color: var(--branco); }

.topo-pagina p {
  max-width: 700px;
  margin: 16px auto 0;
  color: rgba(var(--branco-rgb), .75);
}

.migalha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 14px;
  color: rgba(var(--branco-rgb), .65);
  font-size: 15px;
}

.migalha a { color: var(--laranja); }
.migalha a:hover { color: var(--branco); }
.migalha svg { width: 13px; height: 13px; }

/* =========================================================================
   17. CATÁLOGO E CARD DE PRODUTO
   ========================================================================= */

.catalogo__bloco + .catalogo__bloco { margin-top: 80px; }

.catalogo__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 40px;
}

.catalogo__topo h2 strong { color: var(--laranja); font-weight: inherit; }

.catalogo__resumo {
  max-width: 640px;
  margin: 12px 0 0;
}

.grade-prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.prod {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
  transition:
    border-color var(--t-ui) ease,
    box-shadow var(--t-ui) ease;
}

.prod:hover {
  border-color: transparent;
  box-shadow: var(--sombra-g);
}

.prod__foto {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--branco);
}

/* NUNCA cortar foto de produto (pedido do Darlei): as fotos são quadradas com
   fundo branco e a caixa é 4/3, então cover comia rolo pela borda. Com contain
   a peça aparece inteira, e o padding é o que dá espaço pro zoom do hover
   crescer sem encostar na borda (6% de ~300px = 9px de cada lado). */
.prod__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 20px;
  object-fit: contain;
  transition: transform var(--t-ui) ease;
}

.prod:hover .prod__foto img { transform: scale(1.06); }

/* Placeholder quando o produto ainda não tem foto: a grade técnica da base já
   dá a textura, aqui só a caixa. */
.prod__sem-foto {
  display: block;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(0deg, rgba(var(--azul-rgb), .07) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(var(--azul-rgb), .07) 0 1px, transparent 1px 20px),
    var(--claro);
}

.prod__sem-foto.grande { aspect-ratio: 3 / 2; }

.prod__seta {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--branco);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--t-ui) ease,
    transform var(--t-ui) ease;
}

.prod__seta svg { width: 16px; height: 16px; }

.prod:hover .prod__seta {
  opacity: 1;
  transform: none;
}

.prod__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 25px 26px;
}

.prod__corpo h3 { font-size: 20px; line-height: 28px; }
.prod__corpo h3 a { color: var(--azul); }
.prod__corpo h3 a:hover { color: var(--laranja); }
.prod__corpo p { margin: 0; font-size: 15px; }
.prod__corpo .btn-texto { margin-top: auto; }

.vazio {
  padding: 45px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  background: var(--claro);
  text-align: center;
}

/* =========================================================================
   18. PÁGINA DE PRODUTO
   ========================================================================= */

.produto { padding: 120px 0; }

.produto__topo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.produto__foto {
  margin: 0;
  border-radius: var(--raio-g);
  background: var(--claro);
  overflow: hidden;
}

.produto__foto img { width: 100%; }

/* Galeria: a fita de miniaturas mora DENTRO do quadro da foto, sobre o mesmo fundo
   claro, então ela lê como parte da peça e não como uma sobra embaixo dela.
   Só existe a partir da segunda foto (quem decide é o PHP). */
.produto__miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

.produto__mini {
  width: 84px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.produto__mini img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
}

.produto__mini:hover { transform: translateY(-2px); }
.produto__mini.esta { border-color: var(--laranja); }

/* Alvo de toque: 84px de largura já passa, mas a altura fica em 64. O recuo
   negativo devolve os 44px sem mexer no desenho, igual ao resto do site. */
@media (max-width: 767px) {
  .produto__mini { padding: 6px 0; margin: -6px 0; }
}

.produto__info h1 {
  margin-bottom: 14px;
  font-size: 42px;
}

.produto__resumo {
  font-size: 18px;
  line-height: 30px;
  color: var(--azul);
}

.ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 0 0 28px;
  padding: 22px 25px;
  border-radius: var(--raio);
  background: var(--claro);
}

.ficha dt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.ficha svg { width: 17px; height: 17px; color: var(--laranja); }
.ficha dd { margin: 0; }

.produto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.produto__nota {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 22px;
}

/* Bloco fixo da ficha: filete laranja e fundo claro, para ler como recado da
   fábrica e não como mais um parágrafo da descrição do produto. */
.produto__antes {
  margin: 28px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--laranja);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--claro);
}

.produto__antes p { margin: 0; }

.produto__antes-tit {
  margin-bottom: 8px;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
}

/* Flex e não grid de 3 colunas: produto sem medidas cadastradas tem só dois
   cards, e na grade fixa eles ficavam encostados à esquerda com um terço de
   buraco à direita. Aqui a linha se centra sozinha, com dois ou com três. */
.produto__detalhes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: 70px;
}

.detalhe {
  flex: 1 1 300px;
  max-width: 420px;   /* o mesmo que 1 de 3 colunas dá no container de 1350px */
  padding: 35px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.detalhe h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 30px;
}

.detalhe h2 svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  color: var(--laranja);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  padding: 6px 14px;
  border-radius: var(--raio);
  background: var(--claro);
  color: var(--azul);
  font-size: 14px;
  font-weight: 500;
}

.marcada {
  display: grid;
  gap: 10px;
}

.marcada li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.marcada svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--laranja);
}

/* =========================================================================
   19. CONTATO, ORÇAMENTO, OBRIGADO E PROSA
   ========================================================================= */

.contato__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.contato__card {
  padding: 45px 35px 40px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition: box-shadow var(--t-ui) ease;
}

.contato__card:hover { box-shadow: var(--sombra-g); }

.contato__card h2 {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 32px;
}

.contato__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--branco);
}

.contato__ico svg { width: 30px; height: 30px; }

.contato__lista {
  display: grid;
  gap: 8px;
}

.contato__card .btn { margin-top: 8px; }

.contato__cnpj {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 22px;
}

/* Sem align-items: start, as duas colunas esticam na altura da mais alta (que é
   sempre o formulário). O cartão escuro terminava no meio da coluna do lado e a
   seção lia como se faltasse alguma coisa embaixo. */
.orcamento__grade {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--gap);
}

/* Coluna esticada precisa dizer o que fazer com a sobra: o texto fica em cima e a
   lista de contato desce pro pé (o margin-top: auto abaixo), em vez de todo mundo
   grudado no topo com um vazio embaixo. */
.orcamento__lado {
  display: flex;
  flex-direction: column;
  padding: 45px 40px;
  border-radius: var(--raio-g);
  color: rgba(var(--branco-rgb), .8);
}

.orcamento__lado h2 { margin-bottom: 16px; }
.orcamento__lado h2 strong { color: var(--laranja); font-weight: inherit; }
.orcamento__lado .btn { margin-top: 8px; }

.orcamento__contatos {
  display: grid;
  margin-top: auto;
  gap: 14px;
  margin-top: 28px;
}

.orcamento__contatos li {
  display: flex;
  align-items: center;
  gap: 13px;
}

.orcamento__contatos li > span {
  display: flex;
  color: var(--laranja);
}

.orcamento__contatos svg { width: 18px; height: 18px; }
.orcamento__contatos a { color: rgba(var(--branco-rgb), .8); }
.orcamento__contatos a:hover { color: var(--laranja); }

.orcamento__form {
  padding: 40px;
  border-radius: var(--raio-g);
  background: var(--branco);
  box-shadow: var(--sombra);
}

/* SEIS colunas, não três: o campo comum ocupa 2 (dão 3 por linha) e o que precisa
   de largura ocupa 3 (dão 2 por linha). Com grade de 3 colunas, uma linha de dois
   campos deixaria buraco de uma coluna na ponta.
   O gap de linha é maior que o de coluna (22 contra 18) porque o rótulo montado
   sobre a borda invade o vão de cima: com 18 nos dois, ele quase encosta no campo
   de cima. */
.campos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px 18px;
  margin-bottom: 25px;
}

.campo {
  position: relative;
  grid-column: span 2;
  margin: 0;
}

.campo--meio { grid-column: span 3; }
.campo--largo { grid-column: 1 / -1; }

/* Rótulo montado SOBRE a borda de cima do campo, no lugar de uma linha própria
   acima dele: economiza os 28px de altura de cada linha do formulário (rótulo
   mais respiro) sem tirar nenhum rótulo da tela.
   Fica visível sempre, e não é placeholder que sobe no foco: rótulo que some
   quando o campo enche é o que faz o visitante perder de vista o que digitou.
   O `background` é obrigatório, é ele que abre a fresta na borda. Se um dia este
   formulário for parar em fundo que não seja branco, esta cor vai junto. */
.campo label {
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 1;
  padding: 0 7px;
  transform: translateY(-50%);
  background: var(--branco);
  color: var(--azul);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}

.campo label em {
  color: var(--laranja);
  font-style: normal;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--t-ui) ease;
}

.campo textarea {
  height: auto;
  padding: 14px 16px;
  resize: vertical;
}

/* Seta própria no lugar da nativa. A do navegador cola na borda e padding-right
   não a afasta (ela é desenhada pelo próprio widget, fora do fluxo do CSS): a
   única forma de dar respiro é appearance: none e desenhar a seta como fundo.
   É o mesmo chevron do resto do site, a 20px da borda. */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A314B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 15px 15px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--laranja); }

.orcamento__nota {
  margin: 15px 0 0;
  font-size: 14px;
  line-height: 22px;
}

.obrigado__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--branco);
}

.obrigado__ico svg { width: 46px; height: 46px; }
.obrigado h1 { margin-bottom: 16px; }

.obrigado__grande {
  font-size: 19px;
  line-height: 30px;
  color: var(--azul);
}

.obrigado .btn { margin-top: 12px; }

.prosa h2 {
  margin: 40px 0 14px;
  font-size: 26px;
  line-height: 34px;
}

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

/* O reset da base zera marcador e recuo de TODA lista do site (menu, cards, grade).
   Em texto corrido isso vira parágrafo colado, sem hierarquia: aqui a lista volta
   a parecer lista. */
.prosa ul {
  margin: 0 0 20px;
  padding-left: 22px;
  list-style: disc;
}

.prosa li { margin-bottom: 9px; }
.prosa li::marker { color: var(--laranja); }
.prosa strong { color: var(--azul); }

/* --- Política de privacidade --- */

.politica__papel {
  padding: 60px;
  border-radius: var(--raio-g);
  background: var(--branco);
  box-shadow: var(--sombra);
}

/* O primeiro parágrafo é o resumo da página: entra maior, como entrada de
   leitura, e leva o filete laranja que marca começo de bloco no resto do site. */
.politica__abre {
  margin-top: 0;
  padding-left: 20px;
  border-left: 3px solid var(--laranja);
  font-size: 18px;
  line-height: 30px;
}

.politica__ficha { margin: 30px 0 45px; }

.politica__data {
  margin-top: 45px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: 14px;
}

/* =========================================================================
   19b. LANDING PAGE (body.nu, sem cabeçalho e sem rodapé)
   ========================================================================= */

.lp-hero {
  position: relative;
  padding: 110px 0;
  background: var(--azul-esc);
  text-align: center;
  overflow: hidden;
}

/* Mesma solução da chamada: o véu é a opacidade da foto sobre o azul, o que
   deixa as faixas diagonais livres pra pintar em ordem de marcação. */
.lp-hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}

.lp-hero .faixa-diagonal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: auto;
}

.lp-hero .faixa-diagonal::before,
.lp-hero .faixa-diagonal::after { z-index: auto; }

.lp-hero__dentro {
  position: relative;
  max-width: 900px;
  color: rgba(var(--branco-rgb), .85);
}

.lp-hero__logo {
  width: auto;
  height: 52px;
  margin: 0 auto 35px;
}

.lp-hero__dentro h1 {
  margin-bottom: 20px;
  color: var(--branco);
}

.lp-hero__dentro h1 strong {
  color: var(--laranja);
  font-weight: inherit;
}

.lp-hero__sub {
  max-width: 700px;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 30px;
}

.lp-hero__nota {
  margin: 16px 0 0;
  color: rgba(var(--branco-rgb), .55);
  font-size: 14px;
}

.lp-benef__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.lp-benef__card {
  padding: 55px 30px 35px;
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
  transition: transform var(--t-ui) ease;
}

.lp-benef__card:hover { transform: translateY(-8px); }
.lp-benef__card h3 { margin-bottom: 12px; font-size: 21px; line-height: 29px; }
.lp-benef__card p { margin: 0; font-size: 15px; }

.lp-benef__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  border-radius: var(--raio);
  background: var(--laranja);
  color: var(--branco);
}

.lp-benef__ico::after { border-bottom-color: var(--laranja-esc); }
.lp-benef__ico svg { width: 34px; height: 34px; }

/* =========================================================================
   20. RODAPÉ
   ========================================================================= */

.rodape {
  color: rgba(var(--branco-rgb), .72);
  font-size: 15px;
  line-height: 26px;
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: var(--gap);
  padding-block: 90px 70px;
}

/* min-width: 0 impede que endereço e e-mail longos empurrem a coluna e estourem
   a grade pra fora da tela. */
.rodape__col { min-width: 0; }

.rodape__logo {
  width: auto;
  height: 68px;
  max-width: 100%;
  margin-bottom: 24px;
}

.rodape__redes {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.rodape__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--branco-rgb), .2);
  border-radius: 50%;
  color: var(--branco);
  transition:
    background var(--t-ui) ease,
    border-color var(--t-ui) ease;
}

.rodape__redes svg { width: 17px; height: 17px; }

.rodape__redes a:hover {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
}

/* Sublinhado laranja curto no título da coluna: um traço longo e um curto
   separados, que é a assinatura do modelo. */
.rodape__titulo {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 14px;
  color: var(--branco);
  font-size: 20px;
  line-height: 28px;
}

.rodape__titulo::before,
.rodape__titulo::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--laranja);
}

.rodape__titulo::before { left: 0; width: 105px; }
.rodape__titulo::after { left: 110px; width: 20px; }

.rodape__links a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  color: rgba(var(--branco-rgb), .72);
}

.rodape__links a:hover { color: var(--laranja); }

.rodape__links svg {
  width: 13px;
  height: 13px;
  color: var(--laranja);
}

.rodape__contato {
  display: grid;
  gap: 15px;
}

.rodape__contato li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.rodape__contato li > span {
  display: flex;
  flex: 0 0 18px;
  margin-top: 4px;
  color: var(--laranja);
}

.rodape__contato svg { width: 18px; height: 18px; }
.rodape__contato a { color: rgba(var(--branco-rgb), .72); }
.rodape__contato a:hover { color: var(--laranja); }

.rodape__fim {
  background: rgba(0, 0, 0, .25);
  border-top: 1px solid rgba(var(--branco-rgb), .1);
  font-size: 14px;
}

.rodape__fim-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding-block: 24px;
}

.rodape__fim p { margin: 0; }

/* =========================================================================
   21. FLUTUANTES
   ========================================================================= */

/* --- Aviso de cookies ---
   Canto de BAIXO À ESQUERDA: a direita já tem o WhatsApp e o botão de voltar ao
   topo empilhados, e caixa por cima de botão flutuante é briga garantida.
   z-index 14, a mesma conta dos vizinhos: acima de qualquer seção (nenhuma passa
   de 5) e abaixo do véu do megamenu (15). */
.cookies {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 14;
  width: 370px;
  max-width: calc(100vw - 44px);
  padding: 22px 24px;
  border-left: 3px solid var(--laranja);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: 0 10px 40px rgba(var(--azul-esc-rgb), .22);
  animation: cookies-entra 400ms cubic-bezier(.16, 1, .3, 1) both;
}

.cookies[hidden] { display: none; }

/* Longhand, nunca o atalho: o atalho `animation` zera o animation-delay e já
   apagou escalonamento neste projeto. Aqui não há delay, mas a regra é a regra. */
@keyframes cookies-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cookies__texto {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 22px;
}

.cookies__texto strong { color: var(--azul); }

.cookies__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.cookies__link {
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookies__link:hover { color: var(--laranja-esc); }

@media (prefers-reduced-motion: reduce) {
  .cookies { animation: none; }
}

/* Botão vertical empilhado LOGO ACIMA do botão do WhatsApp, a pedido do Darlei.
   Antes ele morava no meio da borda direita, longe de tudo. O bottom é a conta do
   vizinho: 22 (bottom do zap) + 56 (altura dele) + 12 de respiro. */
.topo-volta {
  position: fixed;
  right: 22px;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* 14: acima de qualquer seção (nenhuma passa de 5) e abaixo do véu do
     megamenu (15), senão o botão fica aceso sobre a página escurecida. */
  z-index: 14;
}

.topo-volta__trilho {
  display: block;
  width: 2px;
  height: 62px;
  background: rgba(var(--azul-rgb), .2);
}

.topo-volta__nivel {
  display: block;
  width: 100%;
  height: var(--rolagem, 0%);
  background: var(--laranja);
}

.topo-volta__txt {
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: color var(--t-ui) ease;
}

.topo-volta:hover .topo-volta__txt { color: var(--laranja); }

/* A seta é a versão de celular do botão: aqui ela não existe. Declarada na base
   e não só ligada no media query — modificador que só nasce dentro de um
   breakpoint vira elemento solto na tela em todas as outras larguras. */
.topo-volta__seta { display: none; color: var(--azul); }
.topo-volta:hover .topo-volta__seta { color: var(--laranja); }

.zap-flutua {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--zap);
  color: var(--branco);
  box-shadow: 0 8px 25px rgba(var(--azul-esc-rgb), .25);
  transition: background var(--t-ui) ease;
  z-index: 14; /* mesma conta do .topo-volta: acima da página, abaixo do véu */
}

.zap-flutua svg { width: 28px; height: 28px; }

.zap-flutua:hover {
  background: var(--zap-esc);
  color: var(--branco);
}

/* =========================================================================
   21b. NÚMEROS (faixa de prova, logo abaixo do hero)
   ========================================================================= */

.numeros {
  padding: 50px 0;
  border-bottom: 1px solid var(--linha);
}

.numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.numero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-inline: 22px;
}

/* Filete só entre as colunas: antes da primeira ele viraria uma barra solta. */
.numero + .numero { border-left: 1px solid var(--linha); }

.numero__ico {
  flex: 0 0 auto;
  display: flex;
  color: var(--azul);
}

.numero__ico svg { width: 46px; height: 46px; }

.numero__val {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
}

.numero__val strong { font-weight: inherit; }
.numero__val--curto { font-size: 26px; }

.numero__un {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.numero__leg {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 20px;
}

/* =========================================================================
   21d. ABERTURA DA PÁGINA DA EMPRESA
   ========================================================================= */

.sobre-abre__grade {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}

.sobre-abre__texto h2 { margin-bottom: 22px; }
.sobre-abre__texto h2 strong { color: var(--laranja); font-weight: inherit; }

/* O primeiro parágrafo maior é a entrada de leitura da página. */
.sobre-abre__lead {
  color: var(--azul);
  font-size: 19px;
  line-height: 31px;
}

.sobre-abre__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 32px;
}

.ficha-empresa {
  padding: 34px 32px 30px;
  border-top: 3px solid var(--laranja);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
  background: var(--claro);
}

.ficha-empresa__titulo {
  margin: 0 0 22px;
  color: var(--laranja-esc);
  font-family: var(--fonte-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ficha-empresa dl { margin: 0; }

.ficha-empresa dl > div + div {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid var(--linha);
}

.ficha-empresa dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ficha-empresa dt span { display: flex; color: var(--laranja); }
.ficha-empresa svg { width: 18px; height: 18px; }

/* A margem esquerda alinha o valor com o texto do rótulo, não com o ícone. */
.ficha-empresa dd {
  margin: 5px 0 0 28px;
  font-size: 15px;
  line-height: 23px;
}

.ficha-empresa__pe {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  line-height: 20px;
}

/* Tira de fotos da casa, abaixo do texto de abertura. */
.sobre-abre__tira {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 70px;
}

.sobre-abre__tira figure {
  margin: 0;
  border-radius: var(--raio-g) var(--raio-g) var(--raio-g) 0;
  overflow: hidden;
  background: var(--claro);
}

.sobre-abre__tira img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform var(--t-ui) ease;
}

.sobre-abre__tira figure:hover img { transform: scale(1.05); }

.sobre-abre__tira figcaption {
  padding: 16px 20px 18px;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

/* =========================================================================
   21e. LISTA RÁPIDA (a gama inteira numa tela)
   ========================================================================= */

.lista-rapida { padding: 90px 0 100px; }

/* Masonry de verdade, com columns e não grid: cada linha tem uma quantidade
   diferente de produtos, e na grade os painéis de uma mesma fileira ficavam
   todos com a altura do mais alto, abrindo buraco embaixo dos curtos. Aqui cada
   painel ocupa só a altura dele e a coluna seguinte encosta. */
.lr__grade {
  columns: 2;
  column-gap: var(--gap);
}

.lr__bloco {
  /* Sem isto o painel se parte no meio, entre uma coluna e outra. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--gap);
  padding-bottom: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--branco);
  overflow: hidden;
}

.lr__cabeca {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 24px;
  background: var(--azul);
  color: var(--branco);
  font-size: 17px;
  line-height: 24px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.lr__cabeca-ico { display: flex; color: var(--laranja); }
.lr__cabeca svg { width: 24px; height: 24px; }

/* auto-fill e não colunas fixas: categoria com um item só não pode esticar a
   foto pra largura do painel inteiro. */
.lr__itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 8px;
  padding: 20px 18px 0;
}

.lr__itens a {
  display: block;
  padding: 10px;
  border-radius: var(--raio);
  text-align: center;
  transition: background var(--t-micro) ease;
}

.lr__itens a:hover { background: var(--claro); }

.lr__foto {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
}

.lr__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lr__nome {
  display: block;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lr__pe { margin: 18px 0 0; padding-inline: 26px; }

.lr__acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: var(--gap);
  padding: 32px 38px;
  border-radius: var(--raio-g);
  background: var(--claro);
}

.lr__acao p {
  max-width: 560px;
  margin: 0;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
}

.lr__acao > div { display: flex; flex-wrap: wrap; gap: 15px; }

/* =========================================================================
   21h. SIMULADOR DE FITA PERSONALIZADA
   Palco à esquerda (a fita, e depois a fita com a marca), formulário à direita.
   ========================================================================= */

/* A página do simulador abre DIRETO na ferramenta: a fita à esquerda e, à direita,
   o título com o passo 1 logo abaixo. O título estava acima da grade e empurrava
   tudo pra fora da primeira tela. Por isso também o padding menor no topo. */
.simulador { padding-top: 55px; }

.simulador__grade {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: var(--gap);
  align-items: start;
  margin-top: 0;
}

/* O título ocupa a largura da coluna, não a da página. */
.simulador__lado .sec-titulo { margin-bottom: 28px; }
.simulador__lado .sec-titulo__texto { font-size: 38px; line-height: 46px; }
.simulador__lado .sec-titulo__apoio { margin-bottom: 0; }

/* A foto acompanha a rolagem: a coluna do formulário é comprida (fitas, arquivo,
   ajustes, dados) e sem isto quem mexe num controle lá embaixo não vê o que
   mudou. O align-items: start da grade é o que faz o sticky valer: item de grade
   nasce esticado na altura toda, e item esticado nunca gruda.
   O top de 100px é a altura do cabeçalho colado mais respiro. */
.simulador__palco {
  position: sticky;
  top: 100px;
}

.simulador__quadro {
  position: relative;
  margin: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--branco);
  overflow: hidden;
}

.simulador__quadro img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 20px;
  object-fit: contain;
}

/* O display: block acima VENCE o [hidden] do navegador, e a imagem de saída
   vazia aparecia como ícone de imagem quebrada embaixo da animação. Regra do
   projeto: elemento com display próprio precisa desligar o hidden na mão. */
.simulador__quadro img[hidden] { display: none; }

/* O canvas do compositor ocupa o mesmo lugar da foto, com o mesmo respiro. */
.simulador__quadro canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 20px;
  object-fit: contain;
}

.simulador__quadro canvas[hidden] { display: none; }

.simulador__nota {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 22px;
}

.simulador__pos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.simulador__pos[hidden] { display: none; }

/* --- O formulário --- */

.simulador__form {
  padding: 34px 32px;
  border-radius: var(--raio-g);
  background: var(--branco);
  box-shadow: var(--sombra);
}

.simulador__passo-num {
  margin: 0 0 14px;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 16px;
  font-weight: 600;
}

.simulador__passo-num + * { margin-top: 0; }

/* Subtítulo DENTRO de um passo (o texto que vai impresso na fita): tem que ler
   como parte do passo 2, não como um passo 4 que ninguém pediu. */
.simulador__passo-num--fino {
  margin-top: 22px;
  color: var(--cinza);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Caixa do reCAPTCHA, quando as chaves existem. Sem elas o elemento nem nasce. */
.g-recaptcha { margin: 0 0 18px; }

/* ITENS EXTRAS DA ARTE (o 2º e o 3º da peça). Cada um é imagem OU texto, e quem
   troca é radio + CSS: sem JS, sem estado pra dessincronizar. Os radios são
   irmãos dos painéis de propósito, senão o `~` não alcança. */
.sim-itens {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.sim-item {
  padding: 14px;
  border: 1px solid rgba(var(--azul-rgb), .12);
  border-radius: 10px;
  background: #fff;
}

/* Fileira de chips de escolha. Serve o tipo do item (texto/imagem) e o
   alinhamento (empilhado/lado a lado): um desenho só para a mesma pergunta. */
.sim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* 11px de recuo vertical, e não 6: com 6 o chip dava 40px de altura e ficava
   abaixo dos 44 de alvo de toque. É a mesma conta do resto do site. */
.sim-chips label {
  padding: 11px 16px;
  border: 1px solid rgba(var(--azul-rgb), .18);
  border-radius: 999px;
  color: var(--cinza);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sim-item > input:checked + input + .sim-chips label[for$="-txt"],
.sim-item > input + input:checked + .sim-chips label[for$="-img"],
.sim-alinha > input:checked + input + .sim-chips label[for="ar-pilha"],
.sim-alinha > input + input:checked + .sim-chips label[for="ar-lado"] {
  border-color: var(--laranja);
  background: rgba(var(--laranja-rgb), .1);
  color: var(--laranja-esc);
}

.sim-item__txt,
.sim-item__img { display: none; margin: 0; }

#it1-txt:checked ~ .sim-item__txt,
#it2-txt:checked ~ .sim-item__txt,
#it1-img:checked ~ .sim-item__img,
#it2-img:checked ~ .sim-item__img { display: block; }

/* Foco visível no chip: o radio está escondido, quem mostra é o rótulo dele. */
#it1-txt:focus-visible ~ .sim-chips label[for="it1-txt"],
#it1-img:focus-visible ~ .sim-chips label[for="it1-img"],
#it2-txt:focus-visible ~ .sim-chips label[for="it2-txt"],
#it2-img:focus-visible ~ .sim-chips label[for="it2-img"],
#ar-pilha:focus-visible ~ .sim-chips label[for="ar-pilha"],
#ar-lado:focus-visible ~ .sim-chips label[for="ar-lado"] {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
}

/* Caixa de envio do item: a MESMA do logotipo, só mais baixa. O texto de duas
   linhas usa o mesmo campo do resto do site. */
.simulador__arquivo--peq { padding: 14px; }
.simulador__arquivo--peq .simulador__arquivo-ico { width: 54px; height: 54px; }

.sim-item__txt textarea {
  min-height: 84px;
  resize: vertical;
}

.sim-alinha { margin-bottom: 22px; }

.simulador__fitas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.simulador__fita { display: block; cursor: pointer; }
.simulador__fita input { position: absolute; opacity: 0; pointer-events: none; }

.simulador__fita-foto {
  display: block;
  border: 2px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--t-micro) ease;
}

.simulador__fita-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 6px;
  object-fit: contain;
}

.simulador__fita-nome {
  display: block;
  margin-top: 7px;
  color: var(--azul);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.simulador__fita input:checked + .simulador__fita-foto { border-color: var(--laranja); }
.simulador__fita input:focus-visible + .simulador__fita-foto { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Área de arquivo: o input nativo é feio e não dá para estilizar direito, então
   ele fica escondido DENTRO do label. O label inteiro vira a área de clique, que
   é o que também faz funcionar por teclado, sem JS nenhum. */
.simulador__arquivo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 2px dashed var(--linha);
  border-radius: var(--raio);
  background: var(--claro);
  cursor: pointer;
  transition: border-color var(--t-micro) ease;
}

.simulador__arquivo:hover { border-color: var(--laranja); }
.simulador__arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.simulador__arquivo-ico {
  display: flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--laranja);
}

.simulador__arquivo-ico svg { width: 22px; height: 22px; }

/* Prévia do logotipo mandado. Entra no lugar do ícone: mesma caixa, mesmo tamanho,
   então a linha não pula quando o arquivo é escolhido.
   O [hidden] precisa ser dito na mão porque a regra da imagem tem display próprio,
   a mesma armadilha do quadro do palco. */
.simulador__arquivo-ico img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

.simulador__arquivo-ico img[hidden] { display: none; }

/* Com o logotipo na tela quem some é o ícone, e a caixa deixa de ser quadrada:
   marca costuma ser deitada, e 42px de largura espremeria a leitura.
   Classe no lugar de :has() de propósito: :has ainda não é universal, e aqui a
   falha seria o ícone e o logotipo empilhados dentro da mesma caixa. */
.simulador__arquivo-ico.tem-previa svg { display: none; }

.simulador__arquivo-ico.tem-previa {
  flex: 0 0 auto;
  width: auto;
  min-width: 56px;
  max-width: 150px;
  height: 56px;
  padding: 4px 8px;
}

.simulador__arquivo-txt {
  color: var(--azul);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  word-break: break-word;
}

.simulador__dica {
  margin: 10px 0 28px;
  font-size: 14px;
  line-height: 21px;
}

/* Ajuste do visitante: aparece só quando já existe marca na fita, senão seria
   três controles mexendo em nada. */
.simulador__ajustes { margin-bottom: 28px; }
.simulador__ajustes[hidden] { display: none; }

/* Rótulo e controle na MESMA linha. O rótulo perde a moldura flutuante dos
   campos de texto: aqui não há caixa em que ele possa montar, e ele cairia
   dentro do trilho do controle. */
.campo--faixa {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.campo--faixa label {
  position: static;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  transform: none;
  background: none;
  font-size: 15px;
  font-weight: 500;
}

/* Largura FIXA, não porcentagem: com 1fr cada controle acompanharia o tamanho do
   próprio rótulo e os três trilhos ficariam desalinhados. */
.campo--faixa input[type="range"] {
  flex: 0 0 170px;
  width: 170px;
  height: auto;
  padding: 0;
  border: 0;
  accent-color: var(--laranja);
}

.simulador__form .campos { margin-bottom: 22px; }

.simulador__erro {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--laranja);
  background: var(--claro);
  color: var(--azul);
  font-size: 15px;
  line-height: 23px;
}

.simulador__erro[hidden] { display: none; }

.simulador__aviso {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 20px;
}

/* =========================================================================
   21g. BUSCA (página de resultado)
   O card de produto é o MESMO do catálogo (.grade-prod + .prod), por isso aqui
   só existe o campo, o estado vazio e a lista de linhas e páginas.
   ========================================================================= */

/* MESMA receita do card de produto (`.prod`): branco, filete de 1px na cor de
   linha e raio de 10px. Era uma pílula de raio 999px com sombra, e num site em
   que o maior raio é 10 ela ficava sendo a única peça de outro conjunto: a
   diferença entre 999 e 10 é o que fazia a caixa parecer colada de um template.
   A sombra saiu pelo mesmo motivo: card em repouso aqui não tem sombra, ele
   ganha no hover. */
.busca-form {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 50px;
  padding: 6px 6px 6px 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--branco);
  transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}

/* Foco visível: o campo tem `outline: 0`, então sem isto quem navega por
   teclado não enxerga onde está. O anel é da marca, como o do resto do site. */
.busca-form:focus-within {
  border-color: var(--laranja-esc);
  box-shadow: 0 0 0 3px rgba(var(--laranja-rgb), .18);
}

/* Laranja ESCURO, não o da marca: traço de 1,5px em 22px é desenho miúdo, e o
   laranja da marca dá 3,12:1 no branco. Este dá 4,63:1. */
.busca-form__lupa {
  display: flex;
  flex: 0 0 22px;
  color: var(--laranja-esc);
}

.busca-form__lupa svg { width: 22px; height: 22px; }

.busca-form__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--azul);
  /* `--fonte-texto` não existe: era declaração inválida caindo na herança do
     corpo, ou seja, a fonte certa por acidente. Aqui é a do corpo mesmo. */
  font-family: var(--fonte);
  font-size: 17px;
}

.busca-form__campo:focus { outline: 0; }
.busca-form__campo::-webkit-search-cancel-button { -webkit-appearance: none; }

/* O botão encaixa DENTRO da caixa, com o mesmo recuo dos quatro lados (6px), e
   com o raio menor da casa: caixa 10, botão 5. Raio igual nos dois faria o
   botão parecer estar saindo pela borda. */
.busca-form .btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 30px;
  line-height: normal;
}

.busca-bloco + .busca-bloco { margin-top: 60px; }
.busca-bloco .olho { margin-bottom: 25px; }

.busca-vazio {
  max-width: 720px;
  margin-bottom: 50px;
}

.busca-vazio__frase {
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 25px;
  line-height: 34px;
  font-weight: 600;
}

.busca-vazio__frase strong { color: var(--laranja-esc); font-weight: inherit; }

.busca-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 28px;
}

.busca-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.busca-lista a {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 22px 25px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition:
    border-color var(--t-ui) ease,
    box-shadow var(--t-ui) ease;
}

.busca-lista a:hover {
  border-color: transparent;
  box-shadow: var(--sombra-g);
}

.busca-lista__ico {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio);
  background: var(--claro);
  color: var(--laranja);
}

.busca-lista__ico svg { width: 24px; height: 24px; }

.busca-lista__txt { flex: 1 1 auto; }

.busca-lista__txt strong {
  display: block;
  color: var(--azul);
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 600;
}

/* A cor tem que ser dita: o bloco todo está dentro de um <a>, e sem isto o
   resumo herda o laranja de link e a linha inteira lê como texto clicável. */
.busca-lista__txt em {
  display: block;
  margin-top: 4px;
  color: var(--cinza);
  font-size: 15px;
  line-height: 23px;
  font-style: normal;
}

.busca-lista__seta {
  display: flex;
  flex: 0 0 18px;
  color: var(--laranja);
  transition: transform var(--t-ui) ease;
}

.busca-lista__seta svg { width: 18px; height: 18px; }
.busca-lista a:hover .busca-lista__seta { transform: translateX(5px); }

/* =========================================================================
   21f. RESPONSIVO — 1360 (só o menu)
   Entre 1200 e 1360 o cabeçalho é o único bloco que aperta: chapa do logo,
   seis itens e o botão de orçamento na mesma linha. Sem isto, "Fita
   personalizada" e "A empresa" quebravam em duas linhas dentro da chapa.
   ========================================================================= */

@media (max-width: 1359px) {
  .menu__lista > li > a {
    padding-inline: 24px;
    font-size: 15px;
  }

  .cabeca__marca { padding-right: 44px; margin-right: 10px; }
  .cabeca__btn { padding: 0 34px 0 40px; }
}

/* =========================================================================
   22. RESPONSIVO — 1200
   ========================================================================= */

@media (max-width: 1199px) {
  .menu__lista > li > a { padding-inline: 26px; font-size: 16px; }

  .hero__palco { height: 640px; }
  .hero__texto { max-width: 600px; }
  .hero__texto h1 { font-size: 44px; }
  .hero__selo { width: 168px; height: 168px; top: 40px; }
  .hero__selo strong { font-size: 45px; }
  .hero__selo span { font-size: 18px; }
  .hero__selo em { font-size: 12px; }

  .mega__dentro { grid-template-columns: 1fr 290px; gap: 35px; }

  .aplicacoes__mosaico { grid-auto-rows: 250px; }

  .passo__rot { font-size: 15px; line-height: 21px; }
  .palco__foto img { height: 360px; }
  .palco__texto h3 { font-size: 28px; line-height: 38px; }

  .pessoa__foto { width: 200px; height: 204px; }

  .linhas__topo { grid-template-columns: 1fr 320px; }

  .tira__dentro { grid-template-columns: 1fr 280px; gap: 35px; }
  .tira__acao { padding-left: 35px; }

  /* a lista rápida usa columns, não grid: aqui só muda a contagem */

  .grade-prod { grid-template-columns: repeat(3, 1fr); }
  .custo__grade { grid-template-columns: repeat(2, 1fr); }

  .faq__grade { grid-template-columns: 320px 1fr; gap: 45px; }

  .orcamento__grade { grid-template-columns: 360px 1fr; }

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

/* =========================================================================
   23. RESPONSIVO — 991
   Toda diagonal e todo clip-path viram retos: diagonal em coluna estreita
   não lê como desenho, lê como defeito.
   ========================================================================= */

@media (max-width: 991px) {
  /* --- Diagonais desligadas --- */
  .sobre__selo::after,
  .destaque__ico::after,
  .cta-final .cunha,
  .chamada .faixa-diagonal { display: none; }

  .cabeca__marca::before { border-right-width: 0; }
  .pessoa__card { clip-path: none; }

  /* A lupa vai junto com a barra do menu: nesta largura quem busca usa o campo
     aberto da gaveta. */
  .busca-lista { grid-template-columns: 1fr; }

  /* --- Cabeçalho --- */
  .topo-barra { display: none; }
  .menu { display: none; }
  /* Aqui quem fica por último é o hambúrguer, de fundo transparente: a sangria
     laranja do botão virava tira solta na quina, com vão branco antes. */
  .cabeca__acoes::after { display: none; }

  /* O botão tinha a largura do próprio ícone, 26px: alvo de toque menor que o
     dedo, bem no controle mais usado do celular. O padding cresce a área sem
     mexer no desenho, e o margin devolve o espaço ao layout. */
  .cabeca__menu {
    display: block;
    padding: 10px;
    margin: -10px;
  }
  .cabeca__dentro { justify-content: space-between; }
  .cabeca__marca { margin-right: 0; }

  /* Telefone e link da gaveta: 44px de alvo, sem mudar o desenho. */
  /* ALVO DE TOQUE de 24px pra cima (WCAG 2.5.8) sem mexer no desenho: o padding
     aumenta a área que aceita o dedo e o margin negativo devolve o espaço ao
     layout, então nada se move na tela. */
  .fone,
  .menu-cel__lista a,
  .rodape__links a,
  .rodape__contato a,
  .migalha a,
  .rodape__fim a,
  .linha-card__pe h3 a,
  .lr__itens a { padding-block: 9px; margin-block: -9px; }

  /* --- Hero --- */
  .hero__palco { height: auto; min-height: 560px; }
  .hero__quadro { position: relative; }

  /* Empilhado, o quadro escondido continuaria ocupando altura: só o ativo fica
     no fluxo. O carrossel segue funcionando, a troca é que deixa de ser fade. */
  .hero__quadro:not(.esta) { display: none; }

  .hero__dentro { padding-block: 70px; }
  .hero__texto { max-width: 100%; }
  .hero__texto h1 { font-size: 34px; }
  .hero__sub { max-width: 100%; }
  .hero__atributos { gap: 14px 24px; }
  .hero__selo { top: auto; bottom: 24px; right: var(--gutter); width: 92px; height: 92px; }
  .hero__selo strong { font-size: 24px; }
  .hero__selo span { font-size: 12px; }
  .hero__selo em { font-size: 9px; }

  .hero__setas { display: none; }

  /* --- Sobre --- */
  .sobre__grade { grid-template-columns: 1fr; gap: 55px; }
  .sobre__fotos { max-width: 600px; }

  /* --- Estrutura --- */
  .estrutura__grade { grid-template-columns: 1fr; gap: 55px; }
  .maq { max-width: 500px; margin-inline: auto; width: 100%; }
  .estrutura__nota { margin-top: 45px; }

  /* --- Landing --- */
  .lp-hero { padding: 80px 0; }
  .lp-hero .faixa-diagonal { display: none; }
  .lp-hero__logo { height: 42px; margin-bottom: 28px; }
  .lp-benef__grade { grid-template-columns: repeat(2, 1fr); }

  /* --- Linhas --- */
  .linhas__topo { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .linhas__grade { grid-template-columns: repeat(2, 1fr); }
  .abas__botoes { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .abas__btn { padding: 22px 12px 20px; font-size: 15px; line-height: 21px; }
  .abas__ico svg { width: 34px; height: 34px; }

  /* --- Aplicações --- */
  .aplicacoes__mosaico { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .aplic { max-width: 500px; margin: 0 auto; width: 100%; }
  .aplic--alto { grid-row: auto; }
  .aplic > img { height: auto; aspect-ratio: 4 / 3; }

  /* --- Tira --- */
  .tira__dentro { grid-template-columns: 1fr; gap: 35px; }
  .tira__grade { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .tira__item:nth-child(3) { border-left: 0; }
  .tira__acao { padding-left: 0; border-left: 0; text-align: center; }

  /* --- Processo: a fila de cinco vira duas linhas, e o filete some ---
     Percorrer só faz sentido numa linha reta; quebrado em duas, o filete
     atravessaria o vazio entre as fileiras. */
  .passos__trilho { display: none; }
  .passos__lista { grid-template-columns: repeat(3, 1fr); gap: 26px 10px; }
  .passo__ico { width: 62px; height: 62px; }
  .passo__ico svg { width: 26px; height: 26px; }

  .palco__dentro { grid-template-columns: 1fr; gap: 30px; }
  .palco__foto img { height: 280px; }
  .palco__texto h3 { font-size: 26px; line-height: 36px; }

  /* --- Números e resultados --- */
  .numeros__grade { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .numero:nth-child(3) { border-left: 0; }

  /* --- Página da empresa --- */
  .sobre-abre__grade { grid-template-columns: 1fr; gap: 45px; }
  .sobre-abre__tira { grid-template-columns: 1fr; margin-top: 45px; }
  .sobre-abre__tira img { height: 240px; }

  /* --- Lista rápida --- */
  .lr__grade { columns: 1; }
  .lr__acao { flex-direction: column; align-items: flex-start; gap: 22px; }

  /* --- Equipe --- */
  .equipe__grade { grid-template-columns: repeat(2, 1fr); }

  /* --- Compromissos --- */
  .compromissos__grade { grid-template-columns: 1fr; }
  .compromisso { max-width: 500px; margin: 0 auto; width: 100%; }

  /* --- FAQ --- */
  .faq__grade { grid-template-columns: 1fr; gap: 40px; }

  /* --- CTA final --- */
  .cta-final { padding: 80px 0; }
  .cta-final__dentro { flex-direction: column; align-items: flex-start; gap: 30px; }

  /* --- Internas --- */
  .topo-pagina { padding: 40px 0 36px; }
  .topo-pagina h1 { font-size: 30px; }
  .catalogo__topo { display: block; }
  .catalogo__topo .btn-texto { margin-top: 18px; }
  .grade-prod { grid-template-columns: repeat(2, 1fr); }

  .produto { padding: 90px 0; }
  .produto__topo { grid-template-columns: 1fr; gap: 40px; }
  .produto__info h1 { font-size: 34px; }
  .produto__detalhes { margin-top: 45px; }
  .detalhe { max-width: 100%; }

  .contato__grade { grid-template-columns: 1fr; }
  .orcamento__grade { grid-template-columns: 1fr; }
  .simulador__grade { grid-template-columns: 1fr; }
  /* Numa coluna só, grudar a foto comeria a tela inteira e o formulário ficaria
     empurrado pra fora. Aqui ela volta a rolar junto com o resto. */
  .simulador__palco { position: static; max-width: 620px; margin-inline: auto; }

  /* --- Rodapé --- */
  .rodape__grade { grid-template-columns: repeat(2, 1fr); gap: 45px 30px; padding-block: 70px 55px; }

  /* Continua na tela no celular, agora que mora colado no botão do WhatsApp:
     é uma pastilha estreita, não come largura de conteúdo. Só encolhe o trilho. */
  .topo-volta__trilho { height: 42px; }
}

/* =========================================================================
   24. RESPONSIVO — 620
   ========================================================================= */

@media (max-width: 620px) {
  /* Campo e botão lado a lado não cabem: vira campo em cima, botão de largura
     inteira embaixo, e aí o recuo é igual dos quatro lados. */
  .busca-form {
    flex-wrap: wrap;
    padding: 14px;
  }

  .busca-form__campo { flex: 1 1 60%; }
  .busca-form .btn { width: 100%; height: 52px; justify-content: center; padding: 0 24px; }

  .hero__palco { min-height: 0; }
  .hero__texto h1 { font-size: 28px; }
  .hero__atributos { display: grid; grid-template-columns: repeat(2, 1fr); }
  .hero__botoes .btn { width: 100%; justify-content: center; text-align: center; }
  .hero__pontos { bottom: 24px; }

  /* Nesta largura o círculo cobriria metade do título: vira etiqueta deitada,
     colada no alto do quadro, e a terceira linha some. */
  .hero__selo {
    top: 20px;
    bottom: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
    width: auto;
    height: auto;
    padding: 7px 14px;
    border-radius: var(--raio);
  }

  /* Aro e filete são desenho de disco: numa etiqueta deitada viram sujeira. */
  .hero__selo::before,
  .hero__selo::after { display: none; }

  .hero__selo strong { font-size: 20px; }
  .hero__selo span { font-size: 11px; }
  .hero__selo em { display: none; }

  .sobre__fotos { padding-left: 0; margin-right: 0; }
  .sobre__fotos::before { display: none; }

  .sobre__foto2 {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    border: 0;
  }

  .sobre__selo { right: 0; }
  .sobre__pilares li { flex-direction: column; gap: 14px; }

  .linhas__grade { grid-template-columns: 1fr; }
  .abas__botoes { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
  .abas__btn { padding: 18px 10px 16px; font-size: 14px; line-height: 19px; }
  .abas__ico { margin-bottom: 7px; }
  .abas__ico svg { width: 28px; height: 28px; }

  /* A cunha de 150px cobre um card estreito inteiro. */
  .aplic::after { display: none; }
  .aplic__texto { left: 18px; right: 18px; }
  .aplic:hover .aplic__texto { bottom: 18px; }

  .tira__item { padding-inline: 10px; }
  .tira__ico { width: 58px; height: 58px; }
  .tira__ico svg { width: 26px; height: 26px; }
  .tira__item strong { font-size: 17px; line-height: 23px; }

  .palco__foto img { height: 220px; }
  .passos__lista { grid-template-columns: repeat(2, 1fr); }
  .passo__rot { font-size: 14px; line-height: 20px; }

  .numeros__grade { grid-template-columns: 1fr; }
  .numero { border-left: 0 !important; }
  .lr__itens { grid-template-columns: repeat(2, 1fr); }

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

  .compromisso { padding: 50px 25px 45px; }
  .compromisso__ico { left: 25px; }
  .compromisso__aspas { right: 25px; }

  .faq__lista summary { padding: 17px 18px; font-size: 16px; line-height: 24px; }
  .faq__resp p { padding: 4px 18px 20px; }

  .cta-final__botoes .btn { width: 100%; text-align: center; }

  .grade-prod { grid-template-columns: 1fr; }
  .prod { max-width: 420px; margin-inline: auto; width: 100%; }

  .custo__grade,
  .custo__grade--curta { grid-template-columns: 1fr; }
  .custo__fecho { font-size: 19px; line-height: 28px; }

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

  .ficha { grid-template-columns: 1fr; }
  .produto__acoes .btn { width: 100%; text-align: center; }
  .detalhe { padding: 25px; }

  /* Uma coluna: o span 2/3 dos campos passaria da grade e estouraria a linha,
     por isso cada um volta a ocupar a faixa inteira. */
  .campos { grid-template-columns: 1fr; }
  .campo,
  .campo--meio,
  .campo--largo { grid-column: 1 / -1; }

  .orcamento__form,
  .orcamento__lado { padding: 30px 22px; }

  .politica__papel { padding: 32px 22px; }
  .politica__ficha { grid-template-columns: 1fr; }

  .rodape__grade { grid-template-columns: 1fr; gap: 40px; }
  .rodape__fim-dentro { flex-direction: column; text-align: center; }

  /* No celular a caixa ocupa a largura toda, e sobe para 78px: é a mesma conta do
     .topo-volta (16 do zap + 50 da altura dele + 12), senão ela fica embaixo do
     botão do WhatsApp e o "Entendi" não se clica. */
  .cookies {
    left: 12px;
    right: 12px;
    bottom: 78px;
    width: auto;
    max-width: none;
    padding: 18px 18px 18px 20px;
  }

  .zap-flutua { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .zap-flutua svg { width: 25px; height: 25px; }
  /* Mesma conta do desktop com os números do celular: 16 + 50 + 12. */
  .topo-volta { right: 16px; bottom: 78px; }

  .maq__ico { left: 18px; width: 56px; height: 56px; }
  .maq__ico svg { width: 28px; height: 28px; }

  .lp-hero { padding: 60px 0; }
  .lp-hero__sub { font-size: 16px; line-height: 27px; }
  .lp-hero .btn { width: 100%; text-align: center; }
  .lp-benef__grade { grid-template-columns: 1fr; }
  .lp-benef__card { padding: 40px 25px 30px; }
}

/* =========================================================================
   CORREÇÕES DE CONTRASTE E ENCAIXE
   Achadas na conferência visual. Cada uma existe por um defeito real.
   ========================================================================= */

/* Os remendos do número vazado da barra escura do processo e do título girado do
   card de linha saíram daqui: os dois desenhos deixaram de existir. O número agora
   é uma bolinha sólida no canto do ícone, e o nome do card é deitado. */

/* (a barra de abas de categoria mora na seção 5, com o resto do bloco de linhas) */

/* O rótulo do card de aplicação era laranja e caía exatamente sobre a cunha
   laranja que entra no hover: some por igualdade de cor, não por camada.
   Em branco ele lê tanto sobre a cunha quanto sobre o gradiente. */
.aplic__texto p {
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(6, 32, 47, .4);
}

.aplic__texto h3 { text-shadow: 0 1px 3px rgba(6, 32, 47, .45); }

/* =========================================================================
   AJUSTES DE CELULAR
   ========================================================================= */

@media (max-width: 620px) {
  /* O botão de orçamento no cabeçalho disputava espaço com o logo e o
     hambúrguer numa tela de 390px. Ele já existe dentro da gaveta e no botão
     flutuante, então some daqui em vez de espremer os três. */
  .cabeca__btn { display: none; }

  /* Sem esta folga o topo do título encosta no cabeçalho. */
  .hero__texto { padding-top: 24px; }

  /* Altura fixa NÃO volta aqui: com os quatro atributos e os dois botões, o
     conteúdo do hero passa de 660px nesta largura, e o overflow: hidden do
     .hero cortava o segundo botão fora da tela, calado. */
}

/* O `.cabeca__marca img { width: 128px }` que morava aqui saiu: era ele que
   ACHATAVA o logotipo no celular. Quem encolhe a marca agora é o max-height do
   bloco de celular, que respeita a proporção. */

/* =========================================================================
   CORREÇÕES DA VARREDURA DE CONTRASTE E ENCAIXE
   Cada bloco existe por um defeito medido, não por gosto.
   ========================================================================= */

/* A1 — A cunha herdava z-index: 1 da base e o .cta-final__dentro era relative
   sem z-index (= 0): o laranja pintava POR CIMA do título. Medido 1,09:1. */
.cta-final .cunha { z-index: auto; }
.cta-final__dentro { z-index: 2; }

/* A2 — O botão "Topo" é fixo e atravessa a página inteira com cor fixa: lia bem
   nas seções claras (13,5:1) e sumia nas escuras (1,18:1). Caixa própria resolve
   nos dois fundos sem depender de qual seção está atrás. */
.topo-volta {
  padding: 12px 8px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 18px rgba(6, 32, 47, .18);
}

.topo-volta__txt { color: var(--azul); }
.topo-volta__trilho { background: rgba(var(--azul-rgb), .22); }

/* A3 saiu: existia porque a barra colada era laranja e o anel de foco também
   (1:1, tabular pelo menu não mostrava onde se estava). A barra virou azul
   escura, e aí o remendo é que invertia o problema, deixando o anel azul
   escuro sobre azul escuro. O laranja padrão do foco lê nela. */

/* A4 — O laranja da marca dá 3,12:1 sobre branco: passa em título grande e
   falha em texto pequeno. Texto miúdo usa o laranja escuro (5,25:1). */
.migalha a,
.faq summary,
.contato__lista a,
.prosa a { color: var(--laranja-esc); }

.migalha a { color: rgba(255, 255, 255, .8); }
.migalha a:hover { color: var(--branco); }

/* Botão verde do WhatsApp: branco sobre #25D366 dava 1,98:1, o pior do site. */
.btn--zap { --btn-fundo: #128C4B; --btn-preenche: var(--azul); }

/* B5 saiu inteiro: era o remendo do nome girado a -90° na faixa lateral do card
   de linha, e o giro deixou de existir (o nome agora é deitado, abaixo da foto). */

/* B6 — Em tela de toque não existe hover: a seção de aplicações virava cinco
   fotos mudas, com os 10 textos invisíveis. */
@media (hover: none) {
  .aplic__texto { opacity: 1; bottom: 20px; }
  .aplic::before { height: 62%; }
}

/* C10 — Telefone e e-mail da página de contato são feitos pra tocar, e tinham
   19px de altura. */
.contato__lista a { display: inline-block; padding-block: 6px; }

/* C11 saiu junto com a barra escura do processo: sem número vazado, sem contorno
   raspando no contraste. A bolinha de agora é azul sólido sobre branco. */

/* =========================================================================
   25. VÍDEO DA PÁGINA DA EMPRESA
   Só existe quando há vídeo cadastrado no painel. O YouTube não carrega junto
   com a página: até o clique, o que está aqui é foto e um botão.
   ========================================================================= */

.sobre-video__grade {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.sobre-video__texto { color: rgba(var(--branco-rgb), .78); }
.sobre-video__texto h2 { margin-bottom: 18px; }
.sobre-video__texto h2 strong { color: var(--laranja); font-weight: inherit; }
.sobre-video__texto .marcada { margin: 26px 0 30px; }
.marcada--branca li { color: rgba(var(--branco-rgb), .82); }

/* O canto reto embaixo à esquerda é a assinatura de moldura do sistema. */
.sobre-video__quadro {
  position: relative;
  border-radius: var(--raio-g) var(--raio-g) var(--raio-g) 0;
  overflow: hidden;
  box-shadow: var(--sombra-g);
}

.sobre-video__abre {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: 16 / 9;
}

.sobre-video__abre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-ui) ease;
}

/* Véu: sem ele o botão de play some quando o cartaz é uma foto clara. */
.sobre-video__abre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--azul-esc-rgb), .45);
  transition: background var(--t-ui) ease;
}

.sobre-video__abre:hover img { transform: scale(1.04); }
.sobre-video__abre:hover::after { background: rgba(var(--azul-esc-rgb), .3); }

.sobre-video__abre .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.sobre-video__abre .play svg { width: 26px; height: 26px; }

.sobre-video__rot {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 2;
}

/* Depois do clique o botão vira o próprio player. */
.sobre-video__quadro iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 991px) {
  .sobre-video__grade { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================================
   26. MURAL DE COMENTÁRIOS
   Três colunas de prints subindo devagar, cada uma no seu tempo. Janela de
   altura fixa com máscara nas duas pontas: o conteúdo é um laço, e o corte reto
   entregaria a emenda.
   ========================================================================= */

.coment { background: var(--claro); }

.coment__mural {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  height: 640px;
  /* Arrastar é com o mouse (o toque continua rolando a página, senão o visitante
     de celular fica preso no mural). O cursor avisa que dá pra puxar. */
  cursor: grab;
  touch-action: pan-y;
  /* Sem isto o arrasto vira seleção de texto e a imagem sai flutuando com o
     cursor (o "arrastar imagem" nativo do navegador). */
  user-select: none;
  /* O respiro lateral existe pro card CRESCER no hover sem bater na parede do
     overflow. Puxado de volta pela margem negativa, então a coluna não encolhe. */
  padding: 0 10px;
  margin: 0 -10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}

/* Flex, não bloco: a margem do último filho de um BLOCO colapsa com a do pai, a
   fita fica uma margem mais curta que o dobro exato dos cards e o laço salta
   30px a cada volta. Em flex nada colapsa. */
.coment__fita {
  display: flex;
  flex-direction: column;
  animation: coment-sobe 70s linear infinite;
  will-change: transform;
}

.coment__col:nth-child(2) .coment__fita { animation-duration: 88s; }
.coment__col:nth-child(3) .coment__fita { animation-duration: 61s; }

/* NÃO pausa no hover, a pedido do Darlei: o mural não para de andar. Quem quer
   ler puxa o mural (arrasto) ou clica pra abrir a lupa. */
.coment__mural--puxando { cursor: grabbing; }

/* Durante o arrasto o card não cresce: o cursor está em cima de um, e o hover
   atrapalharia a leitura do movimento. Sem `pointer-events: none` aqui: o clique
   precisa continuar chegando no card. */
.coment__mural--puxando .coment__card:hover { transform: none; }

/* -50% é exatamente uma cópia da lista: a segunda volta começa no mesmo pixel. */
@keyframes coment-sobe {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.coment__card {
  display: block;
  margin-bottom: 14px;
  padding: 12px 12px 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
  /* Uma declaração só de transition, com o transform junto: uma segunda apagaria
     a primeira e o hover viraria estalo. */
  transition:
    border-color var(--t-ui) ease,
    box-shadow var(--t-ui) ease,
    transform var(--t-ui) var(--curva-entrada);
}

.coment__card:hover,
.coment__card:focus-visible {
  border-color: var(--laranja);
  box-shadow: var(--sombra-g);
  transform: scale(1.035);
  position: relative;
  z-index: 2;
}

.coment__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.coment__rot {
  display: block;
  margin-bottom: 8px;
  color: var(--cinza);
  font-family: var(--fonte-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sem movimento, o mural vira mural mesmo: cresce, mostra tudo e a cópia sai de
   cena. Nada fica escondido atrás de altura fixa. */
@media (prefers-reduced-motion: reduce) {
  .coment__mural {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .coment__fita { animation: none; }
  .coment__card[aria-hidden] { display: none; }
}

/* A coluna que sai não leva conteúdo junto: os prints são distribuídos
   alternados, então a coluna que fica tem os quatro produtos do mesmo jeito. */
@media (max-width: 991px) {
  .coment__mural {
    grid-template-columns: repeat(2, 1fr);
    height: 560px;
    gap: 12px;
  }

  .coment__col:nth-child(3) { display: none; }
  .coment__card { margin-bottom: 12px; }
}

@media (max-width: 620px) {
  .coment__mural {
    grid-template-columns: 1fr;
    height: 480px;
  }

  .coment__col:nth-child(2) { display: none; }
}

/* A LUPA DO MURAL. O nome tinha que ser deste bloco: `.lupa` sozinha JÁ EXISTE
   no site, é a caixa de busca do cabeçalho, e o <dialog> herdou o
   `position: absolute` e o `display: flex` dela. Resultado calado: a lupa abria
   como um retângulo branco estreito, fora da tela, com o X solto sobre o hero.
   Classe nova em site que já tem CSS: procure o nome antes de usar.

   <dialog> nativo: <dialog> nativo: o fundo escurecido é ::backdrop, e Esc e o
   foco preso são do navegador. */
.coment__lupa {
  width: fit-content;
  max-width: 96vw;
  padding: 12px;
  border: 0;
  border-radius: var(--raio-g);
  background: var(--branco);
  box-shadow: 0 30px 80px rgba(4, 23, 26, .45);
  overflow: visible;
}

.coment__lupa::backdrop { background: rgba(var(--azul-esc-rgb), .84); }

.coment__lupa img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--raio);
}

/* Fixo na tela pela mesma razão das setas: preso na caixa, ele mudava de lugar
   a cada print de altura diferente. */
.coment__lupa-fecha {
  position: fixed;
  top: 26px;
  right: 40px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--branco);
  cursor: pointer;
  transition: background var(--t-ui) ease;
}

.coment__lupa-fecha:hover { background: var(--laranja-esc); }
.coment__lupa-fecha svg { width: 20px; height: 20px; }

/* Presas na TELA (position: fixed dentro do dialog modal se resolve pela janela),
   e não na caixa da lupa: a lupa é `width: fit-content` e cada print tem uma
   altura, então ancorar nela fazia a seta dançar de lugar a cada avaliação.
   Fora do print, sobre o fundo escurecido: por cima da imagem elas tapariam
   justamente o canto onde mora a nota e a data. */
.coment__lupa-anda {
  position: fixed;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul);
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 6px 20px rgba(4, 23, 26, .35);
  transition:
    background var(--t-ui) ease,
    color var(--t-ui) ease;
}

.coment__lupa-anda:hover { background: var(--laranja); color: var(--branco); }
.coment__lupa-anda svg { width: 22px; height: 22px; }
.coment__lupa-anda--esq { left: 40px; }
.coment__lupa-anda--dir { right: 40px; }

.coment__lupa-conta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 26px;
  margin: 0;
  color: rgba(var(--branco-rgb), .8);
  font-family: var(--fonte-display);
  font-size: 13px;
  letter-spacing: .06em;
  text-align: center;
}

/* Na tela pequena não existe "fora do print": tudo que estava do lado de fora
   entra pra dentro, senão some da janela. */
@media (max-width: 900px) {
  .coment__lupa-anda--esq { left: 10px; }
  .coment__lupa-anda--dir { right: 10px; }
}

@media (max-width: 620px) {
  .coment__lupa-fecha {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }

  .coment__lupa-anda {
    width: 44px;
    height: 44px;
  }
}

/* =========================================================================
   27. FILEIRA DE SETORES (pé do mosaico de aplicações)
   A lista que o cliente escreveu no briefing. É informação de abrangência, não
   bloco de venda: por isso vive como fileira de etiquetas e não como seção.
   ========================================================================= */

.setores {
  margin-top: 55px;
  padding-top: 40px;
  border-top: 1px solid var(--linha);
  text-align: center;
}

.setores__titulo {
  margin: 0 0 20px;
  color: var(--cinza);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.setores__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.setores__lista li {
  padding: 9px 18px;
  border: 1px solid var(--linha);
  border-radius: 100px;
  background: var(--branco);
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
}

/* =========================================================================
   28. O CASO (dentro do bloco de custo) e o pé da estrutura
   O caso é a tese acontecendo com gente de verdade. Formato de citação, com o
   filete laranja na lateral: lê como relato, não como mais um cartão de venda.
   ========================================================================= */

.caso {
  max-width: 940px;
  padding: 34px 40px 30px;
  margin: 40px auto 0;
  border-left: 5px solid var(--laranja);
  border-radius: 0 var(--raio-g) var(--raio-g) 0;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.caso__rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--laranja-esc);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

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

.caso__texto { margin: 0; }
.caso__texto p { margin: 0 0 14px; }
.caso__texto p:last-child { margin-bottom: 0; }

.caso__pe {
  margin: 18px 0 0;
  color: var(--cinza);
  font-size: 15px;
  font-style: italic;
}

.estrutura__pe {
  max-width: 780px;
  margin: 40px auto 0;
  color: rgba(var(--branco-rgb), .78);
  text-align: center;
}

@media (max-width: 620px) {
  .caso { padding: 26px 22px 24px; }
}

/* =========================================================================
   29. ÁREA DE DOWNLOADS
   Lista de arquivo, não grade de card: o visitante aqui está procurando um item
   específico pra anexar num processo de compra, e lista se varre mais rápido.
   ========================================================================= */

.baixar__grupo + .baixar__grupo { margin-top: 65px; }

/* Título de GRUPO, não de seção: o da seção já é o da faixa de topo, e dois
   títulos de 48px seguidos deixam a página com duas aberturas. */
.baixar__grupo .sec-titulo__texto { font-size: 30px; line-height: 38px; }

.baixar__lista {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.baixar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  transition:
    border-color var(--t-ui) ease,
    box-shadow var(--t-ui) ease;
}

.baixar:hover {
  border-color: var(--laranja);
  box-shadow: var(--sombra);
}

.baixar__ico {
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--raio);
  background: var(--claro);
  color: var(--laranja);
}

.baixar__ico svg { width: 26px; height: 26px; }
.baixar__txt { flex: 1 1 auto; }
.baixar__txt h3 { margin: 0 0 4px; font-size: 19px; }

.baixar__txt p {
  margin: 0;
  color: var(--cinza);
  font-size: 14px;
}

.baixar__pe {
  max-width: 720px;
  margin: 60px auto 0;
  color: var(--cinza);
  text-align: center;
}

.baixar__pe .btn { margin-top: 20px; }

.vazio-pag {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.vazio-pag .btn { margin-top: 20px; }

@media (max-width: 620px) {
  .baixar {
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
  }

  .baixar__txt { flex: 1 1 60%; }
  /* O botão ocupa a linha toda embaixo: espremido ao lado do texto, ele fica com
     30px de alvo e o dedo erra. */
  .baixar .btn { flex: 1 0 100%; text-align: center; }
}

/* =========================================================================
   30. CELULAR E TABLET — ACERTO DE 14/08/2026
   Rodada pedida pelo Darlei ("analise todas as telas no mobile e reorganize").
   Cada bloco existe por um defeito MEDIDO no Chrome a 360, 390 e 768px, e o que
   foi medido está escrito junto. Mora no FIM do arquivo de propósito: é
   correção de regra escrita antes, e empatando na especificidade ganha a última.
   ========================================================================= */

@media (max-width: 991px) {

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

  /* BARRA MAIS BAIXA, a pedido do Darlei. 90px de cabeçalho num aparelho de 844
     é um décimo da tela gasto em logotipo antes de o site começar. 70 = os 42
     do logotipo com 14 de respiro em cima e embaixo. Basta trocar aqui: o
     min-height da faixa, a altura do link e as duas cunhas leem desta variável. */
  .cabeca { --altura: 70px; }

  /* A diagonal da chapa já saiu nesta largura (o border-right do ::before é
     zero), então os 56px que ela reservava viraram vão morto: sobrava um buraco
     do tamanho do próprio logotipo entre ele e o hambúrguer. */
  .cabeca__marca {
    padding-right: 26px;
    margin-right: 0;
  }

  /* Menor no celular, a pedido do Darlei. Pela ALTURA, nunca pela largura: é a
     largura que sai da proporção, e cravá-la foi o que achatou a marca. */
  .cabeca__marca img { max-height: 42px; }

  /* O filete laranja perde a diagonal junto com a chapa. Com a chapa reta e ele
     inclinado, o que ficava na tela era um triângulo laranja solto no pé do
     bloco; reto, ele vira o fio de 6px na borda, que é o que a peça tem de cor
     da casa nesta largura. */
  .cabeca__marca::after { border-right-width: 0; }

  /* O align-items: stretch do pai esticava o hambúrguer para os 90px da barra e
     o padding punha mais 20: 110px de botão numa faixa de 90, ou seja, 10px
     dele para FORA em cima e embaixo, pegando clique dentro do hero. Centrado,
     é um quadrado de 50px — alvo de sobra e nada saindo da barra. */
  .cabeca__menu {
    display: block;
    align-self: center;
    padding: 12px;
    margin: 0 -12px 0 0;
  }

  /* O botão de orçamento só existe de 621 a 991 (abaixo disso ele sai, e quem
     faz o serviço é a gaveta e o flutuante). Ele é a última chapa inclinada de
     uma faixa que nesta largura não existe mais: sem o menu, sobrava logotipo,
     um slab laranja gigante de canto cortado e o hambúrguer grudado nele. Aqui
     ele volta a ser botão, com a caixa e o raio da casa. */
  .cabeca__acoes {
    align-items: center;
    gap: 14px;
    margin-left: 0;
  }

  .cabeca__btn {
    height: 46px;
    padding: 0 20px;
    border-radius: var(--raio);
    clip-path: none;
    font-size: 13px;
  }

  .cabeca__btn::after { display: none; }

  /* --- Flutuantes -------------------------------------------------------
     A pastilha do "Topo" tinha 60 de largura por quase 200 de altura, parada no
     meio da borda direita. Medido: cobria o segundo botão do hero, o fim do
     parágrafo do simulador e a foto de produto da lista rápida. Vira botão
     redondo do tamanho do vizinho, empilhado com ele no canto — que é onde o
     dedo procura — e some enquanto a página está no topo, onde "voltar ao topo"
     não quer dizer nada. */
  .topo-volta {
    right: 16px;
    bottom: 78px;              /* 16 do zap + 50 da altura dele + 12 de respiro */
    width: 50px;
    height: 50px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: opacity var(--t-ui) ease, visibility var(--t-ui) ease;
  }

  .topo-volta__trilho,
  .topo-volta__txt { display: none; }

  .topo-volta__seta { display: flex; }
  .topo-volta__seta svg { width: 22px; height: 22px; }

  /* Nasce VISÍVEL e quem esconde é o JS: sem script o botão continua na tela,
     que é o estado seguro. */
  .topo-volta--no-topo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .zap-flutua { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .zap-flutua svg { width: 25px; height: 25px; }

  /* --- Abas de categoria (bloco "linhas") -------------------------------
     Com auto-fit de 130px o chip ficava com 110 de conteúdo e "Acondicionamento"
     mede 130: a palavra saía pela borda e o overflow: hidden do chip COMIA as
     últimas letras. Na tela lia "Acondicionamer", sem erro em lugar nenhum.
     Chip mais largo resolve o caso de hoje; o break-word é a rede para o nome
     de categoria que o cliente cadastrar amanhã.
     O flex é a outra metade: <button> centra o conteúdo na vertical por conta
     própria, então numa fileira da altura do chip mais alto o de rótulo curto
     descia o ícone, e a linha de ícones saía em degraus. */
  .abas__botoes { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  .abas__btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow-wrap: break-word;
  }

  /* --- Alvo de toque ----------------------------------------------------
     Medido: 27px de altura no nome do produto do catálogo e 26px no telefone e
     no e-mail da caixa escura de orçamento. O link funciona e errar nele é
     fácil. Mesma receita das outras listas — o padding cresce a área que aceita
     o dedo e o margin negativo devolve o espaço, então nada se move na tela. */
  .prod__corpo h3 a,
  .orcamento__contatos a,
  .escolher__item-nome a,
  .ficha-empresa dd a,
  .politica__ficha dd a,
  .contato__lista a { padding-block: 9px; margin-block: -9px; }

  /* Os dois `dd a` acima são inline: sem inline-block o padding cresce a área de
     clique mas o alvo continua com 17px de caixa medida. */
  .ficha-empresa dd a,
  .politica__ficha dd a { display: inline-block; }

  /* O HERO TINHA 108px DE BRANCO NO PÉ, no tablet, e ninguém tinha visto.
     No desktop o quadro do carrossel é `position: absolute; inset: 0`, ou seja,
     ele acompanha os 700px do palco. Nesta largura o quadro vira `relative`
     (para os empilhados saírem do fluxo) e passa a ter a altura do CONTEÚDO,
     452px — mas o palco continua com `min-height: 560`. A diferença é branco:
     a FOTO acabava e a seção continuava, com uma emenda visível no meio do
     hero. Medido a 768: foto até y=522, hero até 630.
     O mínimo tem que valer para os dois, senão um estica e o outro não. */
  .hero__quadro { min-height: 560px; }

  /* E era nesse branco que o SELO caía: ancorado no pé do HERO (bottom: 24), a
     metade de baixo dele ficava fora da foto, com "de mercado" em branco sobre
     branco. Com o quadro esticado ele volta a pousar sobre a foto.
     O disco cresceu junto: 92px para três linhas deixava "de mercado" com 9px,
     menor que o menor texto do site inteiro, e essa linha é justamente o que
     separa tempo de MERCADO de tempo de fábrica (correção do cliente no
     briefing). Aumentar só o disco deixaria o texto boiando, então tipo e disco
     sobem juntos, como já é no desktop. */
  .hero__selo { width: 132px; height: 132px; }
  .hero__selo strong { font-size: 32px; }
  .hero__selo span { font-size: 13px; }
  .hero__selo em { font-size: 11px; }

  /* --- Gaveta do menu ---------------------------------------------------
     Eram doze linhas iguais de 45px, uma atrás da outra: catálogo, lista rápida,
     sete categorias, simulador, empresa, contato. Mesmo peso, mesma distância,
     sem dizer onde um assunto acaba e o outro começa. Foi o "itens muito
     próximos" que o Darlei apontou, e o aperto é de LEITURA, não de alvo: os
     45px já passavam no dedo. Agora são três grupos com respiro entre eles, e as
     categorias ficam debaixo de um rótulo, recuadas, como filhas. */
  .menu-cel__painel { gap: 0; padding: 22px 20px 26px; }

  .busca-cel {
    margin-top: 18px;
    margin-bottom: 18px;
    /* O raio da casa é 5 (peça) e 10 (bloco). A pílula de 999 com a bolinha
       laranja dentro era a única forma dessas no site e lia como coisa colada
       de outro lugar. */
    padding: 5px 5px 5px 16px;
    border-radius: var(--raio-g);
  }

  /* O iOS dá ZOOM na página ao focar campo com fonte abaixo de 16px, e não
     desfaz depois: o visitante fica com o site torto no meio da busca. */
  .busca-cel input { font-size: 16px; }

  .busca-cel button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    /* Raio MENOR que o da caixa: igual nos dois, o botão parece estar saindo
       pela borda. */
    border-radius: var(--raio);
  }

  .menu-cel__lista a { padding: 13px 2px; }
  .menu-cel__filho a { padding-left: 12px; }

  /* Rótulo do grupo. Não é link, não é linha da lista, não tem filete. */
  .menu-cel__rot {
    padding: 20px 2px 8px;
    color: var(--cinza);
    font-family: var(--fonte-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* O primeiro item DEPOIS das categorias fecha o grupo: sem este respiro,
     "Simulador de fita" encosta em "Máquinas e Equipamentos" e lê como a oitava
     categoria. Sem classe nova no HTML: quem diz isso é a vizinhança. */
  .menu-cel__filho + li > a { margin-top: 16px; }

  /* O PÉ COLA NO FUNDO DA GAVETA. Medido: com o logo, a busca, o rótulo e as
     treze linhas, o conteúdo dá 1026px e a gaveta tem 844 no iPhone de tela
     grande (menos ainda com a barra de endereço na tela). O botão de orçamento
     caía em 873, ou seja, FORA da tela em todo aparelho, e gaveta que rola não
     avisa que rola: o CTA principal do menu simplesmente não existia para quem
     não arrastasse. Colado, ele está sempre lá e a lista corre por trás.
     O fundo branco é obrigatório: sem ele o texto da lista passa por baixo e
     lê como sujeira. */
  .menu-cel__pe {
    position: sticky;
    bottom: -26px;                    /* o padding-bottom do painel */
    padding: 16px 0 26px;
    background: var(--branco);
    box-shadow: 0 -1px 0 var(--linha);
  }
}

@media (max-width: 620px) {

  /* --- Respiro lateral ---------------------------------------------------
     15px de recuo num aparelho de 390 deixa o texto encostado na beira da tela
     e o polegar cobre a primeira letra. 20 é o mínimo confortável. Sai daqui e
     vale em todo container, em toda página, sem tocar em seção nenhuma. */
  :root { --gutter: 20px; }

  /* --- Hero --------------------------------------------------------------
     Duas colunas em 390px dão 170px por atributo: "ENTREGA RÁPIDA PARA TODO O
     BRASIL" quebrava em três linhas ao lado de uma de duas, os quatro ícones
     paravam em quatro alturas diferentes e a fileira lia como coisa quebrada.
     Numa coluna, cada atributo é uma linha de leitura. */
  .hero__atributos { grid-template-columns: 1fr; gap: 13px; }

  /* O ícone acompanha a PRIMEIRA linha do rótulo, não o meio do bloco: com
     align-items: center, rótulo de duas linhas deixava o ícone flutuando no vão
     entre elas. */
  .hero__atributos li { align-items: flex-start; }
  .hero__atributos strong { font-size: 14px; line-height: 20px; }

  /* Acompanha o `min-height: 0` que o palco já tem nesta largura: aqui o hero é
     do tamanho do conteúdo, e o conteúdo passa de 660px. Piso de 560 seria
     buraco no pé de novo, agora do outro lado. */
  .hero__quadro { min-height: 0; }

  /* A ETIQUETA DEITADA DO CELULAR TEM QUE SER REAFIRMADA AQUI. No celular o selo
     não é disco: é uma etiqueta baixa, colada no alto do quadro, e o bloco de
     620 que faz isso mora ANTES do de 991 no arquivo. Empatando na
     especificidade ganha o último, então o disco de 132px e os tipos maiores do
     tablet venciam e o celular ficava com um QUADRADO de 132px por cima do
     título. É a armadilha de sempre neste projeto: regra genérica dentro de
     media query atropela o modificador escrito antes dela. */
  .hero__selo { width: auto; height: auto; }
  .hero__selo strong { font-size: 20px; }
  .hero__selo span { font-size: 11px; }

  /* 11 e 12px eram os dois menores textos da primeira dobra, e um deles é a
     frase de apoio do botão principal ("manda a foto da caixa e o volume"), ou
     seja, a instrução que faz o visitante clicar. Miúdo demais para a tela em
     que ele mais é lido. */
  .hero__selo span { font-size: 12px; }
  .btn--alto em { font-size: 13px; }

  /* --- Faixa de números --------------------------------------------------
     Centralizada, cada linha começava num x diferente: medido 76, 43, 42 e 91.
     São quatro ícones de desenhos diferentes dentro de uma caixa que se centra
     sozinha, e o olho lê quatro recuos aleatórios. Alinhada à esquerda, com a
     coluna do ícone em medida fixa, a faixa vira lista e os números caem todos
     na mesma vertical. */
  .numeros__grade { gap: 26px; }

  .numero {
    justify-content: flex-start;
    gap: 16px;
    padding-inline: 0;
    text-align: left;
  }

  .numero__ico { flex: 0 0 44px; justify-content: center; }
  .numero__ico svg { width: 40px; height: 40px; }

  /* --- Cartões de custo --------------------------------------------------
     As duas medidas mínimas existem para alinhar título e filete entre cartões
     VIZINHOS numa fileira. Numa coluna não há vizinho: viram 28px de vão morto
     entre o título e o texto, e mais um no pé do cartão. */
  .custo__card h3 { min-height: 0; }
  .custo__vira { min-height: 0; }
  .custo__card { padding: 26px 22px 24px; }
  .custo__ico { margin-bottom: 16px; }
  .custo__card p:not(.custo__vira) { margin-bottom: 20px; }

  /* Duas colunas fixas, não auto-fit: em 360px o minmax de 160 só caberia uma
     por linha e as sete categorias virariam sete fileiras. */
  .abas__botoes { grid-template-columns: repeat(2, 1fr); }

  /* --- RECUO DOS BOTÕES ---------------------------------------------------
     26px de cada lado é o recuo de uma barra de 1350; num aparelho de 360 ele
     come 52 dos 276 que o botão tem, e aí rótulo comprido QUEBRA EM DUAS LINHAS
     de 53px cada — 108px de botão com o texto boiando dentro. Aconteceu em dois
     lugares medidos: "Receber a arte no WhatsApp" no simulador e "Ver o catálogo
     com ficha" na lista rápida.
     `padding-inline` e NÃO o atalho `padding`: o atalho levaria junto o recuo
     VERTICAL do .btn--alto (o botão de duas linhas do hero) e o achataria, que é
     armadilha já paga neste projeto. Ainda assim os dois modificadores são
     reafirmados abaixo, porque esta regra vem depois deles no arquivo. */
  .btn { padding-inline: 18px; }
  .btn--alto { padding: 14px 18px; }
  .btn--peq { padding-inline: 22px; }
  /* O de largura cheia aperta mais: ele já ocupa a linha e o rótulo é centrado. */
  .btn--bloco { padding-inline: 14px; }

  /* 38px de recuo de cada lado numa tela de 360 deixavam 244px de vão, e o
     rótulo "Ver o catálogo com ficha" pede 252: o botão saía com DUAS linhas de
     53px cada, 108px de altura, com o texto boiando dentro. O recuo menor sozinho
     deixava a conta em cima do limite (276 de vão para 276 de rótulo), então os
     dois botões passam a ocupar a linha inteira, empilhados — que é como os
     outros pares de CTA do site já se comportam nesta largura. */
  .lr__acao { padding: 26px 22px; }
  /* A caixa dos botões é filha de um flex column com align-items: flex-start,
     ou seja, ela encolhe até a largura do conteúdo: sem esticar ela, o
     `width: 100%` do botão era 100% de uma caixa do tamanho do próprio botão
     quebrado, e a conta girava em falso. */
  .lr__botoes { align-self: stretch; }
  .lr__acao .btn { width: 100%; text-align: center; }
  .lr__acao .btn + .btn { margin-top: 12px; }

  /* O campo da busca tinha a altura da própria linha de texto, 26px: é o campo
     principal da página de resultado e o dedo erra nele. */
  .busca-form__campo { height: 44px; }
}

/* Em tela de toque não existe hover, e a seta do card de produto só aparecia no
   hover: o cartão ficava sem nenhum sinal de que é clicável. Mesma correção que
   o mosaico de aplicações já tinha. */
@media (hover: none) {
  .prod__seta { opacity: 1; transform: none; }
}

/* =========================================================================
   31. IDIOMAS
   Bandeirinhas do cabeçalho e faixa de sugestão. Bloco novo, escrito depois do
   30 de propósito: o 30 é o acerto de celular e não toca em nada daqui.
   ========================================================================= */

/* --- As bandeirinhas ---------------------------------------------------- */

.idiomas ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* position: relative por causa do filete do ::after do item aceso. */
.idiomas__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: var(--raio);
  font: 600 12px/1 var(--fonte-display);
  letter-spacing: .04em;
  color: rgba(var(--branco-rgb), .75);
  transition: color .2s ease, background .2s ease;
}

/* A regra global põe 1em x 1em em todo svg dentro do cabeçalho, e bandeira é
   3:2: com 1em nos dois lados o Brasil sai quadrado. Medida explícita aqui. */
.idiomas__flag { display: flex; }
.idiomas__flag svg {
  display: block;
  width: 20px;
  height: 13px;
  border-radius: 1px;
}

.idiomas__item:hover { color: var(--branco); background: rgba(var(--branco-rgb), .09); }

/* O ACESO NÃO É PREENCHIDO DE LARANJA. A regra da casa é que o laranja é o que
   se move e o que se clica, nunca o que preenche: chapa laranja aqui competiria
   com o botão de orçamento, que é o único laranja que deveria puxar o olho no
   cabeçalho. Filete embaixo, branco por cima, e pronto. */
.idiomas__item.esta { color: var(--branco); }
.idiomas__item.esta::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 2px;
  background: var(--laranja);
}

/* Empurra bandeirinhas E redes para a direita de uma vez. A barra é
   space-between com três filhos, e sem isto o trocador ficaria centralizado
   entre o telefone e o Instagram, boiando no meio da faixa. Margem automática
   come o espaço livre antes de o space-between distribuir. */
.topo-barra .idiomas { margin-left: auto; }

/* --- Na gaveta do celular ----------------------------------------------- */
/*
   Fundo claro aqui, então a cor se inverte. O alvo tem 44px de altura porque no
   celular quem clica é o dedo, e três alvos de 24px lado a lado é onde se erra
   o idioma sem querer, que é justamente o medo que originou este componente.
*/
.idiomas--cel ul { gap: 8px; }

.idiomas--cel .idiomas__item {
  min-height: 44px;
  padding-inline: 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--cinza);
  font-size: 13px;
}

.idiomas--cel .idiomas__item:hover { background: var(--claro); color: var(--azul); }
.idiomas--cel .idiomas__item.esta { color: var(--azul); border-color: var(--laranja); background: var(--branco); }
.idiomas--cel .idiomas__item.esta::after { left: 13px; right: 13px; bottom: 6px; }

/* --- Faixa de sugestão de idioma ---------------------------------------- */
/*
   Aparece só para quem nunca escolheu e cujo navegador pede outro idioma. Fica
   no FLUXO, logo abaixo do cabeçalho, e não flutuando: os dois cantos de baixo
   já são do botão do WhatsApp e da caixa de cookies.
*/
.fala {
  background: var(--claro);
  border-bottom: 1px solid var(--linha);
}

.fala__dentro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-block: 14px;
}

/* A faixa vive fora de header/main/footer, então a regra global de 1em não
   alcança o svg dela: sem medida explícita o navegador desenha 300x150. */
.fala__ico { display: flex; }
.fala__ico svg {
  display: block;
  width: 26px;
  height: 17px;
  border-radius: 2px;
}

.fala__texto {
  flex: 1 1 260px;
  margin: 0;
  color: var(--azul);
  font-size: 15px;
  line-height: 24px;
}

.fala__fica {
  color: var(--cinza);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fala__fica:hover { color: var(--laranja-esc); }

@media (max-width: 620px) {
  /* Empilhado, e o botão ocupando a linha: com tudo lado a lado numa tela de
     390 o "Ver em inglês" saía com 70px e o rótulo quebrava em duas linhas. */
  .fala__dentro { gap: 12px; }
  .fala__texto { flex-basis: 100%; }
  .fala__dentro .btn { width: 100%; }
}