/* ==========================================================================
   CREDSIGA SEGUROS — folha de estilo do site
   Cores e tipografia conforme "CREDSIGA - Manual da Marca v3.0" (setembro/2026).

   REGRA DE COR QUE NÃO SE QUEBRA (manual, seção 3):
     fundo claro  -> laranja de TEXTO  #C96A12  (o #E98B2B não passa no contraste)
     fundo escuro -> laranja da marca  #E98B2B
     o arco do símbolo é sempre #E98B2B

   Arquivo versionado no nome (-v2). Se o conteúdo mudar, o nome muda junto:
   é o que impede o navegador de entregar a versão velha para quem já visitou.

   v2 — 16/09/2026: logo do topo maior, banner do Cotacerto clicável e
   depoimentos em esteira que corre sozinha.
   ========================================================================== */

:root{
  --azul:        #17213F;   /* azul-marinho Credsiga */
  --azul-medio:  #3E4A63;   /* descritor em fundo claro */
  --azul-claro:  #C9CEDA;   /* descritor em fundo azul */
  --laranja:     #E98B2B;   /* laranja da marca — fundo escuro e áreas de cor */
  --laranja-txt: #C96A12;   /* laranja de texto — SÓ sobre fundo claro */
  --areia:       #F2F1EE;
  --branco:      #FFFFFF;
  --cinza:       #55524C;   /* texto corrido longo */
  --linha:       #E3E1DC;

  --raio:        14px;
  --raio-p:      10px;
  --sombra:      0 1px 2px rgba(23,33,63,.06), 0 8px 28px rgba(23,33,63,.08);
  --sombra-alta: 0 2px 6px rgba(23,33,63,.10), 0 18px 48px rgba(23,33,63,.14);
  --largura:     1140px;
  --fonte:       "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-desc:  "Saira", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* ==========================================================================
   A TRAVA QUE IMPEDE A PÁGINA DE FICAR MAIS LARGA QUE A TELA
   Itens de grade e de flex nascem com `min-width:auto`: eles se recusam a
   encolher abaixo do próprio conteúdo. Uma única imagem larga demais empurra
   a grade, que empurra a seção, que empurra a página — e aparece rolagem
   lateral no celular. Foi exatamente o que uma logo de 400px fez em
   16/09/2026, numa tela de 360px.
   `min-width:0` autoriza cada item a encolher. É barato e evita a classe de
   defeito mais difícil de achar neste site. NÃO REMOVER.
   ========================================================================== */
.hero-grade > *, .cotacerto-grade > *, .contato-grade > *,
.duas-colunas > *, .grade-produtos > *, .passos > *,
.lista-motivos > *, .rodape-grade > *, .faixa-itens > *{ min-width:0; }

html{
  scroll-behavior:smooth;
  /* Impede o Chrome do Android de aumentar as fontes por conta própria
     ("font boosting"). Sem isto, num aparelho com fonte grande do sistema o
     texto cresce sem a caixa crescer junto, e o conteúdo vaza para fora —
     foi o sintoma que o Edson fotografou em 16/09/2026, com o pop-up cortado. */
  -webkit-text-size-adjust:100%;
          text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.65;
  color:var(--cinza);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--laranja-txt); }

h1,h2,h3{
  font-family:var(--fonte);
  color:var(--azul);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
h1{ font-weight:900; font-size:clamp(1.9rem, 4.4vw, 3rem); }
h2{ font-weight:900; font-size:clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-weight:700; font-size:1.12rem; }
p{ margin:0 0 1em; }

.caixa{ width:min(100% - 40px, var(--largura)); margin-inline:auto; }
.caixa-estreita{ width:min(100% - 40px, 800px); }

/* ==========================================================================
   ÂNCORAS E O CABEÇALHO FIXO — não remover
   O cabeçalho é `position:sticky`, então ele fica por cima do conteúdo. Sem
   isto, clicar em "Fazer uma cotação" rola até o topo exato da seção e o
   cabeçalho cobre justamente a primeira linha: o visitante chega numa tela
   cortada pela metade.
   Medido no celular em 16/09/2026, antes da correção: cabeçalho de 67px e o
   descritor da seção parando a 44px do topo — debaixo dele.
   O valor é sempre a ALTURA DO CABEÇALHO daquele tamanho de tela + respiro.
   Se mexer na altura da `.faixa`, mexa aqui junto.
   ========================================================================== */
section[id], main[id], div[id].legal{ scroll-margin-top:106px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul); color:#fff; padding:12px 18px; border-radius:0 0 var(--raio-p) 0;
}
.pular:focus{ left:0; }

/* ---------- descritor em caixa alta (fonte Saira, manual seção 4) ---------- */
.kicker{
  font-family:var(--fonte-desc);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.135em;
  font-size:.74rem;
  color:var(--laranja-txt);
  margin:0 0 .7em;
}
.kicker-claro{ color:var(--laranja); }

/* ========================== BOTÕES ========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--fonte); font-weight:900; font-size:.98rem;
  padding:14px 24px; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:3px solid var(--laranja); outline-offset:3px; }

.btn-laranja{ background:var(--laranja); color:var(--azul); box-shadow:0 6px 18px rgba(233,139,43,.32); }
.btn-laranja:hover{ background:#f0973c; }

.btn-linha{ background:transparent; color:var(--azul); border-color:var(--azul); }
.btn-linha:hover{ background:var(--azul); color:#fff; }
.btn-linha-claro{ color:#fff; border-color:rgba(255,255,255,.55); }
.btn-linha-claro:hover{ background:#fff; color:var(--azul); border-color:#fff; }

.btn-zap{ background:#1FA855; color:#fff; box-shadow:0 6px 16px rgba(31,168,85,.28); }
.btn-zap:hover{ background:#1c9a4e; }
.btn-grande{ padding:17px 28px; font-size:1.03rem; }
.btn-bloco{ width:100%; }

/* ícone do WhatsApp, desenhado em CSS para não depender de arquivo externo */
.ico-zap{
  width:19px; height:19px; flex:none;
  background-color:currentColor;
  -webkit-mask:var(--zap) center/contain no-repeat;
          mask:var(--zap) center/contain no-repeat;
  --zap:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15h-.01a8.2 8.2 0 01-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.22 8.22 0 01-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.23 8.23 0 010 16.47zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'/></svg>");
}

/* ========================== TOPO ========================== */
.topo{
  position:sticky; top:0; z-index:100;
  background:var(--branco);              /* branco puro: a logo tem fundo branco opaco */
  border-bottom:1px solid var(--linha);
}
.faixa{
  width:min(100% - 40px, var(--largura)); margin-inline:auto;
  display:flex; align-items:center; gap:22px;
  min-height:90px;
}
/* A logo do topo usa `logo-credsiga-topo-v2.png`, recortada da arte original.
   Por que recortar: o arquivo da marca traz 64% da altura em margem vazia, e
   com isso a marca aparecia com apenas ~22px de altura real num cabeçalho de
   62px — parecia pequena, e era. Medido em 16/09/2026.
   O respiro do manual (seção 6) não foi abolido: ele continua garantido aqui,
   pelo `gap` da faixa e pelo espaço livre do cabeçalho. O que saiu foi a
   margem DENTRO do arquivo, que estava dobrando o respiro.
   Largura exibida: ~273px — acima dos 130px mínimos da versão diária. */
.marca img{ max-height:62px; width:auto; }

.menu{ display:flex; gap:22px; margin-left:auto; }
.menu a{
  color:var(--azul); text-decoration:none; font-weight:700; font-size:.95rem;
  padding:6px 0; border-bottom:2px solid transparent;
}
.menu a:hover{ border-bottom-color:var(--laranja); }

.topo-zap{ padding:11px 20px; font-size:.92rem; }

/* As três barras são posicionadas a partir do centro do botão (top:50% ± 7px),
   e não por espaçamento entre elas. É o que faz o "X" fechar certo em qualquer
   tamanho de botão — com translateY fixo, mudar a altura do botão no celular
   desalinhava as barras e o X virava um ">". Medido em 16/09/2026. */
.hamburguer{
  display:none; margin-left:auto; position:relative;
  width:46px; height:42px; border:2px solid var(--azul); border-radius:var(--raio-p);
  background:transparent; cursor:pointer; padding:0;
}
.hamburguer span{
  position:absolute; left:10px; right:10px; height:2px; margin-top:-1px;
  background:var(--azul); border-radius:2px;
  transition:top .2s ease, transform .2s ease, opacity .15s ease;
}
.hamburguer span:nth-child(1){ top:calc(50% - 7px); }
.hamburguer span:nth-child(2){ top:50%; }
.hamburguer span:nth-child(3){ top:calc(50% + 7px); }
.hamburguer.ativo span:nth-child(1){ top:50%; transform:rotate(45deg); }
.hamburguer.ativo span:nth-child(2){ opacity:0; }
.hamburguer.ativo span:nth-child(3){ top:50%; transform:rotate(-45deg); }

/* ========================== CHAMADA PRINCIPAL ========================== */
.hero{
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(233,139,43,.18), transparent 62%),
    var(--azul);
  color:#fff;
  padding:72px 0 78px;
}
.hero-grade{ display:grid; grid-template-columns:1.25fr .85fr; gap:52px; align-items:start; }
.hero h1{ color:#fff; }
.lead{ color:var(--azul-claro); font-size:1.12rem; max-width:44ch; }
.lead-nota{ color:var(--azul-claro); font-size:.92rem; opacity:.85; max-width:44ch; }
.hero-botoes{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 22px; }
.hero-selo{
  font-size:.86rem; color:var(--azul-claro); margin:0;
  padding-top:16px; border-top:1px solid rgba(201,206,218,.22);
}

.hero-cartao{
  background:var(--branco); color:var(--cinza);
  border-radius:var(--raio); padding:30px 28px; box-shadow:var(--sombra-alta);
}
.hero-cartao h2{ font-size:1.22rem; margin-bottom:.9em; }
.lista-check{ list-style:none; margin:0; padding:0; }
.lista-check li{ position:relative; padding-left:30px; margin-bottom:16px; font-size:.97rem; }
.lista-check li:last-child{ margin-bottom:0; }
.lista-check li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:16px; height:16px; border-radius:50%;
  border:3px solid var(--laranja);
}
.lista-check strong{ color:var(--azul); }

/* ========================== FAIXA DE CONFIANÇA ========================== */
.faixa-confianca{ background:var(--areia); border-bottom:1px solid var(--linha); }
.faixa-itens{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding:26px 0;
}
.faixa-itens div{ display:flex; flex-direction:column; gap:2px; }
.faixa-itens strong{ color:var(--azul); font-weight:900; font-size:1.02rem; }
.faixa-itens span{ font-size:.87rem; }

/* ========================== SEÇÕES ========================== */
.secao{ padding:78px 0; }
.secao-areia{ background:var(--areia); }
.titulo-secao{ max-width:22ch; }
.sub-secao{ max-width:62ch; font-size:1.06rem; margin-bottom:38px; }
.sub-esquerda{ margin-bottom:0; }

/* ---------- produtos ---------- */
.grade-produtos{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.produto{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:26px 22px 22px; display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.produto:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:#d7d4cd; }
.produto .ico{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:16px;
  background:rgba(233,139,43,.14); color:var(--laranja-txt);
}
.produto .ico svg{ width:28px; height:28px; }
.produto p{ font-size:.94rem; flex:1; }
.link-produto{
  font-weight:900; font-size:.92rem; color:var(--laranja-txt); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
}
.link-produto::after{ content:"→"; transition:transform .15s ease; }
.link-produto:hover::after{ transform:translateX(3px); }

/* ---------- cotacerto ---------- */
.secao-cotacerto{
  background:
    radial-gradient(760px 360px at 12% 110%, rgba(233,139,43,.20), transparent 60%),
    var(--azul);
}
.cotacerto-grade{ display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:center; }
.titulo-claro{ color:#fff; }
.texto-claro{ color:var(--azul-claro); }
.texto-claro a{ color:var(--laranja); }
.texto-menor{ font-size:.92rem; }

/* O banner inteiro é um link para o cotacerto.com.br */
.cotacerto-marca{
  display:block; text-decoration:none;
  background:var(--branco); border-radius:var(--raio); padding:38px 34px;
  text-align:center; box-shadow:var(--sombra-alta);
  transition:transform .15s ease, box-shadow .2s ease;
}
.cotacerto-marca:hover{ transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,0,0,.28); }
.cotacerto-marca:focus-visible{ outline:3px solid var(--laranja); outline-offset:4px; }
/* Logo maior e sem o descritor, slogan no lugar do domínio — pedido do Edson
   em 16/09/2026. O domínio saiu porque o card inteiro já é o link. */
/* ⚠️ ESTE `400px` JÁ DERRUBOU O SITE NO CELULAR — 16/09/2026.
   Estava escrito `max-width:400px` apenas. Numa tela de 360px a imagem não
   cabia, e como item de grade ela EMPURRA a grade inteira: a seção foi para
   440px, a página para 460px, e nasceu uma rolagem lateral de 100px.
   O efeito não aparecia aqui — aparecia no pop-up, que ficava deslocado e
   cortado, e nas âncoras, que paravam no lugar errado. Dois dias de caça.
   O `width:100%` antes do máximo é o que faz a imagem encolher junto com a
   tela. NÃO volte a escrever só `max-width`. */
.cotacerto-marca img{ margin:0 auto 18px; width:100%; max-width:400px; height:auto; }
.cotacerto-slogan{
  display:block; font-family:var(--fonte); font-weight:700;
  font-size:1.05rem; color:var(--azul); line-height:1.35;
}
.cotacerto-cta{
  display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  font-weight:900; font-size:1.05rem; color:var(--laranja-txt);
}
.cotacerto-marca:hover .cotacerto-cta span{ transform:translateX(3px); }
.cotacerto-cta span{ display:inline-block; transition:transform .15s ease; }

/* ---------- passos ---------- */
.passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.passos li{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:26px 22px; }
.passos .num{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--azul); color:var(--laranja); font-weight:900; font-size:1.05rem; margin-bottom:14px;
}
.passos p{ font-size:.94rem; margin:0; }

/* ---------- por que corretor ---------- */
.duas-colunas{ display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:start; }
.lista-motivos{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 30px; }
.lista-motivos h3{ position:relative; padding-left:18px; }
.lista-motivos h3::before{
  content:""; position:absolute; left:0; top:.32em;
  width:6px; height:6px; border-radius:50%; background:var(--laranja);
}
.lista-motivos p{ font-size:.95rem; margin:0; padding-left:18px; }
.texto-corrido{ max-width:58ch; }

/* ==========================================================================
   DEPOIMENTOS — esteira que corre sozinha
   O trilho leva o conteúdo DUPLICADO (o JS faz isso). A animação anda até
   -50% e reinicia: como a segunda metade é igual à primeira, a volta não
   tem emenda visível.
   O espaçamento é feito com margin-right no cartão, e NÃO com gap. Com gap,
   metade do trilho não bate com o conjunto de cartões e a volta dá um pulo.
   ========================================================================== */
.depo-esteira{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.depo-trilho{ display:flex; width:max-content; }
.depo-trilho.depo-correndo{ animation:correr var(--duracao, 45s) linear infinite; }
.depo-esteira:hover .depo-trilho{ animation-play-state:paused; }

@keyframes correr{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.depo{
  margin:0 22px 0 0; flex:none; width:340px;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); padding:26px 24px; display:flex; flex-direction:column;
}
.depo blockquote{
  margin:0 0 18px; font-size:.97rem; color:var(--cinza); flex:1;
  position:relative; padding-top:26px;
}
.depo blockquote::before{
  content:"“"; position:absolute; top:-6px; left:-2px;
  font-size:3.2rem; line-height:1; color:var(--laranja); font-family:Georgia,serif;
}
.depo figcaption{ display:flex; flex-direction:column; border-top:1px solid var(--linha); padding-top:14px; }
.depo figcaption strong{ color:var(--azul); font-weight:900; font-size:.96rem; }
.depo figcaption span{
  font-family:var(--fonte-desc); font-weight:700; text-transform:uppercase;
  letter-spacing:.135em; font-size:.68rem; color:var(--azul-medio); margin-top:3px;
}

/* Quem pediu menos animação no sistema recebe a esteira PARADA e rolável com
   o dedo ou com o mouse. O conteúdo continua acessível — só não se move. */
@media (prefers-reduced-motion: reduce){
  .depo-esteira{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .depo-trilho.depo-correndo{ animation:none; }
}

/* ---------- cartão de contato ---------- */
.cartao-contato{
  background:var(--areia); border:1px solid var(--linha);
  border-radius:var(--raio); padding:30px 28px;
}
.cartao-contato h3{ margin-bottom:1em; }
.ct-linha{ font-size:.95rem; margin-bottom:16px; }
.ct-linha:last-child{ margin-bottom:0; }
.ct-linha strong{
  color:var(--azul-medio); font-family:var(--fonte-desc); font-weight:700;
  text-transform:uppercase; letter-spacing:.135em; font-size:.7rem;
}

/* ---------- perguntas frequentes ---------- */
.faq{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio-p); padding:0 22px; margin-bottom:12px;
}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative;
  font-weight:700; color:var(--azul); font-size:1.01rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:14px;
  font-size:1.6rem; font-weight:400; color:var(--laranja-txt); line-height:1;
}
.faq[open] summary::after{ content:"–"; }
.faq p{ margin:0 0 20px; font-size:.96rem; }

/* ========================== CONTATO ========================== */
.secao-contato{
  background:
    radial-gradient(800px 380px at 88% 0%, rgba(233,139,43,.16), transparent 60%),
    var(--azul);
  padding:78px 0;
}
.contato-grade{ display:grid; grid-template-columns:.95fr 1.05fr; gap:52px; align-items:start; }

.formulario{
  background:var(--branco); border-radius:var(--raio);
  padding:32px 30px; box-shadow:var(--sombra-alta);
}
.campo{ margin-bottom:18px; }
.campo-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.campo label{
  display:block; margin-bottom:6px;
  font-family:var(--fonte-desc); font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; font-size:.7rem; color:var(--azul-medio);
}
.opcional{ text-transform:none; letter-spacing:0; font-family:var(--fonte); font-weight:400; }
.campo input, .campo select, .campo textarea{
  width:100%; font-family:var(--fonte); font-size:1rem; color:var(--azul);
  padding:13px 14px; border:1.5px solid var(--linha); border-radius:var(--raio-p);
  background:var(--branco); transition:border-color .15s ease, box-shadow .15s ease;
}
.campo textarea{ resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--laranja); box-shadow:0 0 0 3px rgba(233,139,43,.20);
}
.campo input::placeholder, .campo textarea::placeholder{ color:#a7a49e; }

.consentimento{ display:flex; gap:11px; align-items:flex-start; font-size:.88rem; margin:6px 0 20px; }
.consentimento input{ margin-top:4px; width:17px; height:17px; flex:none; accent-color:var(--laranja-txt); }
.form-nota{ font-size:.82rem; text-align:center; margin:14px 0 0; }
.campo-armadilha{ position:absolute; left:-9999px; }   /* honeypot: robô preenche, gente não vê */

/* ========================== AVISO DE GOLPES (faixa) ========================== */
.aviso-golpe{ background:#FBF3E8; border-top:3px solid var(--laranja); }
.aviso-caixa{ display:flex; gap:20px; align-items:flex-start; padding:30px 0; }
.aviso-ico{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--laranja); color:var(--azul);
  display:grid; place-items:center; font-weight:900; font-size:1.4rem;
}
.aviso-golpe h2{ font-size:1.16rem; margin-bottom:.4em; }
.aviso-golpe p{ margin:0; font-size:.95rem; }

/* ========================== RODAPÉ ========================== */
.rodape{ background:var(--azul); color:var(--azul-claro); padding:54px 0 0; }
.rodape-grade{ display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:44px; padding-bottom:40px; }
.rodape-marca img{ max-width:250px; }
.rodape-links{ display:flex; flex-direction:column; gap:9px; }
.rodape-links h3{
  color:#fff; font-family:var(--fonte-desc); font-weight:700;
  text-transform:uppercase; letter-spacing:.135em; font-size:.72rem; margin-bottom:6px;
}
.rodape-links a{ color:var(--azul-claro); text-decoration:none; font-size:.93rem; }
.rodape-links a:hover{ color:var(--laranja); }
.rodape-txt{ font-size:.93rem; }

.rodape-legal{ border-top:1px solid rgba(201,206,218,.18); padding:26px 0 34px; }
.rodape-legal p{ font-size:.79rem; line-height:1.6; color:#9aa3b5; margin:0 0 12px; }
.rodape-fim{ margin:0; }

/* ========================== BOTÃO FLUTUANTE ========================== */
/* O botão flutuante só aparece depois que o visitante rola a primeira tela.
   Motivo: na abertura ele cobria o botão "Fazer uma cotação" no celular, e ali
   é redundante — a chamada principal já tem um botão de WhatsApp do lado.
   Quem não tiver JavaScript vê o botão sempre, que é o comportamento seguro. */
.zap-flutuante{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#1FA855; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
  transition:transform .15s ease, opacity .2s ease;
}
.zap-flutuante:hover{ transform:scale(1.06); }
.zap-flutuante.zap-oculto{ opacity:0; pointer-events:none; transform:scale(.8); }
.zap-flutuante .ico-zap{ width:30px; height:30px; }

/* ==========================================================================
   AVISO DE GOLPES (pop-up)
   Mesmo modelo do site da AGBENS. O atributo hidden no HTML é quem esconde
   de verdade — estas regras só cuidam da aparência. Ver comentário no
   index.html antes de mexer.
   ========================================================================== */
/* Estrutura copiada do pop-up da AGBENS, que é o único comportamento
   comprovado no celular do Edson (ele mandou a foto dos dois lado a lado em
   16/09/2026: o da AGBENS certo, o daqui estourando a tela).
   O que mudou em relação à versão anterior daqui, e por quê:
     - `display:none` + `.golpe-aberto{display:flex}` no lugar de flex
       permanente com opacidade. Menos uma variável em jogo.
     - `max-width:520px; width:100%` no lugar de `width:min(100%,520px)`.
     - `min-width:0`, que autoriza a caixa a encolher.
     - mais margem em volta no celular (22px/18px, como lá).
   NÃO "simplifique" isto de volta sem testar num celular de verdade. */
.golpe{
  display:none;
  position:fixed; inset:0; z-index:150;
  background:rgba(10,15,30,.62);
  align-items:center; justify-content:center;
  padding:20px;
}
.golpe.golpe-aberto{ display:flex; }
.golpe[hidden]{ display:none !important; }

/* ⚠️ A LARGURA DESTA CAIXA JÁ QUEBROU NO CELULAR DO EDSON — 16/09/2026.
   Estava escrita como `width:min(100%, 520px)`. Parece igual ao que está
   abaixo, e não é: dentro de um container flex, o filho tem `min-width:auto`
   e NÃO PODE encolher abaixo da largura do seu próprio conteúdo. O e-mail
   `credsiga@credsiga.com` é uma palavra longa sem espaços — ele impôs uma
   largura mínima, a caixa esticou e o texto vazou para fora da tela.
   O site da AGBENS nunca teve o problema porque usa a forma abaixo.
   `min-width:0` é o que autoriza a caixa a encolher. NÃO REMOVER. */
.golpe-caixa{
  position:relative;
  background:var(--branco);
  border-radius:var(--raio);
  border-top:6px solid var(--laranja);
  max-width:520px; width:100%; min-width:0;
  max-height:92vh; overflow-y:auto; overflow-x:hidden;
  padding:34px 32px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
/* E aqui o e-mail e o telefone ganham permissão de quebrar, para nunca mais
   serem eles a definir a largura da caixa. */
.golpe-caixa p, .golpe-caixa li, .golpe-caixa h2, .golpe-caixa a{ overflow-wrap:anywhere; }
.golpe-x{
  position:absolute; top:10px; right:14px;
  background:none; border:none; cursor:pointer;
  font-size:1.9rem; line-height:1; color:var(--azul-medio); padding:4px 8px;
}
.golpe-x:hover{ color:var(--azul); }
.golpe-selo{
  font-family:var(--fonte-desc); font-weight:700; text-transform:uppercase;
  letter-spacing:.135em; font-size:.74rem; color:var(--laranja-txt); margin:0 0 .4em;
}
.golpe-titulo{ font-size:1.4rem; margin-bottom:.7em; }
.golpe-texto p{ font-size:.97rem; margin:0 0 .9em; }
.golpe-forte{ font-weight:700; color:var(--azul); }

.golpe-canais{
  list-style:none; margin:0 0 24px; padding:16px 18px;
  background:var(--areia); border-radius:var(--raio-p);
}
.golpe-canais li{ margin-bottom:8px; font-size:.97rem; }
.golpe-canais li:last-child{ margin-bottom:0; }
/* `word-break` aqui é o que impede o e-mail, que é uma palavra longa sem
   espaços, de definir a largura mínima da caixa inteira. A AGBENS tem isto
   desde sempre; aqui faltava. */
.golpe-canais a{ color:var(--laranja-txt); font-weight:700; text-decoration:none; word-break:break-word; }
.golpe-canais a:hover{ text-decoration:underline; }

body.sem-rolagem{ overflow:hidden; }

/* ==========================================================================
   TERMOS DE USO E POLÍTICA DE PRIVACIDADE
   Abrem pela âncora do link (#termos / #privacidade), sem JavaScript nenhum.
   As duas linhas que realmente escondem (`.legal` e `.legal:target`) estão
   TAMBÉM na rede de segurança do <head> — é o que impede os dois documentos
   de aparecerem despejados no fim da página se a folha de estilo não chegar.
   ========================================================================== */
.legal{
  display:none;
  position:fixed; inset:0; z-index:180;
  background:rgba(10,15,30,.72);
  overflow-y:auto;
  padding:28px 20px;
}
.legal:target{ display:block; }

/* Mesma forma segura do pop-up — ver o comentário em .golpe-caixa.
   Aqui o risco é ainda maior: o texto traz e-mails, números de CNPJ e tabelas. */
.legal-box{
  position:relative;
  background:var(--branco);
  border-radius:var(--raio);
  border-top:6px solid var(--laranja);
  max-width:820px; width:100%; min-width:0;
  margin:0 auto;
  padding:46px 46px 40px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.legal-box p, .legal-box li, .legal-box a{ overflow-wrap:anywhere; }
.legal-x{
  position:absolute; top:12px; right:18px;
  font-size:2rem; line-height:1; color:var(--azul-medio);
  text-decoration:none; padding:4px 8px;
}
.legal-x:hover{ color:var(--azul); }

.legal-box h1{ font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:.3em; }
.legal-box h2{
  font-size:1.08rem; font-weight:900; margin:2em 0 .6em;
  padding-top:1em; border-top:1px solid var(--linha);
}
.legal-box h2:first-of-type{ border-top:none; padding-top:0; }
.legal-box p, .legal-box li{ font-size:.95rem; }
.legal-box ul{ margin:0 0 1em; padding-left:22px; }
.legal-box li{ margin-bottom:8px; }
.legal-box strong{ color:var(--azul); }

.legal-data{
  font-family:var(--fonte-desc); font-weight:700; text-transform:uppercase;
  letter-spacing:.135em; font-size:.7rem; color:var(--azul-medio); margin-bottom:2em;
}

.legal-destaque{
  background:#FBF3E8; border-left:4px solid var(--laranja);
  border-radius:0 var(--raio-p) var(--raio-p) 0;
  padding:16px 20px; margin:0 0 1.2em; font-size:.95rem;
}

.legal-tabela{
  width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:.9rem;
  display:block; overflow-x:auto;      /* tabela larga rola sozinha no celular */
}
.legal-tabela th, .legal-tabela td{
  text-align:left; vertical-align:top;
  padding:10px 12px; border:1px solid var(--linha);
}
.legal-tabela th{
  background:var(--areia); color:var(--azul);
  font-family:var(--fonte-desc); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; font-size:.68rem;
}

.legal-fechar{ margin-top:26px; }

/* ========================== TELAS MENORES ========================== */
@media (max-width:1000px){
  .hero-grade, .cotacerto-grade, .contato-grade, .duas-colunas{ grid-template-columns:1fr; gap:36px; }
  .grade-produtos{ grid-template-columns:repeat(2,1fr); }
  .passos{ grid-template-columns:repeat(2,1fr); }
  .faixa-itens{ grid-template-columns:repeat(2,1fr); }
  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .titulo-secao{ max-width:none; }

  /* Abaixo de 1000px o menu horizontal não cabe e quebra em duas linhas.
     Medido em 16/09/2026 com 800px de largura: "Como funciona" e "Quem somos"
     desciam para uma segunda linha e desalinhavam o topo inteiro. */
  .topo-zap{ display:none; }
  .hamburguer{ display:block; order:2; }
  .faixa{ flex-wrap:wrap; gap:14px; min-height:78px; }
  /* O menu vem antes do botão no HTML (para quem navega por teclado e leitor de
     tela). No celular ele precisa aparecer ABAIXO, então a ordem visual é
     invertida aqui — sem mexer na ordem do HTML. */
  .menu{
    display:none; order:3; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--linha); margin:0 0 6px; padding-top:6px;
  }
  .menu.aberto{ display:flex; }
  .menu a{ padding:12px 2px; border-bottom:1px solid var(--linha); }
  .menu a:last-child{ border-bottom:none; }

  /* cabeçalho de 78px nesta faixa */
  section[id], main[id], div[id].legal{ scroll-margin-top:94px; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .marca img{ max-height:44px; }
  .faixa{ min-height:66px; gap:12px; }
  /* cabeçalho de 67px no celular */
  section[id], main[id], div[id].legal{ scroll-margin-top:84px; }
  .hamburguer{ width:42px; height:38px; }
  .hamburguer span{ left:9px; right:9px; }

  /* ------------------------------------------------------------------
     CELULAR — o que foi medido em 16/09/2026, antes de apertar isto:
     título de 30px em 4 linhas, segundo texto de 39 palavras, abertura
     de 1.265px e 1.641px de rolagem até o cliente ver o primeiro seguro.
     Duas telas de texto antes de qualquer produto. O Edson reclamou, com
     razão: "só abre texto, fontes grandes, cliente não gosta disso".
     As regras abaixo existem para o primeiro seguro aparecer em ~1 tela.
     Antes de aumentar qualquer uma delas, meça de novo no celular.
     ------------------------------------------------------------------ */
  .hero{ padding:30px 0 34px; }
  h1{ font-size:clamp(1.42rem, 6.4vw, 1.75rem); letter-spacing:-.025em; }
  .kicker{ font-size:.66rem; letter-spacing:.11em; margin-bottom:.6em; }
  .lead{ font-size:1rem; line-height:1.5; }
  .lead-nota{ font-size:.85rem; }
  .hero-botoes{ margin:20px 0 16px; gap:10px; }
  .btn{ padding:13px 20px; font-size:.94rem; }
  .hero-selo{ font-size:.78rem; padding-top:12px; }

  /* O cartão "O que você recebe" é o que mais empurra o conteúdo para baixo
     no celular. Aqui ele vira lista compacta, sem perder nenhum item. */
  .hero-cartao{ padding:20px 18px; }
  .hero-cartao h2{ font-size:1.05rem; margin-bottom:.7em; }
  .lista-check li{ font-size:.88rem; line-height:1.45; margin-bottom:11px; padding-left:24px; }
  .lista-check li::before{ width:13px; height:13px; border-width:2.5px; }

  .titulo-secao{ font-size:1.38rem; }
  .sub-secao{ font-size:.96rem; margin-bottom:26px; }
  .secao, .secao-contato{ padding:44px 0; }
  .grade-produtos, .passos, .lista-motivos, .campo-duplo{ grid-template-columns:1fr; }

  /* A faixa de credibilidade empilhada em 1 coluna ocupava 309px no celular —
     mais que o cartão de boas-vindas. Em 2 colunas compactas cai para ~140px,
     e o cliente chega aos seguros bem antes. Medido em 16/09/2026. */
  .faixa-itens{ grid-template-columns:1fr 1fr; gap:14px 16px; padding:18px 0; }
  .faixa-itens strong{ font-size:.92rem; line-height:1.25; }
  .faixa-itens span{ font-size:.78rem; line-height:1.3; }
  .rodape-grade{ grid-template-columns:1fr; gap:32px; }
  .hero-cartao, .cotacerto-marca, .formulario, .cartao-contato{ padding:24px 20px; }
  .aviso-caixa{ flex-direction:column; gap:14px; }
  .zap-flutuante{ width:52px; height:52px; right:14px; bottom:14px; }
  .btn{ width:100%; }
  .hero-botoes{ flex-direction:column; align-items:stretch; }
  .depo{ width:280px; margin-right:16px; }
  /* Pop-up de golpes no celular: ocupava quase a tela inteira. Compactado
     sem perder uma linha do texto — só encolhe fonte, respiro e o botão. */
  /* Margem em volta igual à da AGBENS: dá folga e deixa ver que há página
     atrás. Era 12px aqui — apertado demais para uma tela de 360px. */
  .golpe{ padding:22px 18px; }
  .golpe-caixa{ padding:18px 16px 16px; max-height:82vh; border-top-width:5px; }
  .golpe-selo{ font-size:.64rem; margin-bottom:.3em; }
  .golpe-titulo{ font-size:1.08rem; margin-bottom:.5em; }
  .golpe-texto p{ font-size:.86rem; line-height:1.45; margin-bottom:.6em; }
  .golpe-canais{ padding:11px 14px; margin-bottom:16px; }
  .golpe-canais li{ font-size:.88rem; margin-bottom:5px; }
  .golpe-caixa .btn{ padding:12px 18px; font-size:.92rem; }
  .golpe-x{ top:6px; right:10px; font-size:1.6rem; }
  .legal{ padding:14px 12px; }
  .legal-box{ padding:38px 22px 30px; }
  .legal-box h2{ font-size:1.02rem; }
}

/* ========================== IMPRESSÃO ========================== */
@media print{
  .topo, .zap-flutuante, .formulario, .hamburguer, .golpe, .legal{ display:none !important; }
  body{ font-size:11pt; color:#000; }
  .hero, .secao-cotacerto, .secao-contato, .rodape{ background:#fff !important; color:#000 !important; }
  .hero h1, .titulo-claro, .texto-claro, .rodape-links a, .rodape-legal p{ color:#000 !important; }
  .depo-esteira{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .depo-trilho{ display:block; width:auto; animation:none !important; }
}