/* =============================================================================
   XF HUB — landing page
   Base: kit/tecnicas.css do guia de landing pages (tokens trocados, técnicas que não
   entram apagadas) + CSS próprio da página. Briefing, conceito e roteiro em
   landing/xfhub-fonte/DIRECAO.md.

   FICHA DE DIREÇÃO DE ARTE
   Tema: claro. Papel frio #F4F4F1 com folhas brancas; tinta só no editor de código, no cartão
     de segurança e no bloco do CTA final.
   Fundo / superfície / superfície 2: #F4F4F1 / #FFFFFF / #ECECE7
                                     tinta #121315 / editor #141518 / #1C1E22
   Texto principal / apoio: #121315 / #5E6166 no papel; #F4F4F1 / #9A9EA6 na tinta
   Borda (alfa) / borda forte: tinta a 10% / tinta a 18% no papel; branco a 8% / 14% na tinta
   Acento + tom vizinho: vermelho de caneta #D62B23 → #A81A15; na tinta, #FF5247
   Fonte: Instrument Serif (títulos e a voz do mentor, em itálico) + Inter Tight (texto, menu,
     botões). Código no monoespaçado do sistema.
   Escala (computador / celular):
     H1 92/0.96/400, -0.02em (48) · H2 62/1.02/400 (38) · título de cartão 22/1.2/600 (20)
     apoio grande 21/1.45/300/+0.3px (16) · texto de cartão 15/1.5/400 (14)
     nota do mentor 21/1.15 itálico (18) · rótulo 13/500 (12) · menu 14/500 · botão 15/600
   Raios: pílula 90 / botão 14 / cartão 22 / painel interno 14 / folha 28 / bloco 40 (celular 28)
     / cabeçalho 18
   Duas vozes: título em serifada romana (você) + itálico (o mentor). No H1 o itálico é vermelho;
     nos H2 é cinza, para o vermelho ficar só com a caneta.
   Botão: tecla sólida de tinta, raio 14, com um quadradinho de papel e a seta; no hover o
     quadradinho fica vermelho. No CTA final o botão é o quadrado vermelho do símbolo.
   Rótulo: pílula cinza (#E6E6E0, borda de tinta a 8%).
   Assinatura visual: a caneta do mentor. Círculos, setas, sublinhado ondulado, riscos e sinal de
     inserção em vermelho, desenhados à mão, com notas em serifada itálica, por cima de coisas
     reais (código gerado por IA, escopo de SaaS, pedido para a IA, segurança de conta). Abre o
     herói, volta nas trilhas e circula o botão do CTA final. O traço se desenha ao aparecer.
   Técnicas do kit que entram: cabeçalho de vidro (claro), entrada ao carregar, revelação ao rolar
     (.baixo, uma vez só, sem esconder de novo ao subir), rótulo pílula (cinza), bento (grade própria de
     12 colunas), CTA final com objeto por trás (o símbolo gigante, com o botão no centro),
     rolagem lateral bloqueada.
   Ficam de fora: botão vivo e faixa de luz (brilho não combina com papel e caneta); botão tecla
     com sombra dura (é da XF TECH); título em degradê (as duas vozes aqui são romano + itálico);
     vidro, moldura fina e moldura dupla (a 4Pay acabou de usar moldura dupla); cartões que se
     empilham (o processo tem 4 passos curtos: lista numerada lê melhor); faixa infinita e de
     integrações (não há parceiros reais informados); luz vinda de cima (xFlow); folha clara de
     raio 63 e cartão escuro com luz (XF TECH); imagem que vaza.
   ============================================================================= */

/* ---------- Fontes (hospedadas junto, SIL OFL 1.1 em fontes/OFL.txt) ----------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/instrument-serif-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/instrument-serif-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fontes/instrument-serif-italico-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fontes/instrument-serif-italico-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fontes/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fontes/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 0. Tokens ---------------------------------------------------------- */
:root {
  --fonte: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serifa: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fundo: #F4F4F1;
  --superficie: #FFFFFF;
  --superficie-2: #ECECE7;
  --texto: #121315;
  --texto-2: #4F5257;          /* apoio: 7,6:1 no papel (era #5E6166, mais claro) */
  --borda: rgba(18, 19, 21, .10);
  --borda-forte: rgba(18, 19, 21, .18);
  --tinta: #121315;
  --editor: #141518;
  --editor-2: #1C1E22;
  --tinta-texto-2: #9A9EA6;
  --acento: #D62B23;
  --acento-2: #A81A15;
  --acento-tinta: #FF5247;          /* o vermelho da caneta sobre fundo escuro */
  --raio-pilula: 90px; --raio-botao: 14px; --raio-cartao: 22px; --raio-painel: 14px; --raio-folha: 28px; --raio-bloco: 40px;
  --largura: 1140px;
}

/* ---------- 1. Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
a { color: inherit; }
ins { text-decoration: none; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.conteudo { width: min(100% - 48px, var(--largura)); margin-inline: auto; }
.equilibrar { text-wrap: balance; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: 110px; }
@media (max-width: 767px) { .conteudo { width: min(100% - 32px, var(--largura)); } }

/* ---------- 2. Cabeçalho flutuante de vidro claro ------------------------------ */
/* kit: fixed, largura 97%, borda 1px, blur. Aqui no papel: raio 18 e borda de tinta a 8%. */
.cabecalho {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(97%, 1180px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 10px 10px 22px; border-radius: 18px;
  border: 1px solid rgba(18, 19, 21, .08); background: rgba(244, 244, 241, .78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cabecalho nav { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
.cabecalho nav a { text-decoration: none; color: rgba(18, 19, 21, .78); transition: color .2s; }
.cabecalho nav a:hover { color: var(--texto); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; letter-spacing: -.01em; line-height: 1; }
.logo svg { width: 28px; height: 28px; }
.logo b { font-weight: 700; } .logo span { font-weight: 400; }
@media (max-width: 900px) { .cabecalho nav { display: none; } }
@media (max-width: 767px) { .cabecalho { top: 10px; width: calc(100% - 20px); padding: 8px 8px 8px 14px; border-radius: 16px; } .logo { font-size: 17px; } .logo svg { width: 25px; height: 25px; } }

/* ---------- 3. Rótulo: pílula cinza ------------------------------------------- */
.rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1;
  padding: 9px 16px; border-radius: var(--raio-pilula); background: #E6E6E0; border: 1px solid rgba(18, 19, 21, .08); color: #2A2C30; }
.rotulo--tinta { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); color: #D9DAD6; }
@media (max-width: 767px) { .rotulo { font-size: 12px; padding: 8px 14px; } }

/* ---------- 4. Títulos e textos ------------------------------------------------ */
.h1 { font-family: var(--serifa); font-weight: 400; font-size: 92px; line-height: .96; letter-spacing: -.02em; margin: 0; }
.h2 { font-family: var(--serifa); font-weight: 400; font-size: 62px; line-height: 1.02; letter-spacing: -.015em; margin: 0; }
.h1 em, .h2 em { font-style: italic; }
.h2 em { color: #6B6E73; }
.apoio { font-size: 21px; line-height: 1.5; font-weight: 400; letter-spacing: .1px; color: var(--texto-2); text-wrap: pretty; }
.apoio strong { font-weight: 500; color: var(--texto); }
@media (max-width: 1024px) { .h1 { font-size: 72px; } .h2 { font-size: 50px; } }
@media (max-width: 767px) {
  .h1 { font-size: 48px; line-height: 1; }
  .h2 { font-size: 38px; line-height: 1.04; }
  .apoio { font-size: 16px; letter-spacing: .2px; }
}

/* ---------- 5. Botão: tecla sólida de tinta ------------------------------------- */
.botao { display: inline-flex; align-items: center; gap: 16px; padding: 9px 9px 9px 24px; border-radius: var(--raio-botao);
  background: var(--tinta); color: #F4F4F1; text-decoration: none; font: 600 15px/1.2 var(--fonte); letter-spacing: .1px;
  transition: transform .25s ease, background .25s ease; }
.botao .seta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #F4F4F1; color: var(--tinta);
  transition: background .25s ease, color .25s ease, transform .25s ease; }
.botao .seta svg { width: 18px; height: 18px; }
.botao:hover { transform: translateY(-2px); background: #24262A; }
.botao:hover .seta { background: var(--acento); color: #fff; transform: translateX(3px); }
.botao:active { transform: translateY(0); opacity: .85; }
.botao--pequeno { padding: 7px 7px 7px 16px; gap: 12px; font-size: 14px; border-radius: 11px; }
.botao--pequeno .seta { width: 30px; height: 30px; border-radius: 8px; }
.botao--pequeno .seta svg { width: 15px; height: 15px; }
.link-seco { font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--borda-forte); padding-bottom: 2px; transition: border-color .2s; }
.link-seco:hover { border-color: var(--texto); }
@media (max-width: 767px) { .botao:not(.botao--pequeno) { width: 100%; justify-content: space-between; min-height: 60px; font-size: 16px; } }

/* ---------- 6. Entrada ao carregar e revelação ao rolar (kit) ------------------- */
/* Só esconde quando o JS está ativo (html.js); sem JS, tudo aparece. */
@keyframes surgir { from { opacity: 0; filter: blur(7px); transform: translateY(60px); } to { opacity: 1; filter: blur(0); transform: none; } }
.js .surgir { animation: surgir .6s ease backwards; }
.surgir--1 { animation-delay: .15s; } .surgir--2 { animation-delay: .35s; } .surgir--3 { animation-delay: .6s; }
.js .baixo { opacity: 0; filter: blur(10px); transition: opacity .8s, transform .8s, filter .8s; }
.js .baixo { transform: translateY(30px); }
.js .baixo.ativo { opacity: 1; filter: blur(0); transform: none; }
.atraso-1 { transition-delay: .15s !important; } .atraso-2 { transition-delay: .3s !important; } .atraso-3 { transition-delay: .45s !important; }

/* ---------- 7. A caneta do mentor (assinatura) ---------------------------------- */
/* Cada traço é um path com pathLength="1": desenhado = dashoffset 0 (estado-base, que é o que
   aparece sem JS, com movimento reduzido e nas capturas). Ao rolar, o revelar.js liga .ativo
   no .caneta; no herói, a animação começa com o traço apagado (fill-mode backwards). */
.traco { fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.traco path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.na-tinta .traco { stroke: var(--acento-tinta); }
.js .caneta:not(.ativo) .traco path { stroke-dashoffset: 1; }
.js .caneta .traco path { transition: stroke-dashoffset .7s cubic-bezier(.6, .1, .3, 1) var(--d, 0s); }
.js .caneta:not(.ativo) .nota { opacity: 0; transform: translateY(6px); }
.js .caneta .nota { transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
@keyframes tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes anotar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.js .heroi .traco path { animation: tracar .7s cubic-bezier(.6, .1, .3, 1) backwards; animation-delay: var(--d, 0s); }
.js .heroi .nota { animation: anotar .5s ease backwards; animation-delay: var(--d, 0s); }
/* A nota: a voz do mentor */
.nota { font-family: var(--serifa); font-style: italic; font-size: 23px; line-height: 1.17; color: var(--acento); letter-spacing: 0; }
.na-tinta .nota { color: var(--acento-tinta); }
/* Marcações presas a um trecho de texto: o SVG cobre o trecho com folga */
.marca { position: relative; display: inline-block; }
.marca > svg { position: absolute; pointer-events: none; overflow: visible; }
.marca--circulo > svg { left: -10px; top: -9px; width: calc(100% + 22px); height: calc(100% + 18px); }
.marca--risco > svg { left: -6px; top: 50%; width: calc(100% + 12px); height: 14px; margin-top: -5px; }
.marca--onda > svg { left: -2px; bottom: -9px; width: calc(100% + 4px); height: 10px; }
@media (prefers-reduced-motion: reduce) {
  .js .surgir, .js .baixo { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .caneta .traco path, .js .heroi .traco path { stroke-dashoffset: 0 !important; animation: none !important; transition: none !important; }
  .js .caneta .nota, .js .heroi .nota { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 8. Herói ------------------------------------------------------------ */
.heroi { padding: 168px 0 0; }
.heroi__topo { display: grid; grid-template-columns: 1fr; gap: 30px; }
.heroi__topo .rotulo { justify-self: start; }
.heroi .h1 { max-width: 1000px; }
.heroi .h1 .voz-mentor { display: block; color: var(--acento); text-wrap: balance; }
.heroi__base { display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: space-between; align-items: end; gap: 40px; margin-top: 8px; }
.heroi__acoes { display: flex; align-items: center; gap: 28px; }
@media (max-width: 1024px) { .heroi__base { grid-template-columns: 1fr; align-items: start; gap: 28px; } .heroi__base .apoio { max-width: 640px; } }
@media (max-width: 767px) {
  .heroi { padding-top: 118px; }
  .heroi__topo { gap: 20px; }
  .heroi__base { gap: 24px; margin-top: 0; }
  .heroi__acoes { flex-direction: column; align-items: stretch; gap: 18px; }
  .heroi__acoes .link-seco { align-self: center; }
}

/* A folha da revisão: o código gerado pela IA com as marcações do mentor nas margens */
.revisao__legenda { display: flex; align-items: center; gap: 10px; margin: 64px 0 14px; font-size: 15px; color: var(--texto-2); }
.revisao__legenda::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--acento); }
.revisao { position: relative; margin: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-folha);
  padding: 56px 0; }
/* moldura fixa de 1140 × 510 px centralizada na folha: as notas e as setas usam essas coordenadas */
.revisao__margem { position: absolute; top: 0; left: 50%; width: 1140px; height: 510px; margin-left: -570px; pointer-events: none; }
.revisao__margem .nota { position: absolute; width: 214px; }
.revisao__margem svg.traco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.nota--chave { left: 30px; top: 178px; text-align: right; }
.nota--funcao { right: 26px; top: 112px; }
.nota--prompt { right: 26px; top: 322px; }
.editor { width: 600px; margin-inline: auto; background: var(--editor); color: #C9CBD1; border-radius: 16px; position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }
.editor__barra { height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 13px; }
.editor__aba { display: flex; align-items: center; gap: 10px; color: #E7E7E3; font-weight: 500; }
.editor__aba i { font-style: normal; font-size: 11px; color: #A3A7AF; padding: 4px 9px; border-radius: var(--raio-pilula); background: rgba(255, 255, 255, .07); }
.editor__contagem { font-family: var(--mono); font-size: 12px; color: var(--acento-tinta); }
.editor pre { margin: 0; padding: 18px 22px 22px 0; font: 14px/26px var(--mono); white-space: normal; counter-reset: linha; overflow: visible; }
.editor pre code { font: inherit; display: block; }
.editor .l { display: block; position: relative; padding-left: 48px; min-height: 26px; white-space: pre; }
.editor .l::before { counter-increment: linha; content: counter(linha); position: absolute; left: 0; width: 30px; text-align: right; color: #565A62; }
.k { color: #F0F0EC; font-weight: 600; } .s { color: #E3B98B; } .f { color: #A9C6F2; }
.editor .marcador { display: none; }
.editor .ok { position: absolute; right: -2px; top: -4px; width: 32px; height: 32px; }
@media (max-width: 1187px) {
  .revisao { padding: 18px 18px 22px; border-radius: 22px; }
  .revisao__margem { display: none; }
  .editor { width: 100%; }
  .editor .marcador { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; margin-left: 8px; vertical-align: 1px;
    background: var(--acento-tinta); color: #141518; font: 700 11px/1 var(--fonte); }
  .notas-lista { display: grid !important; }
}
@media (min-width: 768px) { .editor .marcador--ok { display: none; } }
@media (max-width: 767px) { .editor .ok { display: none; } }
@media (max-width: 380px) { .editor pre { font-size: 10px; line-height: 19px; } .editor .l { min-height: 19px; padding-left: 26px; } .editor .marcador { margin-left: 5px; } }
.notas-lista { display: none; list-style: none; margin: 22px 4px 0; padding: 0; gap: 14px; counter-reset: nota; }
.notas-lista li { display: grid; grid-template-columns: 19px 1fr; gap: 12px; align-items: start; }
.notas-lista li::before { content: attr(data-m); display: grid; place-items: center; width: 19px; height: 19px; margin-top: 2px;
  border-radius: 50%; background: var(--acento); color: #fff; font: 700 11px/1 var(--fonte); }
@media (max-width: 767px) {
  .revisao__legenda { margin: 40px 0 12px; font-size: 14px; }
  .revisao { padding: 10px 10px 20px; border-radius: 20px; }
  .editor { border-radius: 12px; }
  .editor__barra { height: 40px; padding: 0 12px; font-size: 12px; }
  .editor__contagem { display: none; }
  .editor pre { font-size: 11px; line-height: 21px; padding: 12px 10px 14px 0; }
  .editor .l { padding-left: 30px; min-height: 21px; }
  .editor .l::before { width: 18px; }
  .editor .ok { width: 26px; height: 26px; top: -3px; }
  .notas-lista .nota { font-size: 19px; }
}

/* ---------- 9. O que é ---------------------------------------------------------- */
.secao { padding: 150px 0 110px; }
.centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.o-que-e { padding-bottom: 100px; }
.o-que-e .h2 { width: 82%; margin-top: 26px; }
.o-que-e .apoio { width: 60%; margin-top: 24px; }
.nao-e { list-style: none; padding: 0; margin: 60px 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 24px; line-height: 1.3; font-weight: 400; color: #6B6E73; letter-spacing: -.005em; }
.nao-e li:last-child { margin-top: 22px; font-family: var(--serifa); font-size: 40px; line-height: 1.1; letter-spacing: -.01em; color: var(--texto); }
@media (max-width: 767px) {
  .secao { padding: 90px 0 64px; }
  .o-que-e { padding-bottom: 64px; }
  .como { padding: 70px 0 56px; }
  .o-que-e .h2, .o-que-e .apoio { width: 100%; }
  .nao-e { font-size: 18px; margin-top: 40px; gap: 10px; }
  .nao-e li:last-child { margin-top: 14px; font-size: 28px; }
}

/* ---------- 10. Trilhas (bento de 12 colunas) ------------------------------------ */
.trilhas { padding: 90px 0 100px; }
.cabeca-secao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 40px; margin-bottom: 56px; }
.cabeca-secao .h2 { margin-top: 22px; }
.cabeca-secao .apoio { font-size: 18px; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.trilha { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 12px; display: flex; flex-direction: column; overflow: hidden; }
.trilha--a { grid-column: span 7; } .trilha--b { grid-column: span 5; } .trilha--c { grid-column: span 12; }
.trilha__texto { padding: 22px 20px 26px; }
.trilha__num { font-size: 13px; font-weight: 500; color: var(--texto-2); letter-spacing: .2px; }
.trilha h3 { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; margin: 10px 0 10px; }
.trilha__texto p { font-size: 16px; line-height: 1.55; color: var(--texto-2); max-width: 46ch; text-wrap: pretty; }
.painel { position: relative; flex: 1; min-height: 300px; border-radius: var(--raio-painel); background: var(--superficie-2); overflow: hidden; }
/* folha de papel solta dentro do painel */
.papel { position: absolute; background: #fff; border-radius: 10px; border: 1px solid rgba(18, 19, 21, .08);
  box-shadow: 0 1px 2px rgba(18, 19, 21, .06), 0 22px 36px -24px rgba(18, 19, 21, .35); }
/* A — escopo da v1 */
.escopo { left: 34px; top: 34px; width: 330px; padding: 20px 24px 26px; transform: rotate(-1.2deg); }
.escopo h4, .pedido h4, .conta h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8A8D92; }
.escopo ul, .conta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; }
.escopo li { display: flex; align-items: center; gap: 10px; }
.caixa { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #B9BBBE; flex: none; display: grid; place-items: center; }
.caixa--ok { background: var(--tinta); border-color: var(--tinta); }
.caixa--ok::after { content: ""; width: 7px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.cortado { color: #9A9DA2; }
.escopo .marca { white-space: nowrap; }
.nota--escopo { position: absolute; left: 392px; top: 150px; width: 214px; }
.seta--escopo { position: absolute; left: 300px; top: 118px; width: 110px; height: 90px; }
.nota--nucleo { position: absolute; left: 392px; top: 42px; width: 214px; }
.seta--nucleo { position: absolute; left: 286px; top: 52px; width: 104px; height: 40px; }
/* B — pedido para a IA: a folha e a nota em coluna (o texto inserido muda a altura) */
.painel--pedido { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 30px 28px; }
.pedido { position: relative; padding: 18px 20px 18px; transform: rotate(.8deg); }
.pedido__texto { font-size: 17px; line-height: 1.5; color: var(--texto); }
.pedido__rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 12px; color: #8A8D92; }
.pedido__enviar { width: 30px; height: 30px; border-radius: 9px; background: var(--tinta); display: grid; place-items: center; color: #fff; }
.pedido__enviar svg { width: 14px; height: 14px; }
.pedido__texto ins { font-size: 19px; }
.circunflexo { display: inline-block; width: 12px; height: 11px; margin: 0 3px 0 1px; vertical-align: -1px; overflow: visible; }
.nota--contexto { font-size: 21px; padding-left: 4px; }
/* C — segurança digital (cartão de tinta) */
.trilha--c { background: var(--tinta); border-color: var(--tinta); color: #F4F4F1; flex-direction: row; align-items: stretch; }
.trilha--c .trilha__texto { flex: 0 0 40%; padding: 34px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.trilha--c .trilha__num, .trilha--c .trilha__texto p { color: var(--tinta-texto-2); }
.trilha--c .painel { background: var(--editor-2); min-height: 340px; }
.conta { left: 40px; top: 40px; width: 380px; padding: 22px 24px 24px; background: #26292E; border-color: rgba(255, 255, 255, .08); color: #E7E7E3;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); }
.conta h4 { color: #8E929A; }
.conta ul { gap: 0; font-size: 14px; }
.conta li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.conta li:first-child { border-top: 0; padding-top: 4px; }
.conta li span:first-child { color: #A3A7AF; }
.conta li b { font-weight: 500; }
.conta .bom { color: #E7E7E3; display: inline-flex; align-items: center; gap: 6px; }
.conta .bom::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8E929A; }
.nota--senha { position: absolute; left: 452px; top: 70px; width: 196px; }
.seta--senha { position: absolute; left: 380px; top: 60px; width: 80px; height: 50px; }
.nota--duas { position: absolute; left: 452px; top: 168px; width: 196px; }
.seta--duas { position: absolute; left: 400px; top: 140px; width: 60px; height: 50px; }
.rodape-trilha { display: flex; gap: 8px; flex-wrap: wrap; }
.etiqueta { font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: var(--raio-pilula); border: 1px solid rgba(255, 255, 255, .12); color: #C9CBD1; }
@media (max-width: 1024px) {
  .cabeca-secao { grid-template-columns: 1fr; gap: 20px; }
  .trilha--a, .trilha--b { grid-column: span 12; }
  .trilha--c { flex-direction: column; }
}
@media (max-width: 767px) {
  .trilhas { padding: 56px 0 60px; }
  .cabeca-secao { margin-bottom: 36px; }
  .bento { gap: 12px; }
  .trilha { padding: 10px; border-radius: 18px; }
  .trilha__texto { padding: 18px 12px 22px; }
  .trilha h3 { font-size: 20px; }
  .trilha__texto p { font-size: 15px; }
  .painel { min-height: 0; }
  .trilha--c .trilha__texto { padding: 22px 14px 24px; gap: 22px; }
  .trilha--c .painel { min-height: 0; }
  /* no celular as folhas saem do absoluto e as notas vêm abaixo, em ordem */
  .painel { display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 20px; }
  .papel, .nota--escopo, .nota--nucleo, .nota--contexto, .nota--senha, .nota--duas { position: static; width: auto; transform: none; }
  .seta--escopo, .seta--nucleo, .seta--senha, .seta--duas { display: none; }
  .escopo { order: 1; } .nota--nucleo { order: 2; } .nota--escopo { order: 3; }
  .painel--pedido { padding: 18px 14px 20px; gap: 14px; }
  .painel > p.nota { font-size: 19px; }
  .painel > p.nota::before { content: "↑ "; font-style: normal; font-family: var(--fonte); font-size: 14px; }
  .pedido__texto { font-size: 16px; } .pedido__texto ins { font-size: 18px; }
}

/* ---------- 11. Como funciona (lista numerada) ------------------------------------ */
.como { padding-top: 110px; }
.como .h2 { margin-top: 22px; max-width: 760px; }
.passos { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--borda-forte); }
.passos li { padding: 28px 28px 0 0; }
.passos li + li { padding-left: 28px; border-left: 1px solid var(--borda); }
.passos .numero { font-family: var(--serifa); font-size: 76px; line-height: .9; display: block; margin-bottom: 26px; }
.passos h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; }
.passos p { font-size: 16px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }
@media (max-width: 1024px) { .passos { grid-template-columns: repeat(2, 1fr); } .passos li:nth-child(3) { border-left: 0; padding-left: 0; } .passos li:nth-child(n+3) { padding-top: 40px; } }
@media (max-width: 767px) {
  .passos { grid-template-columns: 1fr; margin-top: 40px; }
  .passos li, .passos li + li { display: grid; grid-template-columns: 54px 1fr; gap: 0 14px; padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--borda); }
  .passos li:nth-child(n+3) { padding-top: 24px; }
  .passos .numero { font-size: 52px; margin: 0; grid-row: span 2; }
  .passos h3 { font-size: 18px; margin-bottom: 6px; }
  .passos p { font-size: 15px; }
}

/* ---------- 12. Para quem é ----------------------------------------------------- */
.publico { padding: 120px 0 110px; }
.publico .h2 { margin-top: 22px; }
.lista-publico { list-style: none; margin: 56px 0 0; padding: 0; border-bottom: 1px solid var(--borda-forte); }
.lista-publico li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 300px; align-items: baseline; gap: 24px; padding: 30px 0; border-top: 1px solid var(--borda-forte); }
.linha-num { font-size: 13px; font-weight: 500; color: var(--texto-2); letter-spacing: .3px; }
.lista-publico p { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.015em; max-width: 36ch; text-wrap: balance; }
.lista-publico .trilhas-da-linha { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lista-publico .etiqueta { border-color: var(--borda-forte); color: #2A2C30; font-size: 13px; padding: 7px 13px; }
@media (max-width: 767px) {
  .publico { padding: 64px 0 50px; }
  .lista-publico { margin-top: 36px; }
  .lista-publico li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px 6px; padding: 22px 0; }
  .lista-publico .trilhas-da-linha { grid-column: 2; }
  .lista-publico p { font-size: 18px; }
  .lista-publico .trilhas-da-linha { justify-content: flex-start; }
}

/* ---------- 12b. Compromissos: o que a XF HUB garante por escrito ---------------- */
.compromissos { padding: 30px 0 100px; }
.compromissos__folha { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 32px 64px; padding: 56px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-folha); }
.compromissos__titulo .h2 { margin-top: 22px; font-size: 48px; }
.compromissos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 44px; }
.compromissos__lista li { position: relative; padding-left: 46px; }
.compromissos__lista svg { position: absolute; left: 0; top: -4px; width: 32px; height: 32px; overflow: visible; }
.compromissos__lista h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.compromissos__lista p { font-size: 15.5px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }
.compromissos__empresa { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--texto-2); }
.compromissos__empresa a { color: var(--texto); text-decoration-color: var(--acento); text-underline-offset: 3px; }
@media (max-width: 1024px) { .compromissos__folha { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .compromissos { padding: 10px 0 60px; }
  .compromissos__folha { padding: 30px 20px; border-radius: 20px; gap: 28px; }
  .compromissos__titulo .h2 { font-size: 34px; }
  .compromissos__lista { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- 13. Perguntas frequentes -------------------------------------------- */
.faq { padding: 110px 0 140px; }
.faq__grade { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 60px; align-items: start; }
.faq__grade .h2 { margin: 22px 0 22px; }
.faq__grade .apoio { font-size: 17px; }
.faq__lista { display: grid; gap: 10px; }
.faq details { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; transition: border-color .2s; }
.faq details[open] { border-color: var(--borda-forte); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; font-size: 18px; font-weight: 500; letter-spacing: -.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mais { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borda-forte); transition: transform .3s ease, background .3s; }
.faq summary .mais::before, .faq summary .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--texto); transform: translate(-50%, -50%); }
.faq summary .mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .mais { transform: rotate(45deg); background: var(--superficie-2); }
.faq details p { padding: 0 24px 24px; font-size: 16px; line-height: 1.55; color: var(--texto-2); max-width: 62ch; text-wrap: pretty; }
.faq details p a { color: var(--texto); text-decoration-color: var(--acento); text-underline-offset: 3px; }
@media (max-width: 1024px) { .faq__grade { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 767px) {
  .faq { padding: 60px 0 80px; }
  .faq summary { padding: 18px 18px; font-size: 16px; }
  .faq details p { padding: 0 18px 20px; font-size: 15px; }
}

/* ---------- 14. Contato: o formulário no centro do símbolo ------------------------- */
/* Os quatro braços do X da marca saem dos cantos do cartão do formulário (o "hub"), com o
   encaixe em volta dele. Cada braço é o mesmo desenho (#braco), espelhado por canto. */
.cta { padding: 0 0 26px; }
.cta-final { --folga: 20px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 64px; align-items: start; padding: 96px 64px; background: var(--tinta); color: #F4F4F1; border-radius: var(--raio-bloco); }
.cta-final > * { position: relative; z-index: 2; }
.cta-final > .cta-final__hub { z-index: 1; }
.cta-final__texto { padding-top: 34px; }
.cta-final .h2 { margin-top: 24px; font-size: 50px; }
.cta-final .h2 em { display: block; }
.cta-final .h2 em { color: #A3A7AF; }
.cta-final .apoio { margin-top: 22px; color: #C2C5CA; max-width: 36ch; }
.cta-final__passos { list-style: none; margin: 38px 0 0; padding: 0; display: grid; gap: 16px; font-size: 16px; line-height: 1.45; color: #E2E3DF; }
.cta-final__passos li { display: flex; gap: 14px; align-items: flex-start; }
.cta-final__passos b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; border-radius: 8px;
  background: rgba(255, 255, 255, .09); font-size: 13px; font-weight: 600; color: #F4F4F1; }
.cta-final__hub { position: relative; }
.braco { position: absolute; z-index: -1; width: 990px; height: 990px; pointer-events: none; overflow: visible; }
.braco--te { left: calc(-1 * var(--folga) - 930px); top: calc(-1 * var(--folga) - 930px); }
.braco--td { left: calc(100% + var(--folga) - 60px); top: calc(-1 * var(--folga) - 930px); transform: scaleX(-1); }
.braco--be { left: calc(-1 * var(--folga) - 930px); top: calc(100% + var(--folga) - 60px); transform: scaleY(-1); }
.braco--bd { left: calc(100% + var(--folga) - 60px); top: calc(100% + var(--folga) - 60px); transform: scale(-1); }
.nota--comece { position: absolute; right: 26px; top: -66px; font-size: 24px; white-space: nowrap; }
.seta--comece { position: absolute; right: 190px; top: -46px; width: 60px; height: 44px; overflow: visible; }

/* o cartão do formulário */
.contato { position: relative; padding: 34px 34px 28px; background: #FFFFFF; color: var(--texto); border-radius: 24px;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .75); }
.contato__topo h3 { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.contato__topo p { margin-top: 4px; font-size: 15px; color: var(--texto-2); }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.campo > label, .campo legend { padding: 0; font-size: 14.5px; font-weight: 500; color: var(--texto); }
.campo label .opcional { font-weight: 400; color: var(--texto-2); }
.campo input, .campo select, .campo textarea { width: 100%; padding: 13px 15px; border: 1px solid rgba(18, 19, 21, .2); border-radius: 12px;
  background: #FAFAF8; color: var(--texto); font: 400 16px/1.4 var(--fonte); transition: border-color .2s, box-shadow .2s, background .2s; }
.campo input::placeholder, .campo textarea::placeholder { color: #8A8D92; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background: #FAFAF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23121315' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); background-color: #fff; box-shadow: 0 0 0 4px rgba(214, 43, 35, .14); }
.campo [aria-invalid="true"] { border-color: var(--acento); background-color: #FFF8F7; }
.campo__erro { font-size: 13.5px; line-height: 1.4; color: var(--acento-2); }
.campo__erro:empty { display: none; }
.campo-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao span { display: inline-block; padding: 10px 16px; border: 1px solid rgba(18, 19, 21, .2); border-radius: var(--raio-pilula);
  font-size: 15px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.opcao input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.opcao input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.botao--hub { background: var(--acento); color: #fff; padding: 12px 12px 12px 28px; font-size: 16px; border-radius: 12px; }
.botao--hub .seta { background: #fff; color: var(--acento); }
.botao--hub:hover { background: #E2342C; }
.botao--hub:hover .seta { background: var(--tinta); color: #fff; }
.contato__enviar { width: 100%; justify-content: space-between; margin-top: 24px; border: 0; cursor: pointer; }
.contato__enviar[disabled] { opacity: .65; cursor: progress; transform: none; }
.contato__aviso { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.contato__aviso a { color: var(--texto); text-underline-offset: 2px; }
.contato__status { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--acento-2); }
.contato__status:empty { display: none; }
.contato--ok { padding: 44px 36px 40px; }
.contato--ok svg { width: 64px; height: 64px; overflow: visible; }
.contato--ok h3 { margin: 18px 0 10px; font-family: var(--serifa); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.01em; }
.contato--ok p { font-size: 17px; line-height: 1.55; color: var(--texto-2); }
.contato--ok .link-seco { display: inline-block; margin-top: 22px; }
.contato--ok:focus { outline: none; }
/* caneta acionada pelo script do formulário (o visto do "recebido") */
.js .caneta-manual:not(.ativo) .traco path { stroke-dashoffset: 1; }
.js .caneta-manual .traco path { transition: stroke-dashoffset .8s cubic-bezier(.6, .1, .3, 1) var(--d, .15s); }

@media (max-width: 1024px) {
  .cta-final { grid-template-columns: minmax(0, 1fr); gap: 96px; padding: 80px 48px 72px; }
  .cta-final__texto { padding-top: 0; }
  .cta-final__hub { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 767px) {
  .cta { padding: 0 0 10px; }
  .cta-final { --folga: 12px; gap: 84px; padding: 64px 16px 18px; border-radius: 28px; }
  .cta-final .apoio { font-size: 16px; }
  .cta-final .h2 { font-size: 38px; }
  .cta-final__passos { font-size: 15px; }
  .contato { padding: 26px 18px 22px; border-radius: 20px; }
  .contato__topo h3 { font-size: 21px; }
  .campo-dupla { grid-template-columns: minmax(0, 1fr); }
  .contato--ok { padding: 34px 22px 30px; }
  .contato--ok h3 { font-size: 32px; }
  .nota--comece { right: 8px; top: -58px; font-size: 21px; }
  .seta--comece { right: 170px; top: -38px; }
}
@media (prefers-reduced-motion: reduce) { .js .caneta-manual .traco path { stroke-dashoffset: 0 !important; transition: none !important; } }

/* ---------- 15. Rodapé: marca, site, documentos legais e contato --------------- */
/* Gerado pelo landing/xfhub-fonte/gerar-legais.py (o mesmo em todas as páginas). */
.rodape { padding: 64px 0 40px; border-top: 1px solid var(--borda); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.3fr); gap: 40px; }
.rodape__desc { font-size: 14px; color: var(--texto-2); margin-top: 14px; max-width: 30ch; }
.rodape__coluna { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.rodape__titulo { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8A8D92; margin-bottom: 4px; }
.rodape__coluna a { text-decoration: none; color: rgba(18, 19, 21, .78); font-weight: 500; }
.rodape__coluna a:hover { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.rodape__coluna address { font-style: normal; color: var(--texto-2); line-height: 1.55; margin-top: 4px; }
.rodape__fim { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--texto-2); }
.sem-quebra { white-space: nowrap; }
@media (max-width: 1024px) { .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rodape__marca { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .rodape { padding: 48px 0 30px; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .rodape__coluna:last-child { grid-column: 1 / -1; }
  .rodape__fim { flex-direction: column; gap: 8px; margin-top: 36px; }
}

/* ---------- 16. Páginas legais e 404 ------------------------------------------- */
.doc-topo { padding: 170px 0 56px; border-bottom: 1px solid var(--borda); }
.doc-topo__titulo { margin-top: 22px; }
.doc-topo__data { margin-top: 16px; font-size: 14px; color: var(--texto-2); }
.doc-topo--404 { padding-bottom: 140px; border-bottom: 0; }
.doc-topo--404 .doc-topo__titulo { max-width: 20ch; }
.doc-topo__apoio { margin-top: 20px; }
.doc-topo__acao { margin-top: 32px; }
.doc { display: grid; grid-template-columns: minmax(0, 720px) 250px; justify-content: space-between; gap: 72px; padding: 56px 0 120px; }
.doc__texto { font-size: 17px; line-height: 1.65; color: #2A2C30; min-width: 0; }
.doc__texto p, .doc__texto ul, .doc__texto ol, .doc__texto address { margin: 0 0 14px; }
.doc__texto address { font-style: normal; }
.doc__texto h2 { display: flex; align-items: baseline; gap: 14px; margin: 56px 0 18px; scroll-margin-top: 110px;
  font-family: var(--fonte); font-weight: 600; font-size: 25px; line-height: 1.2; letter-spacing: -.015em; color: var(--texto); }
.doc__texto h2 .n { flex: none; min-width: 22px; font-family: var(--fonte); font-size: 13px; font-weight: 500; letter-spacing: .3px; color: var(--texto-2); }
.doc__texto h3 { margin: 34px 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -.005em; color: var(--texto); }
.doc__texto ul, .doc__texto ol { padding-left: 22px; }
.doc__texto li + li { margin-top: 8px; }
.doc__texto li::marker { color: #8A8D92; }
.doc__texto strong { font-weight: 600; color: var(--texto); }
.doc__texto a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.doc__texto a:hover { color: var(--acento); }
.doc__resumo { position: relative; margin-bottom: 8px; padding: 24px 28px 24px 40px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; }
.doc__resumo strong { display: block; margin-bottom: 6px; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: 25px; line-height: 1.1; color: var(--acento); }
.doc__resumo p { margin: 0; }
.doc__resumo-traco { position: absolute; left: 16px; top: 24px; width: 10px; height: calc(100% - 48px); overflow: visible; }
.doc__ficha { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0 0 18px; overflow: hidden; font-size: 15.5px; line-height: 1.55;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; }
.doc__ficha dt { padding: 14px 18px; font-weight: 600; color: var(--texto); background: #FAFAF8; border-top: 1px solid var(--borda); }
.doc__ficha dd { margin: 0; padding: 14px 18px; border-top: 1px solid var(--borda); }
.doc__ficha dt:first-of-type, .doc__ficha dd:first-of-type { border-top: 0; }
.doc__conta { padding: 14px 18px; border-radius: 12px; background: var(--superficie-2); font-weight: 500; color: var(--texto); }
.doc__indice { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
.doc__indice > a { padding: 6px 0; text-decoration: none; color: rgba(18, 19, 21, .75); font-weight: 500; }
.doc__indice > a:hover { color: var(--texto); }
.doc__indice > a[aria-current="page"] { color: var(--texto); font-weight: 600; }
.doc__secoes { list-style: none; margin: 2px 0 10px; padding: 0 0 0 12px; border-left: 1px solid var(--borda-forte); max-height: 44vh; overflow: auto; }
.doc__secoes a { display: block; padding: 4px 0; font-size: 13px; text-decoration: none; color: var(--texto-2); }
.doc__secoes a:hover { color: var(--texto); }
.doc__contato { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borda); align-self: stretch; color: var(--texto-2); line-height: 1.7; }
.doc__contato a { color: var(--texto); }
.doc__imprimir { margin-top: 14px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--borda-forte); background: transparent; cursor: pointer;
  font: 500 13px var(--fonte); color: var(--texto); }
.doc__imprimir:hover { background: var(--superficie); }
@media (max-width: 1024px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .doc__indice { position: static; padding-top: 32px; border-top: 1px solid var(--borda-forte); }
  .doc__secoes { display: none; }
}
@media (max-width: 767px) {
  .doc-topo { padding: 116px 0 36px; }
  .doc-topo--404 { padding-bottom: 90px; }
  .doc { padding: 32px 0 72px; }
  .doc__texto { font-size: 16px; }
  .doc__texto h2 { margin-top: 44px; font-size: 21px; gap: 10px; }
  .doc__resumo { padding: 20px 18px 20px 32px; }
  .doc__resumo-traco { left: 12px; }
  .doc__ficha { grid-template-columns: minmax(0, 1fr); font-size: 15px; }
  .doc__ficha dt { padding: 12px 16px 2px; background: transparent; border-top: 1px solid var(--borda); }
  .doc__ficha dd { padding: 2px 16px 12px; border-top: 0; }
}
@media print {
  .cabecalho, .rodape, .doc__indice { display: none !important; }
  body { background: #fff; }
  .doc-topo { padding: 0 0 18px; }
  .doc { display: block; padding: 18px 0 0; }
  .doc__texto { color: #000; font-size: 11pt; }
  .doc__texto a { text-decoration: none; color: #000; }
  .doc__resumo, .doc__ficha { break-inside: avoid; border-color: #bbb; }
  .doc__texto h2 { break-after: avoid; }
}