/* =========================================================
   Higea Soluções Químicas
   Folha compartilhada: home, catálogo e as 54 páginas de produto
   ========================================================= */

:root{
  /* Amostrados do rótulo do galão, não escolhidos no olho.
     Contrastes computados: acento 4.84:1 e bloco 9.41:1 sobre o canvas,
     branco 5.01:1 sobre o acento. O verde reprova em 1.48:1 e por isso
     só existe na marca e escrito sobre o azul profundo, onde dá 6.36:1. */
  --azul:#2761FB;
  --azul-fundo:#1B4FE0;
  --azul-escuro:#1A37A8;
  --azul-lavado:#E8EEFE;
  --azul-bloco:#1A37A8;
  --verde:#53E9B7;
  --rodape:var(--azul-bloco);
  --grafite:#141C2B;
  --cinza:#57657D;
  --cinza-claro:#8795AB;
  --branco:#FFFFFF;
  --canvas:#FAFBFD;
  --claro:#F2F5FA;
  --linha:rgba(20,28,43,.12);
  --linha-forte:rgba(20,28,43,.22);
  --linha-azul:rgba(255,255,255,.28);

  /* A MuseoModerno fica só no logotipo, que é imagem.
     A display é a Outfit, geométrica como a marca, mas com glifos normais. */
  --display:"Outfit",system-ui,sans-serif;
  --texto:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --peso-titulo:700;

  --e1:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);
  --maxw:1180px;
  --gutter:clamp(18px,4vw,42px);
  --raio:16px;
  --sombra:0 24px 60px -40px rgba(22,37,42,.45);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--grafite);
  font-family:var(--texto);font-weight:400;font-size:16.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:var(--peso-titulo,700);line-height:1.07;
  letter-spacing:-.02em;margin:0}

/* =========================================================
   CAMADA DE AMBIENTE
   Fica atrás de tudo, em nível de sussurro, para rolar a página
   parecer atravessar um lugar em vez de passar por blocos empilhados.
   ========================================================= */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 38% at 14% 18%,rgba(39,97,251,.075),transparent 68%),
    radial-gradient(44% 36% at 88% 72%,rgba(39,97,251,.06),transparent 68%),
    radial-gradient(60% 50% at 52% 46%,rgba(39,97,251,.03),transparent 72%);
  animation:ambDeriva 84s var(--e2) -26s infinite alternate}
@keyframes ambDeriva{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.4%,1.8%,0) scale(1.06)}
  100%{transform:translate3d(2%,-2.2%,0) scale(1.03)}
}
/* Só o conteúdo que rola precisa subir acima da camada de ambiente.
   Regra ampla aqui derrubava o position:fixed da navegação e do botão. */
main,.foot{position:relative;z-index:1}

p{margin:0}

/* =========================================================
   A PROVETA
   O elemento assinatura do site. Uma coluna graduada na borda
   esquerda que enche conforme a pagina rola, e cuja escala nao
   marca porcentagem: marca litros, de 0 a 20.000. E a barra de
   rolagem trocada por vidraria de laboratorio.
   ========================================================= */

:focus-visible{outline:2.5px solid var(--azul);outline-offset:3px;border-radius:5px}
.azul :focus-visible{outline-color:#fff}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0;z-index:300;background:var(--azul);color:#fff;
  padding:13px 22px;border-radius:0 0 10px 0;font-weight:500;font-size:14px}
.pular:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap--estreito{max-width:880px}

/* ---------- tipografia utilitaria ---------- */
.kicker{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--azul);margin:0 0 16px}
.azul .kicker{color:rgba(255,255,255,.78)}
.t1{font-size:clamp(34px,5.6vw,68px)}
.t2{font-size:clamp(27px,3.9vw,48px)}
.t3{font-size:clamp(19px,2.2vw,26px)}
.lede{color:var(--cinza);font-size:clamp(15.5px,1.5vw,18px);max-width:60ch}
.azul .lede{color:rgba(255,255,255,.88)}
.azul{background:var(--azul-bloco);color:#fff}
.azul h1,.azul h2,.azul h3{color:#fff}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--texto);font-size:15.5px;font-weight:500;text-decoration:none;
  padding:13px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:background .3s var(--e1),color .3s var(--e1),border-color .3s var(--e1),
             transform .3s var(--e1),box-shadow .3s var(--e1)}
.btn--azul{background:var(--azul);color:#fff;box-shadow:0 10px 26px -14px var(--azul)}
.btn--azul:hover{background:var(--azul-escuro);transform:translateY(-2px);
  box-shadow:0 16px 32px -14px var(--azul)}
.btn--linha{border-color:var(--linha-forte);color:var(--grafite);background:transparent}
.btn--linha:hover{border-color:var(--azul);color:var(--azul)}
.btn--branco{background:#fff;color:var(--azul)}
.btn--branco:hover{background:var(--azul-lavado);transform:translateY(-2px)}
.btn--linha-branca{border-color:var(--linha-azul);color:#fff;background:transparent}
.btn--linha-branca:hover{border-color:#fff;background:rgba(255,255,255,.12)}
@media (pointer:coarse){.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- navegacao ---------- */
/* A navegação tem ALTURA FIXA de propósito: a barra de busca do catálogo
   gruda embaixo dela, e altura que muda faz uma cobrir a outra. */
:root{--navh:88px}
/* A navegação é SEMPRE uma barra branca sólida. Estado transparente era
   a origem do cabeçalho sumindo: logo branca sobre conteúdo branco. */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--navh);
  display:flex;align-items:center;gap:26px;padding:0 var(--gutter);
  background:#fff;border-bottom:1px solid var(--linha);
  transition:box-shadow .4s var(--e1)}
.nav.fixa{box-shadow:0 6px 24px -14px rgba(22,37,42,.5)}
/* conjunto horizontal: a palavra como imagem e a assinatura como texto de
   verdade, porque no arquivo original ela e pequena demais para ler no topo */
.nav__logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;text-decoration:none}
.nav__logo img{height:46px;width:auto}
.nav__tag{font-family:"MuseoModerno",var(--display);font-size:14.5px;font-weight:400;
  line-height:1.1;color:var(--azul);white-space:nowrap;padding-top:7px}
@media (max-width:900px){:root{--navh:80px}.nav__logo img{height:42px}.nav__tag{font-size:13px}}
@media (max-width:520px){:root{--navh:70px}.nav__logo img{height:36px}.nav__tag{display:none}}
.nav__logo .claro{display:none}
.nav__links{display:flex;gap:26px;margin-left:auto;align-items:baseline}
.nav__links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--cinza);
  position:relative;transition:color .3s var(--e1)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--azul);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--e1)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--grafite)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav .btn{flex:0 0 auto}
@media (max-width:900px){.nav__links{display:none}.nav{gap:14px}.nav .btn{margin-left:auto}}

/* ---------- secoes ---------- */
.sec{position:relative;padding-block:clamp(46px,7vw,104px);
  scroll-margin-top:calc(var(--navh,74px) + 22px)}
.sec--claro{background:var(--claro)}
.sec--azul{background:var(--azul-bloco);color:#fff}
.sec--azul h2,.sec--azul h3{color:#fff}
.sec__cab{max-width:72ch;margin-bottom:clamp(24px,3.4vw,46px)}
.sec__cab .lede{margin-top:20px}

/* ---------- rodape ---------- */
/* mesma cor do bloco de contato acima, com uma linha clara marcando onde
   o rodapé começa: um bloco só, com separação que se enxerga */
.foot{background:var(--rodape);color:#fff;padding-block:clamp(40px,5vw,66px) 26px;
  border-top:1px solid rgba(255,255,255,.26)}
/* Eram tres colunas para duas listas de links; agora e uma lista so,
   e a identidade ganha o espaco que as listas gastavam. */
.foot__top{display:grid;grid-template-columns:1.25fr .95fr .8fr;gap:clamp(24px,3.4vw,54px)}
@media (max-width:860px){.foot__top{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){.foot__top{grid-template-columns:1fr;gap:30px}}
/* O PNG da logo tem 79px de transparencia em cima, 18,6% da altura do
   arquivo: exibido a 210px de largura isso vira 23px de vazio, e era
   por isso que o titulo da coluna ao lado parecia mais alto que a
   marca. Puxando pelos mesmos 23px, a tinta alinha com o topo do texto.
   A transparencia de baixo, que e igual, ja faz o papel da margem. */
.foot__logo img{width:210px;margin:-23px 0 0}
.foot h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-lavado);margin:0 0 15px;font-weight:500}
.foot a{display:block;color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;
  padding:5px 0;transition:color .3s var(--e1)}
.foot a:hover{color:#fff}
.foot__links span{display:block;color:rgba(255,255,255,.7);font-size:14px;
  margin-bottom:9px;line-height:1.5}
.foot__contato{margin-top:18px;display:flex;flex-direction:column;gap:7px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.foot__contato a{color:rgba(255,255,255,.86);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);width:fit-content;
  transition:border-color .3s var(--e1),color .3s var(--e1)}
.foot__contato a:hover{color:#fff;border-bottom-color:#fff}
/* e-mail nao e codigo: sai da mono, como saiu na chamada de WhatsApp */
.foot__contato span{color:rgba(255,255,255,.72);font-family:var(--texto);font-size:14px;
  letter-spacing:0}
.foot__addr{color:rgba(255,255,255,.76);font-size:13.8px;line-height:1.85;font-style:normal}
.foot__bar{margin-top:clamp(34px,5vh,50px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;
  color:rgba(255,255,255,.74);letter-spacing:.04em}
@media (max-width:820px){.foot__top{grid-template-columns:1fr}}
@media (max-width:620px){
  /* Empilhadas, as tres colunas do rodape somavam 983px, quase uma tela
     e meia so de rodape. A marca fica em cima, ocupando a largura toda,
     e as duas listas de links dividem a linha de baixo. */
  .foot{padding-block:32px 20px}
  .foot__top{grid-template-columns:1fr 1fr;gap:22px 18px}
  .foot__logo{grid-column:1 / -1}
  .foot__logo img{width:150px;margin-bottom:14px}
  .foot a{font-size:13.6px}
  .foot__addr{font-size:12.8px;line-height:1.7}
  .foot__bar{margin-top:26px}
}
/* Abaixo de 820px o bloco da marca passa a ocupar a linha inteira - em
   621-820 porque o topo vira uma coluna so, e ate 620 porque ele pede
   grid-column:1/-1 para as duas listas dividirem a linha de baixo. Numa
   faixa larga com pouco texto, alinhado a esquerda o endereco fica
   encostado num canto com o resto da largura vazia. Centralizado, a
   marca e os cinco dados leem como um bloco de identidade.

   Esta regra vem DEPOIS das outras de proposito: mesma especificidade,
   so a ordem decide, e ja errei isso neste projeto. As duas listas de
   links continuam a esquerda - centralizar texto em coluna estreita
   piora a leitura, e nao e o que foi pedido. */
@media (max-width:820px){
  .foot__logo{text-align:center}
  /* a img e inline, entao o text-align do pai ja a centraliza; o
     margin-inline:auto cobre o caso de alguem torna-la block depois */
  .foot__logo img{margin-inline:auto}
  .foot__addr{margin-inline:auto;max-width:34ch}

  /* As duas listas lado a lado ficavam com 168px cada, e nessa largura
     o contato nao cabe: "WhatsApp (19) 90000-0000" quebrava no meio do
     numero e o horario em duas linhas. Medido, a coluna da direita
     tinha ritmo perfeito (5 itens de 33px) e a da esquerda 55/21/42 -
     dois espacamentos diferentes disputando, porque o link usa padding
     e o span usava margin.

     Empilhadas e centradas, as duas ganham a largura inteira: nada
     quebra, o ritmo passa a ser um so, e o rodape inteiro le como um
     bloco centrado em vez de uma marca centrada com duas listas
     encostadas na borda. */
  .foot__top{grid-template-columns:1fr;gap:clamp(24px,3.4vw,30px);text-align:center}
  .foot__links h2{margin-bottom:9px}
  /* Mesmo passo para link e para texto simples. Sem isto o link ficava
     em 35px e o span em 33px: a mesma coluna com dois ritmos, que e o
     tipo de desalinho que se sente antes de se enxergar. */
  .foot a,.foot__links span{font-size:13.8px;line-height:1.5;
    padding:5px 0;margin-bottom:0}
  .foot__bar{justify-content:center;text-align:center;gap:6px 18px}
}

/* ---------- whatsapp flutuante ---------- */
.zap{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:250;
  display:flex;align-items:center;gap:11px;flex-direction:row-reverse}
.zap__btn{width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);text-decoration:none;
  transition:transform .32s var(--e1),box-shadow .32s var(--e1)}
.zap__btn:hover{transform:scale(1.07);box-shadow:0 16px 36px -8px rgba(37,211,102,.75)}
.zap__btn svg{width:31px;height:31px;fill:#fff}
.zap__balao{background:#fff;color:var(--grafite);border:1px solid var(--linha);
  border-radius:14px;padding:10px 15px;font-size:14px;font-weight:500;line-height:1.35;
  box-shadow:var(--sombra);max-width:min(220px,52vw);
  opacity:0;transform:translateX(14px) scale(.94);transform-origin:right center;
  pointer-events:none;transition:opacity .45s var(--e1),transform .45s var(--e1)}
.zap.aberto .zap__balao{opacity:1;transform:none;pointer-events:auto}
.zap__fechar{position:absolute;top:-8px;left:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--grafite);color:#fff;border:0;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0}
.zap__balao{position:relative}
.zap__pulso{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulso 2.8s var(--e2) infinite;pointer-events:none;
  transition:opacity .4s var(--e1)}
/* Quem ja fechou o balao, ou ja tocou no botao, entendeu o recado. O anel
   existe para chamar uma vez, nao para insistir. */
.zap.quieto .zap__pulso{animation:none;opacity:0}
@keyframes pulso{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}
@media (max-width:520px){.zap__btn{width:52px;height:52px}.zap__btn svg{width:28px;height:28px}}

/* ---------- entradas ---------- */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .74s var(--e1),transform .74s var(--e1)}
.rv.in{opacity:1;transform:none}
.stag .rv:nth-child(1){transition-delay:0s}
.stag .rv:nth-child(2){transition-delay:.07s}
.stag .rv:nth-child(3){transition-delay:.14s}
.stag .rv:nth-child(4){transition-delay:.21s}
.stag .rv:nth-child(5){transition-delay:.28s}
.stag .rv:nth-child(6){transition-delay:.35s}
.stag.pronto .rv:nth-child(1),.stag.pronto .rv:nth-child(2),.stag.pronto .rv:nth-child(3),
.stag.pronto .rv:nth-child(4),.stag.pronto .rv:nth-child(5),.stag.pronto .rv:nth-child(6){
  transition-delay:0s!important}

body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}

/* =========================================================
   Movimento reduzido.
   A jornada de scroll continua, porque quem rola comanda cada quadro
   e ela para quando a pessoa para. O que se move sozinho e desligado.
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .zap__pulso{animation:none;display:none}
  .amb{animation:none}
  /* a pista continua andando com o scroll: quem rola comanda, e ela para junto */
  *{transition-duration:.001s!important;transition-delay:0s!important}
}

/* ===== O MENU DE TRÊS RISCOS =====
   Abaixo de 900px a barra escondia os quatro links e sobrava só o botão
   de contato. O catálogo — que é o centro do site, com 54 produtos —
   ficava sem porta nenhuma no cabeçalho.

   A lista não é duplicada: é o próprio .nav__links que sai da linha e
   vira painel suspenso. Menos HTML, e impossível os dois menus
   discordarem um do outro numa edição futura.

   O botão de contato encurta em vez de sumir. Medido a 375px:
   "Falar com um vendedor" ocupava 212px e não sobrava espaço para mais
   nada; "Orçamento" ocupa 121px, e com a logo (84px) e os riscos (44px)
   a barra fecha em 313px dos 375 disponíveis. */
.nav__riscos{display:none}
.nav__cta-c{display:none}

@media (max-width:900px){
  .nav__riscos{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;flex:0 0 auto;
    background:none;border:0;padding:0;cursor:pointer;color:var(--grafite);
    -webkit-tap-highlight-color:transparent}
  .nav__riscos:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:8px}
  .nav__riscos span{position:relative;display:block;width:22px;height:2px;
    border-radius:2px;background:currentColor;
    transition:background .2s var(--e1)}
  .nav__riscos span::before,.nav__riscos span::after{content:"";position:absolute;left:0;
    width:22px;height:2px;border-radius:2px;background:currentColor;
    transition:transform .34s var(--e1)}
  .nav__riscos span::before{top:-7px}
  .nav__riscos span::after{top:7px}
  /* aberto, os três riscos viram um X: o próprio botão diz como fechar */
  .nav.aberto .nav__riscos span{background:transparent}
  .nav.aberto .nav__riscos span::before{transform:translateY(7px) rotate(45deg)}
  .nav.aberto .nav__riscos span::after{transform:translateY(-7px) rotate(-45deg)}

  /* a lista de links vira painel. visibility, e não só opacity, para os
     links fechados não receberem foco por tabulação */
  .nav__links{display:block;position:absolute;top:100%;left:0;right:0;margin:0;
    padding:4px var(--gutter) 10px;background:#fff;
    border-bottom:1px solid var(--linha);
    box-shadow:0 20px 44px -26px rgba(22,37,42,.6);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s var(--e1),transform .3s var(--e1),visibility 0s linear .3s}
  .nav.aberto .nav__links{opacity:1;visibility:visible;transform:none;
    transition:opacity .3s var(--e1),transform .3s var(--e1),visibility 0s}
  .nav__links a{display:block;padding:15px 0;font-size:16.5px;color:var(--grafite);
    border-bottom:1px solid var(--linha)}
  .nav__links a:last-child{border-bottom:0}
  .nav__links a::after{display:none}
  .nav__links a[aria-current]{color:var(--azul);font-weight:500}

  /* o contato fica, e encurta para caber ao lado dos riscos */
  .nav__cta{padding:11px 19px;font-size:15px}
  .nav__cta-l{display:none}
  .nav__cta-c{display:inline}
}
/* aparelho estreito: o recheio do botão cede antes da palavra */
@media (max-width:360px){
  .nav__cta{padding:11px 14px}
  .nav{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .nav__links,.nav__riscos span,.nav__riscos span::before,.nav__riscos span::after{
    transition-duration:.001s}
}

/* ===== O BALÃO DO WHATSAPP NO CELULAR =====
   Ele nasceu com medida de desktop e no telefone ficava do tamanho de
   meia tela, empurrando o botão verde para o canto. Aqui ele encolhe
   de verdade: letra menor, recheio menor, e largura presa a 46% da
   tela em vez de 52% com teto de 220px. O texto também perdeu "da
   indústria" - a frase já diz o que precisa com três palavras. */
@media (max-width:520px){
  .zap__balao{font-size:12.5px;line-height:1.3;padding:8px 11px;
    border-radius:11px;max-width:min(168px,46vw)}
  .zap__fechar{width:19px;height:19px;font-size:11px;top:-7px;left:-7px}
  .zap{gap:8px}
}

/* ===== O VÃO ENTRE SEÇÕES =====
   Cada .sec tem recheio em cima e embaixo. Entre duas delas isso soma
   até 208px de nada. Quando a cor de fundo muda, esse vão é respiro e
   faz falta. Quando não muda, é buraco: o olho não sabe se acabou uma
   seção ou se a página travou.

   Então o vão passa a depender do que existe dos dois lados. Campo azul
   continua com o recheio inteiro, porque ele é um bloco de cor e precisa
   de margem interna. Duas seções claras em sequência dividem um vão só,
   e duas seções brancas — que não têm nenhuma linha entre elas — ficam
   com o menor de todos.

   :has() faz o lado de cima do par. Onde ele não existir, só a regra do
   irmão adjacente vale: o vão fica pela metade em vez de um terço, que
   ainda é melhor que o de hoje. */
.sec:not(.azul) + .sec:not(.azul){padding-top:clamp(24px,3vw,44px)}
.sec:not(.azul):has(+ .sec:not(.azul)){padding-bottom:clamp(24px,3vw,44px)}

.sec:not(.azul):not(.sec--claro) + .sec:not(.azul):not(.sec--claro){
  padding-top:clamp(14px,1.8vw,26px)}
.sec:not(.azul):not(.sec--claro):has(+ .sec:not(.azul):not(.sec--claro)){
  padding-bottom:clamp(14px,1.8vw,26px)}


/* ===================== O MODAL DO CATALOGO =====================
   Uma caixa so, criada na primeira vez que alguem pede o catalogo e
   reaproveitada depois. Fecha no X, no veu, no Esc; o foco fica preso
   dentro enquanto ela esta aberta e volta para o botao que a abriu. */
.lead[hidden]{display:none}
.lead{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:var(--gutter)}
.lead__veu{position:absolute;inset:0;background:rgba(10,18,44,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lead__caixa{position:relative;width:min(100%,430px);background:var(--branco);
  border-radius:var(--raio);padding:clamp(24px,4vw,34px);
  box-shadow:0 40px 90px -50px rgba(10,18,44,.7);
  max-height:calc(100dvh - 2 * var(--gutter));overflow:auto}
.lead__x{position:absolute;top:10px;right:10px;width:38px;height:38px;
  display:grid;place-items:center;border:0;background:transparent;
  font-size:23px;line-height:1;color:var(--cinza);cursor:pointer;
  border-radius:50%}
.lead__x:hover{background:var(--claro);color:var(--grafite)}
.lead__t{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em;
  color:var(--grafite);margin:0 34px 10px 0}
.lead__d{color:var(--cinza);font-size:15px;line-height:1.6;margin:0}
.lead__form{display:grid;gap:14px;margin-top:22px}
.lead__campo{display:grid;gap:6px}
.lead__campo span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza)}
.lead__campo input{font-family:var(--texto);font-size:16px;color:var(--grafite);
  padding:12px 14px;border:1px solid var(--linha-forte);border-radius:10px;
  background:var(--branco);width:100%;
  transition:border-color .25s var(--e1),box-shadow .25s var(--e1)}
.lead__campo input:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(39,97,251,.18)}
.lead__campo input[aria-invalid="true"]{border-color:#B3261E}
.lead__erro{margin:0;color:#B3261E;font-size:13.5px;line-height:1.5}
.lead__erro[hidden]{display:none}
.lead__form .btn{width:100%;margin-top:4px}
.lead__pe{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--cinza-claro)}
/* As opcoes de regiao. Cada uma e um alvo de 52px: a pessoa esta no
   celular, com uma mao, decidindo de onde ela fala. */
.lead__opcoes{display:grid;gap:9px;margin-top:20px}
.lead__opcao{display:block;width:100%;text-align:left;cursor:pointer;
  min-height:52px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--linha-forte);background:var(--branco);
  font-family:var(--texto);font-size:15.5px;color:var(--grafite);
  transition:border-color .25s var(--e1),background .25s var(--e1),
             transform .25s var(--e1)}
.lead__opcao:hover{border-color:var(--azul);background:var(--azul-lavado)}
.lead__opcao:active{transform:scale(.99)}
.lead__opcao:focus-visible{outline:2.5px solid var(--azul);outline-offset:2px}
/* a ultima e "Outra regiao": mesma altura, tinta mais quieta, porque
   ela e a saida e nao uma das areas atendidas */
/* A saida - "Outra regiao", "Nao sei qual e a minha", "Voltar" -
   tem a mesma altura das outras, tinta mais quieta: ela nao e uma das
   areas atendidas, e o caminho de quem nao se encontrou na lista. */
.lead__opcao--quieto{color:var(--cinza);border-style:dashed}
.lead__opcao--quieto:hover{color:var(--grafite);border-style:solid}
/* a previa da mensagem, enquanto os numeros nao entram no ar */
.lead__previa{margin:18px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--claro);border:1px solid var(--linha);
  font-size:14.5px;line-height:1.6;color:var(--grafite)}
.lead__ok[hidden]{display:none}
.lead__ok{display:grid;gap:12px;margin-top:20px}
@media (prefers-reduced-motion:no-preference){
  .lead__caixa{animation:leadEntra .32s var(--e1) both}
  @keyframes leadEntra{from{opacity:0;transform:translateY(14px) scale(.985)}
                       to{opacity:1;transform:none}}
}