/* ==========================================================
   VELOX BRASIL SEGUROS: folha de estilo do site institucional
   Extraída do <style> que ficava no <head> do index.html.
   A ordem das regras é a mesma do arquivo original: só o bloco
   de @font-face entrou antes, e o bloco "ACRÉSCIMOS" no fim.
   ========================================================== */

/* ============ MULISH AUTO-HOSPEDADA ============
   A fonte vinha do fonts.googleapis.com. Agora os dois subsets
   moram em assets/fonts/, o que tira duas conexões externas do
   caminho crítico e deixa a CSP fechar font-src em 'self'.
   São os mesmos arquivos que o Google serve: fonte variável, um
   eixo de peso de 200 a 1000, com os unicode-range originais.
   O subset latin vem com <link rel="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;
}

/* ==========================================================
   VELOX DESIGN SYSTEM:  "Proteção Inteligente"
   Paleta:
   --noite      #041831  base institucional (navy profundo)
   --abismo     #020D1C  fundo de contraste máximo
   --aco        #123458  navy médio p/ cards em fundo escuro
   --ambar      #E8A33D  acento em fundos escuros/fotos
   --terracota  #BF5339  acento em fundos claros (mais contraste que o âmbar)
   --gelo       #F6F8FB  fundo claro frio
   --nevoa      #8FA3BC  texto secundário sobre navy
   Tipo: Mulish (display e corpo)
   Assinatura: o "Trilho Velox" : linha do método em 4 etapas
   ========================================================== */
: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;
  --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;
}
@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 agora que 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 foto entorta. Quem já tem altura fixa em
     CSS (logos, capas, fundos) não é afetado, por especificidade. */
  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 fundos claros (mais contraste que o âmbar); âmbar reservado para fundos escuros/fotos */
.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);
  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,
.franquia .eyebrow,
.banda-emocional-overlay .eyebrow,
.destaque-agro-texto .eyebrow {
  color: var(--ambar);
}
.sec--noite .eyebrow::before,
.franquia .eyebrow::before,
.banda-emocional-overlay .eyebrow::before,
.destaque-agro-texto .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;
}

/* 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);
}
.btn svg {
  flex: none;
}

/* ============ TOPBAR ANTIFRAUDE ============ */
.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;
  width: auto;
  display: block;
  /* Entre 721px e 1020px o menu disputa espaço com a marca: o item flex
     encolhe, a largura cai abaixo da natural e a altura continua presa em
     44px, então a marca achatava (chegava a 91x44 numa arte de 3,6:1).
     Com object-fit ela diminui proporcionalmente em vez de entortar.
     O defeito vem do site de arquivo único, foi medido nas duas versões
     antes de mexer, e não tem nada a ver com a troca de logotipo. */
  object-fit: contain;
  object-position: left center;
}
.nav {
  display: flex;
  gap: 30px;
  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;
}
.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;
}

/* ============ HERO ============ */
.hero {
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(232, 163, 61, 0.14), transparent 60%),
    linear-gradient(160deg, var(--abismo) 0%, var(--noite) 55%, #0a2a4e 100%);
  color: var(--branco);
  overflow: hidden;
  position: relative;
}
.hero::before {
  /* speedlines Velox */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.045) 40.5%, transparent 41.5%),
    linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, 0.035) 55.5%, transparent 57%),
    linear-gradient(105deg, transparent 70%, rgba(232, 163, 61, 0.1) 70.5%, transparent 72%);
}

/* Slideshow de fundo do hero: as fotos trocam sozinhas a cada 5s.
   O intervalo mora no script.js, na constante INTERVALO. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}
.hero-slide-1 {
  background-image: url("assets/img-hero-head-line/img-hero-1.webp");
}
.hero-slide-2 {
  background-image: url("assets/img-hero-head-line/img-hero-2.webp");
}
.hero-slide-3 {
  background-image: url("assets/img-hero-head-line/img-hero-3.webp");
}
.hero-slide-4 {
  background-image: url("assets/img-hero-head-line/img-hero-4.webp");
}
.hero-slide-5 {
  background-image: url("assets/img-hero-head-line/img-hero-5.webp");
}
@media (max-width: 720px) {
  /* No celular entram as fotos em retrato: o navegador baixa só estas. */
  .hero-slide-1 {
    background-image: url("assets/img-hero-head-line/img-hero-cel-1.webp");
  }
  .hero-slide-2 {
    background-image: url("assets/img-hero-head-line/img-hero-cel-2.webp");
  }
  .hero-slide-3 {
    background-image: url("assets/img-hero-head-line/img-hero-cel-3.webp");
  }
  .hero-slide-4 {
    background-image: url("assets/img-hero-head-line/img-hero-cel-4.webp");
  }
  /* Só chegaram 4 verticais: o quinto slide sai da rotação no celular. */
  .hero-slide-5 {
    display: none;
    background-image: none;
  }
}
.hero-bg::after {
  /* Escurece a foto: pesado sobre a coluna de texto, leve do lado do card. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(2, 13, 28, 0.88) 0%,
      rgba(4, 24, 49, 0.62) 42%,
      rgba(4, 24, 49, 0.24) 72%,
      rgba(4, 24, 49, 0.18) 100%
    ),
    linear-gradient(180deg, rgba(2, 13, 28, 0.35) 0%, rgba(2, 13, 28, 0.12) 45%, rgba(2, 13, 28, 0.55) 100%);
}
@media (max-width: 720px) {
  /* No celular o texto ocupa a largura inteira: o degradê passa a ser vertical,
     deixando o rosto e o logo da parede visíveis na metade de baixo. */
  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(2, 13, 28, 0.55) 0%,
      rgba(4, 24, 49, 0.22) 28%,
      rgba(4, 24, 49, 0.58) 58%,
      rgba(2, 13, 28, 0.92) 100%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

.hero .wrap {
  position: relative;
  z-index: 3;
  min-height: clamp(460px, 62vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  padding-bottom: 96px;
}
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  font-weight: 800;
  font-variation-settings: "wdth" 103;
  max-width: 17ch;
  text-shadow: 0 2px 26px rgba(2, 13, 28, 0.55);
}
.hero h1 em {
  font-style: normal;
  color: var(--ambar);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 10px;
  background: rgba(232, 163, 61, 0.22);
  z-index: -1;
  border-radius: 3px;
}
.hero .eyebrow {
  color: var(--ambar);
}
.hero .eyebrow::before {
  background: var(--ambar);
}
.hero-acoes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}
.hero-frase {
  margin-top: 34px;
  padding-left: 18px;
  border-left: 3px solid var(--ambar);
  font-family: var(--dsp);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ambar-claro);
  max-width: 40ch;
}

/* ============ FAIXA DE COTAÇÃO: logo abaixo do hero ============ */
.faixa-cotacao {
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(232, 163, 61, 0.14), transparent 60%),
    linear-gradient(160deg, var(--abismo) 0%, var(--noite) 55%, #0a2a4e 100%);
  color: var(--branco);
  position: relative;
  overflow: hidden;
}
.faixa-cotacao::before {
  /* mesmas speedlines do hero, para as duas faixas lerem como um bloco só */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.045) 40.5%, transparent 41.5%),
    linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, 0.035) 55.5%, transparent 57%),
    linear-gradient(105deg, transparent 70%, rgba(232, 163, 61, 0.1) 70.5%, transparent 72%);
}
.faixa-cotacao .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 84px;
}
.faixa-cotacao .eyebrow {
  color: var(--ambar);
}
.faixa-cotacao .eyebrow::before {
  background: var(--ambar);
}
.faixa-cotacao h2 {
  color: var(--branco);
  max-width: 20ch;
}
.faixa-cotacao .lead {
  margin-top: 18px;
  color: #c6d3e4;
  max-width: 52ch;
}
.faixa-itens {
  list-style: none;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
}
.faixa-itens li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: #d7e2f0;
}
.faixa-itens li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 4px rgba(232, 163, 61, 0.18);
}

/* Card de cotação */
.cotacao {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-g);
  padding: 34px 32px;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.55);
  position: relative;
}
.cotacao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-claro));
}
.cotacao h3 {
  font-size: 1.25rem;
  font-weight: 750;
  margin-bottom: 4px;
}
.cotacao > p {
  font-size: 0.9rem;
  color: var(--tinta-suave);
  margin-bottom: 22px;
}
.campo {
  margin-bottom: 14px;
}
.campo label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.campo input,
.campo select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--linha);
  border-radius: 10px;
  font-family: var(--txt);
  font-size: 0.95rem;
  background: var(--gelo);
  color: var(--tinta);
  transition: border-color 0.15s;
}
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--ambar);
}
.cotacao .btn {
  width: 100%;
  margin-top: 6px;
}
.cotacao small {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--tinta-suave);
}

/* ============ NÚMEROS ============ */
.numeros {
  background: var(--abismo);
  border-top: 1px solid var(--linha-escura);
}
.numeros .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding-top: 0;
  padding-bottom: 0;
}
.num {
  padding: 56px 20px;
  text-align: center;
  border-left: 1px solid var(--linha-escura);
}
.num:first-child {
  border-left: 0;
}
.num b {
  display: block;
  font-family: var(--dsp);
  font-variation-settings: "wdth" 108;
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--branco);
  text-shadow: 0 0 46px rgba(232, 163, 61, 0.45);
}
.num b i {
  font-style: normal;
  color: var(--ambar);
}
.num > span {
  display: block;
  margin-top: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--nevoa);
  letter-spacing: 0.04em;
}

/* ============ TRILHO VELOX (assinatura) ============ */
.metodo-topo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.trilho-head {
  max-width: 640px;
}
.metodo-foto img {
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  width: 100%;
}
.trilho {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.trilho::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 3px;
  background: linear-gradient(90deg, var(--ambar) 0%, var(--ambar) var(--progresso, 100%), var(--linha) var(--progresso, 100%));
  border-radius: 3px;
}
.etapa {
  position: relative;
  padding-top: 74px;
}
.etapa::before {
  content: attr(data-passo);
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--noite);
  color: var(--ambar);
  font-family: var(--dsp);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ambar);
  box-shadow: 0 0 0 6px var(--branco);
}
.sec--gelo .etapa::before {
  box-shadow: 0 0 0 6px var(--gelo);
}
.etapa h3 {
  font-size: 1.12rem;
  font-weight: 750;
  margin-bottom: 8px;
}
.etapa p {
  font-size: 0.93rem;
  color: var(--tinta-suave);
}

/* ============ QUEM SOMOS ============ */
.quem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.quem-visual {
  position: relative;
  display: flex;
  align-self: center;
}
.quem-visual .painel {
  background:
    linear-gradient(180deg, rgba(4, 24, 49, 0.1) 40%, rgba(2, 13, 28, 0.92) 92%),
    url(assets/img/foto-sede-grupo-velox-4.webp) center/cover;
  border-radius: var(--raio-g);
  flex: 1;
  aspect-ratio: 4/5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 36px 36px 68px;
  color: var(--branco);
  position: relative;
  overflow: hidden;
}
.quem-visual .painel .painel-tag {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar);
}
.quem-visual .painel b {
  font-family: var(--dsp);
  font-size: 2.1rem;
  line-height: 1.12;
  font-weight: 800;
  color: var(--branco);
  max-width: 14ch;
}
.quem-visual .painel span {
  color: var(--nevoa);
  font-size: 0.95rem;
  max-width: 30ch;
}
.selo-susep {
  position: absolute;
  bottom: -24px;
  left: 36px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px 22px;
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.88rem;
  font-weight: 600;
}
.selo-susep i {
  font-style: normal;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--abismo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dsp);
  font-weight: 800;
  font-size: 0.72rem;
}
.quem-texto h2 {
  margin-bottom: 20px;
}
.quem-texto p {
  color: var(--tinta-suave);
  margin-bottom: 16px;
}
.valores {
  display: flex;
  gap: 14px;
  margin: 28px 0 34px;
  flex-wrap: wrap;
}
.valor {
  flex: 1;
  min-width: 140px;
  background: var(--gelo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 16px;
  text-align: center;
}
.valor b {
  display: block;
  font-family: var(--dsp);
  font-weight: 750;
  font-size: 0.95rem;
  margin-top: 4px;
}
.valor svg {
  margin: 0 auto;
  color: var(--ambar);
}

/* ============ BANDA EMOCIONAL (foto full-bleed) ============ */
.banda-emocional {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.banda-emocional-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.banda-emocional-overlay {
  position: relative;
  width: 100%;
  padding: 64px 0 56px;
  background: linear-gradient(0deg, rgba(2, 13, 28, 0.94) 8%, rgba(2, 13, 28, 0.6) 50%, rgba(2, 13, 28, 0.08) 100%);
}
.banda-emocional-overlay .eyebrow {
  color: var(--ambar-claro);
}
.banda-emocional-overlay h2 {
  color: var(--branco);
  max-width: 22ch;
}

/* ============ SOLUÇÕES (tabs PF/PJ) ============ */
.tabs {
  display: inline-flex;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  padding: 5px;
  margin: 26px 0 44px;
}
.tab {
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 11px 26px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: all 0.18s;
}
.tab.ativa {
  background: var(--noite);
  color: var(--branco);
}
.grade-solucoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.solucao {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 22px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s;
}
.solucao:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: rgba(232, 163, 61, 0.55);
}
.solucao .ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(4, 24, 49, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--noite);
  margin-bottom: 16px;
}
.solucao h3 {
  font-size: 1.02rem;
  font-weight: 750;
  margin-bottom: 6px;
}
.solucao p {
  font-size: 0.87rem;
  color: var(--tinta-suave);
}
.painel-tab {
  display: none;
}
.painel-tab.ativa {
  display: block;
  animation: surgir 0.35s ease;
}
@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.destaque-agro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--noite);
  border-radius: var(--raio-g);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: var(--sombra);
  transition: transform 0.2s ease;
}
.destaque-agro:hover {
  transform: translateY(-3px);
}
.destaque-agro img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}
.destaque-agro-texto {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--branco);
}
.destaque-agro-texto h3 {
  font-size: 1.35rem;
  font-weight: 750;
  margin-bottom: 10px;
}
.destaque-agro-texto p {
  color: var(--nevoa);
  font-size: 0.92rem;
  margin-bottom: 18px;
  max-width: 42ch;
}
.destaque-agro-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dsp);
  font-weight: 700;
  color: var(--ambar);
  font-size: 0.9rem;
  transition: gap 0.18s;
}
.destaque-agro:hover .destaque-agro-cta {
  gap: 12px;
}

/* ============ O ÚNICO MOTIVO: declaração central, sem cards ============ */
.unico {
  position: relative;
  overflow: hidden;
}
.unico::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 50%;
  width: 780px;
  height: 780px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 163, 61, 0.17), rgba(232, 163, 61, 0) 62%);
  pointer-events: none;
}
.unico .wrap {
  position: relative;
  max-width: 900px;
  text-align: center;
}
.unico-selo {
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.unico-selo::before,
.unico-selo::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--ambar);
  flex: none;
}
.unico .unico-frase {
  font-size: clamp(1.85rem, 4.3vw, 2.95rem);
  line-height: 1.09;
  color: var(--branco);
  margin-bottom: 28px;
}
.unico .unico-frase em {
  font-style: normal;
  color: var(--ambar);
}
.unico-texto {
  color: var(--nevoa);
  font-size: 1.02rem;
  line-height: 1.78;
  max-width: 60ch;
  margin: 0 auto 36px;
}
.unico-texto b {
  color: var(--branco);
  font-weight: 700;
}
.unico-remate {
  font-family: var(--dsp);
  font-weight: 750;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  line-height: 1.5;
  color: var(--branco);
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 0;
  border-top: 1px solid var(--linha-escura);
  border-bottom: 1px solid var(--linha-escura);
  margin-bottom: 36px;
}
.unico-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.unico-acoes span {
  color: var(--nevoa);
  font-size: 0.85rem;
}

/* ============ BLOG "DECISÕES INTELIGENTES" ============ */
.blog-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 20px;
}
.post {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s;
}
.post:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra);
}
.capa {
  aspect-ratio: 16 / 8.5;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post:hover .capa img {
  transform: scale(1.05);
}
.capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(2, 13, 28, 0.78) 0%, rgba(2, 13, 28, 0.15) 55%, rgba(2, 13, 28, 0.05) 100%);
  pointer-events: none;
}
.capa .tag {
  position: relative;
  z-index: 1;
  background: rgba(2, 13, 28, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.capa--voce {
  background: linear-gradient(150deg, #0a2a4e, var(--noite));
}
.capa--empresa {
  background: linear-gradient(150deg, var(--aco), var(--abismo));
}
.capa--agro {
  background: linear-gradient(150deg, #1e4230, #0b1f14);
}
.capa--metodo {
  background: linear-gradient(150deg, #7a5514, #3b2a0c);
}
.post-corpo {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.post h3 {
  font-family: var(--dsp);
  font-weight: 750;
  font-size: 1.08rem;
  line-height: 1.32;
}
.post p {
  font-size: 0.89rem;
  color: var(--tinta-suave);
  flex: 1;
}
.post .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linha);
  padding-top: 14px;
}
.post .meta b {
  color: var(--terracota);
  font-family: var(--dsp);
  font-weight: 700;
}
.post--destaque {
  grid-row: span 2;
}
.post--destaque .capa {
  aspect-ratio: 16 / 10;
  flex: none;
}
.post--destaque h3 {
  font-size: 1.45rem;
}
.post--destaque p {
  font-size: 0.95rem;
}

/* ============ LEITOR DE ARTIGOS (painel deslizante) ============ */
.leitor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.leitor.aberto {
  display: block;
}
.leitor-fundo {
  position: absolute;
  inset: 0;
  background: rgba(2, 13, 28, 0.72);
  backdrop-filter: blur(4px);
  animation: fundoIn 0.25s ease;
}
@keyframes fundoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.leitor-painel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(860px, 100%);
  background: var(--branco);
  overflow-y: auto;
  animation: painelIn 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35);
}
@keyframes painelIn {
  from {
    transform: translateX(60px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leitor-fundo,
  .leitor-painel {
    animation: none;
  }
}
.leitor-progresso {
  position: sticky;
  top: 0;
  height: 4px;
  background: var(--linha);
  z-index: 5;
}
.leitor-progresso i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-claro));
  transition: width 0.1s linear;
}
.leitor-topo {
  position: sticky;
  top: 4px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.leitor-topo .marca {
  display: flex;
  align-items: center;
}
.leitor-topo .marca img {
  height: 22px;
  /* O width: auto é obrigatório desde que todo <img> passou a declarar
     width e height no HTML. Sem ele, o atributo width="640" vira a largura
     usada, o CSS trava a altura em 22px e a marca sai esticada em 640x22.
     É a mesma regra que o .logo img já tinha, e que aqui faltava. */
  width: auto;
  display: block;
}
.fechar {
  background: var(--gelo);
  border: 1px solid var(--linha);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.fechar:hover {
  background: var(--noite);
  color: #fff;
}
.artigo {
  padding: 48px 40px 80px;
  max-width: 680px;
  margin: 0 auto;
}
.artigo .cat {
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
  display: block;
}
/* h1 na página do artigo em /blog/, h2 no leitor deslizante da home:
   a home só pode ter um h1, o do hero. O desenho é o mesmo nos dois,
   inclusive o font-variation-settings, que a regra geral de h2 muda. */
.artigo h1,
.artigo h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-variation-settings: normal;
  margin-bottom: 14px;
}
.artigo .resumo {
  font-size: 1.08rem;
  color: var(--tinta-suave);
  border-left: 3px solid var(--terracota);
  padding-left: 18px;
  margin: 22px 0 8px;
}
.artigo .info {
  font-size: 0.8rem;
  color: var(--tinta-suave);
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 34px;
}
.artigo h4 {
  font-weight: 750;
  font-size: 1.22rem;
  margin: 38px 0 12px;
  line-height: 1.3;
}
.artigo p {
  margin-bottom: 18px;
  color: #2a3b50;
}
.artigo strong {
  color: var(--tinta);
}
.artigo .caixa {
  background: var(--gelo);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--terracota);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 22px 24px;
  margin: 26px 0;
  font-size: 0.95rem;
}
.artigo .caixa b {
  font-family: var(--dsp);
  display: block;
  margin-bottom: 6px;
}
.artigo .cta-final {
  background: linear-gradient(150deg, var(--noite), var(--aco));
  border-radius: var(--raio-g);
  padding: 34px;
  margin-top: 46px;
  color: #fff;
  text-align: center;
}
.artigo .cta-final h4 {
  margin: 0 0 8px;
  color: #fff;
}
.artigo .cta-final p {
  color: var(--nevoa);
  margin-bottom: 22px;
  font-size: 0.95rem;
}
body.travado {
  overflow: hidden;
}

/* ============ PARCEIROS ============ */
.parceiros-nota {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.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 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-texto svg {
  flex: none;
  opacity: 0;
  transform: translate(-2px, 2px);
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.chip-logo:hover {
  border-color: var(--terracota);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(4, 24, 49, 0.35);
}
.chip-logo:hover .chip-logo-texto {
  color: var(--noite);
}
.chip-logo:hover .chip-logo-texto svg {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--terracota);
}
.parceiros-legenda {
  text-align: center;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin-top: 28px;
}

/* ============ FRANQUIA (teaser) ============ */
.franquia {
  position: relative;
  overflow: hidden;
  background: var(--noite);
}
.franquia-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.13;
  filter: grayscale(0.65);
}
.franquia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 420px at 12% 110%, rgba(232, 163, 61, 0.16), transparent 60%), rgba(4, 24, 49, 0.94);
}
.franquia .wrap {
  position: relative;
  z-index: 1;
  max-width: 1000px;
}
.franquia h2 {
  color: var(--branco);
  max-width: 26ch;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}
.franquia h2 em {
  font-style: normal;
  color: var(--ambar);
}
.franquia .lead {
  margin: 20px 0 0;
  color: var(--branco);
  max-width: 64ch;
}
.franquia .lead b {
  color: var(--ambar-claro);
  font-weight: 700;
}

/* Confronto: a categoria de um lado, a Velox Brasil Seguros do outro */
.fr-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 44px 0 40px;
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.fr-col {
  padding: 34px 34px 38px;
}
.fr-col + .fr-col {
  border-left: 1px solid var(--linha-escura);
  background: rgba(232, 163, 61, 0.07);
}
.fr-titulo {
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin-bottom: 26px;
}
.fr-col--velox .fr-titulo {
  color: var(--ambar);
}
.fr-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fr-lista li {
  position: relative;
  padding-left: 30px;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--nevoa);
}
.fr-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 16px;
  height: 2px;
  background: var(--nevoa);
  opacity: 0.6;
}
.fr-col--velox .fr-lista li {
  color: var(--branco);
}
.fr-col--velox .fr-lista li::before {
  top: 9px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ambar);
  opacity: 1;
}
.fr-lista b {
  color: var(--ambar-claro);
  font-weight: 700;
}
.fr-remate {
  font-family: var(--dsp);
  font-weight: 750;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--branco);
  max-width: 30ch;
}
.fr-remate em {
  font-style: normal;
  color: var(--ambar);
}
.franquia-acoes {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fr-nota {
  margin-top: 28px;
  max-width: 70ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--nevoa);
}
.fr-nota b {
  color: var(--branco);
  font-weight: 700;
}

/* ============ CONTATO ============ */
.contato {
  background: var(--gelo);
}
.contato .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.canais {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.canal {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 20px;
}
.canal .ico {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--noite);
  color: var(--ambar);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.canal b {
  display: block;
  font-family: var(--dsp);
  font-weight: 750;
  font-size: 0.95rem;
}
.canal span {
  font-size: 0.87rem;
  color: var(--tinta-suave);
}
.form-contato {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 34px;
  box-shadow: var(--sombra);
}
.form-contato h3 {
  font-size: 1.2rem;
  font-weight: 750;
  margin-bottom: 20px;
}
.duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: start;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  margin: 14px 0 18px;
}
.consent input {
  margin-top: 3px;
}

/* ============ FOOTER ============ */
.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;
}
.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;
}

/* ============ MODAL DE COTAÇÃO ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(2, 13, 28, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.aberto {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  background: var(--branco);
  border-radius: var(--raio-g);
  padding: 36px 34px;
  max-width: 440px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.5);
  transform: translateY(14px);
  transition: transform 0.2s ease;
}
.modal-overlay.aberto .modal-card {
  transform: translateY(0);
}
.modal-fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--gelo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinta-suave);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.modal-fechar:hover {
  color: var(--tinta);
  border-color: var(--terracota);
}
.modal-card h3 {
  font-size: 1.35rem;
  font-weight: 750;
  margin: 0 0 6px;
  padding-right: 30px;
}
.modal-subtitulo {
  font-size: 0.9rem;
  color: var(--tinta-suave);
  margin-bottom: 22px;
}
.modal-card form small {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--tinta-suave);
}

/* ============ WHATSAPP FLUTUANTE ============ */
.zap-flutua {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1ebe5d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 34px -8px rgba(30, 190, 93, 0.6);
  transition: transform 0.18s;
}
.zap-flutua:hover {
  transform: scale(1.08);
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1020px) {
  .faixa-cotacao .wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .grade-solucoes {
    grid-template-columns: repeat(2, 1fr);
  }
  .trilho {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 28px;
  }
  .trilho::before {
    display: none;
  }
  .quem,
  .contato .wrap,
  .metodo-topo,
  .destaque-agro {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .quem-visual .painel {
    aspect-ratio: 4/5;
  }
  .grade-seguradoras {
    grid-template-columns: repeat(3, 1fr);
  }
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
  .post--destaque {
    grid-row: auto;
    grid-column: span 2;
  }
  .numeros .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .num {
    border-left: 0;
    border-top: 1px solid var(--linha-escura);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .unico-frase .quebra {
    display: none;
  }
  .nav,
  .header-cta .btn--vazado {
    display: none;
  }
  .hero .wrap {
    /* Na vertical a pessoa fica em cima e o texto desce para a base da foto. */
    min-height: 76vh;
    justify-content: flex-end;
    padding-top: 56px;
    padding-bottom: 44px;
  }
  .hero h1 {
    max-width: none;
  }
  .hero .eyebrow {
    /* Cabe em uma linha só e não some sobre as áreas claras da foto. */
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-shadow: 0 2px 14px rgba(2, 13, 28, 0.9);
  }
  .hero .eyebrow::before {
    width: 22px;
  }
  .faixa-cotacao .wrap {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .menu-btn {
    display: block;
  }
  .sec {
    padding: 68px 0;
  }
  .leitor-topo {
    padding: 14px 20px;
  }
  .artigo {
    padding: 34px 20px 60px;
  }
  .grade-solucoes {
    grid-template-columns: 1fr;
  }
  .fr-versus,
  .duplo {
    grid-template-columns: 1fr;
  }
  .fr-col + .fr-col {
    border-left: 0;
    border-top: 1px solid var(--linha-escura);
  }
  .grade-seguradoras {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .post--destaque {
    grid-column: auto;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* Menu mobile */
.nav-mobile {
  display: none;
  background: var(--noite);
  border-top: 1px solid var(--linha-escura);
}
@media (max-width: 720px) {
  .nav-mobile.aberto {
    display: block;
  }
}
.nav-mobile a {
  display: block;
  padding: 16px 24px;
  color: #d7e1ee;
  border-bottom: 1px solid var(--linha-escura);
  font-weight: 500;
}

/* ==========================================================
   ACRÉSCIMOS DO REFATORAMENTO
   Nada aqui muda o desenho das seções que já existiam. São três
   grupos: o que substitui os antigos atributos style="" do HTML
   (para a CSP poder fechar style-src), o que faltava de
   acessibilidade e o que a proteção antispam precisa.
   ========================================================== */

/* ---- 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;
}

/* O <main> só existe para o link acima ter onde aterrissar e para
   a página ganhar o marco de conteúdo principal. Não desenha nada. */
main:focus {
  outline: none;
}

/* ---- Foco visível nos campos ----
   O ":focus" dos campos, lá em cima, zera o outline e troca a cor da
   borda. Isso basta no mouse, mas some para quem navega no teclado
   em tela clara. O anel volta só no :focus-visible, então o clique
   com mouse continua exatamente como era. */
.campo input:focus-visible,
.campo select:focus-visible,
.consent input:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}

/* ---- Campo-armadilha (honeypot) ----
   Existe no HTML e robô preenche; gente não vê nem alcança pelo
   teclado. Escondido pelo CSS de propósito: display:none escrito
   no HTML é o primeiro sinal que os robôs mais espertos procuram. */
.campo-armadilha {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Substitutos dos antigos style="" ----
   Um para um, com os mesmos valores que estavam no atributo. */
.metodo-topo .lead {
  /* era style="margin-top: 14px" no <p class="lead"> do Método */
  margin-top: 14px;
}
.destaque-agro-texto .eyebrow {
  /* era style="margin-bottom: 2px" no destaque do agro */
  margin-bottom: 2px;
}
.consent a {
  /* era style="text-decoration: underline" no link da política */
  text-decoration: underline;
}
.form-contato .btn,
.modal-card form .btn {
  /* era style="width: 100%" nos dois botões de envio */
  width: 100%;
}

/* ---- Página de artigo em /blog/ ----
   O corpo do texto é o mesmo .artigo do leitor deslizante, sem
   uma linha de diferença. O que muda é o entorno: aqui o artigo
   mora numa página inteira, entre o header e o rodapé do site.
   Nada disto aparece na home. */
.artigo-pagina {
  background: var(--branco);
  padding-top: 28px;
}
.migalhas {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 18px;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}
.migalhas a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.migalhas a:hover {
  color: var(--terracota);
}
.artigo-capa {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.artigo-capa img {
  width: 100%;
  /* Altura fixa em vez de max-height: com width em 100% e altura
     automática, o limite de altura encolheria a largura junto. */
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
  border-radius: var(--raio-g);
}
.artigo-volta {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 0.92rem;
}
.artigo-volta a {
  color: var(--terracota);
}
@media (max-width: 720px) {
  .migalhas,
  .artigo-capa {
    padding-left: 20px;
    padding-right: 20px;
  }
}
