/* ==========================================================================
   BRASKIT | folha de estilo do site
   Tema da marca, parallax, animacoes e componentes proprios.

   Arquitetura da cascata: css/tw.css traz os utilitarios compilados no build
   (dentro de @layer). Este arquivo e carregado depois e fica fora de @layer,
   portanto as regras daqui vencem as de la, que e o comportamento desejado
   para tema e componentes. Estilos de ELEMENTO ficam dentro de @layer base
   para nao brigarem com os utilitarios.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. RESERVA METRICA DAS WEBFONTS

   A pilha antiga era "Barlow Condensed", "Arial Narrow", system-ui. Em Linux
   e Android nao existe Arial Narrow: caia em system-ui, cerca de 35% mais
   larga. Com display=swap isso acontecia em TODA primeira visita, antes de a
   webfont chegar -- o titulo quebrava em mais linhas, o bloco mudava de altura
   e o layout pulava.

   As faces abaixo tomam Arial emprestada e a reescalam para as metricas
   medidas de cada webfont, de modo que o texto ocupe a mesma largura antes e
   depois do swap. Os numeros foram MEDIDOS com as strings reais do site, em
   caixa alta (que e como os titulos aparecem), por build/metricas-fonte.mjs.
   Nao edite a mao: rode o script de novo.

   Onde nao houver Arial, o src falha, a face e ignorada e a pilha segue para
   o proximo nome -- sem quebrar nada.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Barlow Condensed Reserva";
  font-style: normal;
  font-weight: 600;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 65.44%;
  ascent-override: 152.81%;
  descent-override: 30.56%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Barlow Condensed Reserva";
  font-style: normal;
  font-weight: 700;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 66.89%;
  ascent-override: 149.51%;
  descent-override: 29.90%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Reserva";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 105.80%;
  ascent-override: 91.59%;
  descent-override: 22.78%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Reserva";
  font-style: normal;
  font-weight: 600;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.11%;
  ascent-override: 95.83%;
  descent-override: 23.83%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. TOKENS DA MARCA
   Espelham o tema do build do Tailwind e ficam disponiveis como var() para
   o CSS proprio.
   -------------------------------------------------------------------------- */
:root {
  --petroleo-950: #062226;
  --petroleo-900: #0b3136;
  --petroleo-800: #0f3b3f;
  --petroleo-700: #155e63;
  --hazmat-500: #56980b;
  --hazmat-400: #6cbe0e;
  --alerta-400: #ffc300;
  --perigo-500: #e2231a;
  --neutro-50: #f6f8f8;
  --neutro-900: #101617;

  /* Cor exata amostrada do logo original da empresa */
  --braskit-logo: #0d2f39;

  --fonte-titulo: "Barlow Condensed", "Barlow Condensed Reserva", system-ui, sans-serif;
  --fonte-corpo: "Inter", "Inter Reserva", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ------------------------------------------------------------------
     ESCALA TIPOGRAFICA
     Sete degraus, todos usados. O que faltava nao era tamanho grande: era
     contraste no meio da escala. Antes, o paragrafo de abertura de secao e a
     descricao de card viviam os dois entre 0,875 e 1rem -- lado a lado, sem
     hierarquia nenhuma. Eram 42 font-size soltos em 16 valores distintos,
     nenhum ligado a token.
     ------------------------------------------------------------------ */
  --txt-display: clamp(2.75rem, 7vw, 5.5rem);
  --txt-titulo:  clamp(2rem, 4.5vw, 3.5rem);
  --txt-sub:     clamp(1.3rem, 2.1vw, 1.7rem);
  --txt-lead:    clamp(1.0625rem, 0.85rem + 0.7vw, 1.25rem);
  --txt-corpo:   1.0625rem;
  --txt-apoio:   0.9375rem;
  --txt-micro:   0.75rem;

  /* Largura de leitura. 34rem da cerca de 68 caracteres em Inter 17px --
     antes os paragrafos atravessavam a coluna inteira. */
  --medida: 34rem;

  /* Tres valores de tracking no lugar dos oito que existiam. */
  --track-olho:   0.18em;
  --track-titulo: -0.02em;
  --track-rotulo: 0.1em;

  /* ------------------------------------------------------------------
     ESPACO
     Escala unica, e tres densidades de secao: nem toda secao merece o mesmo
     padding-block. Antes eram oito faixas com exatamente o mesmo ritmo.
     ------------------------------------------------------------------ */
  --esp-2xs: 0.375rem;
  --esp-xs:  0.625rem;
  --esp-s:   1rem;
  --esp-m:   1.5rem;
  --esp-l:   2.5rem;
  --esp-xl:  4rem;
  --esp-2xl: 6rem;

  /* ------------------------------------------------------------------
     ESTRUTURA
     Borda, separador e fundo de icone. Antes tudo isso era o acento, o que
     tirava dele qualquer poder de dizer "aqui".
     ------------------------------------------------------------------ */
  --estrutura-escura: rgb(255 255 255 / 0.1);
  --estrutura-clara:  rgb(16 22 23 / 0.12);
  --estrutura-forte:  var(--petroleo-700);

  --radius-box: 1rem;
  --radius-field: 0.5rem;

  --altura-header: 88px;

  /* Deslocamento lateral do scroll reveal. Precisa ser MENOR que o menor
     padding-inline do .container-braskit (1.25rem), senao o elemento passa da
     viewport enquanto ainda nao foi revelado. Como nao existe mais
     body{overflow-x:hidden}, isso viraria barra horizontal de verdade --
     era exatamente a causa do estouro de 12px em 390px e de 1px em 768px. */
  --reveal-lateral: 1rem;

  /* PAPEIS DO ACENTO
     O verde #56980b da marca serve como FUNDO: com texto petroleo em cima da
     4,66:1 e passa AA (com texto branco daria 3,56:1 e reprovaria).
     COMO TEXTO ele nao se sustenta em nenhum dos dois lados da pagina --
     3,34:1 sobre --neutro-50 e 3,91:1 sobre --petroleo-900. Por isso o acento
     tem dois tons legiveis, e --acento-legivel aponta para o do contexto:

       claro  #3b6808  ->  6,22:1 sobre --neutro-50
       escuro #61ab0c  ->  4,87:1 sobre --petroleo-900

     Os dois espelham o que o laranja anterior fazia (5,09:1 e 4,88:1), entao
     a hierarquia da pagina nao muda -- so o matiz. */
  --acao-fundo: var(--hazmat-500);
  --acao-texto: var(--petroleo-950);
  --acento-sobre-claro: #3b6808;
  --acento-sobre-escuro: #61ab0c;
  --acento-legivel: var(--acento-sobre-escuro);
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);

  /* Textura de ruido: evita que os fundos escuros fiquem chapados */
  --ruido: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    /* Compensa o header fixo ao pular para uma ancora */
    scroll-padding-top: var(--altura-header);
    -webkit-text-size-adjust: 100%;
  }

  /* Sem overflow-x: hidden aqui, de proposito. O curativo escondia estouro
     real (o reveal lateral e a barra de filtros do catalogo) e teria escondido
     os proximos tambem. Quem precisa recortar, recorta no proprio componente. */
  body {
    background-color: var(--petroleo-950);
    color: var(--neutro-900);
    font-family: var(--fonte-corpo);
    font-size: var(--txt-corpo);
    line-height: 1.7;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: var(--track-titulo);
    text-transform: uppercase;
    /* Distribui as linhas de forma equilibrada em vez de deixar uma palavra
       orfa na ultima -- e reduz o efeito de trocar de fonte no swap. */
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ::selection {
    background: var(--hazmat-500);
    color: #fff;
  }

  :focus-visible {
    outline: 2px solid var(--hazmat-500);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Barra de rolagem discreta, no tom da marca */
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--petroleo-950); }
  ::-webkit-scrollbar-thumb {
    background: var(--petroleo-700);
    border-radius: 99px;
    border: 3px solid var(--petroleo-950);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--estrutura-forte); }
}

/* Impede que a largura total estoure em qualquer breakpoint */
img, svg, video, iframe { max-width: 100%; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA DE APOIO
   -------------------------------------------------------------------------- */
.titulo-secao {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-titulo);
  line-height: 0.95;
  font-size: var(--txt-titulo);
  text-wrap: balance;
}

/* Paragrafo de abertura de secao: sobe um degrau para abrir distancia da
   descricao de card, que desce. E onde nasce a hierarquia. */
.lead {
  font-size: var(--txt-lead);
  line-height: 1.6;
  max-width: var(--medida);
}

/* Largura de leitura em qualquer paragrafo longo. */
.medida { max-width: var(--medida); }

/* O verde da marca so vira texto pelo tom legivel do contexto. A regra vale
   para o olho, para links e para qualquer uso do utilitario -- e nao apenas
   na secao clara, porque sobre petroleo o verde puro tambem reprova. Quem
   pinta FUNDO (bg-hazmat-500) segue com a cor cheia da marca. */
.text-hazmat-500,
.secao-clara .olho {
  color: var(--acento-legivel);
}

/* O hover clareia. Sem isto ele herdaria a regra acima e nada mudaria. */
.text-hazmat-500:hover,
.hover:text-hazmat-400:hover {
  color: var(--hazmat-400);
}

/* Ilhas escuras dentro de uma secao clara -- o cartao de "30+ anos na
   estrada", por exemplo. Ali o fundo nao e claro, entao vale o tom de fundo
   escuro: o tom claro sobre petroleo daria 2,51:1. */
.secao-clara .bg-petroleo-950,
.secao-clara .bg-petroleo-900,
.secao-clara .bg-petroleo-800,
.secao-clara .secao-escura,
.secao-clara .cartao-escuro,
.secao-clara .card-categoria {
  --acento-legivel: var(--acento-sobre-escuro);
}

.secao-clara .card-categoria.card-categoria--acao {
  --acento-legivel: var(--acento-sobre-claro);
}

/* O olho aparece onze vezes entre as duas paginas. No acento, era a maior
   fonte isolada de ruido da paleta: repetia o acento em toda secao sem que
   ele significasse acao, dado ou destaque. Vira neutro, e o losango que o
   acompanha herda a cor por currentColor. */
.olho {
  font-family: var(--fonte-corpo);
  font-size: var(--txt-micro);
  font-weight: 600;
  letter-spacing: var(--track-olho);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
}

.secao-clara .olho { color: rgb(16 22 23 / 0.6); }

/* Numero dos contadores */
.numero-contador {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. LINGUAGEM VISUAL: zebrado, losango de risco, texturas
   -------------------------------------------------------------------------- */

/* Faixa zebrada diagonal (rotulo de carga perigosa), usada como divisor */
.faixa-zebrada {
  height: 6px;
  width: 100%;
  background-image: repeating-linear-gradient(
    45deg,
    var(--alerta-400) 0,
    var(--alerta-400) 14px,
    #111 14px,
    #111 28px
  );
}

.faixa-zebrada-fina { height: 4px; }

/* Losango de risco: quadrado rotacionado, como o rotulo de risco da ONU */
.losango {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

.losango-cheio {
  background: currentColor;
  border-color: currentColor;
}

/* Losango decorativo grande, de fundo. A rotacao fica em rotate, separada de
   transform, porque o parallax escreve em transform e apagaria o giro. */
.losango-deco {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 0.12);
  rotate: 45deg;
  pointer-events: none;
}

/* Textura de ruido sobre fundos escuros */
.textura-ruido::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ruido);
  opacity: 0.035;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Cartao escuro padrao */
/* SERVICO -- bloco editorial, nao cartao.
   Sem caixa, sem raio, sem elevacao: o que marca o bloco e um filete no topo
   que varre a largura no hover, e o numeral da ordem. Era o mesmo desenho dos
   outros cinco componentes; agora e o unico sem contorno. */
.cartao-escuro {
  background: none;
  border: 0;
  border-radius: 0;
  padding-top: var(--esp-l);
  transition: background-color 0.3s ease;
}

.cartao-escuro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 2.5rem;
  background: var(--alerta-400);
  transition: width 0.45s var(--ease-saida);
}

.cartao-escuro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--estrutura-escura);
  z-index: -1;
}

.cartao-escuro:hover::before,
.cartao-escuro:focus-within::before {
  width: 100%;
}

/* O numeral da ordem: era um fantasma em 5% de opacidade no canto. Agora e
   elemento de composicao, alinhado ao filete. */
.servico__numero {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sub);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-rotulo);
  color: var(--alerta-400);
  font-variant-numeric: tabular-nums;
}

/* Icone sem o quadrado arredondado de 3rem que se repetia em tres
   componentes: aqui o traco fica solto, grande e discreto. */
.servico__icone {
  display: block;
  margin-block: var(--esp-l) var(--esp-m);
  color: rgb(255 255 255 / 0.32);
  transition: color 0.3s ease;
}

.cartao-escuro:hover .servico__icone { color: var(--alerta-400); }

.servico__icone svg { width: 2.25rem; height: 2.25rem; }

.servico__titulo {
  margin-bottom: var(--esp-xs);
  font-size: var(--txt-sub);
  color: #fff;
}

.servico__texto {
  flex: 1;
  margin-bottom: var(--esp-l);
  max-width: var(--medida);
  font-size: var(--txt-apoio);
  line-height: 1.65;
  color: rgb(255 255 255 / 0.62);
}

/* --------------------------------------------------------------------------
   5. PROFUNDIDADE 3D
   O palco (.cena-3d) define o ponto de fuga; os filhos com [data-tilt]
   inclinam alguns graus seguindo o mouse, com um brilho que acompanha o
   cursor. O efeito so roda em tela grande, com mouse de verdade e sem
   movimento reduzido (ver js/main.js). No toque nada muda: os cartoes
   mantem o hover padrao.
   -------------------------------------------------------------------------- */
.cena-3d { perspective: 1100px; }

.tilt-3d {
  position: relative;
  transform-style: preserve-3d;
}

.tilt-3d.is-inclinando {
  transition: none;
  will-change: transform;
}

/* Brilho que segue o cursor. As coordenadas chegam por variavel, do JS. */
.tilt-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(
    620px circle at var(--brilho-x, 50%) var(--brilho-y, 50%),
    rgb(255 255 255 / 0.09),
    transparent 46%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .tilt-3d:hover::before { opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. PARALLAX
   Todo o movimento e feito por transform (translate3d) a partir de um unico
   requestAnimationFrame em js/main.js. Nada de background-attachment: fixed,
   que nao funciona no iOS e trava a composicao no Chrome.
   -------------------------------------------------------------------------- */
.palco-parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* As camadas de foto vem dentro de um <picture>, que escolhe o recorte
   vertical no celular. Quem posiciona e a propria <img>, absoluta: o
   <picture> precisa sumir do layout para nao virar item de flex do hero nem
   da faixa. */
.palco-parallax > picture,
.faixa-parallax > picture,
.bandeja__minis picture,
.linha-orcamento picture,
.produto-midia picture {
  display: contents;
}

.camada-parallax {
  position: absolute;
  inset: -12% 0 -12% 0; /* folga vertical para o deslocamento nao revelar borda */
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

/* Faixas parallax intermediarias (secoes full-bleed com frase de impacto) */
.faixa-parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.faixa-parallax__fundo {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  pointer-events: none;
}

/* Veu escuro sobre o fundo da faixa. Garante leitura do texto tanto sobre os
   SVGs quanto sobre as fotos que vao substitui-los. */
.faixa-parallax::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgb(6 34 38 / 0.55),
    rgb(6 34 38 / 0.32) 45%,
    rgb(6 34 38 / 0.62)
  );
  pointer-events: none;
}

/* Elementos com deslocamento sutil, declarados via data-parallax="0.08" */
/* sem will-change: quem promove a camada e o translate3d do parallax */

/* --------------------------------------------------------------------------
   7. SCROLL REVEAL
   O estado e alternado por classe propria (.is-visible), nunca por
   utilitario do Tailwind: este arquivo esta fora de @layer e venceria.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-saida), transform 0.7s var(--ease-saida);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Variantes laterais, para blocos em duas colunas. O valor vem de
   --reveal-lateral justamente para nao ultrapassar o respiro do container:
   ver o comentario do token. */
[data-reveal="esquerda"] { transform: translateX(calc(var(--reveal-lateral) * -1)); }
[data-reveal="direita"]  { transform: translateX(var(--reveal-lateral)); }
[data-reveal="escala"]   { transform: scale(0.94); }

/* --------------------------------------------------------------------------
   8. ANIMACOES
   -------------------------------------------------------------------------- */
@keyframes pulso-suave {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

@keyframes halo-whatsapp {
  0%   { box-shadow: 0 0 0 0 rgb(255 107 0 / 0.55); }
  70%  { box-shadow: 0 0 0 16px rgb(255 107 0 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 107 0 / 0); }
}

@keyframes desce-indicador {
  0%   { transform: translateY(0);    opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes sobe-linha {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

@keyframes brilho-diagonal {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%)  skewX(-18deg); }
}

.ponto-pulsante {
  background: var(--alerta-400);
  animation: pulso-suave 2.4s ease-in-out infinite;
}

.indicador-scroll span {
  animation: desce-indicador 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero-braskit {
  min-height: 100svh;
  background: linear-gradient(180deg, #0a2b32 0%, var(--petroleo-950) 100%);
}

/* HERO NO CELULAR: a foto vira faixa no pe.

   A fonte e 16:9. Numa caixa de 100svh em pe, "cover" mostrava so 31% da
   largura da foto, ampliados -- era por isso que existia um recorte vertical
   9:16 no <picture>, apontando para um arquivo que nunca foi gerado (uma
   requisicao perdida em toda visita mobile, e no hero, que carrega com
   fetchpriority alto).

   Em vez de derivar um recorte 9:16 do panoramico, que viraria um close sem
   composicao, a foto passa a ocupar uma faixa de 34% no pe. Ali a caixa fica
   em 1,44:1 e ela aparece com quase 80% da largura, na proporcao para a qual
   foi enquadrada. O texto ganha petroleo solido atras, que tambem melhora a
   leitura. O <source> orfao foi removido. */
@media (max-width: 767px) {
  .hero-braskit .camada-parallax {
    inset: auto 0 0 0;
    height: 34%;
    object-position: 64% center;
  }

  .hero-braskit > .container-braskit {
    padding-bottom: calc(34svh + var(--esp-l));
  }
}

.titulo-hero {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.92;
}

/* Cada linha do H1 entra de baixo, mascarada, num efeito de revelacao */
.linha-mascara {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.linha-mascara > span {
  display: block;
  animation: sobe-linha 0.9s var(--ease-saida) both;
}

.linha-mascara:nth-child(1) > span { animation-delay: 0.15s; }
.linha-mascara:nth-child(2) > span { animation-delay: 0.28s; }
.linha-mascara:nth-child(3) > span { animation-delay: 0.41s; }

/* --------------------------------------------------------------------------
   10. BOTOES
   -------------------------------------------------------------------------- */

/* Brilho diagonal no hover */
.btn-brilho {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Vence o text-white do utilitario: este arquivo esta fora de @layer. */
  color: var(--acao-texto);
}

.btn-brilho::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 0.28),
    transparent
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}

.btn-brilho:hover::after {
  animation: brilho-diagonal 0.75s ease-out;
}

/* Preenchimento deslizante (botoes com contorno) */
.btn-preenche {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-preenche::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.14);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s var(--ease-saida);
  z-index: -1;
}

.btn-preenche:hover::before { transform: scaleX(1); }
.btn-preenche:hover { border-color: rgb(255 255 255 / 0.55); color: #fff; }

/* --------------------------------------------------------------------------
   11. MARQUEE DE NORMAS (CSS puro, pausa no hover)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  position: relative;
  /* Esmaece as pontas para a faixa nao cortar bruscamente */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__trilho {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee:hover .marquee__trilho { animation-play-state: paused; }

.marquee__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 2rem;
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. CARDS DE PRODUTO: tratamento duotone das fotos
   As fotos originais foram feitas no deposito, com prateleiras e papelao ao
   fundo. Em repouso a foto vira monocromatica na cor da categoria, com
   brilho quente ao centro e vinheta: o fundo some e os 34 cards leem como um
   conjunto so. No hover a foto recupera a cor natural e o cliente ve o
   produto de verdade. Feito com filtros, e nao mix-blend-mode, porque as
   fotos sao escuras e com blend o produto sumia junto com o fundo.
   -------------------------------------------------------------------------- */
/* 3:2, nao 1:1. As 39 fotos sao 730x487, que e 3:2 exato -- o slot quadrado
   jogava fora um terco da largura de cada uma e frequentemente descentrava o
   produto. O chapado atras e neutro da marca, nao a cor da categoria: com as
   fotos de estudio ele quase nao aparece, e so emoldura as duas em retrato,
   que ficam contidas no slot. */
.produto-midia {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--neutro-50);
}

/* O duotone pesado saiu. Ele uniformizava o caos das fotos de estoque, mas
   entregava um catalogo alaranjado onde deveria haver produto: extintor
   vermelho, cone laranja com faixa branca, luva verde e capacete vermelho
   viravam a mesma papa sepia. Fica so uma correcao leve, que iguala o
   tratamento sem apagar a cor real.

   object-fit: contain, e nao cover, porque 730/487 = 1,4990 -- diferenca de
   0,07% para 3:2, invisivel nas 35 fotos em paisagem. Em compensacao as duas
   em retrato (capa-cone e pedestal) aparecem inteiras, contidas no chapado,
   em vez de cortadas na faixa central. */
.produto-foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.94) contrast(1.05) brightness(1.02);
  transition: filter 0.4s ease, transform 0.5s var(--ease-saida);
}

/* Vinheta discreta: tira o aspecto chapado das bordas. Some no hover.

   O veu da cor da categoria saiu daqui. Ele existia para amarrar 34 fundos
   de estoque diferentes -- prateleira, papelao, saco plastico. Agora que as
   fotos vem de estudio, com fundo branco e igual, o veu so tingia esse
   branco: em Sinalizacao o branco puro saia como rgb(237,241,233), e em
   Suportes como cinza azulado. A categoria continua identificada pela
   etiqueta de texto do card. O --cat-cor segue sendo escrito no elemento,
   caso um dia se queira a cor de volta. */
.produto-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(108% 108% at 50% 45%, transparent 58%, rgb(6 34 38 / 0.16) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.produto-card:hover .produto-foto,
.produto-card:focus-within .produto-foto {
  filter: none;
  transform: scale(1.03);
}

.produto-card:hover .produto-midia::after,
.produto-card:focus-within .produto-midia::after {
  opacity: 0.3;
}

/* Na janela de detalhe a foto ja aparece natural: ali o objetivo e examinar
   o produto. */
.produto-midia--natural { background: var(--petroleo-900); }

.produto-midia--natural .produto-foto {
  filter: contrast(1.05) saturate(1.04);
}

/* Na janela a foto ocupa a coluna inteira, sem o quadrado do grid. Regra
   propria porque este arquivo esta fora de @layer e venceria o utilitario. */
@media (min-width: 768px) {
  .produto-midia--natural {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
  }
}

.produto-midia--natural::after {
  background: radial-gradient(105% 105% at 50% 50%, transparent 58%, rgb(6 34 38 / 0.4) 100%);
}

/* Variante usada fora do grid do catalogo (ex.: secao Sobre): mesmo
   tratamento, reagindo ao hover do proprio bloco. */
.produto-midia--descobre:hover .produto-foto,
.produto-midia--descobre:focus-within .produto-foto {
  filter: contrast(1.04) saturate(1.05);
  transform: scale(1.04);
}

.produto-midia--descobre:hover::after,
.produto-midia--descobre:focus-within::after {
  opacity: 0.3;
}

/* Permite proporcoes diferentes do quadrado padrao */
.produto-midia--larga { aspect-ratio: 4 / 3; background: var(--petroleo-950); }

/* Entrada em cascata do grid, reexecutada a cada troca de filtro */
@keyframes entra-card {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.produto-card--entrando {
  animation: entra-card 0.5s var(--ease-saida) both;
}

/* --------------------------------------------------------------------------
   13. MARCA

   Reproducao do logo da empresa, medida no arquivo original (373x373 px):
   "BRAS" com 62,5 px de altura de caixa alta, "KIT" com 40 px na MESMA linha
   de base, e o infinito centrado logo acima do KIT, com 81x36 px e 9 px de
   folga. Dai saem as tres proporcoes abaixo, todas relativas:

     KIT / BRAS          40 / 62,5   = 0,64  -> font-size do .marca-kit
     infinito / KIT      81 / 70     = 1,16  -> largura do .marca-infinito
     folga / caixa alta   9 / 40     = 0,225 -> entra no bottom, ver abaixo

   O que estava errado antes: KIT saia do mesmo tamanho de BRAS e o infinito
   ficava no canto superior direito do bloco inteiro, longe do KIT.

   O bottom de 1,06em vem da metrica da fonte, nao de tentativa e erro. Numa
   caixa inline a altura e ascent+descent (1,2em na Barlow Condensed) e a
   linha de base fica a 1em do topo, entao o topo da caixa alta esta a
   1,2 - 1 + 0,7 = 0,9em do pe da caixa. Somando a folga de 0,225 x 0,7em:
   0,9 + 0,1575 = 1,0575em, arredondado para 1,06em.
   -------------------------------------------------------------------------- */

/* O container alinha pela LINHA DE BASE. Com items-end o KIT, sendo menor,
   afundaria: as caixas tem descidas proporcionais ao tamanho da fonte. */
.marca {
  display: flex;
  align-items: baseline;
}

.marca-kit {
  position: relative;
  font-size: 0.64em;
}

.marca-infinito {
  position: absolute;
  left: 50%;
  bottom: 1.06em;
  width: 116%;
  height: auto;
  transform: translateX(-50%);
  /* O infinito e o UNICO svg do site que precisa passar da caixa do pai: ele
     sobra 8% para cada lado do KIT, como no logo original. Sem isto o
     "img, svg, video, iframe { max-width: 100% }" la de cima corta os 116%
     em 100% e o infinito fica exatamente da largura do KIT, sem sobra. */
  max-width: none;
}

/* --------------------------------------------------------------------------
   14. HEADER STICKY
   -------------------------------------------------------------------------- */
.header-braskit {
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    backdrop-filter 0.3s ease, padding 0.3s ease;
}

.header-braskit.is-fixo {
  background-color: color-mix(in srgb, var(--petroleo-900) 95%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 34px -18px rgb(0 0 0 / 0.9);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}

/* Sublinhado que cresce a partir da esquerda nos links da navegacao */
.link-nav {
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.25s ease;
}

.link-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease-saida);
}

.link-nav:hover::after,
.link-nav:focus-visible::after,
.link-nav.is-ativo::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   15. MENU MOBILE (tela cheia)
   -------------------------------------------------------------------------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  /* Abaixo do header (z-80): o botao de fechar vive dentro do header e
     precisa continuar visivel e clicavel com o menu aberto. */
  z-index: 75;
  background: linear-gradient(160deg, var(--petroleo-900) 0%, var(--petroleo-950) 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-saida),
    visibility 0.35s;
}

.menu-mobile.is-aberto {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu-mobile__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-saida), transform 0.45s var(--ease-saida);
}

.menu-mobile.is-aberto .menu-mobile__item {
  opacity: 1;
  transform: none;
}

/* Cascata dos itens do menu */
.menu-mobile.is-aberto .menu-mobile__item:nth-child(1) { transition-delay: 0.10s; }
.menu-mobile.is-aberto .menu-mobile__item:nth-child(2) { transition-delay: 0.16s; }
.menu-mobile.is-aberto .menu-mobile__item:nth-child(3) { transition-delay: 0.22s; }
.menu-mobile.is-aberto .menu-mobile__item:nth-child(4) { transition-delay: 0.28s; }
.menu-mobile.is-aberto .menu-mobile__item:nth-child(5) { transition-delay: 0.34s; }
.menu-mobile.is-aberto .menu-mobile__item:nth-child(6) { transition-delay: 0.40s; }
.menu-mobile.is-aberto .menu-mobile__item:nth-child(7) { transition-delay: 0.46s; }

/* Trava a rolagem do fundo com o menu aberto */
body.sem-rolagem { overflow: hidden; }

/* Icone hamburguer que vira X */
.hamburguer span {
  display: block;
  height: 2px;
  width: 26px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.32s var(--ease-saida), opacity 0.2s ease;
}

.hamburguer span + span { margin-top: 6px; }
.hamburguer.is-ativo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburguer.is-ativo span:nth-child(2) { opacity: 0; }
.hamburguer.is-ativo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   16. ELEMENTOS FLUTUANTES E AVISOS
   -------------------------------------------------------------------------- */

/* Voltar ao topo */
.btn-topo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-saida), visibility 0.3s;
}

.btn-topo.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* WhatsApp flutuante */
.btn-whatsapp { animation: halo-whatsapp 2.8s ease-out infinite; }
.btn-whatsapp:hover { animation-play-state: paused; }

/* Avisos do formulario */
.aviso-area {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(92vw, 22rem);
  pointer-events: none;
}

.aviso {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5);
  animation: aviso-entra 0.35s var(--ease-saida);
}

.aviso--ok   { background: #0f7a3d; }
.aviso--erro { background: var(--perigo-500); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(10px); }
}

/* --------------------------------------------------------------------------
   17. FAQ (details nativo, sem framework)
   -------------------------------------------------------------------------- */
/* FAQ -- documento, nao cartao.
   Sem caixa e sem raio: so um fio no topo de cada pergunta, como um sumario.
   Aberto, ganha um fio amarelo a esquerda -- o amarelo aqui marca estado, que
   e o papel secundario da paleta. */
.faq-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--estrutura-escura);
  border-radius: 0;
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.faq-item[open] {
  border-left-color: var(--alerta-400);
  background: rgb(255 255 255 / 0.03);
}

.faq-item[open],
.faq-item:hover {
  border-color: var(--estrutura-forte);
}

.faq-item__titulo {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--esp-m) 3.4rem var(--esp-m) var(--esp-s);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-corpo);
  font-weight: 600;
  color: #fff;
  user-select: none;
}

.faq-item__titulo::-webkit-details-marker { display: none; }

/* Sinal de mais que gira e vira um X quando o item abre */
.faq-item__titulo::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: rgb(255 255 255 / 0.5);
  transition: transform 0.3s var(--ease-saida);
}

.faq-item[open] .faq-item__titulo::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item__corpo {
  padding: 0 3.4rem var(--esp-m) var(--esp-s);
  font-size: 0.875rem;
  line-height: 1.75;
  color: rgb(255 255 255 / 0.65);
}

.faq-item[open] .faq-item__corpo {
  animation: faq-abre 0.35s var(--ease-saida);
}

@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-4px); }
}

/* --------------------------------------------------------------------------
   18. FORMULARIO E MAPA
   -------------------------------------------------------------------------- */
.campo-escuro {
  width: 100%;
  /* background-color, e nao o atalho background: o atalho zera a imagem de
     fundo, e e nela que mora a seta do <select> logo abaixo. */
  background-color: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-field);
  padding: 0.8rem 1rem;
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;

  /* Quem desenha o menu do <select>, o cursor e o preenchimento automatico e
     o sistema, nao a pagina. Sem esta linha o menu abre claro e as opcoes
     herdam o branco do campo: texto branco no fundo branco. */
  color-scheme: dark;
}

.campo-escuro::placeholder { color: rgb(255 255 255 / 0.38); }

.campo-escuro:focus {
  outline: none;
  border-color: var(--hazmat-500);
  background-color: rgb(255 255 255 / 0.07);
}

/* Reforco para os navegadores que ainda ignoram color-scheme no menu. */
.campo-escuro option {
  background-color: var(--petroleo-900);
  color: #e8f1f1;
}

/* A seta nativa nasce escura e some no campo escuro. Troca pela nossa, no
   verde da marca, com folga a direita para o texto nao passar por baixo. */
select.campo-escuro {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356980b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.85rem;
  cursor: pointer;
}

.campo-escuro:user-invalid {
  border-color: var(--perigo-500);
}

/* Moldura do mapa: harmoniza o embed colorido com o tema escuro */
.moldura-mapa {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-box);
  border: 1px solid rgb(255 255 255 / 0.1);
  background: var(--petroleo-800);
}

.moldura-mapa iframe {
  display: block;
  width: 100%;
  border: 0;
  filter: grayscale(0.28) contrast(1.04) brightness(0.95);
}

/* --------------------------------------------------------------------------
   GRADE DE CATEGORIAS
   Assimetrica de proposito. O kit completo -- o carro-chefe, que estava na
   ultima posicao -- ocupa quatro celulas e abre a grade; os outros sete
   ladrilhos se acomodam em volta, e a ultima celula e a chamada do catalogo.
   Doze celulas, nenhuma vazia.
   -------------------------------------------------------------------------- */
.grade-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-xs);
}

@media (min-width: 1024px) {
  .grade-categorias { grid-template-columns: repeat(4, 1fr); }
  .card-categoria.card-categoria--destaque { grid-column: span 2; grid-row: span 2; }
}

.grade-categorias > .card-categoria { min-height: 9.5rem; }

.card-categoria.card-categoria--destaque {
  background: color-mix(in srgb, var(--petroleo-700) 58%, var(--petroleo-950));
  padding: var(--esp-l);
}

.card-categoria.card-categoria--destaque:hover {
  background: color-mix(in srgb, var(--petroleo-700) 78%, var(--petroleo-950));
}

.card-categoria.card-categoria--destaque .card-categoria__titulo { font-size: var(--txt-titulo); }
.card-categoria.card-categoria--destaque .card-categoria__icone svg { width: 12rem; height: 12rem; }
.card-categoria.card-categoria--destaque .card-categoria__contagem strong { font-size: 2.25rem; }

/* A celula de chamada nao e categoria: e saida. Fica vazada. */
.card-categoria.card-categoria--acao {
  background: none;
  border: 1px solid var(--estrutura-clara);
  justify-content: flex-end;
}

.card-categoria.card-categoria--acao .card-categoria__titulo { color: var(--neutro-900); }
.card-categoria.card-categoria--acao .card-categoria__contagem { color: rgb(16 22 23 / 0.6); }
.card-categoria.card-categoria--acao:hover { background: rgb(16 22 23 / 0.04); }

/* Divisor entre os dois movimentos de uma mesma secao. Nao e borda de caixa:
   e uma pausa, com o losango da marca no meio. */
.divisor-secao {
  position: relative;
  height: 0;
  margin-block: var(--esp-2xl);
  border: 0;
  border-top: 1px solid var(--estrutura-clara);
}

.divisor-secao::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 4rem;
  border-top: 2px solid var(--petroleo-900);
}

/* --------------------------------------------------------------------------
   LISTA DE SEGMENTOS E BLOCO DE ALCANCE
   Nascem da fusao de "Quem atendemos" com "Onde atendemos".
   -------------------------------------------------------------------------- */
.lista-segmentos {
  display: grid;
  gap: var(--esp-m);
}

.subtitulo-bloco {
  margin-bottom: var(--esp-s);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-olho);
  color: rgb(16 22 23 / 0.6);
}

/* O chip de cidade nasceu para secao escura; aqui ele passa para o claro. */
.secao-clara .cidade-chip {
  border-color: var(--estrutura-clara);
  background: #fff;
  color: rgb(16 22 23 / 0.78);
}

.secao-clara .cidade-chip:hover { border-color: var(--petroleo-700); }

.secao-clara .cidade-chip--sede {
  border-color: transparent;
  background: var(--petroleo-900);
  color: #fff;
}

/* --------------------------------------------------------------------------
   ACESSIBILIDADE
   -------------------------------------------------------------------------- */

/* Fica fora da tela ate receber foco. Primeira parada do teclado. */
.pular-para-conteudo {
  position: fixed;
  top: var(--esp-s);
  left: var(--esp-s);
  z-index: 200;
  translate: 0 calc(-100% - var(--esp-l));
  padding: var(--esp-xs) var(--esp-m);
  border-radius: var(--radius-field);
  background: var(--acao-fundo);
  color: var(--acao-texto);
  font-size: var(--txt-apoio);
  font-weight: 600;
  transition: translate 0.2s var(--ease-saida);
}

.pular-para-conteudo:focus-visible { translate: 0 0; }

/* Bloco que so aparece com o JavaScript desligado. */
.sem-script {
  max-width: var(--medida);
  margin-inline: auto;
  padding: var(--esp-l);
  border: 1px solid var(--estrutura-clara);
  border-left: 3px solid var(--alerta-400);
  border-radius: var(--radius-box);
  background: #fff;
  color: var(--neutro-900);
}

.sem-script h2 {
  margin-bottom: var(--esp-s);
  font-size: var(--txt-sub);
  color: var(--neutro-900);
}

.sem-script p { margin-bottom: var(--esp-s); font-size: var(--txt-apoio); }
.sem-script ul { margin-bottom: var(--esp-s); padding-left: var(--esp-m); list-style: disc; }
.sem-script li { font-size: var(--txt-apoio); line-height: 1.9; }
.sem-script a { color: var(--acento-legivel); font-weight: 600; text-decoration: underline; }

/* Icone dos dados de contato. Era o quarto lugar com o mesmo quadrado
   arredondado do acento; aqui o acento nao cumpre nenhum dos tres papeis, e
   marcar endereco, telefone, horario e e-mail nao e acao. */
.icone-contato {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.125rem;
  border-radius: var(--radius-field);
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.7);
}

.icone-contato svg { width: 1rem; height: 1rem; }

/* Saida manual do formulario, para quando o navegador bloqueia a abertura da
   conversa. Fica visivel e com foco: e o ultimo degrau antes de o lead se
   perder em silencio. */
.link-manual {
  margin-top: var(--esp-s);
  padding: var(--esp-xs) var(--esp-s);
  border-left: 2px solid var(--alerta-400);
  background: rgb(255 255 255 / 0.04);
  font-size: var(--txt-apoio);
  color: rgb(255 255 255 / 0.8);
}

.link-manual a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   TIRA DE DADOS
   Substitui a barra de contadores. Grade assimetrica de proposito: o endereco
   e o dado que mais importa e ocupa mais espaco; os outros tres dividem o
   resto. Nada aqui e animado -- sao fatos, nao numeros subindo.
   -------------------------------------------------------------------------- */
.tira-dados {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--petroleo-800);
  box-shadow: 0 28px 60px -34px rgb(0 0 0 / 0.75);
}

.tira-dados__grade {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .tira-dados__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .tira-dados__grade { grid-template-columns: 1.35fr 1fr 1fr 1.1fr; }
}

.tira-dados__item {
  padding: var(--esp-m) var(--esp-m) calc(var(--esp-m) + 0.15rem);
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.tira-dados__item:first-child { border-top: 0; }

@media (min-width: 640px) {
  .tira-dados__item:nth-child(2) { border-top: 0; }
  .tira-dados__item:nth-child(2n) { border-left: 1px solid rgb(255 255 255 / 0.08); }
}

@media (min-width: 1024px) {
  .tira-dados__item { border-top: 0; }
  .tira-dados__item + .tira-dados__item { border-left: 1px solid rgb(255 255 255 / 0.08); }
}

.tira-dados__rotulo {
  font-size: var(--txt-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-olho);
  color: rgb(255 255 255 / 0.55);
}

.tira-dados__valor {
  margin-top: var(--esp-2xs);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sub);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--track-titulo);
  color: #fff;
}

.tira-dados__valor--normas { color: var(--alerta-400); }

.tira-dados__extra {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-micro);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  color: rgb(255 255 255 / 0.62);
}

/* --------------------------------------------------------------------------
   19. GRADE DE APOIO
   -------------------------------------------------------------------------- */
.container-braskit {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* 6,22:1 sobre --neutro-50, contra 3,34:1 do verde cheio da marca. */
.secao-clara {
  --acento-legivel: var(--acento-sobre-claro);
}

/* Tres densidades de ritmo vertical. A secao de conteudo respira mais que a
   de passagem; a faixa de respiro e curta de proposito. */
.secao--respiro { --ritmo: clamp(2.5rem, 5vw, 4rem); }
.secao--ampla   { --ritmo: clamp(5.5rem, 11vw, 9.5rem); }

.secao {
  padding-block: var(--ritmo, clamp(4rem, 9vw, 7.5rem));
  position: relative;
}

.secao-escura {
  background: var(--petroleo-900);
  color: #e8f1f1;
  position: relative;
  overflow: hidden;
}

.secao-escura-profunda { background: var(--petroleo-950); }

.secao-clara {
  background: var(--neutro-50);
  color: var(--neutro-900);
}

/* --------------------------------------------------------------------------
   20. ITEM DE CHECKLIST (composicao do kit) E CARD DE CATEGORIA
   -------------------------------------------------------------------------- */
/* ITEM DO KIT -- chip denso.
   Sao dez pecas de uma lista de conteudo, nao dez cartoes: densidade alta,
   raio de campo, sem sombra e sem elevacao. */
.item-kit {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--esp-s);
  align-items: center;
  border: 1px solid var(--estrutura-clara);
  background: rgb(255 255 255 / 0.6);
  border-radius: var(--radius-field);
  padding: var(--esp-xs) var(--esp-s);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.item-kit:hover {
  border-color: var(--estrutura-forte);
  background: #fff;
}

/* Sem o quadrado arredondado: no chip o icone e um traco solto. */
.item-kit__icone {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  color: var(--petroleo-700);
  transition: color 0.25s ease;
}

.item-kit__icone svg { width: 1.25rem; height: 1.25rem; }

.item-kit:hover .item-kit__icone { color: var(--petroleo-950); }

.item-kit__nome {
  align-self: end;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-apoio);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--neutro-900);
}

.item-kit__desc {
  align-self: start;
  margin-top: 0.1rem;
  font-size: var(--txt-micro);
  line-height: 1.5;
  color: rgb(16 22 23 / 0.72); /* era 0.55: 4,03:1 */
}

/* Card de categoria do catalogo */
/* CATEGORIA -- ladrilho.
   Sem borda e sem elevacao: o que muda no hover e o preenchimento. O canto
   superior esquerdo fica reto e os outros tres arredondados, para o conjunto
   ler como uma grade encaixada e nao como oito caixas soltas. */
.card-categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--esp-m);
  border: 0;
  border-radius: 0 var(--radius-box) var(--radius-box) var(--radius-box);
  background: color-mix(in srgb, var(--petroleo-700) 30%, var(--petroleo-950));
  transition: background-color 0.3s ease;
}

.card-categoria:hover {
  background: color-mix(in srgb, var(--petroleo-700) 62%, var(--petroleo-950));
}

.card-categoria__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sub);
  line-height: 1;
  color: #fff;
}

/* PAPEL 2 DO ACENTO: dado numerico. A contagem de itens e informacao real,
   entao o numeral e verde e a palavra que o acompanha nao e. */
.card-categoria__contagem {
  margin-top: var(--esp-2xs);
  font-size: var(--txt-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-rotulo);
  color: rgb(255 255 255 / 0.6);
}

.card-categoria__contagem strong {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--acento-legivel);
  vertical-align: -0.12em;
  margin-right: 0.15rem;
  font-variant-numeric: tabular-nums;
}

/* Marca-d'agua: o icone sai do quadradinho de 3rem e passa a ocupar o canto
   do ladrilho, sangrando para fora. E o que da escala ao conjunto de oito. */
.card-categoria__icone {
  position: absolute;
  right: -0.75rem;
  bottom: -0.75rem;
  display: block;
  color: rgb(255 255 255 / 0.07);
  transition: color 0.3s ease, transform 0.4s var(--ease-saida);
  pointer-events: none;
}

.card-categoria__icone svg { width: 6.5rem; height: 6.5rem; stroke-width: 1; }

.card-categoria:hover .card-categoria__icone {
  color: rgb(255 255 255 / 0.14);
  transform: translate(-0.35rem, -0.35rem);
}

/* --------------------------------------------------------------------------
   21. QUEM ATENDEMOS E ONDE ATENDEMOS
   -------------------------------------------------------------------------- */
/* SEGMENTO -- deixa de ser cartao.
   Quatro caixas brancas lado a lado eram a terceira grade identica da pagina.
   Vira lista: filete a esquerda, sem fundo, sem raio, sem sombra. */
.segmento-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--esp-xs) 0 var(--esp-m) var(--esp-m);
  background: none;
  border: 0;
  border-left: 1px solid var(--estrutura-clara);
  border-radius: 0;
  transition: border-color 0.3s ease, border-left-width 0.2s ease;
}

.segmento-card:hover {
  border-left-color: var(--petroleo-900);
  box-shadow: inset 2px 0 0 var(--petroleo-900);
}

.segmento-card__icone {
  display: flex;
  align-items: center;
  width: 1.5rem;
  margin-bottom: var(--esp-s);
  color: var(--petroleo-700);
  transition: color 0.25s ease;
}

.segmento-card__icone svg { width: 1.5rem; height: 1.5rem; }

.segmento-card:hover .segmento-card__icone { color: var(--petroleo-950); }

.segmento-card__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-titulo);
  line-height: 1;
  color: var(--neutro-900);
  margin-bottom: var(--esp-2xs);
}

.segmento-card__texto {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgb(16 22 23 / 0.6);
}

/* Chips de cidade da secao Onde Atendemos */
.cidade-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 99px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.04);
  color: rgb(255 255 255 / 0.8);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.25s ease, background-color 0.25s ease,
    transform 0.25s var(--ease-saida);
}

.cidade-chip:hover {
  border-color: var(--estrutura-forte);
  background: rgb(255 255 255 / 0.07);
  transform: translateY(-1px);
}

.cidade-chip--sede {
  border-color: color-mix(in srgb, var(--alerta-400) 55%, transparent);
  background: rgb(255 195 0 / 0.1);
  color: #fff;
}

.cidade-chip__nota {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Era --hazmat-500, que dava 4,32:1 no chip. Alem de reprovar, e um verde
     que nao cumpre nenhum dos tres papeis do acento: a nota da sede vira
     amarelo de destaque, que passa com folga. */
  color: var(--alerta-400);
}

/* --------------------------------------------------------------------------
   22. CATALOGO: barra de filtros, chips, busca e cards
   -------------------------------------------------------------------------- */
.filtros-sticky {
  position: sticky;
  top: 62px;
  z-index: 40;
  background: color-mix(in srgb, #fff 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(16 22 23 / 0.09);
}

@media (max-width: 640px) {
  .filtros-sticky { top: 56px; }
}

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  border: 1px solid rgb(16 22 23 / 0.14);
  background: #fff;
  color: rgb(16 22 23 / 0.72);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, transform 0.25s var(--ease-saida);
}

.chip-filtro:hover {
  border-color: var(--estrutura-forte);
  color: var(--neutro-900);
  transform: translateY(-1px);
}

.chip-filtro.is-ativo {
  background: var(--acao-fundo);
  border-color: var(--acao-fundo);
  color: var(--acao-texto);
}

.chip-filtro__contagem {
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.6;
}

/* A regua de categorias rola na horizontal no celular. A barra de rolagem
   nativa polui o conjunto, entao fica escondida: o corte dos chips ja
   sinaliza que ha mais conteudo ao lado. */
.chips-rolagem {
  /* Sem min-width:0 um flex item nao encolhe abaixo do proprio conteudo: os
     nove chips (todos com white-space:nowrap) empurravam o bloco de busca
     para fora da tela. Era o estouro de 1732px num viewport de 1440. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.chips-rolagem::-webkit-scrollbar { display: none; }

/* A partir de 1024px ha espaco para as nove categorias em duas linhas, e num
   catalogo ver todas de uma vez vale mais que uma regua que rola e corta
   "Acessorios" ao meio. Abaixo disso a rolagem continua, que e o unico
   arranjo que cabe. O que nao volta e o overflow visivel sem min-width: 0 --
   foi ele que empurrou a busca para fora da tela. */
@media (min-width: 1024px) {
  .chips-rolagem { overflow-x: visible; }
  .chips-rolagem > div { flex-wrap: wrap; }
}

/* Quem cede espaco na barra e a regua de chips, que rola. O bloco de busca
   guarda a largura util e nao encolhe. */
.busca-filtros {
  min-width: 0;
}

/* Campo de busca */
.campo-busca {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  border-radius: var(--radius-field);
  border: 1px solid rgb(16 22 23 / 0.14);
  background: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  color: var(--neutro-900);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.campo-busca::placeholder { color: rgb(16 22 23 / 0.4); }

.campo-busca:focus {
  outline: none;
  border-color: var(--hazmat-500);
  box-shadow: 0 0 0 3px rgb(255 107 0 / 0.14);
}

/* Card do produto no grid */
/* PRODUTO -- o unico que continua cartao, porque e objeto de merchandising:
   precisa de moldura para as 39 fotos lerem como um conjunto.
   O destaque vai para o estado de SELECAO, nao para o hover. */
.produto-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-box);
  border: 1px solid var(--estrutura-clara);
  background: #fff;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.produto-card:hover {
  box-shadow: 0 16px 36px -24px rgb(6 34 38 / 0.55);
}

/* Filtro do catalogo. Precisa ser classe propria e nao o utilitario .hidden:
   a regra .produto-card { display: flex } acima esta FORA de @layer e venceria
   .hidden, que vive em @layer utilities. */
.produto-card--fora { display: none !important; }

/* --------------------------------------------------------------------------
   23. JANELA DE DETALHE DO PRODUTO (dialog nativo)
   O dialog ocupa a tela inteira de forma transparente; a caixa fica no
   centro e o formulario de fundo, com method="dialog", fecha ao clique
   fora. O ::backdrop escurece a pagina por tras.
   -------------------------------------------------------------------------- */
.janela-produto {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  border: 0;
  padding: 1rem;
  background: transparent;
}

.janela-produto[open] {
  display: grid;
  place-items: center;
}

.janela-produto::backdrop {
  background: rgb(6 34 38 / 0.82);
  backdrop-filter: blur(3px);
}

.janela-produto[open] .janela-produto__caixa {
  animation: janela-entra 0.32s var(--ease-saida);
}

@keyframes janela-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.janela-produto__caixa {
  position: relative;
  z-index: 1;
  width: min(92vw, 56rem);
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-box);
  border: 1px solid rgb(255 255 255 / 0.1);
  background: var(--petroleo-900);
  color: #e8f1f1;
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.8);
}

/* Sem min-width: 0 as colunas do grid crescem ate o tamanho minimo do
   conteudo e estouram a caixa, jogando a foto por cima do texto. */
.janela-produto__caixa .grid > * { min-width: 0; }

/* Botao invisivel que cobre a area fora da caixa e fecha a janela */
.janela-produto__fundo {
  position: absolute;
  inset: 0;
}

.janela-produto__fundo button {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  cursor: default;
}

/* --------------------------------------------------------------------------
   24. ORÇAMENTO POR SELEÇÃO
   O seletor de cada card, a bandeja fixa e a janela da lista.

   Regra de cor da seção: o kit mínimo obrigatório fala em petróleo (é norma,
   não é escolha) e o que a pessoa marcou fala no verde da marca. Dentro da
   janela escura, o obrigatório troca o petróleo pelo amarelo de alerta, que
   é o mesmo da faixa zebrada e sobrevive ao fundo.
   -------------------------------------------------------------------------- */

/* Seletor no rodapé do card ----------------------------------------------- */
.selecao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-field);
  border: 1px solid rgb(16 22 23 / 0.14);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--neutro-900);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

label.selecao { cursor: pointer; }

label.selecao:hover {
  border-color: var(--estrutura-forte);
}

/* O campo sai de vista, mas continua sendo ele quem guarda o estado e quem
   recebe o teclado. O anel de foco aparece na caixinha ao lado. */
.selecao__campo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.selecao__caixa {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.4rem;
  border: 2px solid rgb(16 22 23 / 0.2);
  background: #fff;
  color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.selecao__caixa svg { width: 0.8rem; height: 0.8rem; }

.selecao__campo:checked + .selecao__caixa,
.selecao__caixa.is-marcada {
  background: var(--hazmat-500);
  border-color: var(--hazmat-500);
  color: #fff;
}

.selecao__campo:focus-visible + .selecao__caixa {
  outline: 2px solid var(--hazmat-500);
  outline-offset: 3px;
}

.selecao.is-marcado {
  border-color: color-mix(in srgb, var(--hazmat-500) 45%, transparent);
  background: color-mix(in srgb, var(--hazmat-500) 7%, #fff);
}

.selecao__texto { flex: 1; }

.selecao__texto small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(16 22 23 / 0.68); /* era 0.5: 3,41:1 */
}

/* Kit mínimo: sem controle nenhum, porque não há o que decidir aqui. */
.selecao--fixa {
  border-color: rgb(11 49 54 / 0.18);
  background: color-mix(in srgb, var(--petroleo-900) 5%, #fff);
}

.selecao--fixa .selecao__caixa.is-marcada {
  background: var(--petroleo-800);
  border-color: var(--petroleo-800);
}

.selecao__cadeado {
  flex: none;
  color: rgb(16 22 23 / 0.35);
}

.selecao__cadeado svg { width: 0.95rem; height: 0.95rem; }

/* Card que já está na lista */
.produto-card.is-selecionado {
  border-color: color-mix(in srgb, var(--hazmat-500) 55%, transparent);
  box-shadow: 0 14px 34px -22px rgb(255 107 0 / 0.75);
}

.produto-card.is-fixo {
  border-color: rgb(11 49 54 / 0.3);
  box-shadow: 0 14px 34px -22px rgb(11 49 54 / 0.7);
}

/* Botão de seleção da janela de detalhe ------------------------------------ */
.botao-selecao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-field);
  border: 1px solid transparent;
  background: var(--hazmat-500);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.botao-selecao svg { width: 1.05rem; height: 1.05rem; flex: none; }
.botao-selecao:hover { background: var(--hazmat-400); }

.botao-selecao.is-dentro {
  background: color-mix(in srgb, var(--hazmat-500) 16%, transparent);
  border-color: color-mix(in srgb, var(--hazmat-500) 55%, transparent);
  color: var(--hazmat-400);
}

.botao-selecao.is-dentro:hover {
  background: color-mix(in srgb, var(--hazmat-500) 26%, transparent);
  color: #fff;
}

.botao-selecao:disabled {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.16);
  border-style: dashed;
  color: rgb(255 255 255 / 0.7);
  cursor: default;
}

/* Bandeja fixa ------------------------------------------------------------- */
.bandeja {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 75; /* acima dos flutuantes (70) e abaixo do header (80) */
  background: color-mix(in srgb, var(--petroleo-950) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -18px 40px -24px rgb(0 0 0 / 0.9);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-saida);
}

.bandeja.is-visivel { transform: none; }

.bandeja__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.bandeja__resumo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: #fff;
  font-family: var(--fonte-corpo);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.bandeja__resumo:hover { background: rgb(255 255 255 / 0.07); }

.bandeja__selo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
  background: var(--hazmat-500);
  color: #fff;
}

.bandeja__selo svg { width: 1.25rem; height: 1.25rem; }

.bandeja__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.bandeja__texto strong {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
}

.bandeja__texto small {
  overflow: hidden;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.55);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bandeja__minis {
  display: flex;
  align-items: center;
  padding-left: 0.4rem;
}

.bandeja__minis img,
.bandeja__mais {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  border: 2px solid var(--petroleo-950);
  background: var(--petroleo-800);
  object-fit: cover;
}

.bandeja__minis > * + * { margin-left: -0.6rem; }

.bandeja__mais {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.bandeja__enviar {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-field);
  background: var(--hazmat-500);
  color: var(--acao-texto);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.bandeja__enviar:hover { background: var(--hazmat-400); }

/* Pulso ao entrar um item novo: confirma a ação sem precisar de aviso. */
@keyframes bandeja-pulso {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.bandeja.is-pulsando .bandeja__selo {
  animation: bandeja-pulso 0.5s var(--ease-saida);
}

/* Com a bandeja na tela o rodapé ganha folga e os flutuantes saem da frente:
   o botão da bandeja já faz o papel do WhatsApp redondo. */
body.com-bandeja { padding-bottom: 5.5rem; }
body.com-bandeja .btn-whatsapp { display: none; }
body.com-bandeja .btn-topo { bottom: 6.75rem; }
body.com-bandeja .aviso-area { bottom: 6.75rem; }

/* Janela da lista ---------------------------------------------------------- */
.janela-orcamento__caixa {
  display: flex;
  width: min(94vw, 44rem);
  max-height: min(88dvh, 46rem);
  flex-direction: column;
  overflow: hidden;
}

.janela-orcamento__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 1.6rem 1.2rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.09);
}

.janela-orcamento__olho {
  margin-bottom: 0.4rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-olho);
  color: rgb(255 255 255 / 0.6);
}

/* Nota editorial da janela do orcamento. Discreta de proposito: informa sem
   parecer aviso de erro. */
.janela-orcamento__nota {
  margin-top: var(--esp-s);
  max-width: 34rem;
  padding-left: var(--esp-xs);
  border-left: 2px solid var(--alerta-400);
  font-size: var(--txt-micro);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.66);
}

.janela-orcamento__nota strong { color: rgb(255 255 255 / 0.9); font-weight: 600; }

.janela-orcamento__resumo {
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.55);
}

.janela-orcamento__fechar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 99px;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.janela-orcamento__fechar:hover {
  border-color: var(--estrutura-forte);
  background: var(--estrutura-forte);
  color: #fff;
}

.janela-orcamento__corpo {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.6rem;
}

.janela-orcamento__corpo:focus { outline: none; }

.grupo-orcamento + .grupo-orcamento { margin-top: 1.7rem; }

.grupo-orcamento__titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.62);
}

.grupo-orcamento__contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.35rem;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.1);
  font-family: var(--fonte-corpo);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}

.grupo-orcamento__apoio {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.45);
}

.grupo-orcamento__lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.linha-orcamento {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto auto;
  grid-template-areas: "foto info qtd fim";
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.03);
}

/* Amarelo translúcido sobre o petróleo vira verde-oliva, então o destaque do
   item obrigatório fica só na borda e no cadeado. */
.linha-orcamento--fixa {
  border-color: color-mix(in srgb, var(--alerta-400) 32%, transparent);
  background: rgb(255 255 255 / 0.055);
}

.linha-orcamento__foto {
  grid-area: foto;
  width: 3.25rem;
  height: 3.25rem;
  align-self: start;
  border-radius: 0.55rem;
  background: var(--petroleo-800);
  object-fit: cover;
}

.linha-orcamento__info {
  grid-area: info;
  min-width: 0;
}

.linha-orcamento__nome {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.linha-orcamento__cat {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 0.42);
}

.linha-orcamento__remover,
.linha-orcamento__cadeado {
  grid-area: fim;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 99px;
}

.linha-orcamento__remover {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: transparent;
  color: rgb(255 255 255 / 0.55);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.linha-orcamento__remover:hover {
  border-color: var(--perigo-500);
  background: color-mix(in srgb, var(--perigo-500) 20%, transparent);
  color: #fff;
}

.linha-orcamento__remover svg { width: 0.85rem; height: 0.85rem; }

.linha-orcamento__cadeado { color: color-mix(in srgb, var(--alerta-400) 80%, #fff); }
.linha-orcamento__cadeado svg { width: 1rem; height: 1rem; }

.contador-qtd {
  grid-area: qtd;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 99px;
  background: rgb(255 255 255 / 0.04);
}

.contador-qtd__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: rgb(255 255 255 / 0.8);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contador-qtd__botao:hover:not(:disabled) {
  background: var(--estrutura-forte);
  color: #fff;
}

.contador-qtd__botao:disabled { opacity: 0.28; cursor: default; }
.contador-qtd__botao svg { width: 0.8rem; height: 0.8rem; }

.contador-qtd__valor {
  width: 2rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

.orcamento-vazio {
  margin-top: 1.2rem;
  padding: 1.1rem;
  border: 1px dashed rgb(255 255 255 / 0.16);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.5);
}

.janela-orcamento__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.6rem;
  padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 255 255 / 0.09);
  background: color-mix(in srgb, var(--petroleo-950) 55%, transparent);
}

.janela-orcamento__enviar {
  display: inline-flex;
  flex: 1;
  min-width: 13rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-field);
  background: var(--hazmat-500);
  color: var(--acao-texto);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.25s ease;
}

.janela-orcamento__enviar:hover { background: var(--hazmat-400); }

.janela-orcamento__limpar {
  padding: 0.9rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-field);
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  font-family: var(--fonte-corpo);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.janela-orcamento__limpar:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 0.4);
  color: #fff;
}

.janela-orcamento__limpar:disabled { opacity: 0.4; cursor: default; }

.janela-orcamento__nota {
  flex-basis: 100%;
  font-size: 0.7rem;
  color: rgb(255 255 255 / 0.35);
}

@media (max-width: 900px) {
  .bandeja__minis { display: none; }
}

@media (max-width: 560px) {
  .bandeja__interno { gap: 0.5rem; }
  .bandeja__resumo { gap: 0.6rem; padding-right: 0.4rem; }
  .bandeja__selo { width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; }
  .bandeja__selo svg { width: 1.05rem; height: 1.05rem; }
  .bandeja__texto strong { font-size: 1.1rem; }
  .bandeja__texto small { font-size: 0.68rem; }
  .bandeja__enviar { padding: 0.7rem 1rem; font-size: 0.8125rem; }
  /* Trechos de texto que só cabem em tela grande: no celular a bandeja fica
     com "Enviar" e "ver e ajustar a lista", sem reticências. */
  .so-largo { display: none; }

  .linha-orcamento {
    grid-template-columns: 3.25rem 1fr auto;
    grid-template-areas:
      "foto info fim"
      "foto qtd  qtd";
    row-gap: 0.55rem;
  }

  .contador-qtd { justify-self: start; }

  .janela-orcamento__topo,
  .janela-orcamento__corpo,
  .janela-orcamento__rodape { padding-inline: 1.1rem; }
}

/* --------------------------------------------------------------------------
   25. RESPONSIVO
   -------------------------------------------------------------------------- */

/* Abaixo de 1024px o parallax e desligado (ver js/main.js): as camadas
   viram fundo estatico, sem custo de composicao em aparelhos moveis. */
@media (max-width: 1023px) {
  .camada-parallax,
  .faixa-parallax__fundo,
  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }

  .camada-parallax {
    inset: 0;
    height: 100%;
  }

  .faixa-parallax__fundo {
    top: 0;
    height: 100%;
  }

  .marquee__item { font-size: 1.15rem; padding-inline: 1.25rem; }
}

@media (max-width: 640px) {
  :root { --altura-header: 72px; }
  .secao { padding-block: clamp(3rem, 12vw, 4.5rem); }
}

/* --------------------------------------------------------------------------
   FICHA DE PRODUTO
   Layout das paginas geradas por build/gerar-paginas.mjs. Escrito aqui, a mao,
   e nao com utilitario novo no HTML: as paginas geradas nao entram na varredura
   do Tailwind (build/compilar-css.mjs le so index.html e catalogo.html), entao
   classe utilitaria inedita nelas sairia sem regra nenhuma no css/tw.css.
   -------------------------------------------------------------------------- */
.ficha-produto {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .ficha-produto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.ficha-produto__foto {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--cat-cor, #0f3b3f);
  aspect-ratio: 3 / 2;
}

.ficha-produto__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ficha-produto__corpo > * + * { margin-top: 1.75rem; }

.ficha-produto__lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgb(16 22 23 / 0.78);
}

.ficha-bloco {
  border-left: 3px solid var(--cat-cor, #56980b);
  padding-left: 1.125rem;
}

.ficha-bloco__rotulo {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(16 22 23 / 0.65);
}

.ficha-bloco p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgb(16 22 23 / 0.72);
}

/* Selo do kit minimo. So aparece nos itens de KIT_MINIMO (js/produtos.js), e
   traz a mesma ressalva da janela do orcamento: a composicao e sugestao
   tecnica ate a Braskit confirmar (PENDENCIAS.md 1). */
.ficha-kit-minimo {
  border: 1px solid rgb(86 152 11 / 0.35);
  background: rgb(86 152 11 / 0.07);
  border-radius: 0.75rem;
  padding: 1.125rem 1.25rem;
}

.ficha-kit-minimo strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #3d6c08;
  font-size: 0.9375rem;
}

.ficha-kit-minimo p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(16 22 23 / 0.62);
}

/* Tabela de especificacao. Hoje nao renderiza para nenhum produto: os campos
   ca, medidas, material e norma ainda nao existem em js/produtos.js. O
   template ja esta pronto para quando a Braskit responder a PENDENCIAS.md 3.4
   -- e ai as fichas crescem sem tocar em uma linha de codigo. */
.ficha-especificacao { width: 100%; border-collapse: collapse; }

.ficha-especificacao th,
.ficha-especificacao td {
  border-bottom: 1px solid rgb(16 22 23 / 0.1);
  padding: 0.7rem 0;
  text-align: left;
  font-size: 0.875rem;
  vertical-align: top;
}

.ficha-especificacao th {
  width: 40%;
  font-weight: 600;
  color: rgb(16 22 23 / 0.65);
}

.ficha-especificacao td { color: rgb(16 22 23 / 0.8); }

/* Quadro de medidas, abaixo da ficha (blocoMedidas em build/gerar-paginas.mjs).
   896 px e a largura em que as cotas desenhadas na imagem ficam legiveis sem
   ampliar; o sizes do <picture> conta com esse teto. A borda separa do branco
   da secao o fundo da propria imagem, que em algumas e cinza-claro. */
.ficha-medidas {
  max-width: 56rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ficha-medidas__legenda {
  margin-bottom: 0.9rem;
  border-left: 3px solid var(--cat-cor, #56980b);
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgb(16 22 23 / 0.72);
}

.ficha-medidas__imagem {
  display: block;
  overflow: hidden;
  border: 1px solid rgb(16 22 23 / 0.1);
  border-radius: 1rem;
  background: #fff;
}

.ficha-medidas__imagem img {
  display: block;
  width: 100%;
  height: auto;
}

/* A ficha fica sobre branco e os itens relacionados sobre o neutro-50, para
   uma separar visualmente da outra: com o mesmo fundo nas duas, o espaco entre
   elas vira so um vao sem leitura. */
.ficha-secao { background: #fff; }

/* Chamada no fim das paginas geradas. E componente, e nao um punhado de
   utilitario, justamente porque estas paginas ficam fora da varredura do
   Tailwind: aqui a regra existe com certeza. */
.ficha-chamada {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: 1rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--petroleo-900);
  color: #e8f1f1;
}

.ficha-chamada .titulo-secao {
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

.ficha-chamada p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgb(255 255 255 / 0.75);
}

.ficha-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Botao secundario de contorno, nas duas versoes. O primario continua sendo o
   .btn-brilho, que ja existe. */
.btn-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(16 22 23 / 0.15);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutro-900);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-contorno:hover { border-color: var(--hazmat-500); color: var(--hazmat-500); }

.btn-contorno--claro { border-color: rgb(255 255 255 / 0.2); color: #fff; }
.btn-contorno--claro:hover { border-color: var(--hazmat-500); color: var(--hazmat-500); }

/* --------------------------------------------------------------------------
   26. MOVIMENTO REDUZIDO
   Quem pediu menos movimento recebe a pagina inteira estatica: sem parallax,
   sem reveal, sem marquee, sem tilt e sem pulso. O conteudo continua 100%
   acessivel.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   ALVOS DE TOQUE
   Abaixo de 44x44 o dedo erra. Quatro alvos estavam abaixo disso, e todos se
   resolvem em CSS, sem tocar em JS.

   Este bloco fica NO FIM da folha de proposito: os componentes que ele ajusta
   sao definidos mais acima e, com a mesma especificidade, quem vem depois
   vence. No meio do arquivo estas regras nao valiam nada.
   -------------------------------------------------------------------------- */

/* Quantidade: era 28x28. O botao cresce, o desenho dentro dele nao. */
.contador-qtd__botao {
  width: 2.75rem;
  height: 2.75rem;
}

/* Remover item: era 32x32. */
.linha-orcamento__remover,
.linha-orcamento__cadeado {
  width: 2.75rem;
  height: 2.75rem;
}

/* Chip de filtro: a altura era ~35px. */
.chip-filtro {
  min-height: 2.75rem;
}

/* Hamburguer: a area util era 42x34. */
/* Cresce por padding, nao por display nem por width. Declarar display aqui
   venceria o utilitario lg:hidden do proprio botao -- este arquivo esta fora
   de @layer -- e o hamburguer apareceria no desktop.
   As tres barras somam 26x18; o respiro leva o alvo a 44x44. */
.hamburguer {
  padding: 13px 9px;
  box-sizing: content-box;
}

/* A caixa de selecao do card ficava a 43px por um fio. */
.selecao { min-height: 2.75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .camada-parallax,
  .faixa-parallax__fundo,
  [data-parallax],
  .tilt-3d,
  .tilt-3d.is-inclinando {
    transform: none !important;
    will-change: auto;
  }

  .camada-parallax { inset: 0; height: 100%; }
  .faixa-parallax__fundo { top: 0; height: 100%; }

  /* A foto do produto tambem cresce no hover: e movimento, e o reset de
     duracao sozinho apenas o torna instantaneo em vez de suprimi-lo. */
  .produto-card:hover .produto-foto,
  .produto-card:focus-within .produto-foto,
  .produto-midia--descobre:hover .produto-foto { transform: none !important; }

  .marquee__trilho { animation: none; transform: none; }
  .linha-mascara > span { animation: none; }
  .produto-card--entrando { animation: none; }
}

/* --------------------------------------------------------------------------
   27. IMPRESSAO
   -------------------------------------------------------------------------- */
@media print {
  .btn-topo,
  .btn-whatsapp,
  .menu-mobile,
  .aviso-area,
  .bandeja,
  .indicador-scroll__ponto { background: currentColor; }

.indicador-scroll { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
  body.com-bandeja { padding-bottom: 0 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}