/* Vorita Consultoria · site institucional e pré-cadastro
   Design system Vorita v1.0: Bricolage Grotesque, navy profundo e ouro, o anel como recurso gráfico.
   Dois temas pelo atributo data-tema no <html> (escuro e claro), aplicado antes da primeira pintura.
   Movimento: uma curva (--mola), só transform e opacity, nada acima de 520 ms fora da abertura. */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --noite: #0E1626; --navy: #1B2539; --navy-2: #24314B; --navy-c: #212A41;
  --linha: #2A3754; --linha-forte: #3A4868; --linha-controle: #66748F;
  --ouro: #C2A159; --ouro-vivo: #D4B572; --ouro-tx: #7E6125; --ouro-veu: rgba(194, 161, 89, .12);
  --prata: #C9CFD8; --prata-2: #9AA6BA; --gelo: #F4F5F8; --linha-clara: #D6DBE3;
  --texto: #3D4863; --sub: #4A5878; --branco: #FFFFFF;

  --fonte: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mola: cubic-bezier(.23, 1, .32, 1);
  --rapido: 160ms; --medio: 360ms; --revela: 520ms;
  --raio-p: 14px; --raio: 22px; --raio-g: 30px;
  --topo: 72px; --margem: 20px; --max: 1240px;
  color-scheme: dark;
}
@media (min-width: 900px) { :root { --topo: 84px; --margem: 40px; } }

/* escuro (padrão do script quando o aparelho está no escuro) */
:root, [data-tema="escuro"] {
  --fundo: #0E1626; --fundo-2: #141E33; --superficie: #1B2539; --superficie-2: #24314B;
  --titulo: #FFFFFF; --corpo: #C9CFD8; --apoio: #9AA6BA; --destaque: #C2A159;
  --divisor: #2A3754; --controle: #66748F; --foco: #C2A159;
  --acao: #C2A159; --acao-hover: #D4B572; --sobre-acao: #0E1626;
  --logo-tinta: #C9CFD8; --erro-tx: #F2A79B;
  --veu-topo: rgba(14, 22, 38, .82); --sombra: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -30px rgba(0, 0, 0, .7);
  --foto-filtro: none;
  color-scheme: dark;
}
[data-tema="claro"] {
  --fundo: #F4F5F8; --fundo-2: #FFFFFF; --superficie: #FFFFFF; --superficie-2: #EEF0F4;
  --titulo: #1B2539; --corpo: #3D4863; --apoio: #4A5878; --destaque: #7E6125;
  --divisor: #D6DBE3; --controle: #66748F; --foco: #1B2539;
  --acao: #1B2539; --acao-hover: #24314B; --sobre-acao: #FFFFFF;
  --logo-tinta: #212A41; --erro-tx: #B3261E;
  --veu-topo: rgba(244, 245, 248, .86); --sombra: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px -34px rgba(27, 37, 57, .35);
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 20px); background: var(--fundo); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fundo); color: var(--corpo);
  font-family: var(--fonte); font-size: 17px; line-height: 1.6; font-weight: 400; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--destaque); text-underline-offset: .2em; text-decoration-thickness: 1px; }
strong { font-weight: 600; color: var(--titulo); }
p, li, dd, summary, figcaption, blockquote { text-wrap: pretty; }
h1, h2, h3, summary { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ouro); color: var(--noite); }
[hidden] { display: none !important; }
.inteiro { white-space: nowrap; }
/* campanha da vez: o script do <head> marca o <html> com data-campanha="on" ou "off" antes da primeira pintura */
html[data-campanha="off"] .so-campanha { display: none !important; }
html[data-campanha="on"] .sem-campanha { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c { color: var(--destaque); }
.pular { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--acao); color: var(--sobre-acao); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }
.miolo { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--margem); }

/* imagens que mudam com o tema */
[data-tema="escuro"] .so-claro, [data-tema="claro"] .so-escuro { display: none !important; }

/* ---------------------------------------------------------------- tipografia */
.rotulo { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--destaque); margin-bottom: 18px; }
.rotulo::before { content: ""; width: 26px; height: 1.5px; background: var(--ouro); }
.titulo-1 { font-size: clamp(42px, 8.6vw, 96px); line-height: .98; font-weight: 600; letter-spacing: -.034em; color: var(--titulo); font-variation-settings: "opsz" 96; }
.titulo-2 { font-size: clamp(32px, 5.4vw, 60px); line-height: 1.03; font-weight: 600; letter-spacing: -.028em; color: var(--titulo); font-variation-settings: "opsz" 96; max-width: 16em; }
.titulo-3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; font-weight: 600; letter-spacing: -.016em; color: var(--titulo); }
.titulo-1 .c, .titulo-2 .c { display: block; }
.intro { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--corpo); max-width: 38em; margin-top: 20px; }
h3 { font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--titulo); letter-spacing: -.01em; }
.apoio { color: var(--apoio); font-size: 15px; }
.legal { font-size: 13px; line-height: 1.5; color: var(--apoio); }

/* ---------------------------------------------------------------- botões */
.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent;
  font-size: 16.5px; font-weight: 600; line-height: 1.15; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--rapido) var(--mola), background-color var(--rapido), border-color var(--rapido), color var(--rapido);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.botao:active { transform: scale(.97); }
.botao-acao { background: var(--acao); color: var(--sobre-acao); }
.botao-ouro { background: var(--ouro); color: var(--noite); }
.botao-linha { background: transparent; border-color: var(--linha-forte); color: var(--titulo); }
[data-tema="claro"] .botao-linha { border-color: #B9C1CE; }
.botao-p { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.botao-largo { width: 100%; }
.botao svg { width: 18px; height: 18px; flex: none; transition: transform var(--rapido) var(--mola); }
.botao small { display: block; font-size: 12.5px; font-weight: 400; opacity: .82; }
.botao-col { flex-direction: column; gap: 2px; }
@media (hover: hover) and (pointer: fine) {
  .botao-acao:hover { background: var(--acao-hover); }
  .botao-ouro:hover { background: var(--ouro-vivo); }
  .botao-linha:hover { border-color: var(--destaque); }
  .botao:hover svg { transform: translateX(3px); }
}
.botao[aria-disabled="true"] { opacity: .6; cursor: progress; }
.link-seta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--destaque); min-height: 44px; }
.link-seta svg { width: 18px; height: 18px; transition: transform var(--rapido) var(--mola); }
@media (hover: hover) and (pointer: fine) { .link-seta:hover svg { transform: translateX(3px); } .link-seta:hover { text-decoration: underline; } }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 559px) { .acoes .botao { width: 100%; } }

/* ---------------------------------------------------------------- topo */
.topo { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: var(--topo); transition: background-color var(--medio), box-shadow var(--medio); }
.topo::before { content: ""; position: absolute; inset: 0; background: var(--veu-topo); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); opacity: 0; transition: opacity var(--medio); }
.topo.solido::before { opacity: 1; }
.topo.solido { box-shadow: 0 1px 0 var(--divisor); }
.topo-in { position: relative; height: 100%; display: flex; align-items: center; gap: 20px; max-width: calc(var(--max) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.marca { display: block; flex: none; color: var(--logo-tinta); line-height: 0; }
.marca svg { height: 46px; width: auto; }
@media (min-width: 900px) { .marca svg { height: 58px; } }
.logo-tinta { fill: var(--logo-tinta); } .logo-anel { stroke: var(--logo-tinta); } .logo-ouro { fill: var(--ouro); }
.nav { display: none; margin-left: auto; gap: 4px; }
.nav a { position: relative; padding: 10px 14px; border-radius: 999px; font-size: 15.5px; font-weight: 500; color: var(--corpo); text-decoration: none; transition: color var(--rapido); }
.nav a[aria-current="page"] { color: var(--titulo); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ouro); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--titulo); } }
.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--divisor); background: transparent; color: var(--titulo); cursor: pointer; transition: border-color var(--rapido), transform var(--rapido) var(--mola); }
.icone svg { width: 22px; height: 22px; }
.icone:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .icone:hover { border-color: var(--destaque); } }
.tema-icone { transition: transform 520ms var(--mola); }
[data-tema="claro"] .tema-icone { transform: rotate(180deg); }
.topo-cadastro { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; }
  .topo-acoes { margin-left: 8px; }
  .topo-cadastro { display: inline-flex; }
  .menu-botao { display: none; }
}
@media (min-width: 560px) and (max-width: 1079px) { .topo-cadastro { display: inline-flex; } }

/* menu do celular */
.gaveta { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto 1fr auto; background: var(--fundo); padding: 0 var(--margem) calc(24px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; transition: opacity var(--medio) var(--mola), visibility 0s var(--medio); }
.gaveta.aberta { visibility: visible; opacity: 1; transition: opacity var(--medio) var(--mola), visibility 0s; }
.gaveta-topo { height: var(--topo); display: flex; align-items: center; justify-content: space-between; }
.gaveta nav { display: grid; align-content: center; gap: 2px; }
.gaveta nav a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; font-size: clamp(32px, 9vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--titulo); text-decoration: none; opacity: 0; transform: translateY(14px); }
.gaveta nav a span { font-size: 13px; font-weight: 600; color: var(--destaque); letter-spacing: .1em; }
.gaveta nav a[aria-current="page"] { color: var(--destaque); }
.gaveta.aberta nav a { opacity: 1; transform: none; transition: opacity var(--revela) var(--mola), transform var(--revela) var(--mola); }
.gaveta.aberta nav a:nth-child(2) { transition-delay: 40ms; } .gaveta.aberta nav a:nth-child(3) { transition-delay: 80ms; }
.gaveta.aberta nav a:nth-child(4) { transition-delay: 120ms; } .gaveta.aberta nav a:nth-child(5) { transition-delay: 160ms; } .gaveta.aberta nav a:nth-child(6) { transition-delay: 200ms; }
.gaveta-pe { display: grid; gap: 14px; }
.gaveta-pe .legal { text-align: center; }

/* ---------------------------------------------------------------- folhas (seções que sobem umas sobre as outras) */
main { position: relative; }
.folha { position: relative; background: var(--chao, var(--fundo)); padding: clamp(84px, 11vw, 140px) 0; }
.folha.alt { --chao: var(--fundo-2); --cartao: var(--superficie-2); }
.folha.curta { padding: clamp(28px, 4vw, 48px) 0; }
.folha { --cartao: var(--superficie); }
.empilha .folha + .folha { border-radius: var(--raio-g) var(--raio-g) 0 0; box-shadow: 0 -1px 0 var(--divisor), 0 -30px 60px -40px rgba(0, 0, 0, .55); }
[data-tema="claro"] .empilha .folha + .folha { box-shadow: 0 -1px 0 var(--divisor), 0 -30px 60px -44px rgba(27, 37, 57, .28); }
.js .empilha .folha { position: sticky; top: var(--fixa, 0px); }
.folha::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #050a14; opacity: var(--veu, 0); pointer-events: none; }
[data-tema="claro"] .folha::after { background: #1B2539; opacity: calc(var(--veu, 0) * .3); }
.folha-cabeca { max-width: 46rem; margin-bottom: clamp(40px, 6vw, 64px); }
.folha-cabeca.centro { margin-left: auto; margin-right: auto; text-align: center; }
.folha-cabeca.centro .rotulo { justify-content: center; }
.folha-cabeca.centro .titulo-2 { margin-left: auto; margin-right: auto; }
.folha-cabeca.centro .intro { margin-left: auto; margin-right: auto; }

/* revelação */
.js [data-revela] { opacity: 0; transform: translateY(14px); }
.js [data-revela].visto { opacity: 1; transform: none; transition: opacity var(--revela) var(--mola), transform var(--revela) var(--mola); transition-delay: var(--atraso, 0ms); }

/* ---------------------------------------------------------------- abertura (home e páginas) */
.abertura { position: relative; min-height: min(100svh, 980px); display: grid; align-items: center; padding: calc(var(--topo) + 32px) 0 72px; overflow: hidden; background: var(--fundo); }
.abertura-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .abertura-grade { grid-template-columns: 1.08fr .92fr; gap: 56px; } }
.abertura .titulo-1 { max-width: 11.5em; }
.selo { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--divisor); background: color-mix(in srgb, var(--superficie) 60%, transparent); font-size: 14px; color: var(--corpo); text-decoration: none; margin-bottom: 26px; transition: border-color var(--rapido); }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 4px var(--ouro-veu); }
.selo svg { width: 16px; height: 16px; color: var(--destaque); }
@media (hover: hover) and (pointer: fine) { a.selo:hover { border-color: var(--destaque); } }
.confianca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; font-size: 14px; color: var(--apoio); }
.confianca svg { width: 22px; height: 22px; flex: none; }
.mini-v { width: 22px; height: 22px; fill: var(--ouro); flex: none; }

/* a janela redonda com o anel que gira */
.orbita { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; }
@media (max-width: 959px) { .orbita { width: min(82vw, 440px); order: -1; } }
.orbita-foto { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: var(--superficie); }
.orbita-foto picture { display: block; height: 100%; }
.orbita-foto img { width: 100%; height: 100%; object-fit: cover; }
.orbita-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita-anel circle { fill: none; }
.orbita-anel .trilho { stroke: var(--divisor); stroke-width: 1; }
.orbita-anel .traco { stroke: var(--ouro); stroke-width: 1.5; stroke-dasharray: 720 1000; }
.orbita-anel .ponto { fill: var(--ouro); stroke: none; }
.orbita-gira { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(var(--giro, 0deg)); }
.orbita-legenda { position: absolute; right: 2%; bottom: 8%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--divisor); box-shadow: var(--sombra); font-size: 13.5px; color: var(--corpo); max-width: 15em; }
.orbita-legenda strong { display: block; font-size: 14.5px; }
.orbita-legenda svg { width: 30px; height: 30px; flex: none; color: var(--destaque); }
@media (max-width: 959px) { .orbita-legenda { display: none; } }
/* entrada da abertura: a foto abre do centro, o anel se desenha, o texto sobe */
@media (prefers-reduced-motion: no-preference) {
  .js .orbita-foto { clip-path: circle(0% at 50% 50%); }
  .js .entrou .orbita-foto { clip-path: circle(50% at 50% 50%); transition: clip-path 1100ms var(--mola) 120ms; }
  .js .orbita-anel .traco { stroke-dashoffset: 720; }
  .js .entrou .orbita-anel .traco { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--mola) 300ms; }
  .js .orbita-anel .ponto { opacity: 0; }
  .js .entrou .orbita-anel .ponto { opacity: 1; transition: opacity 400ms var(--mola) 1100ms; }
  .js .orbita-legenda { opacity: 0; transform: translateY(10px); }
  .js .entrou .orbita-legenda { opacity: 1; transform: none; transition: opacity 520ms var(--mola) 1200ms, transform 520ms var(--mola) 1200ms; }
  .js .sobe > * { opacity: 0; transform: translateY(18px); }
  .js .entrou .sobe > * { opacity: 1; transform: none; transition: opacity 900ms var(--mola), transform 900ms var(--mola); }
  .js .entrou .sobe > :nth-child(2) { transition-delay: 90ms; } .js .entrou .sobe > :nth-child(3) { transition-delay: 180ms; }
  .js .entrou .sobe > :nth-child(4) { transition-delay: 270ms; } .js .entrou .sobe > :nth-child(5) { transition-delay: 360ms; }
}

/* abertura das páginas internas */
.cabecalho { padding: calc(var(--topo) + clamp(48px, 9vw, 110px)) 0 clamp(56px, 8vw, 96px); background: var(--fundo); position: relative; overflow: hidden; }
.cabecalho .titulo-1 { font-size: clamp(40px, 7.4vw, 84px); max-width: 13em; }
.migalhas { display: flex; gap: 8px; font-size: 13.5px; color: var(--apoio); margin-bottom: 26px; }
.migalhas a { color: var(--apoio); text-decoration: none; } .migalhas a:hover { color: var(--titulo); }
.cabecalho-anel { position: absolute; right: -16vw; top: calc(var(--topo) + 24px); width: min(62vw, 700px); aspect-ratio: 1; pointer-events: none; opacity: .9; }
@media (max-width: 899px) { .cabecalho-anel { right: -40vw; width: 110vw; opacity: .5; } }

/* ---------------------------------------------------------------- faixa da campanha */
.faixa-campanha { position: relative; display: grid; gap: 20px; align-items: center; padding: 26px; border-radius: var(--raio); background: var(--noite); color: var(--prata); overflow: hidden; text-decoration: none; isolation: isolate; }
.faixa-campanha::before { content: ""; position: absolute; right: -80px; top: 50%; width: 320px; height: 320px; margin-top: -160px; border-radius: 50%; border: 1px solid rgba(194, 161, 89, .55); z-index: -1; }
.faixa-campanha::after { content: ""; position: absolute; right: -40px; top: 50%; width: 240px; height: 240px; margin-top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(194, 161, 89, .22), transparent 70%); z-index: -1; }
.faixa-campanha strong { display: block; color: #fff; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.015em; }
.faixa-campanha .rotulo { margin-bottom: 10px; color: var(--ouro); }
@media (min-width: 800px) { .faixa-campanha { grid-template-columns: 1fr auto; padding: 32px 40px; } }
@media (hover: hover) and (pointer: fine) { .faixa-campanha:hover .botao-ouro { background: var(--ouro-vivo); } }

/* ---------------------------------------------------------------- cartões e grades */
.grade-3 { display: grid; gap: 16px; }
@media (min-width: 760px) { .grade-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.grade-2 { display: grid; gap: 16px; }
@media (min-width: 760px) { .grade-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.grade-4 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grade-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grade-4 { grid-template-columns: repeat(4, 1fr); } }
.cartao { position: relative; padding: 28px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); box-shadow: var(--sombra); overflow: hidden; }
.cartao h3 { margin-top: 18px; }
.cartao p { margin-top: 10px; font-size: 16px; color: var(--corpo); }
.cartao .num { font-size: 15px; font-weight: 600; color: var(--destaque); letter-spacing: .06em; }
.cartao-icone { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--divisor); color: var(--destaque); background: var(--chao, var(--fundo)); }
.cartao-icone svg { width: 24px; height: 24px; }
.dividida { display: grid; gap: 40px; align-items: center; }
.dividida > * { min-width: 0; }
@media (min-width: 960px) { .dividida { grid-template-columns: 1fr 1fr; gap: 72px; } .dividida.inverte > :first-child { order: 2; } }
.foto-moldura { position: relative; border-radius: var(--raio-g); overflow: hidden; background: var(--cartao); box-shadow: var(--sombra); }
.foto-moldura picture { display: block; height: 100%; }
.foto-moldura img { width: 100%; height: 100%; object-fit: cover; }
.foto-redonda { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.foto-redonda .janela { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; }
.foto-redonda .janela picture { display: block; height: 100%; }
.foto-redonda .janela img { width: 100%; height: 100%; object-fit: cover; }
.foto-redonda svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* lista com fios */
.fios { border-top: 1px solid var(--divisor); }
.fios > li, .fios > div { padding: 20px 0; border-bottom: 1px solid var(--divisor); }
.fios.numerada > li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: baseline; }
.fios.numerada .n { font-size: 15px; font-weight: 600; color: var(--destaque); font-variant-numeric: tabular-nums; }
.fios p { margin-top: 6px; color: var(--corpo); font-size: 16px; }

/* ---------------------------------------------------------------- raio-x */
.raiox { border-top: 1px solid var(--divisor); }
.raiox-item { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 22px 4px 22px 0; border-bottom: 1px solid var(--divisor); cursor: pointer; }
.raiox-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.raiox-caixa { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--controle); display: grid; place-items: center; transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido) var(--mola); }
.raiox-caixa svg { width: 18px; height: 18px; color: var(--sobre-acao); opacity: 0; transform: scale(.6); transition: opacity var(--rapido), transform var(--medio) var(--mola); }
.raiox-frase { font-size: clamp(18px, 2vw, 21px); line-height: 1.35; color: var(--titulo); font-weight: 500; }
.raiox-risco { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--medio) var(--mola); }
.raiox-risco-in { min-height: 0; overflow: hidden; font-size: 16px; color: var(--corpo); visibility: hidden; transition: visibility 0s var(--medio); }
.raiox-risco strong { color: var(--destaque); }
.raiox-item input:checked ~ .raiox-caixa { background: var(--acao); border-color: var(--acao); transform: scale(1.06); }
.raiox-item input:checked ~ .raiox-caixa svg { opacity: 1; transform: none; }
.raiox-item input:checked ~ .raiox-risco { grid-template-rows: 1fr; margin-top: 10px; }
.raiox-item input:checked ~ .raiox-risco .raiox-risco-in { visibility: visible; transition: visibility 0s; }
.raiox-item input:focus-visible ~ .raiox-caixa { outline: 2px solid var(--foco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .raiox-item:hover .raiox-caixa { border-color: var(--destaque); } }
.raiox-saida { margin-top: 28px; display: grid; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); }
.raiox-saida p { font-size: 16px; }
@media (min-width: 760px) { .raiox-saida { grid-template-columns: 1fr auto; } }

/* ---------------------------------------------------------------- celular com a conversa */
.celular { position: relative; width: min(100%, 520px); margin: 0 auto; border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra); }
.celular picture, .celular > picture img { display: block; width: 100%; height: auto; }
.celular-tela { position: absolute; left: var(--tx); top: var(--ty); width: var(--tw); height: var(--th); border-radius: 7% / 3.6%; overflow: hidden; background: #0B111D; display: flex; flex-direction: column; container-type: inline-size; }
[data-tema="claro"] .celular-tela { background: #F7F8FA; }
.zap-topo { display: flex; align-items: center; gap: 2.4cqw; padding: 5cqw 4cqw 3.4cqw; background: #16202F; color: #fff; }
[data-tema="claro"] .zap-topo { background: #1B2539; }
.zap-topo .av { width: 10cqw; height: 10cqw; border-radius: 50%; background: #24314B; display: grid; place-items: center; flex: none; }
.zap-topo .av svg { width: 62%; height: 62%; fill: var(--ouro); }
.zap-topo b { display: block; font-size: 4.6cqw; font-weight: 600; line-height: 1.15; }
.zap-topo span { font-size: 3.4cqw; color: #9AA6BA; }
.zap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4cqw; padding: 4cqw 3.4cqw; overflow: hidden; }
.zap li { max-width: 88%; padding: 2.6cqw 3.2cqw 2cqw; border-radius: 4cqw; font-size: 4.3cqw; line-height: 1.35; color: #fff; background: #24314B; border-bottom-left-radius: 1.2cqw; align-self: flex-start; }
.zap li.eu { align-self: flex-end; background: #6B5A30; border-radius: 4cqw; border-bottom-right-radius: 1.2cqw; }
[data-tema="claro"] .zap li { background: #FFFFFF; color: #1B2539; box-shadow: 0 1px 2px rgba(27, 37, 57, .12); }
[data-tema="claro"] .zap li.eu { background: #EFE5CC; }
.zap li small { display: block; text-align: right; font-size: 2.8cqw; opacity: .65; margin-top: .6cqw; }
.zap li .quem { display: block; font-size: 3cqw; font-weight: 600; color: var(--ouro); margin-bottom: .4cqw; }
[data-tema="claro"] .zap li .quem { color: #7E6125; }
.zap li .anexo { display: flex; align-items: center; gap: 2cqw; margin-top: 1.6cqw; padding: 2cqw 2.4cqw; border-radius: 2.4cqw; background: rgba(14, 22, 38, .45); font-size: 3.4cqw; }
[data-tema="claro"] .zap li .anexo { background: #F1F3F6; }
.zap li .anexo svg { width: 4.6cqw; height: 4.6cqw; flex: none; color: var(--ouro); }
.zap .divisor { align-self: center; background: rgba(14, 22, 38, .55); color: #C9CFD8; font-size: 3cqw; padding: 1cqw 3cqw; border-radius: 99px; max-width: none; }
[data-tema="claro"] .zap .divisor { background: #E3E7ED; color: #4A5878; box-shadow: none; }
.zap .digitando { display: flex; gap: 1.2cqw; padding: 3cqw 3.6cqw; }
.zap .digitando i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #9AA6BA; animation: pulo 1s infinite; }
.zap .digitando i:nth-child(2) { animation-delay: .15s; } .zap .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-1cqw); opacity: 1; } }
.js .zap.armada > li { opacity: 0; transform: translateY(2cqw) scale(.98); }
.js .zap.armada > li.visto { opacity: 1; transform: none; transition: opacity 320ms var(--mola), transform 420ms var(--mola); }
.ilustrativo { position: absolute; right: 12px; bottom: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #C9CFD8; background: rgba(14, 22, 38, .72); padding: 4px 8px; border-radius: 6px; }
.recursos { display: grid; gap: 0; border-top: 1px solid var(--divisor); }
.recursos li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--divisor); }
.recursos .cartao-icone { width: 44px; height: 44px; }
.recursos p { margin-top: 6px; font-size: 16px; }

/* ---------------------------------------------------------------- passos */
.passos { display: grid; gap: 0; position: relative; }
.passos li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--divisor); }
.passos li:last-child { border-bottom: 1px solid var(--divisor); }
.passo-n { font-size: 62px; line-height: .82; font-weight: 300; color: var(--destaque); letter-spacing: -.04em; font-variation-settings: "opsz" 96; }
.passos p { margin-top: 8px; font-size: 16px; }
@media (min-width: 960px) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .passos li { grid-template-columns: 1fr; gap: 18px; padding: 30px 0 0; border-bottom: 0 !important; border-top: 0; }
  .passos::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--divisor); }
  .passos::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; margin-top: -.5px; width: 100%; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(var(--trilho, 0)); }
  .passos li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--chao, var(--fundo)); border: 1.5px solid var(--ouro); }
}

/* ---------------------------------------------------------------- simulador */
.simulador { display: grid; gap: 28px; padding: clamp(22px, 3vw, 36px); border-radius: var(--raio-g); background: var(--cartao); border: 1px solid var(--divisor); box-shadow: var(--sombra); }
@media (min-width: 960px) { .simulador { grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } }
.abas { display: grid; grid-template-columns: 1fr 1fr; background: var(--chao, var(--fundo)); border: 1px solid var(--divisor); border-radius: 999px; padding: 4px; }
.abas button { border: 0; background: transparent; padding: 10px 8px; min-height: 44px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--corpo); cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--acao); color: var(--sobre-acao); }
.sim-painel { margin-top: 24px; }
.sim-rotulo { display: block; font-size: 15px; color: var(--apoio); margin-bottom: 8px; }
.sim-valor { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--titulo); padding-bottom: 6px; }
.sim-valor span { font-size: 22px; font-weight: 500; color: var(--titulo); }
.sim-valor input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: clamp(36px, 5vw, 52px); font-weight: 600; letter-spacing: -.03em; color: var(--titulo); padding: 0; }
.sim-valor input:focus { outline: none; }
.sim-valor:focus-within { outline: 2px solid var(--foco); outline-offset: 6px; border-radius: 4px; }
.sim-valor.p { gap: 4px; } .sim-valor.p span { font-size: 13px; } .sim-valor.p input { font-size: 20px; letter-spacing: -.02em; }
.faixa-range { position: relative; margin-top: 24px; }
.faixa-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.faixa-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--ouro) var(--pct, 0%), var(--divisor) var(--pct, 0%)); }
.faixa-range input::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--ouro) var(--pct, 0%), var(--divisor) var(--pct, 0%)); }
.faixa-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--titulo); border: 4px solid var(--ouro); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.faixa-range input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--titulo); border: 4px solid var(--ouro); }
.faixa-range input:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.sim-escala { position: relative; height: 18px; margin: 0 14px; font-size: 12.5px; color: var(--apoio); }
.sim-escala span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sim-escala span:first-child { transform: translateX(-14px); } .sim-escala span:last-child { transform: translateX(calc(-100% + 14px)); }
.sim-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sim-meses label > span { display: block; font-size: 13px; color: var(--apoio); margin-bottom: 4px; }
.sim-saida { display: grid; justify-items: center; text-align: center; gap: 14px; }
.dial { position: relative; width: min(280px, 74vw); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial .seg { fill: none; stroke: var(--divisor); stroke-width: 9; stroke-linecap: round; transition: stroke var(--medio) var(--mola), stroke-width var(--medio) var(--mola); }
.dial .seg.antes { stroke: color-mix(in srgb, var(--ouro) 38%, var(--divisor)); }
.dial .seg.ativo { stroke: var(--ouro); stroke-width: 13; }
.dial .ponteiro { fill: var(--titulo); transition: transform 520ms var(--mola); transform-origin: 100px 100px; }
.dial-centro { position: absolute; inset: 0; display: grid; place-content: center; }
.dial-centro strong { font-size: clamp(34px, 9vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--titulo); font-variation-settings: "opsz" 96; }
.dial-centro strong.texto { font-size: 24px; line-height: 1.1; max-width: 8em; }
.dial-centro span { font-size: 15px; color: var(--apoio); margin-top: 6px; }
.sim-faixa { font-size: 16px; color: var(--titulo); font-weight: 500; }
.sim-nota { font-size: 15px; color: var(--corpo); max-width: 28em; background: var(--chao, var(--fundo)); border-radius: var(--raio-p); padding: 10px 14px; }
.sim-linhas { width: 100%; display: grid; border-top: 1px solid var(--divisor); text-align: left; }
.sim-linhas > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divisor); font-size: 15px; }
.sim-linhas b { color: var(--titulo); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* tabela */
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela caption { text-align: left; font-size: 15px; font-weight: 600; color: var(--destaque); padding-bottom: 12px; }
.tabela th { text-align: left; font-size: 13px; font-weight: 500; color: var(--apoio); padding: 0 14px 10px; }
.tabela td { padding: 15px 14px; border-top: 1px solid var(--divisor); font-size: 16px; color: var(--corpo); transition: background-color var(--medio); }
.tabela th:last-child, .tabela td:last-child { text-align: right; }
.tabela td:last-child { font-size: 19px; font-weight: 600; color: var(--titulo); white-space: nowrap; }
.tabela tr:last-child td:last-child { font-size: 16px; }
.tabela tr.ativa td { background: var(--ouro-veu); color: var(--titulo); }
.tabela tr.ativa td:first-child { box-shadow: inset 3px 0 0 var(--ouro); }
.regras { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .regras { grid-template-columns: repeat(3, 1fr); } }
.regras > div { padding: 22px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); }
.regras b { display: block; color: var(--titulo); font-size: 17px; margin-bottom: 6px; }
.regras p { font-size: 15px; }

/* ---------------------------------------------------------------- serviços */
.subnav { position: sticky; top: var(--topo); z-index: 40; background: var(--veu-topo); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--divisor); }
.subnav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--margem); max-width: calc(var(--max) + 2 * var(--margem)); margin: 0 auto; }
.subnav a { flex: none; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--corpo); text-decoration: none; border: 1px solid transparent; min-height: 40px; display: inline-flex; align-items: center; }
.subnav a.ativo { border-color: var(--divisor); color: var(--titulo); background: var(--superficie); }
.servico { scroll-margin-top: calc(var(--topo) + 80px); }
.mes { display: grid; gap: 14px; }
@media (min-width: 900px) { .mes { grid-template-columns: repeat(4, 1fr); } }
.mes-etapa { position: relative; padding: 24px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); }
.mes-etapa .quando { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.mes-etapa .quando::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ouro); }
.mes-etapa ul { margin-top: 14px; display: grid; gap: 10px; }
.mes-etapa li { position: relative; padding-left: 18px; font-size: 15.5px; color: var(--corpo); }
.mes-etapa li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1.5px; background: var(--ouro); }
.aparte { display: flex; flex-wrap: wrap; gap: 10px; }
.aparte li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--divisor); font-size: 15px; color: var(--corpo); background: var(--cartao); }

/* perguntas */
.faq { border-top: 1px solid var(--divisor); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--divisor); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 0; position: relative; font-size: clamp(17px, 1.8vw, 19.5px); line-height: 1.35; font-weight: 500; color: var(--titulo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; border: 1px solid var(--controle); background: linear-gradient(var(--titulo), var(--titulo)) center / 12px 1.5px no-repeat, linear-gradient(var(--titulo), var(--titulo)) center / 1.5px 12px no-repeat; transition: transform var(--medio) var(--mola), border-color var(--rapido); }
.faq details[open] summary::after { transform: rotate(45deg); border-color: var(--destaque); }
.faq details > div { padding: 0 0 24px; font-size: 16.5px; color: var(--corpo); max-width: 44em; }
.faq details > div p + p { margin-top: 10px; }

/* ---------------------------------------------------------------- bloco do CRC */
.credenciais { display: grid; border-top: 1px solid var(--divisor); }
.credenciais > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--divisor); }
.credenciais dt { font-size: 14px; color: var(--apoio); }
.credenciais dd { font-size: 17px; color: var(--titulo); }
.externo { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; white-space: nowrap; margin-left: 4px; }
.externo svg { width: 15px; height: 15px; }
@media (min-width: 760px) { .credenciais > div { grid-template-columns: 240px 1fr; gap: 24px; align-items: baseline; } }

/* ---------------------------------------------------------------- formulários (contato) */
.form { display: grid; gap: 22px; }
.campo { display: grid; gap: 8px; }
.campo label, .campo legend { font-size: 15px; font-weight: 500; color: var(--titulo); }
.campo input, .campo textarea { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: var(--raio-p); border: 1.5px solid var(--controle); background: var(--chao, var(--fundo)); color: var(--titulo); font-size: 17px; transition: border-color var(--rapido); }
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); box-shadow: 0 0 0 3px var(--ouro-veu); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--erro-tx); }
.dica { font-size: 13.5px; color: var(--apoio); }
.erro { font-size: 14px; color: var(--erro-tx); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--controle); font-size: 15px; color: var(--titulo); cursor: pointer; transition: border-color var(--rapido), background-color var(--rapido); }
.chip input:checked + span { border-color: var(--destaque); background: var(--ouro-veu); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.aceite { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14.5px; color: var(--corpo); cursor: pointer; }
.aceite input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ouro); }
.armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.canais { display: grid; gap: 14px; }
.canal { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 20px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); text-decoration: none; color: inherit; transition: border-color var(--rapido); }
.canal b { display: block; color: var(--titulo); font-size: 17px; }
.canal span { font-size: 15px; color: var(--corpo); overflow-wrap: anywhere; min-width: 0; }
@media (hover: hover) and (pointer: fine) { a.canal:hover { border-color: var(--destaque); } }
.enviado { padding: 28px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); }

/* ---------------------------------------------------------------- pré-cadastro */
.vantagens { display: grid; gap: 16px; counter-reset: v; }
@media (min-width: 900px) { .vantagens { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.vantagem { position: relative; padding: 30px 28px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--divisor); overflow: hidden; }
.vantagem::before { counter-increment: v; content: counter(v); display: block; font-size: 64px; line-height: .8; font-weight: 300; letter-spacing: -.04em; color: var(--destaque); font-variation-settings: "opsz" 96; }
.vantagem::after { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent); }
.vantagem h3 { margin-top: 22px; font-size: 21px; }
.vantagem p { margin-top: 10px; font-size: 16px; }
.nota-vantagem { margin-top: 20px; font-size: 14.5px; color: var(--apoio); max-width: 46em; }
.comecar-ficha { display: grid; gap: 26px; align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: var(--raio-g); background: var(--noite); color: var(--prata); position: relative; overflow: hidden; isolation: isolate; }
.comecar-ficha::before { content: ""; position: absolute; right: -14%; top: 50%; width: 62%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(194, 161, 89, .5); z-index: -1; }
.comecar-ficha .titulo-2 { color: #fff; }
.comecar-ficha .titulo-2 .c { color: var(--ouro); }
.comecar-ficha .intro { color: #C9CFD8; }
.comecar-ficha .rotulo { color: var(--ouro); }
.comecar-ficha ul { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: #9AA6BA; }
.comecar-ficha ul li { display: inline-flex; align-items: center; gap: 8px; }
.comecar-ficha ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); }
@media (min-width: 900px) { .comecar-ficha { grid-template-columns: 1fr auto; } }
.evento-dados { display: grid; gap: 12px; margin-top: 30px; }
.evento-dados > div { display: flex; gap: 14px; align-items: baseline; font-size: 16px; }
.evento-dados dt { min-width: 7em; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.evento-dados dd { color: var(--titulo); }

/* ---------------------------------------------------------------- ficha tela a tela */
.ficha { position: fixed; inset: 0; z-index: 150; background: var(--fundo); display: grid; grid-template-rows: auto 1fr auto; visibility: hidden; opacity: 0; transition: opacity var(--medio) var(--mola), visibility 0s var(--medio); }
.ficha.aberta { visibility: visible; opacity: 1; transition: opacity var(--medio) var(--mola), visibility 0s; }
.ficha-barra { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(var(--progresso, 0)); transition: transform 520ms var(--mola); }
.ficha-topo { display: flex; align-items: center; gap: 14px; padding: 14px var(--margem); border-bottom: 1px solid var(--divisor); }
.ficha-topo .marca svg { height: 34px; }
.ficha-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; font-size: 14px; color: var(--apoio); }
.anel { position: relative; width: 46px; height: 46px; flex: none; }
.anel > svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-trilho { fill: none; stroke: var(--divisor); stroke-width: 3; }
.anel-progresso { fill: none; stroke: var(--ouro); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 520ms var(--mola); }
.anel-v { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); fill: var(--ouro); }
.ficha-corpo { position: relative; overflow-y: auto; overscroll-behavior: contain; display: grid; }
.ficha-grade { width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 6vh, 72px) var(--margem) 40px; display: grid; gap: 40px; align-content: start; }
@media (min-width: 1100px) { .ficha-grade { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-content: safe center; align-items: start; min-height: 100%; } }
.ficha-form { position: relative; max-width: 700px; }
.passo { display: grid; gap: 0; }
.passo-num { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--destaque); margin-bottom: 12px; }
.passo-num svg { width: 16px; height: 16px; }
.pergunta { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -.024em; color: var(--titulo); font-variation-settings: "opsz" 96; padding: 0; outline: none; }
.pergunta-ajuda { margin-top: 12px; font-size: 16.5px; color: var(--apoio); max-width: 34em; }
.passo-campo { margin-top: 30px; }
.grande { width: 100%; border: 0; border-bottom: 2px solid var(--controle); background: transparent; padding: 10px 0 12px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 500; color: var(--titulo); border-radius: 0; transition: border-color var(--rapido); }
.grande::placeholder { color: color-mix(in srgb, var(--apoio) 55%, transparent); }
.grande:focus { outline: none; border-bottom-color: var(--destaque); }
.grande[aria-invalid="true"] { border-bottom-color: var(--erro-tx); }
.opcoes { display: grid; gap: 10px; max-width: 560px; }
.opcoes.duas { max-width: 640px; }
@media (min-width: 640px) { .opcoes.duas { grid-template-columns: 1fr 1fr; } }
.opcao { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; min-height: 58px; padding: 10px 16px 10px 12px; border-radius: var(--raio-p); border: 1.5px solid var(--controle); background: color-mix(in srgb, var(--superficie) 50%, transparent); cursor: pointer; font-size: 17.5px; color: var(--titulo); transition: border-color var(--rapido), background-color var(--rapido), transform var(--rapido) var(--mola); }
.opcao:active { transform: scale(.985); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao kbd { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--controle); font: 600 13px/1 var(--fonte); color: var(--apoio); background: var(--fundo); transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido); }
.opcao small { font-size: 15px; color: var(--apoio); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcao:has(input:checked) { border-color: var(--destaque); background: var(--ouro-veu); font-weight: 600; }
.opcao:has(input:checked) kbd { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.opcao:has(input:checked) small { color: var(--destaque); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcao.pisca { animation: pisca 420ms var(--mola); }
@keyframes pisca { 0% { transform: scale(1); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) { .opcao:hover { border-color: var(--apoio); } }
.multi-dica { font-size: 14px; color: var(--apoio); margin-bottom: 12px; }
.ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.tecla { font-size: 13.5px; color: var(--apoio); }
.tecla kbd { font: 600 12px/1 var(--fonte); padding: 4px 7px; border-radius: 6px; border: 1px solid var(--divisor); color: var(--corpo); }
@media (hover: none) { .tecla { display: none; } }
.consentimento { margin-top: 22px; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--corpo); cursor: pointer; max-width: 36em; }
.consentimento input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ouro); }
.feedback { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ouro-veu); color: var(--titulo); font-size: 15.5px; }
.feedback b { color: var(--destaque); }
.revisao { display: grid; border-top: 1px solid var(--divisor); margin-top: 26px; }
.revisao > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--divisor); }
.revisao dt { grid-column: 1; font-size: 13.5px; color: var(--apoio); }
.revisao dd { grid-column: 1; font-size: 17px; color: var(--titulo); }
.revisao button, .revisao a { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.link { background: none; border: 0; padding: 0; color: var(--destaque); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: 15px; min-height: 44px; }
.ficha-lado { display: none; }
@media (min-width: 1100px) { .ficha-lado { display: block; position: sticky; top: 0; align-self: center; } }
.lado-cartao { padding: 26px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--divisor); box-shadow: var(--sombra); }
.lado-cartao h2 { font-size: 17px; font-weight: 600; color: var(--titulo); }
.lado-itens { margin-top: 14px; display: grid; }
.lado-itens li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--divisor); font-size: 14.5px; }
.lado-itens li span:first-child { color: var(--apoio); }
.lado-itens li span:last-child { color: var(--titulo); text-align: right; font-weight: 500; }
.lado-plano { margin-top: 16px; padding: 16px; border-radius: var(--raio-p); background: var(--fundo); }
.lado-plano span { font-size: 13.5px; color: var(--apoio); }
.lado-plano strong { display: block; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; margin-top: 4px; }
.lado-nota { margin-top: 14px; font-size: 13.5px; color: var(--apoio); }
.ficha-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--divisor); }
.ficha-pe .legal { max-width: 40em; }
.passo.entra { animation: entra 460ms var(--mola) both; }
.passo.entra-volta { animation: entraVolta 460ms var(--mola) both; }
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes entraVolta { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
.fim-anel { width: 84px; height: 84px; margin-bottom: 22px; }
.fim-anel .anel-progresso { stroke-dashoffset: 0; }
.fim-plano { margin: 24px 0 8px; padding: 20px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--divisor); max-width: 520px; }
.fim-plano span { display: block; font-size: 14px; color: var(--apoio); }
.fim-plano strong { display: block; font-size: 36px; line-height: 1.1; letter-spacing: -.02em; margin-top: 4px; }
.fim-plano p { font-size: 15px; margin-top: 8px; }
.protocolo { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--apoio); }
.protocolo b { font-size: 24px; letter-spacing: .06em; color: var(--destaque); }
.fim-fila { margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-p); background: var(--ouro-veu); color: var(--titulo); font-size: 15px; max-width: 34em; }
.fim-acoes { display: grid; gap: 10px; margin-top: 24px; max-width: 420px; }
.aviso-teste { position: fixed; z-index: 95; top: calc(var(--topo) + 6px); left: 12px; right: 12px; margin: 0 auto; width: fit-content; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--noite); background: var(--ouro); border-radius: 999px; padding: 5px 12px; pointer-events: none; }
.aviso-teste p { margin: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; font: inherit; }
.ficha .aviso-teste-ficha { font-size: 12px; font-weight: 600; color: var(--noite); background: var(--ouro); border-radius: 999px; padding: 3px 9px; }
.estande .ficha-pe .legal { display: none; }

/* ---------------------------------------------------------------- chamada final e rodapé */
.chamada { text-align: center; }
.chamada .titulo-2 { margin: 0 auto; }
.chamada .acoes { justify-content: center; }
.rodape { position: relative; background: var(--fundo); border-top: 1px solid var(--divisor); padding: 72px 0 calc(40px + env(safe-area-inset-bottom)); }
.rodape-grade { display: grid; gap: 40px; }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: 1.3fr 1fr 1fr; } }
.rodape .marca svg { height: 72px; }
.rodape-slogan { margin-top: 18px; font-size: 18px; color: var(--titulo); font-weight: 500; }
.rodape h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); margin-bottom: 14px; }
.rodape nav ul { display: grid; gap: 2px; }
.rodape nav a { display: inline-flex; min-height: 40px; align-items: center; color: var(--corpo); text-decoration: none; font-size: 15.5px; }
.rodape nav a:hover { color: var(--titulo); }
.rodape-rt { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--divisor); display: grid; gap: 10px; }
.rodape-base { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.cookies { position: fixed; z-index: 140; left: 12px; right: 12px; bottom: 12px; max-width: 520px; padding: 18px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--divisor); box-shadow: var(--sombra); display: grid; gap: 14px; font-size: 14.5px; }
.cookies div { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- privacidade e páginas de texto */
.texto-longo { max-width: 46rem; }
.texto-longo h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; color: var(--titulo); margin: 48px 0 14px; letter-spacing: -.015em; }
.texto-longo h3 { margin: 28px 0 8px; }
.texto-longo p, .texto-longo li { font-size: 16.5px; margin-top: 12px; }
.texto-longo ul { list-style: disc; padding-left: 22px; }
.texto-longo table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.texto-longo th, .texto-longo td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--divisor); vertical-align: top; }
.texto-longo th { color: var(--titulo); }

/* ---------------------------------------------------------------- troca de página e de tema */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--mola) both sai; }
::view-transition-new(root) { animation: 380ms var(--mola) both chega; }
@keyframes sai { to { opacity: 0; transform: translateY(-8px); } }
@keyframes chega { from { opacity: 0; transform: translateY(10px); } }
html.trocando-tema::view-transition-old(root) { animation: none; }
html.trocando-tema::view-transition-new(root) { animation: 620ms var(--mola) both revela-tema; }
@keyframes revela-tema { from { clip-path: circle(0 at var(--tx, 90%) var(--ty, 40px)); } to { clip-path: circle(var(--tr, 150vmax) at var(--tx, 90%) var(--ty, 40px)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js [data-revela] { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ficha no celular: status só para leitor de tela, ações presas no pé */
.ficha-status [data-ficha-status] { white-space: nowrap; }
@media (max-width: 559px) { .ficha-status [data-ficha-status] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 1099px) {
  .ficha-acoes { position: sticky; bottom: 0; z-index: 2; margin: 24px calc(-1 * var(--margem)) 0; padding: 14px var(--margem); background: var(--fundo); border-top: 1px solid var(--divisor); }
  .ficha-grade { padding-bottom: 0; }
}

.cabecalho .titulo-slogan { font-size: clamp(34px, 5.6vw, 68px); }
@media (min-width: 960px) { .dividida-larga { grid-template-columns: 1.3fr .7fr; } }
.cartao .enviado { padding: 0; border: 0; background: none; }