/* + EPI Distribuidora — estilos da landing page
   Paleta e degradês conforme o "Estudo cromático — +EPI" de 09/09/2026.

   Duas regras estruturam a página:
   1. Cascata: a cor final de uma dobra é a cor inicial da seguinte, para que
      a página se leia como um degradê contínuo.
   2. Camada temática: objetos de EPI recortados atravessam as costuras entre
      dobras. Ficam sempre ancorados na dobra DE BAIXO com deslocamento
      negativo, porque uma seção posterior é pintada por cima da anterior —
      o caminho inverso deixaria o objeto escondido sob o fundo seguinte.
   ============================================================ */

/* ============================================================
   1. Tokens
   ============================================================ */
:root{
  /* Marca — estimados da peça do cliente, convertidos para sRGB */
  --laranja:#F96504;
  --laranja-medio:#FF7A0A;
  --ambar:#FF9A32;
  --laranja-profundo:#B83E00;

  /* Estrutura fria */
  --grafite:#202B33;
  --petroleo:#123B4A;
  --petroleo-claro:#1B5263;

  /* Superfícies claras */
  --branco:#FFFFFF;
  --superficie:#F4F6F7;
  --creme:#FFF4EB;

  /* Texto e traços */
  --texto:#202B33;
  --texto-2:#596770;
  --sobre-escuro:#D8E0E4;
  --link:#B83E00;
  --borda:#DFE5E8;
  --borda-forte:#75838B;
  --borda-escura:rgba(255,255,255,.16);

  /* WhatsApp: verde reservado a este canal (estudo, seção 6) */
  --wpp-claro:#08833F;
  --wpp:#06692F;

  /* Espaçamento: 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 */
  --e1:8px; --e2:12px; --e3:16px; --e4:24px; --e5:32px; --e6:48px; --e7:64px; --e8:80px;

  /* Forma */
  --raio-card:18px;
  --raio-btn:8px;
  /* dois níveis apenas: repouso e elevação */
  --sombra-1:0 2px 8px rgba(32,43,51,.07);
  --sombra-2:0 12px 30px rgba(32,43,51,.13);
  --sombra-obj:drop-shadow(0 22px 24px rgba(18,59,74,.28));

  /* Layout */
  --container:1200px;
  --header-h:88px;
  --fade:72px;
}

/* ============================================================
   2. Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* a compensação do cabeçalho fixo vive em scroll-margin-top nos alvos;
   manter também scroll-padding-top aqui somaria os dois deslocamentos */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.6;
  color:var(--texto);background:var(--branco);
  -webkit-font-smoothing:antialiased;
  /* Contém a sangria lateral dos objetos temáticos.
     hidden é a reserva para navegadores sem overflow:clip; clip é preferido
     porque não cria contêiner de rolagem, preservando o cabeçalho fixo. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.14;color:var(--grafite);margin:0}
p{margin:0}
ul{margin:0;padding:0}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--laranja-profundo);outline-offset:3px;border-radius:4px}

/* margens laterais fluidas de 20 a 32 px por lado */
.container{width:min(var(--container),100% - clamp(40px,5vw,64px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:16px;top:-100px;z-index:200;background:var(--laranja);color:var(--grafite);padding:12px 20px;border-radius:0 0 var(--raio-btn) var(--raio-btn);font-weight:600;transition:top .18s}
.skip-link:focus{top:0}

/* Ícones da biblioteca interna: traço herdado via CSS (16px, como no
   sistema de selos de referência). */
.icone{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

section{position:relative;padding:var(--e7) 0;isolation:isolate}
/* o cabeçalho é sticky: as âncoras precisam parar abaixo dele */
section[id],.rodape{scroll-margin-top:calc(var(--header-h) + 16px)}
section > .container{position:relative;z-index:2}

/* Faixa de transição entre dobra escura e clara. O recuo do topo é maior que
   a faixa, para que nenhum texto caia sobre os tons intermediários. */
.transicao{padding-top:calc(var(--fade) + var(--e5))}
.transicao::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--fade);
  z-index:0;pointer-events:none;
}

/* Luz ambiente das dobras escuras. Discreta: o estudo pede que se evitem
   brilhos contínuos e neon. A máscara impede que a luz seja cortada em seco
   na costura, o que criaria um degrau de cor. */
.brilho::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 62% at 78% 16%, rgba(249,101,4,.15), transparent 64%),
    radial-gradient(46% 52% at 8% 90%, rgba(27,82,99,.55), transparent 68%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
}
.transicao.brilho::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent var(--fade),#000 calc(var(--fade) + 110px),#000 calc(100% - 90px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,transparent var(--fade),#000 calc(var(--fade) + 110px),#000 calc(100% - 90px),transparent 100%);
}

/* ============================================================
   3. Camada temática
   Objetos recortados de EPI. O contêiner tem altura zero: não empurra
   conteúdo nenhum e não recebe eventos de ponteiro.
   ============================================================ */
.epi-camada{position:relative;z-index:3;height:0;pointer-events:none}
/* Variante de fundo: textura atrás do conteúdo, nunca por cima dele. */
.epi-camada.atras{z-index:0}
.epi-objeto{
  position:absolute;display:block;height:auto;
  filter:var(--sombra-obj);
}

/* ============================================================
   4. Cabeçalhos de seção
   ============================================================ */
.sec-head{max-width:64ch;margin:0 0 var(--e6)}
#marcas .sec-head{margin-bottom:var(--e4)}
#marcas .marcas-nota{margin-top:var(--e3)}
.sec-head.centro{margin-inline:auto;text-align:center}
.kicker{
  display:inline-flex;align-items:center;gap:var(--e1);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--link);margin-bottom:var(--e2);
}
.kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--laranja)}
.bloco-escuro .kicker{color:var(--ambar)}
.bloco-escuro .kicker::before{background:linear-gradient(90deg,var(--ambar),var(--laranja))}
.sec-head h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:800;letter-spacing:-.015em;margin-bottom:var(--e2)}
.sec-head p{color:var(--texto-2);font-size:1.05rem}
.bloco-escuro h2,.bloco-escuro h3{color:#fff}
.bloco-escuro .sec-head p{color:var(--sobre-escuro)}

.titulo-rabisco{position:relative;display:inline-block}
.rabisco{
  position:absolute;top:-46px;right:-86px;z-index:-1;
  width:128px;height:auto;color:var(--laranja);opacity:.30;pointer-events:none;
}
/* o traço do arquivo é grosso demais nesta escala e vira um borrão.
   A regra precisa mirar o <path>: o atributo stroke-width dele vence herança. */
.rabisco path{stroke-width:7}

/* ============================================================
   5. Botões
   Sobre laranja, o texto é grafite: branco sobre #F96504 dá apenas 3,05:1
   e não serve para texto comum (estudo, seção 5).
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:13px 24px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;line-height:1.2;
  border:2px solid transparent;border-radius:var(--raio-btn);
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
/* Estrutura do selo de referência: [ícone rótulo] | divisor | [ação ícone] */
.btn .btn-rotulo,.btn .btn-acao{display:inline-flex;align-items:center;gap:6px}
.btn .btn-sep{width:1px;height:20px;flex:none;border-radius:1px;background:currentColor;opacity:.38}
.btn-primario{background:var(--laranja);color:var(--grafite)}
.btn-primario:hover{background:var(--laranja-profundo);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(8,16,22,.25)}
.btn-secundario{background:transparent;color:var(--link);border-color:var(--borda-forte)}
.btn-secundario:hover{border-color:var(--laranja-profundo);background:rgba(249,101,4,.06);transform:translateY(-1px)}
.bloco-escuro .btn-secundario,.hero .btn-secundario{color:#fff;border-color:rgba(255,255,255,.45)}
.bloco-escuro .btn-secundario:hover,.hero .btn-secundario:hover{border-color:var(--ambar);color:var(--ambar);background:rgba(249,101,4,.10)}
/* Botão para usar sobre a faixa laranja: laranja sobre laranja desapareceria */
.btn-grafite{background:var(--grafite);color:#fff}
.btn-grafite:hover{background:var(--petroleo);transform:translateY(-1px);box-shadow:0 8px 18px rgba(8,16,22,.30)}
.btn-wpp{background:var(--wpp-claro);color:#fff}
.btn-wpp:hover{background:var(--wpp);transform:translateY(-1px);box-shadow:0 8px 18px rgba(6,105,47,.28)}
.btn-bloco{width:100%}
/* nos botões de bloco, o divisor empurra a ação para o lado oposto */
.btn-bloco .btn-sep{margin-inline:2px}

/* ============================================================
   6. Cabeçalho fixo
   ============================================================ */
/* O cabeçalho é a continuação da primeira dobra: mesmo grafite do topo do
   hero, sem borda nem sombra parados, para não haver emenda visível. */
.cabecalho{
  position:sticky;top:0;z-index:100;
  background:var(--grafite);border:0;box-shadow:none;isolation:isolate;
  transition:background-color .22s ease,box-shadow .22s ease;
}
/* Ao rolar, a barra ganha translucidez e uma sombra suave — nunca uma linha. */
.cabecalho.rolado{
  background:rgba(32,43,51,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 8px 28px rgba(7,22,30,.14);
}
@supports not ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
  .cabecalho.rolado{background:var(--grafite)}
}
.cabecalho .container{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);min-height:var(--header-h)}

/* Nada atrás da logo: sem placa, borda, sombra ou canto arredondado.
   A caixa é fixa e object-fit:contain preserva a proporção do arquivo. */
.marca-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;background:none;border:0}
.marca-logo img{
  width:184px;height:68px;object-fit:contain;object-position:left center;
  border-radius:0;background:transparent;
}

.nav-area{display:flex;align-items:center;gap:36px}
.nav-panel{display:flex;align-items:center;gap:30px;list-style:none;flex-wrap:wrap}
.nav-panel a{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 0;
  color:var(--sobre-escuro);font-weight:600;font-size:.92rem;text-decoration:none;border:0;
  transition:color .18s ease;
}
.nav-panel a:hover{color:var(--ambar)}
.cabecalho .btn-cta-topo{min-height:48px;padding:12px 22px;font-size:.92rem;border-radius:12px;white-space:nowrap}
.cabecalho .btn-cta-topo:hover{box-shadow:0 5px 16px rgba(249,101,4,.16);transform:none}
/* Sobre o grafite o contorno padrão some; o âmbar mantém o foco visível. */
.cabecalho a:focus-visible,.cabecalho button:focus-visible{outline:2px solid var(--ambar);outline-offset:5px}

.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:rgba(255,255,255,.07);border:0;border-radius:10px;cursor:pointer}
.menu-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;border-radius:2px}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}

/* ============================================================
   7. Dobra 1 — Hero   grafite -> petróleo -> petróleo claro
   Degradê institucional do estudo (seção 4-B).
   ============================================================ */
.hero{
  padding:var(--e8) 0 calc(var(--e8) + 10px);
  background:linear-gradient(145deg,var(--grafite) 0%,var(--petroleo) 65%,var(--petroleo-claro) 100%);
  color:var(--sobre-escuro);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e7);align-items:center}
.selo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.79rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ambar);background:rgba(249,101,4,.12);
  border:1px solid rgba(255,154,50,.34);
  padding:7px 14px;border-radius:var(--raio-btn);margin-bottom:var(--e4);
}
.selo .icone{width:15px;height:15px}
.hero h1{font-size:clamp(2.05rem,4.4vw,3.25rem);font-weight:900;color:#fff;letter-spacing:-.022em;margin-bottom:var(--e4)}
.hero h1 em{font-style:normal;color:var(--ambar)}
.hero .lead{font-size:1.12rem;max-width:54ch;margin-bottom:var(--e5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e5)}

/* Composição do hero: a montagem de recortes individuais foi substituída
   pela composição única em images/hero-v2 (regras na seção "Primeira dobra
   remodelada", no fim do arquivo). Aqui fica só a base do foco de luz. */
.hero-composicao{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.hero-composicao::before{
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(118%,540px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(249,101,4,.30) 0%,rgba(249,101,4,.11) 40%,transparent 68%);
}

/* ============================================================
   8. Dobra 2 — Marcas   petróleo claro -> creme -> branco
   ============================================================ */
/* dobra compacta: cabeçalho enxuto, grade densa e recuos curtos */
#marcas{padding-top:calc(var(--fade) + 6px);padding-bottom:var(--e7);background:linear-gradient(180deg,var(--creme) 0%,var(--branco) 100%)}
#marcas.transicao::before{background:linear-gradient(180deg,var(--petroleo-claro) 0%,#4A7382 26%,#8FA3A8 50%,#CFC9C1 74%,var(--creme) 100%)}
#marcas.brilho::after{
  background:
    radial-gradient(62% 44% at 88% 22%, rgba(249,101,4,.11), transparent 62%),
    radial-gradient(50% 38% at 6% 36%, rgba(18,59,74,.07), transparent 66%);
}
.marcas-grade{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  list-style:none;max-width:980px;margin-inline:auto;
}
.marca-item{
  display:flex;align-items:center;justify-content:center;
  min-height:72px;padding:9px var(--e2);
  background:linear-gradient(158deg,#FFFFFF 0%,#F8FAFB 100%);
  border:1px solid var(--borda);border-radius:var(--raio-card);
  box-shadow:var(--sombra-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.marca-item:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:var(--ambar)}
/* tamanho óptico uniforme: a caixa manda, não a resolução do arquivo */
.marca-item img{max-height:42px;max-width:84%;width:auto;height:auto;object-fit:contain}
.marca-dark{
  background:linear-gradient(158deg,var(--petroleo) 0%,var(--grafite) 100%);
  border-color:rgba(255,255,255,.12);
}
.marca-dark:hover{border-color:var(--laranja)}
.marca-generosa img{max-height:56px}
/* logotipo muito largo: precisa de toda a caixa para ficar legível */
.marca-larga img{max-height:22px;max-width:100%}

.marcas-nota{margin:var(--e4) auto 0;max-width:64ch;text-align:center;font-size:.92rem;color:var(--texto-2)}

/* ============================================================
   9. Dobra 3 — Produtos   branco -> superfície
   ============================================================ */
/* recuo extra no topo: abre espaço para a faixa passar acima do título */
#produtos{overflow-x:clip;padding-top:calc(var(--e7) + 40px);background:linear-gradient(180deg,var(--branco) 0%,var(--superficie) 100%)}

/* Faixa diagonal atravessando a costura entre marcas e produtos */
.faixa-costura{
  position:absolute;left:50%;z-index:1;pointer-events:none;
  /* translateY(-50%) é relativo à altura do próprio elemento, então o eixo da
     faixa cai exatamente na costura em qualquer largura de tela. */
  transform:translate(-50%,-50%);
  top:calc(-1 * (var(--e7) + 40px));
  /* sem max-width:none a regra global img{max-width:100%} travava a faixa na
     largura do contêiner, e o atributo height a achatava fora de proporção */
  /* o teto evita que a faixa engorde demais em telas muito largas e chegue
     perto da última linha de texto da dobra anterior */
  width:clamp(600px,82vw,1120px);max-width:none;height:auto;opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}

.produtos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4);list-style:none}
.produto-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio-card);
  overflow:hidden;box-shadow:var(--sombra-1);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.produto-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:#C4D0D6}
.produto-card:focus-within{outline:3px solid var(--laranja-profundo);outline-offset:2px}

/* IMPORTANTE: as fotos de produto têm fundo branco opaco (não recortado).
   O painel precisa ficar branco puro, senão a moldura da foto aparece. */
/* As artes de categoria já vêm com fundo cinza-claro e sombra de contato:
   o painel usa a mesma cor para não aparecer emenda. */
.produto-figura{
  aspect-ratio:1;background:var(--superficie);border-bottom:1px solid var(--borda);
  display:flex;align-items:center;justify-content:center;padding:var(--e3);
}
.produto-figura img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.produto-corpo{display:flex;flex-direction:column;gap:6px;padding:var(--e4);flex:1}
.produto-corpo h3{font-size:1.18rem;font-weight:800}
.produto-corpo p{color:var(--texto-2);font-size:.95rem}
.produto-acao{
  margin-top:auto;padding-top:var(--e1);font-family:Archivo,sans-serif;font-weight:700;color:var(--link);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;
}
.produto-acao .icone{transition:transform .18s ease}
.produto-card:hover .produto-acao .icone{transform:translateX(4px)}
.produto-acao::after{content:"";position:absolute;inset:0}
.produto-acao:hover{text-decoration:underline}
/* mais estreita que o contêiner: a faixa da direita fica livre para a luva
   que desce da dobra seguinte */
.produtos-nota{margin-top:var(--e4);font-size:.9rem;color:var(--texto-2);max-width:62ch}

/* ============================================================
   10. Dobra 4 — Empresas   superfície -> petróleo -> grafite
   ============================================================ */
/* clip apenas no eixo X: a luva ainda atravessa a costura na vertical */
#empresas{overflow-x:clip;background:linear-gradient(180deg,var(--petroleo) 0%,var(--grafite) 100%)}
#empresas.transicao::before{background:linear-gradient(180deg,var(--superficie) 0%,#CBD5DA 24%,#8C9FA9 48%,#3E606E 74%,var(--petroleo) 100%)}

/* Luva petróleo saindo da dobra clara e entrando na escura */
.epi-luva{
  right:clamp(-10px,3vw,64px);top:-232px;
  width:clamp(120px,17vw,208px);rotate:-6deg;
  filter:drop-shadow(0 24px 26px rgba(18,59,74,.34));
}
/* Andaime como apoio ao fundo: sugere a estrutura vertical da obra */
.epi-andaime{
  right:clamp(-90px,-4vw,-34px);top:52px;width:clamp(180px,23vw,320px);
  opacity:.16;filter:none;
}

.atendimento-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e7);align-items:center}
.atendimento-grid .sec-head{margin-bottom:0;max-width:48ch}
.atendimento-cta{margin-top:var(--e5)}
.atendimento-figura img{
  display:block;width:100%;height:auto;aspect-ratio:1280/853;
  border-radius:var(--raio-card);object-fit:cover;box-shadow:var(--sombra-2);
}
@media (max-width:767px){.atendimento-figura img{aspect-ratio:1/1}}
/* ============================================================
   11. Dobra 5 — Como solicitar   grafite -> branco -> creme
   ============================================================ */
#como-solicitar{background:linear-gradient(180deg,var(--branco) 0%,var(--creme) 100%)}
#como-solicitar.transicao::before{background:linear-gradient(180deg,var(--grafite) 0%,#465059 28%,#838C93 52%,#C4CACE 76%,var(--branco) 100%)}

/* Escada: a metáfora dos degraus acompanha a lista de passos */
.epi-escada{
  left:clamp(-70px,-2vw,0px);top:-228px;
  width:clamp(120px,15vw,196px);rotate:4deg;
  filter:drop-shadow(0 24px 24px rgba(18,59,74,.26));
}

.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);list-style:none;counter-reset:passo}
.passo{
  background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio-card);
  padding:var(--e5);box-shadow:var(--sombra-1);
}
.passo::before{
  counter-increment:passo;content:counter(passo);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:var(--laranja);
  color:var(--grafite);font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;
}
/* número e ícone dividem a mesma linha; título e texto ocupam a largura toda */
.passo{display:grid;grid-template-columns:auto auto 1fr;column-gap:10px;align-items:center}
.passo::before{grid-column:1;grid-row:1}
.passo h3{grid-column:1 / -1;grid-row:2;margin-top:var(--e3)}
.passo p{grid-column:1 / -1;grid-row:3}
.passo-icone{
  grid-column:2;grid-row:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:rgba(249,101,4,.10);color:var(--laranja-profundo);
}
.passo-icone .icone{width:20px;height:20px}
.passo h3{font-size:1.12rem;font-weight:800;margin-bottom:var(--e1)}
.passo p{color:var(--texto-2);font-size:.98rem}
.passos-cta{margin-top:var(--e6);text-align:center}

/* ============================================================
   12. Dobra 6 — Unidades   creme -> branco
   ============================================================ */
/* Sem o formulário a dobra ficou mais curta e a bota que desce do FAQ
   alcançava o cartão de Sergipe; o recuo extra recria a faixa livre. */
#unidades{padding-bottom:calc(var(--e7) + 52px);background:linear-gradient(180deg,var(--creme) 0%,var(--branco) 100%)}

.unidades-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4);list-style:none;align-items:start}
.unidade{
  position:relative;overflow:hidden;
  background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio-card);
  padding:var(--e5);height:100%;display:flex;flex-direction:column;gap:var(--e2);
  box-shadow:var(--sombra-1);transition:transform .2s ease,box-shadow .2s ease;
}
.unidade::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--laranja)}
.unidade:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.unidade .uf{
  display:inline-block;align-self:flex-start;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--laranja-profundo);
  border-radius:6px;padding:5px 12px;
}
.unidade h3{font-size:1.34rem;font-weight:800}
.unidade address{font-style:normal;color:var(--texto-2);font-size:.98rem}
.unidade .tel{font-weight:600}
.unidade .tel a{display:inline-flex;align-items:center;gap:6px;vertical-align:-2px}
.unidade .acoes{display:flex;flex-direction:column;gap:var(--e2);margin-top:auto;padding-top:var(--e3)}
.rota{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.rota:hover{text-decoration:underline}

/* ============================================================
   13. Dobra 7 — FAQ   branco -> superfície
   ============================================================ */
#faq{background:linear-gradient(180deg,var(--branco) 0%,var(--superficie) 100%)}

/* Bota atravessando a costura entre unidades e FAQ */
.epi-bota{
  right:clamp(-30px,2vw,40px);top:-146px;
  width:clamp(140px,20vw,290px);rotate:-4deg;
  filter:drop-shadow(0 22px 22px rgba(18,59,74,.26));
}

.faq-lista{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:var(--e2)}
.faq-item{
  background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--raio-card);
  overflow:hidden;box-shadow:var(--sombra-1);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.faq-item:hover{box-shadow:var(--sombra-2)}
.faq-item[open]{border-color:#C4D0D6}
.faq-item summary{
  cursor:pointer;list-style:none;padding:var(--e4);min-height:60px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:1.04rem;color:var(--grafite);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:30px;height:30px;flex:none;border-radius:var(--raio-btn);
  background:var(--laranja-profundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.faq-item[open] summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5.5 12h13'/%3E%3C/svg%3E");
}
.faq-item summary:hover{background:var(--superficie)}
.faq-item summary:focus-visible{outline:3px solid var(--laranja-profundo);outline-offset:-3px}
.faq-item .resposta{padding:0 var(--e4) var(--e4);color:var(--texto-2)}

/* ============================================================
   14. Dobra 8 — Fechamento   superfície -> degradê de marca
   O texto aqui é grafite: é a única cor que mantém 4,5:1 do #F96504
   ao #FF9A32 ao longo de toda a faixa (estudo, seção 5).
   ============================================================ */
#fechamento{
  background:linear-gradient(178deg,var(--laranja) 0%,var(--laranja-medio) 55%,var(--ambar) 100%);
  color:var(--grafite);
}
#fechamento.transicao::before{background:linear-gradient(180deg,var(--superficie) 0%,#FBEADD 22%,#FDC391 48%,#FA932F 74%,var(--laranja) 100%)}
.fechamento{text-align:center}
.fechamento h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:800;letter-spacing:-.015em;margin-bottom:var(--e2);color:var(--grafite)}
.fechamento p{max-width:56ch;margin:0 auto var(--e5);color:var(--grafite);font-weight:600}

/* ============================================================
   15. Rodapé   âmbar -> grafite -> petróleo
   ============================================================ */
.rodape{
  position:relative;isolation:isolate;
  padding:var(--e8) 0 var(--e5);
  background:linear-gradient(180deg,var(--grafite) 0%,var(--petroleo) 100%);
  color:var(--sobre-escuro);
}
.rodape > .container{position:relative;z-index:2}
/* Respirador atravessando a costura entre a faixa laranja e o rodapé */
.epi-mascara{
  right:clamp(-24px,4vw,96px);top:-212px;
  width:clamp(92px,12vw,158px);rotate:-8deg;
  filter:drop-shadow(0 18px 20px rgba(6,24,32,.45));
}
.rodape.transicao{padding-top:calc(var(--fade) + var(--e5))}
.rodape.transicao::before{background:linear-gradient(180deg,var(--ambar) 0%,#C87433 26%,#8A5334 50%,#4C3A33 74%,var(--grafite) 100%)}
.rodape a{color:var(--sobre-escuro);text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e5)}
.rodape h2,.rodape h3{color:#fff;font-size:1rem;font-weight:800;margin-bottom:var(--e3)}
/* precisa mirar só o logotipo: '.rodape img' também pegava o objeto temático
   e forçava altura de 48px nele. */
.rodape-grid img{height:48px;width:auto;border-radius:8px;margin-bottom:var(--e3)}
.rodape p{font-size:.95rem}
.rodape ul{list-style:none;display:flex;flex-direction:column;font-size:.95rem}
/* links de lista não são alvos em linha de texto: precisam de área de toque */
.rodape ul a{display:inline-flex;align-items:center;min-height:44px}
.rodape address{font-style:normal;font-size:.95rem}
.rodape-social{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin-top:var(--e2);font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;
}
.rodape-social .icone{width:18px;height:18px}
.rodape-fim{
  margin-top:var(--e6);padding-top:var(--e4);
  border-top:1px solid var(--borda-escura);
  font-size:.88rem;display:flex;flex-wrap:wrap;gap:var(--e3);justify-content:space-between;
}

/* ============================================================
   16. Responsividade
   No celular a página perde os objetos que invadiriam o conteúdo e
   mantém apenas os que cabem na margem.
   ============================================================ */
@media (max-width:1199px){
  .rodape-grid{grid-template-columns:1fr 1fr}
  .epi-andaime{opacity:.14}
}
@media (max-width:1023px){
  .produtos-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--header-h:76px;--fade:56px}
  section{padding:var(--e6) 0}
  .hero{padding:var(--e6) 0 var(--e7)}
  .rodape{padding:var(--e7) 0 var(--e5)}
  .transicao,.rodape.transicao{padding-top:calc(var(--fade) + var(--e4))}
  .hero-grid{grid-template-columns:1fr;gap:var(--e5)}
  .hero-composicao{order:2;min-height:260px}
  .passos{grid-template-columns:repeat(2,1fr)}
  .atendimento-grid{grid-template-columns:1fr;gap:var(--e5)}
  .atendimento-figura{max-width:520px}
  /* abre uma faixa livre no rodapé da dobra para a luva descer sem cobrir texto */
  #produtos{padding-bottom:calc(var(--e6) + 96px)}
  .unidades-grid{grid-template-columns:1fr}

  .marcas-grade{grid-template-columns:repeat(4,1fr);gap:8px}
  .marca-item{min-height:66px;padding:10px}
  .marca-item img{max-height:32px}
  .marca-generosa img{max-height:48px}
  .rabisco{width:76px;top:-24px;right:-34px}

  .epi-luva{top:-286px;width:126px;right:0}
  .epi-escada{top:-150px;width:118px;left:-46px}
  .epi-bota{top:-104px;width:160px;right:-16px}
  .epi-mascara{top:-150px;width:96px;right:-10px}
  .faixa-costura{width:clamp(560px,96vw,760px)}

  .cabecalho .container{gap:var(--e3)}
  .marca-logo img{width:145px;height:56px}
  .nav-area{gap:var(--e2)}
  /* CTA compacto: o ícone sai para o botão caber ao lado do menu */
  .cabecalho .btn-cta-topo{min-height:44px;padding:10px 14px;font-size:.82rem}
  .cabecalho .btn-cta-topo .icone{display:none}

  /* Menu recolhido só quando o JavaScript assume o controle */
  .js-nav .menu-toggle{display:inline-flex}
  .js-nav .cabecalho .container{position:relative}
  .js-nav .nav-panel{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--grafite);border:0;border-radius:0 0 16px 16px;
    box-shadow:0 14px 24px rgba(7,22,30,.14);padding:var(--e2) 24px var(--e4);
  }
  .js-nav .nav-panel a{display:flex;min-height:48px;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.12)}
  .js-nav .nav-panel li:last-child a{border-bottom:none}
}
@media (max-width:600px){
  body{font-size:16px}
  :root{--fade:48px}
  .container{width:min(var(--container),100% - 40px)}
  .js-nav .nav-panel{padding-inline:20px}
  .produtos-grid{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}
  /* Cartão compacto: arte de 108 px ao lado do texto, em vez de sete
     painéis altos empilhados. */
  /* a arte acompanha a altura do cartão: o divisor corre inteiro e não
     sobra faixa branca acima e abaixo da imagem */
  .produto-card{grid-template-columns:108px 1fr;display:grid;align-items:stretch}
  .produto-figura{
    aspect-ratio:auto;min-height:104px;height:auto;padding:8px;
    border-bottom:0;border-right:1px solid var(--borda);
  }
  .produto-corpo{padding:var(--e3)}
  .produto-corpo h3{font-size:1.06rem}
  .produto-corpo p{font-size:.92rem}
  .rodape-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}

  .marcas-grade{grid-template-columns:repeat(3,1fr);gap:6px}
  .marca-item{min-height:58px;padding:8px}
  .marca-item img{max-height:26px;max-width:88%}
  .marca-generosa img{max-height:40px}
  .marca-larga img{max-height:18px}
  .sec-icone{width:46px;height:46px}
  .rabisco{display:none}

  /* Só sobram os objetos que não disputam espaço com o texto */
  .epi-luva{top:-198px;width:92px;right:0}
  .epi-escada{top:-104px;width:84px;left:-30px}
  .epi-bota{top:-72px;width:118px;right:-22px}
  .epi-andaime{display:none}
}

/* Telas muito estreitas: a barra precisa caber logo + CTA + menu. */
@media (max-width:380px){
  .cabecalho .container{width:calc(100% - 32px);gap:6px}
  .marca-logo img{width:120px;height:50px}
  .nav-area{gap:6px}
  .cabecalho .btn-cta-topo{padding:10px;font-size:.74rem}
}

/* ============================================================
   17. Animações
   Conteúdo nasce visível; o movimento só entra depois que o JS inicializa.
   ============================================================ */
.js-anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.js-anim .reveal.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js-anim .reveal{opacity:1;transform:none}
}

@media print{
  .cabecalho,.menu-toggle,.skip-link,.epi-camada,.marcas-traco,.rabisco,.faixa-costura{display:none}
  body{color:#000;background:#fff}
  section,.rodape{background:#fff !important;color:#000 !important}
  .rodape a,.rodape p,.rodape address{color:#000 !important}
  .transicao::before,.brilho::after{display:none}
  .transicao,.rodape.transicao{padding-top:var(--e6)}
}

/* Primeira dobra remodelada — 09/09/2026 */
.hero-remodelada{padding:clamp(44px,6vw,86px) 0 54px}
.hero-remodelada .hero-grid{grid-template-columns:1fr 1.12fr;gap:clamp(24px,3vw,48px)}
.hero-remodelada .hero-texto{position:relative;z-index:2}
.hero-remodelada h1{font-size:clamp(2.45rem,4.1vw,3.8rem);line-height:1.08;letter-spacing:-.035em;max-width:14ch;margin-bottom:22px}
.hero-remodelada .selo{margin-bottom:24px;font-size:.75rem}
.hero-remodelada .lead{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:32ch;line-height:1.55;margin-bottom:28px}
.hero-remodelada .lead strong{color:#fff;font-weight:600}
.hero-remodelada .hero-ctas{margin-bottom:16px}
.hero-remodelada .btn-primario{min-width:214px;min-height:54px}
.hero-local{font-size:.85rem;color:var(--sobre-escuro);opacity:.85;margin:0}
.hero-remodelada .hero-composicao{min-height:0;isolation:isolate}
.hero-remodelada .hero-composicao::before{width:100%;top:48%;background:radial-gradient(ellipse,rgba(249,101,4,.18),transparent 66%);z-index:-1}
.hero-produtos{display:block;width:100%;position:relative;transform:translateY(22px);filter:drop-shadow(0 24px 20px rgba(3,18,24,.28))}
/* A proporção é reservada por faixa: 3:2 no desktop, 1:1 até 767 px.
   Sem isso a troca de composição no <picture> causaria salto de layout. */
.hero-produtos img{display:block;width:100%;height:auto;aspect-ratio:1536/1024}
@media (max-width:767px){.hero-produtos img{aspect-ratio:1/1}}
@media(max-width:900px){
 .hero-remodelada{padding:32px 0 20px}
 .hero-remodelada .hero-grid{grid-template-columns:1fr;gap:12px}
 .hero-remodelada h1{font-size:clamp(2.25rem,7.6vw,3.2rem);max-width:17ch;margin-bottom:16px}
 .hero-remodelada .selo{margin-bottom:18px}
 .hero-remodelada .lead{font-size:1.05rem;max-width:34ch;margin-bottom:22px}
 .hero-remodelada .hero-ctas{margin-bottom:12px}
 .hero-remodelada .hero-composicao{min-height:0;width:min(100%,440px);margin:0 auto}
 .hero-produtos{transform:none;width:100%}
}
@media(max-width:480px){
 .hero-remodelada .hero-composicao{width:min(86%,330px)}
 .hero-remodelada .hero-local{font-size:.78rem}
}