/* ================================================================
   RETIRA - Sistema de design
   ----------------------------------------------------------------
   Paleta derivada do próprio equipamento: aço grafite da caçamba e
   amarelo de sinalização - a cor real do objeto quando está em via
   pública. A linha Leve usa um ciano industrial para se separar
   visualmente sem sair da mesma família.
   ================================================================ */

:root{
  --grafite:#22262B;
  --grafite-2:#2E343B;
  --aco:#4A525C;
  --aco-claro:#7C858F;
  --concreto:#D9D6D1;
  --concreto-claro:#F0EEEB;
  --branco:#FFFFFF;

  --sinal:#F5B301;          /* linha Caçamba + marca */
  --sinal-escuro:#C68E00;
  --ciano:#00A3B4;          /* linha Leve */
  --ciano-escuro:#007D8A;

  --zap:#1E7A4C;
  --alerta:#C0392B;

  --r:4px;
  --sombra:0 2px 0 rgba(0,0,0,.28);

  --largura:1080px;
  --gutter:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Alvo de toque consistente em todo elemento clicável: sem atraso de
   duplo-toque no mobile, e sem o flash cinza padrão do Android por
   cima dos estados :hover/:active que a gente já desenha. Público é
   majoritariamente mobile (ver .lead da tipografia). */
a,button,input,.opcao,.faq summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Pulado por padrão, some ao ganhar foco - primeiro elemento
   focável da página, antes do cabeçalho fixo. */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--sinal);color:var(--grafite);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 16px;border-radius:var(--r);text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:12px}

body{
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--grafite);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

/* ---------------- Tipografia ---------------- */
.display{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:-.005em;
}
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--aco);
}
h1{font-size:clamp(36px,7vw,64px)}
h2{font-size:clamp(28px,5vw,42px)}
h3{font-size:clamp(20px,3vw,26px)}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;line-height:1.05}

p{margin-bottom:14px}
p:last-child{margin-bottom:0}
.lead{font-size:19px;color:var(--aco);max-width:56ch}

/* ---------------- Layout ---------------- */
.container{max-width:var(--largura);margin:0 auto;padding:0 var(--gutter)}
.secao{padding:64px 0}
.secao--compacta{padding:44px 0}
.secao--escura{background:var(--grafite);color:var(--concreto-claro)}
.secao--escura h2,.secao--escura h3{color:var(--branco)}
.secao--escura .eyebrow{color:var(--sinal)}
.secao--escura .lead{color:var(--concreto)}
.secao--cinza{background:var(--concreto-claro)}

.grade{display:grid;gap:20px}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grade--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.cabeca-secao{margin-bottom:32px;max-width:62ch}
.cabeca-secao h2{margin:4px 0 10px}

/* ---------------- Cabeçalho ---------------- */
.topo{
  position:sticky;top:0;z-index:60;
  background:var(--grafite);
  border-bottom:2px solid var(--sinal);
}
.topo-in{
  max-width:1200px;margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;gap:20px;min-height:44px;
}
/* Logo empilhado: marca em cima, slogan embaixo alinhado à esquerda. */
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-decoration:none}
.logo-marca{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:30px;letter-spacing:.06em;color:var(--concreto-claro);
  text-transform:uppercase;line-height:1;
}
.logo-marca span{color:var(--sinal)}
.logo-slogan{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sinal);font-weight:600;
}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav a{
  position:relative;
  font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#D6D2CC;text-decoration:none;padding:10px 14px;white-space:nowrap;
}
.nav a:hover{color:var(--branco)}
/* Aba ativa marcada por barra embaixo, na cor da linha: amarelo para
   Caçamba e o resto, ciano quando a página ativa é a Leve. */
.nav a.ativo{color:var(--branco)}
.nav a.ativo::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;
  height:3px;background:var(--sinal);
}
.nav a.ativo.nav--leve::after{background:var(--ciano)}
/* CTA do topo. Abre o popup de cotação, não vai direto pro WhatsApp -
   por isso amarelo da marca (mesma cor de todo CTA primário do site) e
   não o verde do WhatsApp, que prometeria outra coisa. */
.topo-zap{
  background:var(--sinal);color:var(--grafite);
  padding:11px 20px;border-radius:10px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 2px 8px rgba(245,179,1,.3);
  border:none;cursor:pointer;text-decoration:none;
}
.topo-zap:hover{background:var(--sinal-escuro)}
.topo-zap:focus-visible{outline:2px solid var(--branco);outline-offset:2px}
/* Na Leve o CTA acompanha a cor da linha, como o resto da página. */
.topo-zap--leve{background:var(--ciano);color:var(--branco);box-shadow:0 2px 8px rgba(0,163,180,.35)}
.topo-zap--leve:hover{background:var(--ciano-escuro)}
/* No mobile o menu não some - vira uma faixa rolável. Esconder a
   navegação num hambúrguer custa cliques que este site não tem
   para gastar. */
@media(max-width:980px){
  .topo-in{flex-wrap:wrap;padding:11px var(--gutter) 0;gap:12px}
  .topo-zap{margin-left:auto;padding:9px 14px;font-size:15px}
  .nav{
    order:3;width:100%;margin-left:0;gap:0;
    overflow-x:auto;padding-bottom:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:12.5px;padding:10px 12px}
  .nav a.ativo::after{left:12px;right:12px}
}

/* ---------------- Botões ---------------- */
.btn{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 26px;border:none;border-radius:var(--r);
  background:var(--grafite);color:var(--branco);
  cursor:pointer;text-decoration:none;text-align:center;
  box-shadow:var(--sombra);
}
.btn:hover{background:var(--grafite-2)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--sinal);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:wait}

.btn--sinal{background:var(--sinal);color:var(--grafite)}
.btn--sinal:hover{background:var(--sinal-escuro)}
.btn--ciano{background:var(--ciano);color:var(--branco)}
.btn--ciano:hover{background:var(--ciano-escuro)}
.btn--zap{background:#25D366;color:var(--branco)}
.btn--zap:hover{filter:brightness(1.06)}
.btn--linha{background:transparent;color:var(--grafite);border:1.5px solid var(--grafite);box-shadow:none}
.btn--linha:hover{background:var(--grafite);color:var(--branco)}
.btn--bloco{display:block;width:100%}
/* Botão com ícone do WhatsApp: o SVG fica à direita do texto, centrado
   na vertical e afastado por gap. Vale pros dois estilos de botão que
   levam à conversa (o verde do resultado e o de contorno do popup).
   Precisa vir depois de .btn--bloco, que senão o display:block dele
   desmonta o flex - todos esses botões são bloco. */
.btn:has(> svg){display:flex;align-items:center;justify-content:center;gap:9px}
.btn > svg{width:18px;height:18px;flex:0 0 auto}
.btn--zap > svg{fill:var(--branco)}
.btn--linha > svg{fill:currentColor}

/* ---------------- Hero ---------------- */
.hero{background:var(--grafite);color:var(--branco);padding:52px 0 60px;position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
  background:repeating-linear-gradient(135deg,var(--sinal) 0 22px,var(--grafite) 22px 44px);
  opacity:.85;
}
.hero--leve{background:#0C2E33}
.hero--leve::after{background:repeating-linear-gradient(135deg,var(--ciano) 0 22px,#0C2E33 22px 44px)}
.hero-grade{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero-grade{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}}
.hero h1{margin:8px 0 14px}
.hero .lead{color:var(--concreto)}
.hero .eyebrow{color:var(--sinal)}
.hero--leve .eyebrow{color:var(--ciano)}

.hero-pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--grafite-2);border:1px solid var(--aco);
  padding:7px 13px;border-radius:999px;margin-bottom:26px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--concreto);
}
.hero-pill-ponto{width:7px;height:7px;border-radius:50%;background:var(--sinal);flex:0 0 auto}
/* O hero da Leve tem fundo teal escuro (#0C2E33), não grafite - a pílula
   precisa de um tom próprio pra não parecer recortada de outra tela. */
.hero--leve .hero-pill{background:#123840;border-color:#1d515b}
.hero--leve .hero-pill-ponto{background:var(--ciano)}
.hero--leve .hero-titulo span{color:var(--ciano)}
.hero--leve .hero-preco-valor{color:var(--ciano)}
.hero-titulo{
  font-size:clamp(38px,5.6vw,54px);line-height:.96;margin:0 0 22px;text-wrap:balance;
}
.hero-titulo span{color:var(--sinal)}
.hero-preco{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.hero-preco-valor{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:30px;color:var(--sinal);line-height:1;
}
.hero-preco-legenda{font-size:13px;color:var(--aco-claro)}

.selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.selos li{
  display:flex;align-items:center;gap:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--aco);border-radius:var(--r);
  padding:5px 11px;color:var(--concreto);
}
.selos li svg{width:13px;height:13px;flex:0 0 auto;fill:var(--sinal)}
.hero--leve .selos li svg{fill:var(--ciano)}
.hero .hero-cta{margin-top:24px}

/* ---------------- Prova social no hero ---------------- */
.mini-depoimentos{
  margin-top:36px;padding-top:28px;border-top:1px solid var(--aco);
  display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
/* No mobile o grid vira uma coluna só e os três depoimentos empilham,
   empurrando o resto da página pra baixo. Vira faixa deslizante. */
@media(max-width:700px){
  .mini-depoimentos{
    display:flex;gap:18px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:6px;
    scroll-padding-left:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .mini-depoimentos::-webkit-scrollbar{display:none}
  .mini-depoimento{flex:0 0 min(78vw,280px);scroll-snap-align:start}
  .mini-depoimento p{max-width:none}
}
.mini-depoimento{display:flex;flex-direction:column;gap:7px}
.mini-depoimento-cabeca{display:flex;align-items:center;gap:9px}
.mini-depoimento-avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  background:var(--sinal);color:var(--grafite);
}
.mini-depoimento-quem{display:flex;flex-direction:column;gap:1px;min-width:0}
.mini-depoimento-nome{font-family:'Barlow',sans-serif;font-weight:600;font-size:13.5px;color:var(--branco)}
.mini-depoimento-estrelas{display:flex;gap:2px}
.mini-depoimento-estrelas svg{width:12px;height:12px;fill:var(--sinal)}
.mini-depoimento p{font-size:14px;color:var(--concreto);font-style:italic;margin:0;max-width:40ch}

/* Foto real da operação. Peso ainda não otimizado (ver pendência em
   docs/estrategia-produto.md) - fica para uma passada futura. */
/* Hero com foto sangrando: a imagem ocupa a seção inteira e um degradê
   por cima segura a leitura do texto. À esquerda fica quase opaco (o
   headline mora ali), abrindo até transparente à direita, onde a foto
   aparece limpa porque não há nada sobreposto. */
.hero--foto{padding:0;isolation:isolate}
/* A faixa listrada do rodapé do hero é irmã da foto e ficaria embaixo
   dela sem isso. */
.hero--foto::after{z-index:2}
.hero-fundo{position:absolute;inset:0;z-index:0}
.hero-fundo img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero-fundo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    #0C2E33 0%,
    rgba(12,46,51,.97) 26%,
    rgba(12,46,51,.82) 44%,
    rgba(12,46,51,.45) 62%,
    rgba(12,46,51,.12) 80%,
    rgba(12,46,51,0) 100%);
}
.hero-conteudo{position:relative;z-index:1;padding-top:64px;padding-bottom:72px}
/* A coluna de texto não passa da metade: da metade pra direita é o
   espaço reservado à foto. */
@media(min-width:900px){
  .hero--foto .hero-coluna-texto{max-width:52%}
}
/* Bloco de foto que só existe no mobile - no desktop a mesma imagem já
   está no fundo, à direita do texto. */
.hero-media--mobile{display:none}
/* No mobile não existe "lado direito" livre: a imagem vira faixa de
   fundo escurecida por inteiro, senão o texto cai por cima do carro. */
@media(max-width:899px){
  .hero-media--mobile{display:block;margin:26px 0 4px;aspect-ratio:16/10}
  .hero-fundo img{object-position:65% center}
  .hero-fundo::after{
    background:linear-gradient(180deg,
      rgba(12,46,51,.92) 0%,
      rgba(12,46,51,.88) 55%,
      rgba(12,46,51,.95) 100%);
  }
  .hero-conteudo{padding-top:48px;padding-bottom:56px}
}

.hero-media{
  aspect-ratio:5/4.5;border-radius:var(--r);overflow:hidden;
}
.hero-media img{width:100%;height:100%;object-fit:cover}

/* ---------------- Calculadora ---------------- */
.calc{
  background:var(--branco);color:var(--grafite);
  border-radius:var(--r);padding:22px;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.calc h2{font-size:23px;margin-bottom:3px}
.calc-sub{font-size:15px;color:var(--aco);margin-bottom:16px}

.campo{margin-bottom:14px}
.campo label{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--aco);margin-bottom:6px;
}
.campo input[type=text]{
  width:100%;
  font-family:'Barlow',sans-serif;font-size:19px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
  padding:13px 14px;border:1.5px solid var(--concreto);
  border-radius:var(--r);background:var(--branco);color:var(--grafite);
}
.campo input[type=text]:focus-visible{outline:2px solid var(--sinal);outline-offset:1px;border-color:var(--aco)}

.calc-unidade-dica{
  display:inline;font-family:'Barlow',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:normal;text-transform:none;color:var(--aco);
}
.opcoes{display:grid;gap:8px}
/* .opcao é um <label> dentro de .campo - precisa anular a regra
   de label do formulário, senão herda caixa alta e cor cinza. */
.campo .opcao{
  display:block;border:1.5px solid var(--concreto);border-radius:var(--r);
  padding:11px 13px;cursor:pointer;background:var(--branco);
  text-transform:none;letter-spacing:normal;
  font-size:16px;color:var(--grafite);margin-bottom:0;
}
.campo .opcao:hover{border-color:var(--aco-claro)}
.campo .opcao input{position:absolute;opacity:0;pointer-events:none}
.campo .opcao:has(input:checked){border-color:var(--ciano);border-width:2px;background:#F0FAFB}
.campo .opcao:has(input:focus-visible){outline:2px solid var(--ciano);outline-offset:2px}
.opcao-topo{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.opcao-rot{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;text-transform:uppercase}
.opcao-preco{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;white-space:nowrap}
.opcao-eq{font-size:14px;color:var(--aco);margin-top:1px}

.calc-dica{font-size:14px;color:var(--aco);margin-top:10px}

/* Segundo passo da calculadora da Leve: entra depois do CEP validado.
   O deslize curto avisa que apareceu conteúdo novo abaixo do botão. */
.campo--passo2{margin-top:16px;animation:passo2-entra .22s ease}
@keyframes passo2-entra{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* ---------------- Calculadora em destaque ---------------- *
   Faixa amarela que repete o CTA da calculadora mais abaixo na
   página, para quem rolou passando do hero. Reaproveita .calc,
   .campo, .resultado, .painel e .aviso - o card é o mesmo
   componente, só muda o fundo da seção ao redor. */
.destaque{background:var(--sinal)}
.destaque .eyebrow{color:var(--grafite)}
/* Mesma seção, cor da linha Leve. Texto claro porque o ciano é escuro
   o bastante para não sustentar o grafite com contraste suficiente. */
.destaque--leve{background:var(--ciano);color:var(--branco)}
.destaque--leve .eyebrow{color:var(--grafite)}
.destaque--leve h2{color:var(--branco)}
.destaque--leve .lead{color:var(--concreto-claro)}
.destaque-grade{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:900px){.destaque-grade{grid-template-columns:1.05fr .95fr;align-items:start;gap:44px}}
.destaque h2{margin:6px 0 12px}

.pontos{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.pontos li{font-size:15px;padding-left:16px;position:relative}
.pontos li::before{content:'·';position:absolute;left:0;font-weight:700}

/* ---------------- Faixa de números ---------------- */
.stat{display:flex;flex-direction:column;gap:3px}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;color:var(--sinal);line-height:1}
.stat-rot{font-size:13px;color:var(--concreto)}

/* ---------------- Cartões de serviço ---------------- */
.servicos-grade{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:760px){.servicos-grade{grid-template-columns:1fr 1fr}}
.servico{border-radius:var(--r);overflow:hidden;background:var(--grafite);color:var(--concreto-claro);display:flex;flex-direction:column}
.servico--leve{background:#0C2E33}
.servico-media{
  aspect-ratio:16/9;
  background:var(--grafite-2) repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 22px,transparent 22px 44px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px;font-size:13px;font-style:italic;color:var(--aco-claro);
  border-bottom:3px solid var(--sinal);
}
.servico--leve .servico-media{background:#093137 repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 22px,transparent 22px 44px);border-bottom-color:var(--ciano)}
/* O flex/align-items:center acima é do estado placeholder (texto
   centralizado). Com foto real ele encolhe a imagem para o tamanho
   natural em vez de preencher a caixa - por isso o display volta a
   block aqui. */
.servico-media--foto{padding:0;display:block}
.servico-media--foto img{width:100%;height:100%;object-fit:cover}
.servico-corpo{padding:26px;display:flex;flex-direction:column;gap:14px;flex:1}
.servico-eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sinal);
}
.servico--leve .servico-eyebrow{color:var(--ciano)}
.servico-corpo h3{font-size:26px;margin:0}
.servico-lista{list-style:none;display:grid;gap:8px}
.servico-lista li{font-size:15px;color:var(--concreto);padding-left:16px;position:relative}
.servico-lista li::before{content:'·';position:absolute;left:0;font-weight:700;color:var(--sinal)}
.servico--leve .servico-lista li::before{color:var(--ciano)}
.servico-usos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.servico-uso{border-radius:var(--r);overflow:hidden;background:#093137}
.servico-uso-media{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:8px;text-align:center;font-size:11px;font-style:italic;color:var(--aco-claro);
  background:#062126 repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px);
}
.servico-uso span{display:block;padding:6px 8px;font-size:12px;color:var(--concreto)}
.servico-cta{margin-top:auto}

/* ---------------- Resultado ---------------- *
   Elemento-assinatura: o preço aparece como a marcação estampada
   na lateral da caçamba. É o momento que o visitante veio buscar. */
.resultado{margin-top:16px;display:none}
.resultado.on{display:block}

.painel{border:1.5px solid var(--grafite);border-radius:var(--r);overflow:hidden}
.painel-faixa{background:var(--sinal);border-bottom:1.5px solid var(--grafite);padding:15px 17px 13px}
.painel-faixa--ciano{background:var(--ciano)}
.painel-faixa--ciano .painel-rot,.painel-faixa--ciano .painel-preco{color:var(--branco)}
.painel-rot{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.painel-preco{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(42px,12vw,56px);line-height:.94;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.painel-preco small{font-size:.42em;font-weight:600;letter-spacing:0;margin-right:4px;vertical-align:.34em}
.painel-corpo{padding:14px 17px;background:var(--branco)}

.dado{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--concreto-claro)}
.dado:last-of-type{border-bottom:none}
.dado dt{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aco);flex:0 0 auto;padding-top:3px;
}
/* min-width:0 + overflow-wrap: endereços reais são mais compridos que
   qualquer exemplo de teste - sem isso, um logradouro longo estoura a
   largura fixa do popup em vez de quebrar linha. */
.dado dd{font-size:15px;text-align:right;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

.aviso{border:1.5px solid var(--grafite);border-left-width:6px;border-radius:var(--r);padding:15px 17px;background:var(--branco)}
.aviso--fora{border-left-color:var(--alerta)}
.aviso--erro{border-left-color:var(--aco)}
.aviso h3{font-size:19px;margin-bottom:5px}
.aviso p{font-size:15px;color:var(--aco)}

/* ---------------- Popup de resultado ---------------- *
   O preço calculado sobe num <dialog> nativo: foco preso, ESC e
   clique fora fecham sem JS extra, funciona sem depender de
   z-index manual. O conteúdo interno reaproveita .painel/.dado. */
.popup{
  border:none;border-radius:var(--r);padding:0;margin:auto;
  width:min(420px,calc(100% - 32px));
  max-height:calc(100% - 32px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  color:var(--grafite);
}
.popup::backdrop{background:rgba(34,38,43,.72)}
.popup-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1.5px solid var(--concreto-claro);
}
.popup-titulo{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--aco);
}
.popup-fechar{
  background:none;border:none;font-size:26px;line-height:1;
  color:var(--aco);cursor:pointer;padding:0 4px;
}
.popup-fechar:hover{color:var(--grafite)}
.popup-fechar:focus-visible{outline:2px solid var(--sinal);outline-offset:2px}
.popup-corpo{padding:18px}
.popup-corpo .painel{border:none}
.popup-corpo .painel-faixa{border-radius:var(--r) var(--r) 0 0}

.popup-texto{font-size:15px;color:var(--aco);margin-bottom:14px}

/* Divisor "ou" entre cotar e ir direto pro WhatsApp */
.popup-separador{
  position:relative;text-align:center;margin:16px 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--aco-claro);
}
.popup-separador::before,.popup-separador::after{
  content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--concreto);
}
.popup-separador::before{left:0}
.popup-separador::after{right:0}

.popup-link{
  display:block;width:100%;background:none;border:none;padding:6px;
  font-family:'Barlow',sans-serif;font-size:15px;font-weight:600;
  color:var(--aco);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;text-align:center;
}
.popup-link:hover{color:var(--grafite)}
.popup-link:focus-visible{outline:2px solid var(--sinal);outline-offset:2px}

/* Confirmação antes de pular a cotação */
.popup-confirma h3{font-size:19px;margin-bottom:6px}
.popup-confirma p{font-size:15px;color:var(--aco);margin-bottom:18px}
.popup-confirma-botoes{display:flex;flex-direction:column;gap:10px}

/* ---------------- Depoimentos ---------------- *
   As duas linhas agora usam avaliações reais de clientes. Nunca
   preencher com nome/comentário fabricado que pareça autêntico - ver
   docs/estrategia-produto.md, seção sobre prova social. */

.depoimentos-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:32px}
.depoimentos-resumo-nota{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:46px;line-height:1;color:var(--grafite);
  display:flex;align-items:center;gap:4px;
}
.depoimentos-resumo-detalhe{display:flex;flex-direction:column;gap:5px}
.depoimentos-resumo-estrelas{display:flex;gap:3px}
.depoimentos-resumo-estrelas svg{width:17px;height:17px;fill:var(--sinal)}
.depoimentos-resumo-texto{font-size:14px;color:var(--aco)}
.resumo-nota-estrela{width:46px;height:46px;fill:var(--sinal);flex-shrink:0}
.resumo-nota-estrela-google{width:100px;height:100px;fill:var(--sinal);flex-shrink:0}

/* Carrossel infinito: a faixa anda sozinha, sem barra de rolagem. O
   movimento é o que avisa que há mais depoimentos - somado às setas e
   ao degradê nas bordas, que cortam o cartão pela metade de propósito.
   A lista é duplicada no HTML (aria-hidden na cópia) e a animação anda
   exatamente -50%, então o ponto de emenda é invisível. */
.depoimentos-carrossel{
  position:relative;
  margin:0 calc(var(--gutter) * -1);
  padding:4px 0;
}
.depoimentos-janela{
  overflow:hidden;
  /* Sem barra à mostra mesmo quando vira rolável (arrasto no mobile). */
  scrollbar-width:none;-ms-overflow-style:none;
  /* Degradê nas pontas: o cartão some em vez de bater numa borda seca. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.depoimentos-janela::-webkit-scrollbar{display:none}
/* Enquanto a pessoa arrasta, a janela vira um scroller comum e a
   animação sai do caminho - senão as duas brigariam pelo mesmo eixo. */
.depoimentos-janela--arrastavel{overflow-x:auto;-webkit-overflow-scrolling:touch}
.depoimentos-janela--arrastavel .depoimentos-grade{animation:none;translate:none}
.depoimentos-grade{
  display:flex;gap:20px;width:max-content;
  padding:4px var(--gutter);
  /* --deslocamento é somado pelas setas (js/depoimentos.js); a animação
     translada por cima dele, então clique e marquee convivem. */
  --deslocamento:0px;
  animation:depoimentos-desliza 60s linear infinite;
}
.depoimentos-grade--ajustando{transition:translate .4s ease}
/* Pausa quando a pessoa quer ler: hover, ou foco de teclado em
   qualquer coisa dentro da faixa. */
.depoimentos-carrossel:hover .depoimentos-grade,
.depoimentos-grade:focus-within{animation-play-state:paused}
@keyframes depoimentos-desliza{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* translate (propriedade própria) compõe com o transform da animação -
   por isso o offset das setas vai aqui, e não num segundo transform. */
.depoimentos-grade{translate:var(--deslocamento) 0}
.depoimento{
  background:var(--branco);border:1px solid var(--concreto);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;gap:13px;
  flex:0 0 320px;
  transition:box-shadow .2s ease,border-color .2s ease;
}
@media(max-width:520px){.depoimento{flex-basis:min(80vw,320px)}}

/* Setas: controle explícito pra quem não espera o carrossel dar a volta.
   Empurram a faixa somando um deslocamento ao translate da animação. */
.depoimentos-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--branco);border:1px solid var(--concreto);
  box-shadow:0 4px 14px rgba(34,38,43,.14);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.depoimentos-seta:hover{background:var(--concreto-claro);border-color:var(--aco-claro)}
.depoimentos-seta:focus-visible{outline:2px solid var(--sinal);outline-offset:2px}
.depoimentos-seta svg{width:18px;height:18px;fill:var(--grafite)}
.depoimentos-seta--antes{left:6px}
.depoimentos-seta--depois{right:6px}
/* O wrapper não existe pro layout: as setas flutuam sobre as laterais
   da faixa, posicionadas contra .depoimentos-carrossel. */
.depoimentos-controles{display:contents}
/* No mobile não tem seta: arrastar com o dedo é o gesto nativo, e o
   botão só cobriria o cartão (que ali ocupa 80vw). O arrasto é de
   verdade - ver .depoimentos-janela--arrastavel e js/depoimentos.js. */
@media(max-width:700px){
  .depoimentos-controles{display:none}
}

/* Sem animação: vira faixa arrastável comum, ainda sem barra à mostra. */
@media(prefers-reduced-motion:reduce){
  .depoimentos-janela{overflow-x:auto;scrollbar-width:none}
  .depoimentos-janela::-webkit-scrollbar{display:none}
  .depoimentos-grade{animation:none}
}
.depoimento:hover{border-color:var(--aco-claro);box-shadow:0 16px 32px rgba(34,38,43,.12)}
.depoimento-cabeca{display:flex;align-items:center;gap:12px}
.depoimento-avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
  background:var(--grafite);color:var(--branco);
}
.depoimento-avatar--sinal{background:var(--sinal);color:var(--grafite)}
.depoimento-avatar--ciano{background:var(--ciano);color:var(--branco)}
.depoimento-quem{display:flex;flex-direction:column;gap:2px;min-width:0}
.depoimento-nome{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  text-transform:none;letter-spacing:normal;color:var(--grafite);
}
.depoimento-local{font-size:12.5px;color:var(--aco)}
.depoimento-estrelas{display:flex;gap:2px}
.depoimento-estrelas svg{width:14px;height:14px;fill:var(--sinal)}
.depoimento--ciano .depoimento-estrelas svg{fill:var(--ciano)}
.depoimento p{font-size:14.5px;color:var(--aco);line-height:1.55;margin:0}

/* ---------------- Cartões ---------------- */
.cartao{background:var(--branco);border:1px solid var(--concreto);border-radius:var(--r);padding:20px}
.cartao h3{font-size:20px;margin-bottom:7px}
.cartao p{font-size:15px;color:var(--aco)}
.secao--escura .cartao{background:var(--grafite-2);border-color:var(--aco)}
.secao--escura .cartao p{color:var(--concreto)}

.passo{position:relative;padding-left:52px}
.passo-num{
  position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:var(--r);
  background:var(--sinal);color:var(--grafite);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;
}
.passo-num--ciano{background:var(--ciano);color:var(--branco)}
.passo h3{font-size:19px;margin-bottom:5px}
.passo p{font-size:15px;color:var(--aco)}

/* ---------------- Tabela ---------------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--concreto);border-radius:var(--r);background:var(--branco)}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:460px}
thead th{
  background:var(--grafite);color:var(--branco);text-align:left;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 14px;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--concreto-claro);color:var(--grafite)}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:var(--concreto-claro)}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* ---------------- Listas ---------------- */
.lista{list-style:none}
.lista li{padding:9px 0 9px 28px;position:relative;border-bottom:1px solid var(--concreto-claro);font-size:16px}
.lista li:last-child{border-bottom:none}
.lista li::before{
  content:'';position:absolute;left:0;top:16px;
  width:12px;height:3px;background:var(--sinal);
}
.lista--nao li::before{background:var(--alerta)}
.lista--ciano li::before{background:var(--ciano)}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--concreto)}
.faq details{border-bottom:1px solid var(--concreto)}
.faq summary{
  cursor:pointer;padding:16px 0;list-style:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:20px;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--sinal);font-size:26px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq summary:focus-visible{outline:2px solid var(--sinal);outline-offset:2px}
.faq-resp{padding:0 0 18px;font-size:16px;color:var(--aco);max-width:68ch}

/* ---------------- Faixa de chamada ---------------- */
.chamada{background:var(--sinal);padding:36px 0}
.chamada--ciano{background:var(--ciano)}
.chamada--ciano h2,.chamada--ciano p{color:var(--branco)}
.chamada-in{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.chamada h2{font-size:clamp(24px,4vw,34px);margin-bottom:4px}
.chamada p{font-size:16px;max-width:46ch}

/* ---------------- Troca de linha ---------------- */
.troca{
  border:1.5px solid var(--concreto);border-left:6px solid var(--ciano);
  border-radius:var(--r);padding:18px 20px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}
.troca--cacamba{border-left-color:var(--sinal)}
.troca h3{font-size:20px;margin-bottom:3px}
.troca p{font-size:15px;color:var(--aco);max-width:52ch}

/* ---------------- Rodapé ---------------- */
.rodape{background:var(--grafite);color:var(--aco-claro);padding:44px 0 84px;font-size:15px}
.rodape a{color:var(--concreto);text-decoration:none}
.rodape a:hover{color:var(--sinal)}
.link-zap{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--concreto);text-decoration:none;
}
.link-zap:hover{color:var(--sinal)}
.rodape h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--branco);margin-bottom:11px;
}
.rodape ul{list-style:none}
.rodape li{margin-bottom:7px}
.rodape-base{
  border-top:1px solid var(--aco);margin-top:30px;padding-top:18px;
  font-size:13px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
/* Link discreto - não é pra visitante comum notar (ver especificacao-admin.md, 2.1) */
.rodape-admin{color:var(--aco);font-size:12px;text-decoration:none}
.rodape-admin:hover{color:var(--aco-claro)}

/* ---------------- WhatsApp flutuante ---------------- */
/* #25D366 é a cor oficial da marca WhatsApp - fora da paleta do
   site de propósito, pra ser reconhecível à primeira vista. */
.zap-fixo{
  position:fixed;right:18px;bottom:18px;z-index:70;
  height:58px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:#25D366;border:none;padding:0 22px 0 16px;cursor:pointer;
  text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.35);
  animation:zap-pulsar 2.2s ease-in-out infinite;
}
.zap-fixo:hover{filter:brightness(1.06)}
.zap-fixo:focus-visible{outline:2px solid var(--sinal);outline-offset:3px}
.zap-fixo svg{width:27px;height:27px;fill:var(--branco);flex:0 0 auto}
.zap-fixo-texto{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--branco);
  white-space:nowrap;
}
@keyframes zap-pulsar{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 0 rgba(37,211,102,.55)}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 10px rgba(37,211,102,0)}
}
@media(max-width:480px){
  .zap-fixo{padding:0;width:58px;gap:0}
  .zap-fixo-texto{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}