/* SOLSTEIN · esboço v9 do site (06/10/2026)
   v9: a página da Essencial em verde no lugar do papel (logo branco, topo verde, algumas seções em papel), com o topo
   fixo, a seta para a SOLSTEIN e o diagnóstico novo; saiu a seção Para contadores (vai para o SOLSTEIN Partners).
   v8 (06/10/2026):
   v8, só na SOLSTEIN: abertura só na primeira vez que o site abre (na sessão); no Sobre nós, a foto da aurora em
   destaque e a pedra do sol (cristal) entre os rascunhos do símbolo.
   v7 (06/10/2026):
   v7, só na SOLSTEIN: logo original em todo o site (o reduzido de 12 raios foi recusado; no topo o original vai com
   42 px, onde os raios já aparecem separados); abertura até o logo se completar, sem o mergulho no sol; Método com
   as duas páginas do diagnóstico e o texto parado ao lado; página Sobre nós com os rascunhos da marca.
   v6 (06/10/2026):
   v6, só na SOLSTEIN: abertura (o símbolo se desenha e a câmera entra no sol); logos pequenos com o símbolo reduzido,
   como manda o manual (o completo só a partir de 48 px), e os grandes do rodapé e das frentes com mais de 48 px;
   marcadores fora da página do diagnóstico, com linha tracejada até o ponto.
   v5 (06/10/2026):
   v5, só na SOLSTEIN (a Essencial fica para depois): raios do símbolo em laranja bem apagado, com o centro como
   estava; topo que acompanha a rolagem; seta discreta ao lado do logo que abre o logo da Essencial; botão pequeno
   com o logo do WhatsApp ao lado de "Agendar uma conversa".
   v4 (06/10/2026):
   Retorno do Matheus sobre o v3: espaço vazio na capa (não preenchia a tela, cara amadora); tirar a faixa da base
   legal; tirar "Falar no WhatsApp" da SOLSTEIN; sem Itajaí na capa. A SOLSTEIN é premium, "como se fosse uma Big
   Four, extremamente corporativa"; a Essencial pode ser mais comercial (WhatsApp, diagnóstico gratuito).
   v4: capa com a altura exata da tela, título grande ancorado à esquerda e o símbolo desenhado em traço fino
   (as 24 linhas do logo, com órbitas tracejadas) girando devagar à direita; no pé da capa, uma fileira de destaques
   como nos sites das Big Four. Papel e grafite; cor da marca só em detalhes.
   Regras dele mantidas: sem degradê de CSS, sem sombra, sem cantos arredondados, sem branco puro de fundo, sem ícones
   genéricos, sem emoji, sem travessão, sem animação de passar o mouse; IBM Plex Sans. */

@font-face { font-family: "IBM Plex Sans"; src: url("assets/IBMPlexSans.woff") format("woff"); font-weight: 100 700; font-stretch: 75% 100%; }

:root {
  --cor: #E0651E;
  --grafite: #1F1B17;
  --papel: #EBE6DA;
  --papel-2: #E3DDD0;
  --fundo: #F5F2EB;
  --cartao: #EFEBE2;
  --texto: #2A2520;
  --mudo: #6B645B;
  --linha: #D6CFC2;
  --linha-forte: rgba(31, 27, 23, 0.26);
  --max: 1320px;
}
.tema-essencial { --cor: #2F7D55; }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; color: var(--texto); background: var(--fundo); font-size: 17px; line-height: 1.6; }
a { color: inherit; }
img { display: block; }
.miolo { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 48px; }
.olho { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--mudo); }
.olho::before { content: ""; width: 34px; height: 1px; background: var(--cor); }
.botao { display: inline-block; padding: 14px 24px; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 2px; border: 1px solid var(--grafite); line-height: 1.2; }
.botao.escuro { background: var(--grafite); color: var(--fundo); }
.botao.vazado { background: transparent; color: var(--grafite); }
.link { font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--cor); padding-bottom: 2px; }

/* ================= capa ================= */
.capa { position: relative; height: 100vh; min-height: 700px; max-height: 1100px; display: grid; grid-template-rows: auto 1fr auto;
        background: var(--papel); color: var(--grafite); overflow: hidden; isolation: isolate; }
.fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.textura { position: absolute; inset: -8%; background: url("assets/aurora-papel.jpg") center top / cover; animation: deriva 36s ease-in-out infinite alternate; opacity: 0.9; }
.raios-caixa { position: absolute; top: 50%; left: 74%; height: 150%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.raios { display: block; width: 100%; height: 100%; color: rgba(224, 101, 30, 0.30); animation: gira 240s linear infinite; will-change: transform; }
.raios line, .raios circle { vector-effect: non-scaling-stroke; }
.raios .miolo-c { stroke: var(--cor); stroke-opacity: 0.9; }
.raios .orbita { stroke-dasharray: 2 6; stroke-opacity: 0.8; }
@keyframes deriva { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-3%, 2%, 0); } }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .textura, .raios { animation: none; } }

/* abertura (intro), v7: o símbolo se desenha do centro para fora, o nome aparece e, com o logo completo, a tela se
   abre para o site (cerca de 3 s; o logo some antes do papel, para não passar por cima do texto da capa). O mergulho no sol do v6 saiu: ele preferiu o trecho até o logo se completar.
   Some sozinha pelo CSS, mesmo sem JavaScript; clique ou tecla encurtam; não roda para quem pediu menos movimento
   nem para quem já está navegando no site. (O nome não é .intro porque o parágrafo do Método já usa essa classe.) */
.abertura { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--papel); overflow: hidden; animation: abertura-sai 0.5s ease 2.6s forwards; }
.abertura.pulando { animation: abertura-sai 0.3s ease forwards; }
.abertura-ativa, .abertura-ativa body { overflow: hidden; }
.abertura-logo { width: min(280px, 60vw); height: auto; overflow: visible; animation: abertura-sobe 0.4s ease 2.3s forwards; }
.raios-abertura line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: abertura-raio 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(0.15s + var(--i) * 0.022s); }
.abertura .nome, .abertura .desc { opacity: 0; animation: abertura-texto 0.7s ease forwards; }
.abertura .nome { animation-delay: 0.85s; }
.abertura .desc { animation-delay: 1.05s; }
@keyframes abertura-raio { to { stroke-dashoffset: 0; } }
@keyframes abertura-texto { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes abertura-sobe { to { opacity: 0; transform: translateY(-12px); } }
@keyframes abertura-sai { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .abertura { display: none; } }
.sem-abertura .abertura { display: none; }   /* a mesma linha já foi vista nesta sessão (aviso no <head> da página) */

.topo { position: relative; z-index: 3; border-bottom: 1px solid var(--linha-forte); }
.topo > .miolo { display: flex; align-items: center; gap: 52px; height: 88px; }
.topo .logo img { height: 42px; }
.topo nav { display: flex; gap: 36px; font-size: 15px; flex: 1; }
.topo nav a, .topo nav button { color: var(--grafite); text-decoration: none; background: none; border: 0; font: inherit; padding: 0; cursor: pointer; }
.topo nav button::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 9px; }
.topo .direita { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.topo .direita a:not(.botao) { text-decoration: none; }

/* v5: o topo acompanha a rolagem; transparente sobre a capa e com fundo de papel quando a página desce */
.topo.fixo { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transition: background-color 0.25s; }
.topo.fixo.rolou { background: var(--fundo); }
.capa.sob-topo { grid-template-rows: 1fr auto; padding-top: 88px; }
html:has(.topo.fixo) { scroll-padding-top: 88px; }

/* v5: seta discreta ao lado do logo; abre o logo da Essencial logo abaixo */
.marca-troca { position: relative; align-self: stretch; display: flex; align-items: center; gap: 2px; }
.seta-marca { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: var(--mudo); cursor: pointer; }
.seta-marca::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.marcas-aberto .seta-marca { color: var(--cor); }
.marcas-aberto .seta-marca::after { transform: translateY(2px) rotate(225deg); }
.marcas-painel { display: none; position: absolute; top: 100%; left: -26px; z-index: 5; width: 300px; padding: 22px 26px 24px; background: var(--fundo); border: 1px solid var(--linha); border-top: 0; }
.marcas-aberto .marcas-painel { display: block; }
.marcas-painel a { display: block; text-decoration: none; }
.marcas-painel img { height: 40px; }
.marcas-painel span { display: block; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--mudo); }

.capa .corpo { position: relative; z-index: 2; display: flex; align-items: flex-end; padding-bottom: 72px; }
.capa .corpo .miolo { display: grid; grid-template-columns: minmax(0, 70%) 1fr; }
.capa .olho { margin-bottom: 30px; }
.capa h1 { margin: 0; font-weight: 300; font-size: clamp(52px, 5.6vw, 92px); line-height: 1.0; letter-spacing: -0.03em; }
.capa h1 em { font-style: normal; font-weight: 500; }
.capa .sub { margin: 30px 0 38px; max-width: 590px; font-size: 19px; line-height: 1.55; color: var(--texto); }
.capa .acoes { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.destaques { position: relative; z-index: 2; background: rgba(245, 242, 235, 0.72); border-top: 1px solid var(--linha-forte); }
.destaques .miolo { display: grid; grid-template-columns: repeat(4, 1fr); }
.destaques a, .destaques .d { display: block; text-decoration: none; padding: 26px 30px 30px; border-left: 1px solid var(--linha-forte); }
.destaques .miolo > :first-child { border-left: 0; padding-left: 0; }
.destaques .rotulo { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cor); font-weight: 600; margin-bottom: 10px; }
.destaques .t { display: block; font-size: 17px; line-height: 1.4; color: var(--grafite); }

/* menu de serviços */
.menu { display: none; position: absolute; left: 0; right: 0; top: 88px; z-index: 4; color: var(--texto); }
.menu-aberto .menu { display: block; }
.menu-aberto .topo nav button { color: var(--cor); }
.menu-aberto .topo nav button::after { transform: translateY(2px) rotate(225deg); }   /* vira para cima, como a seta do logo */
.menu .painel { background: var(--fundo); display: grid; grid-template-columns: 1.1fr 1.4fr 1.1fr; border: 1px solid var(--linha); border-top: 0; }
.menu .painel > div { padding: 32px 34px 36px; }
.menu .painel > div + div { border-left: 1px solid var(--linha); }
.menu h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.menu p { margin: 0 0 22px; font-size: 15px; color: var(--mudo); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 15px; display: flex; justify-content: space-between; gap: 16px; }
.menu li span { color: var(--mudo); font-size: 13px; }
.menu .irma { background: var(--cartao); }
.menu .irma img { height: 40px; margin: 8px 0 18px; }

/* ================= seções ================= */
.bloco { padding: 128px 0; }
.cabeca { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; margin-bottom: 64px; align-items: start; }
.cabeca .olho { padding-top: 16px; }
.cabeca h2 { margin: 0; font-size: 52px; font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: var(--grafite); }

/* serviços em índice, como nas Big Four */
.servicos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafite); }
.servicos li { display: grid; grid-template-columns: 70px 1.15fr 1.6fr 150px; gap: 30px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--linha); }
.servicos .num { font-size: 13px; color: var(--cor); font-weight: 600; letter-spacing: 0.08em; }
.servicos h3 { margin: 0; font-size: 30px; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--grafite); }
.servicos p { margin: 0; color: var(--mudo); font-size: 16px; }
.servicos .link { justify-self: end; }

.metodo { background: var(--papel); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.metodo .miolo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: start; }
.metodo h2 { margin: 20px 0 22px; font-size: 48px; font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: var(--grafite); }
.metodo .intro { margin: 0 0 34px; color: var(--mudo); max-width: 520px; }
.principios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafite); counter-reset: p; }
.principios li { display: grid; grid-template-columns: 46px 1fr; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.principios li::before { counter-increment: p; content: "0" counter(p); font-size: 13px; font-weight: 600; color: var(--cor); padding-top: 4px; }
.principios b { display: block; font-weight: 500; font-size: 19px; color: var(--grafite); margin-bottom: 4px; }
.principios span { color: var(--mudo); font-size: 16px; }
.metodo figure { margin: 0; background: var(--fundo); padding: 40px 40px 0; border: 1px solid var(--linha); }
.metodo .folha { position: relative; }
.metodo .folhas { display: grid; gap: 28px; }
.metodo .miolo:has(.folhas) > div:first-child { position: sticky; top: 128px; }
.metodo .folha img { width: 100%; }
.metodo .ponto { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--cor); border: 1px solid var(--cor); color: var(--fundo); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
.metodo .ponto.fora-esq { left: -20px; }
.metodo .ponto.fora-dir { left: calc(100% + 20px); }
.metodo .guia { position: absolute; height: 0; border-top: 1px dashed var(--cor); }
.metodo .guia.esq { left: -7px; }
.metodo .guia.dir { right: -7px; }
.metodo .guia::after { content: ""; position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--cor); }
.metodo .guia.esq::after { right: -3px; }
.metodo .guia.dir::after { left: -3px; }
.metodo figcaption { font-size: 13px; color: var(--mudo); padding: 16px 0 18px; }
.esqueleto { background: #E2DCCF; min-height: 560px; animation: pulsa 1.4s ease-in-out infinite alternate; }
.esqueleto img, .esqueleto .ponto, .esqueleto .guia { opacity: 0; }
@keyframes pulsa { from { background: #E2DCCF; } to { background: #D6CFC0; } }

.conteudos .grade-c { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; }
.conteudos .principal { border-top: 1px solid var(--grafite); padding-top: 30px; }
.conteudos .rotulo { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cor); font-weight: 600; margin-bottom: 14px; }
.conteudos .principal h3 { margin: 0 0 18px; font-size: 40px; font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; color: var(--grafite); }
.conteudos .principal p { margin: 0 0 26px; color: var(--mudo); max-width: 560px; }
.conteudos ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafite); }
.conteudos li { padding: 24px 0; border-bottom: 1px solid var(--linha); }
.conteudos li h4 { margin: 0; font-size: 21px; font-weight: 400; line-height: 1.3; color: var(--grafite); }

.frentes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.frente { position: relative; background: var(--cartao); border-top: 3px solid var(--cor-frente); padding: 48px 52px 52px; min-height: 400px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.frente.laranja { --cor-frente: #E0651E; }
.frente.verde { --cor-frente: #2F7D55; }
.frente .marca img { height: 50px; }
.frente .marca-d { position: absolute; right: -150px; bottom: -180px; width: 470px; opacity: 0.07; z-index: -1; }
.frente h3 { margin: auto 0 14px; font-size: 30px; font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; max-width: 440px; color: var(--grafite); }
.frente p { margin: 0 0 28px; max-width: 470px; font-size: 16px; color: var(--mudo); }
.frente .botao { align-self: flex-start; }
/* rascunho do SOLSTEIN Partners (nome provisório), menor e centralizado embaixo das duas frentes, em azul, com o B2B */
.parceiros { --azul: #0D3B4F; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; max-width: 720px; margin: 28px auto 0; padding: 26px 34px 28px; background: var(--cartao); border-top: 3px solid var(--azul); }
.parceiros .marca { display: flex; align-items: center; gap: 14px; }
.parceiros .marca img { height: 40px; }
.parceiros .b2b { padding: 3px 7px 2px; border: 1px solid var(--azul); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--azul); }
.parceiros p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--mudo); }
.parceiros .link { font-size: 14px; border-bottom-color: var(--azul); }

.contato { background: var(--papel); color: var(--grafite); border-top: 1px solid var(--linha); }
.contato .miolo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; padding-top: 120px; padding-bottom: 120px; }
.contato .olho { margin-bottom: 26px; }
.contato h2 { margin: 0; font-size: 60px; font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
.contato .canais div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--linha); padding: 15px 0; font-size: 17px; }
.contato .canais span { color: var(--mudo); }
.contato .canais a { text-decoration: none; }
.contato .botao { margin-top: 30px; }
/* v5: "Agendar uma conversa" com um botão pequeno do WhatsApp ao lado */
.contato .canais .acoes-contato { display: flex; justify-content: flex-start; gap: 10px; margin-top: 30px; padding: 0; border-bottom: 0; }
.contato .acoes-contato .botao { margin-top: 0; }
.botao.icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; }
.botao.icone svg { width: 20px; height: 20px; fill: currentColor; }

footer { background: var(--fundo); padding: 76px 0 40px; font-size: 14px; color: var(--mudo); }
footer .colunas { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 52px; border-bottom: 1px solid var(--linha); }
footer .marcas img { height: 48px; margin-bottom: 20px; }
footer h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto); font-weight: 600; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 0 0 9px; }
footer a { text-decoration: none; }
footer .base { display: flex; justify-content: space-between; padding-top: 26px; }
footer .base nav { display: flex; gap: 26px; }

/* ---- Essencial: blocos herdados do v3, mais comerciais ---- */
.declaracao .grade { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; }
.declaracao p.grande { margin: 0; font-size: 40px; line-height: 1.28; font-weight: 300; letter-spacing: -0.01em; color: var(--grafite); }
.declaracao p.grande b { font-weight: 500; }
.numeros { background: var(--papel); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.numeros .miolo { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 78px; padding-bottom: 78px; }
.numeros .n { padding: 0 32px; border-left: 1px solid var(--linha); }
.numeros .n:first-child { padding-left: 0; border-left: 0; }
.numeros .valor { font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--grafite); }
.numeros .valor small { font-size: 20px; font-weight: 400; letter-spacing: 0; margin-left: 6px; color: var(--cor); }
.numeros p { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--mudo); max-width: 240px; }
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 34px; }
.passos > div { border-top: 1px solid var(--grafite); padding-top: 26px; }
.passos .num { font-size: 52px; font-weight: 200; line-height: 1; color: var(--cor); letter-spacing: -0.02em; }
.passos h3 { margin: 22px 0 10px; font-size: 21px; font-weight: 500; color: var(--grafite); }
.passos p { margin: 0; color: var(--mudo); font-size: 16px; }

@media (max-width: 900px) {
  .miolo { padding: 0 18px; }
  .capa { height: auto; min-height: 0; max-height: none; }
  .topo nav, .topo .direita a:not(.botao) { display: none; }
  .topo > .miolo { gap: 16px; justify-content: space-between; }
  .topo .botao { padding: 11px 16px; font-size: 14px; white-space: nowrap; }
  .bloco { padding: 76px 0; }
  .capa .corpo { padding: 70px 0 46px; }
  .capa .corpo .miolo, .destaques .miolo, .cabeca, .metodo .miolo, .conteudos .grade-c, .frentes, .contato .miolo, footer .colunas,
  .declaracao .grade, .numeros .miolo, .passos { grid-template-columns: 1fr; }
  .raios-caixa { left: 100%; top: 15%; height: 70%; }
  .marcas-painel { left: -18px; width: 100vw; padding: 20px 18px 22px; }
  .topo .logo img { height: 34px; }
  .metodo .miolo:has(.folhas) > div:first-child { position: static; }
  .destaques a, .destaques .d { border-left: 0; padding: 18px 0; border-top: 1px solid var(--linha-forte); }
  .destaques .miolo > :first-child { border-top: 0; }
  .servicos li { grid-template-columns: 1fr; gap: 10px; }
  .servicos .link, .servicos .publico { justify-self: start; }
  .cabeca h2, .metodo h2 { font-size: 34px; }
  .conteudos .principal h3 { font-size: 30px; }
  .metodo .ponto, .metodo .guia { display: none; }
  .contato h2 { font-size: 38px; }
  .declaracao p.grande { font-size: 27px; }
  .numeros .n { padding: 22px 0; border-left: 0; border-top: 1px solid var(--linha); }
  .numeros .n:first-child { border-top: 0; }
  .passos > div { margin-bottom: 30px; }
  .frente { padding: 36px 26px 40px; min-height: 0; }
  .parceiros { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; }
  footer .base { flex-direction: column; gap: 14px; }
}


/* ================= Sobre nós (v7) ================= */
.topo nav a[aria-current="page"] { color: var(--cor); }
.sobre-capa { position: relative; overflow: hidden; isolation: isolate; background: var(--papel); padding: 184px 0 104px; border-bottom: 1px solid var(--linha); }
.sobre-capa .miolo { position: relative; z-index: 1; }
.sobre-capa .olho { margin-bottom: 28px; }
.sobre-capa h1 { margin: 0; max-width: 1000px; font-size: clamp(44px, 4.8vw, 80px); font-weight: 300; line-height: 1.04; letter-spacing: -0.025em; color: var(--grafite); }
.sobre-capa h1 em { font-style: normal; font-weight: 500; }
.sobre-capa .sub { margin: 30px 0 0; max-width: 660px; font-size: 19px; line-height: 1.55; }
.capitulo { padding: 112px 0; border-bottom: 1px solid var(--linha); }
.capitulo .miolo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 88px; align-items: start; }
.capitulo .num { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--cor); }
.capitulo h2 { margin: 16px 0 24px; font-size: 44px; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--grafite); }
.capitulo p { margin: 0 0 16px; max-width: 520px; }

/* prancheta de rascunho: papel, moldura tracejada e marcas de corte nos cantos, como numa prova de gráfica */
.prancheta { position: relative; padding: 48px 40px 40px; background: var(--fundo); border: 1px dashed rgba(31, 27, 23, 0.32); }
.prancheta .canto { position: absolute; width: 14px; height: 14px; border: 0 solid var(--grafite); }
.prancheta .c1 { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.prancheta .c2 { top: -8px; right: -8px; border-top-width: 1px; border-right-width: 1px; }
.prancheta .c3 { bottom: -8px; left: -8px; border-bottom-width: 1px; border-left-width: 1px; }
.prancheta .c4 { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; }
.prancheta .rotulo-rascunho { position: absolute; top: 16px; left: 40px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mudo); font-weight: 500; }
.nomes { list-style: none; margin: 0; padding: 0; }
.nomes li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px dashed rgba(31, 27, 23, 0.2); }
.nomes li:last-child { border-bottom: 0; }
.nomes .n { font-size: 30px; font-weight: 300; letter-spacing: 0.02em; line-height: 1.2; }
.nomes .obs { font-size: 12.5px; color: var(--mudo); text-align: right; font-stretch: 85%; }
.nomes .fora .n { color: var(--mudo); text-decoration: line-through; text-decoration-color: var(--cor); text-decoration-thickness: 2px; }
.nomes .fica .n { font-weight: 600; color: var(--grafite); border-bottom: 2px solid var(--cor); }
/* v8: no capítulo 01 sobrou só o ORACLE TAX; o nome riscado cresce para ocupar a prancheta */
.nomes.um li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0 4px; }
.nomes.um .n { font-size: 56px; letter-spacing: 0.01em; }
.nomes.um .obs { text-align: left; font-size: 14px; }
.esbocos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.esbocos figure, .final, .linhas figure { margin: 0; }
.esbocos .moldura, .linhas .moldura { display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(31, 27, 23, 0.28); background: var(--papel); overflow: hidden; }
.esbocos .moldura { aspect-ratio: 1 / 1; padding: 14px; }
.esbocos .moldura img { max-width: 100%; max-height: 100%; filter: grayscale(1); opacity: 0.8; mix-blend-mode: multiply; }
.esbocos.tres { grid-template-columns: repeat(3, 1fr); }
/* v8: a pedra do sol (foto do cristal) fica fora da prancheta, na coluna do texto do capítulo 03 */
.capitulo .pedra { margin: 44px 0 0; max-width: 420px; }
.capitulo .pedra img { display: block; width: 100%; height: auto; }
.capitulo .pedra figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--mudo); }
.capitulo .pedra figcaption b { display: block; color: var(--grafite); font-weight: 500; }
/* v8: a foto da aurora em destaque, grande, no topo da prancheta do símbolo */
.foto-destaque { margin: 0 0 26px; padding-bottom: 26px; border-bottom: 1px dashed rgba(31, 27, 23, 0.28); }
.foto-destaque img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }   /* em cor: ele não quis em preto e branco */
.prancheta .foto-destaque figcaption { margin-top: 14px; font-size: 14px; }
.esbocos .moldura.foto { padding: 0; }
.esbocos .moldura.foto img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; opacity: 0.92; mix-blend-mode: normal; }
.prancheta figcaption, .linhas figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--mudo); }
.prancheta figcaption b, .linhas figcaption b { display: block; color: var(--grafite); font-weight: 500; }
.final { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: center; margin-top: 26px; padding-top: 26px; border-top: 1px dashed rgba(31, 27, 23, 0.28); }
.final img { width: 100%; }
.final figcaption { margin-top: 0; }
.linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.linhas .moldura { height: 240px; padding: 34px; }
.linhas img { max-width: 100%; max-height: 100%; }
@media (max-width: 900px) {
  .sobre-capa { padding: 136px 0 64px; }
  .capitulo { padding: 72px 0; }
  .capitulo .miolo { grid-template-columns: 1fr; gap: 40px; }
  .capitulo h2 { font-size: 32px; }
  .prancheta { padding: 46px 20px 24px; }
  .prancheta .rotulo-rascunho { left: 20px; }
  .esbocos { grid-template-columns: 1fr 1fr; }
  .nomes li { flex-direction: column; gap: 2px; }
  .nomes .n { font-size: 24px; }
  .nomes .obs { text-align: left; }
  .final { grid-template-columns: 140px 1fr; gap: 18px; }
  .linhas { grid-template-columns: 1fr; }
}

/* ================= Essencial em verde (v9) ================= */
/* Pedido do Matheus: na Essencial o site é verde no lugar do papel, o logo vai em branco e o cabeçalho também é verde.
   Ficam em papel a declaração, o como funciona, as duas frentes, o rodapé e os painéis do topo, onde os logos aparecem
   em cor. Texto sobre o verde em papel; detalhes em verde claro. */
.tema-essencial { --verde: #2F7D55; --verde-escuro: #286A48; --verde-claro: #7FBF96; --sobre-verde: #F5F2EB; --sobre-verde-2: rgba(245, 242, 235, 0.84); --sobre-verde-mudo: rgba(245, 242, 235, 0.64); --linha-verde: rgba(245, 242, 235, 0.22); }
.botao.claro { background: var(--fundo); border-color: var(--fundo); color: var(--grafite); }
.tema-essencial .botao.claro { color: var(--verde); }
.tema-essencial .botao.escuro { background: var(--verde); border-color: var(--verde); color: var(--fundo); }

/* topo verde, também com a página rolada */
.tema-essencial .topo.fixo, .tema-essencial .topo.fixo.rolou { background: var(--verde); border-bottom-color: var(--linha-verde); }
.tema-essencial .topo nav a, .tema-essencial .topo nav button { color: var(--sobre-verde); }
.tema-essencial.menu-aberto .topo nav button { color: var(--verde-claro); }
.tema-essencial .seta-marca { color: var(--sobre-verde-mudo); }
.tema-essencial.marcas-aberto .seta-marca { color: var(--verde-claro); }

/* capa verde, com a textura da aurora em verde e os raios em verde claro, o centro em papel */
.tema-essencial .capa { background: var(--verde); color: var(--sobre-verde); }
.tema-essencial .abertura { background: var(--verde); }   /* a abertura da Essencial: logo branco sobre o verde */
.tema-essencial .textura { background-image: url("assets/aurora-verde.jpg"); opacity: 0.28; }
.tema-essencial .raios { color: rgba(127, 191, 150, 0.5); }
.tema-essencial .raios .miolo-c { stroke: var(--sobre-verde); stroke-opacity: 0.85; }
.tema-essencial .capa .olho, .tema-essencial .em-verde .olho { color: var(--sobre-verde-mudo); }
.tema-essencial .capa .olho::before, .tema-essencial .em-verde .olho::before { background: var(--verde-claro); }
.tema-essencial .capa h1 { color: var(--sobre-verde); }
.tema-essencial .capa .sub { color: var(--sobre-verde-2); }
.tema-essencial .capa .link, .tema-essencial .em-verde .link { color: var(--sobre-verde); border-bottom-color: var(--verde-claro); }
.tema-essencial .destaques { background: var(--verde-escuro); border-top-color: var(--linha-verde); }
.tema-essencial .destaques a, .tema-essencial .destaques .d { border-color: var(--linha-verde); }
.tema-essencial .destaques .rotulo { color: var(--verde-claro); }
.tema-essencial .destaques .t { color: var(--sobre-verde); }

/* seções verdes: números, o diagnóstico e o contato (.em-verde, porque .verde já é o cartão verde das frentes) */
.tema-essencial .em-verde { background: var(--verde); border-color: var(--linha-verde); color: var(--sobre-verde-2); }
.tema-essencial .numeros.em-verde { background: var(--verde-escuro); }
.tema-essencial .numeros .valor { color: var(--sobre-verde); }
.tema-essencial .numeros .valor small { color: var(--verde-claro); }
.tema-essencial .numeros p { color: var(--sobre-verde-mudo); }
.tema-essencial .numeros .n { border-color: var(--linha-verde); }
.tema-essencial .metodo.em-verde h2 { color: var(--sobre-verde); }
.tema-essencial .metodo.em-verde .intro { color: var(--sobre-verde-2); }
.tema-essencial .em-verde .principios { border-top-color: rgba(245, 242, 235, 0.5); }
.tema-essencial .em-verde .principios li { border-bottom-color: var(--linha-verde); }
.tema-essencial .em-verde .principios li::before { color: var(--verde-claro); }
.tema-essencial .em-verde .principios b { color: var(--sobre-verde); }
.tema-essencial .em-verde .principios span { color: var(--sobre-verde-mudo); }
.tema-essencial .metodo.em-verde figure { border-color: transparent; }
.tema-essencial .contato.em-verde h2 { color: var(--sobre-verde); }
.tema-essencial .contato .canais div { border-bottom-color: var(--linha-verde); }
.tema-essencial .contato .canais span { color: var(--sobre-verde-mudo); }
/* os links do contato vão em papel; o botão não (com o texto em papel ele sumia sobre o fundo do botão) */
.tema-essencial .contato .canais a:not(.botao), .tema-essencial .contato .canais .valor { color: var(--sobre-verde); }
/* lista do que a Essencial recupera: no lugar do link de cada serviço, o público (Simples Nacional ou pessoa física) */
.servicos .publico { justify-self: end; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cor); font-weight: 600; white-space: nowrap; }

/* Sobre nós com a cara da Essencial (sobre-essencial.html): capa verde, como a da Essencial */
.tema-essencial .sobre-capa { background: var(--verde); border-bottom-color: var(--linha-verde); }
.tema-essencial .sobre-capa .olho { color: var(--sobre-verde-mudo); }
.tema-essencial .sobre-capa .olho::before { background: var(--verde-claro); }
.tema-essencial .sobre-capa h1 { color: var(--sobre-verde); }
.tema-essencial .sobre-capa .sub { color: var(--sobre-verde-2); }
.tema-essencial .topo nav a[aria-current="page"] { color: var(--verde-claro); }

/* ================= Partners (v9): a linha B2B, em azul ================= */
/* Na pegada da Essencial: site azul no lugar do papel, logo branco, topo azul, algumas seções em papel. O Partners sempre
   aparece como terceiro elemento menor junto das duas linhas, e sempre com B2B (pedido do Matheus). Azul petróleo profundo (#0D3B4F), escolhido por ele em 06/10 (era #2F5E8E, provisório). */
:root { --azul-partners: #0D3B4F; }
.b2b { display: inline-block; padding: 3px 7px 2px; border: 1px solid var(--azul-partners); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.3; color: var(--azul-partners); }
.tema-partners { --cor: #0D3B4F; --azul: #0D3B4F; --azul-escuro: #0B3242; --azul-claro: #8CC5DE; --sobre-azul: #F5F2EB; --sobre-azul-2: rgba(245, 242, 235, 0.84); --sobre-azul-mudo: rgba(245, 242, 235, 0.64); --linha-azul: rgba(245, 242, 235, 0.22); }
.tema-partners .botao.claro { color: var(--azul); }
.tema-partners .abertura { background: var(--azul); }
.tema-partners .topo.fixo, .tema-partners .topo.fixo.rolou { background: var(--azul); border-bottom-color: var(--linha-azul); }
.tema-partners .topo nav a { color: var(--sobre-azul); }
.tema-partners .topo .b2b { margin-left: 8px; color: var(--sobre-azul); border-color: rgba(245, 242, 235, 0.6); }
.tema-partners .seta-marca { color: var(--sobre-azul-mudo); }
.tema-partners.marcas-aberto .seta-marca { color: var(--azul-claro); }
.tema-partners .capa { background: var(--azul); color: var(--sobre-azul); }
.tema-partners .textura { background-image: url("assets/aurora-azul.jpg"); opacity: 0.28; }
.tema-partners .raios { color: rgba(140, 197, 222, 0.5); }
.tema-partners .raios .miolo-c { stroke: var(--sobre-azul); stroke-opacity: 0.85; }
.tema-partners .capa .olho, .tema-partners .em-azul .olho { color: var(--sobre-azul-mudo); }
.tema-partners .capa .olho::before, .tema-partners .em-azul .olho::before { background: var(--azul-claro); }
.tema-partners .capa h1 { color: var(--sobre-azul); }
.tema-partners .capa .sub { color: var(--sobre-azul-2); }
.tema-partners .capa .link, .tema-partners .em-azul .link { color: var(--sobre-azul); border-bottom-color: var(--azul-claro); }
.tema-partners .destaques { background: var(--azul-escuro); border-top-color: var(--linha-azul); }
.tema-partners .destaques a, .tema-partners .destaques .d { border-color: var(--linha-azul); }
.tema-partners .destaques .rotulo { color: var(--azul-claro); }
.tema-partners .destaques .t { color: var(--sobre-azul); }
.tema-partners .em-azul { background: var(--azul); border-color: var(--linha-azul); color: var(--sobre-azul-2); }
.tema-partners .em-azul h2 { color: var(--sobre-azul); }
/* contato do Partners: formulário de parceria (pedido do Matheus) com o Enviar e, do mesmo tamanho, os botões do
   WhatsApp e do e-mail; campos só com o filete de baixo, sobre o azul */
.tema-partners .contato .miolo { grid-template-columns: 1fr 1.25fr; }
.tema-partners .contato .apoio { margin: 26px 0 0; max-width: 420px; font-size: 17px; color: var(--sobre-azul-2); }
.form-parceria { display: grid; gap: 18px; align-content: start; }
.form-parceria .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin-bottom: 14px; }
.form-parceria label { display: flex; flex-direction: column; gap: 6px; }
.form-parceria label > span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--sobre-azul-mudo); }
.form-parceria label > span i { font-style: normal; font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.form-parceria .largo { grid-column: 1 / -1; }
.form-parceria input, .form-parceria select, .form-parceria textarea { width: 100%; margin: 0; padding: 8px 0 9px; font: inherit; font-size: 17px; line-height: 1.4; color: var(--sobre-azul); background: transparent; border: 0; border-bottom: 1px solid rgba(245, 242, 235, 0.45); border-radius: 0; outline: none; }
.form-parceria input:focus, .form-parceria select:focus, .form-parceria textarea:focus { padding-bottom: 8px; border-bottom: 2px solid var(--azul-claro); }
/* o preenchimento automático do navegador pintava o campo de claro */
.form-parceria input:-webkit-autofill { -webkit-text-fill-color: var(--sobre-azul); -webkit-box-shadow: 0 0 0 40px var(--azul) inset; }
.form-parceria select { appearance: none; padding-right: 26px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F5F2EB' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center; }
.form-parceria select:invalid { color: var(--sobre-azul-mudo); }
.form-parceria option { color: var(--grafite); background: var(--fundo); }
.form-parceria textarea { min-height: 88px; resize: vertical; }
.form-parceria .acoes-contato { display: flex; gap: 10px; }
.form-parceria button.botao { font-family: inherit; cursor: pointer; }
.form-parceria .aviso { margin: 0; font-size: 13px; color: var(--sobre-azul-mudo); }
.form-parceria .aviso a { color: var(--sobre-azul); }
.form-parceria .retorno { margin: 0; font-size: 15px; color: var(--sobre-azul); }
.form-parceria .retorno:empty { display: none; }
.tema-partners .em-azul .botao.vazado { color: var(--sobre-azul); border-color: rgba(245, 242, 235, 0.6); }
/* níveis, refeitos a pedido do Matheus (no azul, o bronze e o ouro brigavam com o fundo, e a lista estava simples
   demais): faixa em papel, como o contato da SOLSTEIN, com as medalhas grandes. Depois, o modelo mudou: a medalha
   mede o volume (clientes por ano) e as formas de participar (indicação, parceria técnica, marca própria) ficam num
   bloco à parte, com o que fica com o parceiro e o que fica com a SOLSTEIN. Em lista, sem os três cartões em linha */
.niveis-bloco { background: var(--papel); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.niveis-bloco .intro-niveis { margin: 22px 0 0; max-width: 620px; font-size: 18px; color: var(--mudo); text-wrap: pretty; }
.niveis-bloco h2 { text-wrap: balance; }   /* sem palavra sozinha na última linha do título */
.niveis { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafite); }
.niveis li { display: grid; grid-template-columns: 180px 1fr; gap: 0 48px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--linha-forte); }
/* nome e as duas colunas começam na mesma linha; o bloco todo fica no meio da altura da medalha */
.niveis .dados { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 0 48px; align-items: start; }
.niveis img { width: 180px; height: 180px; }
.niveis .n { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--cor); }
.niveis h3 { margin: 10px 0 0; font-size: 42px; font-weight: 300; line-height: 1; letter-spacing: -0.01em; color: var(--grafite); }
.niveis-bloco .papel span { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--mudo); }
.niveis-bloco .papel p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--texto); }
/* formas de participar: as colunas do parceiro e da SOLSTEIN alinham com as colunas dos níveis (180 + 48 + 220) */
.formas { margin-top: 80px; }
.formas-cabeca { margin-bottom: 26px; }
.formas-cabeca h3 { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.2; color: var(--grafite); }
.formas-cabeca p { margin: 8px 0 0; font-size: 17px; color: var(--mudo); }
.formas-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafite); }
.formas-lista li { display: grid; grid-template-columns: 448px 1fr 1fr; gap: 0 48px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--linha-forte); }
.formas .forma b { display: block; font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--grafite); }
.formas .forma span { display: block; margin-top: 4px; font-size: 15px; color: var(--mudo); }
.niveis-bloco .link { display: inline-block; margin-top: 34px; }
/* fundo escuro na seção, a pedido dele: primeiro em grafite (teste), depois no azul petróleo profundo do Partners,
   que fechou com o metal das medalhas. No gerador, a seção leva "escuro" e a cor ("petroleo" ou "grafite");
   sem as duas classes, volta ao papel */
.niveis-bloco.petroleo { background: var(--azul); border-color: var(--azul); }
.niveis-bloco.grafite { background: var(--grafite); border-color: var(--grafite); }
.niveis-bloco.escuro .olho { color: rgba(245, 242, 235, 0.6); }
.niveis-bloco.escuro .olho::before { background: var(--azul-claro); }
.niveis-bloco.escuro h2, .niveis-bloco.escuro .niveis h3, .niveis-bloco.escuro .formas-cabeca h3, .niveis-bloco.escuro .forma b { color: var(--fundo); }
.niveis-bloco.escuro .intro-niveis, .niveis-bloco.escuro .formas-cabeca p, .niveis-bloco.escuro .forma span { color: rgba(245, 242, 235, 0.66); }
.niveis-bloco.escuro .niveis .n { color: var(--azul-claro); }
.niveis-bloco.escuro .papel span { color: rgba(245, 242, 235, 0.5); }
.niveis-bloco.escuro .papel p { color: rgba(245, 242, 235, 0.88); }
.niveis-bloco.escuro .niveis, .niveis-bloco.escuro .formas-lista { border-top-color: rgba(245, 242, 235, 0.5); }
.niveis-bloco.escuro .niveis li, .niveis-bloco.escuro .formas-lista li { border-bottom-color: rgba(245, 242, 235, 0.14); }
.niveis-bloco.escuro .link { color: var(--fundo); border-bottom-color: var(--azul-claro); }
/* quem pode ser parceiro: lista em duas colunas, com filetes */
.publicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 1px solid var(--grafite); }
.publicos li { padding: 22px 0; border-bottom: 1px solid var(--linha); }
.publicos b { display: block; margin-bottom: 4px; font-size: 20px; font-weight: 500; color: var(--grafite); }
.publicos span { font-size: 16px; color: var(--mudo); }
/* o Partners menor, com B2B: na seta do logo, no rodapé e no Sobre nós */
.marcas-painel a + a { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.marcas-painel a.menor { display: flex; align-items: center; gap: 10px; }
.marcas-painel a.menor img { height: 30px; }
.marcas-painel .b2b { display: inline-block; margin-top: 0; font-size: 10px; color: var(--azul-partners); }
footer .marcas .partners-rodape { display: flex; align-items: center; gap: 10px; text-decoration: none; }
footer .marcas .partners-rodape img { height: 32px; margin-bottom: 0; }
.linha-partners { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 24px; border: 1px dashed rgba(31, 27, 23, 0.28); background: var(--papel); text-decoration: none; }
.linha-partners img { height: 32px; }
.linha-partners .txt { font-size: 13px; color: var(--mudo); }
@media (max-width: 900px) {
  .niveis li { grid-template-columns: 104px 1fr; gap: 18px 20px; padding: 26px 0; }
  .niveis .dados { display: contents; }
  .niveis img { width: 104px; height: 104px; }
  .niveis .papel { grid-column: 1 / -1; }
  .niveis h3 { font-size: 32px; }
  .formas { margin-top: 56px; }
  .formas-lista li { grid-template-columns: 1fr; gap: 14px; }
  .publicos { grid-template-columns: 1fr; }
  .tema-partners .topo .b2b { margin-left: 6px; padding: 2px 5px 1px; font-size: 9px; }   /* o B2B fica também no celular */
  .tema-partners .topo > .miolo { gap: 10px; }
  .tema-partners .topo .botao { padding: 10px 12px; font-size: 13px; }
  .tema-partners .contato .miolo, .form-parceria .campos { grid-template-columns: 1fr; }
}

/* ================= Páginas de texto (07/10/2026): Termos, Privacidade e o artigo de Conteúdos ================= */
/* Papel e grafite, como a SOLSTEIN; laranja só nos detalhes. Os infográficos do artigo são feitos em HTML e CSS, sem
   degradê, sombra nem cantos arredondados, e viram coluna única no celular */
.conteudos ul.proximas .proximas-titulo { padding: 18px 0 14px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--mudo); }

/* Termos e Privacidade em texto corrido e letra pequena, como nos sites em geral (pedido dele, 07/10) */
.documento { padding: 150px 0 96px; }
.documento .miolo { max-width: 760px; }
.documento h1 { margin: 18px 0 6px; font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--grafite); }
.documento .atualizado { margin: 0 0 28px; font-size: 13px; color: var(--mudo); }
.documento p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: var(--texto); }
.documento a { color: var(--grafite); }

.tabela { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 15px; line-height: 1.5; }
.tabela th { padding: 10px 18px 10px 0; text-align: left; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--mudo); border-bottom: 1px solid var(--grafite); }
.tabela td { padding: 14px 18px 14px 0; vertical-align: top; color: var(--texto); border-bottom: 1px solid var(--linha); }
.tabela td:first-child { font-weight: 500; color: var(--grafite); }

.artigo-capa { padding: 168px 0 56px; border-bottom: 1px solid var(--linha); }
.artigo-capa h1 { max-width: 1000px; margin: 22px 0 20px; font-size: 62px; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; color: var(--grafite); text-wrap: balance; }
.artigo-capa .sub { max-width: 760px; margin: 0 0 24px; font-size: 21px; line-height: 1.55; color: var(--mudo); }
.artigo-capa .meta { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--mudo); }
.texto-artigo { padding-top: 24px; padding-bottom: 120px; }
.texto-artigo > h2, .texto-artigo > p, .texto-artigo > .tabela, .texto-artigo > .etapas, .texto-artigo > .fontes { max-width: 760px; }
.texto-artigo > h2 { margin: 64px 0 16px; font-size: 34px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--grafite); }
.texto-artigo > p { margin: 0 0 18px; font-size: 18px; line-height: 1.75; color: var(--texto); }
.texto-artigo .fonte-tabela { font-size: 13px; color: var(--mudo); }
.texto-artigo .ressalva { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linha); font-size: 15px; color: var(--mudo); }
.texto-artigo .fontes h3 { margin: 26px 0 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--mudo); }
.texto-artigo .fontes ul { margin: 0; padding-left: 18px; }
.texto-artigo .fontes li { margin-bottom: 6px; font-size: 14px; line-height: 1.6; color: var(--mudo); }

.infografico { margin: 36px 0 44px; padding: 32px 34px 22px; background: var(--cartao); border-top: 1px solid var(--grafite); }
.infografico figcaption { margin-top: 20px; font-size: 13px; color: var(--mudo); }

/* o que sai e o que entra */
.troca-grade { display: grid; grid-template-columns: max-content 120px minmax(0, 640px); gap: 16px 28px; align-items: center; }
.troca-grade .col-titulo { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--mudo); }
.troca-grade .velhos { display: flex; flex-wrap: wrap; gap: 8px; }
.troca-grade .velhos span { padding: 11px 18px; font-size: 16px; font-weight: 500; color: var(--grafite); background: var(--fundo); border: 1px solid var(--linha-forte); }
.troca-grade .velhos .nao-existia { font-weight: 400; color: var(--mudo); border-style: dashed; }
.troca-grade .seta { position: relative; height: 1px; background: var(--grafite); }
.troca-grade .seta::after { content: ""; position: absolute; right: -1px; top: -5px; border-left: 9px solid var(--grafite); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.troca-grade .novo { padding: 14px 20px; color: var(--fundo); background: var(--grafite); }
.troca-grade .novo b { display: block; font-size: 20px; font-weight: 600; }
.troca-grade .novo span { display: block; margin-top: 2px; font-size: 14px; color: rgba(245, 242, 235, 0.72); }
.troca-grade .novo.zerado { color: var(--grafite); background: transparent; border: 1px solid var(--grafite); }
.troca-grade .novo.zerado span { color: var(--mudo); }

/* ano a ano */
.linha-tempo .fases { display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: 18px; }
.linha-tempo .fase { grid-column: var(--de) / var(--ate); margin-right: 8px; padding-top: 8px; border-top: 3px solid var(--grafite); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--grafite); }
.linha-tempo .fase.agora { color: var(--cor); border-top-color: var(--cor); }
.linha-tempo .anos { display: grid; grid-template-columns: repeat(8, 1fr); margin: 0; padding: 0; list-style: none; }
.linha-tempo .anos li { position: relative; padding: 24px 14px 0 0; border-top: 1px solid var(--linha-forte); }
.linha-tempo .anos li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--grafite); }
.linha-tempo .anos li.agora::before { background: var(--cor); }
.linha-tempo .anos b { display: block; font-size: 22px; font-weight: 500; color: var(--grafite); }
.linha-tempo .anos .aqui { display: block; margin-top: 2px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--cor); }
.linha-tempo .anos p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--texto); }

/* quanto resta do ICMS e do ISS */
.barras .barras-titulo { margin: 0 0 16px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--mudo); }
.barras-lista { margin: 0; padding: 0; list-style: none; max-width: 900px; }
.barras-lista li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; padding: 6px 0; }
.barras-lista b { font-size: 16px; font-weight: 500; color: var(--grafite); }
.barras .trilho { display: flex; height: 36px; }
.barras .trilho .cheio { display: flex; align-items: center; padding-left: 14px; background: var(--grafite); }
.barras .trilho .cheio span { font-size: 14px; font-weight: 500; color: var(--fundo); }
.barras .trilho .vazio { display: flex; align-items: center; padding-left: 14px; border: 1px dashed var(--grafite); }
.barras .trilho .vazio span { font-size: 14px; color: var(--mudo); }
.barras .barras-legenda { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 13px; color: var(--mudo); }
.barras .barras-legenda i { display: inline-block; width: 14px; height: 14px; }
.barras .barras-legenda i.cheio { background: var(--grafite); }
.barras .barras-legenda i.vazio { margin-left: 14px; border: 1px dashed var(--grafite); }

/* o que fazer antes de cada etapa */
.etapas { margin: 8px 0 0; border-top: 1px solid var(--grafite); }
.etapas div { display: grid; grid-template-columns: 190px 1fr; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.etapas dt { padding-top: 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--cor); }
.etapas dd { margin: 0; font-size: 17px; line-height: 1.7; color: var(--texto); }

@media (max-width: 900px) {
  .documento, .artigo-capa { padding-top: 120px; }
  .documento h1 { font-size: 26px; }
  .artigo-capa h1 { font-size: 38px; }
  .artigo-capa .sub { font-size: 18px; }
  .texto-artigo > h2 { font-size: 26px; }
  .infografico { padding: 24px 18px 18px; margin-left: -18px; margin-right: -18px; }
  .troca-grade { grid-template-columns: 1fr; gap: 10px; }
  .troca-grade .col-titulo, .troca-grade > div:nth-child(2) { display: none; }
  .troca-grade .seta { width: 1px; height: 18px; margin-left: 22px; }
  .troca-grade .seta::after { right: auto; top: auto; left: -5px; bottom: -1px; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-top: 9px solid var(--grafite); border-bottom: 0; }
  .troca-grade .novo { margin-bottom: 14px; }
  .linha-tempo .fases { display: none; }
  .linha-tempo .anos { grid-template-columns: 1fr; border-left: 1px solid var(--linha-forte); }
  .linha-tempo .anos li { padding: 0 0 22px 22px; border-top: 0; }
  .linha-tempo .anos li::before { top: 9px; left: -5px; }
  .barras-lista li { grid-template-columns: 48px 1fr; gap: 12px; }
  .etapas div { grid-template-columns: 1fr; gap: 6px; }
  .tabela { font-size: 14px; }
}

/* ================= Menu no celular (07/10/2026) ================= */
/* No celular, o botão do topo dá lugar a "Menu", que abre os links da página num painel de papel; o botão vai para
   dentro do painel. A seta do "Menu" é a mesma da troca de linha */
.abre-celular, .menu-celular { display: none; }
.tema-partners .botao.escuro { background: var(--azul); border-color: var(--azul); color: var(--fundo); }
@media (max-width: 900px) {
  .topo .direita .botao { display: none; }
  .abre-celular { display: inline-flex; align-items: center; gap: 9px; padding: 10px 0 10px 6px; font: inherit; font-size: 15px; font-weight: 500; color: var(--grafite); background: none; border: 0; cursor: pointer; }
  .abre-celular::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .celular-aberto .abre-celular::after { transform: translateY(2px) rotate(225deg); }
  .tema-essencial .abre-celular, .tema-partners .abre-celular { color: var(--fundo); }
  .menu-celular { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; padding: 4px 18px 22px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
  .celular-aberto .menu-celular { display: block; }
  .menu-celular a:not(.botao) { display: block; padding: 15px 0; font-size: 17px; color: var(--grafite); text-decoration: none; border-bottom: 1px solid var(--linha); }
  .menu-celular .botao { display: block; margin-top: 20px; padding: 14px 20px; font-size: 15px; text-align: center; }
}