/* =========================
   BASE / RESET
========================= */
:root{
  --verde:#12b76a;
  --verde-escuro:#0e9f5b;
  --azul:#2563eb;
  --amarelo:#f59e0b;
  --vermelho:#ef4444;

  --texto:#0b1220;
  --muted:#5b6472;

  --fundo:#ffffff;
  --fundo-cinza:#f3f5f8;

  --borda:#e6e8ee;
  --sombra:0 10px 30px rgba(0,0,0,.08);
  --raio:14px;

  --rodape:#0b1424;
}

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

body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--texto);
  background:var(--fundo);
  overflow-x:hidden; /* evita vazamento */
}

/* mídia nunca estoura */
img, svg, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

/* garante hidden */
[hidden]{ display:none !important; }

.container{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
}

/* =========================
   HEADER
========================= */
.cabecalho{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
}

.cabecalho__conteudo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  flex-wrap:wrap;           /* ✅ quebra no mobile */
}

/* marca ocupa espaço e quebra bonito */
.marca{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  min-width:0;
  flex: 1 1 260px;          /* ✅ responsivo */
}

.marca__icone{
  height: clamp(50px, 50vw, 100px);
  width: auto;
}

.logo-empresa{
  height: 100%;
  width: auto;
  object-fit: contain;
}



/* texto do header não estoura */
.marca__texto{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}

.marca__texto strong{
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.marca__texto small{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:flex-end;
  background:url("imagem/iimagem.jpg") center/cover no-repeat;
  background-color:#111827;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.45) 100%);
}

.hero__conteudo{
  position:relative;
  padding:64px 0 60px;
  display:flex;
  align-items:flex-end;
}

.hero__texto{
  max-width:700px;
  color:#fff;
}

.hero__texto h1{
  font-size:clamp(28px, 4.5vw, 54px);
  line-height:1.05;
  margin:0 0 14px;
  letter-spacing:-.6px;
}

.hero__texto p{
  margin:0 0 22px;
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
  max-width:640px;
}

.hero__botoes{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.hero__selos{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:10px;
}

.selo{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.92);
  font-weight:700;
  font-size:14px;
}

.selo__ok{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(18,183,106,.22);
  border:1px solid rgba(18,183,106,.45);
  color:#b7f7d7;
  font-weight:900;
}

/* =========================
   BOTÕES
========================= */
.botao{
  border:1px solid transparent;
  border-radius:12px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
  background:#fff;
  color:var(--texto);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
}

.botao__icone{ display:inline-flex; color:inherit; }

.botao--verde{
  background:var(--verde);
  border-color:var(--verde);
  color:#fff;
}
.botao--verde:hover{
  background:var(--verde-escuro);
  border-color:var(--verde-escuro);
}

.botao--transparente{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.botao--transparente:hover{ background:rgba(255,255,255,.18); }

.botao--claro{
  background:#fff;
  border-color:var(--borda);
  color:var(--texto);
}
.botao--claro:hover{ filter:brightness(.98); }

.botao--cinza{
  background:#6b7280;
  border-color:#6b7280;
  color:#fff;
}
.botao--cinza:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =========================
   SEÇÕES
========================= */
.secao{ padding:clamp(36px, 6vw, 56px) 0; }
.secao--cinza{ background:var(--fundo-cinza); }

.secao__cabecalho{ margin-bottom:28px; }
.secao__cabecalho--centro{ text-align:center; }

.secao__cabecalho h2{
  margin:0 0 10px;
  font-size:clamp(26px, 3vw, 40px);
  letter-spacing:-.6px;
}

.secao__cabecalho p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

/* =========================
   SERVIÇOS (RESPONSIVO REAL)
========================= */
.grade-servicos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
}

.cartao-servico{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:22px;
  box-shadow:var(--sombra);
}

.cartao-servico h3{ margin:12px 0 10px; font-size:18px; }

.cartao-servico p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}

.link{
  border:none;
  background:transparent;
  color:#111827;
  font-weight:800;
  cursor:pointer;
  padding:0;
  min-height:44px;
}
.link:hover{ text-decoration:underline; }

.icone-circulo{
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#111827;
  border:1px solid var(--borda);
}
.icone-circulo--vermelho{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.25); }
.icone-circulo--azul{ background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.25); }
.icone-circulo--amarelo{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.25); }
.icone-circulo--verde{ background:rgba(18,183,106,.14); border-color:rgba(18,183,106,.25); }

/* =========================
   CALCULADORA
========================= */
.progresso{ margin:10px auto 18px; max-width:920px; }

.progresso__barra{
  height:8px;
  background:#d6d9e2;
  border-radius:999px;
  overflow:hidden;
}

.progresso__preenchimento{
  height:100%;
  width:33.33%;
  background:#0b1220;
  transition:width .25s ease;
}

.progresso__texto{
  text-align:center;
  margin-top:10px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

.cartao-pergunta{
  max-width:920px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:18px;
  box-shadow:var(--sombra);
  padding:clamp(16px, 3vw, 22px);
}

.cartao-pergunta__titulo{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.cartao-pergunta__icone{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:var(--azul);
  flex:0 0 auto;
}

.cartao-pergunta__titulo h3{ margin:0 0 6px; font-size:22px; }

.cartao-pergunta__titulo p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.cartao-pergunta__conteudo{ margin-top:18px; }

.cartao-pergunta__acoes{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}

/* botões de seleção responsivos */
.grade-botoes{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
}

.botao-selecao{
  border:2px solid #d8dbe6;
  background:#fff;
  border-radius:12px;
  padding:14px 12px;
  font-weight:700;
  letter-spacing:.1px;
  font-size:14px;
  cursor:pointer;
  transition:all .15s ease;
  min-height:44px;
}
.botao-selecao:hover{ filter:brightness(.99); }
.botao-selecao.ativo{
  border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* inputs */
.form-linha{ display:grid; gap:10px; }
.campo{ display:grid; gap:6px; }

.campo label{
  font-weight:800;
  color:#111827;
  font-size:13px;
}

select,
input[type="text"]{
  border:1px solid #d8dbe6;
  border-radius:12px;
  padding:12px;
  outline:none;
  min-height:44px;
}

select:focus,
input[type="text"]:focus{
  border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.opcoes{ display:grid; gap:10px; margin-top:6px; }

.opcao{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid #d8dbe6;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  min-height:44px;
}
.opcao input{ accent-color:var(--azul); }

/* RESULTADO */
.resultado{
  max-width:920px;
  margin:22px auto 0;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:18px;
  box-shadow:var(--sombra);
  padding:clamp(16px, 3vw, 22px);
}

.resultado__cabecalho h3{ margin:0 0 8px; font-size:22px; }
.resultado__cabecalho p{ margin:0; color:var(--muted); }

.resultado__grade{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.resultado__bloco{
  border:1px solid var(--borda);
  border-radius:16px;
  padding:14px;
}
.resultado__bloco--span2{ grid-column:1 / -1; }
.resultado__bloco h4{ margin:0 0 10px; }

.nivel{ font-size:26px; font-weight:900; margin-bottom:10px; }

.barra-nivel{
  height:10px;
  background:#e8ebf2;
  border-radius:999px;
  overflow:hidden;
}
.barra-nivel__fill{
  height:100%;
  width:0%;
  background:var(--verde);
  transition:width .25s ease;
}

.muted{ color:var(--muted); }

/* ✅ remove gambiarras de margin-left */
.resultado__acoes{
  display:flex;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.resultado__acoes .botao{ flex: 1 1 220px; }

/* TAG */
.linha-info{ margin:8px 0 10px; }

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--borda);
  background:#f3f5f8;
  color:#111827;
}
.tag--baixa{ background:rgba(18,183,106,.12); border-color:rgba(18,183,106,.25); color:#0b3d23; }
.tag--media{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.25); color:#6a3e00; }
.tag--alta{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.25); color:#5b1010; }

/* =========================
   FOOTER
========================= */
.rodape{
  background:linear-gradient(180deg, #0b1424 0%, #0a1120 100%);
  color:#cdd3df;
  padding:46px 0 0;
  position:relative;
}

.rodape__grade{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:28px;
  padding-bottom:24px;
}

.rodape__marca{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:#fff;
}

.rodape__escudo{ color:var(--verde); }

.rodape__texto{
  margin:0;
  line-height:1.7;
  color:#cdd3df;
}

.rodape h4{ margin:0 0 12px; color:#fff; }

.rodape__lista{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.rodape__destaque{ color:#44f3a2; font-weight:900; }

.rodape__base{
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  padding:16px 0;
  color:#cdd3df;
  font-size:13px;
}

/* =========================
   WHATS / ORÇAMENTO
========================= */
.whats-flutuante{
  position:fixed;
  right:18px;
  bottom:18px;
  width:66px;
  height:66px;
  border-radius:999px;
  background:var(--verde);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 16px 35px rgba(0,0,0,.20);
  z-index:30;
  text-decoration:none;
}
.whats-flutuante:hover{ background:var(--verde-escuro); }

.orcamento-flutuante{
  position:fixed;
  right:18px;
  bottom:96px;
  padding:12px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid var(--borda);
  color:#111827;
  font-weight:1000;
  text-decoration:none;
  box-shadow:0 16px 35px rgba(0,0,0,.14);
  z-index:30;
}
.orcamento-flutuante:hover{ filter:brightness(.98); }

/* =========================
   CARROSSEL - PRAGAS
========================= */
.carrossel{ position:relative; margin-top:18px; }

.carrossel__viewport{
  overflow:hidden;
  border-radius:18px;
}

.carrossel__track{
  display:flex;
  gap:18px;
  padding:4px;
  transition:transform .45s ease;
  will-change:transform;
}

.carrossel__card{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:16px;
  box-shadow:var(--sombra);
  overflow:hidden;
  flex:0 0 calc((100% - (18px * 2)) / 3);
}

.carrossel__img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  background:#e9edf5;
}

.carrossel__conteudo{ padding:16px; }

.carrossel__titulo{
  margin:0 0 10px;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.2px;
}

.carrossel__bloco{
  display:grid;
  gap:8px;
  margin-top:10px;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}

.carrossel__linha{ display:grid; gap:4px; }

.carrossel__rotulo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color:#0b1220;
}
.carrossel__rotulo--repro{ color:#dc2626; }
.carrossel__rotulo--evitar{ color:var(--verde); }

.carrossel__texto{ margin:0; }

/* setas */
.carrossel__seta{
  position:absolute;
  top:42%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid var(--borda);
  background:#fff;
  box-shadow:0 16px 35px rgba(0,0,0,.16);
  color:#111827;
  cursor:pointer;
  z-index:2;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:900;
  user-select:none;
}
.carrossel__seta:hover{ filter:brightness(.98); }
.carrossel__seta:active{ transform:translateY(-50%) scale(.98); }
.carrossel__seta--esq{ left:-14px; }
.carrossel__seta--dir{ right:-14px; }

/* pontos */
.carrossel__pontos{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}

.carrossel__ponto{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.22);
  background:rgba(17,24,39,.10);
  cursor:pointer;
  padding:0;
}
.carrossel__ponto.ativo{
  background:rgba(17,24,39,.65);
  border-color:rgba(17,24,39,.65);
  transform:scale(1.15);
}

/* =========================
   RESPONSIVO EXTRA
========================= */
@media (max-width:1020px){
  .carrossel__card{ flex:0 0 calc((100% - 18px) / 2); }
  .carrossel__seta--esq{ left:6px; }
  .carrossel__seta--dir{ right:6px; }
}

@media (max-width:760px){
  .cartao-pergunta__acoes{ justify-content:stretch; }
  .cartao-pergunta__acoes .botao{ flex:1; }

  .resultado__grade{ grid-template-columns:1fr; }
  .resultado__bloco--span2{ grid-column:auto; }

  .carrossel__card{ flex:0 0 100%; }
  .carrossel__img{ height:170px; }
  .carrossel__seta{ width:46px; height:46px; font-size:28px; }
  .carrossel__texto{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
}

@media (max-width:520px){
  .hero__botoes .botao{ width:100%; }

  .resultado__acoes{ flex-direction:column; }
  .resultado__acoes .botao{ width:100%; flex:1 1 auto; }

  /* ✅ controla distância REAL */
  .marca{
    gap: 4px; /* 0, 2, 4... ajusta aqui */
  }

  /* ✅ isso aqui é o que mais afasta */
  .marca__icone{
    width: 78px;  /* DIMINUI pra aproximar */
    height: 60px;
  }

  .logo-empresa{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .marca__texto{
    line-height: 1.12;
    min-width: 0;
  }

  .marca__texto strong{ font-size:14px; }
  .marca__texto small{ font-size:11px; }
}


/* =========================
   PATCH — Letras maiores na CALCULADORA
========================= */
#calculadora .cartao-pergunta__titulo p{ font-size:16px; }
#calculadora .campo label{ font-size:15px; }

#calculadora select,
#calculadora input[type="text"],
#calculadora .opcao,
#calculadora .botao-selecao{ font-size:16px; }

#calculadora .resultado__cabecalho p{ font-size:15px; }
#calculadora .resultado__bloco h4{ font-size:16px; }
#calculadora .muted{ font-size:14px; }

/* =========================
   POPUP DESCONTO (20%)
========================= */
body.no-scroll { overflow: hidden; }

.popup-desconto{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
  z-index: 999;
}

.popup-desconto.aberto{ display: flex; }

.popup-desconto__card{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 18px;
}

.popup-desconto__topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.popup-desconto__titulo{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -.2px;
  color: #0b1220;
}

.popup-desconto__fechar{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
}

.popup-desconto__texto{
  margin: 10px 0 12px;
  color: rgba(17,24,39,.80);
  line-height: 1.6;
  font-weight: 700;
}

.popup-desconto__cupom{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f3f5f8;
  border: 1px dashed rgba(0,0,0,.18);
  font-weight: 900;
  color: #111827;
  margin-bottom: 14px;
}

.popup-desconto__ok{
  width: 100%;
  justify-content: center;
}

.popup-desconto__rodape{
  display: block;
  margin-top: 10px;
  color: rgba(17,24,39,.55);
  font-weight: 700;
}

/* =========================
   BOTÃO PISCANDO (Orçamento)
========================= */
@keyframes piscarOrcamento {
  0%   { background: #ef4444; border-color: #ef4444; transform: translateY(0); }
  50%  { background: #f59e0b; border-color: #f59e0b; transform: translateY(-1px); }
  100% { background: #ef4444; border-color: #ef4444; transform: translateY(0); }
}

.botao--pisca{
  color: #fff !important;
  animation: piscarOrcamento 1s infinite;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

.botao--pisca:hover{
  filter: brightness(.98);
}

/* =========================
   BOTÃO DO TOPO (Header)
========================= */
.botao--cta-topo{
  background: #fff;
  border: 1px solid var(--borda);
  color: #111827;
  font-weight: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  text-decoration: none;
  white-space: nowrap;
}

.botao--cta-topo:hover{
  filter: brightness(.98);
}

/* no mobile, reduzir um pouco pra não estourar */
@media (max-width:520px){
  .botao--cta-topo{
    padding: 10px 12px;
    font-size: 13px;
  }
}
 /* =========================
   BOTÃO DO TOPO PISCANDO (Vermelho <-> Amarelo)
========================= */

.botao--cta-topo{
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 1000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

  /* animação */
  animation: piscaOrcamento 0.85s infinite alternate ease-in-out;
  will-change: transform, filter, background-color, border-color;
}

/* deixa o ícone sempre visível e alinhado */
.botao--cta-topo .botao__icone{
  display: inline-flex;
}

/* animação alternando entre amarelo e vermelho */
@keyframes piscaOrcamento{
  0%{
    background: #f59e0b; /* amarelo */
    border-color: #f59e0b;
    color: #111827;
    transform: scale(1);
    filter: drop-shadow(0 10px 22px rgba(245,158,11,.28));
  }
  100%{
    background: #ef4444; /* vermelho */
    border-color: #ef4444;
    color: #ffffff;
    transform: scale(1.03);
    filter: drop-shadow(0 12px 26px rgba(239,68,68,.35));
  }
}

/* no hover, mantém a animação mas dá uma “força” a mais */
.botao--cta-topo:hover{
  filter: brightness(1.02);
}

/* Mobile: diminuir um pouco pra não estourar */
@media (max-width:520px){
  .botao--cta-topo{
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* =========================
   WHATS FLUTUANTE PISCANDO (Vermelho <-> Amarelo)
========================= */

.whats-flutuante{
  animation: piscaWhats 0.85s infinite alternate ease-in-out;
  border: 2px solid transparent;
  will-change: transform, filter, background-color, border-color;
}

@keyframes piscaWhats{
  0%{
    background: #f59e0b; /* amarelo */
    border-color: #f59e0b;
    color: #111827;
    transform: scale(1);
    filter: drop-shadow(0 12px 26px rgba(245,158,11,.35));
  }
  100%{
    background: #ef4444; /* vermelho */
    border-color: #ef4444;
    color: #ffffff;
    transform: scale(1.04);
    filter: drop-shadow(0 14px 28px rgba(239,68,68,.40));
  }
}