/* ==========================================================
   VELOX BRASIL SEGUROS
   Folha principal, carregada pelas duas páginas do projeto:
   index.html (a página que o franqueado usa com o cliente dele)
   e central-do-franqueado.html (a área interna da rede, que
   carrega o central.css por cima desta).

   Tokens, tipografia, botões, header e rodapé são os mesmos do
   site institucional, para o cliente reconhecer a marca.
   ========================================================== */

/* ============ MULISH AUTO-HOSPEDADA ============
   Mesmos arquivos do institucional, servidos do próprio domínio:
   nenhum pedido sai para servidor de fora e a CSP pode fechar
   font-src em "self". O subset latin cobre todo o texto da página
   e é o único com preload no HTML. */
@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/mulish-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ==========================================================
   TOKENS (idênticos ao institucional)
   --noite      #041831  base institucional
   --abismo     #020D1C  fundo de contraste máximo
   --aco        #123458  navy médio para cards em fundo escuro
   --ambar      #E8A33D  acento em fundos escuros e fotos
   --terracota  #BF5339  acento em fundos claros
   ========================================================== */
:root {
  --noite: #041831;
  --abismo: #020d1c;
  --aco: #123458;
  --ambar: #e8a33d;
  --ambar-claro: #f3c87e;
  --gelo: #f6f8fb;
  --branco: #ffffff;
  --tinta: #16273b;
  --tinta-suave: #51637a;
  --nevoa: #8fa3bc;
  --terracota: #bf5339;
  /* Terracota escurecido para TEXTO em fundo claro. O #BF5339 da marca dá
     4,43:1 sobre o gelo #F6F8FB, e a AA pede 4,5:1 para texto normal: o
     axe reprova a etiqueta de seção em toda seção clara. Este tom dá
     5,4:1 e continua sendo a mesma cor a olho nu. O #BF5339 segue valendo
     para preenchimento, borda e traço decorativo, onde a regra é outra. */
  --terracota-texto: #a8492f;
  --linha: rgba(4, 24, 49, 0.12);
  --linha-escura: rgba(246, 248, 251, 0.14);
  --sombra: 0 18px 45px -18px rgba(4, 24, 49, 0.28);
  --raio: 14px;
  --raio-g: 22px;
  --dsp: "Mulish", sans-serif;
  --txt: "Mulish", sans-serif;
  --larg: 1180px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 17.5px;
  scroll-behavior: smooth;
  /* O header é fixo: sem isto a âncora para no meio do título. */
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
body {
  font-family: var(--txt);
  color: var(--tinta);
  background: var(--branco);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
  /* Obrigatório porque todo <img> declara width e height no HTML: sem isto
     o max-width encolhe a largura, a altura fica travada no número do
     atributo e a arte entorta. Quem tem altura fixa em CSS precisa soltar
     a largura na própria regra, com width: auto (ver .logo img). */
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
.wrap {
  max-width: var(--larg);
  margin: 0 auto;
  padding: 0 24px;
}
.sec {
  padding: 96px 0;
}
.sec--gelo {
  background: var(--gelo);
}
.sec--noite {
  background: var(--noite);
  color: var(--branco);
}

/* Eyebrow: etiqueta de seção.
   Terracota em fundo claro, âmbar em fundo escuro. É regra de contraste,
   não de gosto: o âmbar sobre branco não alcança 4,5:1. */
.eyebrow {
  font-family: var(--dsp);
  font-variation-settings: "wdth" 110;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracota-texto);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--terracota);
  flex: none;
}
.sec--noite .eyebrow,
.banda-overlay .eyebrow {
  color: var(--ambar);
}
.sec--noite .eyebrow::before,
.banda-overlay .eyebrow::before {
  background: var(--ambar);
}
h1,
h2,
h3 {
  font-family: var(--dsp);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 750;
  font-variation-settings: "wdth" 104;
}
.sec--noite h2 {
  color: var(--branco);
}
.lead {
  font-size: 1.09rem;
  color: var(--tinta-suave);
  max-width: 60ch;
}
.sec--noite .lead {
  color: var(--nevoa);
}
:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}
.sec-head {
  margin-bottom: 44px;
}

/* ============ BOTÕES ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--ambar {
  background: var(--ambar);
  color: var(--abismo);
  box-shadow: 0 10px 28px -10px rgba(232, 163, 61, 0.55);
}
.btn--ambar:hover {
  background: var(--ambar-claro);
}
.btn--vazado {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--branco);
}
.btn--vazado:hover {
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.06);
}
.btn--noite {
  background: var(--noite);
  color: var(--branco);
}
.btn--noite:hover {
  background: var(--aco);
}
/* Verde do WhatsApp, na versão escura. Nunca o #25D366 claro: branco sobre
   ele reprova feio.
   O #128C7E da marca também não passa: dá 4,14:1 com o branco, e o texto do
   botão tem 16,6px, abaixo dos 18,66px que a AA aceita como texto grande.
   Este tom é o #128C7E escurecido, dá 5,2:1 e continua sendo verde de
   WhatsApp a olho nu. O #128C7E segue valendo onde for preenchimento sem
   texto por cima. */
.btn--zap {
  background: #0f7a6e;
  color: var(--branco);
}
.btn--zap:hover {
  background: #0c6459;
}
.btn--largo {
  width: 100%;
}
.btn svg {
  flex: none;
}

/* ============ PULAR PARA O CONTEÚDO ============
   Primeiro elemento focável da página. Fica fora da tela até receber o
   foco pelo teclado, então quem usa mouse nunca o vê. */
.pular {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--ambar);
  color: var(--abismo);
  font-family: var(--dsp);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--sombra);
  transition: top 0.2s ease;
}
.pular:focus {
  top: 0;
}
main:focus {
  outline: none;
}

/* ============ TOPBAR ============ */
.topbar {
  background: var(--abismo);
  color: var(--nevoa);
  font-size: 0.82rem;
  text-align: center;
  padding: 9px 16px;
}
.topbar strong {
  color: var(--ambar-claro);
}
.topbar a {
  color: var(--branco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ HEADER ============ */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(4, 24, 49, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha-escura);
}
.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 44px;
  /* A regra fixa a altura, então a largura precisa ser solta na mão:
     o atributo width do HTML viraria largura fixa e achataria a marca.
     O object-fit cobre o caso em que o item flex encolhe. */
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}
.nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav a {
  color: #d7e1ee;
  font-size: 0.93rem;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--ambar);
  transition: width 0.2s ease;
}
.nav a:hover::after {
  width: 100%;
}
.header-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}
.header-cta .btn {
  padding: 11px 22px;
  font-size: 0.86rem;
  /* Só aqui: entre 721px e 1020px os dois botões disputam espaço com a
     marca e o texto quebraria em duas linhas dentro da pílula. Nos botões
     largos dos formulários o nowrap teria o efeito oposto, esticando o
     card inteiro para além da tela a 320px. */
  white-space: nowrap;
}
.menu-btn {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
}
.nav-mobile {
  display: none;
  background: var(--noite);
  border-top: 1px solid var(--linha-escura);
}
.nav-mobile a {
  display: block;
  padding: 16px 24px;
  color: #d7e1ee;
  border-bottom: 1px solid var(--linha-escura);
  font-weight: 500;
}

/* ==========================================================
   PÁGINA DO CLIENTE: abertura com o formulário ao lado
   ========================================================== */
.hero-lp {
  position: relative;
  background: var(--noite);
  color: var(--branco);
  overflow: hidden;
  padding: 76px 0 84px;
}
/* A foto mora no CSS e por isso ganha preload no <head>: é ela que decide
   o LCP da página. */
.hero-lp::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 13, 28, 0.95) 0%, rgba(2, 13, 28, 0.86) 42%, rgba(2, 13, 28, 0.55) 100%),
    url("assets/img/fotos/foto-familia-lar.webp") center / cover no-repeat;
}
.hero-lp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 88% 0%, rgba(232, 163, 61, 0.18), transparent 62%);
  pointer-events: none;
}
.hero-lp .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}
/* Item de grade nasce com min-width: auto, ou seja, ele nunca encolhe abaixo
   do próprio conteúdo. Basta um botão ou um campo largo dentro para a coluna
   passar da tela em telas pequenas. */
.hero-lp .wrap > *,
.metodo-topo > *,
.contato .wrap > * {
  min-width: 0;
}
.hero-lp .eyebrow {
  color: var(--ambar);
}
.hero-lp .eyebrow::before {
  background: var(--ambar);
}
.hero-lp h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.15rem);
  font-weight: 800;
  font-variation-settings: "wdth" 104;
  margin-bottom: 20px;
}
.hero-lp h1 em {
  font-style: normal;
  color: var(--ambar);
}
.hero-lp .lead {
  color: #cfdcea;
  font-size: 1.1rem;
}
.hero-marcadores {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
.hero-marcadores li {
  position: relative;
  padding-left: 30px;
  color: #dbe5f0;
  font-size: 0.98rem;
}
.hero-marcadores li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ambar);
  /* O "✓" é desenhado com duas linhas em navy: branco sobre âmbar dá
     2,50:1 e reprova em AA. */
  background-image: linear-gradient(45deg, transparent 44%, var(--abismo) 44%, var(--abismo) 56%, transparent 56%);
}
.selo-susep {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 12px 20px 12px 14px;
  border: 1px solid var(--linha-escura);
  border-radius: 999px;
  background: rgba(246, 248, 251, 0.05);
  font-size: 0.84rem;
  color: #cfdcea;
}
.selo-susep b {
  color: var(--branco);
}
.selo-susep svg {
  flex: none;
  color: var(--ambar);
}

/* ============ CARTÃO DE COTAÇÃO ============ */
.form-cot {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-g);
  padding: 32px 30px 28px;
  box-shadow: 0 30px 70px -30px rgba(2, 13, 28, 0.9);
}
.form-cot h2 {
  font-size: 1.42rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.form-cot > p {
  font-size: 0.92rem;
  color: var(--tinta-suave);
  margin-bottom: 20px;
}
.campo {
  margin-bottom: 14px;
}
.campo label {
  display: block;
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--tinta);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--txt);
  font-size: 0.95rem;
  color: var(--tinta);
  background: var(--gelo);
  border: 1.5px solid var(--linha);
  border-radius: 11px;
  padding: 13px 15px;
}
.campo textarea {
  min-height: 92px;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--noite);
  background: var(--branco);
}
/* O anel de foco volta só no teclado: o clique com mouse fica limpo, e
   quem navega por tab não perde o rastro em tela clara. */
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}
/* Armadilha antirrobô dos dois formulários. Fica fora da tela em vez de
   display:none porque parte dos robôs pula o que está com display:none, e o
   objetivo é justamente que eles preencham. Quem usa leitor de tela não
   encontra: o aria-hidden no HTML tira a linha da leitura, e o tabindex="-1"
   tira do caminho do teclado.
   O deslocamento é para a esquerda: sobra à direita criaria barra de rolagem
   horizontal, e à esquerda o navegador ignora. */
.campo-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-cot .btn {
  margin-top: 8px;
}
.form-lgpd {
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
/* Plano B quando o WhatsApp não abre sozinho (bloqueador de pop-up,
   navegador sem o aplicativo). Sem isto o contato se perde em silêncio. */
.form-saida {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--gelo);
  font-size: 0.86rem;
}
.form-saida.visivel {
  display: block;
}
.form-saida a {
  font-weight: 800;
  color: var(--terracota-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ FAIXA DE NÚMEROS ============ */
.numeros {
  background: var(--abismo);
  border-top: 1px solid var(--linha-escura);
}
.numeros .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.num {
  padding: 26px 24px;
  border-left: 1px solid var(--linha-escura);
}
.num:first-child {
  border-left: 0;
  padding-left: 0;
}
.num b {
  display: block;
  font-family: var(--dsp);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--branco);
  line-height: 1.1;
}
.num span {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--nevoa);
}

/* ============ GRADE DE SEGUROS ============ */
/* ============ ABAS DE SEGUROS ============
   Duas abas em cápsula, no mesmo desenho do site institucional. A ativa é
   navy com texto branco (14,6:1) e a inativa é tinta suave sobre branco
   (6,2:1): as duas passam folgado na AA, e a diferença entre elas não é só
   de cor, é de preenchimento, o que importa para quem não distingue cor. */
.abas {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 34px;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  max-width: 100%;
  flex-wrap: wrap;
}
.aba {
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.aba:hover {
  color: var(--tinta);
}
.aba[aria-selected="true"] {
  background: var(--noite);
  color: var(--branco);
}
/* O painel fechado recebe hidden pelo script. O display:none explícito é
   para o caso de alguma regra de grade vencer o hidden do navegador: item
   de grade com display:grid herdado volta a aparecer. */
[role="tabpanel"][hidden] {
  display: none;
}
/* ============ CHAMADA DE FIM DE SEÇÃO ============
   O botão de orçamento que fecha cada seção. Quem rolou a seção inteira já
   demonstrou interesse: fazer essa pessoa subir de volta até o formulário
   da abertura é onde se perde contato. */
.cta-secao {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1.5px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.cta-secao p {
  font-size: 0.92rem;
  color: var(--tinta-suave);
  margin: 0;
}
.sec--noite .cta-secao {
  border-top-color: var(--linha-escura);
}
.sec--noite .cta-secao p {
  color: var(--nevoa);
}
/* Os dois botões da banda do agro. O gap vertical existe porque a 320px
   eles empilham, e encostados um no outro viram um bloco só. */
.banda-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* auto-fill em vez de número fixo de colunas: são 33 cards, e a grade passa
   sozinha de 4 para 1 coluna conforme a tela. O minmax de 250px é o que
   segura o card de nome comprido ("Equipamentos portáteis") sem quebrar a
   palavra no meio. */
.grade-seguros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.seguro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 28px 26px 26px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.seguro:hover {
  transform: translateY(-3px);
  border-color: rgba(191, 83, 57, 0.45);
  box-shadow: var(--sombra);
}
.seguro .ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(4, 24, 49, 0.06);
  color: var(--noite);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.seguro:hover .ico {
  background: var(--noite);
  color: var(--ambar);
}
.seguro h4 {
  font-size: 1.08rem;
  font-weight: 750;
}
.seguro p {
  font-size: 0.93rem;
  color: var(--tinta-suave);
  flex: 1;
}
.seguro .pedir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--terracota);
  margin-top: 6px;
}
.seguro .pedir svg {
  flex: none;
  transition: transform 0.18s ease;
}
.seguro:hover .pedir svg {
  transform: translateX(3px);
}
/* O card inteiro vira área de clique, mas só o link recebe foco pelo
   teclado: um único alvo por card, sem link duplicado no leitor de tela. */
.seguro .pedir::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ============ BANDA FOTOGRÁFICA ============ */
.banda {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* A foto não cobre mais a faixa inteira, então o que sobra à esquerda
     precisa de fundo próprio. */
  background: var(--noite);
}
/* As fotos das duas faixas são quadradas, 1254px de lado. Esticadas na
   largura inteira de uma tela de 2560px, o object-fit: cover jogava fora
   quase 60% da altura e ampliava 2x o que sobrava: cabeça e pernas
   cortadas, e a imagem mole.

   Encostando a foto à direita e limitando a largura dela ao tamanho real do
   arquivo, ela passa a renderizar sem ampliação nenhuma e o recorte vertical
   fica suave. A emenda com o fundo não aparece porque naquele ponto o
   degradê da .banda-overlay já está quase opaco.

   Largura e altura estão as duas fixadas aqui de propósito, junto com o
   object-fit: assim o width/height declarado no HTML não entorta nada. */
.banda-img {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(64%, 1254px);
  height: 100%;
  object-fit: cover;
  /* Acima do centro: é onde estão os rostos nas duas fotos. */
  object-position: 50% 32%;
  /* A borda esquerda da foto se dissolve no fundo. Sem isto aparece uma
     emenda vertical dura entre o navy chapado e a foto escurecida: o
     degradê de cima não resolve, porque a diferença ali não é de brilho, é
     de textura. Navegador antigo sem suporte a máscara mostra a emenda e
     nada mais: nenhum conteúdo se perde.

     O -webkit- fica de propósito, e o stylelint padrão reclama dele: a
     versão sem prefixo só existe no Chrome a partir do 120, e Android
     antigo ainda depende do prefixo. Não apague. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
.banda-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 72px 0;
  background: linear-gradient(90deg, rgba(2, 13, 28, 0.94) 0%, rgba(2, 13, 28, 0.78) 52%, rgba(2, 13, 28, 0.25) 100%);
  color: var(--branco);
}
.banda-overlay h2 {
  color: var(--branco);
  max-width: 20ch;
}
.banda-overlay p {
  margin-top: 18px;
  color: #cfdcea;
  max-width: 52ch;
}
.banda-overlay .btn {
  margin-top: 28px;
}

/* ============ MÉTODO VELOX ============ */
.metodo-topo {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}
.metodo-foto img {
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.trilho {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.trilho::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  background: var(--linha);
}
.etapa {
  position: relative;
  padding-top: 62px;
}
.etapa::before {
  content: attr(data-passo);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--noite);
  color: var(--ambar);
  font-family: var(--dsp);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--gelo);
}
.etapa h3 {
  font-size: 1.12rem;
  font-weight: 750;
  margin-bottom: 8px;
}
.etapa p {
  font-size: 0.94rem;
  color: var(--tinta-suave);
}

/* ============ POR QUE COM A GENTE ============ */
.valores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.valor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio-g);
  background: rgba(246, 248, 251, 0.04);
}
.valor svg {
  flex: none;
  color: var(--ambar);
  margin-top: 3px;
}
.valor b {
  display: block;
  font-family: var(--dsp);
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--branco);
  margin-bottom: 6px;
}
.valor p {
  font-size: 0.94rem;
  color: var(--nevoa);
}

/* ============ SEGURADORAS ============ */
.grade-seguradoras {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.chip-logo {
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  text-align: center;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.chip-logo:hover {
  border-color: rgba(4, 24, 49, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(4, 24, 49, 0.45);
}
.chip-logo img {
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(0.55) opacity(0.82);
  transition: filter 0.25s;
}
.chip-logo:hover img {
  filter: none;
}
.chip-logo-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--tinta-suave);
  transition: color 0.18s;
}
.chip-logo:hover .chip-logo-texto {
  color: var(--noite);
}
.chip-logo-texto svg {
  flex: none;
  opacity: 0;
  transform: translate(-2px, 2px);
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.chip-logo:hover .chip-logo-texto svg {
  opacity: 1;
  transform: none;
}
/* Na página do cliente os logos são prova de portfólio, não atalho: se
   fossem links, mandariam o cliente para fora antes de ele pedir cotação. */
.chip-logo--estatico {
  cursor: default;
}
.chip-logo--estatico:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--linha);
}
.parceiros-legenda {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--tinta-suave);
  max-width: 74ch;
}

/* ============ PERGUNTAS FREQUENTES ============ */
.faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
}
.faq-item {
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-family: var(--dsp);
  font-weight: 750;
  font-size: 1rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2.5px solid var(--terracota);
  border-bottom: 2.5px solid var(--terracota);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.faq-item p {
  padding: 0 24px 22px;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

/* ============ CONTATO ============ */
.contato .wrap {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.contato-dados {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
.dado {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio);
  background: rgba(246, 248, 251, 0.04);
}
.dado svg {
  flex: none;
  color: var(--ambar);
}
/* Um e-mail é uma palavra só e não quebra sozinho: sem isto ele define a
   largura mínima da linha e empurra a página para fora da tela a 320px. */
.dado > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dado b {
  display: block;
  font-family: var(--dsp);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin-bottom: 2px;
}
.dado span {
  font-size: 1rem;
  color: var(--branco);
}
.aviso-legal {
  margin-top: 30px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--nevoa);
  max-width: 70ch;
}

/* ============ RODAPÉ ============ */
.footer {
  background: var(--abismo);
  color: var(--nevoa);
  padding: 72px 0 0;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 52px;
}
.footer h4 {
  font-family: var(--dsp);
  font-weight: 750;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 18px;
}
.footer ul li {
  margin-bottom: 10px;
}
.footer a:hover {
  color: var(--branco);
}
.footer .logo {
  margin-bottom: 16px;
}
.footer .logo img {
  height: 38px;
  width: auto;
}
.footer-marca p {
  max-width: 34ch;
  font-size: 0.88rem;
}
.sociais {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.sociais a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--linha-escura);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9d6e6;
  transition: all 0.18s;
}
.sociais a:hover {
  border-color: var(--ambar);
  color: var(--ambar);
}
.compliance {
  border-top: 1px solid var(--linha-escura);
  padding: 26px 0;
  font-size: 0.78rem;
  color: #6e86a3;
}
.compliance .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ============ WHATSAPP FLUTUANTE ============
   Verde escuro oficial do WhatsApp: o #25D366 deixa o ícone branco em
   1,98:1 e reprova em qualquer critério de contraste. */
.zap-flutua {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #128c7e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 34px -8px rgba(18, 140, 126, 0.6);
  transition: transform 0.18s;
}
.zap-flutua:hover {
  transform: scale(1.08);
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1020px) {
  .hero-lp .wrap,
  .metodo-topo,
  .contato .wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .grade-seguradoras {
    grid-template-columns: repeat(3, 1fr);
  }
  .valores {
    grid-template-columns: 1fr;
  }
  .trilho {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 28px;
  }
  .trilho::before {
    display: none;
  }
  .numeros .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .num {
    border-left: 0;
    border-top: 1px solid var(--linha-escura);
    padding-left: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* O menu colapsa aqui, e não a 720px: entre 721 e 1020 os itens ainda
     cabiam na largura, mas espremiam a marca até ela achatar. */
  .nav,
  .header-cta .btn--vazado {
    display: none;
  }
  .menu-btn {
    display: block;
  }
  .nav-mobile.aberto {
    display: block;
  }
}
@media (max-width: 720px) {
  .sec {
    padding: 68px 0;
  }
  .hero-lp {
    padding: 56px 0 64px;
  }
  .form-cot {
    padding: 26px 22px 24px;
  }
  .grade-seguradoras {
    grid-template-columns: repeat(2, 1fr);
  }
  .trilho {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .banda-overlay {
    background: linear-gradient(180deg, rgba(2, 13, 28, 0.86) 0%, rgba(2, 13, 28, 0.92) 100%);
  }
  /* Aqui o degradê vira vertical e o texto passa por cima da foto inteira,
     então ela volta a ocupar a largura toda. Nesta largura de tela não há
     ampliação: a foto tem 1254px e a tela tem menos que isso. */
  .banda-img {
    width: 100%;
    object-position: 50% 28%;
    /* Sem faixa de navy ao lado, não há emenda para dissolver. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .banda-overlay h2 {
    max-width: none;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 400px) {
  /* O CTA do header já existe dentro do menu: abaixo disto ele só estoura
     a linha. Sobram a marca e o botão de menu. */
  .header-cta .btn--ambar {
    display: none;
  }
}