/* ==========================================================
   MONEY MAIS — PÁGINAS INTERNAS (Etapa 8)
   Complementa styles.css (sistema visual da Home, baseline v6, sem alteração).
   Usa os mesmos tokens, a mesma grade e os mesmos componentes.
   ========================================================== */

/* ---------- Navegação: página atual (Etapa 5: peso 600 e sublinhado fino) ---------- */
.cab-nav a[aria-current]{font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.painel-item[aria-current] .painel-t{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.menu-movel nav a[aria-current]{font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.mm-sub a[aria-current]{color:var(--txt)}

/* ---------- Fundos ---------- */
.f-branco{background:var(--branco)}
.f-off{background:var(--off)}

/* ==========================================================
   ABERTURA DE PÁGINA INTERNA
   Rótulo + H1 em Display + texto de abertura; altura do conteúdo.
   ========================================================== */
.ab{position:relative; padding:calc(var(--cabh) + var(--pausa) * .75) 0 var(--pausa); background:var(--off)}
.ab-txt .display{margin-top:12px}
.ab-txt .lead{max-width:600px}
.ab-comp{display:block; margin-top:8px}
.ab-comp + .display{margin-top:12px}
.ab .legenda{margin-top:24px; max-width:600px}
@media (min-width:768px){ .ab-txt{max-width:75%} .ab-txt .display, .ab-comp + .display{margin-top:16px} }
@media (min-width:1200px){
  .ab-txt{max-width:calc(7 * ((100% - 264px) / 12) + 144px)}
  .ab-larga .ab-txt{max-width:calc(8 * ((100% - 264px) / 12) + 168px)}
}

/* Abertura com botão (/contato e /404) */
.ab-acao{margin-top:var(--ap-link)}
.ab-acao .btn{width:100%; min-height:48px}
.ab-apoio{margin-top:16px}
.ab-nota{margin-top:8px}
.ab-nota a, .txt-link{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.ab-nota a:hover, .txt-link:hover{text-decoration-thickness:2px}
.ab-ctx{margin-top:var(--t-ap); padding-left:14px; border-left:1.5px solid var(--fio); max-width:600px}
.ab-acoes{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:var(--ap-link)}
.ab-acoes .btn{width:100%; min-height:48px}
.ab-acoes .link{margin-top:4px}
@media (min-width:768px){
  .ab-acao .btn, .ab-acoes .btn{width:auto}
  .ab-acoes{flex-direction:row; align-items:center; gap:32px}
  .ab-acoes .link{margin-top:0}
}
.ab-404{display:flex; align-items:center; min-height:70vh}
.ab-404 > .cont{width:min(1200px, calc(100% - 2 * var(--mg)))}

/* Linha de apresentação na abertura (/marcos-santos). Etapa 10B.1: abertura só tipográfica, sem fotografia (7C). */
.ab-sub{margin-top:8px; font:500 var(--f-corpo)/1.5 "Inter",sans-serif; color:var(--txt)}
.ab-sub + .lead{margin-top:var(--t-ap)}

/* Folha de rosto do livro em escala de abertura (/livro-smart-flow) */
.rosto-t{margin-top:12px; font-weight:inherit}
.rosto-t .display{display:block}
.rosto-st{display:block; margin-top:12px; font:500 var(--f-h3)/1.24 "Montserrat",system-ui,sans-serif; letter-spacing:-.005em}
.rosto-autor{margin-top:16px; color:var(--txt2)}
.rosto-autor + .lead{margin-top:var(--t-ap)}
@media (min-width:768px){ .rosto-t{margin-top:16px} }

/* ==========================================================
   SEÇÕES
   ========================================================== */
.sec{padding-block:var(--padrao)}
.sec-pausa{padding-block:var(--pausa)}
.sec-comp{padding-block:var(--compacta)}
/* seção que continua no mesmo fundo: fio de contêiner no topo e respiro "entre blocos" */
.sec-curta{padding-bottom:var(--blocos)}
.segue{padding-top:0}
.segue > .cont{padding-top:var(--blocos); border-top:1px solid var(--fio)}

/* ---------- Bloco de duas colunas: título à esquerda, conteúdo à direita ---------- */
.bl-c{margin-top:24px}
.bl-x{margin-top:24px}
.bl-c > .corpo, .bl-x > .corpo{max-width:680px}
.bl-t .corpo{max-width:480px}
.bl-c > p > .link:only-child, .bl-x > p > .link:only-child{margin-top:calc(var(--ap-link) - 9px)}
.bl-x > p:first-child > .link:only-child{margin-top:0}
@media (min-width:768px){
  .bl{display:grid; grid-template-columns:1fr 1fr; column-gap:24px; align-items:start}
  .bl-t{grid-column:1; grid-row:1}
  .bl-c{grid-column:2; grid-row:1 / span 2; margin-top:0}
  .bl-x{grid-column:1; grid-row:2}
}
@media (min-width:1200px){
  .bl{grid-template-columns:repeat(12, 1fr)}
  .bl-t, .bl-x{grid-column:1 / 6}
  .bl-c{grid-column:7 / 13}
  .bl.e4 .bl-t, .bl.e4 .bl-x{grid-column:1 / 5}
  .bl.e4 .bl-c{grid-column:6 / 13}
}

/* ---------- Bloco editorial largo e centralizado ---------- */
.cen .h2{max-width:880px}
.cen .corpo{max-width:560px}
.cen.cen-680 .corpo{max-width:680px}
.cen p > .link:only-child{margin-top:calc(var(--ap-link) - 9px)}
@media (min-width:768px){
  .cen{text-align:center}
  .cen .h2, .cen .corpo{margin-inline:auto}
}

/* ---------- Faixa escura: destaque ---------- */
.dest{background:var(--roxo); padding-block:var(--pausa)}
.dest .display{max-width:880px}
@media (min-width:768px){ .dest{text-align:center} .dest .display{margin-inline:auto} }
@media (prefers-reduced-motion:no-preference){
  .js .dest .display{opacity:0; transition:opacity var(--lenta) var(--curva)}
  .js .dest .display.visto{opacity:1}
}

/* ==========================================================
   LISTAS
   ========================================================== */
/* Lista editorial com fios */
.lista > li{padding-block:20px; border-top:1px solid var(--fio)}
.lista > li:last-child{border-bottom:1px solid var(--fio)}
.lista .h4 + .corpo, .lista .h3 + .corpo{margin-top:8px}
.lista-s > li{padding-block:14px; color:var(--txt2); font-weight:500}
.lista + .corpo{margin-top:24px}
.lista .link{margin-top:calc(var(--ap-link) - 16px)}
.item-sub{margin-top:8px; font:500 var(--f-corpo)/1.5 "Inter",sans-serif; color:var(--txt)}

/* Lista ordenada editorial: numeral pequeno (estilo Rótulo), título e frase */
.lista-ord{counter-reset:n}
.lista-ord > li{counter-increment:n; display:grid; grid-template-columns:28px 1fr; column-gap:8px; align-items:baseline; padding-block:20px; border-top:1px solid var(--fio)}
.lista-ord > li:last-child{border-bottom:1px solid var(--fio)}
.lista-ord > li::before{content:counter(n); font:600 13px/1.4 "Montserrat",system-ui,sans-serif; letter-spacing:.02em; color:var(--rot)}
.lista-ord p{color:var(--txt2)}
.lista-ord strong{font-weight:600; color:var(--txt)}
.lista-ord.nomes p{font:600 var(--f-h4)/1.3 "Montserrat",system-ui,sans-serif; color:var(--txt)}
@media (min-width:768px){ .lista-ord > li::before{font-size:14px} }

/* Lista em duas colunas no desktop (temas da Educação Financeira) */
@media (min-width:1200px){
  .lista-2c{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, auto); grid-auto-flow:column; column-gap:24px}
  .lista-2c > li:nth-child(4){border-bottom:1px solid var(--fio)}
}

/* Pares rótulo/frase ("Foco", "Como atua", "O que observa", "O que abre", canais) */
.pares{margin:0}
.pares dt{font:600 13px/1.4 "Montserrat",system-ui,sans-serif; letter-spacing:.02em; color:var(--rot)}
.pares dd{margin:4px 0 0; color:var(--txt2); text-wrap:pretty}
.pares dd + dt{margin-top:16px}
@media (min-width:768px){ .pares dt{font-size:14px} }

/* Pares em lista com fios: termo à esquerda, valor à direita (canais; bases legais) */
.pares-fio > div{padding-block:16px; border-top:1px solid var(--fio)}
.pares-fio > div:last-child{border-bottom:1px solid var(--fio)}
.pares-fio dd{color:var(--txt)}
.pares-fio a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; overflow-wrap:anywhere}
.pares-fio a:hover{text-decoration-thickness:2px}
.pares-fio a{display:inline-flex; align-items:center; min-height:44px; margin-block:-10px}
@media (min-width:1200px){
  .pares-fio.lado > div{display:grid; grid-template-columns:160px 1fr; column-gap:24px; align-items:baseline}
  .pares-fio.lado dd{margin:0}
}

/* ==========================================================
   FAIXA COMPARATIVA (/solucoes) — não clicável por inteiro
   ========================================================== */
.fcomps{margin-top:var(--blocos)}
.fcomp{padding-block:48px; border-top:1px solid var(--fio)}
.fcomp:last-child{border-bottom:1px solid var(--fio)}
.fcomp-t .rotulo{display:block; margin-top:8px}
.fcomp-c{margin-top:20px}
.fcomp-c p:last-child{margin-top:calc(var(--ap-link) - 16px)}
@media (min-width:768px){
  .fcomp{display:grid; grid-template-columns:1fr 1fr; column-gap:24px; align-items:start}
  .fcomp-c{margin-top:0}
}
@media (min-width:1200px){
  .fcomp{grid-template-columns:repeat(12, 1fr)}
  .fcomp-t{grid-column:1 / 6}
  .fcomp-c{grid-column:7 / 13}
}

/* ==========================================================
   BLOCO DE DIMENSÃO (/smart-flow)
   ========================================================== */
.dim{padding-block:28px; border-top:1px solid var(--fio)}
.dim:last-child{border-bottom:1px solid var(--fio)}
.dim-cab{display:flex; align-items:center; gap:12px}
.dim-cab .marca{flex:none; margin-top:0}
.dim .pares{margin-top:16px}

/* ==========================================================
   DIAGRAMA DO MÉTODO — estado completo, estático, não interativo
   ========================================================== */
.anel-est .sf-n{cursor:default}
.ciclo-cab{max-width:880px}
.ciclo-lista{margin-top:8px}
.ciclo .sf-dia, .anel-bloco .sf-dia{padding-block:64px 56px}
.sem-arcos .sf-arco{display:none}
@media (min-width:768px){
  .ciclo-cab{margin-inline:auto; text-align:center}
  .ciclo .sf-dia{padding-block:88px 80px}
}
@media (min-width:1200px){
  .ciclo-grade{display:grid; grid-template-columns:repeat(12, 1fr); column-gap:24px; align-items:center; margin-top:var(--blocos)}
  .ciclo-grade .sf-dia{grid-column:1 / 8; padding:72px 0}
  .ciclo-grade .sf-anel{width:440px}
  .ciclo-lista{grid-column:8 / 13; margin-top:0}

  .anel-bloco{display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:1fr auto auto 1fr; column-gap:24px}
  .anel-bloco .sf-dia{grid-column:1 / 6; grid-row:1 / 5; align-self:center; padding:48px 0}
  .anel-bloco .sf-anel{width:325px}
  .anel-bloco .bl-t{grid-column:7 / 13; grid-row:2}
  .anel-bloco .bl-c{grid-column:7 / 13; grid-row:3; margin-top:var(--t-ap)}
}
/* tablet: anel pequeno sem rótulos de movimento, centralizado */
@media (min-width:768px) and (max-width:1199px){ .anel-bloco .sf-anel{width:325px} .anel-bloco .bl-c{margin-top:0} }

/* Desenho do traço, uma única vez, quando o diagrama entra na tela (/smart-flow). Sem JavaScript ou com movimento reduzido: já desenhado. */
@media (prefers-reduced-motion:no-preference){
  .js .anel-des .sf-traco, .js .anel-des .sf-volta2{stroke-dashoffset:1}
  .js .anel-des.visto .sf-traco, .js .anel-des.visto .sf-volta2{stroke-dashoffset:0; transition:stroke-dashoffset 900ms linear}
  .js .anel-des.visto .sf-traco[data-tr="b"]{transition-duration:1050ms; transition-delay:900ms}
  .js .anel-des.visto .sf-traco[data-tr="c"]{transition-duration:200ms; transition-delay:1950ms}
  .js .anel-des.visto .sf-volta2{transition-duration:700ms; transition-delay:2150ms; transition-timing-function:var(--curva)}
}

/* ==========================================================
   FOLHA DE ROSTO DO LIVRO em seção própria (/smart-flow)
   ========================================================== */
.livro-b .livro-c{margin-top:24px}
@media (min-width:768px){
  .livro-b{display:grid; grid-template-columns:1fr 1fr; column-gap:24px}
  .livro-b .livro-c{margin-top:0; align-self:end}
}
@media (min-width:1200px){
  .livro-b{grid-template-columns:repeat(12, 1fr)}
  .livro-b .livro-rosto{grid-column:1 / 8}
  .livro-b .livro-c{grid-column:8 / 13}
}

/* Título de seção com tratamento visual de rótulo (H2 semântico) */
h2.rotulo{font-size:13px}
@media (min-width:768px){ h2.rotulo{font-size:14px} }

/* Linha de ligação (Consultoria Empresarial → Financeira) */
.ligacao .corpo{max-width:680px}
.ligacao p + p{margin-top:calc(var(--ap-link) - 9px)}

/* Fechamento com rótulo (livro) */
.convite .rotulo + .h2{margin-top:12px}

/* ==========================================================
   COLUNA DE LEITURA LEGAL
   ========================================================== */
.legal{padding-block:var(--padrao)}
.legal-col{max-width:680px}
.legal-indice{counter-reset:i}
.legal-indice li{counter-increment:i}
.legal-indice a{display:flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; color:var(--txt)}
.legal-indice a::before{content:counter(i) "."; flex:none; width:28px; font:600 14px/1.4 "Montserrat",system-ui,sans-serif; color:var(--rot)}
.legal-indice a span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.legal-indice a:hover span{text-decoration-thickness:2px}
.legal-sec{margin-top:var(--blocos); padding-top:var(--blocos); border-top:1px solid var(--fio)}
.legal-sec h2{font:600 var(--f-h3)/1.24 "Montserrat",system-ui,sans-serif; letter-spacing:-.005em; text-wrap:balance}
.legal-sec p, .legal-sec ul, .legal-sec dl{margin-top:16px}
.legal-sec p, .legal-sec li{color:var(--txt2); text-wrap:pretty}
.legal-sec ul{padding-left:20px; list-style:disc}
.legal-sec li + li{margin-top:6px}
.legal-sec strong{font-weight:600; color:var(--txt)}
.legal-sec a, .legal-fim a{color:var(--txt); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; overflow-wrap:anywhere}
.legal-sec a:hover, .legal-fim a:hover{text-decoration-thickness:2px}
.legal-sec .pares-fio dt{color:var(--txt)}
.legal-sec .pares-fio dd{color:var(--txt2)}
.legal-end{overflow-wrap:anywhere}
.legal-fim{margin-top:var(--blocos); padding-top:24px; border-top:1px solid var(--fio); display:flex; flex-direction:column; gap:0}
.legal-fim a{display:inline-flex; align-items:center; min-height:44px; align-self:flex-start}
@media (min-width:1200px){ .legal-col{margin-left:calc(2 * ((100% - 264px) / 12) + 48px)} }

/* ---------- Ajustes de apoio ---------- */
.nq{white-space:nowrap}
/* nomes do diagrama como texto (não são botões nestas páginas): mesma caixa e mesmo alinhamento dos botões da Home */
span.sf-n{display:inline-flex; align-items:center; justify-content:center}
/* seção do ciclo continua a anterior, no mesmo fundo, sem repetir o respiro superior */
.ciclo{padding-top:0}
/* antes de uma seção que continua com fio de contêiner, a última linha da lista não repete o fio */
.sec-curta .lista > li:last-child, .sec-curta .lista-ord > li:last-child, .sec-curta .dim:last-child, .sec-curta .pares-fio > div:last-child{border-bottom:0}
/* abertura das páginas legais: linha de versão e vigência entre o título e a apresentação */
.ab .display + .legenda{margin-top:16px}
.ab .legenda + .lead{margin-top:var(--t-ap)}
/* links dentro de frases: área de toque ampliada sem alterar a entrelinha */
.ab-nota a, .legal-sec p a, .legal-sec li a{padding-block:13px}

/* ============================================================
   ETAPA 9B — CORREÇÕES PÓS-AUDITORIA (A9-001 a A9-004, A9-008, A9-009)
   Regras acrescentadas ao fim do arquivo; nenhuma regra anterior foi reescrita.
   ============================================================ */

/* A9-002 — "Soluções" como seção atual no menu mobile: o mesmo tratamento de página atual (peso 600, sublinhado fino) */
.mm-exp[aria-current]{font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}

/* A9-004 — blocos de duas colunas: a primeira linha da grade tem a altura do título; a sobra de altura da coluna
   direita vai para a segunda linha, de modo que o apoio fique a 24 px do título */
@media (min-width:768px){ .bl{grid-template-rows:auto 1fr} }

/* A9-008 — H1 de página interna (Etapa 5: 48/54 no desktop) nas páginas legais e na 404; mobile inalterado (34 px) */
.h1-int{font-family:"Montserrat",system-ui,sans-serif; font-size:clamp(34px, calc(28.8px + 1.333vw), 48px); line-height:1.1; font-weight:700; letter-spacing:-.015em; text-wrap:balance}
.ab-txt .h1-int{margin-top:12px}
.ab .h1-int + .legenda{margin-top:16px}
.h1-int + .lead{margin-top:var(--t-ap)}
@media (min-width:768px){ .ab-txt .h1-int{margin-top:16px} }
@media (min-width:1200px){ .h1-int{line-height:1.125} }

/* A9-009 — corpo legal em 15/26 (Etapa 5) e coluna de leitura dimensionada para 65 a 75 caracteres por linha (7D) */
.legal-col{max-width:556px}
.legal-sec p, .legal-sec li, .legal-sec dd, .legal-sec .pares-cab-d{font-size:15px; line-height:26px}

/* A9-003 — domínios, endereços, e-mails e sequências longas quebram de linha dentro do conteúdo legal */
.legal-sec p, .legal-sec li, .legal-sec dt, .legal-sec dd, .legal-fim{overflow-wrap:anywhere}

/* A9-001 — legenda da lista de pares da seção 5 da Política: os dois rótulos do quadro, no estilo do termo e do valor */
.pares-cab{margin-top:16px; padding-bottom:16px}
.pares-cab span{display:block}
.pares-cab-t{font:600 13px/1.4 "Montserrat",system-ui,sans-serif; letter-spacing:.02em; color:var(--txt)}
.pares-cab-d{margin-top:4px; color:var(--txt2)}
.legal-sec .pares-cab + dl{margin-top:0}
@media (min-width:768px){ .pares-cab-t{font-size:14px} }
