/* =========================================================
   AVANTIA CORRETORA DE SEGUROS — Design System
   Conceito: "O Engenheiro de Seguros"
   Cores oficiais extraídas da logomarca:
     Azul Avantia  #3E4095
     Vermelho Avantia #D33C43
   ========================================================= */

:root {
  /* Marca */
  --azul: #3E4095;
  --azul-escuro: #2A2C6B;
  --azul-profundo: #1B1D48;
  --azul-claro: #5E60B8;
  --azul-suave: #EEEEF8;
  --vermelho: #D33C43;
  --vermelho-escuro: #B02A31;
  --vermelho-suave: #FDEEEF;

  /* Neutros */
  --preto: #14152B;
  --grafite: #3A3B4D;
  --cinza: #6B6C7E;
  --cinza-claro: #9B9CAB;
  --linha: #E4E4EF;
  --fundo: #F6F7FB;
  --branco: #FFFFFF;

  /* Tipografia */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-titulo: 'Barlow', 'Inter', sans-serif;

  /* Layout */
  --max: 1200px;
  --radius: 14px;
  --radius-lg: 22px;
  --sombra: 0 4px 20px rgba(20, 21, 43, .07);
  --sombra-md: 0 12px 40px rgba(20, 21, 43, .12);
  --sombra-lg: 0 24px 70px rgba(20, 21, 43, .18);
  --transicao: .3s cubic-bezier(.25, .8, .25, 1);
}

/* ============ RESET ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  color: var(--grafite);
  background: var(--branco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* "hidden" transformaria o body num contêiner de rolagem próprio, e isso quebra
     a navegação por âncora (links como /educacao#checklist não rolavam até a seção).
     "clip" corta o transbordo horizontal sem criar esse contêiner. A primeira linha
     é apenas o recurso para navegadores antigos, que não entendem "clip". */
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ TIPOGRAFIA ============ */
h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  color: var(--preto);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
p { font-size: 1.02rem; }

.sobretitulo {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vermelho); margin-bottom: 1rem;
}
.sobretitulo.claro { color: #A9AAE6; }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--cinza); }
.destaque { color: var(--azul); font-weight: 700; }
.destaque-vermelho { color: var(--vermelho); font-weight: 700; }

/* ============ LAYOUT ============ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.secao { padding: clamp(60px, 8vw, 110px) 0; }
.secao-compacta { padding: clamp(45px, 6vw, 75px) 0; }
.fundo-suave { background: var(--fundo); }
.fundo-azul { background: var(--azul-profundo); color: #D8D9F0; }
.fundo-azul h2, .fundo-azul h3, .fundo-azul h4 { color: #fff; }
.fundo-azul .lead { color: #B9BAE0; }

.cabecalho-secao { max-width: 760px; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.cabecalho-secao.centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabecalho-secao h2 { margin-bottom: 1rem; }

.grade { display: grid; gap: 26px; }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }

/* ============ BOTÕES ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.9rem; border-radius: 100px;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  transition: var(--transicao); white-space: nowrap; cursor: pointer;
  border: 2px solid transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primario { background: var(--vermelho); color: #fff; box-shadow: 0 6px 22px rgba(211, 60, 67, .32); }
.btn-primario:hover { background: var(--vermelho-escuro); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(211, 60, 67, .42); }
.btn-azul { background: var(--azul); color: #fff; box-shadow: 0 6px 22px rgba(62, 64, 149, .3); }
.btn-azul:hover { background: var(--azul-escuro); transform: translateY(-2px); }
.btn-contorno { border-color: var(--azul); color: var(--azul); }
.btn-contorno:hover { background: var(--azul); color: #fff; transform: translateY(-2px); }
.btn-claro { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-claro:hover { background: #fff; color: var(--azul-profundo); border-color: #fff; }
.btn-whatsapp { background: #25D366; color: #fff; box-shadow: 0 6px 22px rgba(37, 211, 102, .32); }
.btn-whatsapp:hover { background: #1DB954; transform: translateY(-2px); }
.btn-grande { padding: 1.15rem 2.4rem; font-size: 1.02rem; }

.link-seta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--azul); font-size: .94rem;
  transition: gap var(--transicao);
}
.link-seta:hover { gap: .85rem; color: var(--vermelho); }

/* ============ CABEÇALHO ============ */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: var(--transicao);
}
.topo.rolado { box-shadow: 0 2px 22px rgba(20,21,43,.09); border-bottom-color: var(--linha); }
.topo-interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 82px;
}
.topo-logo img { height: 32px; width: auto; }  /* lettering Avantia (sem linha de apoio) */
.nav { display: flex; align-items: center; gap: 1.65rem; }
.nav a {
  font-size: .91rem; font-weight: 600; color: var(--grafite);
  transition: color .2s; position: relative; padding: .3rem 0; white-space: nowrap;
}
/* O CTA dentro do nav só aparece no menu mobile */
.nav > .btn { display: none; }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--vermelho); transition: width var(--transicao);
}
.nav a:hover, .nav a.ativo { color: var(--azul); }
.nav a:hover::after, .nav a.ativo::after { width: 100%; }
.topo-acoes { display: flex; align-items: center; gap: .8rem; }
.topo .btn { padding: .8rem 1.5rem; font-size: .88rem; }

.menu-btn { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--preto); border-radius: 2px; transition: var(--transicao); }
.menu-btn.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.aberto span:nth-child(2) { opacity: 0; }
.menu-btn.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2A2C6B 0%, #3E4095 55%, #4B4DAA 100%);
  padding: calc(82px + 40px) 0 0;
  color: #fff;
}
.hero-malha {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 85% 75% at 60% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 60% 40%, #000 30%, transparent 78%);
}
.hero-brilho {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(211,60,67,.30) 0%, transparent 68%);
  top: -180px; right: -140px; pointer-events: none;
}
.hero-interno {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 2rem; align-items: end;
  min-height: 560px;
}
.hero-texto { padding-bottom: clamp(50px, 7vw, 90px); }
.hero h1 { color: #fff; margin-bottom: 1.4rem; }
.hero h1 .realce {
  color: #fff; position: relative; white-space: nowrap;
}
.hero h1 .realce::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .30em;
  background: var(--vermelho); z-index: -1; border-radius: 3px;
}
.hero p { color: #C9CAEA; font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 610px; margin-bottom: 2rem; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-foto { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.hero-foto img {
  max-height: 580px; width: auto; position: relative; z-index: 2;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.34));
}
.hero-foto::before {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 430px; height: 430px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 70%);
}
.hero-selo {
  position: absolute; z-index: 3; background: #fff; border-radius: var(--radius);
  padding: .9rem 1.15rem; box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: .75rem;
}
.hero-selo-icone {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--azul-suave); color: var(--azul);
}
.hero-selo-icone svg { width: 22px; height: 22px; }
.hero-selo strong { display: block; font-size: .92rem; color: var(--preto); font-family: var(--font-titulo); line-height: 1.2; }
.hero-selo span { font-size: .76rem; color: var(--cinza); }
.hero-selo-1 { left: -10px; bottom: 165px; animation: flutua 5s ease-in-out infinite; }
/* Fica atrás da foto (z-index menor que o da imagem), para o recorte do
   Fabiano passar por cima do card em vez de ser encoberto por ele. */
.hero-selo-2 { right: -34px; bottom: 272px; z-index: 1; animation: flutua 5s ease-in-out infinite .9s; }
@keyframes flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* Barra de credenciais */
.barra-credenciais {
  position: relative; z-index: 3; background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.14);
}
.barra-credenciais .grade { gap: 0; }
.credencial { padding: 2rem 1.4rem; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.credencial:last-child { border-right: none; }
.credencial strong {
  display: block; font-family: var(--font-titulo); font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  color: #fff; line-height: 1.05; margin-bottom: .5rem; letter-spacing: -.02em;
}
/* O número em si ganha destaque sobre a palavra que o acompanha */
.credencial strong [data-contador] { font-size: 1.38em; }
.credencial > span { font-size: .88rem; color: #C4C5E6; line-height: 1.45; display: block; }

/* ============ CARDS ============ */
.card {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: 2.1rem; transition: var(--transicao); position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); border-color: transparent; }
.card-icone {
  width: 58px; height: 58px; border-radius: 15px; margin-bottom: 1.35rem;
  display: grid; place-items: center; background: var(--azul-suave); color: var(--azul);
  transition: var(--transicao);
}
.card:hover .card-icone { background: var(--azul); color: #fff; transform: scale(1.06); }
.card-icone svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: .7rem; }
.card p { font-size: .96rem; color: var(--cinza); margin-bottom: 1.2rem; }
.card-topo-cor { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform var(--transicao); }
.card:hover .card-topo-cor { transform: scaleX(1); }
.card.vermelho .card-icone { background: var(--vermelho-suave); color: var(--vermelho); }
.card.vermelho:hover .card-icone { background: var(--vermelho); color: #fff; }
.card.vermelho .card-topo-cor { background: var(--vermelho); }

.card-lista { margin: 1.1rem 0 1.4rem; }
.card-lista li {
  position: relative; padding-left: 1.6rem; font-size: .93rem;
  color: var(--cinza); margin-bottom: .5rem;
}
.card-lista li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--vermelho);
}

/* Cards de público (home) */
.card-publico { display: block; text-align: left; }
.card-publico .tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vermelho); margin-bottom: .6rem;
}

/* ============ MÉTODO A.R.T. ============ */
.metodo-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; }
.metodo-passo {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: 2rem 1.6rem; position: relative;
  transition: var(--transicao);
}
.metodo-passo:hover { background: rgba(255,255,255,.1); transform: translateY(-5px); border-color: rgba(255,255,255,.28); }
.metodo-numero {
  width: 46px; height: 46px; border-radius: 12px; background: var(--vermelho);
  color: #fff; display: grid; place-items: center; font-family: var(--font-titulo);
  font-weight: 700; font-size: 1.18rem; margin-bottom: 1.2rem;
}
.metodo-passo h3 { font-size: 1.14rem; margin-bottom: .6rem; }
.metodo-passo p { font-size: .92rem; color: #B9BAE0; }

.art-sigla { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.art-item {
  flex: 1; min-width: 200px; background: rgba(255,255,255,.05);
  border-left: 3px solid var(--vermelho); padding: 1rem 1.3rem; border-radius: 0 10px 10px 0;
}
.art-item strong { color: #fff; font-family: var(--font-titulo); font-size: 1.05rem; display: block; }
.art-item span { font-size: .87rem; color: #B9BAE0; }

/* ============ TABELA COMPARATIVA ============ */
.tabela-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--sombra); }
.tabela-comp { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
.tabela-comp th, .tabela-comp td { padding: 1.15rem 1.4rem; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela-comp thead th { background: var(--azul-profundo); color: #fff; font-family: var(--font-titulo); font-size: .95rem; }
.tabela-comp thead th:last-child { background: var(--azul); position: relative; }
.tabela-comp tbody th { font-weight: 700; color: var(--preto); font-size: .94rem; width: 26%; background: var(--fundo); font-family: var(--font); }
.tabela-comp td { font-size: .93rem; color: var(--cinza); }
.tabela-comp td:last-child { color: var(--preto); font-weight: 600; background: rgba(62,64,149,.035); }
.tabela-comp tbody tr:last-child th, .tabela-comp tbody tr:last-child td { border-bottom: none; }
.marca-x { color: var(--cinza-claro); margin-right: .45rem; font-weight: 700; }
.marca-check { color: #16A34A; margin-right: .45rem; font-weight: 700; }

/* ============ LINHA DO TEMPO ============ */
.timeline { position: relative; padding-left: 2.6rem; }
.timeline::before {
  content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--azul), var(--vermelho));
}
.timeline-item { position: relative; padding-bottom: 2.3rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute; left: -2.6rem; top: .3rem;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 3px solid var(--azul); box-shadow: 0 0 0 4px var(--azul-suave);
}
.timeline-item.destaque::before { border-color: var(--vermelho); box-shadow: 0 0 0 4px var(--vermelho-suave); }
.timeline-ano {
  display: inline-block; font-family: var(--font-titulo); font-weight: 700;
  font-size: .88rem; color: var(--vermelho); letter-spacing: .06em; margin-bottom: .35rem;
}
.timeline-item h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.timeline-item p { font-size: .95rem; color: var(--cinza); }

/* ============ MANIFESTO / CITAÇÃO ============ */
.manifesto { position: relative; padding: 0 0 0 clamp(1.5rem, 4vw, 3.2rem); border-left: 4px solid var(--vermelho); }
.manifesto p {
  font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: var(--grafite);
  margin-bottom: 1.35rem; line-height: 1.75;
}
.manifesto p:first-child { font-size: clamp(1.18rem, 2vw, 1.45rem); color: var(--preto); font-weight: 600; font-family: var(--font-titulo); line-height: 1.4; }
.manifesto-assinatura { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.manifesto-assinatura img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: top center; background: var(--azul-suave); }
.manifesto-assinatura strong { display: block; font-family: var(--font-titulo); color: var(--preto); font-size: 1.05rem; }
.manifesto-assinatura span { font-size: .88rem; color: var(--cinza); }

/* ============ CREDENCIAIS / SELOS ============ */
.selos { display: flex; flex-wrap: wrap; gap: .8rem; }
.selo {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--linha); border-radius: 100px;
  padding: .7rem 1.25rem; font-size: .88rem; font-weight: 600; color: var(--grafite);
  transition: var(--transicao);
}
.selo:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.selo svg { width: 17px; height: 17px; color: var(--vermelho); flex-shrink: 0; }

/* ============ LOGOS DE CLIENTES ============ */
.logos-clientes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; align-items: center; }
.logo-cliente {
  aspect-ratio: 16/9; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--radius); display: grid; place-items: center; padding: 1rem;
  text-align: center; transition: var(--transicao);
}
.logo-cliente:hover { border-color: var(--azul); transform: translateY(-3px); box-shadow: var(--sombra); }
.logo-cliente span { font-size: .8rem; font-weight: 700; color: var(--cinza); line-height: 1.25; }
.logo-cliente img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: var(--transicao); }
.logo-cliente:hover img { filter: grayscale(0); opacity: 1; }

/* ============ DEPOIMENTOS ============ */
.depoimento {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: 2.1rem; position: relative; transition: var(--transicao);
}
.depoimento:hover { box-shadow: var(--sombra-md); transform: translateY(-4px); }
.depoimento-aspas { font-family: Georgia, serif; font-size: 4rem; color: var(--azul-suave); line-height: 1; height: 32px; }
.depoimento p { font-size: 1rem; color: var(--grafite); font-style: italic; margin: .6rem 0 1.5rem; }
.depoimento-autor { display: flex; align-items: center; gap: .9rem; padding-top: 1.2rem; border-top: 1px solid var(--linha); }
.depoimento-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--azul); color: #fff;
  display: grid; place-items: center; font-family: var(--font-titulo); font-weight: 700; font-size: 1.05rem; flex-shrink: 0;
}
.depoimento-autor strong { display: block; font-size: .95rem; color: var(--preto); }
.depoimento-autor span { font-size: .84rem; color: var(--cinza); }
.estrelas { color: #F5A623; font-size: .95rem; letter-spacing: 2px; margin-bottom: .3rem; }

/* ============ FAQ ============ */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--linha); border-radius: var(--radius); margin-bottom: .9rem; overflow: hidden; transition: var(--transicao); }
.faq-item.aberto { border-color: var(--azul); box-shadow: var(--sombra); }
.faq-pergunta {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.6rem; text-align: left; font-weight: 700; font-size: 1rem;
  color: var(--preto); font-family: var(--font-titulo);
}
.faq-icone { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--azul-suave); color: var(--azul); display: grid; place-items: center; transition: var(--transicao); font-size: 1.1rem; line-height: 1; }
.faq-item.aberto .faq-icone { background: var(--azul); color: #fff; transform: rotate(45deg); }
.faq-resposta { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-resposta p { padding: 0 1.6rem 1.45rem; font-size: .97rem; color: var(--cinza); }

/* ============ FORMULÁRIO ============ */
.form-card { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem); box-shadow: var(--sombra-md); }
.campo { margin-bottom: 1.15rem; }
.campo label { display: block; font-size: .88rem; font-weight: 600; color: var(--preto); margin-bottom: .45rem; }
.campo label .obrig { color: var(--vermelho); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .92rem 1.1rem; border: 1.5px solid var(--linha); border-radius: 10px;
  font-family: inherit; font-size: .97rem; color: var(--preto); background: #fff;
  transition: var(--transicao);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(62,64,149,.1);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo-check { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.4rem; }
.campo-check input { width: 19px; height: 19px; margin-top: .15rem; accent-color: var(--azul); flex-shrink: 0; cursor: pointer; }
.campo-check label { font-size: .86rem; color: var(--cinza); font-weight: 400; line-height: 1.5; margin: 0; cursor: pointer; }
.campo-check label a { color: var(--azul); text-decoration: underline; }
.form-nota { font-size: .84rem; color: var(--cinza-claro); text-align: center; margin-top: 1rem; }

.contato-info { display: flex; flex-direction: column; gap: 1.4rem; }
.contato-item { display: flex; gap: 1rem; align-items: flex-start; }
.contato-icone {
  width: 46px; height: 46px; border-radius: 12px; background: var(--azul-suave); color: var(--azul);
  display: grid; place-items: center; flex-shrink: 0;
}
.contato-icone svg { width: 21px; height: 21px; }
.contato-item strong { display: block; font-size: .95rem; color: var(--preto); margin-bottom: .15rem; font-family: var(--font-titulo); }
.contato-item span, .contato-item a { font-size: .95rem; color: var(--cinza); }
.contato-item a:hover { color: var(--azul); }

/* ============ CTA FINAL ============ */
.cta-final {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #2A2C6B 0%, #3E4095 60%, #4B4DAA 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
}
.cta-final::before {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(211,60,67,.32) 0%, transparent 68%);
  top: -150px; right: -100px;
}
.cta-final-interno { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; align-items: center; }
.cta-final h2 { color: #fff; margin-bottom: .9rem; }
.cta-final p { color: #C9CAEA; font-size: 1.05rem; max-width: 560px; }
.cta-final-botoes { display: flex; flex-direction: column; gap: .8rem; }
.cta-final-botoes .btn { width: 100%; }

/* Faixa CTA full width */
.faixa-cta { background: var(--azul-profundo); color: #fff; text-align: center; }
.faixa-cta h2 { color: #fff; margin-bottom: 1rem; }
.faixa-cta p { color: #B9BAE0; max-width: 620px; margin: 0 auto 2rem; }
.faixa-botoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============ BLOCO DOR ============ */
.bloco-dor {
  background: var(--vermelho-suave); border-left: 4px solid var(--vermelho);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.8rem 2rem;
}
.bloco-dor h3 { color: var(--vermelho-escuro); margin-bottom: .6rem; font-size: 1.2rem; }
.bloco-dor p { color: var(--grafite); font-size: 1rem; margin: 0; }

/* ============ DUAS COLUNAS ============ */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.duas-colunas.inverso > *:first-child { order: 2; }
.coluna-foto { position: relative; }
.coluna-foto img { border-radius: var(--radius-lg); width: 100%; }
.coluna-foto.recorte {
  background: linear-gradient(140deg, var(--azul-suave), #fff);
  border-radius: var(--radius-lg); display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; min-height: 420px;
}
.coluna-foto.recorte img { max-height: 470px; width: auto; border-radius: 0; filter: drop-shadow(0 18px 36px rgba(20,21,43,.2)); }

/* ============ MATERIAL / LEAD MAGNET ============ */
.material-card {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; background: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--sombra-md); border: 1px solid var(--linha);
}
.material-capa {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sombra-lg); transform: rotate(-2.5deg); transition: var(--transicao);
}
.material-capa:hover { transform: rotate(0) scale(1.02); }
.badge-gratis {
  display: inline-block; background: var(--vermelho); color: #fff; font-size: .72rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: 100px; margin-bottom: 1rem;
}

/* ============ RODAPÉ ============ */
.rodape { background: var(--preto); color: #9FA0B5; padding: clamp(50px, 6vw, 75px) 0 0; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
.rodape-logo img { height: 46px; width: auto; margin-bottom: 1.2rem; }
.rodape-sobre p { font-size: .93rem; color: #9FA0B5; margin-bottom: 1.3rem; max-width: 320px; }
.rodape h4 { color: #fff; font-size: .95rem; margin-bottom: 1.1rem; letter-spacing: .02em; }
.rodape-links li { margin-bottom: .65rem; }
.rodape-links a { font-size: .93rem; color: #9FA0B5; transition: var(--transicao); }
.rodape-links a:hover { color: #fff; padding-left: 4px; }
.rodape-contato li { font-size: .93rem; margin-bottom: .8rem; display: flex; gap: .65rem; align-items: flex-start; }
.rodape-contato svg { width: 17px; height: 17px; color: var(--vermelho); flex-shrink: 0; margin-top: .22rem; }
.rodape-contato a:hover { color: #fff; }
.redes { display: flex; gap: .7rem; margin-top: 1.3rem; }
.rede {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.07);
  display: grid; place-items: center; color: #9FA0B5; transition: var(--transicao);
}
.rede:hover { background: var(--azul); color: #fff; transform: translateY(-3px); }
.rede svg { width: 19px; height: 19px; }
.rodape-base {
  border-top: 1px solid rgba(255,255,255,.09); padding: 1.8rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}
/* Tudo na base do rodapé usa o mesmo corpo de texto, inclusive SUSEP e CNPJ */
.rodape-base, .rodape-base p, .rodape-base a, .rodape-base span { font-size: .85rem; color: #6E6F85; }
.rodape-base a:hover { color: #fff; }
.rodape-base .assinatura { color: #8A8BA0; }
.rodape-base .assinatura a { color: #9FA0B5; text-decoration: underline; text-underline-offset: 2px; }
.rodape-base .assinatura a:hover { color: #fff; }
.rodape-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.susep-info { font-size: .82rem; color: #6E6F85; margin-top: .8rem; }

/* ============ WHATSAPP FLUTUANTE ============ */
/* Botão flutuante no formato de ícone de aplicativo (quadrado arredondado),
   com selo de notificação imitando o badge do celular. */
.whatsapp-flutuante {
  position: fixed; bottom: 26px; right: 26px; z-index: 900;
  width: 58px; height: 58px; border-radius: 16px;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(37,211,102,.42), inset 0 1px 0 rgba(255,255,255,.22);
  transition: var(--transicao); animation: pulso 2.6s infinite;
}
.whatsapp-flutuante:hover { transform: scale(1.08) rotate(-2deg); }
.whatsapp-flutuante svg { width: 32px; height: 32px; }

.whatsapp-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: #FF3B30; color: #fff;
  border: 2px solid #fff;
  font-family: var(--font); font-size: .74rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  animation: entradaBadge .45s cubic-bezier(.2,1.4,.4,1) .9s both;
}
@keyframes entradaBadge {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes pulso {
  0% { box-shadow: 0 8px 26px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow: 0 8px 26px rgba(37,211,102,.42), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 26px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-flutuante { animation: none; }
  .whatsapp-badge { animation: none; }
}

/* ============ HERO INTERNO (páginas) ============ */
.hero-pagina {
  background: linear-gradient(135deg, #2A2C6B 0%, #3E4095 100%);
  color: #fff; padding: calc(82px + 60px) 0 60px; position: relative; overflow: hidden;
}
.hero-pagina .hero-malha { opacity: .4; }
.hero-pagina-interno { position: relative; z-index: 2; max-width: 800px; }
.hero-pagina h1 { color: #fff; margin-bottom: 1.1rem; }
.hero-pagina p { color: #C9CAEA; font-size: clamp(1rem, 1.5vw, 1.14rem); margin-bottom: 1.8rem; }
.migalhas { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: #A9AAE6; margin-bottom: 1.2rem; }
.migalhas a:hover { color: #fff; }
.migalhas span { opacity: .55; }

.hero-pagina.com-foto .hero-pagina-interno {
  max-width: var(--max); display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 2rem; align-items: end;
}
/* O texto fica centralizado verticalmente; a foto assenta na base da seção. */
.hero-pagina.com-foto .hero-pagina-interno > div:first-child { align-self: center; padding-bottom: 1.5rem; }
.hero-pagina.com-foto .hero-foto-lateral { display: flex; justify-content: center; align-items: flex-end; }
.hero-pagina.com-foto .hero-foto-lateral img {
  max-height: 560px; width: auto;
  margin-bottom: -60px; /* anula o padding inferior do hero: a foto toca a borda da seção */
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.32));
}

/* ============ PLACEHOLDER DE IMAGEM ============ */
.placeholder-foto {
  background: repeating-linear-gradient(45deg, var(--azul-suave), var(--azul-suave) 12px, #fff 12px, #fff 24px);
  border: 2px dashed var(--azul-claro); border-radius: var(--radius-lg);
  display: grid; place-items: center; text-align: center; padding: 2.5rem 1.5rem;
  min-height: 260px; color: var(--azul);
}
.placeholder-foto svg { width: 42px; height: 42px; margin-bottom: .8rem; opacity: .65; }
.placeholder-foto strong { display: block; font-size: .95rem; font-family: var(--font-titulo); margin-bottom: .3rem; }
.placeholder-foto span { font-size: .84rem; color: var(--cinza); max-width: 320px; display: block; }

/* ============ EM BREVE ============ */
.em-breve {
  position: relative; opacity: .95;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: 2.1rem; text-align: center;
}
.em-breve .tag-breve {
  display: inline-block; background: var(--azul-suave); color: var(--azul); font-size: .72rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .85rem; border-radius: 100px; margin-bottom: 1rem;
}
.em-breve .card-icone { margin: 0 auto 1.2rem; }

/* ============ ANIMAÇÃO DE ENTRADA ============ */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.revela.visivel { opacity: 1; transform: translateY(0); }

/* Em telas médias o card do engenheiro quase encostava na borda direita */
@media (max-width: 1240px) {
  .hero-selo-2 { right: -6px; }
}

/* ---- Home: quebras do título do hero ---- */
.quebra-desktop { display: none; }
.quebra-mobile { display: inline; }
@media (min-width: 1240px) {
  .quebra-desktop { display: inline; }
  .quebra-mobile { display: none; }
  .hero-interno { grid-template-columns: 1.18fr .82fr; }
  .hero h1 { font-size: 3.3rem; }
  .hero-foto img { max-height: 560px; }
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .topo-acoes .btn { display: none; }
  /* O .topo usa backdrop-filter, o que o torna o bloco de contenção dos
     filhos position:fixed. Por isso a altura precisa ser explícita aqui:
     sem ela, o menu herdaria os 82px do cabeçalho. */
  .nav.aberto {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; top: 82px; left: 0; right: 0;
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
    background: #fff; padding: 1.5rem 24px; overflow-y: auto;
    border-top: 1px solid var(--linha);
  }
  .nav.aberto a { width: 100%; padding: 1.05rem 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; white-space: normal; }
  .nav.aberto a::after { display: none; }
  .nav.aberto > .btn {
    display: inline-flex; margin-top: 1.4rem; width: 100%;
    border-bottom: none; justify-content: center; color: #fff;
  }
  .grade-4 { grid-template-columns: repeat(2, 1fr); }
  .metodo-grade { grid-template-columns: repeat(2, 1fr); }
  /* Tablet: foto um pouco menor para não competir com os botões */
  .hero-pagina.com-foto .hero-foto-lateral img { max-height: 470px; }
  .logos-clientes { grid-template-columns: repeat(3, 1fr); }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .hero-interno { grid-template-columns: 1fr; min-height: auto; }
  /* No celular o banner fica alinhado à esquerda */
  .hero-texto { padding-bottom: 1.5rem; text-align: left; }
  .hero p { margin-left: 0; margin-right: 0; }
  .hero-botoes { justify-content: flex-start; }
  .hero-foto img { max-height: 430px; }
  .hero-selo { display: none; }
  .credencial { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); padding: 1.3rem 1rem; }
  .barra-credenciais .grade-4 { grid-template-columns: 1fr 1fr; }
  .credencial:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
  .duas-colunas { grid-template-columns: 1fr; }
  .duas-colunas.inverso > *:first-child { order: 0; }
  .cta-final-interno { grid-template-columns: 1fr; }
  .material-card { grid-template-columns: 1fr; }
  .material-capa { max-width: 320px; margin: 0 auto; }
  .hero-pagina.com-foto .hero-pagina-interno { grid-template-columns: 1fr; }
  .hero-pagina.com-foto .hero-foto-lateral { display: none; }
}

@media (max-width: 680px) {
  .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .metodo-grade { grid-template-columns: 1fr; }
  .logos-clientes { grid-template-columns: repeat(2, 1fr); }
  .rodape-grade { grid-template-columns: 1fr; }
  .campo-duplo { grid-template-columns: 1fr; }
  .hero-botoes .btn, .faixa-botoes .btn { width: 100%; }
  .barra-credenciais .grade-4 { grid-template-columns: 1fr; }
  .credencial:nth-child(odd) { border-right: none; }
  .whatsapp-flutuante { width: 54px; height: 54px; border-radius: 15px; bottom: 18px; right: 18px; }
  .whatsapp-flutuante svg { width: 28px; height: 28px; }
  .container { padding: 0 20px; }
  .card { padding: 1.7rem; }
  .rodape-base { flex-direction: column; text-align: center; }
}

@media print {
  .topo, .whatsapp-flutuante, .btn { display: none; }
}