/* ===========================================================================
   Andaimes Remo · folha de estilo unica do site
   Paleta e tipografia: Brandbook Andaimes Remo v3.0 (Brasilia-DF, 2026)
   Nenhuma cor fora da paleta. Nenhuma fonte fora do manual.

   🔄 [atualizacao 2026-09-10 · fundo de marca] Esta folha nasceu SEM textura,
      citando o brandbook v3.0 (L114 e L158, bloco "Nunca faca": "usar fundo
      escuro, grades, texturas ou padroes"). A leitura do brandbook estava
      certa; o que faltava era o PRECEDENTE.
      O Victor ja havia decidido o contrario para a LP da Remo, e a decisao
      estava escrita la dentro: "o brandbook v3.0 desaconselha padrao de fundo;
      MANTIDO A PEDIDO DO VICTOR, em chave clara e discreta" (13/07/2026), mais
      "R removido do fundo (14/07/2026, pedido do Victor): fica so a trelica".
      Em 10/09/2026 o Victor mandou estender o mesmo fundo ao site.
      ✅ A trelica abaixo foi COPIADA do arquivo da LP, nao recriada.
      ⚠️ O resto do brandbook segue valendo inteiro: fundo branco, verde
      ancora, amarelo/laranja so como sinal, nada de fundo escuro.

   Proporcao obrigatoria (brandbook L91):
      Branco 55% · Verde 30% · off-white de apoio · sinal 3 a 5% NO MAXIMO.
      Se o amarelo/laranja virar fundo, perde a funcao de alerta.
   =========================================================================== */

/* ---- FONTES (SIL OFL 1.1, auto-hospedadas) --------------------------------
   ✅ Licenca conferida ANTES de usar, em 10/09/2026, no repo oficial do Google
   Fonts. Bebas Neue (c) 2010 Dharma Type · Barlow (c) 2017 Barlow Project
   Authors. A OFL PERMITE auto-hospedar, embutir e subsetar.
   📌 Esta conferencia existe porque em 04/09/2026 a Switzer foi subsetada no
   site da Personal Dog e so depois se leu a clausula ITF que proibia
   exatamente aquilo, com o arquivo ja dentro do site de uma cliente. */
@font-face{font-family:'Bebas Neue';src:url('../fonte/bebas-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonte/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonte/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonte/barlowcond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---- TOKENS --------------------------------------------------------------- */
:root{
  --branco:#FFFFFF;        /* fundo primario. Espaco e respiro (55% da peca)   */
  --verde:#1A4A1A;         /* ancora da marca. Blocos, faixas, titulos, botoes */
  --verde-brilho:#6ABF6A;  /* enfase: UMA palavra-chave do titulo             */
  --offwhite:#F0EDE5;      /* paineis e cards de apoio. Calor sobre o branco   */
  --amarelo:#F5C842;       /* conversao e oferta. Faixa de CTA. SINAL, 3 a 5%  */
  --laranja:#E8761A;       /* seguranca e alerta (NR-18 e NR-35). SINAL        */

  --tinta:#1C1C1A;         /* corpo de texto: quase preto, nunca preto puro    */
  --tinta-fraca:#5A5A54;   /* legenda, meta, spec secundaria                   */
  --linha:#E2DFD6;         /* borda de card e divisor, derivada do off-white   */

  --sombra:0 2px 12px rgba(26,74,26,.08);
  --sombra-forte:0 8px 28px rgba(26,74,26,.14);
  --raio:10px;             /* mais reto que o da PD: obra e estrutura, nao pet */
  --largura:1120px;
}

/* ---- BASE ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Bebas so existe em caixa-alta (brandbook L100: "Sempre em caixa-alta").
   O letter-spacing positivo e obrigatorio: display condensada em caixa-alta
   sem tracking fecha demais e some a leitura em titulo grande. */
h1,h2,h3,.rotulo,.btn{font-family:'Bebas Neue','Barlow Condensed',sans-serif;text-transform:uppercase}
h1,h2,h3{margin:0 0 14px;font-weight:400;letter-spacing:.012em;line-height:1.04;color:var(--verde)}
h1{font-size:clamp(2.3rem,6vw,3.9rem)}
h2{font-size:clamp(1.8rem,4.2vw,2.7rem)}
h3{font-size:1.42rem}

/* A assinatura tipografica da marca (brandbook L109): UMA unica palavra-chave
   do titulo recebe o verde brilho. ⛔ Amarelo e laranja NUNCA fazem esse papel,
   eles sao sinal. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--verde-brilho)}

p{margin:0 0 16px}
.env{max-width:var(--largura);margin:0 auto;padding:0 22px}
section{padding:64px 0}
section.claro{background-color:var(--offwhite);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%231A4A1A'%20stroke-width='1.3'%20stroke-opacity='0.10'%3E%3Cpath%20d='M0%200V200%20M100%200V200%20M200%200V200'/%3E%3Cpath%20d='M0%200H200%20M0%2066H200%20M0%20133H200%20M0%20200H200'/%3E%3Cpath%20d='M0%2066%20L100%200%20M100%2066%20L200%200%20M0%20133%20L100%2066%20M100%20133%20L200%2066%20M0%20200%20L100%20133%20M100%20200%20L200%20133'/%3E%3C/g%3E%3Cg%20fill='%231A4A1A'%20fill-opacity='0.16'%3E%3Ccircle%20cx='0'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='200'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:196px 196px;background-attachment:fixed;}

/* Rotulo: Barlow Condensed com tracking ABERTO (brandbook L101) */
.rotulo{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.83rem;
  letter-spacing:.16em;color:var(--tinta-fraca);margin:0 0 10px;display:block;
}
.rotulo::before{content:"";display:inline-block;width:26px;height:3px;background:var(--laranja);vertical-align:middle;margin-right:10px}
.centro{text-align:center}
.lead{max-width:44em;font-size:1.06rem;color:var(--tinta-fraca)}
.centro .lead{margin-left:auto;margin-right:auto}

/* ---- BOTOES ---------------------------------------------------------------
   O amarelo e o CTA e SO o CTA. E o unico lugar do site onde ele aparece em
   area, e por isso ele nao pode aparecer em mais nada: e assim que os 3 a 5%
   do brandbook sao respeitados sem ninguem medir com regua. */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.04rem;
  letter-spacing:.06em;text-decoration:none;cursor:pointer;
  padding:13px 24px;border-radius:var(--raio);border:2px solid transparent;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn svg{width:19px;height:19px;flex:none}
.btn-zap{background:var(--amarelo);color:var(--verde)}
.btn-zap:hover{transform:translateY(-2px);box-shadow:var(--sombra-forte)}
.btn-linha{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn-linha:hover{background:var(--verde);color:var(--branco)}
.btn-claro{background:var(--branco);color:var(--verde)}
.btn-claro:hover{transform:translateY(-2px);box-shadow:var(--sombra-forte)}
.acoes{display:flex;gap:12px;flex-wrap:wrap}
.centro .acoes{justify-content:center}

/* TRAVA DURA, herdada da casa: o flutuante de WhatsApp NUNCA nasce invisivel.
   Animacao de entrada e enfeite, CTA e receita. (regra LP-04) */
.zap-fixo,.btn-zap{opacity:1 !important}
.zap-fixo{
  display:none;position:fixed;left:16px;right:16px;bottom:14px;z-index:60;
  justify-content:center;box-shadow:var(--sombra-forte);
}

/* ---- HEADER --------------------------------------------------------------- */
.topo{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--linha)}
.topo>.env{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.marca img{height:38px;width:auto}
.marca b{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.32rem;line-height:1;color:var(--verde);letter-spacing:.02em}
.marca span{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.19em;color:var(--tinta-fraca)}
.menu{display:flex;gap:22px;align-items:center}
.menu a{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.99rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--verde)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--laranja)}
.abrir-menu{display:none;background:none;border:0;padding:7px;cursor:pointer;color:var(--verde)}
.abrir-menu svg{width:26px;height:26px}

/* ---- HERO ----------------------------------------------------------------- */
.hero{background-color:var(--offwhite);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%231A4A1A'%20stroke-width='1.3'%20stroke-opacity='0.10'%3E%3Cpath%20d='M0%200V200%20M100%200V200%20M200%200V200'/%3E%3Cpath%20d='M0%200H200%20M0%2066H200%20M0%20133H200%20M0%20200H200'/%3E%3Cpath%20d='M0%2066%20L100%200%20M100%2066%20L200%200%20M0%20133%20L100%2066%20M100%20133%20L200%2066%20M0%20200%20L100%20133%20M100%20200%20L200%20133'/%3E%3C/g%3E%3Cg%20fill='%231A4A1A'%20fill-opacity='0.16'%3E%3Ccircle%20cx='0'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='200'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:196px 196px;background-attachment:fixed;padding:70px 0 60px;border-bottom:1px solid var(--linha)}
.hero .env{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero-figura{position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra)}
.hero-figura img{width:100%;height:auto;border-radius:6px}
.hero-figura figcaption{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;letter-spacing:.08em;color:var(--tinta-fraca);text-transform:uppercase;margin-top:9px;text-align:center}

/* Selo de permanencia. E a prova INCOMPARAVEL da Remo: 1986 e o unico numero
   com lastro primario (pagina Quem Somos do proprio cliente). ⛔ Nao existe
   nota do Google nem depoimento no material, entao nada disso entra. */
.selo{display:inline-flex;align-items:baseline;gap:9px;background:var(--verde);color:var(--branco);border-radius:var(--raio);padding:9px 15px;margin-bottom:16px}
.selo b{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.75rem;line-height:1}
.selo small{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.22}

/* ---- FAIXA DE CONFIANCA --------------------------------------------------- */
.faixa{background:var(--verde);color:var(--branco)}
.faixa .env{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:26px;padding-bottom:26px}
.faixa div{display:flex;gap:11px;align-items:flex-start;font-size:.97rem;line-height:1.45}
.faixa svg{width:21px;height:21px;flex:none;color:var(--verde-brilho);margin-top:2px}

/* ---- GRADES E CARDS ------------------------------------------------------- */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px}
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:22px;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte)}
.claro .cartao{background:var(--branco)}
.cartao svg.ico{width:32px;height:32px;color:var(--verde);margin-bottom:11px}
.cartao h3{margin-bottom:7px}
.cartao p{font-size:.96rem;color:var(--tinta-fraca);margin-bottom:14px}
.cartao .mais{margin-top:auto;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--verde);text-decoration:none;font-size:.95rem}
.cartao .mais:hover{color:var(--laranja)}

/* Card de produto: a foto e quadrada (todas as do acervo sao 585x585 ou
   1200x1200), entao o quadro e quadrado e nada e cortado. */
.produto{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.produto:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte)}
.produto .quadro{aspect-ratio:1/1;background:var(--offwhite);display:flex;align-items:center;justify-content:center;padding:14px}
.produto .quadro img{width:100%;height:100%;object-fit:contain}
.produto .quadro.vazio{color:var(--verde);opacity:.32}
.produto .quadro.vazio svg{width:62px;height:62px}
.produto .corpo{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.produto h3{font-size:1.16rem;margin-bottom:6px}
.produto p{font-size:.9rem;color:var(--tinta-fraca);margin-bottom:12px}
.produto .mais{margin-top:auto;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--verde);font-size:.9rem}

/* ---- DUO (texto + figura lado a lado) ------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.duo .figura{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra)}
.duo .figura img{width:100%;height:auto;border-radius:6px}
.duo .figura figcaption{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;letter-spacing:.08em;color:var(--tinta-fraca);text-transform:uppercase;margin-top:9px;text-align:center}

/* ---- CHECKLIST ------------------------------------------------------------ */
.checklist{list-style:none;padding:0;margin:0 0 22px}
.checklist li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;font-size:.99rem}
.checklist svg{width:20px;height:20px;flex:none;color:var(--verde-brilho);margin-top:3px}
.checklist strong{color:var(--verde)}

/* ---- FICHA TECNICA -------------------------------------------------------- */
.ficha{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.97rem}
.ficha th,.ficha td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linha)}
.ficha th{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--verde);width:42%;font-size:.9rem}
.ficha tr:last-child th,.ficha tr:last-child td{border-bottom:0}

/* ---- AVISO DE NORMA -------------------------------------------------------
   O laranja e o token de seguranca e norma (brandbook L81). E o unico bloco
   do site que o usa em area, e ele e fino de proposito: barra lateral, nunca
   fundo cheio, senao estoura o teto de 3 a 5% de sinal. */
.aviso{background:var(--branco);border:1px solid var(--linha);border-left:4px solid var(--laranja);border-radius:var(--raio);padding:18px 20px;margin:0 0 20px}
.aviso p:last-child{margin-bottom:0}
.aviso strong{color:var(--verde)}
.claro .aviso{background:var(--branco)}
.normas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.normas li{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.83rem;letter-spacing:.08em;text-transform:uppercase;color:var(--verde);background:var(--offwhite);border:1px solid var(--linha);border-radius:99px;padding:5px 13px}

/* ---- FAQ (details nativo, zero JS) ---------------------------------------- */
details{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:11px;overflow:hidden}
details summary{cursor:pointer;padding:16px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.06rem;letter-spacing:.03em;color:var(--verde);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1;color:var(--laranja);flex:none}
details[open] summary::after{content:"\2013"}
details .conteudo{padding:0 20px 18px;font-size:.99rem;color:var(--tinta-fraca)}
details .conteudo p:last-child{margin-bottom:0}

/* ---- CHAMADA FINAL -------------------------------------------------------- */
.chamada{background:var(--verde);color:var(--branco);text-align:center}
.chamada h2{color:var(--branco)}
.chamada h2 em{color:var(--verde-brilho)}
.chamada p{color:rgba(255,255,255,.86);max-width:40em;margin-left:auto;margin-right:auto}

/* ---- CONTATO -------------------------------------------------------------- */
.dados{list-style:none;padding:0;margin:0 0 20px}
.dados li{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.dados svg{width:21px;height:21px;flex:none;color:var(--verde);margin-top:3px}
.dados b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:.82rem;color:var(--tinta-fraca)}

/* ---- RODAPE --------------------------------------------------------------- */
.rodape{background-color:var(--offwhite);background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%231A4A1A'%20stroke-width='1.3'%20stroke-opacity='0.10'%3E%3Cpath%20d='M0%200V200%20M100%200V200%20M200%200V200'/%3E%3Cpath%20d='M0%200H200%20M0%2066H200%20M0%20133H200%20M0%20200H200'/%3E%3Cpath%20d='M0%2066%20L100%200%20M100%2066%20L200%200%20M0%20133%20L100%2066%20M100%20133%20L200%2066%20M0%20200%20L100%20133%20M100%20200%20L200%20133'/%3E%3C/g%3E%3Cg%20fill='%231A4A1A'%20fill-opacity='0.16'%3E%3Ccircle%20cx='0'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='200'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:196px 196px;background-attachment:fixed;border-top:1px solid var(--linha);padding:48px 0 26px}
.rodape .env{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
.rodape h4{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;color:var(--verde);margin:0 0 13px}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:8px}
.rodape a{color:var(--tinta-fraca);text-decoration:none;font-size:.94rem}
.rodape a:hover{color:var(--verde)}
.rodape p{font-size:.94rem;color:var(--tinta-fraca)}
.assinatura{grid-column:1/-1;border-top:1px solid var(--linha);margin-top:22px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;color:var(--tinta-fraca)}

/* ---- BANNER DE COOKIES (LGPD) --------------------------------------------- */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;background:var(--branco);border:1px solid var(--linha);border-left:4px solid var(--verde);border-radius:var(--raio);box-shadow:var(--sombra-forte);padding:18px 20px;display:none;gap:16px;align-items:center;flex-wrap:wrap}
.cookies.abrir{display:flex}
.cookies p{margin:0;flex:1 1 320px;font-size:.93rem;color:var(--tinta-fraca)}
.cookies .acoes{flex:none}
/* "Recusar" tao visivel quanto "Aceitar". Botao de recusa escondido e pratica
   que a ANPD ja reprovou. Mesmo peso, mesma area, so muda a cor. */
.cookies .btn{padding:10px 18px;font-size:.95rem}

/* ---- REVELACAO AO ROLAR ---------------------------------------------------
   TRAVA 1: o estado escondido so existe sob .js, que o proprio script adiciona.
   Sem isso, um JS que falha deixa a pagina EM BRANCO na frente do cliente,
   porque o CSS esconde e ninguem revela. O estado inseguro nunca pode ser o
   estado de falha. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .rv.ver{opacity:1;transform:none}
.grade .rv:nth-child(2){transition-delay:.07s}
.grade .rv:nth-child(3){transition-delay:.14s}
.grade .rv:nth-child(4){transition-delay:.21s}

/* ---- RESPONSIVO ----------------------------------------------------------- */
@media (max-width:900px){
  .hero .env,.duo,.contato{grid-template-columns:1fr;gap:30px}
  .faixa .env{grid-template-columns:1fr;gap:16px}
  .menu{display:none}
  .menu.aberto{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:64px;left:0;right:0;padding:20px 22px;background:var(--branco);border-bottom:1px solid var(--linha);box-shadow:var(--sombra)}
  .abrir-menu{display:block}
  .topo>.env>.btn{display:none}   /* o CTA do topo sairia da tela ao rolar... */
  .zap-fixo{display:inline-flex}  /* ...e vira a barra fixa, que nao sai      */
  .rodape{padding-bottom:96px}    /* espaco para a barra nao cobrir o rodape  */
  .rodape .env{grid-template-columns:1fr 1fr}
  section{padding:46px 0}
  .hero{padding:44px 0 40px}
}
@media (max-width:560px){
  .rodape .env{grid-template-columns:1fr}
  .acoes{flex-direction:column;align-items:stretch}
  .acoes .btn{justify-content:center}
  .assinatura{flex-direction:column;gap:8px}
}
/* Quando o banner de cookies esta aberto, a barra de WhatsApp sobe.
   Os dois sao position:fixed no mesmo canto e se sobreporiam. */
html.cookies-abertos .zap-fixo{bottom:150px}
@media (max-width:720px){html.cookies-abertos .zap-fixo{bottom:210px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .js .rv{opacity:1;transform:none}
}
@media print{
  .js .rv{opacity:1;transform:none}
  .topo,.zap-fixo,.cookies{display:none}
}

/* ---- FUNDO DE MARCA: trelica de andaime ------------------------------------
   Copiado da LP da Remo (.grid-bg). Mesmo desenho, mesma opacidade (fio a 10%,
   no a 16%), mesmo tile de 196px, mesma flutuacao de 11s.
   Camada unica em body::before com z-index:-1: fica atras de todo o conteudo e
   na frente da cor do body. pointer-events:none para nunca capturar clique.
   As superficies off-white viram translucidas para a trelica atravessar o site
   inteiro em vez de aparecer so nas faixas brancas. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%231A4A1A'%20stroke-width='1.3'%20stroke-opacity='0.10'%3E%3Cpath%20d='M0%200V200%20M100%200V200%20M200%200V200'/%3E%3Cpath%20d='M0%200H200%20M0%2066H200%20M0%20133H200%20M0%20200H200'/%3E%3Cpath%20d='M0%2066%20L100%200%20M100%2066%20L200%200%20M0%20133%20L100%2066%20M100%20133%20L200%2066%20M0%20200%20L100%20133%20M100%20200%20L200%20133'/%3E%3C/g%3E%3Cg%20fill='%231A4A1A'%20fill-opacity='0.16'%3E%3Ccircle%20cx='0'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='0'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='66'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='133'%20r='2.2'/%3E%3Ccircle%20cx='0'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='100'%20cy='200'%20r='2.2'/%3E%3Ccircle%20cx='200'%20cy='200'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;background-position:0 0;background-size:196px 196px;
}
/* ⛔ SEM ANIMACAO, e e decisao, nao esquecimento. A LP flutua a trelica em 11s,
   e num link-in-bio de uma tela isso e charme. Aqui a trelica precisa casar com
   a das secoes off-white (background-attachment:fixed), e camada animada nao
   casa com camada fixa: o descolamento apareceria bem na fronteira das secoes.
   Em site de 27 paginas com rolagem longa, fundo que se mexe atrapalha ler. */
/* ⛔ Na impressao, fundo sai: economiza tinta e nao suja a ficha tecnica. */
@media print{ body::before{display:none} }

/* ---- MAIS VERDE DE MARCA (pedido do Victor, 10/09/2026) -------------------
   O site estava tecnicamente correto e visualmente timido: verde so no texto,
   no header e em duas faixas. O brandbook v3.0 da ao verde 30% da peca, e nos
   estavamos bem abaixo disso. O que entra aqui e MASSA de verde em elemento
   estrutural, nao cor nova: nenhuma cor fora da paleta.
   ⛔ O amarelo/laranja NAO acompanha: ele e sinal, teto de 3 a 5%. */

/* Icone da categoria dentro de um badge verde solido */
.cartao .ico{
  box-sizing:content-box;width:26px;height:26px;padding:11px;
  background:var(--verde);color:var(--branco);border-radius:var(--raio);
  stroke:var(--branco);
}
.cartao:hover .ico{background:var(--verde-brilho);color:var(--verde)}

/* Fio verde no topo de cada card: marca a familia sem pesar */
.cartao,.produto{border-top:3px solid var(--verde)}
.cartao:hover,.produto:hover{border-top-color:var(--verde-brilho)}

/* A moldura da foto do produto ganha o verde no lugar do cinza neutro */
.produto .quadro{border-bottom:1px solid var(--linha)}
.produto:hover .quadro{background:#E8EDE6}

/* Pilulas de norma (NR-18, ART) em verde solido: e o argumento da casa */
.normas li{background:var(--verde);color:var(--branco);border-color:var(--verde)}

/* Rotulo de secao: o tracinho ganha um segundo tempo em verde */
.rotulo::before{background:linear-gradient(90deg,var(--laranja) 0 46%,var(--verde) 46% 100%)}

/* Ficha tecnica: cabecalho de linha em verde, para a tabela ter marca */
.ficha th{color:var(--verde)}
.ficha tr:nth-child(odd) th,.ficha tr:nth-child(odd) td{background:rgba(26,74,26,.035)}

/* Barra lateral verde no bloco de aviso que fala de norma */
.aviso.norma{border-left-color:var(--verde)}

/* FAQ: a seta e o titulo aberto em verde */
details[open] summary{color:var(--verde);background:rgba(26,74,26,.05)}

/* Selo de ano e badges herdam o verde principal (ja era), agora com contorno */
.selo{box-shadow:inset 0 0 0 1px var(--verde-brilho)}

/* Categoria com 1 ou 2 itens: sem teto, o auto-fit estica o card unico para
   a largura toda e o .quadro (aspect-ratio 1/1) vira um bloco de 1120px.
   Foi o que aconteceu em /betoneiras/. */
.grade-poucos{grid-template-columns:repeat(auto-fit,minmax(248px,300px));justify-content:start}

/* Logo do rodape: largura propria e altura automatica, para nunca depender
   de atributo errado no HTML. */
.rodape img{width:190px;height:auto;display:block;margin-bottom:14px}

/* O cartao inteiro e um <a>, entao h3 e p herdavam o sublinhado do link e o
   bloco ficava com cara de lista de links crus. So o rotulo "Ver X" sublinha,
   e so no hover. */
.cartao,.cartao h3,.cartao p,.produto,.produto h3,.produto p{text-decoration:none}
.cartao .mais,.produto .mais{text-decoration:none}
.cartao:hover .mais,.produto:hover .mais{text-decoration:underline;text-underline-offset:3px}