/* GPM Assessoria — site institucional
 *
 * Linguagem visual (30/09/2026, a partir da referência enviada pelo cliente):
 * editorial e claro. Off-white quente, linhas finas e divisórias no lugar de
 * cartões com sombra, títulos grandes com tracking fechado, botão principal
 * grafite com seta dourada, moldura dourada vazada atrás das fotos.
 * Nenhuma seção tem fundo escuro — o grafite aparece só em botão.
 *
 * O dourado #BA944B da marca reprova AA como texto (2,83:1 no branco). Ele
 * pinta linha, ícone e moldura. Texto dourado grande usa --gold-titulo
 * (≥ 3:1, regra de texto grande); texto dourado pequeno usa --gold-ink.
 */

:root {
  /* superfícies */
  --bg-1:   #F7F6F3;   /* hero, dúvidas */
  --bg-2:   #F1EFEA;   /* seções alternadas */
  --paper:  #FFFFFF;
  --line:   #E3DFD7;
  --line-2: #D3CCBF;

  /* texto (contraste conferido) */
  --tx:     #1E1D1B;   /* 14,66:1 no --bg-2 */
  --tx-mut: #5C5750;   /*  6,23:1 no --bg-2 ·  6,62:1 no --bg-1 */

  /* grafite dos botões */
  --ink:       #2B2A28;   /* branco sobre ele: 14,34:1 */
  --ink-hover: #1A1918;

  /* marca */
  --gold:        #BA944B;  /* linha, ícone, moldura — nunca texto */
  --gold-hi:     #C9A55A;  /* seta sobre o grafite: 6,15:1 */
  --gold-titulo: #9C7A3A;  /* texto ≥ 24px bold: 3,48:1 no --bg-2 · 3,7:1 no --bg-1 */
  --gold-ink:    #7A5F2C;  /* texto dourado pequeno: 5,22:1 no --bg-2 */
  --gold-soft:   rgba(186, 148, 75, 0.12);
  --wa:          #147A45;  /* branco sobre ele: 5,39:1 */
  --wa-hover:    #10693A;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, sans-serif;

  --wrap: 1260px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --sombra:    0 30px 60px -30px rgba(40, 32, 18, .30);
  --sombra-sm: 0 14px 34px -18px rgba(40, 32, 18, .28);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
}

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--tx);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* rede de segurança contra rolagem lateral; clip (e não hidden) não quebra o sticky */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 40px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* foco visível — --gold-ink porque o dourado da marca não chega a 3:1 no claro */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 4px;
}

/* pular para o conteúdo: invisível até receber foco pelo teclado */
.pular {
  position: absolute; left: 16px; top: -80px; z-index: 300;
  background: var(--ink); color: #FFFFFF; font-family: var(--font-display); font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-sm); text-decoration: none;
}
.pular:focus { top: 12px; }


h1, h2, h3 { font-family: var(--font-display); }
/* A Plus Jakarta Sans tem espaço entre palavras estreito; com o tracking
   fechado dos títulos, "Sofreu um" virava "Sofreuum". */
h1, h2, h3, .btn, .nav a, .flutua b, .letreiro li, .quiz-q, .link-mais, .faq summary, .fatos dt { word-spacing: .06em; }

/* ------------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  padding: 16px 26px; border: 0; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .2s ease, box-shadow .25s ease, border-color .2s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }
.btn-escuro { background: var(--ink); color: #FFFFFF; }
.btn-escuro:hover { background: var(--ink-hover); box-shadow: 0 16px 30px -16px rgba(20, 18, 14, .6); }
.btn-escuro .seta, .btn-escuro .seta-diag { color: var(--gold-hi); transition: transform .25s ease; }
.btn-escuro:hover .seta { transform: translateX(5px); }
.btn-escuro:hover .seta-diag { transform: translate(2px, -2px); }
.btn-grande { font-size: 1.12rem; padding: 21px 34px; border-radius: 10px; }
.btn-wa { background: var(--wa); color: #FFFFFF; }
.btn-wa:hover { background: var(--wa-hover); }
.btn-linha { background: transparent; color: var(--tx); border: 1.5px solid var(--line-2); }
.btn-linha:hover { border-color: var(--gold); background: var(--paper); }
.btn-linha svg { color: var(--wa); }
.btn-block { width: 100%; }
.btn-sm { padding: 14px 22px; font-size: .98rem; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: var(--wa); }

.link-mais {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--gold-ink); text-decoration: none;
  border-bottom: 1.5px solid rgba(186,148,75,.5); padding-bottom: 4px;
  transition: gap .2s ease, border-color .2s ease;
}
.link-mais:hover { gap: 12px; border-bottom-color: var(--gold); }


/* =========================================================================
   CABEÇALHO
   ========================================================================= */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.site-head.rolou { box-shadow: 0 12px 30px -22px rgba(40, 32, 18, .45); }
.site-head .wrap { display: flex; align-items: center; gap: 40px; min-height: 96px; transition: min-height .3s ease; }
.site-head.rolou .wrap { min-height: 76px; }
.brand { flex: none; display: block; }
.brand img { height: 46px; width: auto; transition: height .3s ease, opacity .25s ease; }
.site-head.rolou .brand img { height: 40px; }

.nav { display: flex; gap: 38px; margin-left: auto; }
.nav a {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  color: var(--tx); text-decoration: none; padding: 6px 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--gold); transition: right .25s ease;
}
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }
.nav .nav-so-celular { display: none; }
.head-cta { flex: none; }

.progresso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform-origin: left; transform: scaleX(var(--prog, 0));
}

/* menu do celular: some a navegação, entra o botão, e o painel desce do cabeçalho */
.menu-btn { display: none; }
@media (max-width: 1060px) {
  .head-cta { margin-left: auto; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 46px; height: 46px; margin-right: -8px;
    background: transparent; border: 0; border-radius: var(--r-sm);
    color: var(--tx); cursor: pointer;
  }
  .menu-ico { display: grid; gap: 5px; width: 22px; }
  .menu-ico i {
    display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  .menu-aberto .menu-ico i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-aberto .menu-ico i:nth-child(2) { opacity: 0; }
  .menu-aberto .menu-ico i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 6px 24px 18px; box-shadow: var(--sombra);
  }
  .menu-aberto .nav { display: flex; }
  .nav a { font-size: 1.1rem; padding: 16px 2px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .nav .nav-so-celular { display: block; }
}


/* =========================================================================
   HERO
   ========================================================================= */

.hero { background: var(--bg-1); padding: 64px 0 0; }
.hero-grid {
  display: grid; gap: 64px; align-items: center;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}
.hero h1 {
  font-weight: 800; color: var(--tx);
  /* "Só fazemos uma coisa." mede 10,7em: o tamanho é o maior que ainda deixa
     cada frase numa linha só (3 linhas no total) na coluna do hero */
  font-size: clamp(2rem, 4.1vw, 3.35rem); line-height: 1.04;
  letter-spacing: -0.035em; word-spacing: .1em; margin: 0 0 30px;
}
.hero h1 .linha { display: block; }
.hero h1 em { font-style: normal; color: var(--gold-titulo); }
.hero-lead {
  font-size: clamp(1.15rem, 1.6vw, 1.38rem); line-height: 1.5;
  color: var(--tx-mut); margin: 0 0 40px; max-width: 30em;
}
.hero-lead strong { color: var(--tx); font-weight: 700; white-space: nowrap; }
.hero-acoes { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-nota { margin: 20px 0 0; font-size: 1rem; color: var(--tx-mut); }
.hero-nota a { color: var(--tx); font-weight: 600; text-underline-offset: 3px; }
.hero-nota a:hover { color: var(--gold-ink); }

/* foto com a moldura dourada vazada deslocada atrás, como na referência */
.hero-foto { position: relative; isolation: isolate; }
.hero-foto::before {
  content: ''; position: absolute; z-index: -1;
  top: -18px; right: -18px; width: 44%; height: 62%;
  border: 1.5px solid var(--gold); border-radius: var(--r-lg);
}
.hero-foto .moldura {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1.24; background: var(--bg-2);
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

.flutua {
  position: absolute; left: -22px; bottom: 18px;
  display: flex; align-items: center; gap: 16px;
  background: var(--paper); border-radius: var(--r);
  padding: 18px 26px 18px 22px; box-shadow: var(--sombra);
  font-size: 1rem; line-height: 1.4; color: var(--tx-mut);
}
.flutua b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--tx); }
.flutua .ico { flex: none; color: var(--gold); display: grid; place-items: center; }

/* faixa de confiança: itens separados por divisórias finas */
.confianca {
  list-style: none; margin: 64px 0 0; padding: 30px 0 34px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.confianca li {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 6px 20px; font-size: 1.0625rem; color: var(--tx);
}
.confianca li + li { border-left: 1px solid var(--line); }
.confianca svg { flex: none; color: var(--gold); }


/* =========================================================================
   SEÇÕES
   ========================================================================= */

.sec { padding: 112px 0; }
.sec-1 { background: var(--bg-1); }
.sec-2 { background: var(--bg-2); }
.sec-branca { background: var(--paper); }

.sec h2 {
  font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08;
  letter-spacing: -0.028em; word-spacing: .08em; margin: 0 0 20px;
}
.sec h2 em { font-style: normal; color: var(--gold-titulo); }
.sec-head { max-width: 40rem; }
.sec-head p, .texto p, .cabeca-dupla > p { font-size: 1.12rem; line-height: 1.65; color: var(--tx-mut); margin: 0 0 16px; }
.texto p:last-child { margin-bottom: 0; }
.texto strong { color: var(--tx); font-weight: 600; }

.dupla { display: grid; gap: 80px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }

.foto { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* moldura dourada atrás de fotos de seção */
.foto-emoldurada { position: relative; isolation: isolate; }
.foto-emoldurada::before {
  content: ''; position: absolute; z-index: -1;
  width: 46%; height: 58%; border: 1.5px solid var(--gold); border-radius: var(--r-lg);
}
.foto-emoldurada.canto-inf::before { left: -18px; bottom: -18px; }
.foto-emoldurada .foto { aspect-ratio: 1.12; }
.foto-emoldurada .foto img { object-position: 62% 50%; }

/* ------------------------------------------------------------ como funciona */
.cabeca-dupla {
  display: grid; gap: 40px 80px; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: end; margin-bottom: 64px;
}
.cabeca-dupla h2 { margin-bottom: 0; max-width: 13em; }
.cabeca-dupla > p { margin: 0; max-width: 30em; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.passos li { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 8px 32px; }
.passos li:first-child { padding-left: 0; }
.passos li + li { border-left: 1px solid var(--line-2); }
.passos .num {
  flex: none; font-family: var(--font-display); font-weight: 800;
  font-size: 3.2rem; line-height: .9; letter-spacing: -0.04em; color: var(--gold-titulo);
}
.passos h3 { font-weight: 700; font-size: 1.14rem; line-height: 1.3; margin: 4px 0 8px; }
.passos p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--tx-mut); }

/* ------------------------------------------------------------ o benefício */
.pontos { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pontos li { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pontos svg { flex: none; color: var(--gold); margin-top: 2px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.pontos li:hover svg { transform: rotate(-8deg) scale(1.1); }
.pontos h3 { font-weight: 700; font-size: 1.12rem; line-height: 1.3; margin: 0 0 4px; }
.pontos p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--tx-mut); }

/* ------------------------------------------------------------ faixa rolante */
.letreiro {
  background: var(--bg-1); overflow: hidden;
  border-block: 1px solid var(--line); padding: 30px 0;
}
.letreiro-trilho { display: flex; width: max-content; animation: letreiro 60s linear infinite; }
.letreiro { position: relative; }
.letreiro:hover .letreiro-trilho, .letreiro:focus-within .letreiro-trilho, .letreiro.pausado .letreiro-trilho { animation-play-state: paused; }
.letreiro-pausa {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  background: var(--paper); color: var(--tx); border: 1px solid var(--line-2); border-radius: 100px;
  padding: 6px 14px 6px 12px; font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  cursor: pointer; box-shadow: var(--sombra-sm);
}
.letreiro-pausa:hover { border-color: var(--gold); }
.letreiro-pausa .ic-play { display: none; }
.letreiro.pausado .letreiro-pausa .ic-pausa { display: none; }
.letreiro.pausado .letreiro-pausa .ic-play { display: block; }
.letreiro ul { list-style: none; margin: 0; padding: 0; display: flex; }
.letreiro li {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--tx);
}
.letreiro li::after {
  content: ''; flex: none; width: 9px; height: 9px; margin: 0 36px;
  border-radius: 50%; background: var(--gold);
}
/* duas listas iguais: andar metade do trilho fecha o ciclo sem emenda */
@keyframes letreiro { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ custo */
/* Cartão com moldura atrás: o fundo mora no ::after, pintado DEPOIS do ::before
   (mesmo z-index, ordem do documento). Assim a moldura some por baixo do
   cartão e só aparece onde passa da borda. Com o fundo no próprio elemento,
   a moldura era desenhada por cima dele. */
.selo-zero {
  position: relative; isolation: isolate; text-align: center;
  border-radius: var(--r-lg); padding: 56px 44px;
}
.selo-zero::before, .cta-final::before {
  content: ''; position: absolute; z-index: -1;
  border: 1.5px solid var(--gold); border-radius: inherit;
}
.selo-zero::after, .cta-final::after {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: inherit;
}
.selo-zero::before { top: -18px; right: -18px; width: 50%; height: 60%; }
.selo-zero b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(4rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.05em;
  color: var(--gold-titulo); margin-bottom: 18px;
}
.selo-zero p { margin: 0 auto; max-width: 22em; font-size: 1.1rem; line-height: 1.55; color: var(--tx-mut); }

/* ------------------------------------------------------------ triagem
   É o principal ponto de conversão do site, então não pode parecer "mais uma
   seção": fundo dourado claro próprio (#F5ECDA — texto 14,4:1, apoio 6,1:1,
   dourado de título 3,4:1, todos AA), título maior e cartão com borda dourada. */
.sec-triagem {
  background:
    radial-gradient(ellipse 50% 70% at 82% 35%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%),
    #F5ECDA;
  border-block: 1px solid rgba(186,148,75,.35);
}
.sec.sec-triagem h2 { font-size: clamp(2.3rem, 4.2vw, 3.5rem); line-height: 1.04; }
.sec-triagem .quiz { scroll-margin-top: 88px; }
.sec-triagem .quiz { border-color: rgba(186,148,75,.45); border-top: 4px solid var(--gold); box-shadow: 0 40px 80px -36px rgba(122,95,44,.45); }
.lista-ok { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.lista-ok li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.06rem; line-height: 1.5; }
.lista-ok svg { flex: none; margin-top: 2px; color: var(--gold); }
.texto .nota { margin: 28px 0 0; font-size: 1rem; line-height: 1.6; color: var(--tx-mut); max-width: 32rem; }

.quiz {
  background: var(--paper); color: var(--tx);
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sombra);
  overflow: hidden;
}
.quiz-head { padding: 30px 32px 22px; border-bottom: 1px solid var(--line); }
.quiz-head h3 { font-weight: 800; font-size: 1.4rem; line-height: 1.25; margin: 0 0 4px; letter-spacing: -0.02em; }
.quiz-head p { margin: 0; font-size: 1rem; color: var(--tx-mut); }

.quiz-steps { display: flex; gap: 6px; padding: 22px 32px 0; }
.quiz-steps i { height: 4px; flex: 1; border-radius: 4px; background: var(--line); transition: background .3s ease; }
.quiz-steps i.on { background: var(--gold); }

.quiz-body { padding: 22px 32px 32px; }
.quiz-count {
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 10px;
}
.quiz-q { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; line-height: 1.34; margin: 0 0 6px; letter-spacing: -0.015em; }
.quiz-hint { margin: 0 0 20px; font-size: 1rem; color: var(--tx-mut); }

.quiz-opts { display: grid; gap: 11px; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font-family: var(--font-text); font-size: 1.05rem; font-weight: 500;
  color: var(--tx); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 17px 18px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.opt:hover { border-color: var(--gold); background: var(--bg-1); transform: translateX(3px); }
.opt .key {
  flex: none; width: 28px; height: 28px; border-radius: 6px;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--tx-mut);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.opt:hover .key { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }

.quiz-back {
  margin-top: 18px; background: none; border: 0; padding: 0;
  font-family: var(--font-text); font-size: .93rem; color: var(--tx-mut);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.quiz-back:hover { color: var(--tx); }

.quiz-result[hidden] { display: none; }
.result-flag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: .84rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 6px; margin-bottom: 16px;
}
/* um estilo só: a classe não pode variar com o resultado (o Clarity grava atributos) */
.result-flag { background: var(--gold-soft); color: var(--gold-ink); }

.field { display: block; margin: 18px 0 0; }
.field span { display: block; font-family: var(--font-display); font-size: .92rem; font-weight: 600; margin-bottom: 7px; }
.field input {
  width: 100%; font-family: var(--font-text); font-size: 1.05rem;
  padding: 14px 16px; color: var(--tx); background: var(--paper);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
}
.field input:focus { outline: 2px solid var(--gold-ink); outline-offset: 1px; border-color: var(--gold); }
.campo-erro { margin: 8px 0 0; font-size: 1rem; color: #A8321F; font-weight: 500; }
.campo-erro[hidden] { display: none; }
.field input[aria-invalid="true"] { border-color: #A8321F; }

/* fora da tela em vez de display:none — robô costuma ignorar campo escondido */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 18px 0 20px; font-size: 1rem; line-height: 1.5; color: var(--tx-mut);
}
.consent input { flex: none; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold-ink); }
.consent a { color: var(--gold-ink); }

/* ------------------------------------------------------------ sobre a GPM */
.mosaico {
  display: grid; gap: 14px;
  grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr;
  aspect-ratio: 6 / 5;
}
.mosaico .foto:first-child { grid-row: span 2; }
.mosaico .foto:first-child img { object-position: 42% 50%; }

.texto .lema {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.45;
  color: var(--gold-ink); border-left: 2px solid var(--gold);
  padding-left: 18px; margin: 0 0 22px;
}
.fatos { margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.fatos > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fatos dt { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--tx); }
.fatos dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--tx-mut); }

/* ------------------------------------------------------------ dúvidas */
.duvidas { display: grid; gap: 80px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }
.duvidas .sec-head { position: sticky; top: 120px; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 56px 26px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; line-height: 1.4;
  letter-spacing: -0.01em; transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-ink); }
.faq summary::before, .faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 16px; height: 1.5px; background: var(--gold); transition: transform .25s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq .resp { padding: 0 56px 26px 0; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--tx-mut); }

/* ------------------------------------------------------------ cta final */
.cta-final {
  position: relative; isolation: isolate;
  display: grid; gap: 40px 80px; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center;
  border-radius: 20px; padding: 72px 64px;
}
.cta-final::before { left: -18px; bottom: -18px; width: 34%; height: 60%; }
.cta-final h2 { margin-bottom: 14px; }
.cta-final > div > p { font-size: 1.15rem; color: var(--tx-mut); margin: 0; }
.cta-acoes { display: grid; gap: 12px; }
.cta-acoes .aviso { margin: 8px 0 0; font-size: 1rem; color: var(--tx-mut); }
.cta-acoes .aviso a { color: var(--tx); font-weight: 600; }


/* =========================================================================
   RODAPÉ
   ========================================================================= */

.rodape-site { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--tx-mut); padding: 72px 0 34px; font-size: 1rem; }
.rodape-site-grid { display: grid; gap: 40px; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr)); margin-bottom: 44px; }
.rodape-site img { height: 42px; width: auto; margin-bottom: 18px; }
.rodape-site h3 {
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 16px;
}
.rodape-site p { margin: 0 0 10px; line-height: 1.6; }
.rodape-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape-site a { color: var(--tx); text-decoration: none; }
.rodape-site a:hover { color: var(--gold-ink); text-decoration: underline; }
.rodape-site .redes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.rodape-site-fim {
  border-top: 1px solid var(--line-2); padding-top: 24px;
  display: flex; gap: 14px 30px; flex-wrap: wrap; justify-content: space-between;
  font-size: .88rem; line-height: 1.6;
}
.rodape-site-fim p { margin: 0; max-width: 46rem; }
.link-cookies {
  background: none; border: 0; padding: 4px 0; font: inherit; color: var(--tx);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.link-cookies:hover { color: var(--gold-ink); }


/* ------------------------------------------------------ whatsapp flutuante */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wa); color: #FFFFFF; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: .96rem;
  padding: 14px 20px; border-radius: 100px;
  box-shadow: 0 14px 34px -12px rgba(20, 122, 69, .6);
}
.wa-float:hover { background: var(--wa-hover); }

/* ---------------------------------------------------------- aviso de cookies */
.ck-barra {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 44rem; margin-inline: auto;
  background: var(--paper); color: var(--tx);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--sombra);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.ck-barra p { margin: 0; flex: 1; min-width: 15rem; font-size: 1rem; line-height: 1.55; color: var(--tx-mut); }
.ck-barra a { color: var(--gold-ink); }
.ck-acoes { display: flex; gap: 10px; flex: none; }
.ck-barra button {
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  padding: 11px 20px; border-radius: var(--r-sm); cursor: pointer; border: 0;
}
.ck-aceitar { background: var(--ink); color: #FFFFFF; }
.ck-aceitar:hover { background: var(--ink-hover); }
.ck-recusar { background: transparent; color: var(--tx); border: 1.5px solid var(--line-2) !important; }
.ck-recusar:hover { border-color: var(--gold) !important; }


/* =========================================================================
   PÁGINAS INTERNAS
   Componentes reaproveitáveis. O catálogo com o HTML de cada um está em
   gpm-site-fonte/COMPONENTES.md.
   ========================================================================= */

/* item do menu da página atual */
.nav a[aria-current="page"] { color: var(--gold-ink); }
.nav a[aria-current="page"]::after { right: 0; }

/* ------------------------------------------------------- topo da página */
.pagina-topo { background: var(--bg-1); padding: 56px 0 88px; border-bottom: 1px solid var(--line); }
.pagina-topo-grid { display: grid; gap: 64px; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; }
.pagina-topo h1 {
  font-weight: 800; font-size: clamp(2.2rem, 3vw + 1rem, 3.5rem); line-height: 1.05;
  letter-spacing: -0.032em; word-spacing: .08em; margin: 0 0 24px;
}
.pagina-topo h1 em { font-style: normal; color: var(--gold-titulo); }
.pagina-topo .lead { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--tx-mut); margin: 0; max-width: 34em; }
.pagina-topo .hero-acoes { margin-top: 34px; }

.migalhas { margin: 0 0 30px; font-size: .92rem; color: var(--tx-mut); }
.migalhas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.migalhas li { display: inline-flex; align-items: center; gap: 10px; }
.migalhas li + li::before { content: '/'; color: var(--line-2); }
.migalhas a { color: var(--tx-mut); text-decoration: none; }
.migalhas a:hover { color: var(--gold-ink); text-decoration: underline; }
.migalhas [aria-current] { color: var(--tx); font-weight: 500; }

/* ------------------------------------------------------- grade com divisórias */
.grade { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade > li, .grade > div { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--line-2); }
.grade-2 > :nth-child(2n), .grade-3 > :not(:nth-child(3n + 1)) { padding-left: 32px; border-left: 1px solid var(--line-2); }
.grade svg { color: var(--gold); margin-bottom: 18px; display: block; }
.grade h3 { font-weight: 700; font-size: 1.16rem; line-height: 1.3; margin: 0 0 8px; }
.grade p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--tx-mut); }
.grade .num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 3rem; line-height: 1; letter-spacing: -0.04em; color: var(--gold-titulo); margin-bottom: 16px;
}

/* ------------------------------------------------------- etiquetas (listas curtas) */
.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.etiquetas li {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 16px; font-size: 1.0625rem; line-height: 1.35;
}
.etiquetas li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.sec-branca .etiquetas li { background: var(--bg-1); }

/* ------------------------------------------------------- destaque */
.destaque {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0; padding: 26px 30px; margin: 32px 0;
}
.sec-branca .destaque { background: var(--bg-1); }
.destaque h3 { font-weight: 700; font-size: 1.12rem; margin: 0 0 8px; }
.destaque p { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.6; color: var(--tx-mut); }
.destaque p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- quando não cabe */
.nao-cabe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; border-top: 1px solid var(--line); }
.nao-cabe li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.55; color: var(--tx-mut); }
.nao-cabe li::before {
  content: '×'; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
  font-size: 1rem; line-height: 1; color: var(--tx-mut);
}

/* ------------------------------------------------------- comparativo lado a lado */
.comparativo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.comparativo > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 34px 30px; }
.sec-branca .comparativo > div { background: var(--bg-1); }
.comparativo > div:first-child { border-top: 3px solid var(--gold); }
.comparativo h3 { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; margin: 0 0 18px; }
.comparativo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.comparativo li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.55; color: var(--tx-mut); }
.comparativo li svg { flex: none; margin-top: 3px; color: var(--gold); }

/* ------------------------------------------------------- canais de contato */
.canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.canais-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.canal {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px;
}
.sec-branca .canal { background: var(--bg-1); }
.canal svg { color: var(--gold); margin-bottom: 12px; }
.canal h3 { font-weight: 700; font-size: 1.1rem; margin: 0; }
.canal .valor { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--tx); text-decoration: none; word-break: break-word; }
.canal .valor:hover { color: var(--gold-ink); }
.canal p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--tx-mut); }
.canal .btn { margin-top: 16px; align-self: flex-start; }

/* ------------------------------------------------------- dúvidas por tema */
.faq-grupo + .faq-grupo { margin-top: 64px; }
.faq-grupo > h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: 8px; }

/* ------------------------------------------------------- texto longo (política) */
.prosa { max-width: 46rem; }
.prosa h2 {
  font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em;
  margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--line);
}
.prosa h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prosa h3 { font-weight: 700; font-size: 1.12rem; margin: 28px 0 8px; }
.prosa p, .prosa li { font-size: 1.06rem; line-height: 1.72; color: var(--tx); }
.prosa p { margin: 0 0 16px; }
.prosa ul { margin: 0 0 18px; padding-left: 22px; }
.prosa li { margin-bottom: 8px; }
.prosa li::marker { color: var(--gold); }
.prosa a { color: var(--gold-ink); }
.prosa strong { font-weight: 600; }
.prosa .data { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 1rem; color: var(--tx-mut); }

/* ------------------------------------------------------- página Dúvidas */
/* ------------------------------------------------------- 1. índice de temas */
.pg-duvidas .temas .etiquetas li { padding: 0; transition: border-color .2s ease; }
.pg-duvidas .temas .etiquetas li::before { content: none; }
.pg-duvidas .temas .etiquetas li:hover { border-color: var(--gold); }
.pg-duvidas .temas a {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 11px 16px; text-decoration: none; border-radius: inherit;
}
.pg-duvidas .temas a::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.pg-duvidas .temas a:hover { color: var(--gold-ink); }

@media (max-width: 620px) {
  .pg-duvidas .temas .etiquetas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pg-duvidas .temas a { padding: 10px 12px; font-size: 1rem; line-height: 1.3; }
}

/* ------------------------------------------- 2. nota lateral no desktop */
@media (min-width: 981px) {
  .pg-duvidas ~ section .duvidas-nota  { grid-column: 1; grid-row: 1; }
  .pg-duvidas ~ section .duvidas-lista { grid-column: 2; grid-row: 1; }
}

/* e-mail longo quebra em vez de vazar (política a 320px, rodapé entre 981 e 1190px);
   número de WhatsApp no meio do texto não quebra no hífen */
.prosa a, .destaque a, .rodape-site a[href^="mailto:"], .fatos a[href^="mailto:"] { overflow-wrap: anywhere; }
p a[href^="https://wa.me"], dd a[href^="https://wa.me"], .rodape-site li a[href^="https://wa.me"] { white-space: nowrap; }

/* ------------------------------------------------------- calculadora
   Perguntas à esquerda, resultado à direita no mesmo dourado claro da
   triagem (#F5ECDA: título dourado 3,4:1 — texto grande —, apoio 6,1:1).
   Sem JavaScript ela não aparece (a conta mora no site.js). */
.calculadora { display: none; }
.js .calculadora {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 64px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.calc-perguntas { padding: 44px 44px 40px; }
.calc-perguntas h3 { font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px; }
.calc-intro { margin: 0 0 6px; font-size: 1rem; line-height: 1.55; color: var(--tx-mut); }
.calc-perguntas .field { margin-top: 22px; }
.calc-moeda { position: relative; display: block; }
.calc-moeda i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--tx-mut);
}
.calc-moeda input {
  width: 100%; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  padding: 14px 16px 14px 50px; color: var(--tx); background: var(--paper);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
}
.calc-moeda input:focus { outline: 2px solid var(--gold-ink); outline-offset: 1px; border-color: var(--gold); }
.calc-dica { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--tx-mut); }
.calc-grupo { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.calc-grupo legend, .calc-rotulo {
  display: block; padding: 0; margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--tx);
}
.calc-opcoes { display: flex; gap: 10px; }
.calc-opcoes label { flex: 1; position: relative; }
.calc-opcoes input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.calc-opcoes span {
  display: block; text-align: center; padding: 14px 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.calc-opcoes label:hover span { border-color: var(--gold); }
.calc-opcoes input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.calc-opcoes input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.calc-alta { margin-top: 22px; }
.calc-alta[hidden] { display: none; }
.calc-data { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.calc-data select {
  width: 100%; font-family: var(--font-text); font-size: 1.05rem; color: var(--tx);
  padding: 14px 16px; background: var(--paper);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
}
.calc-data select:focus { outline: 2px solid var(--gold-ink); outline-offset: 1px; border-color: var(--gold); }

.calc-resultado {
  display: flex; flex-direction: column; gap: 20px;
  padding: 44px 44px 40px; background: #F5ECDA; border-left: 1px solid rgba(186,148,75,.35);
}
.calc-valor + .calc-valor { margin-top: 18px; }
.calc-valor span { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--tx-mut); }
.calc-valor b {
  display: block; font-family: var(--font-display); font-weight: 800; line-height: 1.1;
  font-size: clamp(2.3rem, 4vw, 3.3rem); letter-spacing: -0.035em; color: var(--gold-titulo);
}
.calc-conta { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--tx); }
.calc-aviso { margin: 0; padding-top: 18px; border-top: 1px solid rgba(186,148,75,.35); font-size: 1rem; line-height: 1.55; color: var(--tx-mut); }
.calc-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.calc-acoes .btn { text-align: center; }

/* ------------------------------------------------------- vídeo de depoimento */
.video-depoimento { position: relative; isolation: isolate; margin: 0 0 0 18px; justify-self: center; width: min(100%, 340px); }
.video-depoimento::before {
  content: ''; position: absolute; z-index: -1; left: -18px; bottom: 64px;
  width: 60%; height: 52%; border: 1.5px solid var(--gold); border-radius: var(--r-lg);
}
.video-moldura {
  aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-1); box-shadow: var(--sombra);
}
.video-moldura video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-vazio {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 24px; color: var(--tx-mut);
  background: linear-gradient(160deg, #F7F1E6, #EFE6D6);
  border: 1.5px dashed rgba(186,148,75,.55); border-radius: inherit;
}
.video-vazio b { font-family: var(--font-display); font-size: 1.1rem; color: var(--tx); margin-top: 10px; }
.video-play {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #1A1408; box-shadow: 0 14px 30px -12px rgba(122,95,44,.6);
}
.video-play svg { margin-left: 4px; }
.video-depoimento figcaption { margin-top: 16px; text-align: center; font-size: 1rem; color: var(--tx-mut); }
.video-depoimento figcaption b { color: var(--tx); font-family: var(--font-display); }
.js [data-revela].video-depoimento::before { opacity: 0; translate: 30px -30px; transition: opacity .8s ease .35s, translate 1s cubic-bezier(.2,.8,.2,1) .35s; }
.js [data-revela].video-depoimento.visivel::before { opacity: 1; translate: 0 0; }

@media (max-width: 980px) {
  .js .calculadora { grid-template-columns: 1fr; }
  .calc-resultado { border-left: 0; border-top: 1px solid rgba(186,148,75,.35); }
}
@media (max-width: 620px) {
  .calc-perguntas, .calc-resultado { padding: 28px 20px; }
  .calc-acoes .btn { width: 100%; }
  .video-depoimento { width: min(86%, 320px); margin-left: 14px; }
  .video-depoimento::before { left: -14px; }
}

/* ------------------------------------------------------- página 404 */
.nao-achou { text-align: center; padding: 120px 0 140px; }
.nao-achou .num {
  display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.05em;
  font-size: clamp(5rem, 14vw, 9rem); line-height: 1; color: var(--gold-titulo); margin-bottom: 12px;
}
.nao-achou h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; margin: 0 0 14px; }
.nao-achou p { color: var(--tx-mut); font-size: 1.1rem; margin: 0 0 32px; }
.nao-achou .hero-acoes { justify-content: center; }

@media (max-width: 980px) {
  .pagina-topo-grid { grid-template-columns: 1fr; gap: 48px; }
  .grade-3 { grid-template-columns: repeat(2, 1fr); }
  .grade-3 > :not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .grade-3 > :nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--line-2); }
  .canais { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pagina-topo { padding: 34px 0 60px; }
  .migalhas { margin-bottom: 22px; }
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  /* .grade.grade-N vence os :nth-child das larguras maiores (mesma especificidade, vem depois) */
  .grade.grade-2 > *, .grade.grade-3 > * { padding: 26px 0; border-left: 0; }
  .nao-cabe, .comparativo, .canais { grid-template-columns: 1fr; }
  .comparativo > div, .canal { padding: 26px 22px; }
  .destaque { padding: 22px 20px; }
  .prosa h2 { font-size: 1.3rem; }
}

/* =========================================================================
   ANIMAÇÃO
   Tudo aqui só age com .js no <html> (posto no <head>). Sem JS, ou se o
   site.js falhar (o vigia do <head> tira o .js em 3,5s), a página aparece
   inteira e parada. Com movimento reduzido, a regra global do topo zera
   duração, atraso e repetição: tudo vai direto para o estado final.
   ========================================================================= */

/* ------------------------------------------------------- tela de abertura
   Tudo sai de uma medida só, --a (altura do símbolo), nas proporções do logo
   oficial (1000x228): símbolo 600x293 cortado ao meio, espaço de 26,3% da
   altura, nome 474x228. É o que deixa o logo "pousar" em cima do logo do
   cabeçalho sem pulo na troca.

   Linha do tempo: chão 0,05–0,6s · figuras sobem 0,2–1,25s · toque 1,0s ·
   GPM 0,72–1,5s · ASSESSORIA 1,0–1,7s · chão some 1,35s. Na saída (site.js):
   o fundo se dissolve e o logo voa até o cabeçalho em 0,85s. */
.intro { display: none; }
.js .intro {
  --a: 96px;
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: grid; place-items: center;
  background-color: var(--bg-1);
  transition: background-color .6s ease .2s;
  /* rede de segurança: some sozinha mesmo se o JS nunca avisar */
  animation: intro-some .5s ease 4s forwards;
}
.js.sem-intro .intro { display: none; }
@keyframes intro-some { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* luz quente que acende no momento do toque */
.js .intro::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(201,165,90,.20), rgba(201,165,90,0) 42%);
  opacity: 0; animation: intro-luz 1.2s ease .95s forwards;
  /* a saída apaga com filter, não com opacity: a animação acima termina com
     opacity fixa (fill forwards) e animação vence transição na cascata — a
     luz ficava meio segundo sobre o hero depois do pouso */
  transition: filter .35s ease;
}
@keyframes intro-luz { 0% { opacity: 0; transform: scale(.7); } 45% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }

.intro-palco { position: relative; }
.intro-marca {
  display: flex; align-items: flex-start; gap: calc(var(--a) * .263);
  transform-origin: 50% 50%;
  transition: transform .8s cubic-bezier(.65,0,.25,1), opacity .25s ease;
}

/* símbolo: cada figura sobe de dentro da própria caixa, como se nascesse do chão */
.intro-simbolo { position: relative; display: flex; height: var(--a); }
.intro .fig { display: block; height: var(--a); width: calc(var(--a) * 300 / 293); overflow: hidden; }
.intro .fig img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.fig-esq img { animation: fig-sobe-esq .95s cubic-bezier(.22,1,.36,1) .2s both; }
.fig-dir img { animation: fig-sobe-dir .95s cubic-bezier(.22,1,.36,1) .32s both; }
@keyframes fig-sobe-esq { from { transform: translate(-24%, 104%) rotate(-14deg); } to { transform: none; } }
@keyframes fig-sobe-dir { from { transform: translate(24%, 104%) rotate(14deg); } to { transform: none; } }

/* o toque: anel dourado que se abre de onde as duas mãos se encontram */
.intro-toque {
  position: absolute; left: 50%; top: 3%;
  width: calc(var(--a) * .3); height: calc(var(--a) * .3);
  margin: calc(var(--a) * -.15) 0 0 calc(var(--a) * -.15);
  border-radius: 50%; border: 1.5px solid var(--gold);
  opacity: 0; animation: intro-anel 1s cubic-bezier(.2,.8,.2,1) 1s both;
}
.intro-toque::after {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  background: var(--gold-hi); filter: blur(3px);
  opacity: 0; animation: intro-faisca .8s ease .98s both;
}
@keyframes intro-anel { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes intro-faisca { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }

/* nome: "GPM" sobe por uma máscara; "ASSESSORIA" se abre do centro */
.intro-nome { position: relative; height: var(--a); width: calc(var(--a) * 474 / 228); }
.intro-nome img { display: block; width: 100%; height: 100%; }
.nome-gpm { position: absolute; left: 0; top: 0; width: 100%; height: 68.86%; overflow: hidden; }
.nome-assessoria { position: absolute; left: 0; top: 82.89%; width: 100%; height: 17.11%; }
.nome-gpm img { animation: nome-sobe .8s cubic-bezier(.22,1,.36,1) .72s both; }
.nome-assessoria { animation: nome-abre .7s cubic-bezier(.65,0,.35,1) 1s both; }
@keyframes nome-sobe { from { transform: translateY(106%); } to { transform: none; } }
@keyframes nome-abre { from { clip-path: inset(0 50% 0 50%); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* chão: linha dourada que se desenha do centro e some quando o logo fica pronto */
.intro-chao {
  position: absolute; left: -16%; right: -16%; top: calc(100% + var(--a) * .22); height: 1.5px;
  background: linear-gradient(90deg, rgba(186,148,75,0), var(--gold) 22%, var(--gold) 78%, rgba(186,148,75,0));
  transform: scaleX(0);
  animation: chao-entra .6s cubic-bezier(.65,0,.35,1) .05s forwards, chao-sai .5s ease 1.35s forwards;
}
@keyframes chao-entra { to { transform: scaleX(1); } }
@keyframes chao-sai { to { opacity: 0; } }

/* saída: o fundo se dissolve e o logo voa (transform posto pelo site.js) */
.intro-sai .intro { background-color: rgba(247, 246, 243, 0); pointer-events: none; animation: none; }  /* o JS assumiu: sem rede de segurança no meio do voo */
.intro-sai .intro::before { filter: opacity(0); }
.intro-pousou .site-head .brand img { transition: none; }
/* saída antes do desenho terminar (tecla cedo, rede lenta): o logo voa já
   inteiro — o estilo base é o estado final — e anel e linha não acompanham */
.intro-sai .fig img, .intro-sai .nome-gpm img, .intro-sai .nome-assessoria { animation: none; }
.intro-sai .intro-toque, .intro-sai .intro-toque::after { animation: none; opacity: 0; }
.intro-sai .intro-chao { animation: none; opacity: 0; transition: opacity .2s ease; }
/* se não houver para onde voar, o logo só se desfaz no lugar */
.intro-sai:not(.intro-voando) .intro-marca { opacity: 0; transform: scale(.96); }
/* o logo do cabeçalho espera o logo da abertura chegar */
.intro-voando .site-head .brand img { opacity: 0; }

/* --------------------------------------------------------- entrada do hero
   Dispara com .intro-pronta, que o site.js põe quando a abertura sai. */
.js .hero h1 .linha { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js .hero h1 .linha > span {
  display: block; transform: translateY(112%);
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.js .hero h1 .linha:nth-child(2) > span { transition-delay: .09s; }
.js .hero h1 .linha:nth-child(3) > span { transition-delay: .18s; }
.intro-pronta .hero h1 .linha > span { transform: none; }

.js [data-hero] {
  opacity: 0; translate: 0 26px;
  transition: opacity .8s ease var(--d, 0s), translate .95s cubic-bezier(.2,.8,.2,1) var(--d, 0s);
}
.intro-pronta [data-hero] { opacity: 1; translate: 0 0; }

/* foto: cortina dourada recolhe para a direita, a imagem assenta e a moldura
   vazada desliza para o lugar */
.js [data-hero-foto] .moldura::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, var(--gold), var(--gold-hi));
  transform-origin: 100% 50%;
  transition: transform .95s cubic-bezier(.76,0,.24,1) .05s;
}
.intro-pronta [data-hero-foto] .moldura::after { transform: scaleX(0); }
.js [data-hero-foto] .moldura { opacity: 0; transition: opacity .35s ease; }
.intro-pronta [data-hero-foto] .moldura { opacity: 1; }
.js [data-hero-foto] img { scale: 1.18; transition: scale 1.9s cubic-bezier(.2,.8,.2,1) .2s; }
.intro-pronta [data-hero-foto] img { scale: 1; }
.js [data-hero-foto]::before { opacity: 0; translate: -36px 36px; transition: opacity .8s ease .9s, translate 1.1s cubic-bezier(.2,.8,.2,1) .9s; }
.intro-pronta [data-hero-foto]::before { opacity: 1; translate: 0 0; }

/* cartão sobre a foto: entra (translate) e depois boia (transform) —
   propriedades separadas para uma animação não apagar a outra */
.intro-pronta .flutua { animation: boia 2.4s ease-in-out 2.2s 2; }
@keyframes boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ------------------------------------------------------ entrada ao rolar */
.js [data-revela]:not([data-revela="cascata"]) {
  opacity: 0; translate: 0 30px;
  transition: opacity .8s ease, translate .95s cubic-bezier(.2,.8,.2,1);
}
.js [data-revela]:not([data-revela="cascata"]).visivel { opacity: 1; translate: 0 0; }

/* cascata: os filhos entram um depois do outro (--i vem do site.js) */
.js [data-revela="cascata"] > * {
  --dl: calc(var(--i, 0) * 110ms);
  opacity: 0; translate: 0 26px;
  transition: opacity .7s ease var(--dl), translate .85s cubic-bezier(.2,.8,.2,1) var(--dl);
}
.js [data-revela="cascata"].visivel > * { opacity: 1; translate: 0 0; }


/* números dos passos sobem */
.js .passos li .num { translate: 0 40%; opacity: 0; transition: translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 110ms + .15s), opacity .5s ease calc(var(--i, 0) * 110ms + .15s); }
.js .passos.visivel li .num { translate: 0 0; opacity: 1; }

/* molduras douradas das seções deslizam para o lugar */
.js [data-revela].foto-emoldurada::before, .js [data-revela].selo-zero::before, .js [data-revela].cta-final::before {
  opacity: 0; translate: -30px 30px; transition: opacity .8s ease .35s, translate 1s cubic-bezier(.2,.8,.2,1) .35s;
}
/* as de canto inferior esquerdo andam no sentido oposto — sempre de dentro para fora */
.js [data-revela].foto-emoldurada::before, .js [data-revela].cta-final::before { translate: 30px -30px; }
.js [data-revela].visivel::before { opacity: 1; translate: 0 0; }

/* R$ 0 dá um salto quando o cartão aparece */
.js .selo-zero b { scale: .6; opacity: 0; transition: scale .7s cubic-bezier(.3,1.6,.5,1) .3s, opacity .4s ease .3s; }
.js .selo-zero.visivel b { scale: 1; opacity: 1; }

/* fotos de seção: parallax leve (--py vem do site.js); a escala cobre o deslocamento */
.js [data-parallax] { scale: 1.12; translate: 0 var(--py, 0px); }

/* brilho que atravessa o botão grafite */
.btn-escuro { position: relative; overflow: hidden; }
.btn-escuro::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-150%) skewX(-20deg); pointer-events: none;
}
.btn-escuro:hover::after { animation: brilho .9s ease; }
/* o botão principal do hero brilha duas vezes e para (loop infinito cansa e
   fere a WCAG 2.2.2) */
.intro-pronta .hero .btn-escuro::after { animation: brilho 2.4s ease 2.4s 2; }
@keyframes brilho { 0% { transform: translateX(-150%) skewX(-20deg); } 40%, 100% { transform: translateX(350%) skewX(-20deg); } }

/* WhatsApp flutuante: chega depois da abertura e pulsa */
.js .wa-float { opacity: 0; translate: 0 90px; transition: opacity .5s ease 1.5s, translate .7s cubic-bezier(.2,.8,.2,1) 1.5s, background .2s ease, transform .35s ease; }
/* sai da frente enquanto a triagem está na tela: cobria "Falar agora com a GPM" */
.triagem-na-tela .wa-float { transform: translateY(170%); }
.intro-pronta .wa-float { opacity: 1; translate: 0 0; }
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--wa); pointer-events: none;
  animation: pulso 1.6s ease-out 2.2s 3;
}
@keyframes pulso { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.3); } }

/* triagem: opções entram em sequência a cada pergunta */
.opt { animation: opt-entra .45s cubic-bezier(.2,.8,.2,1) backwards; }
.opt:nth-child(2) { animation-delay: .06s; }
.opt:nth-child(3) { animation-delay: .12s; }
.quiz-result:not([hidden]) { animation: opt-entra .5s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes opt-entra { from { opacity: 0; translate: 0 12px; } }

/* movimento reduzido: nada se move, nada fica escondido esperando rolagem,
   nada fica ampliado, e a faixa vira uma lista que quebra linha */
@media (prefers-reduced-motion: reduce) {
  .letreiro-trilho, .flutua, .wa-float::before, .btn-escuro::after { animation: none !important; }
  .js [data-revela], .js [data-revela] > *, .js [data-revela]:not([data-revela="cascata"]),
  .js [data-hero], .js .hero h1 .linha > span, .js [data-hero-foto] .moldura,
  .js .passos li .num, .js .selo-zero b, .js .wa-float { opacity: 1; translate: none; scale: none; transform: none; }
  .js [data-hero-foto] .moldura::after { display: none; }
  .js [data-parallax] { scale: none; translate: none; }
  .letreiro-trilho { width: auto; }
  .letreiro-pausa { display: none; }
  .letreiro ul[aria-hidden] { display: none; }
  .letreiro ul { width: 100%; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding-inline: 16px; }
  .letreiro li { white-space: normal; text-align: center; }
  .letreiro li::after { display: none; }
}

/* impressão e "salvar como PDF": tudo visível, sem nada fixo repetindo em cada folha */
@media print {
  .js [data-revela], .js [data-revela] > *, .js [data-hero], .js .hero h1 .linha > span,
  .js .passos li .num, .js .selo-zero b {
    opacity: 1 !important; translate: none !important; transform: none !important; scale: none !important; transition: none !important;
  }
  .js [data-hero-foto] .moldura::after, .intro, .wa-float, .progresso, .ck-barra, .letreiro-pausa, .menu-btn { display: none !important; }
  .site-head { position: static; }
}

/* com o aviso de cookies aberto, o WhatsApp flutuante saía coberto pela barra */
body:has(.ck-barra) .wa-float { visibility: hidden; }
.ck-barra strong { font-weight: 600; color: var(--tx); }

/* segunda página da sessão (sem abertura): o hero entra rápido, sem cortina
   sobre a foto — a foto do hero é o maior elemento da tela (LCP) */
.js.sem-intro [data-hero] { transition-delay: 0s, 0s; transition-duration: .5s, .6s; }
.js.sem-intro .hero h1 .linha > span { transition-duration: .7s; }
.js.sem-intro [data-hero-foto] .moldura::after { display: none; }
.js.sem-intro [data-hero-foto] img { scale: 1; }


/* =========================================================================
   RESPONSIVO — no fim do arquivo para vencer as regras acima
   ========================================================================= */

@media (max-width: 1180px) {
  .hero-grid { gap: 48px; }
  .passos { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .passos li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 980px) {
  .js .intro { --a: 80px; }
  .hero h1 { font-size: clamp(1.6rem, 8.2vw, 3.35rem); }
  .wrap { padding-inline: 28px; }
  .hero-grid, .dupla, .duvidas, .cabeca-dupla, .cta-final { grid-template-columns: 1fr; }
  .hero { padding-top: 44px; }
  .hero-foto { margin-right: 18px; }
  .confianca { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .confianca li { justify-content: flex-start; }
  .confianca li:nth-child(3) { border-left: 0; }
  .duvidas .sec-head { position: static; }
  .cabeca-dupla { margin-bottom: 48px; }
  .cta-final { padding: 56px 40px; }
  .rodape-site-grid { grid-template-columns: 1fr 1fr; }
  .sec { padding: 88px 0; }
  .dupla, .duvidas { gap: 56px; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 18px; }
  .site-head .wrap, .site-head.rolou .wrap { min-height: 68px; gap: 12px; }
  .brand img, .site-head.rolou .brand img { height: 34px; }
  .head-cta { padding: 11px 14px; font-size: .9rem; }
  .js .intro { --a: 60px; }

  .hero { padding-top: 34px; }
  .hero h1 { margin-bottom: 22px; }
  .hero-lead { margin-bottom: 30px; }
  .hero-acoes .btn { width: 100%; }
  .hero-foto { margin-right: 12px; }
  .hero-foto::before { top: -12px; right: -12px; }
  .hero-foto .moldura { aspect-ratio: 4 / 3.4; }
  .flutua { left: 12px; bottom: 12px; padding: 13px 16px; gap: 12px; font-size: 1rem; }
  .flutua b { font-size: 1.02rem; }
  .flutua .ico svg { width: 26px; height: 26px; }
  .confianca { grid-template-columns: 1fr; margin-top: 44px; padding: 20px 0 26px; row-gap: 4px; }
  .confianca li { padding: 10px 0; border-left: 0 !important; font-size: 1.0625rem; }
  .confianca svg { width: 30px; height: 30px; }

  .sec { padding: 68px 0; }
  .passos { grid-template-columns: 1fr; row-gap: 0; }
  .passos li { flex-direction: row; gap: 20px; padding: 22px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line-2); }
  .passos li:last-child { border-bottom: 1px solid var(--line-2); }
  .passos .num { font-size: 2.6rem; min-width: 3.4rem; }
  .foto-emoldurada.canto-inf::before { left: -10px; bottom: -10px; }
  .foto-emoldurada { margin-left: 10px; }
  .selo-zero { padding: 44px 24px; margin-right: 12px; }
  .selo-zero::before { top: -12px; right: -12px; }
  .letreiro { padding: 22px 0; }
  .letreiro li::after { margin: 0 24px; }
  .quiz-head, .quiz-body { padding-inline: 20px; }
  .quiz-steps { padding-inline: 20px; }
  .mosaico { aspect-ratio: 1 / 1.05; gap: 10px; }
  .fatos > div { grid-template-columns: 1fr; gap: 2px; }
  .faq summary { font-size: 1.05rem; padding: 22px 44px 22px 0; }
  .faq .resp { padding-right: 0; }
  .cta-final { padding: 44px 22px; margin-left: 10px; }
  .cta-final::before { left: -10px; bottom: -10px; }
  .cta-acoes .btn { width: 100%; }
  .btn-grande { padding: 19px 20px; font-size: 1.05rem; }
  .rodape-site-grid { grid-template-columns: 1fr; }
  .rodape-site-fim { flex-direction: column; }
  .wa-float span { display: none; }
  .wa-float { padding: 15px; }
  .mosaico .foto:first-child img { object-position: 48% 50%; }
}
/* espaço para a última linha do rodapé ("Preferências de cookies") não ficar
   sob o WhatsApp flutuante — até 800px, que inclui o celular deitado */
@media (max-width: 800px) { .rodape-site { padding-bottom: 104px; } }

/* Logo + "Fale com a equipe" + menu não cabem juntos abaixo de ~440px
   (a 390px o botão de menu saía da tela). O WhatsApp flutuante cobre o CTA. */
@media (max-width: 440px) {
  .head-cta { display: none; }
  .menu-btn { margin-left: auto; }
}
@media (max-width: 360px) {
  .brand img, .site-head.rolou .brand img { height: 30px; }
}