/* Compass Intermediações: prévia comercial
   Tokens do briefing (Compass-Intermediacoes-Briefing-e-Identidade-do-Site.pdf, seção 13).
   Formas: botões em pílula, cartões com raio 16, campos e opções com raio 12. */

/* fontes no próprio site (licença OFL, arquivos variáveis do Google Fonts, só o subconjunto latino, que cobre o português).
   Vindas do Google, chegavam depois do texto e refaziam o layout da página inteira (~600 ms num celular lento) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fontes/inter.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fontes/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(assets/fontes/oswald.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --azul: #054CA9;
  --azul-700: #033B85;
  --noite: #0D1722;
  --noite-900: #09111A;
  --marinho: #13336B;
  --celeste: #2F9BD6;
  --celeste-claro: #7CC6EE;
  --prata: #C9D3DE;
  --gelo: #EEF5FA;
  --ouro: #F5B800;
  --ouro-700: #E6AD00;
  --sucesso: #22A45D;
  --texto: #0F172A;
  --texto-suave: #5B6B80;
  --borda: #DCE4EE;
  --borda-campo: #7D8DA3;
  --erro: #B42318;

  --f-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num: 'Oswald', 'Arial Narrow', sans-serif;

  --raio-campo: 12px;
  --raio-card: 16px;
  --raio-pilula: 999px;
  --sombra-card: 0 1px 2px rgba(13, 23, 34, .06), 0 8px 24px rgba(13, 23, 34, .06);
  --sombra-sim: 0 2px 4px rgba(5, 10, 18, .18), 0 24px 64px rgba(5, 10, 18, .45);

  --moldura: 1200px;
  --gutter: 16px;
  --secao-y: 64px;
  --topo-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --secao-y: 96px; --topo-h: 72px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + 12px); }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
.trabalhe__foto, .contato__foto img { background: #C9D3DE; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ico { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }

.pular {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: 8px;
  background: var(--ouro); color: var(--noite); font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }
/* o "pular para o conteúdo" leva o foco ao main; o contorno de foco não precisa abraçar a página inteira */
main:focus { outline: none; }

.moldura {
  width: 100%;
  max-width: calc(var(--moldura) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- tipografia ---------- */
h1 {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.titulo-secao {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--noite);
  text-wrap: balance;
}
.lead { font-size: 1.0625rem; line-height: 1.65; color: var(--texto-suave); max-width: 62ch; }
.destaque { color: var(--celeste); }
/* em fundo branco ou gelo o celeste puro fica abaixo do contraste mínimo (2,8:1 no gelo); este tom mais fundo dá 5,2:1 no branco e 4,7:1 no gelo */
:is(.contemplados, .lider) .destaque { color: #1A73A8; }
.cabeca { display: grid; gap: 12px; margin-bottom: 40px; max-width: 46rem; }

@media (min-width: 768px) {
  .lead { font-size: 1.125rem; }
  .cabeca { margin-bottom: 48px; }
}

/* ---------- botões e links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s, opacity .2s;
}
.btn .ico, .btn img { width: 1.25rem; height: 1.25rem; }
.btn:active { transform: scale(.98); }
.btn--ouro { background: var(--ouro); color: var(--noite); }
.btn--azul { background: var(--azul); color: #fff; }
.btn--claro { background: #fff; color: var(--azul); }
.btn--contorno-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .72); }
.btn--texto { min-height: 48px; padding-inline: .5rem .75rem; background: transparent; color: var(--texto-suave); }
.btn--bloco { width: 100%; }
@media (max-width: 359px) {
  .btn { white-space: normal; text-align: center; }
}
.btn[disabled] { opacity: .42; cursor: not-allowed; }
@media (hover: hover) {
  .btn:not([disabled]):hover { transform: translateY(-2px); }
  .btn--ouro:hover { background: var(--ouro-700); }
  .btn--azul:not([disabled]):hover { background: var(--azul-700); }
  .btn--claro:hover { background: var(--gelo); }
  .btn--contorno-claro:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
  .btn--texto:hover { color: var(--texto); transform: none; }
}

.link-acao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--azul);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-acao .ico { width: 1.1rem; height: 1.1rem; }
.link-acao--claro { color: var(--celeste-claro); }

/* ---------- topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  color: #fff;
}
/* no alto da página: faixa escura que se funde com a abertura */
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noite);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: opacity .35s var(--ease);
}
/* ao rolar: a faixa some e o topo vira uma cápsula de vidro fosco flutuando sobre o conteúdo */
.topo__capsula {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: max(8px, max(var(--gutter), (100vw - var(--moldura)) / 2) - 16px);
  right: max(8px, max(var(--gutter), (100vw - var(--moldura)) / 2) - 16px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: linear-gradient(180deg, #132848, #0B1420);
  box-shadow: 0 12px 32px rgba(5, 10, 18, .3);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
/* vidro fosco só no desktop; no celular a cápsula quase opaca dispensa o desfoque (poupa celulares fracos) */
@media (min-width: 1024px) {
  .topo__capsula { background: linear-gradient(180deg, rgba(19, 40, 72, .9), rgba(11, 20, 32, .93)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
.topo--flutuando::before { opacity: 0; }
.topo--flutuando .topo__capsula { opacity: 1; transform: none; }
/* rumo da leitura: linha que corre na base da cápsula conforme a pessoa avança na página */
.topo__rumo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--celeste), var(--ouro));
  transform: scaleX(var(--rumo, 0));
  transform-origin: left;
}
.menu-aberto .topo::before { opacity: 1; }
.menu-aberto .topo__capsula { opacity: 0; }
.topo__barra { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: var(--topo-h); }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; }
.marca__simbolo { width: 38px; height: 38px; will-change: transform; }
.marca__nome {
  display: flex;
  flex-direction: column;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.05;
}
.marca__nome span { margin-top: 2px; font-family: var(--f-texto); font-weight: 500; font-size: .75rem; color: var(--prata); }
.topo__nav, .topo__cta { display: none; }
.topo__menu {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease), border-color .2s;
}
.topo__menu:active { transform: scale(.92); }
.menu-aberto .topo__menu { border-color: rgba(255, 255, 255, .32); }
/* três traços que viram o X (o de cima e o de baixo giram como agulha; o do meio recolhe) */
.topo__menu-icone { position: relative; width: 22px; height: 16px; }
.topo__menu-icone span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--ease), opacity .2s;
}
.topo__menu-icone span:nth-child(1) { top: 0; }
.topo__menu-icone span:nth-child(2) { top: 7px; transform-origin: right; }
.topo__menu-icone span:nth-child(3) { top: 14px; }
.menu-aberto .topo__menu-icone span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-aberto .topo__menu-icone span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-aberto .topo__menu-icone span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- menu do celular ----------
   cortina: o painel desce de trás do topo (só transform; é pintado uma vez e depois só se desloca),
   a rosa dos ventos desce junto girando até o norte, os nomes sobem de trás de uma máscara e as
   linhas se desenham. Fecha mais rápido, recolhendo para dentro do topo.
   (Um círculo que cresce como íris foi medido em 19/10/2026: o recorte repinta a tela inteira a cada
   quadro e travava em celular fraco; com scale, a camada era rasterizada com ~5.400 px.) */
.menu-movel {
  position: fixed;
  inset: var(--topo-h) 0 0 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 100% 100%, rgba(5, 76, 169, .32), transparent 70%),
    var(--noite);
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.6, 0, .84, .2), visibility 0s .4s;
}
.menu-aberto .menu-movel { visibility: visible; pointer-events: auto; transform: none; transition: transform .65s var(--ease); }
html.menu-aberto { overflow: hidden; }
/* presa ao painel (o transform da cortina vira o referencial), desce junto e gira até o norte */
.menu-movel__rosa {
  position: fixed;
  right: -48vw;
  bottom: -34vw;
  z-index: -1;
  width: 124vw;
  max-width: 600px;
  height: auto;
  aspect-ratio: 1;
  color: rgba(201, 211, 222, .09);
  opacity: 0;
  transform: rotate(-80deg) scale(.92);
  transition: opacity .2s, transform .45s var(--ease);
}
.menu-aberto .menu-movel__rosa { opacity: 1; transform: none; transition: opacity .6s .12s, transform 1.6s var(--ease) .08s; }

/* cada item entra inteiro (nome, seta e linha juntos): 6 peças em vez de 18, que ficam como camada
   enquanto o menu está aberto; animar nome, linha e seta separados repintava a cada 50 ms e travava */
.menu-movel__lista li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .15s, transform .25s var(--ease);
}
.menu-movel__lista a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.375rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s;
}
.menu-movel__texto { display: block; }
/* celular baixo: com 7 itens, os botões Simular e WhatsApp continuam à vista sem rolar o menu */
@media (max-height: 700px) { .menu-movel__lista a { min-height: 52px; font-size: 1.25rem; } }
.menu-movel__lista .ico { width: 20px; height: 20px; margin-left: auto; color: rgba(255, 255, 255, .4); transition: transform .2s var(--ease), color .2s; }
.menu-movel__lista a:active .ico { transform: translateX(5px); color: #fff; }
.menu-movel__lista a[aria-current] { color: var(--ouro); }
.menu-movel__lista a[aria-current] .ico { color: var(--ouro); }
.menu-movel__base { display: grid; gap: 12px; margin-top: auto; opacity: 0; transform: translateY(16px); transition: opacity .15s, transform .2s var(--ease); }
.menu-movel__info { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: pre; padding-top: 4px; font-size: .875rem; color: var(--prata); text-align: center; }
.menu-movel__info .ico { width: 16px; height: 16px; }
@media (max-width: 359px) { .menu-movel__local { display: none; } }

/* aberto: os itens entram em sequência enquanto a cortina termina de descer */
.menu-aberto .menu-movel__lista li { opacity: 1; transform: none; will-change: transform; transition: opacity .5s calc(150ms + var(--n) * 55ms), transform .75s var(--ease) calc(150ms + var(--n) * 55ms); }
.menu-aberto .menu-movel__base { opacity: 1; transform: none; transition: opacity .5s 480ms, transform .75s var(--ease) 480ms; }
.menu-movel__lista li:nth-child(1) { --n: 0; }
.menu-movel__lista li:nth-child(2) { --n: 1; }
.menu-movel__lista li:nth-child(3) { --n: 2; }
.menu-movel__lista li:nth-child(4) { --n: 3; }
.menu-movel__lista li:nth-child(5) { --n: 4; }
.menu-movel__lista li:nth-child(6) { --n: 5; }
.menu-movel__lista li:nth-child(7) { --n: 6; }

/* movimento reduzido: sem crescer, girar ou subir; só aparece e some */
@media (prefers-reduced-motion: reduce) {
  .menu-movel, .menu-aberto .menu-movel { transform: none; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
  .menu-aberto .menu-movel { opacity: 1; transition: opacity .2s; }
  .menu-movel__rosa, .menu-aberto .menu-movel__rosa { transform: none; transition: opacity .2s; }
  .menu-movel__lista li, .menu-movel__base,
  .menu-aberto .menu-movel__lista li, .menu-aberto .menu-movel__base { transform: none; transition: opacity .2s; }
  .topo__menu-icone span { transition: opacity .2s; }
}

@media (min-width: 1024px) {
  .marca__simbolo { width: 40px; height: 40px; }
  .topo__nav { display: block; }
  .topo__nav ul { display: flex; gap: 2px; }
  .topo__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: .9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .2s;
  }
  /* um risco dourado só, que desliza até o item da seção atual */
  .topo__nav { position: relative; }
  .topo__indicador {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100px;
    height: 2px;
    border-radius: 2px;
    background: var(--ouro);
    opacity: 0;
    transform-origin: left;
    transition: transform .5s var(--ease), opacity .3s;
  }
  .topo__nav a:hover { color: #fff; }
  .topo__nav a { white-space: nowrap; }
  .topo__nav a[aria-current] { color: #fff; }
  .topo__cta { display: inline-flex; min-height: 44px; margin-left: 12px; padding: 0 1.25rem; font-size: .9375rem; }
  .topo__menu, .menu-movel { display: none; }
}
/* 7 itens: entre 1024 e 1279 px o menu aperta um pouco para caber ao lado da marca e do botão */
@media (min-width: 1024px) and (max-width: 1279px) {
  .topo__nav ul { gap: 0; }
  .topo__nav a { padding: 0 8px; font-size: .875rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* a abertura começa por baixo do topo: quando ele vira cápsula, atrás dele há azul-noite, nunca o fundo branco */
  margin-top: calc(var(--topo-h) * -1);
  padding: calc(32px + var(--topo-h)) 0 48px;
  background: radial-gradient(80% 70% at 85% 10%, var(--marinho) 0%, rgba(19, 51, 107, 0) 60%), var(--noite);
  color: #fff;
}
.rosa {
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -62vw;
  width: min(1100px, 170vw);
  height: auto;
  aspect-ratio: 1;
  color: rgba(201, 211, 222, .11);
}
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } /* 48 px: espaço para a seta descer até o simulador */
.hero__texto { display: grid; gap: 16px; align-content: start; }
.hero__sub { max-width: 34rem; font-size: 1.0625rem; color: rgba(255, 255, 255, .8); }
.hero__acoes { display: grid; gap: 12px; margin-top: 8px; }

/* seta até o simulador (21/10/2026, pedido do Caio): rota pontilhada como a de "Como funciona", da dica até o
   simulador, com a ponta dourada. O app.js traça o caminho com as medidas reais: no celular e no tablet a rota
   vira e desce até o simulador; no desktop ela faz um arco até a lateral dele */
.hero__grade { position: relative; }
.hero__dica { justify-self: start; margin-top: 4px; font-family: var(--f-titulo); font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--celeste-claro); }
.hero__rota { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero__rota-traco { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; }
.hero__rota-linha { fill: none; stroke: var(--celeste-claro); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .01 10; }
.hero__rota-ponta path { fill: var(--ouro); }
/* a seta sai 8 s depois de aparecer ou no primeiro toque no simulador (app.js); a dica, que é o começo da rota, se
   apaga quando a saída começa. O espaço fica, para nada pular */
.hero__dica, .hero__rota { transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.hero--rota-saindo .hero__dica, .hero--rota-saiu .hero__rota { opacity: 0; visibility: hidden; }

@media (min-width: 640px) {
  .hero__acoes { display: flex; flex-wrap: wrap; }
  .simulador { max-width: 560px; }
}
@media (min-width: 1024px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(56px + var(--topo-h)) 0 72px;
  }
  .rosa { top: 50%; right: -150px; width: 1000px; margin-top: -500px; }
  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; }
  .hero__texto { gap: 20px; }
  .hero__sub { font-size: 1.1875rem; }
  .hero__simular { display: none; }
}

/* ---------- simulador ---------- */
.sim {
  display: grid;
  gap: 16px;
  padding: 20px 16px 16px;
  border-radius: var(--raio-card);
  background: #fff;
  color: var(--texto);
  box-shadow: var(--sombra-sim);
}
.sim.is-destacado { animation: destacar 1.3s var(--ease); }
@keyframes destacar {
  0% { box-shadow: var(--sombra-sim), 0 0 0 0 rgba(47, 155, 214, 0); }
  30% { box-shadow: var(--sombra-sim), 0 0 0 6px rgba(47, 155, 214, .55); }
  100% { box-shadow: var(--sombra-sim), 0 0 0 0 rgba(47, 155, 214, 0); }
}
.sim__topo { display: flex; align-items: center; gap: 14px; }
.sim__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--noite); }
.sim__apoio { font-size: .875rem; color: var(--texto-suave); }

.bussola { width: 56px; height: 56px; flex: none; }
.bussola__fundo { fill: var(--noite); }
.bussola__anel { fill: none; stroke: var(--celeste); stroke-width: 3; }
.bussola__marcas { fill: none; stroke: var(--prata); stroke-width: 3; opacity: .45; }
.bussola__n { font-family: var(--f-num); font-weight: 600; font-size: 9px; fill: var(--celeste-claro); text-anchor: middle; dominant-baseline: central; }
.bussola__ponto { fill: var(--prata); opacity: .6; }
.bussola__agulha {
  transform: rotate(var(--rumo, -32deg));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1s var(--ease);
}

.sim__progresso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sim__progresso li {
  position: relative;
  padding-top: 10px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto-suave);
}
.sim__progresso li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 4px;
  background: var(--borda);
  transition: background-color .3s;
}
.sim__progresso li.is-feito::before { background: var(--celeste); }
.sim__progresso li.is-atual { color: var(--noite); }
.sim__progresso li.is-atual::before { background: var(--azul); }

.sim__etapa { min-width: 0; margin: 0; padding: 0; border: 0; }
.sim__etapa > :not(legend) + :not(legend) { margin-top: 14px; }
.sim__pergunta + * { clear: both; }
.sim__pergunta {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--noite);
}
.sim__pergunta:focus, .sim__resultado-titulo:focus { outline: none; }
.sim__etapa.is-entrando, .sim__resultado.is-entrando { animation: entrar .32s var(--ease) both; }
.sim__etapa.is-voltando { animation: voltar .32s var(--ease) both; }
@keyframes entrar { from { opacity: 0; transform: translateX(14px); } }
@keyframes voltar { from { opacity: 0; transform: translateX(-14px); } }

/* opções (bem e parcela) */
.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; clear: both; }
.opcao, .chip {
  position: relative;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.opcao input, .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opcao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 108px;
  padding: 12px;
}
.opcao::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--borda-campo);
  border-radius: 50%;
  background: #fff center / 12px no-repeat;
  transition: background-color .2s, border-color .2s;
}
.opcao__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gelo);
  color: var(--azul);
  transition: background-color .2s, color .2s;
}
.opcao__icone .ico { width: 22px; height: 22px; }
.opcao__nome { font-family: var(--f-titulo); font-weight: 700; font-size: .9375rem; line-height: 1.2; color: var(--noite); }
.opcao__apoio { font-size: .8125rem; line-height: 1.35; color: var(--texto-suave); }
.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  text-align: center;
  color: var(--noite);
  font-variant-numeric: tabular-nums;
}
.opcao.is-marcada, .chip.is-marcada,
.opcao:has(input:checked), .chip:has(input:checked) {
  border-color: var(--azul);
  background: var(--gelo);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.opcao.is-marcada .opcao__icone, .opcao:has(input:checked) .opcao__icone { background: var(--azul); color: #fff; }
.opcao.is-marcada::after, .opcao:has(input:checked)::after {
  border-color: var(--azul);
  background-color: var(--azul);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}
.opcao:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--celeste); outline-offset: 2px; }
@media (hover: hover) {
  .opcao:hover, .chip:hover { border-color: var(--azul); box-shadow: 0 4px 14px rgba(5, 76, 169, .12); }
}

/* valor do crédito */
.valor { display: flex; align-items: baseline; gap: 8px; clear: both; color: var(--noite); }
.valor__moeda { font-family: var(--f-num); font-weight: 500; font-size: 1.375rem; color: var(--texto-suave); }
.valor__numero { font-family: var(--f-num); font-weight: 600; font-size: 3rem; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.faixa {
  --pct: 14%;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.faixa:focus { outline: none; }
.faixa::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--azul) 0 var(--pct), var(--borda) var(--pct) 100%);
}
.faixa::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 3px solid var(--azul);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(13, 23, 34, .25);
  transition: transform .15s;
}
.faixa:active::-webkit-slider-thumb { transform: scale(1.1); }
.faixa:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(47, 155, 214, .5), 0 2px 8px rgba(13, 23, 34, .25); }
.faixa::-moz-range-track { height: 8px; border-radius: 999px; background: var(--borda); }
.faixa::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--azul); }
.faixa::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--azul);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(13, 23, 34, .25);
}
.faixa:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(47, 155, 214, .5), 0 2px 8px rgba(13, 23, 34, .25); }
.faixa__limites { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--texto-suave); }
.sim__etapa .faixa { margin-top: 8px; }
.sim__etapa .faixa__limites { margin-top: -4px; }
.sim__nota { font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }

/* conta rápida (parcela) e lance */
.opcoes--lance { grid-template-columns: minmax(0, 1fr); }
.sim__conta, .sim__aviso {
  padding: 12px 14px;
  border-radius: var(--raio-campo);
  background: var(--gelo);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--texto);
}
.sim__conta strong { font-weight: 700; color: var(--noite); }
.sim__conta .link-acao { margin-top: 2px; font-size: .9375rem; }
.campo__moeda { position: relative; }
.campo__moeda span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--f-num); font-weight: 500; font-size: 1.125rem; color: var(--texto-suave); pointer-events: none; }
.campo .campo__moeda input { padding-left: 46px; font-family: var(--f-num); font-weight: 500; font-size: 1.25rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.campo--lance .sim__nota { min-height: 1.5em; }
.campo--lance #sim-lance-sugestoes-titulo { margin-top: 4px; }
.opcoes--sugestoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip--sugestao { flex-direction: column; gap: 2px; min-height: 60px; padding: 8px 4px; }
.chip__valor { font-family: var(--f-num); font-weight: 500; font-size: 1.0625rem; letter-spacing: .01em; white-space: nowrap; }
.chip__apoio { font-weight: 500; font-size: .75rem; color: var(--texto-suave); }
@media (max-width: 374px) {
  .chip__valor { font-size: .9375rem; }
  .chip__apoio-extra { display: none; }
}

/* contato */
.campo { display: grid; gap: 6px; clear: both; }
.campo label { font-weight: 600; font-size: .875rem; color: var(--noite); }
.campo input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  background: #fff;
  font-size: 1rem;
  color: var(--texto);
  transition: border-color .2s, box-shadow .2s;
}
.campo input::placeholder { color: #66768A; }
.campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(47, 155, 214, .4); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo__erro { font-size: .8125rem; font-weight: 500; color: var(--erro); }
.sim__lgpd { display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem; line-height: 1.45; color: var(--texto-suave); }
.sim__lgpd .ico { width: 16px; height: 16px; margin-top: 2px; }

/* resultado */
.sim__resultado { display: grid; gap: 14px; }
.sim__pronta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px 12px 4px 8px;
  border-radius: var(--raio-pilula);
  background: #E7F6EE;
  font-weight: 600;
  font-size: .8125rem;
  color: #146C3C;
}
.sim__pronta .ico { width: 16px; height: 16px; color: var(--sucesso); }
.sim__resultado-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.375rem; line-height: 1.2; color: var(--noite); }
.resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  overflow: hidden;
}
.resumo div { padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.resumo div:nth-child(odd) { border-right: 1px solid var(--borda); }
.resumo div:nth-last-child(-n+2) { border-bottom: 0; }
.resumo dt { font-size: .75rem; font-weight: 500; color: var(--texto-suave); }
.resumo dd { font-family: var(--f-titulo); font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--noite); overflow-wrap: anywhere; }
.resumo__apoio { display: block; margin-top: 2px; font-family: var(--f-texto); font-weight: 500; font-size: .8125rem; color: var(--texto-suave); }
.sim__passos { display: grid; gap: 8px; padding: 0; list-style: none; counter-reset: passo; }
.sim__passos li {
  position: relative;
  padding-left: 32px;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--texto-suave);
  counter-increment: passo;
}
.sim__passos li::before {
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gelo);
  font-family: var(--f-num);
  font-weight: 600;
  font-size: .75rem;
  line-height: 1;
  color: var(--azul);
}
.sim__resultado-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.sim__resultado-rodape .link-acao { font-size: 1rem; gap: .5rem; }
.sim__resultado-rodape .link-acao .ico { width: 1.25rem; height: 1.25rem; }
.sim__resultado-ajustes { display: flex; flex-wrap: wrap; gap: 0 28px; }

.sim__navegacao { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sim__navegacao [data-avancar] { margin-left: auto; padding-inline: 1.25rem; }

@media (min-width: 400px) {
  .sim { padding: 22px 20px 20px; }
}
@media (min-width: 768px) {
  .sim { gap: 20px; padding: 28px; }
  .sim__titulo { font-size: 1.375rem; }
  .bussola { width: 60px; height: 60px; }
  .opcoes--parcelas, .opcoes--lance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sim__etapas { min-height: 370px; }
}

/* ---------- garantias ---------- */
.garantias { border-bottom: 1px solid var(--borda); background: #fff; }
.garantias__lista { display: grid; padding-block: 8px; }
.garantias li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.garantias li:last-child { border-bottom: 0; }
.garantias .ico { width: 28px; height: 28px; margin-top: 2px; color: var(--azul); }
.garantias p { font-size: .9375rem; line-height: 1.5; color: var(--texto-suave); }
.garantias strong { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; color: var(--noite); }
@media (min-width: 768px) {
  .garantias__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 32px; }
  .garantias li { padding: 0 24px; border-bottom: 0; border-left: 1px solid var(--borda); }
  .garantias li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- como funciona ---------- */
.passos { padding-block: var(--secao-y); background: var(--gelo); }
.passos__lista { display: grid; }
.passo {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  padding-bottom: 28px;
}
.passo::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--celeste) 0 6px, transparent 6px 12px);
}
.passo:last-child { padding-bottom: 0; }
.passo:last-child::before { display: none; }
.passo__no {
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--noite);
  box-shadow: 0 0 0 6px var(--gelo);
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
}
.passo__titulo { padding-top: 10px; font-family: var(--f-titulo); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; color: var(--noite); }
.passo p { margin-top: 4px; color: var(--texto-suave); }
.passos__acao { margin-top: 40px; }
.passos__acao .btn { width: 100%; }
@media (min-width: 640px) {
  .passos__acao .btn { width: auto; }
}
@media (min-width: 900px) {
  .passos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .passo { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .passo::before {
    top: 23px;
    right: -32px;
    bottom: auto;
    left: 64px;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--celeste) 0 6px, transparent 6px 12px);
  }
  .passo__no { grid-row: auto; margin-bottom: 20px; }
  .passo__titulo { padding-top: 0; }
  .passos__acao { margin-top: 48px; }
}

/* rota da bússola: com JS, uma linha única liga os passos e se preenche com a rolagem;
   a bússola corre na ponta e cada passo acende quando a linha chega nele */
.passos__rota { position: relative; --p: 0; }
.passos__trilho { display: none; }
.passos__rota--viva .passos__trilho { position: absolute; display: block; pointer-events: none; }
.passos__rota--viva .passo::before { display: none; }
.passos__trilho::before, .passos__trilho-cheio { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; border-radius: 2px; }
.passos__trilho::before { background: repeating-linear-gradient(to bottom, #B9CDE4 0 6px, transparent 6px 12px); }
.passos__trilho-cheio {
  background: linear-gradient(to bottom, var(--azul), var(--celeste));
  transform: scaleY(var(--p));
  transform-origin: top;
}
.passos__marcador {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(5, 76, 169, .3);
  color: var(--azul);
  transform: translate(-50%, -50%) translateY(calc(var(--p) * var(--comprimento, 0px)));
  will-change: transform;
}
.passos__marcador .ico { width: 22px; height: 22px; transform: rotate(calc(var(--p) * 540deg)); }
.passos__rota--viva .passo__no {
  background: #fff;
  color: var(--azul);
  box-shadow: 0 0 0 6px var(--gelo), inset 0 0 0 2px #B9CDE4;
}
/* as transições só ligam depois do primeiro quadro, para não animar nada à toa no carregamento */
.passos__rota--pronta .passo__no { transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.passos__rota--viva .passo__no::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--celeste);
  border-radius: 50%;
  opacity: 0;
}
.passos__rota--viva .passo :is(.passo__titulo, p) { transform: translateX(10px); transition: color .5s var(--ease), transform .7s var(--ease); }
.passos__rota--viva .passo:not(.is-ativo) .passo__titulo { color: var(--texto-suave); }
.passos__rota--viva .passo p { transition-delay: .08s; }
.passos__rota--viva .passo.is-ativo .passo__no { background: var(--azul); color: #fff; box-shadow: 0 0 0 6px var(--gelo), 0 10px 24px rgba(5, 76, 169, .35); transform: scale(1.06); }
.passos__rota--viva .passo.is-ativo .passo__no::after { animation: passo-pulso 1s var(--ease); }
.passos__rota--viva .passo.is-ativo :is(.passo__titulo, p) { opacity: 1; transform: none; }
/* o último passo é a chegada: acende em dourado */
.passos__rota--viva .passo:last-child.is-ativo .passo__no { background: var(--ouro); color: var(--noite); box-shadow: 0 0 0 6px var(--gelo), 0 10px 28px rgba(245, 184, 0, .45); }
.passos__rota--viva .passo:last-child.is-ativo .passo__no::after { border-color: var(--ouro); }
@keyframes passo-pulso {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.9); }
}
@media (min-width: 900px) {
  .passos__trilho::before, .passos__trilho-cheio { left: 0; top: -1px; width: 100%; height: 2px; }
  .passos__trilho::before { background: repeating-linear-gradient(to right, #B9CDE4 0 6px, transparent 6px 12px); }
  .passos__trilho-cheio { background: linear-gradient(to right, var(--azul), var(--celeste)); transform: scaleX(var(--p)); transform-origin: left; }
  .passos__marcador { transform: translate(-50%, -50%) translateX(calc(var(--p) * var(--comprimento, 0px))); }
  .passos__rota--viva .passo :is(.passo__titulo, p) { transform: translateY(10px); }
}

/* selo: ícone em círculo das listas (vantagens, valores). Em lista .acende, com JS,
   cada selo acende quando chega na altura de leitura, como os passos acima */
.selo {
  --selo-anel: var(--gelo);
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 6px var(--selo-anel);
  color: #fff;
}
.selo .ico { width: 24px; height: 24px; }
.acende--viva .selo { background: #fff; color: var(--azul); box-shadow: 0 0 0 6px var(--selo-anel), inset 0 0 0 2px #B9CDE4; }
.acende--viva .selo .ico { transform: scale(.82) rotate(-12deg); }
.acende--pronta .selo { transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.acende--pronta .selo .ico { transition: transform .6s var(--ease); }
.acende--viva .selo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--celeste);
  border-radius: 50%;
  opacity: 0;
}
.acende--viva .is-ativo .selo { background: var(--azul); color: #fff; box-shadow: 0 0 0 6px var(--selo-anel), 0 10px 24px rgba(5, 76, 169, .35); transform: scale(1.06); }
.acende--viva .is-ativo .selo .ico { transform: none; }
.acende--viva .is-ativo .selo::after { animation: passo-pulso 1s var(--ease); }
.acende--viva > li :is(h3, strong) { transition: color .5s var(--ease); }
.acende--viva > li:not(.is-ativo) :is(h3, strong) { color: var(--texto-suave); }

/* ---------- consórcio x financiamento ---------- */
.comparacao { padding-block: var(--secao-y); }
.tabela { display: grid; }
.tabela__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
/* celular: os nomes das colunas aparecem uma vez e ficam presos no topo enquanto a tabela rola */
.tabela__linha--cabeca {
  position: sticky;
  top: var(--topo-h);
  z-index: 2;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 1px 0 var(--borda);
}
.tabela__vazio { display: none; }
.tabela__col {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--gelo);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: .9375rem;
  line-height: 1.15;
  color: var(--noite);
}
.tabela__col small { display: block; margin-top: 2px; font-family: var(--f-texto); font-weight: 500; font-size: .75rem; color: var(--texto-suave); }
.tabela__col .ico { width: 22px; height: 22px; color: var(--ouro); }
.tabela__col--consorcio { background: var(--azul); color: #fff; }
.tabela__col--consorcio small { color: rgba(255, 255, 255, .78); }
.tabela__criterio {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 20px 0 10px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--noite);
}
.tabela__icone { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--gelo); color: var(--azul); }
.tabela__icone .ico { width: 20px; height: 20px; }
.tabela__celula {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--gelo);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--texto);
}
.tabela__celula, .tabela__criterio { text-wrap: pretty; }
.tabela__celula > .ico { width: 20px; height: 20px; margin-top: 1px; }
.tabela__celula--consorcio { background: var(--azul); color: #fff; font-weight: 500; }
.tabela__celula--consorcio > .ico { color: var(--ouro); }
.tabela__traco { position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--borda-campo); }
.tabela__traco::after { content: ''; position: absolute; inset: 50% 5px auto; height: 1.5px; margin-top: -.75px; background: var(--borda-campo); }
/* telas bem estreitas: o ícone sobe para a palavra longa caber na célula */
@media (max-width: 374px) {
  .tabela__celula { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 10px; }
  .tabela__col { padding: 8px 10px; }
  .tabela__col .ico { display: none; }
}
.comparacao__rodape { display: grid; gap: 20px; margin-top: 28px; }
.comparacao__rodape .nota-rodape { margin: 0; }
.nota-rodape { margin-top: 16px; font-size: .875rem; color: var(--texto-suave); }

/* tela larga: a coluna do consórcio vira um cartão azul contínuo, mais alto que a tabela */
@media (min-width: 768px) {
  .tabela {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    padding-block: 18px;
  }
  .tabela::before {
    content: '';
    grid-column: 2;
    grid-row: 1 / -1;
    z-index: -1;
    margin-block: -18px;
    border-radius: 24px;
    background:
      radial-gradient(90% 50% at 100% 0%, rgba(47, 155, 214, .35), transparent 70%),
      var(--azul);
    box-shadow: 0 2px 4px rgba(5, 76, 169, .12), 0 24px 56px rgba(5, 76, 169, .28);
  }
  .tabela__linha { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 0; }
  /* posições fixas: o cartão azul ocupa a coluna 2 e não pode empurrar as linhas */
  .tabela__linha:nth-child(1) { grid-row: 1; }
  .tabela__linha:nth-child(2) { grid-row: 2; }
  .tabela__linha:nth-child(3) { grid-row: 3; }
  .tabela__linha:nth-child(4) { grid-row: 4; }
  .tabela__linha:nth-child(5) { grid-row: 5; }
  .tabela__linha--cabeca { position: static; padding: 0; background: none; box-shadow: none; }
  .tabela__vazio { display: block; }
  .tabela__col { min-height: 0; padding: 18px 28px 22px; border-radius: 0; background: none; font-size: 1.25rem; }
  .tabela__col small { font-size: .8125rem; }
  .tabela__col .ico { width: 28px; height: 28px; }
  .tabela__col--consorcio { background: none; }
  .tabela__criterio { grid-column: auto; padding: 22px 24px 22px 0; border-top: 1px solid var(--borda); }
  .tabela__celula { padding: 22px 28px; border-radius: 0; border-top: 1px solid var(--borda); background: none; font-size: 1rem; }
  .tabela__celula--consorcio { border-top-color: rgba(255, 255, 255, .16); background: none; }
  .comparacao__rodape { grid-auto-flow: column; justify-content: space-between; align-items: center; margin-top: 40px; }
}
@media (min-width: 1024px) {
  .comparacao .moldura { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  .comparacao .cabeca { position: sticky; top: calc(var(--topo-h) + 40px); margin-bottom: 0; }
  .comparacao__rodape { grid-column: 2; }
  .tabela { margin-top: 18px; }
}

/* ---------- vantagens ---------- */
.vantagens { padding-bottom: var(--secao-y); background: var(--gelo); }
/* cena da fachada. Sem JS ou com movimento reduzido: foto 16:9 e texto embaixo, parados */
.cena { padding-top: var(--secao-y); }
.cena__palco { display: grid; gap: 28px; width: min(100% - var(--gutter) * 2, var(--moldura) - var(--gutter) * 2); margin-inline: auto; }
.cena__quadro { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--raio-card); background: #C9D3DE; }
.cena__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.cena__veu, .cena__cursor { display: none; }
.cena__texto { display: grid; gap: 14px; max-width: 46rem; }
.cena__local { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--texto-suave); }
.cena__local .ico { width: 1rem; height: 1rem; color: var(--azul); }
.vantagens__corpo { padding-top: 56px; }
.vantagens__lista { display: grid; gap: 24px; }
.vantagem { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start; padding-top: 18px; border-top: 1px solid #C7D6E6; }
.vantagem .selo { grid-row: span 2; }
.vantagem h3 { align-self: end; font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--noite); }
.vantagem p { font-size: .9375rem; line-height: 1.55; color: var(--texto-suave); }
@media (min-width: 640px) {
  .vantagens__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .vantagem { grid-template-columns: minmax(0, 1fr); }
  .vantagem .selo { grid-row: auto; margin-bottom: 12px; }
}
@media (min-width: 1024px) {
  .vantagens__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
}

/* cena viva: o palco fica preso na tela enquanto a rolagem abre a foto.
   O JS escreve --s (escala do quadro), --zoom (foto por dentro) e --veu; tudo é transform/opacity */
.cena--viva { height: 260vh; padding-top: 0; }
.cena--viva .cena__palco {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* palco azul-noite com o brilho marinho da abertura: a foto acende no escuro */
  background: radial-gradient(70% 55% at 50% 45%, var(--marinho) 0%, rgba(19, 51, 107, 0) 70%), var(--noite);
}
/* celular: o quadro cobre o palco; a janela é um clip-path que o JS abre, e a foto anda/escala por transform */
.cena--viva .cena__quadro {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--noite);
}
.cena--viva .cena__foto { position: absolute; left: 0; top: 0; max-width: none; object-fit: cover; transform-origin: 0 0; will-change: transform; }
.cena--viva .cena__veu {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--noite) 0%, var(--noite) 40%, rgba(13, 23, 34, .72) 48%, rgba(13, 23, 34, .25) 56%, rgba(13, 23, 34, 0) 63%);
  opacity: var(--veu, 0);
}
.cena--viva .cena__texto {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(32px + env(safe-area-inset-bottom));
  gap: 12px;
}
.cena--viva .cena__titulo { color: #fff; }
.cena--viva .cena__lead { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.cena--viva .cena__local, .cena--viva .cena__local .ico { color: var(--celeste-claro); }
/* o texto só entra quando a foto termina de abrir */
.cena--viva .cena__titulo, .cena--viva .cena__local { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.cena--viva.cena--texto .cena__titulo { opacity: 1; transform: none; }
.cena--viva.cena--texto .cena__local { opacity: 1; transform: none; transition-delay: .9s; }
.cena__palavra { display: inline-block; }
.cena--viva .cena__palavra { opacity: 0; transform: translateY(.55em); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.cena--viva.cena--texto .cena__palavra { opacity: 1; transform: none; transition-delay: calc(var(--i) * 16ms + 1.9s); }
.cena--viva .cena__palavra-titulo { white-space: nowrap; }
.cena--viva .cena__letra { opacity: 0; }
.cena--viva .cena__letra.is-acesa { opacity: 1; }
/* cursor sem largura própria: anda entre as letras sem empurrar nada */
.cena--viva .cena__cursor {
  display: inline-block;
  width: .07em;
  height: .92em;
  margin: 0 -.07em 0 0;
  vertical-align: -.08em;
  background: var(--celeste);
  animation: cena-cursor 1s steps(1) infinite;
}
.cena--viva.cena--digitado .cena__cursor { animation: none; opacity: 0; transition: opacity .4s; }
/* fora da tela o cursor não pisca: cada animação ligada custa trabalho em todo quadro da rolagem */
.cena--viva:not(.cena--na-tela) .cena__cursor { animation-play-state: paused; }
@keyframes cena-cursor { 50% { opacity: 0; } }
@media (min-width: 1024px) {
  /* no desktop a foto cobre a tela inteira e o texto entra por cima, à esquerda */
  .cena--viva { height: 250vh; }
  .cena--viva .cena__quadro { inset: auto; left: -3vw; top: -3vh; width: 106vw; height: 106vh; border-radius: 44px; background: #C9D3DE; transform: scale(var(--s, .4)); will-change: transform; }
  .cena--viva .cena__foto { position: static; width: 100%; height: 100%; object-position: 50% 45%; transform: scale(var(--zoom, 1.28)); transform-origin: 50% 50%; }
  .cena--viva .cena__veu {
    background: linear-gradient(90deg, rgba(13, 23, 34, .94) 0%, rgba(13, 23, 34, .9) 45%, rgba(13, 23, 34, .4) 60%, rgba(13, 23, 34, 0) 74%);
    opacity: var(--veu, 0);
  }
  .cena--viva .cena__texto {
    left: max(var(--gutter), (100vw - var(--moldura)) / 2 + var(--gutter));
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(34rem, 42vw);
    margin-top: calc(var(--topo-h) / 2);
    transform: translateY(-50%);
  }
  .cena--viva .cena__lead { font-size: 1.0625rem; color: rgba(255, 255, 255, .84); }
}

/* ---------- liderança: Railson Pimenta ---------- */
.lider { padding-block: var(--secao-y); overflow: hidden; background: var(--gelo); }
.lider__grade { display: grid; gap: 28px; }
.lider__cabeca { display: grid; gap: 8px; }
.lider__nome { font-weight: 900; font-size: clamp(2.375rem, 1.6rem + 3.4vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.lider__cargo { font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; color: var(--azul); }

.lider__painel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  padding: 32px 16px;
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--marinho), transparent 60%),
    var(--noite);
  box-shadow: 0 2px 4px rgba(13, 23, 34, .08), 0 24px 56px rgba(13, 23, 34, .18);
}
.lider__mostrador { position: relative; width: min(100%, 400px); aspect-ratio: 1; }
.lider__giro { position: absolute; inset: 0; }
.lider__bussola { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: rgba(201, 211, 222, .38); }
.lider__anel { stroke: var(--celeste); }
.lider__pontos text { font-family: var(--f-num); font-weight: 600; fill: var(--prata); }
.lider__pontos text:first-child { fill: var(--ouro); }
.lider__recorte {
  position: absolute;
  inset: 10.5%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--prata);
  box-shadow: 0 0 0 6px var(--noite);
}
/* railson-terno.jpg já vem recortada em quadrado a partir do retrato oficial (imagens/railson-terno-original.png),
   com o rosto no centro e ombros embaixo; o círculo só preenche */
.lider__foto { width: 100%; height: 100%; object-fit: cover; }

.lider__corpo { display: grid; gap: 28px; }
.lider__valores { display: grid; gap: 12px; }
.lider__valores-titulo { font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; color: var(--noite); }
.lider__valores ul { border-top: 1px solid var(--borda); }
.lider__valores li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borda);
}
.lider__valores .selo { --selo-anel: #fff; grid-row: span 2; width: 44px; height: 44px; }
.lider__valores .selo .ico { width: 22px; height: 22px; }
.lider__valores strong { align-self: end; }
@media (min-width: 640px) {
  .lider__valores li { grid-template-columns: 44px 9.5rem minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .lider__valores .selo { grid-row: auto; }
  .lider__valores strong { align-self: center; }
}
.lider__valores strong { font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; color: var(--noite); }
.lider__valores span:not(.selo) { color: var(--texto-suave); }
.lider__acoes { display: grid; gap: 4px; }
.lider__acoes .link-acao { justify-self: center; min-height: 44px; }
.lider__frase {
  margin-top: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--borda);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--noite);
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .lider__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
}
@media (min-width: 1024px) {
  .lider__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "retrato cabeca" "retrato corpo" "frase frase";
    grid-template-rows: auto 1fr auto;
    column-gap: 80px;
    row-gap: 28px;
  }
  .lider__cabeca { grid-area: cabeca; align-self: end; padding-top: 24px; }
  .lider__retrato { grid-area: retrato; }
  .lider__corpo { grid-area: corpo; align-self: start; }
  .lider__frase { grid-area: frase; margin-top: 40px; padding-top: 48px; }
  .lider__painel { padding: 40px 28px; }
  .lider__mostrador { width: min(100%, 460px); }
}
@media (prefers-reduced-motion: no-preference) {
  /* a bússola encontra o norte quando a foto entra na tela */
  /* o giro fica numa div em volta do SVG: girando o próprio SVG, as letras N/L/S/O refaziam o layout a cada quadro */
  html.js .lider__retrato.revela .lider__giro { transform: rotate(-38deg); transition: transform 2s var(--ease) .15s; }
  html.js .lider__retrato.revela.is-visivel .lider__giro { transform: none; }
}

/* ---------- avaliações ---------- */
/* ---------- novidades (página /novidades/, escrita pelo gerador) ----------
   O rosa vale só para o Outubro Rosa (campanha sazonal, regra do briefing); a próxima novidade usa o azul da marca. */
.novidades__lista { display: grid; gap: 20px; }
.novidade {
  --tom: var(--azul);
  --tom-fundo: var(--gelo);
  display: grid;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: #fff;
  box-shadow: var(--sombra-card);
}
.novidade--rosa { --tom: #C2255C; --tom-fundo: #FDEEF3; }
.novidade__arte {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  width: 100%;
  background: radial-gradient(circle at 50% 55%, #fff 0, var(--tom-fundo) 70%);
}
.novidade__aneis { position: absolute; width: 150%; max-width: 520px; aspect-ratio: 1; fill: none; stroke: var(--tom); stroke-width: 1; opacity: .22; }
.novidade__fita { position: relative; height: 72%; fill: none; stroke: var(--tom); stroke-width: 15; stroke-linejoin: round; }
.novidade__fita-borda { stroke: var(--tom-fundo); stroke-width: 23; }
.novidade__corpo { display: grid; align-content: center; gap: 14px; padding: 24px 20px 26px; }
.novidade__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); line-height: 1.2; letter-spacing: -.01em; color: var(--noite); text-wrap: balance; }
.novidade__corpo p { line-height: 1.65; color: var(--texto); max-width: 60ch; }
.novidade__corpo p.novidade__data { font-size: .875rem; font-weight: 600; color: var(--tom); }
.novidade__simbolo { position: relative; width: 30%; max-width: 120px; aspect-ratio: 1; color: var(--tom); }

/* a página: o cartão em destaque sobe por cima do fim do topo escuro, num palco gelo */
.pg-hero.pg-hero--novidades { padding-bottom: 112px; }
.novidades-pg { padding-bottom: var(--secao-y); background: var(--gelo); }
.novidades-pg .moldura { position: relative; z-index: 1; margin-top: -64px; }
.novidade--destaque { box-shadow: 0 2px 4px rgba(13, 23, 34, .06), 0 24px 56px rgba(13, 23, 34, .14); }
.novidade--destaque .novidade__arte { aspect-ratio: 4 / 3; max-height: 300px; }
.novidade--destaque .novidade__corpo { gap: 16px; padding: 26px 22px 30px; }
.novidade--destaque .novidade__titulo { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); }
.novidade--destaque .novidade__corpo p { font-size: 1.0625rem; }
.novidades-vazio { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; border: 1px solid var(--borda); border-radius: var(--raio-card); background: #fff; text-align: center; box-shadow: var(--sombra-card); }
.novidades-vazio[hidden] { display: none; }
.novidades-vazio .ico { width: 40px; height: 40px; color: var(--azul); }
.novidades-vazio__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.375rem; color: var(--noite); }
.novidades-vazio p { max-width: 36ch; line-height: 1.6; color: var(--texto-suave); }
.pg-novidades .pg-chamada { background: var(--gelo); }
@media (min-width: 768px) {
  .novidade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .novidade__arte { aspect-ratio: auto; max-height: none; min-height: 320px; height: 100%; }
  .novidade__fita { height: auto; width: 34%; max-width: 150px; }
  .novidade__corpo { padding: 40px 44px; }
  .pg-hero.pg-hero--novidades { padding-bottom: 152px; }
  .novidades-pg .moldura { margin-top: -88px; }
  .novidade--destaque .novidade__arte { aspect-ratio: auto; max-height: none; min-height: 460px; }
  .novidade--destaque .novidade__fita { max-width: 190px; }
  .novidade--destaque .novidade__corpo { gap: 18px; padding: 56px 64px; }
}
/* a fita se desenha quando o cartão entra na tela */
@media (prefers-reduced-motion: no-preference) {
  html.js .novidade.revela .novidade__fita path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .25s; }
  html.js .novidade.revela .novidade__fita path:nth-child(n+2) { transition-duration: .6s; transition-delay: 1.1s; }
  html.js .novidade.revela.is-visivel .novidade__fita path { stroke-dashoffset: 0; }
  html.js .novidade.revela .novidade__aneis { transform: rotate(-30deg); transition: transform 2s var(--ease) .15s; }
  html.js .novidade.revela.is-visivel .novidade__aneis { transform: none; }
}

/* novidades do Instagram (21/10/2026, pedido do Dr. Railson): a arte é o palco azul-noite com os anéis da bússola.
   O reel aparece como as capas dos Contemplados (o play fica embaixo, para não cobrir o rosto do cliente);
   o post mostra as 3 fotos na ordem do carrossel, a primeira grande. A capa inteira leva ao Instagram */
.novidade .novidade__ig {
  --tom: var(--celeste-claro);
  aspect-ratio: auto;
  max-height: none;
  padding: 40px 16px;
  background: var(--noite);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.novidade__ig .novidade__aneis { opacity: .3; }
.novidade__capa,
.novidade__mosaico { position: relative; transition: transform .5s var(--ease); }

.novidade__capa {
  display: block;
  width: min(100%, 200px);
  overflow: hidden;
  border-radius: var(--raio-card);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .25), 0 28px 56px rgba(0, 0, 0, .45);
}
.novidade__capa img { display: block; width: 100%; height: auto; }
.novidade__play {
  position: absolute;
  top: 85%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13, 23, 34, .46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ease), background-color .3s;
}
.novidade__play svg { display: block; width: 100%; height: 100%; overflow: visible; }
.novidade__anel { fill: none; stroke: var(--celeste-claro); stroke-width: 2; stroke-dasharray: 1.6 4.68; transform-box: fill-box; transform-origin: center; transition: transform .8s var(--ease); }
.novidade__play path { fill: var(--ouro); }

.novidade__mosaico { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; width: min(100%, 320px); }
.novidade__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .25), 0 20px 40px rgba(0, 0, 0, .4);
}
.novidade__foto:first-child { grid-row: span 2; height: 100%; aspect-ratio: auto; }

.novidade__acao { padding-top: 6px; }
.novidade__acao .btn { width: 100%; }

@media (min-width: 768px) {
  .novidade .novidade__ig { padding: 48px 32px; }
  .novidade__capa { width: min(100%, 248px); }
  .novidade__mosaico { width: min(100%, 340px); }
  .novidade__acao .btn { width: auto; }
}
@media (hover: hover) {
  .novidade--ig:hover :is(.novidade__capa, .novidade__mosaico) { transform: translateY(-4px); }
  .novidade--ig:hover .novidade__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(5, 76, 169, .72); }
  .novidade--ig:hover .novidade__anel { transform: rotate(45deg); }
}

.avaliacoes { overflow: hidden; padding-block: var(--secao-y); background: var(--noite); color: #fff; }
.avaliacoes .titulo-secao { color: #fff; }
.avaliacoes .lead { margin-top: 12px; color: rgba(255, 255, 255, .76); }
.avaliacoes__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.avaliacoes__carrossel { min-width: 0; }
/* painel com a nota, no jeito do resumo do Google Maps */
.avaliacoes__painel {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 24px 20px;
  border-radius: 20px;
  background: #fff;
  color: #1F1F1F;
  box-shadow: 0 24px 60px rgba(5, 10, 18, .35);
}
.avaliacoes__marca { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 500; color: #5F6368; }
.avaliacoes__marca img { width: 74px; height: 24px; }
.avaliacoes__resumo { display: flex; align-items: center; gap: 16px; }
.avaliacoes__nota { font-family: var(--f-texto); font-weight: 500; font-size: 3.5rem; line-height: 1; letter-spacing: -.02em; color: #1F1F1F; }
.avaliacoes__fonte { margin-top: 4px; font-size: .875rem; color: #5F6368; }
.avaliacoes__local { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid #E8EAED; font-size: .875rem; color: #5F6368; }
.avaliacoes__local img { width: 36px; height: 36px; flex: none; }
.avaliacoes__local-nome { font-weight: 600; font-size: .9375rem; color: #1F1F1F; }
.avaliacoes__painel .btn .ico { width: 1.1rem; height: 1.1rem; }
.estrelas {
  display: inline-flex;
  gap: 2px;
  color: #FBBC04;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--nota) / 5 * 100%), rgba(0, 0, 0, .3) 0);
  mask-image: linear-gradient(90deg, #000 calc(var(--nota) / 5 * 100%), rgba(0, 0, 0, .3) 0);
}
.estrelas .ico { width: 24px; height: 24px; }
.estrelas--card .ico { width: 16px; height: 16px; }
/* cartões das avaliações: no celular, faixa com deslize; no desktop, mural em duas colunas */
.avaliacoes__lista {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.avaliacoes__lista::-webkit-scrollbar { display: none; }
.avaliacoes__lista[hidden] { display: none; }
.depoimento {
  flex: 0 0 min(84%, 320px);
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  color: #1F1F1F;
  box-shadow: 0 12px 32px rgba(5, 10, 18, .28);
}
.depoimento__topo { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; }
.depoimento__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 500;
  font-size: 1.125rem;
  color: #fff;
}
.depoimento__nome { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.depoimento__perfil { font-size: .8125rem; color: #5F6368; }
.depoimento__google { width: 20px; height: 20px; align-self: start; margin-top: 2px; }
.depoimento__meta { display: flex; align-items: center; gap: 8px; }
.depoimento__data { font-size: .8125rem; color: #5F6368; }
.depoimento__texto { font-size: .9375rem; line-height: 1.6; color: #1F1F1F; white-space: pre-line; overflow-wrap: anywhere; }
/* durante a transição própria o encaixe fica desligado, para não brigar com a animação */
.avaliacoes__lista.is-deslizando { scroll-snap-type: none; }
.avaliacoes__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
/* setas só no desktop: no celular a pessoa desliza com o dedo */
.avaliacoes__seta { display: none; }
@media (min-width: 1024px) {
  .avaliacoes__seta {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  }
  .avaliacoes__seta .ico { width: 20px; height: 20px; }
  .avaliacoes__seta:hover { border-color: var(--celeste); background: var(--celeste); }
  .avaliacoes__seta:active { transform: scale(.92); }
}
.avaliacoes__pontos { display: flex; justify-content: center; gap: 8px; }
.avaliacoes__pontos span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: width .25s var(--ease), background-color .25s var(--ease); }
.avaliacoes__pontos span.is-ativo { width: 22px; border-radius: 4px; background: var(--celeste-claro); }
@media (min-width: 640px) {
  .avaliacoes__painel { padding: 28px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .avaliacoes__painel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "marca local" "resumo botao"; gap: 20px 40px; align-items: center; }
  .avaliacoes__marca { grid-area: marca; }
  .avaliacoes__resumo { grid-area: resumo; }
  .avaliacoes__local { grid-area: local; padding-top: 0; border-top: 0; }
  .avaliacoes__painel .btn { grid-area: botao; }
}
@media (min-width: 1024px) {
  /* painel e cartões correm juntos num mural de três colunas */
  /* desktop: painel do Google à esquerda e carrossel com dois cartões à vista à direita */
  .avaliacoes__grade { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 40px; }
  .avaliacoes__lista { margin: 0; padding: 8px 0 12px; gap: 16px; scroll-padding-inline: 0; }
  .depoimento { flex: 0 0 calc((100% - 16px) / 2); padding: 24px; box-shadow: 0 12px 32px rgba(5, 10, 18, .22); }
  .avaliacoes__nav { justify-content: flex-start; margin-top: 16px; }
}

/* ---------- dúvidas ---------- */
.duvidas { padding-block: var(--secao-y); }
.duvidas__grade { display: grid; gap: 28px; }
.duvidas__cabeca { display: grid; gap: 12px; }
.duvidas__lista { display: grid; gap: 10px; }
.duvidas details {
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: #fff;
  transition: border-color .2s, background-color .2s;
}
.duvidas details[open] { border-color: rgba(5, 76, 169, .28); background: var(--gelo); }
.duvidas summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  list-style: none;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--noite);
  cursor: pointer;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary:focus-visible { outline-offset: 2px; border-radius: var(--raio-card); }
.duvida__pergunta { flex: 1; }
.duvida__icone {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E1ECF8;
  box-shadow: inset 0 0 0 1px rgba(5, 76, 169, .22);
  color: var(--azul);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.duvida__icone::before, .duvida__icone::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.duvida__icone::after { transform: rotate(90deg); }
.duvidas details[open] .duvida__icone { background: var(--azul); box-shadow: none; color: #fff; }
.duvidas details:not([open]) summary:active { background: var(--gelo); border-radius: var(--raio-card); }
.duvidas details:not([open]) summary:active .duvida__icone { background: var(--azul); color: #fff; }
.duvidas details[open] .duvida__icone::after { transform: rotate(0deg); }
.duvidas details p { max-width: 62ch; padding: 0 16px 18px; color: var(--texto-suave); }
.duvidas details p a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }
.duvidas__ajuda {
  order: 1;
  display: grid;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--raio-card);
  background: var(--noite);
  color: rgba(255, 255, 255, .82);
}
.duvidas__ajuda-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; color: #fff; }
.duvidas__ajuda-acoes { display: grid; gap: 4px; margin-top: 12px; }
.duvidas__ajuda .link-acao { justify-self: center; min-height: 44px; color: var(--celeste-claro); }
@media (hover: hover) {
  .duvidas details:not([open]):hover { border-color: rgba(5, 76, 169, .28); }
  .duvidas details:not([open]):hover .duvida__icone { background: var(--azul); box-shadow: none; color: #fff; }
}
@media (min-width: 768px) {
  .duvidas summary { gap: 16px; padding: 16px 20px; }
  .duvidas details p { padding: 0 68px 22px 20px; }
  .duvidas__ajuda-acoes { grid-auto-flow: column; justify-content: start; align-items: center; gap: 20px; }
}
@media (min-width: 1024px) {
  .duvidas__grade {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    grid-template-areas: "cabeca lista" "ajuda lista";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 32px;
  }
  .duvidas__cabeca { grid-area: cabeca; }
  .duvidas__lista { grid-area: lista; align-self: start; }
  .duvidas__ajuda { grid-area: ajuda; align-self: start; position: sticky; top: calc(var(--topo-h) + 32px); padding: 28px; }
  .duvidas__ajuda-acoes { grid-auto-flow: row; justify-items: start; gap: 4px; }
  .duvidas__ajuda .link-acao { justify-self: start; }
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .duvidas details { interpolate-size: allow-keywords; }
    .duvidas details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
    }
    .duvidas details[open]::details-content { block-size: auto; }
  }
}

/* ---------- trabalhe com a gente ---------- */
.trabalhe { overflow: hidden; padding-block: var(--secao-y); background: var(--azul); color: #fff; }
.trabalhe .titulo-secao { color: #fff; }
.trabalhe .lead { margin-block: 14px 28px; color: rgba(255, 255, 255, .88); }
.trabalhe__grade { display: grid; gap: 40px; align-items: center; }
.trabalhe .btn { width: 100%; }
/* foto grande à esquerda e o cartão sobrepondo o canto de baixo (a foto original tem só 202 × 360) */
.trabalhe__fotos { position: relative; max-width: 400px; padding-bottom: 24px; }
.trabalhe__foto { display: block; width: 52%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--raio-card); box-shadow: 0 16px 40px rgba(5, 10, 18, .3); }
.trabalhe__cartao {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 62%;
  display: grid;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--raio-card);
  background: var(--noite);
  box-shadow: 0 16px 40px rgba(5, 10, 18, .3);
}
.trabalhe__cartao-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.0625rem; line-height: 1.25; }
.trabalhe__cartao ul { display: grid; gap: 12px; }
.trabalhe__cartao li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: .9375rem; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.trabalhe__cartao .ico { width: 20px; height: 20px; color: var(--celeste-claro); }
@media (min-width: 640px) {
  .trabalhe .btn { width: auto; }
}
@media (min-width: 1024px) {
  .trabalhe__grade { grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; }
  .trabalhe__cartao { padding: 24px 22px; }
}

/* ---------- contato ---------- */
.contato { padding-block: var(--secao-y); background: var(--noite); color: #fff; }
.contato .titulo-secao { color: #fff; }
.contato .lead { margin-top: 14px; color: rgba(255, 255, 255, .78); }
.contato__grade { display: grid; gap: 40px; }
.contato__lista { display: grid; gap: 12px; margin-block: 32px; }
.contato__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--raio-card);
  background: rgba(255, 255, 255, .04);
}
.contato__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-pilula);
  background: rgba(47, 155, 214, .14);
  color: var(--celeste-claro);
}
.contato__icone .ico { width: 20px; height: 20px; }
.contato__rotulo {
  font-weight: 600;
  font-size: .875rem;
  color: var(--prata);
}
.contato__corpo { display: grid; min-width: 0; }
.contato__valor { margin-top: 4px; line-height: 1.5; color: #fff; overflow-wrap: anywhere; }
/* cartões que levam para fora: fundo azulado, seta e frase de ação deixam claro que é para tocar */
.contato__lista > li { display: grid; }
.contato__item--link {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  border-color: rgba(124, 198, 238, .32);
  background: rgba(47, 155, 214, .1);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease);
}
.contato__acao {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--celeste-claro);
}
.contato__seta {
  display: grid;
  place-items: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-pilula);
  background: var(--celeste);
  color: #fff;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.contato__seta .ico { width: 18px; height: 18px; transform: rotate(-45deg); }
.contato__item--link:active { transform: scale(.98); background: rgba(47, 155, 214, .2); }
@media (hover: hover) {
  .contato__item--link:hover { border-color: var(--celeste); background: rgba(47, 155, 214, .18); }
  .contato__item--link:hover .contato__seta { transform: translateX(3px); background: var(--azul); }
  .contato__item--link:hover .contato__acao { text-decoration: underline; text-underline-offset: 3px; }
}
.contato__acoes { display: grid; gap: 12px; }
.contato__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; border-radius: var(--raio-card); }
@media (min-width: 640px) {
  .contato__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contato__acoes { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .contato__grade { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: center; }
  .contato__foto img { aspect-ratio: 9 / 16; object-position: 50% 50%; }
}

/* ---------- rodapé ---------- */
.rodape {
  padding: 56px 0 calc(24px + env(safe-area-inset-bottom));
  background: var(--noite-900);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .78);
}
.rodape__topo { display: grid; gap: 40px; padding-bottom: 40px; }
.rodape__marca-linha { display: flex; align-items: center; gap: 14px; }
.rodape__marca img { width: 56px; height: 56px; }
.rodape__nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.125rem; color: #fff; }
.rodape__assinatura { color: var(--celeste-claro); }
.rodape__resumo { max-width: 34ch; margin-top: 16px; line-height: 1.6; }
.rodape__redes { display: flex; gap: 10px; margin-top: 20px; }
.rodape__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--raio-pilula);
  color: #fff;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.rodape__redes .ico { width: 1.25rem; height: 1.25rem; }
.rodape__titulo {
  margin-bottom: 6px;
  font-family: var(--f-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.rodape__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 16px; }
.rodape__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; line-height: 1.35; text-decoration: none; }
.rodape__lista { display: grid; gap: 4px; }
.rodape__lista li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.rodape__lista .ico { width: 20px; height: 20px; margin-top: 12px; color: var(--celeste-claro); }
.rodape__lista a, .rodape__lista span { display: block; min-height: 44px; padding-block: 10px; line-height: 1.5; }
.rodape__lista a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rodape__nav a:hover, .rodape__lista a:hover, .rodape__topo-link:hover { color: #fff; text-decoration-color: currentColor; }
.rodape__legal {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--raio-card);
  background: rgba(255, 255, 255, .03);
  font-size: .8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
}
.rodape__legal .ico { width: 20px; height: 20px; color: var(--celeste-claro); }
.rodape__legal p { max-width: 110ch; }
.rodape__base {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8125rem;
}
.rodape__creditos { display: grid; gap: 4px; }
.rodape__topo-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--raio-pilula);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.rodape__topo-link .ico { width: 1rem; height: 1rem; transform: rotate(-90deg); }
.assinatura { font-size: .75rem; color: rgba(255, 255, 255, .72); }
.assinatura span { color: rgba(255, 255, 255, .55); }
@media (hover: hover) {
  .rodape__redes a:hover { border-color: var(--celeste); background: var(--celeste); }
  .rodape__topo-link:hover { border-color: rgba(255, 255, 255, .4); }
}
@media (min-width: 768px) {
  .rodape { padding-top: 72px; }
  .rodape__topo { padding-bottom: 48px; }
  .rodape__legal { padding: 20px 24px; gap: 16px; }
  .rodape__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .rodape__creditos { display: flex; align-items: center; gap: 24px; }
  .rodape__topo-link { min-height: 44px; padding: 0 16px; }
}

/* ---------- botão flutuante (celular e desktop) ---------- */
.flutuante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px 0 14px;
  border-radius: var(--raio-pilula);
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--azul);
  box-shadow: 0 10px 30px rgba(5, 10, 18, .35);
  font-family: var(--f-titulo);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
}
.flutuante .ico { width: 24px; height: 24px; }
.flutuante.is-visivel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease); }
.flutuante:active { transform: scale(.94); }
.flutuante.sobre-azul { background: var(--noite); }
/* a bussolinha gira devagar enquanto o botão está à vista */
@media (prefers-reduced-motion: no-preference) {
  .flutuante .ico { animation: flutuante-giro 6s linear infinite; animation-play-state: paused; will-change: transform; }
  .flutuante.is-visivel .ico { animation-play-state: running; }
  @keyframes flutuante-giro { to { transform: rotate(360deg); } }
}
@media (min-width: 1024px) {
  .flutuante { right: 28px; bottom: 28px; min-height: 54px; padding: 0 24px 0 18px; font-size: 1rem; transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s, background-color .2s; }
  .flutuante:hover { background: var(--azul-700); }
}

/* ---------- clientes contemplados ----------
   cada vídeo no próprio formato (9:16 os de celular, 16:9 o institucional), as fotos empilhadas como apoio;
   no celular a fileira desliza com o dedo e mostra a ponta do próximo cartão, no desktop cabe inteira */
.contemplados { overflow: hidden; padding-block: var(--secao-y); background: #fff; }
.contemplados__lista {
  --alto: clamp(380px, 112vw, 500px);
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 8px var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.contemplados__lista::-webkit-scrollbar { display: none; }
.contemplado { flex: none; height: var(--alto); scroll-snap-align: start; }
.contemplado--video { aspect-ratio: 9 / 16; }
.contemplado--fotos { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: calc((var(--alto) - 12px) * .375); }

.contemplado__abrir {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--noite);
  color: #fff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 4px rgba(13, 23, 34, .08), 0 18px 40px rgba(13, 23, 34, .16);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.contemplado__abrir:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
.contemplado__abrir:active { transform: scale(.985); }
.contemplado__capa { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* véu escuro embaixo (texto) e no topo (duração); as legendas gravadas no vídeo ficam por baixo dele */
.contemplado--video .contemplado__abrir::after,
.contemplado__abrir--largo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(13, 23, 34, .94) 0%, rgba(13, 23, 34, .62) 26%, rgba(13, 23, 34, 0) 52%),
    linear-gradient(to bottom, rgba(13, 23, 34, .42), rgba(13, 23, 34, 0) 20%);
}
.contemplado__tempo {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: var(--raio-pilula);
  background: rgba(13, 23, 34, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--f-num);
  font-weight: 500;
  font-size: .875rem;
  line-height: 1;
  letter-spacing: .04em;
}
.contemplado__tempo .ico { width: 10px; height: 10px; color: var(--ouro); }

/* play em forma de mostrador: anel tracejado como a escala da bússola, que gira um pouco no hover */
.contemplado__play {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(13, 23, 34, .46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ease), background-color .3s;
}
.contemplado__play svg { display: block; width: 100%; height: 100%; overflow: visible; }
.contemplado__anel { fill: none; stroke: var(--celeste-claro); stroke-width: 2; stroke-dasharray: 1.6 4.68; transform-box: fill-box; transform-origin: center; transition: transform .8s var(--ease); }
.contemplado__play path { fill: var(--ouro); }

.contemplado__texto { position: absolute; right: 16px; bottom: 16px; left: 16px; }
.contemplado__titulo { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.125rem; line-height: 1.2; text-wrap: balance; }

@media (hover: hover) {
  .contemplado__abrir:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(13, 23, 34, .1), 0 28px 56px rgba(13, 23, 34, .22); }
  .contemplado__abrir:hover .contemplado__capa { transform: scale(1.04); }
  .contemplado__abrir:hover .contemplado__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(5, 76, 169, .72); }
  .contemplado__abrir:hover .contemplado__anel { transform: rotate(45deg); }
  .contemplado__abrir--largo:hover .contemplado__play { transform: scale(1.08); }
}

.contemplados__fecho { display: grid; gap: 28px; margin-top: 24px; }
.contemplado__abrir--largo { aspect-ratio: 16 / 9; height: auto; }
/* no cartão largo o play vai para o canto, para não cobrir o rosto do Railson na capa */
.contemplado__abrir--largo .contemplado__play { top: auto; right: 14px; bottom: 14px; left: auto; width: 56px; height: 56px; transform: none; }
.contemplado__abrir--largo .contemplado__texto { right: 84px; }
.contemplados__chamada { display: grid; justify-items: start; gap: 14px; }
.contemplados__chamada-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.15; letter-spacing: -.01em; color: var(--noite); text-wrap: balance; }
.contemplados__chamada p { color: var(--texto-suave); line-height: 1.6; max-width: 46ch; }
.contemplados__chamada .btn { margin-top: 6px; }
.contemplados__chamada p.contemplados__nota { font-size: .875rem; }

@media (min-width: 640px) {
  .contemplados__lista { --alto: 460px; gap: 16px; }
  .contemplado--fotos { gap: 16px; width: calc((var(--alto) - 16px) * .375); }
  .contemplado__titulo { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  /* quatro vídeos 9:16 e a coluna de fotos 3:4 empilhadas fecham a mesma altura (proporção 3:3:3:3:2) */
  .contemplados__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 3fr)) minmax(0, 2fr); margin-inline: 0; padding: 0; overflow: visible; }
  .contemplado { height: auto; }
  .contemplado--fotos { width: auto; }
  .contemplados__fecho { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; margin-top: 56px; }
  .contemplado__abrir--largo .contemplado__titulo { font-size: 1.5rem; }
  .contemplado__abrir--largo .contemplado__texto { right: 112px; bottom: 22px; left: 24px; }
  .contemplado__abrir--largo .contemplado__play { right: 22px; bottom: 22px; width: 72px; height: 72px; }
}

/* player: abre por cima da página, no formato do vídeo ou da foto */
.player {
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #fff;
}
.player::backdrop { background: rgba(8, 14, 22, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player__palco {
  --ar: .5625;
  height: min(80svh, calc(92vw / var(--ar)));
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow: var(--sombra-sim);
}
.player__video, .player__foto { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__video[hidden], .player__foto[hidden] { display: none; }
.player__fechar {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.player__fechar .ico { width: 22px; height: 22px; }
.player__fechar:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
@media (hover: hover) { .player__fechar:hover { background: rgba(255, 255, 255, .22); } }
@media (min-width: 1024px) { .player__fechar { top: 24px; right: 24px; } }
html.player-aberto { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .player[open] .player__palco { animation: player-entra .5s var(--ease); }
  @keyframes player-entra { from { opacity: 0; transform: scale(.96); } }
}

/* ---------- movimento ---------- */
html.js .revela { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
html.js .revela.is-visivel { opacity: 1; transform: none; }
/* as fotos assentam com um zoom curto enquanto o bloco entra */
html.js .revela :is(.trabalhe__foto, .contato__foto img, .lider__foto) { transform: scale(1.06); transition: transform 1.4s var(--ease); }
html.js .revela.is-visivel :is(.trabalhe__foto, .contato__foto img, .lider__foto) { transform: none; }

/* rolagem suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

@media (prefers-reduced-motion: no-preference) {
  .rosa { animation: girar 180s linear infinite; }
  .hero--fora .rosa { animation-play-state: paused; }
  @keyframes girar { to { transform: rotate(360deg); } }
  /* a seta se desenha depois que o texto entra, a ponta aparece no fim e os pontos seguem andando para o simulador;
     espera a abertura terminar e para quando o hero sai da tela */
  .hero__rota-traco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rota-traca 1.3s cubic-bezier(.65, 0, .35, 1) .75s forwards; }
  .hero__rota-linha { animation: rota-anda 1.5s linear infinite; }
  .hero__rota-ponta path { opacity: 0; transform-box: fill-box; transform-origin: 100% 50%; animation: rota-ponta .55s var(--ease) 1.9s forwards, rota-cutuca 2.6s var(--ease) 3s infinite; }
  html.com-intro:not(.intro-abrindo) :is(.hero__rota-traco, .hero__rota-ponta path),
  .hero--fora :is(.hero__rota-linha, .hero__rota-ponta path) { animation-play-state: paused; }
  @keyframes rota-traca { to { stroke-dashoffset: 0; } }
  @keyframes rota-anda { to { stroke-dashoffset: -10.01; } }
  @keyframes rota-ponta { from { opacity: 0; transform: translateX(-12px) scale(.4); } to { opacity: 1; transform: none; } }
  @keyframes rota-cutuca { 0%, 50%, 100% { transform: none; } 25% { transform: translateX(5px); } }
  /* saída (21/10/2026): o app.js troca o tracejado por grãos soltos que se desfazem do começo até a ponta e encolhe a
     ponta até sumir; quando acaba, a seta fica escondida e para de andar */
  .hero__rota-grao { fill: var(--celeste-claro); transform-box: fill-box; transform-origin: center; }
  .hero--rota-saiu .hero__rota { transition: none; }
  .hero--rota-saiu :is(.hero__rota-linha, .hero__rota-ponta path) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .revela, html.js .revela :is(.trabalhe__foto, .contato__foto img, .lider__foto) { opacity: 1; transform: none; transition: none; }
  .bussola__agulha { transition: none; }
  .lider__giro { transform: none; }
  .sim.is-destacado, .sim__etapa.is-entrando, .sim__etapa.is-voltando, .sim__resultado.is-entrando { animation: none; }
  .btn, .opcao, .chip { transition: none; }
  .contemplado__abrir, .contemplado__capa, .contemplado__play, .contemplado__anel { transition: none; }
}

/* ---------- abertura "calibrando o norte" ----------
   o instrumento se monta, a agulha gira e trava no norte, vira a marca
   e uma íris abre do centro da bússola revelando o site.
   Tudo anima só transform e opacity (na placa de vídeo), para ficar liso
   mesmo enquanto o resto da página ainda carrega. */
.intro { display: none; }
html.com-intro { background: var(--noite); }
html.com-intro .intro {
  --tam: min(64vw, 300px, 44vh);
  position: fixed;
  inset: 0;
  z-index: 300;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
/* véu: quadrado de 150vmax com um furo minúsculo no centro; na saída só cresce (scale) e o furo vira a íris */
.intro__veu {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: radial-gradient(closest-side, transparent 0 2%, var(--noite) 2.6%, var(--noite) 30%, var(--noite-900) 100%);
  will-change: transform;
}
/* anel da íris: tem o tamanho final do furo e cresce na mesma curva do véu */
.intro__borda {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border: 2px solid var(--celeste-claro);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.02);
  will-change: transform, opacity;
}
.intro__palco { position: absolute; inset: 0; color: #fff; will-change: transform, opacity; }
/* brilho atrás da bússola; o centro opaco também esconde o furo do véu */
.intro__aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tam) * 2.4);
  height: calc(var(--tam) * 2.4);
  margin: calc(var(--tam) * -1.2) 0 0 calc(var(--tam) * -1.2);
  border-radius: 50%;
  background: radial-gradient(closest-side, #1A3A62 0 6%, rgba(26, 58, 98, .55) 34%, rgba(26, 58, 98, 0) 100%);
}
.intro__instrumento { position: absolute; left: 50%; top: 50%; width: var(--tam); height: var(--tam); margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2); }
.intro__instrumento > * { position: absolute; inset: 0; }
.intro__aro { inset: 3.4%; border: 1.5px solid var(--celeste); border-radius: 50%; opacity: 0; transform: scale(.9); will-change: transform, opacity; animation: intro-aro .7s var(--ease) .05s forwards; }
/* cometa: um ponto de luz dá uma volta no anel enquanto ele aparece */
.intro__cometa { inset: 3.4%; opacity: 0; will-change: transform, opacity; animation: intro-cometa .75s cubic-bezier(.45, 0, .25, 1) .05s forwards; }
.intro__cometa::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px var(--celeste), 0 0 24px 8px rgba(47, 155, 214, .5);
}
.intro__marcas { width: 100%; height: 100%; overflow: visible; opacity: 0; transform: rotate(-60deg); will-change: transform, opacity; animation: intro-marcas .8s var(--ease) .2s forwards; }
.intro__marcas circle { fill: none; stroke: rgba(201, 211, 222, .5); stroke-width: 9; stroke-dasharray: .45 4.55; }
.intro__fino { inset: 12.7%; border: 1px solid rgba(201, 211, 222, .2); border-radius: 50%; opacity: 0; will-change: opacity; animation: intro-aparece .45s ease .35s forwards; }
.intro__cardeais { will-change: opacity; animation: intro-some .25s ease 1.45s forwards; }
.intro__cardeal {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  font-family: var(--f-num);
  font-weight: 600;
  font-size: calc(var(--tam) * .05);
  line-height: 20px;
  text-align: center;
  color: var(--prata);
  opacity: 0;
  will-change: opacity;
  animation: intro-aparece .35s ease forwards;
}
.intro__cardeal--n { left: 50%; top: 19.3%; color: var(--celeste-claro); animation-delay: .45s; }
.intro__cardeal--l { left: 81.3%; top: 50.7%; animation-delay: .5s; }
.intro__cardeal--s { left: 50%; top: 82%; animation-delay: .55s; }
.intro__cardeal--o { left: 18.7%; top: 50.7%; animation-delay: .6s; }
.intro__agulha-caixa { will-change: opacity; animation: intro-some .25s ease 1.45s forwards; }
.intro__agulha { width: 100%; height: 100%; opacity: 0; will-change: transform, opacity; animation: intro-agulha 1.3s linear .15s forwards; }
.intro__agulha-norte { fill: var(--celeste-claro); }
.intro__agulha-sul { fill: rgba(201, 211, 222, .32); }
.intro__agulha circle { fill: #fff; }
.intro__instrumento::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px solid var(--celeste);
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation: intro-pulso .8s var(--ease) 1.4s;
}
.intro__simbolo { inset: 25%; width: 50%; height: 50%; opacity: 0; transform: scale(.55) rotate(-25deg); will-change: transform, opacity; animation: intro-simbolo .6s var(--ease) 1.45s forwards; }
.intro__nome {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--tam) / 2 + 20px);
  display: flex;
  justify-content: center;
  padding-left: .34em;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  line-height: 1;
  letter-spacing: .34em;
}
.intro__nome span { display: inline-block; opacity: 0; transform: translateY(55%); will-change: transform, opacity; animation: intro-letra .55s var(--ease) forwards; }
.intro__nome span:nth-child(1) { animation-delay: 1.55s; }
.intro__nome span:nth-child(2) { animation-delay: 1.585s; }
.intro__nome span:nth-child(3) { animation-delay: 1.62s; }
.intro__nome span:nth-child(4) { animation-delay: 1.655s; }
.intro__nome span:nth-child(5) { animation-delay: 1.69s; }
.intro__nome span:nth-child(6) { animation-delay: 1.725s; }
.intro__nome span:nth-child(7) { animation-delay: 1.76s; }
.intro__assinatura {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--tam) / 2 + 20px + clamp(1.75rem, 7vw, 2.75rem) + 16px);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
  color: var(--celeste-claro);
  opacity: 0;
  will-change: opacity;
  animation: intro-aparece .45s ease 1.7s forwards;
}
.intro__coordenadas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: var(--f-num);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .14em;
  color: rgba(201, 211, 222, .62);
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
  animation: intro-letra .5s var(--ease) .1s forwards;
}
.intro__sep { width: 28px; height: 1px; background: currentColor; opacity: .6; }

/* saída: a bússola avança contra a tela e a íris abre o site a partir do centro */
html.intro-abrindo .intro { cursor: default; pointer-events: none; }
html.intro-abrindo .intro__veu { animation: intro-iris .8s cubic-bezier(.72, 0, .18, 1) .05s forwards; }
html.intro-abrindo .intro__borda { animation: intro-borda .8s cubic-bezier(.72, 0, .18, 1) .05s forwards; }
html.intro-abrindo .intro__palco { animation: intro-palco .5s cubic-bezier(.6, 0, .2, 1) forwards; }

/* o site entra em sequência atrás da íris */
/* o título e o subtítulo ficam pintados por baixo do véu desde o início (o Google mede quando o maior texto aparece;
   escondidos com opacity 0, a medida só saía depois da abertura, ~3,5 s); na revelação eles só sobem, sem esmaecer */
html.com-intro:not(.intro-abrindo) :is(.topo__barra, .hero__texto > :not(h1, .hero__sub), .hero .simulador, .rosa) { opacity: 0; }
html.intro-abrindo :is(.hero__texto > h1, .hero__sub) { animation-name: intro-sobe-so; }
@keyframes intro-sobe-so { from { transform: translateY(24px); } }
html.intro-abrindo .topo__barra { animation: intro-topo .6s var(--ease) .4s both; }
html.intro-abrindo .hero__texto > * { animation: intro-sobe .7s var(--ease) both; }
html.intro-abrindo .hero__texto > :nth-child(1) { animation-delay: .22s; }
html.intro-abrindo .hero__texto > :nth-child(2) { animation-delay: .28s; }
html.intro-abrindo .hero__texto > :nth-child(3) { animation-delay: .35s; }
html.intro-abrindo .hero__texto > :nth-child(4) { animation-delay: .42s; }
html.intro-abrindo .hero .simulador { animation: intro-sobe .75s var(--ease) .38s both; }
html.intro-abrindo .rosa { animation: intro-rosa 1.1s var(--ease) .05s both; }

@keyframes intro-aro { to { opacity: 1; transform: none; } }
@keyframes intro-cometa {
  0% { opacity: 0; transform: rotate(0deg); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg); }
}
@keyframes intro-marcas { to { opacity: 1; transform: rotate(0deg); } }
@keyframes intro-aparece { to { opacity: 1; } }
@keyframes intro-some { to { opacity: 0; } }
@keyframes intro-agulha {
  0% { opacity: 0; transform: rotate(-200deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  10% { opacity: 1; }
  52% { transform: rotate(742deg); animation-timing-function: ease-in-out; }
  68% { transform: rotate(706deg); animation-timing-function: ease-in-out; }
  81% { transform: rotate(729deg); animation-timing-function: ease-in-out; }
  91% { transform: rotate(717deg); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: rotate(720deg); }
}
@keyframes intro-pulso {
  from { opacity: .9; transform: scale(.7); }
  to { opacity: 0; transform: scale(1.45); }
}
@keyframes intro-simbolo { to { opacity: 1; transform: none; } }
@keyframes intro-letra { to { opacity: 1; transform: none; } }
@keyframes intro-iris { to { transform: scale(50); } }
@keyframes intro-borda {
  0% { opacity: 0; transform: scale(.02); }
  12% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes intro-palco { to { opacity: 0; transform: scale(1.3); } }
@keyframes intro-topo { from { opacity: 0; transform: translateY(-16px); } }
@keyframes intro-sobe { from { opacity: 0; transform: translateY(24px); } }
@keyframes intro-rosa { from { opacity: 0; transform: scale(1.2) rotate(-35deg); } }


/* ---------- páginas internas (consórcios, /links e blog), escritas pelo gerador/gerar.mjs ----------
   Sem JavaScript: o conteúdo inteiro está no HTML que o robô recebe. */
.pg .topo::before { opacity: 1; }
.pg-topo__cta { min-height: 44px; padding: 0 1.1rem; font-size: .9375rem; }
.pg-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 56px;
  background: radial-gradient(80% 70% at 85% 10%, var(--marinho) 0%, rgba(19, 51, 107, 0) 60%), var(--noite);
  color: #fff;
}
.pg-hero .rosa { position: absolute; right: -38vw; top: -10vw; width: 90vw; max-width: 760px; color: rgba(201, 211, 222, .07); pointer-events: none; }
.pg-hero .moldura { position: relative; }
.pg-trilha ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 24px; font-size: .875rem; color: var(--prata); }
.pg-trilha li + li::before { content: "/"; margin-right: 8px; color: rgba(201, 211, 222, .5); }
.pg-trilha a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--celeste-claro); text-underline-offset: 3px; }
.pg-hero h1 { max-width: 16ch; }
.pg-hero h1 .destaque { color: var(--celeste-claro); }
.pg-resposta { max-width: 40rem; margin-top: 18px; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.pg-acoes { display: grid; gap: 12px; margin-top: 28px; }
.pg-fatos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: .9375rem; color: rgba(255, 255, 255, .8); }
.pg-fatos li { display: inline-flex; align-items: center; gap: 8px; }
.pg-fatos .ico { width: 18px; height: 18px; color: var(--celeste-claro); }
@media (min-width: 640px) {
  .pg-acoes { display: flex; flex-wrap: wrap; }
}
@media (min-width: 768px) {
  .pg-hero { padding: 40px 0 88px; }
  .pg-resposta { font-size: 1.125rem; }
}

.pg-secao { padding-block: var(--secao-y); }
.pg-secao--gelo { background: var(--gelo); }
.pg-secao .titulo-secao + .lead { margin-top: 12px; }
.pg-usos { display: grid; gap: 0 48px; margin-top: 20px; }
.pg-usos li { padding: 18px 0; border-top: 1px solid var(--borda); }
.pg-usos strong { display: block; font-family: var(--f-titulo); font-weight: 700; color: var(--noite); }
.pg-usos span { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.5; color: var(--texto-suave); }
.pg-nota { max-width: 46rem; margin-top: 16px; font-size: .9375rem; color: var(--texto-suave); }
@media (min-width: 768px) { .pg-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pg-passos { display: grid; gap: 14px; margin-top: 28px; counter-reset: passo; }
.pg-passos li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  align-content: start;
  counter-increment: passo;
}
.pg-passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  font-family: var(--f-num);
  font-weight: 600;
  font-size: 1.125rem;
  color: #fff;
}
.pg-passos strong { display: block; padding-top: 7px; font-family: var(--f-titulo); font-weight: 700; color: var(--noite); }
.pg-passos span { display: block; margin-top: 2px; line-height: 1.55; color: var(--texto-suave); }
@media (min-width: 900px) {
  .pg-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .pg-passos li { grid-template-columns: 1fr; }
  .pg-passos strong { padding-top: 4px; }
}

.pg .duvidas { padding-block: var(--secao-y); }
.pg .duvidas .duvidas__lista { max-width: 52rem; margin-top: 28px; }

.pg-chamada { padding-bottom: var(--secao-y); }
.pg-chamada__caixa {
  display: grid;
  gap: 20px;
  padding: 28px 22px;
  border-radius: var(--raio-card);
  background: radial-gradient(90% 120% at 100% 0%, var(--marinho) 0%, rgba(19, 51, 107, 0) 60%), var(--noite);
  color: #fff;
}
.pg-chamada__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.15; text-wrap: balance; }
.pg-chamada__texto > p { max-width: 44ch; margin-top: 10px; color: rgba(255, 255, 255, .8); line-height: 1.6; }
.pg-chamada__nap { display: grid; gap: 6px; margin-top: 16px; font-size: .9375rem; color: rgba(255, 255, 255, .78); }
.pg-chamada__nap li { display: flex; align-items: flex-start; gap: 10px; }
.pg-chamada__nap .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--celeste-claro); }
.pg-chamada__nap a { color: inherit; text-underline-offset: 3px; }
.pg-chamada .pg-acoes { margin-top: 0; }
@media (min-width: 900px) {
  .pg-chamada__caixa { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 24px 48px; padding: 44px 48px; }
  .pg-chamada .pg-acoes { flex-direction: column; align-items: stretch; }
}

.pg-outros { padding-bottom: var(--secao-y); }
.pg-outros__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pg-outros__lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  background: #fff;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  color: var(--noite);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.pg-outros__lista .ico { width: 22px; height: 22px; flex: none; color: var(--azul); }
@media (hover: hover) { .pg-outros__lista a:hover { border-color: var(--azul); box-shadow: 0 4px 14px rgba(5, 76, 169, .12); } }
@media (min-width: 900px) { .pg-outros__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pg-subtitulo { font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; color: var(--noite); }

/* /links: a página da bio do Instagram */
.links { min-height: 100vh; min-height: 100dvh; padding: 40px 0 calc(32px + env(safe-area-inset-bottom)); background: radial-gradient(90% 60% at 100% 0%, var(--marinho) 0%, rgba(19, 51, 107, 0) 60%), var(--noite); color: #fff; }
.links__coluna { display: grid; gap: 28px; width: 100%; max-width: 480px; margin-inline: auto; padding-inline: var(--gutter); }
.links__marca { display: grid; justify-items: center; gap: 8px; text-align: center; }
.links__marca img { width: 88px; height: 88px; }
.links__marca h1 { font-size: 1.625rem; }
.links__assinatura { color: var(--celeste-claro); }
.links__resumo { max-width: 32ch; margin-top: 4px; color: rgba(255, 255, 255, .78); line-height: 1.55; }
.links__principais { display: grid; gap: 12px; }
.links__principais .btn { width: 100%; }
.links__grupo h2 { margin-bottom: 10px; font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; color: #fff; }
.links__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.links__grade a, .links__lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--raio-campo);
  background: rgba(255, 255, 255, .04);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
}
.links__grade .ico, .links__lista .ico { width: 20px; height: 20px; flex: none; color: var(--celeste-claro); }
.links__lista { display: grid; gap: 10px; }
.links__nap { display: grid; gap: 4px; font-size: .875rem; line-height: 1.6; text-align: center; color: rgba(255, 255, 255, .7); }
.links__nap .assinatura { margin-top: 12px; }
@media (hover: hover) { .links__grade a:hover, .links__lista a:hover { border-color: var(--celeste); background: rgba(47, 155, 214, .12); } }

/* blog */
.blog-lista { display: grid; gap: 16px; margin-top: 28px; }
.blog-cartao { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--borda); border-radius: var(--raio-card); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.blog-cartao h2 { font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; line-height: 1.25; color: var(--noite); }
.blog-cartao p { color: var(--texto-suave); line-height: 1.6; }
.blog-cartao span { font-weight: 600; font-size: .9375rem; color: var(--azul); }
@media (hover: hover) { .blog-cartao:hover { border-color: var(--azul); box-shadow: var(--sombra-card); } }
@media (min-width: 768px) { .blog-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.artigo { padding-block: 40px var(--secao-y); }
.artigo__corpo { max-width: 42rem; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; color: var(--texto); }
.artigo__corpo > * + * { margin-top: 18px; }
.artigo__corpo h2 { margin-top: 36px; font-family: var(--f-titulo); font-weight: 800; font-size: 1.375rem; line-height: 1.25; color: var(--noite); }
.artigo__corpo ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.artigo__corpo strong { color: var(--noite); }
.artigo__corpo a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }
.artigo__meta { margin-top: 14px; font-size: .9375rem; color: rgba(255, 255, 255, .72); }
.artigo__exemplo { padding: 16px 18px; border-radius: var(--raio-campo); background: var(--gelo); }
.artigo__exemplo strong { color: var(--azul); }
.pg-hero .rosa { animation: none; }

/* links de "Como funciona" para as páginas dos consórcios; fotos e data das páginas internas */
.passos__tipos { max-width: 52ch; margin-top: 20px; line-height: 1.7; color: var(--texto-suave); }
.passos__tipos a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }
.pg-atualizado { margin-top: 24px; font-size: .8125rem; color: var(--texto-suave); }

/* ---------- rodapé centralizado (20/10/2026, pedido do Caio): marca no centro e, abaixo,
   Navegue, Consórcios e Atendimento um embaixo do outro, com os links em linha ---------- */
.rodape { text-align: center; }
.rodape__topo { justify-items: center; gap: 36px; }
.rodape__marca { display: grid; justify-items: center; }
.rodape__marca-linha { flex-direction: column; gap: 10px; }
.rodape__nome { font-size: 1.25rem; }
.rodape__assinatura { color: var(--celeste-claro); }
.rodape__resumo { margin-inline: auto; }
.rodape__redes { justify-content: center; }
.rodape__nav, .rodape__contato { width: 100%; max-width: 760px; }
.rodape__titulo { margin-bottom: 4px; }
.rodape__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; }
.rodape__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
.rodape__lista li { display: inline-flex; align-items: center; gap: 8px; }
.rodape__lista .ico { margin-top: 0; }
.rodape__lista a, .rodape__lista span { display: inline-flex; align-items: center; padding-block: 0; }
.rodape__legal { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.rodape__legal p { margin-inline: auto; }
.rodape__base { display: grid; justify-items: center; gap: 16px; }
.rodape__creditos { justify-items: center; }
@media (min-width: 768px) {
  .rodape__topo { gap: 32px; }
  .rodape__base { display: grid; }
  .rodape__creditos { display: flex; justify-content: center; }
}
.rodape__nav { max-width: 1000px; }
.rodape__base { justify-content: center; }
.rodape__lista a { text-wrap: balance; }
/* no celular, o atendimento fica um item por linha, com o ícone colado no texto */
@media (max-width: 767px) {
  .rodape__lista { flex-direction: column; align-items: center; }
  .rodape__lista li { max-width: 100%; }
}
/* endereço em duas linhas fixas no celular: o ícone fica colado no texto */
@media (max-width: 767px) {
  .rodape__lista a span { display: block; white-space: nowrap; }
  .rodape__lista a:has(span) { display: block; padding-block: 6px; }
}
/* as duas partes do endereço não herdam a altura mínima de 44 px dos alvos de toque (quem tem o alvo é o link inteiro) */
.rodape__lista a span { display: inline; min-height: 0; padding: 0; }
@media (max-width: 767px) { .rodape__lista a span { display: block; } }
@media (min-width: 768px) { .rodape__lista a:has(span) { display: inline-block; padding-block: 10px; } }

/* superfícies do navegador com a cor da marca: seleção de texto, cursor dos campos e controles nativos */
:root { accent-color: var(--azul); }
::selection { background: rgba(47, 155, 214, .3); color: inherit; }
input, textarea { caret-color: var(--azul); }

/* ---------- revisão impeccable (20/10/2026): prova real na abertura, rota nos passos, tabela no artigo, rodapé ---------- */
.pg-hero__grade { display: grid; gap: 28px; }
.pg-hero__texto { min-width: 0; }
.pg-acoes { grid-template-columns: minmax(0, 1fr); }
.pg-acoes .btn { white-space: normal; text-align: center; }
.pg-fatos li { min-height: 44px; }
.pg-fatos a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.pg-prova {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--raio-card);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.pg-prova img { width: 84px; height: 112px; border-radius: 10px; object-fit: cover; object-position: 50% 25%; background: var(--marinho); }
.pg-prova__texto { display: grid; gap: 4px; }
.pg-prova strong { font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.pg-prova__texto span { font-size: .875rem; line-height: 1.45; color: var(--celeste-claro); }
@media (hover: hover) { .pg-prova:hover { border-color: var(--celeste); background: rgba(47, 155, 214, .1); } }
@media (max-width: 767px) { .pg-resposta { font-size: 1rem; line-height: 1.65; } }
@media (min-width: 1024px) {
  .pg-hero__grade { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 72px; }
  .pg-prova { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pg-prova img { width: 100%; height: 340px; }
  .pg-hero .rosa { right: -180px; top: 50%; transform: translateY(-50%); width: 760px; color: rgba(201, 211, 222, .08); }
}

/* passos: a mesma rota da página inicial, parada (linha tracejada e o último passo em dourado) */
.pg-passos li { position: relative; }
.pg-passos li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: -10px; border-left: 2px dashed #B9CDE4; }
.pg-passos li:last-child::before { background: var(--ouro); color: var(--noite); }
@media (min-width: 900px) {
  .pg-passos li:not(:last-child)::after { left: 50px; right: -16px; top: 19px; bottom: auto; border-left: 0; border-top: 2px dashed #B9CDE4; }
}

/* 404: os 6 consórcios em 3 colunas */
@media (min-width: 900px) { .pg-outros__lista--todos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* blog: data nos cartões e tabela de resumo no artigo */
.blog-cartao time { font-size: .875rem; color: var(--texto-suave); }
.artigo__tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.artigo__tabela th, .artigo__tabela td { padding: 12px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.artigo__tabela thead th { font-family: var(--f-titulo); font-weight: 700; color: var(--noite); border-bottom: 2px solid var(--noite); }
.artigo__tabela thead th:nth-child(2) { color: var(--azul); }
.artigo__tabela tbody th { width: 28%; font-weight: 600; color: var(--noite); }
@media (max-width: 479px) {
  .artigo__tabela { font-size: .875rem; }
  .artigo__tabela th, .artigo__tabela td { padding: 10px 6px; }
}

/* rodapé: títulos com peso de título, alvos de 44 px também na largura, aviso legal legível e, no celular, links em 2 colunas */
.rodape__titulo { font-size: 1.125rem; }
.rodape__nav a, .pg-trilha a { min-width: 44px; justify-content: center; }
.rodape__legal { grid-template-columns: 20px minmax(0, 72ch); justify-content: center; justify-items: start; text-align: left; }
.rodape__legal p { margin-inline: 0; }
@media (max-width: 767px) {
  .rodape__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
}
.pg-chamada__nap li { align-items: center; }
.pg-chamada__nap .ico { margin-top: 0; }
.pg-chamada__nap a { display: inline-flex; align-items: center; min-height: 44px; }