/* GERADO por tools/velocidade/montar-css-home.cjs a partir de onlume-b.css, onlume-hero-power-v20-9.css, onlume-b-real.css, onlume-app-shell.css, onlume-b-final.css, onlume-b-refino.css. Não editar à mão. */
/* ---- onlume-b.css ---- */
/* Prévia · Direção B "Engenharia de precisão" (19/10/2026).
   Fontes de licença livre (SIL Open Font License 1.1), hospedadas no site:
   IBM Plex Sans (variável, eixos de peso e largura) para títulos e texto e
   IBM Plex Mono para rótulos, números e cotas. Licenças em assets/fonts/<família>/OFL.txt.
   Este arquivo só declara fontes e tokens; o desenho fica em estilo-final.css. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-stretch:85% 100%;font-display:swap;src:url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-wdth-normal.woff2) format("woff2-variations"),url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-wdth-normal.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:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-stretch:85% 100%;font-display:swap;src:url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(/assets/fonts/ibm-plex-sans/ibm-plex-sans-latin-ext-wdth-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Tokens da direção B (tema claro). Mesmos nomes da home, valores próprios. */
:root{
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:var(--sans);                 /* a direção B não usa serifa */
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --raio:0px;

  --fundo:#F4F1EA;            /* creme: base do papel */
  --superficie:#FBF9F4;       /* papel claro: cartões, formulário */
  --superficie-2:#ECE7DC;     /* faixas e estados */
  --tinta:#13201A;
  --tinta-2:#46524C;
  --linha:#D3CCBD;            /* filete padrão */
  --linha-forte:#1F4D3A;      /* filete de cota */
  --acento:#1F4D3A;
  --acento-sub:rgba(31,77,58,.4);
  --numero:#6F5714;           /* ouro escuro para texto pequeno (AA sobre creme) */
  --foco:#1F4D3A;
  --cartao-sombra:none;
  --btn-solido-bg:#1F4D3A;--btn-solido-tx:#FFFFFF;--btn-solido-hover:#0F2A1F;
  --btn-ouro-bg:#C9A646;--btn-ouro-tx:#0F2A1F;--btn-ouro-hover:#D8BA62;
  --campo-bg:#FFFFFF;--campo-borda:#7D7566;--campo-tx:#13201A;--campo-placeholder:#686152;
  --escura-bg:#0F2A1F;--escura-tx:#F4F1EA;--escura-tx-2:#C1CCC5;--escura-destaque:#E2C877;--escura-borda:transparent;
  --folha-bg:#FBF9F4;--folha-tx:#13201A;--folha-tx-2:#46524C;--folha-borda:#D3CCBD;--folha-linha:#D3CCBD;--folha-termo:#1F4D3A;
  --capa-bg:#ECE7DC;--capa-borda:#D3CCBD;
  --hero-bg:#0F2A1F;--hero-luz:transparent;
  --topo-bg:#0F2A1F;
  --rodape-bg:#0B1F17;
  --cromo-linha:rgba(226,200,119,.22);

  /* Próprios da direção B */
  --grade:rgba(31,77,58,.075);        /* linhas da grade de 12 colunas */
  --grade-cromo:rgba(226,200,119,.075);
  --cota:#1F4D3A;                     /* marcas de canto e réguas */
  --casca:min(calc(100% - 32px),var(--max));
  --vitrine-borda:#D3CCBD;
  --vitrine-sombra:none;
  --celular-sombra:0 18px 40px -24px rgba(8,21,16,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#0B1A14;--superficie:#0F2219;--superficie-2:#142C21;
    --tinta:#EEE9DC;--tinta-2:#B4C1B9;--linha:#264434;--linha-forte:#C9A646;
    --acento:#DCC274;--acento-sub:rgba(220,194,116,.45);--numero:#DCC274;--foco:#E2C877;
    --cartao-sombra:none;
    --btn-solido-bg:#EEE9DC;--btn-solido-tx:#0F2A1F;--btn-solido-hover:#FFFFFF;
    --campo-bg:#08140F;--campo-borda:#7E9488;--campo-tx:#EEE9DC;--campo-placeholder:#93A49A;
    --escura-bg:#0F2A1F;--escura-borda:#264434;
    --folha-bg:#08140F;--folha-tx:#EEE9DC;--folha-tx-2:#B4C1B9;--folha-borda:#264434;--folha-linha:#264434;--folha-termo:#DCC274;
    --capa-bg:#0F2219;--capa-borda:#264434;
    --hero-bg:#0A1E16;--topo-bg:#0A1E16;--rodape-bg:#07140F;
    --grade:rgba(220,194,116,.06);--cota:#DCC274;
    --cartao-luz:none;--cartao-relevo:none;--secao-divisa:transparent;
    --vitrine-borda:#264434;--vitrine-sombra:none;
  }
}
:root[data-theme="dark"]{
  --fundo:#0B1A14;--superficie:#0F2219;--superficie-2:#142C21;
  --tinta:#EEE9DC;--tinta-2:#B4C1B9;--linha:#264434;--linha-forte:#C9A646;
  --acento:#DCC274;--acento-sub:rgba(220,194,116,.45);--numero:#DCC274;--foco:#E2C877;
  --cartao-sombra:none;
  --btn-solido-bg:#EEE9DC;--btn-solido-tx:#0F2A1F;--btn-solido-hover:#FFFFFF;
  --campo-bg:#08140F;--campo-borda:#7E9488;--campo-tx:#EEE9DC;--campo-placeholder:#93A49A;
  --escura-bg:#0F2A1F;--escura-borda:#264434;
  --folha-bg:#08140F;--folha-tx:#EEE9DC;--folha-tx-2:#B4C1B9;--folha-borda:#264434;--folha-linha:#264434;--folha-termo:#DCC274;
  --capa-bg:#0F2219;--capa-borda:#264434;
  --hero-bg:#0A1E16;--topo-bg:#0A1E16;--rodape-bg:#07140F;
  --grade:rgba(220,194,116,.06);--cota:#DCC274;
  --cartao-luz:none;--cartao-relevo:none;--secao-divisa:transparent;
  --vitrine-borda:#264434;--vitrine-sombra:none;
}
/* ---- onlume-hero-power-v20-9.css ---- */
/* Interruptor da engrenagem do hero (v20.9.2): uma única tecla power em 3D.
   Ligada: tecla afundada e verde, engrenagem e palavras girando.
   Desligada: tecla levantada e apagada, engrenagem e palavras paradas e cinzas. */
.hero-symbol.metal-machine{position:relative}
.hero-power-toggle{position:absolute;z-index:12;left:49.37%;top:49.79%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-power-toggle:focus-visible{outline:2px solid #75ff97;outline-offset:6px}
/* Uma tecla só: some o neon sobreposto e a faixa de brilho que atravessava o centro */
.hero-symbol.metal-machine .hero-power-neon,.hero-symbol.metal-machine .machine-scan{display:none!important}
.hero-symbol.metal-machine .metal-gear,.hero-symbol.metal-machine .symbol-glow,.hero-symbol.metal-machine .hero-word-ring{transition:filter .8s ease,opacity .8s ease}
.hero-symbol.metal-machine .metal-core{animation:none!important;opacity:1!important;transition:transform .18s cubic-bezier(.3,.7,.4,1.3),filter .45s ease!important}
/* Ligada: afundada e verde */
.hero-symbol.metal-machine.lume-on .metal-gear{animation:metalGearSpin 20s linear infinite;animation-play-state:running}
.hero-symbol.metal-machine.lume-on .metal-core{transform:translate(-50%,-50%) scale(.93)!important;filter:hue-rotate(58deg) saturate(1.9) brightness(.95) drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(71,255,115,.7)) drop-shadow(0 0 26px rgba(71,255,115,.38))!important}
/* Desligada: levantada e apagada */
.hero-symbol.metal-machine.lume-off .metal-gear{animation:metalGearSpin 20s linear infinite;animation-play-state:paused!important;filter:grayscale(.92) brightness(.4)!important}
.hero-symbol.metal-machine.lume-off .metal-core{transform:translate(-50%,-50%) scale(1.035)!important;filter:grayscale(1) brightness(.5) drop-shadow(0 10px 14px rgba(0,0,0,.75)) drop-shadow(0 3px 3px rgba(0,0,0,.6))!important}
.hero-symbol.metal-machine.lume-off .symbol-glow{opacity:.1}
.hero-symbol.metal-machine.lume-off .hero-word-ring{opacity:.38;filter:grayscale(1)}
.hero-symbol.metal-machine.lume-off .orbit-word,.hero-symbol.metal-machine.lume-off .orbit-word.orbit-lit{fill:#8b8f8c!important;text-shadow:none!important;filter:none!important}
/* Clique: a tecla desce um pouco mais e volta */
.hero-symbol.metal-machine.is-pressing .metal-core{transform:translate(-50%,-50%) scale(.88)!important}
@media(prefers-reduced-motion:reduce){.hero-symbol.metal-machine.lume-on .metal-gear{animation:none!important}}
/* Centralização milimétrica (medida nos pixels das imagens):
   - furo da engrenagem: centro em 49,84% x 49,20% da imagem → a engrenagem gira em torno dele (sem balanço);
   - anel do power: centro em 49,92% x 54,39% da imagem → é esse ponto que fica no centro do furo;
   - a tecla escala em torno do próprio anel, então afundar/levantar não a desloca. */
.hero-symbol.metal-machine .metal-gear{transform-origin:49.84% 49.2%!important}
.hero-symbol.metal-machine .metal-core{left:50.029%!important;top:48.739%!important;transform-origin:49.92% 54.39%!important}
.hero-power-toggle{left:50.005%;top:50.034%}
@media(max-width:820px){
  .hero-symbol.metal-machine .metal-core{left:50.038%!important;top:48.905%!important}
  .hero-power-toggle{left:50.016%;top:50.09%}
}
@media(max-width:440px){
  .hero-symbol.metal-machine .metal-core{left:50.041%!important;top:48.921%!important}
  .hero-power-toggle{left:50.019%;top:50.106%}
}
/* 3D mais marcado: desligada fica alta, para fora; ligada afunda e acende verde */
.hero-symbol.metal-machine.lume-off .metal-core{transform:translate(-50%,-50%) scale(1.06)!important;filter:grayscale(1) brightness(.55) drop-shadow(0 16px 18px rgba(0,0,0,.8)) drop-shadow(0 5px 4px rgba(0,0,0,.65))!important}
.hero-symbol.metal-machine.lume-on .metal-core{transform:translate(-50%,-50%) scale(.92)!important;filter:hue-rotate(58deg) saturate(1.9) brightness(.92) drop-shadow(0 1px 1px rgba(0,0,0,.8)) drop-shadow(0 0 9px rgba(71,255,115,.7)) drop-shadow(0 0 24px rgba(71,255,115,.38))!important}
.hero-symbol.metal-machine.is-pressing .metal-core{transform:translate(-50%,-50%) scale(.88)!important}
/* ---- onlume-b-real.css ---- */
/* onLUME · Direção B, camada da home (19 e 20/10/2026, decisões do Jotta sobre a revisão anti-IA).
   Em 20/10 o Jotta pediu de volta a engrenagem 3D da abertura e os selos premium do ISC-LUME
   (itens 1 e 2 da revisão desfeitos): a engrenagem volta com onlume-hero-power-v20-9.css, montada
   antes desta folha; a captura da Área do Cliente volta para a vitrine do bloco Área do Cliente.
   Ficam aqui: a home em oito seções (blocos fundidos e recolhidos), os rótulos das medalhas do
   ISC-LUME que cabem na caixa e os guias da Inteligência LUME em cartões com capa.
   Montada em onlume-home.css por tools/velocidade/montar-css-home.cjs. */

/* ---------- 1. Home mais curta: blocos fundidos e conteúdo recolhido ---------- */
/* Seções que viraram blocos de uma seção vizinha (O que é a onLUME, Área do Cliente, Inteligência):
   separação por filete e respiro, sem nova numeração de seção. */
.casca-seguinte{margin-top:clamp(4rem,8vw,6.5rem);padding-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--linha)}
/* "Depois de contratar" mantém a faixa escura de antes, agora dentro da seção de planos. */
.bloco-escuro{margin-top:clamp(4rem,8vw,6.5rem);padding:clamp(3.5rem,7vw,6rem) 0}
.bloco-escuro+.casca-seguinte{border-top:0;padding-top:0}
/* Conteúdo recolhido: o resumo é um botão de texto com sinal de abrir/fechar. */
details.mais{margin-top:clamp(2.5rem,5vw,4rem)}
.mais-resumo{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;padding:var(--s2) 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);cursor:pointer;list-style:none;font-weight:600;font-size:1.0625rem;color:var(--tinta)}
.mais-resumo::-webkit-details-marker{display:none}
.mais-resumo::after{content:"+";flex:none;font-family:var(--mono);font-size:1.25rem;line-height:1;color:var(--acento)}
details.mais[open]>.mais-resumo{margin-bottom:var(--s5)}
details.mais[open]>.mais-resumo::after{content:"−"}
.mais-resumo:focus-visible{outline:3px solid var(--foco);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.mais-resumo:hover{color:var(--acento)}}
/* ---------- 2. ISC-LUME: medalhas com rótulo dentro da caixa ---------- */
/* O status em mono e caixa alta (camada final) estourava a caixa entre 600 e 1120 px
   ("5 ESTRELAS · CERTIFICADO" numa coluna de ~80 px). Aqui o rótulo e o status usam a sans,
   com 12 px, sem espaçamento extra, e quebram entre palavras (ou no hífen marcado em
   "Condicio-nada" e "certifi-cação", na coluna mais estreita, entre 821 e 940 px); nada sai da caixa. */
.isc-selos .isc-selo{justify-content:flex-start;padding-left:2px;padding-right:2px}
.isc-selos .isc-selo img{flex:none}
.isc-selos .isc-selo-rotulo,.isc-selos .isc-selo-status{max-width:100%;font-size:.75rem;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.isc-selos .isc-selo-rotulo{letter-spacing:-.01em}
.isc-selos .isc-selo-status{font-family:var(--sans);letter-spacing:0;text-transform:none;line-height:1.35}
@media(min-width:601px) and (max-width:1120px){.isc-selos{gap:6px}}

/* ---------- 3. Inteligência LUME na home: guias em cartões com capa ---------- */
/* A grade de cinco (dois em destaque e três) vem de onlume-v21.css acima de 1120 px.
   Entre 601 e 1120 px, três por linha com o último par centrado não fecha: fica em duas
   colunas com o primeiro guia em destaque na linha inteira. */
#inteligencia .artigos{margin-top:var(--s4)}
#inteligencia .artigo h3{text-wrap:balance}
@media(min-width:601px) and (max-width:1120px){
  #inteligencia .artigos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  #inteligencia .artigos .artigo:first-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 var(--s3);align-content:start}
  #inteligencia .artigos .artigo:first-child .artigo-capa{grid-row:1 / span 4;margin-bottom:0}
  #inteligencia .artigos .artigo:first-child .link{margin-top:var(--s1)}
}
/* ---- onlume-app-shell.css ---- */
/* onLUME · casca de aplicativo (PWA) — 19/10/2026
   Camada única, carregada por último nas páginas públicas, para o site se comportar
   como aplicativo instalado: áreas seguras (entalhe, barra de status translúcida,
   indicador de início), elementos fixos inferiores empilhados sem colisão e nada de
   oferta de instalação dentro do próprio aplicativo.
   Não altera conteúdo nem cores; só posição, espaçamento e comportamento de toque.
   Valores de env() só existem com viewport-fit=cover; sem ele valem 0 e nada muda. */

/* ---------- Toque ---------- */
html{-webkit-tap-highlight-color:transparent}
/* Sem espera de toque duplo nos controles (o zoom por pinça continua liberado). */
a,button,summary,label,select,input,textarea,[role="button"]{touch-action:manipulation}
/* Rótulo de controle não é texto para selecionar; conteúdo continua selecionável. */
button,.btn,.tema-botao,.menu-botao,.instalar-fechar,.dialogo-fechar,.acoes-flutuantes button{-webkit-user-select:none;user-select:none}
button,.acoes-flutuantes button{-webkit-touch-callout:none}
/* Retorno imediato ao toque nos controles flutuantes, que não têm :hover no celular. */
.acoes-flutuantes button:active,.instalar-fechar:active,.tema-botao:active,.menu-botao:active{transform:scale(.96)}
/* :hover só existe com mouse: as próprias folhas (v21, v17, produtos, páginas, revista)
   guardam cada regra em @media (hover:hover) and (pointer:fine), então nada fica preso
   depois do toque e não é preciso neutralizar aqui. */
/* Rolagem interna não arrasta a página de trás. */
.dialogo,.topo.aberto .menu{overscroll-behavior:contain}

/* ---------- Topo: área segura (barra de status translúcida no iPhone) ---------- */
.topo,.editorial-header{padding-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
/* A abertura e o menu aberto das páginas no visual B (onlume-b-final.css, carregada depois
   desta) já somam a área segura ao cabeçalho de 64 px; aqui não se repete, para não mudar o desenho. */
/* Barra de leitura dos artigos: logo abaixo do cabeçalho (72 px + 1 px de borda), e não
   por cima dele nem atrás da barra de status. */
.rv-progresso{top:calc(73px + env(safe-area-inset-top,0px))}
/* Páginas sem cabeçalho fixo: o primeiro bloco escuro desce o tamanho da área segura. */
[data-intel-resource="Boletim LUME"] .top{padding-top:env(safe-area-inset-top,0px)}
.entrar-apresentacao{padding-top:calc(64px + env(safe-area-inset-top,0px))}
@media(max-width:640px){.entrar-apresentacao{padding-top:calc(36px + env(safe-area-inset-top,0px))}}

/* Aplicativo instalado em página sem cabeçalho fixo: faixa escura atrás da barra de
   status, para hora e bateria (texto claro) continuarem legíveis quando o conteúdo
   claro rola por baixo dela. Só existe quando há área segura no topo. */
@media (display-mode:standalone),(display-mode:fullscreen){
  body:not(:has(.topo,.editorial-header))::before{content:"";position:fixed;inset:0 0 auto;z-index:1000;height:env(safe-area-inset-top,0px);background:rgba(4,20,14,.94);pointer-events:none}
}

/* ---------- Base: indicador de início do iPhone ---------- */
.rodape{padding-bottom:calc(var(--s4,32px) + env(safe-area-inset-bottom,0px))}
.editorial-footer{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}

/* ---------- Pilha inferior: cartão de instalação, botões flutuantes e aviso ----------
   Ordem de baixo para cima: cartão (quando o navegador oferece a instalação),
   botões flutuantes, aviso. A altura real do cartão chega por --instalar-h (script
   do cartão); 128 px é a altura medida com o texto em duas linhas. */
:root{--app-respiro:12px;--app-base:calc(var(--app-respiro) + env(safe-area-inset-bottom,0px))}
@media(min-width:601px){:root{--app-respiro:18px}}
body .instalar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
body .acoes-flutuantes{right:calc(var(--app-respiro) + env(safe-area-inset-right,0px));bottom:var(--app-base)}
body .aviso-flutuante{right:calc(var(--app-respiro) + env(safe-area-inset-right,0px));bottom:calc(var(--app-base) + 56px)}
body.com-instalar .acoes-flutuantes{bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--instalar-h,128px) + 12px)}
body.com-instalar .aviso-flutuante{bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--instalar-h,128px) + 68px)}
/* Com o cartão aberto, o fim da página sobe o suficiente para o rodapé não ficar por baixo. */
body.com-instalar .rodape{padding-bottom:calc(var(--s4,32px) + 28px + var(--instalar-h,128px) + env(safe-area-inset-bottom,0px))}
/* O aviso dos flutuantes sai junto com eles quando o rodapé (que repete os botões) aparece. */
.acoes-flutuantes.recolhido~.aviso-flutuante{opacity:0;transform:translateY(8px)}
/* Enquanto os botões principais da abertura estão na tela, nada flutua por cima deles. */
.instalar,.acoes-flutuantes,.aviso-flutuante{transition:opacity .2s ease,transform .2s ease,visibility .2s,bottom .2s ease}
body.na-abertura .instalar,body.na-abertura .acoes-flutuantes,body.na-abertura .aviso-flutuante{opacity:0;visibility:hidden;pointer-events:none}
body.na-abertura .acoes-flutuantes{transform:translateY(12px)}
/* Aviso de conteúdo novo: é a única peça inferior enquanto está aberto, respeita a área
   segura e nunca sobe por trás do cabeçalho. */
body .aviso-artigo[open]{bottom:calc(16px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 72px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px)}
body:has(.aviso-artigo[open]) .instalar,body:has(.aviso-artigo[open]) .acoes-flutuantes,body:has(.aviso-artigo[open]) .aviso-flutuante{opacity:0;visibility:hidden;pointer-events:none}
/* O aviso só abre depois da abertura (onlume-mobile-v18-4.js) e se recolhe se a pessoa
   volta a ela, para nunca ficar por cima das ações principais. Enquanto o script mede o
   espaço que ele ocuparia, fica invisível. */
body.na-abertura .aviso-artigo[open],.aviso-artigo.aviso-medindo{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- Aplicativo instalado ----------
   Dentro do aplicativo não se oferece instalar nem "salvar no dispositivo".
   .modo-app é o reforço para o iPhone (navigator.standalone), aplicado pelo script. */
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  .instalar,#onlumeInstallCard,#onlumeFabSave,#onlumeSaveBtn{display:none!important}
  /* Sem "puxar para atualizar" na raiz: a navegação já busca a versão nova na rede. */
  html{overscroll-behavior-y:contain}
}
.modo-app .instalar,.modo-app #onlumeInstallCard,.modo-app #onlumeFabSave,.modo-app #onlumeSaveBtn{display:none!important}

@media (prefers-reduced-motion:reduce){
  .instalar,.acoes-flutuantes,.aviso-flutuante{transition:none}
  .acoes-flutuantes button:active,.instalar-fechar:active,.tema-botao:active,.menu-botao:active{transform:none}
}
@media print{.instalar{display:none!important}}
/* ---------- Transição entre páginas (View Transitions entre documentos) ----------
   Navegação de mesma origem com troca curta por esmaecimento (200 ms, ease-out) em vez
   do corte seco; o cabeçalho tem nome próprio e fica parado quando é o mesmo nas
   duas páginas. Chromium 126+ e Safari 18.2+; os demais navegam como antes. Só existe
   sem pedido de movimento reduzido: com ele, a troca é instantânea. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .topo,.editorial-header{view-transition-name:topo}
  ::view-transition-group(*){animation-duration:.2s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
}

/* ---- onlume-b-final.css ---- */
/* Prévia · Direção B "Engenharia de precisão": camada final sobre onlume-v21.css.
   Princípios: grade de 12 colunas visível (4 no celular); cada seção numerada como
   folha de projeto; filetes e cantoneiras no lugar de sombras; números e rótulos em
   mono; cantos retos; diagramas (trilhas, fases, passos) desenhados com linha e nó.
   Cores, fontes e tokens em estilo.css. */

/* ---------- Base e plataforma (celular) ---------- */
html{-webkit-tap-highlight-color:transparent}
body{font-size:1.0625rem;line-height:1.6;font-feature-settings:"kern","liga","tnum" 0}
a,button,summary,[role="button"]{touch-action:manipulation}
.btn,.mapa-opcoes button,.isc-selo,.tema-botao,.menu-botao,.acoes-flutuantes button{-webkit-user-select:none;user-select:none}
h1,h2,h3,h4{font-family:var(--sans);font-weight:500;font-stretch:88%;letter-spacing:-.022em}
h1 em,h2 em,h3 em{font-style:normal;font-weight:300}
.secao h2 em,.secao h3 em{color:var(--acento)}
strong,b{font-weight:600}

/* Rótulos, números e cotas: IBM Plex Mono. Piso de 12 px. */
.chapeu,.passo-n,.trilha b,.jornada b,.fases b,.eixo-fluxo b,.etiquetas-linha b,.mapa-codigo,.onde-lista small,
.cadencia small,.responsabilidade span,.plano-rotulo,.aplicacao span,.heranca-mes small,.heranca-mes li span,
.artigo small,.mapa-rotulo,.mapa-fluxo small,.plano-metricas dt,.plano-valor span,.isc-painel-chapeu,
.isc-modulos-rotulo,.form-chapeu,.eixo-investimento small,.metodo-leitura span,.pilares span,
.vitrine figcaption strong,.folha-cabeca span,.mapa-cabeca span,.mapa-proximo span,.avulso-valor small,
.compromisso-numero small,.compromisso-numero span,.rodape-base,.acoes-nota,.abertura-nota,.isc-selo-status{
  font-family:var(--mono);font-weight:400;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.abertura-nota,.acoes-nota{text-transform:none;letter-spacing:.01em;font-size:.8125rem}
.rodape-base{text-transform:none;letter-spacing:.02em}

/* ---------- Grade visível e numeração de seção ---------- */
main{counter-reset:secao}
main>section{position:relative}
main>section>.casca{position:relative;z-index:1}
main>section::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:50%;width:var(--casca);transform:translateX(-50%);pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--grade) 0 1px,transparent 1px calc(100% / 12));border-right:1px solid var(--grade)}
.abertura::before,.secao-escura::before{--grade:var(--grade-cromo)}
main>section:not(.abertura){counter-increment:secao}
main>section:not(.abertura)::after{content:"§ " counter(secao,decimal-leading-zero) / "";position:absolute;z-index:2;top:0;left:calc(50% - var(--casca) / 2);
  padding:6px 10px 6px 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--numero);background:linear-gradient(var(--cota),var(--cota)) left top/100% 2px no-repeat}
.secao-escura::after{color:var(--escura-destaque)!important;--cota:var(--escura-destaque)}
.secao{padding:clamp(4.5rem,8vw,7.5rem) 0}
.secao+.secao{border-top:1px solid var(--linha)}
.secao-escura,.secao-escura+.secao{border-top-color:transparent}

/* Chapéu: régua curta + texto mono. */
.chapeu{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);color:var(--numero)}
.chapeu::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.abertura .chapeu,.secao-escura .chapeu,.eixo .chapeu{color:var(--escura-destaque)}

/* Cabeçalho de seção: régua milimetrada no topo, título à esquerda, texto em coluna. */
.cabeca{padding-top:var(--s4);border-top:1px solid var(--linha);align-items:start;margin-bottom:clamp(2.5rem,5vw,4rem);
  background:repeating-linear-gradient(90deg,var(--linha) 0 1px,transparent 1px 8px) left top/100% 6px no-repeat}
.secao-escura .cabeca{border-top-color:color-mix(in srgb,var(--escura-destaque) 30%,transparent);
  background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--escura-destaque) 30%,transparent) 0 1px,transparent 1px 8px)}
.cabeca h2,.sobre h2,.heranca h2,.entrega h2,.contato-grade h2{font-size:clamp(2rem,3.7vw,3.25rem);line-height:1.04;max-width:18ch}
.cabeca p{font-size:1.0625rem;max-width:54ch}
.subcabeca h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}

/* ---------- Botões, links, campos: cantos retos ---------- */
.btn{border-radius:0;min-height:48px;padding:0 1.375rem;font-size:.9375rem;font-weight:600;letter-spacing:0}
.btn-ouro{box-shadow:inset 0 -2px 0 rgba(15,42,31,.25)}
.link{font-size:.9375rem;text-underline-offset:.3em;text-decoration-thickness:1px}
.campo input:not([type=checkbox]),.campo select,.campo textarea{border-radius:0}
.mapa-opcoes button,.isc-selo,.selos-texto li,.etiquetas-linha li,.temas li,.isc-modulos li{border-radius:0}
.selos-texto li,.etiquetas-linha li,.temas li,.isc-modulos li{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;background:transparent}
.tema-botao,.menu-botao{border-radius:0}

/* ---------- Superfícies: filete de 1 px e cantoneiras de cota ---------- */
.cartao,.plano,.avulso,.mapa,.form,.folha,.isc-painel,.em-acao,.compromisso,.prevencao-bloco,.heranca-mes,.provas li,.fundamentos-grade li,.boletim,.plano-detalhe{
  --c:var(--cota);
  border-radius:0!important;box-shadow:none!important;border:1px solid var(--linha)!important;
  background:
    linear-gradient(var(--c),var(--c)) left top/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) left top/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) right top/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/2px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/2px 16px no-repeat,
    var(--superficie)!important}
.secao-papel .cartao,.secao-papel .fundamentos-grade li,.secao-papel .prevencao-bloco,.secao-papel .heranca-mes,.secao-papel .boletim{background-color:var(--fundo)!important}
.secao-papel{background:var(--superficie)}
.folha{border-left:1px solid var(--linha)!important}
.isc-painel{border-top:1px solid var(--linha)!important}
.cartao h3,.plano h4,.avulso h3,.prevencao-bloco h3{letter-spacing:-.02em}
.plano h4{font-size:2.25rem}
.plano-gold{--c:var(--ouro)}
.eixo{border-radius:0}
.eixo-entregas div,.eixo-credito{border-radius:0}
.cadencia li{border-radius:0}
.mapa-fluxo li,.mapa-caso,.isc-detalhe,.contato-nota{border-radius:0}
.responsabilidade{border-radius:0;background:transparent}
.plano ul li::before{border-color:var(--acento)}

/* ---------- Diagramas: passos, trilhas e fases com linha e nó ---------- */
.passos{gap:0}
.passo{position:relative;padding:var(--s4) var(--s3) 0 0;border-top:2px solid var(--cota)}
.passo::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;background:var(--fundo);border:2px solid var(--cota)}
.passo:last-child::after{content:"";position:absolute;right:0;top:-7px;width:0;height:0;border-left:10px solid var(--cota);border-block:6px solid transparent}
.passo-n{font-size:.8125rem;color:var(--numero)}
.passo-n::before{content:"ETAPA "}
.passo h3{font-size:1.75rem}
.passo-detalhe{border-top-style:solid}
.trilha li,.eixo-fluxo li{position:relative;border-top-width:2px}
.trilha li::before,.eixo-fluxo li::before{content:"";position:absolute;left:0;top:-5px;width:8px;height:8px;background:currentColor;color:var(--cota)}
.eixo-fluxo li::before{color:var(--escura-destaque)}
.trilha strong,.eixo-fluxo b{font-family:var(--sans)}
.fases li{grid-template-columns:56px 1fr;border-top:1px solid var(--linha)}
.fases b{font-size:.8125rem;color:var(--numero)}
.jornada b{font-size:.875rem;align-self:start;padding-top:4px}
.fundamentos-grade .passo-n::before{content:"F "}
.compromisso .compromisso-numero strong{font-family:var(--mono);font-weight:500;font-size:3rem;letter-spacing:-.02em}
.mapa-trilho,.lead-progress .track,.lead-progress .track i,.mapa-trilho i{border-radius:0}

/* ---------- Cabeçalho do site ---------- */
.topo{background:var(--topo-bg);backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:env(safe-area-inset-top,0px)}
.topo-linha{height:64px}
.marca-nome{font-family:var(--sans);font-weight:600;font-stretch:90%;letter-spacing:-.01em;font-size:1.375rem}
.marca img{border-radius:0}
.menu{gap:var(--s3)}
.menu a{font-size:.875rem;font-weight:500;letter-spacing:0}
html{scroll-padding-top:80px}

/* ---------- Abertura: prancha de projeto ---------- */
.abertura h1 em,.secao h2 em,.secao h3 em,.eixo h3 em{font-style:normal;font-weight:300}
.abertura::before{z-index:1}
.abertura-grade{z-index:2}
@media(min-width:821px){
  /* Foto arquitetônica como painel à direita, separada por filete ouro; o texto fica sobre o verde liso, com a grade. */
  .abertura .abertura-foto{left:50%}
  .abertura-foto::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:2px;background:var(--ouro)}
  .abertura .abertura-foto img{filter:grayscale(.4) contrast(1.1) brightness(.85)}
  .abertura .abertura-foto::after{background:linear-gradient(90deg,color-mix(in srgb,var(--hero-bg) 50%,transparent) 0%,color-mix(in srgb,var(--hero-bg) 22%,transparent) 100%)}
}
.abertura{padding:calc(64px + env(safe-area-inset-top,0px) + clamp(2.5rem,7vw,6rem)) 0 clamp(3rem,7vw,6rem);background:var(--hero-bg)}
.abertura-foto img{filter:grayscale(.55) contrast(1.08) brightness(.92)}
.abertura-foto::after{background:linear-gradient(90deg,color-mix(in srgb,var(--hero-bg) 96%,transparent) 0%,color-mix(in srgb,var(--hero-bg) 90%,transparent) 46%,color-mix(in srgb,var(--hero-bg) 62%,transparent) 100%)}
.abertura h1{font-size:clamp(2.75rem,5.3vw,5rem);line-height:1;letter-spacing:-.03em;max-width:12ch;font-weight:500;font-stretch:85%}
.abertura h1 em{color:var(--escura-destaque)}
.abertura .lead{font-size:1.125rem;line-height:1.6;max-width:42ch}
.abertura .mantra{font-family:var(--mono);font-style:normal;font-size:.9375rem;letter-spacing:.02em;border-left:2px solid var(--ouro);padding:4px 0 4px var(--s2)}
.pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--cromo-linha);padding-top:0}
.pilares li{padding:var(--s2) var(--s2) 0 0;border-right:1px solid var(--cromo-linha)}
.pilares li+li{padding-left:var(--s2)}
.pilares li:last-child{border-right:0}
.pilares strong{font-family:var(--sans);font-weight:500;font-size:1.25rem;color:var(--cromo-titulo)}
.pilares span{color:var(--cromo-nota)}
/* Engrenagem sobre uma mira de eixo (linhas de centro). */
.abertura-simbolo{position:relative}
.abertura-simbolo::before{content:"";position:absolute;inset:0 0 auto;aspect-ratio:1;max-width:100%;pointer-events:none;
  background:linear-gradient(var(--cromo-linha),var(--cromo-linha)) center/100% 1px no-repeat,linear-gradient(var(--cromo-linha),var(--cromo-linha)) center/1px 100% no-repeat}
.symbol-glow{opacity:.55}
.metodo-leitura strong{font-family:var(--sans);font-weight:500}
.hero-symbol .hero-word-ring .orbit-word{font-family:var(--mono);font-weight:500}

/* ---------- Seções específicas ---------- */
.e-nao h4{font-family:var(--sans);font-weight:500;font-size:1.75rem}
.fundamentos-grade h4,.onde-lista h4{font-family:var(--sans);font-weight:500;font-size:1.375rem;letter-spacing:-.015em}
.mapa-cabeca strong,.mapa-caso>strong,.folha-cabeca strong,.folha dt,.mapa-fluxo strong,.provas strong,.heranca-mes li strong,.isc-detalhe strong,
.qualidades dt,.isc-camadas dt,.plano-valor strong,.avulso-valor strong,.eixo-investimento strong,.trilha strong,.responsabilidade strong{font-family:var(--sans);font-weight:500;letter-spacing:-.015em}
.mapa-pe,.folha-pe,.principio,.citacao,.destaque,.entrega .sub{font-family:var(--sans);font-style:normal;font-weight:400}
.principio{font-weight:300;font-stretch:88%}
.destaque{font-size:1.1875rem;border-left-width:2px}
.citacao{font-weight:300;font-stretch:88%}
.mapa{border-top:1px solid var(--linha)!important}
.mapa-codigo b{font-weight:500}
.eixo-investimento strong{font-size:2rem}
.isc h2{font-size:clamp(2.25rem,4vw,3.5rem)}
.faq summary{font-size:1rem;min-height:56px}
.faq summary::after{font-family:var(--mono);font-size:1.25rem}
.artigo h3{font-size:1.3125rem;line-height:1.2}
.artigo-capa{border-radius:0!important;border-bottom-width:2px}
.vitrine-tela{border-radius:0}
.vitrine-barra span{border-radius:0;font-family:var(--mono)}

/* Fotografia: sem moldura arredondada. As fotos da home são geradas (Canva): legenda
   "Imagem ilustrativa", nunca numeração de figura técnica (revisão anti-IA, 19/10/2026). */
.foto{border-radius:0;border:1px solid var(--linha)}
.foto img{filter:grayscale(.25) contrast(1.05)}
.foto::after{content:"Imagem ilustrativa";position:absolute;z-index:2;left:0;bottom:0;padding:4px 10px;background:var(--fundo);color:var(--tinta);font-family:var(--mono);font-size:.75rem;letter-spacing:.08em}

/* Rodapé */
.rodape{border-top:2px solid var(--ouro)}
.rodape .marca-nome{font-size:1.25rem}
.rodape nav a{font-size:.875rem}

/* Ênfase nas superfícies escuras: ouro claro, peso regular (contraste AA). */
.secao-escura h2 em,.secao-escura h3 em,.eixo h3 em,.abertura h1 em{color:var(--escura-destaque);font-weight:400}
.metodo-leitura{padding:var(--s1) var(--s2);background:color-mix(in srgb,var(--hero-bg) 82%,transparent)}

/* ---------- Toque: sem hover preso ---------- */
/* (Sem neutralizar :hover em toque: todo :hover das folhas do site já vale só com mouse,
   em @media (hover:hover) and (pointer:fine); ver onlume-v21.css.) */
.btn:active{filter:brightness(.94)}
.mapa-opcoes button:active,.isc-selo:active{filter:brightness(.94)}
.acoes-flutuantes button{border-radius:0}
.topo.aberto~.acoes-flutuantes{display:none}

/* ---------- Tablet ---------- */
@media(max-width:980px){
  .topo.aberto .menu{top:calc(64px + env(safe-area-inset-top,0px))}
  .topo.aberto .menu a{min-height:48px;font-size:1rem}
}
@media(max-width:820px){
  main>section::before{background:repeating-linear-gradient(90deg,var(--grade) 0 1px,transparent 1px calc(100% / 4))}
  .passos{gap:var(--s4) 0}
  .passo{padding-right:var(--s2)}
  .passo:last-child::after{display:none}
  .hero-symbol.metal-machine{width:min(76vw,320px)}
}

/* ---------- Celular (360 a 600 px) ---------- */
@media(max-width:600px){
  body{font-size:1rem}
  .topo-linha{height:60px}
  .topo-acoes{gap:6px}
  .topo-acoes .btn-ouro{min-height:44px;height:44px;padding:0 14px;font-size:.875rem}
  .tema-botao,.menu-botao{width:44px!important;height:44px!important}
  .marca{gap:8px}
  .marca img{width:30px;height:30px}
  .marca-nome{font-size:1.1875rem}
  .topo.aberto .menu{top:calc(60px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 60px)}
  html{scroll-padding-top:72px}

  .abertura{padding:calc(60px + env(safe-area-inset-top,0px) + 2rem) 0 3rem}
  .abertura-foto::after{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-bg) 84%,transparent) 0%,color-mix(in srgb,var(--hero-bg) 94%,transparent) 45%,var(--hero-bg) 100%)}
  .abertura h1{font-size:clamp(2.375rem,11.2vw,2.875rem);max-width:none;line-height:1.02}
  .abertura .lead{font-size:1.0625rem;margin-top:var(--s2)}
  .abertura .mantra{margin-top:var(--s2);font-size:.875rem}
  .abertura-acoes{margin-top:var(--s3);gap:10px}
  .abertura-acoes .btn{min-height:52px}
  .pilares{margin-top:var(--s4)}
  .pilares li{padding-right:var(--s1)}
  .pilares li+li{padding-left:var(--s1)}
  .pilares strong{font-size:1.0625rem}
  .pilares span{font-size:.75rem;letter-spacing:.03em}
  .hero-symbol.metal-machine{width:min(78vw,300px)}

  .secao{padding:4rem 0 3.5rem}
  main>section:not(.abertura)::after{left:16px}
  .cabeca{padding-top:var(--s3)}
  .cabeca h2,.sobre h2,.heranca h2,.entrega h2,.contato-grade h2{font-size:clamp(1.875rem,8.6vw,2.375rem);max-width:none}
  .cabeca p{font-size:1rem}
  .passo h3{font-size:1.5rem}
  .plano h4{font-size:2rem}
  .mapa-opcoes button{min-height:44px;font-size:.875rem}
  .isc-selo{min-height:56px}
  .temas{gap:6px}
  .foto::after{font-size:.75rem}
  .rodape nav{gap:0 var(--s2)}
}
@media(max-width:360px){
  .pilares span{letter-spacing:0}
  .marca-nome{font-size:1.0625rem}
  .marca img{width:28px;height:28px}
  .topo-acoes .btn-ouro{padding:0 12px}
}

/* Refino 19/10 (retorno do Jotta no celular): grade mais discreta e só onde ajuda a leitura;
   citação sem fonte mono; controles do cabeçalho com tamanho fixo mesmo com fonte ampliada. */
main>section::before{opacity:.55}
@media(max-width:820px){
  main>section:not(.abertura)::before{display:none}
  .abertura::before{opacity:.45}
}
.abertura .mantra{font-family:var(--sans);font-style:italic;letter-spacing:0;font-size:1.0625rem;line-height:1.5}
@media(max-width:600px){
  .topo-linha{height:64px}
  .marca img{width:30px;height:30px}
  .marca-nome{font-size:19px}
  .topo-acoes .btn-ouro{min-height:40px;height:40px;padding:0 12px;font-size:14px}
  .tema-botao,.menu-botao{width:40px!important;height:40px!important}
  .tema-botao svg,.menu-botao svg{width:18px;height:18px}
  .abertura h1{font-size:clamp(2.1rem,10vw,2.6rem)}
  .abertura .lead{font-size:1rem;line-height:1.6}
  .abertura-acoes .btn{font-size:15px;min-height:48px}
}

/* Ebook na home (20/10/2026): destaque logo depois da abertura, com a capa em perspectiva.
   Fora da numeração § das seções (não é etapa do texto da home). */
main>section.ebook-destaque{counter-increment:none}
main>section.ebook-destaque::after{content:none}
.ebook-destaque-grade{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--s5,40px);align-items:center}
.ebook-destaque h2{font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;margin:0 0 var(--s2,12px)}
.ebook-destaque-sub{font-size:1.125rem;line-height:1.55;max-width:38rem;margin:0 0 var(--s3,16px)}
.ebook-destaque-valor{font-family:var(--mono);font-size:.875rem;letter-spacing:.02em;color:var(--numero);margin:0}
.ebook-destaque-preco{margin:var(--s3,16px) 0 0;font-size:1.125rem;line-height:1.4}
.ebook-destaque-preco s{color:var(--numero);text-decoration-thickness:1px}
.ebook-destaque-preco strong{font-size:1.75rem;font-weight:700;color:var(--acento);letter-spacing:-.01em}
.ebook-destaque-capa{justify-self:center;display:block;width:min(100%,300px);perspective:1400px}
.ebook-destaque-capa img{display:block;width:100%;height:auto;border-radius:3px 8px 8px 3px;transform:rotateY(-14deg) rotateX(2deg);box-shadow:-16px 26px 50px rgba(8,21,16,.45)}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.ebook-destaque-capa img{transition:transform .4s ease}.ebook-destaque-capa:hover img{transform:rotateY(-6deg) rotateX(1deg)}}
@media(max-width:820px){
  .ebook-destaque-grade{grid-template-columns:1fr;gap:var(--s4,28px)}
  .ebook-destaque-capa{order:-1;width:min(42vw,160px)}
  .ebook-destaque-capa img{box-shadow:-10px 16px 32px rgba(8,21,16,.4)}
}
/* ---- onlume-b-refino.css ---- */
/* onLUME · Direção B, camada de refino (19/10/2026, retorno do Jotta: "o site ficou meio quadradão").
   Carregada por ÚLTIMO em todas as páginas públicas (home, /pgr, /protocolo-armadura,
   produtos, Inteligência, artigos da Revista, páginas legais e 404).
   Mantém a identidade B — IBM Plex Sans/Mono, verde, dourado e creme, rigor técnico — com
   acabamento mais macio: cantos por token, cartões sem contorno duro (superfície tingida e
   sombra em camadas; no escuro, relevo por luminância), sem cantoneiras nem quadriculado nas
   seções (só um vestígio na abertura), numeração de seção mais leve, mais respiro e hover suave.
   Sem cor literal fora dos blocos de tokens. */

/* ---------- Tokens ---------- */
:root{
  --raio-sm:6px;
  --raio:12px;
  --raio-lg:18px;
  --raio-btn:10px;
  --cartao-bg:#FDFBF6;
  --cartao-bg-papel:#F8F5EE;
  --cartao-borda:rgba(19,32,26,.07);
  --filete-suave:rgba(19,32,26,.09);
  --sombra-cartao:0 1px 2px rgba(19,32,26,.04),0 4px 12px -2px rgba(19,32,26,.05),0 18px 36px -20px rgba(19,32,26,.16);
  --sombra-cartao-alta:0 2px 4px rgba(19,32,26,.05),0 12px 24px -8px rgba(19,32,26,.10),0 30px 52px -24px rgba(19,32,26,.22);
  --sombra-foto:0 2px 6px rgba(19,32,26,.06),0 24px 44px -26px rgba(19,32,26,.38);
  --sombra-ouro:0 0 0 1px rgba(201,166,70,.55);
  --rv-raio:12px;
  --rv-sombra:0 1px 2px rgba(19,32,26,.04),0 4px 12px -2px rgba(19,32,26,.05),0 18px 36px -20px rgba(19,32,26,.16);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cartao-bg:#11261C;
    --cartao-bg-papel:#132A20;
    --cartao-borda:rgba(238,233,220,.05);
    --filete-suave:rgba(238,233,220,.08);
    --sombra-cartao:inset 0 1px 0 rgba(238,233,220,.05),0 1px 2px rgba(0,0,0,.3),0 16px 32px -20px rgba(0,0,0,.7);
    --sombra-cartao-alta:inset 0 1px 0 rgba(238,233,220,.07),0 2px 4px rgba(0,0,0,.35),0 26px 46px -22px rgba(0,0,0,.85);
    --sombra-foto:0 2px 6px rgba(0,0,0,.3),0 24px 44px -24px rgba(0,0,0,.8);
    --sombra-ouro:0 0 0 1px rgba(220,194,116,.5);
    --rv-sombra:inset 0 1px 0 rgba(238,233,220,.05),0 1px 2px rgba(0,0,0,.3),0 16px 32px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --cartao-bg:#11261C;
  --cartao-bg-papel:#132A20;
  --cartao-borda:rgba(238,233,220,.05);
  --filete-suave:rgba(238,233,220,.08);
  --sombra-cartao:inset 0 1px 0 rgba(238,233,220,.05),0 1px 2px rgba(0,0,0,.3),0 16px 32px -20px rgba(0,0,0,.7);
  --sombra-cartao-alta:inset 0 1px 0 rgba(238,233,220,.07),0 2px 4px rgba(0,0,0,.35),0 26px 46px -22px rgba(0,0,0,.85);
  --sombra-foto:0 2px 6px rgba(0,0,0,.3),0 24px 44px -24px rgba(0,0,0,.8);
  --sombra-ouro:0 0 0 1px rgba(220,194,116,.5);
  --rv-sombra:inset 0 1px 0 rgba(238,233,220,.05),0 1px 2px rgba(0,0,0,.3),0 16px 32px -20px rgba(0,0,0,.7);
}

/* ---------- Texto e títulos ---------- */
body{line-height:1.65}
h1,h2,h3,h4{font-weight:550;font-stretch:92%;letter-spacing:-.02em}
.abertura h1,.article-hero h1,.legal-hero h1,.editorial-hero h1,.boletim-pagina h1,.rv-titulo{font-weight:550;font-stretch:90%;letter-spacing:-.025em}
.corrido p,.cabeca p,.texto,.article-body,.legal-body,.rv{line-height:1.68}
/* Chapéu: sem caixa alta, régua curta mais discreta. */
.chapeu,.chapeu-b,.kicker,.article-category,.newsletter-eyebrow,.rv-chapeu{text-transform:none;letter-spacing:.02em;font-size:.8125rem}
.chapeu::before,.chapeu-b::before,.kicker::before,.article-category::before,.newsletter-eyebrow::before,.rv-chapeu::before{width:20px;opacity:.6}

/* ---------- Seções: sem quadriculado; vestígio só na abertura ---------- */
main>section::before{display:none}
main>section.abertura::before{display:block;opacity:.16}
.article-hero::before,.legal-hero::before,.editorial-hero::before,.erro::before{opacity:.16!important}
/* Numeração de seção mais leve: mono pequeno, cor secundária, sem barra de cota. */
main>section:not(.abertura)::after{padding:10px 0 0;background:none;color:var(--tinta-2);opacity:.8;letter-spacing:.06em}
.produto-page .article-body>h2{background:none;padding-top:var(--s4)}
.produto-page .article-body>h2::before{top:0;color:var(--tinta-2);opacity:.8}
.legal-body h2,.pagina-b .legal-body h2,.boletim-pagina .hero-copy,.erro-quadro{background:none}
.pagina-b .legal-body h2{padding-top:0}
.boletim-pagina .hero-copy{padding-top:0}
.erro-quadro{padding-top:0}
/* Cabeçalho de seção sem régua milimetrada; mais respiro. */
.cabeca,.secao-escura .cabeca{padding-top:0;border-top:0;background:none}
.secao{padding:clamp(5rem,9vw,8.5rem) 0}
.secao+.secao{border-top-color:var(--filete-suave)}

/* ---------- Botões: 10 px; marcadores e etiquetas em pílula ---------- */
.btn,.tema-botao,.menu-botao,.mapa-opcoes button,.produto-irmaos a,.commercial button,.boletim-pagina .commercial button,.rv-tema{border-radius:var(--raio-btn)}
.btn{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn-ouro,.btn-gold{box-shadow:none}
.acoes-flutuantes button{border-radius:50%}
.selos-texto li,.etiquetas-linha li,.temas li,.isc-modulos li,.editorial-topics a,.editorial-topics button,.insight-tools span,.pagina-b .insight-tools span,.legal-date,.trilha .etiqueta,.pagina-b .trilha .etiqueta,.produto-cards .protocolo,.rv-exemplo,.vitrine-barra span{border-radius:999px}
.selos-texto li,.etiquetas-linha li,.temas li,.isc-modulos li,.editorial-topics a,.pagina-b .insight-tools span{text-transform:none;letter-spacing:.02em}
.isc-selo{border-radius:var(--raio)}
.marca img{border-radius:50%}
.pular{border-radius:var(--raio-sm)}

/* ---------- Campos ---------- */
.campo input:not([type=checkbox]),.campo select,.campo textarea,.boletim-pagina .field input,.boletim-pagina .field select,.capture-field input,.capture-field select,.newsletter-field input,.newsletter-field select{border-radius:var(--raio-sm)}
.capture-form,.lead-magnet,.newsletter-dialog{border-radius:var(--raio-lg)}

/* ---------- Cartões: superfície tingida, sombra em camadas, sem cantoneiras ---------- */
:root body :is(.cartao,.plano,.avulso,.mapa,.form,.folha,.isc-painel,.em-acao,.compromisso,.prevencao-bloco,.heranca-mes,.provas li,.fundamentos-grade li,.boletim,.plano-detalhe,
  .aside-card,.legal-aside,.produto-cards>li,.duas-colunas>div,.eixo-article-cta,.boletim-pagina .card,.decomposicao>div,.contraste>div,.comparar article,.chamada){
  border:1px solid var(--cartao-borda)!important;border-radius:var(--raio-lg)!important;background:var(--cartao-bg)!important;box-shadow:var(--sombra-cartao)!important}
:root body .secao-papel :is(.cartao,.fundamentos-grade li,.prevencao-bloco,.heranca-mes,.boletim,.decomposicao>div,.contraste>div){background:var(--cartao-bg-papel)!important}
:root body .plano-gold{box-shadow:var(--sombra-ouro),var(--sombra-cartao)!important}
:root body :is(.cartao,.plano,.avulso,.prevencao-bloco,.provas li,.fundamentos-grade li,.aside-card,.produto-cards>li,.duas-colunas>div,.decomposicao>div,.contraste>div){padding:clamp(1.5rem,3vw,2rem)}
.eixo,.isc-detalhe,.contato-nota,.mapa-caso,.vitrine-tela,.limite{border-radius:var(--raio-lg)}
.eixo-entregas div,.eixo-credito,.cadencia li,.mapa-fluxo li,.responsabilidade,.heranca-mes li,.rv-checagem,.rv-regras,.pgr-chamada{border-radius:var(--raio)}
.eixo{border-color:transparent;box-shadow:var(--sombra-cartao)}
.mapa-trilho,.mapa-trilho i,.lead-progress,.lead-progress .track,.lead-progress .track i{border-radius:999px}

/* Hover: só onde o cartão é clicável ou destaca leitura; 180 ms. */
.artigo,.insight-card,.rv-proxima,.aside-card,.cartao,.plano,.avulso{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media (hover:hover) and (pointer:fine){
  :root body :is(.cartao,.plano,.avulso,.aside-card):hover{box-shadow:var(--sombra-cartao-alta)!important}
  :root body .plano-gold:hover{box-shadow:var(--sombra-ouro),var(--sombra-cartao-alta)!important}
  .artigo:hover,.pagina-b .insight-card:hover,.rv-proxima:hover{transform:translateY(-2px)}
  .artigo:hover .artigo-capa{box-shadow:var(--sombra-cartao-alta)}
  .pagina-b .insight-card:hover,.rv .rv-proxima:hover{box-shadow:var(--sombra-cartao-alta)}
}

/* ---------- Diagramas: nós redondos ---------- */
.passo::before{border-radius:50%}
.trilha li::before,.eixo-fluxo li::before{border-radius:50%}
.pagina-b .trilha>li::after,.pagina-b .trilha>li+li::after{border-radius:50%}
.rv-tempo li::before{border-radius:50%}
.rv-box--reuniao ul li::before{border-radius:4px}
.rv-assinatura>*+*::before{border-radius:50%}
.pagina-b .insight-meta i,.boletim-pagina .promise i,.produto-irmaos a[aria-current="page"]::before{border-radius:50%}

/* ---------- Fotos, capas, vitrine ---------- */
.foto{border:0;border-radius:var(--raio-lg);box-shadow:var(--sombra-foto)}
.foto::after{border-top-right-radius:var(--raio-sm)}
:root body .artigo-capa{border-radius:var(--raio)!important;border-bottom-width:0;box-shadow:var(--sombra-cartao);transition:box-shadow .18s ease}
.vitrine-tela{border-color:var(--cartao-borda);box-shadow:var(--sombra-foto)}

/* ---------- Páginas internas (onlume-b-paginas.css) ---------- */
.pagina-b .insight-card,.pagina-b .editorial-list .insight-card,.pagina-b .editorial-list .insight-card-featured{overflow:hidden;border-color:var(--cartao-borda);border-radius:var(--raio-lg);background:var(--cartao-bg);box-shadow:var(--sombra-cartao)}
.pagina-b .insight-card::after{content:none}
.pagina-b .insight-card::before,.pagina-b .insight-card:has(.insight-capa)::before{top:12px;left:12px;border-radius:999px;padding:3px 10px}
.pagina-b .insight-capa{border-bottom-color:var(--cartao-borda)}
.pagina-b .newsletter-panel{border-color:transparent;border-radius:var(--raio-lg);background:var(--escura-bg);box-shadow:var(--sombra-cartao)}
.pagina-b .newsletter-panel,.pagina-b .eixo-article-cta,.boletim-pagina .card{padding:clamp(1.5rem,4vw,2.5rem)}
.linha-limite,.pagina-b .article-hero .linha-limite{border-left:0;border-radius:var(--raio)}
.pagina-b .article-callout{border-left-width:3px;border-left-color:var(--ouro)}
.pagina-b .article-faq summary::after{font-family:var(--sans);font-weight:300}
.boletim-pagina .commercial{border-left:1px solid var(--cartao-borda);border-color:var(--cartao-borda);border-radius:var(--raio)}
.pagina-b .article-layout,.pagina-b .legal-main,.pagina-b .editorial-list{padding-bottom:clamp(5rem,9vw,7.5rem)}

/* ---------- Revista ---------- */
.rv-box{border-top-width:1px;border-color:var(--cartao-borda);border-radius:var(--rv-raio);background:var(--cartao-bg)}
.rv-box--reuniao{border-color:transparent;background:var(--rv-escuro-bg)}
.rv-figura__arte:not(.rv-figura__arte--sem-moldura),.rv-proxima,.rv-tabela,.rv-ficha{border-color:var(--cartao-borda);background-color:var(--cartao-bg)}
.rv-figura__arte:not(.rv-figura__arte--sem-moldura){box-shadow:var(--rv-sombra)}
.rv-capa__arte img{border-color:transparent;border-radius:var(--raio-lg)}
.rv-proxima img{border-color:transparent;border-radius:var(--raio)}
.rv-sumario a{border-radius:0 var(--raio-sm) var(--raio-sm) 0}

/* ---------- Celular: respiro lateral e cantos visíveis ---------- */
@media(max-width:600px){
  .secao{padding:4.5rem 0 4rem}
  :root body :is(.cartao,.plano,.avulso,.prevencao-bloco,.provas li,.fundamentos-grade li,.aside-card,.produto-cards>li,.duas-colunas>div,.decomposicao>div,.contraste>div,.form,.mapa,.folha,.boletim){padding:var(--s3) 20px}
  .pagina-b .newsletter-panel,.pagina-b .eixo-article-cta,.boletim-pagina .card{padding:var(--s3) 20px}
  :root body :is(.cartao,.plano,.avulso,.aside-card,.produto-cards>li,.form,.folha){border-radius:var(--raio)!important}
}

@media (prefers-reduced-motion:reduce){
  .btn,.artigo,.insight-card,.rv-proxima,.aside-card,.cartao,.plano,.avulso,.artigo-capa{transition:none}
}
.rv .rv-titulo{margin:16px 0 24px}
/* Acessibilidade e toque (mescla de 19/10): :hover só com mouse, também sem movimento. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.artigo:hover,.pagina-b .insight-card:hover,.rv-proxima:hover{transform:none}}

/* ---------- Revisão de 20/10 (respostas do Jotta) ---------- */
/* Abertura no celular: a foto grande de fundo só aparece em tela larga (no celular ela ficava
   quase toda coberta pelo degradê e atrasava a primeira tela). */
@media(max-width:820px){.abertura-foto{display:none}}
/* Item 1: as quatro etapas da engrenagem são as premissas únicas do método em toda a home. */
.pilares{grid-template-columns:repeat(4,minmax(0,1fr))}
.metodo-intro{max-width:62ch;margin:0 0 var(--s6);color:var(--tinta-2);font-size:1.0625rem;line-height:1.6}
.fundamentos-grade .passo-n::before{content:none}
.fundamentos-grade .passo-n{letter-spacing:.04em}
@media(max-width:600px){
  .pilares{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilares li{border-right:0;padding:var(--s1) var(--s1) var(--s1) 0}
  .pilares li+li{padding-left:0}
  .pilares li:nth-child(even){padding-left:var(--s2);border-left:1px solid var(--cromo-linha)}
  .pilares li:nth-child(n+3){border-top:1px solid var(--cromo-linha)}
}
/* Item 4: títulos com mais largura e quebra equilibrada; no computador, no máximo duas ou três linhas. */
h1,h2,h3,h4{text-wrap:balance}
@media(min-width:981px){
  .cabeca{grid-template-columns:7fr 5fr}
  .subcabeca{grid-template-columns:7fr 5fr}
  .cabeca h2,.sobre h2,.heranca h2,.entrega h2,.contato-grade h2{max-width:22ch}
  .subcabeca h3,.em-acao h3,.eixo h3,.avulso h3,.compromisso h3{max-width:28ch}
}
/* Item 8: formulário com erro explicado em texto junto de cada campo e grupo "WhatsApp / telefone ou e-mail *". */
.campo-grupo{margin:0;padding:0;border:0;min-width:0}
.campo-grupo>legend{padding:0;margin-bottom:var(--s1);font-size:.875rem;font-weight:600;color:var(--tinta)}
.campo-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
.campo-par>.campo>label{font-weight:500;color:var(--tinta-2)}
.campo-grupo .campo-dica{margin-top:var(--s1)}
.campo-erro{margin:4px 0 0;font-size:.875rem;font-weight:600;line-height:1.4;color:var(--erro-tx)}
.campo-erro::before{content:"! ";font-weight:700}
.campo-erro[hidden]{display:none}
@media(max-width:600px){.campo-par{grid-template-columns:1fr}}
/* Item 6: botões flutuantes de compartilhar e salvar continuam, sem cobrir texto nem formulário. */
.acoes-flutuantes.sobre-form,.acoes-flutuantes.com-campo{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none}
@media(max-width:820px){
  body .acoes-flutuantes{flex-direction:column;gap:8px}
  body .acoes-flutuantes button{width:44px;height:44px}
  body .acoes-flutuantes svg{width:19px;height:19px}
  .acoes-flutuantes.rolando{opacity:0;visibility:hidden;transform:translateX(16px);pointer-events:none}
  /* Espaço no fim do rodapé para os dois botões empilhados (44 + 8 + 44 px e a margem). */
  body .rodape{padding-bottom:calc(var(--s4,32px) + 112px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.acoes-flutuantes.rolando{transform:none}}
/* Item 10: página mais curta sem apagar conteúdo (planos com o que inclui recolhido, sem plano e detalhes
   da Área recolhidos, valor dos planos dito uma vez, guias com capa pequena ao lado no celular). */
.plano-inclui{margin:var(--s3) 0 var(--s4)}
.plano-inclui>.mais-resumo{min-height:48px;padding:var(--s1) 0;font-size:1rem}
.plano-inclui[open]>.mais-resumo::after{content:"−"}
.plano-inclui ul{margin:var(--s2) 0 0}
.planos-cabeca p strong{color:var(--tinta)}
.eixo-credito a{color:inherit;text-decoration:underline;text-underline-offset:4px}
details.avulsos-mais,details.plataforma-mais{margin-top:var(--s5)}
@media(max-width:600px){
  .artigos{gap:0}
  .artigos .artigo{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--linha)}
  .artigos .artigo-capa{grid-row:1/4;margin:0;align-self:start}
  .artigos .artigo h3{font-size:1.0625rem;margin-top:4px}
  .artigos .artigo .link{padding-top:4px}
}
/* Leitura (revisão de 20/10): escala de seis tamanhos na home — rótulo 13, texto 17 (16 no celular),
   destaque 20, subtítulo 28 (24 no celular), título 52 (34 no celular) e abertura 76 (39 no celular).
   Exceção mantida: rótulo e situação das medalhas do ISC (12 px, para caber na caixa). */
:root{--fs-rotulo:.8125rem;--fs-texto:1.0625rem;--fs-destaque:1.25rem;--fs-subtitulo:1.75rem;--fs-titulo:clamp(2.125rem,3.7vw,3.25rem);--fs-abertura:clamp(2.4375rem,5.3vw,4.77rem)}
@media(max-width:600px){:root{--fs-texto:1rem;--fs-subtitulo:1.5rem}}
:root body main :is(.chapeu,.heranca-mes li span,.vitrine figcaption strong,.cadencia small,.heranca-mes small,.mapa-fluxo small,.onde-lista small,.pilares span,.plano-metricas dt,.artigo small,.eixo-investimento small,.folha-cabeca span,.mapa-cabeca span,.metodo-leitura span,.vitrine-barra span,.vitrine figcaption,.aplicacao span,.avulso-valor small,.avulso-valor span,.compromisso-numero small,.compromisso-numero span,.form-chapeu,.isc-modulos-rotulo,.isc-painel-chapeu,.itens span,.mapa-proximo span,.mapa-rotulo,.plano-rotulo,.etiquetas-linha li,.isc-modulos li,.selos-texto li,.temas li,.eixo-fluxo span,.jornada span,.jornada b,.eixo-fluxo b,.acoes-nota,.abertura-nota,.form-nota,.limite-planos,.isc-aviso,.nota-pequena,.campo-dica,.passo-n,.mapa-opcoes button,.mapa-codigo span,.mapa-codigo b,.mapa-tags span){font-size:var(--fs-rotulo)}
:root body main :is(.cadencia p,.faq details p,.faq summary,.fundamentos-grade p,.onde-lista p,.plano-inclui li,.avulso p,.cartao p,.plano p,.eixo-investimento p,.mapa-caso p,.passo p,.folha-itens dd,.eixo-entregas dd,.eixo-entregas dt,.isc-camadas dd,.qualidades dd,.provas span,.isc-detalhe p,.isc-integridade,.isc-painel-nota,.contato-nota,.plano-metricas dd,.mapa-proximo strong,.metodo-leitura p,.campo>label,.campo-grupo>legend,.consentimento span,.btn,.link,.mais-resumo,.eixo-credito,.corrido p,.cabeca p,.subcabeca p,.intro,.e-nao li,.plataforma li,.isc .corpo,.entrega .corpo,.folha-pe,.boletim p,.heranca-mes p,.mapa-caso .mapa-proximo strong){font-size:var(--fs-texto)}
:root body main :is(.lead,.folha-itens dt,.pilares strong,.mapa-fluxo strong,.isc-camadas dt,.qualidades dt,.isc-detalhe strong,.fundamentos-grade h4,.onde-lista h4,.provas strong,.artigo h3,.metodo-leitura strong,.destaque,.mapa-pe,.heranca-mes li strong){font-size:var(--fs-destaque)}
:root body main :is(.cadencia h3,.compromisso h3,.heranca-mes h3,.plataforma h3,.avulso h3,.cartao h3,.isc-painel h3,.subcabeca h3,.passo h3,.faq-titulo,.folha-cabeca strong,.mapa-cabeca strong,.mapa-caso>strong,.entrega .sub,.avulso-valor strong,.e-nao h4,.eixo-investimento strong,.citacao,.plano h4,.eixo-texto h3,.diferenca h3){font-size:var(--fs-subtitulo)}
:root body main :is(.cabeca h2,.sobre h2,.heranca h2,.entrega h2,.contato-grade h2,.isc h2,.compromisso-numero strong){font-size:var(--fs-titulo)}
:root body main .abertura h1{font-size:var(--fs-abertura)}
:root body main .mapa-opcoes button{min-height:44px}
@media(max-width:600px){:root body main .artigos .artigo h3{font-size:var(--fs-texto);font-weight:600}}
/* Cabeçalho (revisão de 20/10): "Área do Cliente" e "Falar" sem quebrar a 1024 px; alvos de 44 px. No celular,
   "Minha Área" sempre visível no cabeçalho (44 px, sem abrir o menu e sem empurrar a marca); o tema passa para o menu. */
.topo-acoes .btn{white-space:nowrap}
@media(min-width:981px){.menu a{min-width:44px;justify-content:center}}
.topo-area .topo-area-curto,.menu .menu-tema{display:none}
@media(min-width:981px) and (max-width:1240px){
  .topo-acoes .btn-ouro .rotulo-longo{display:none}
  .topo-acoes .btn-ouro .rotulo-curto{display:inline}
  .menu{gap:var(--s2)}
}
@media(max-width:820px){
  :root body .topo-acoes .topo-area{display:inline-flex!important;width:auto!important;min-width:44px;min-height:44px;height:44px;padding:0 10px!important;gap:6px;flex:none}
  :root body .topo-area .topo-area-longo{display:none}
  :root body .topo-area .topo-area-curto{display:inline;margin:0;font-size:.875rem}
  :root body .topo-area svg{margin:0}
}
@media(max-width:600px){
  :root body .topo-acoes{gap:6px}
  :root body .topo-acoes .tema-botao{display:none!important}
  :root body .topo-acoes .btn-ouro,:root body .menu-botao{min-height:44px;height:44px}
  :root body .menu-botao{width:44px!important}
  :root body .topo-acoes .btn-ouro{padding:0 12px}
  :root body .marca{flex:0 0 auto}
  .topo.aberto .menu .menu-tema{display:flex;align-items:center;min-height:48px;padding:0 var(--s1);border:0;border-bottom:1px solid var(--cromo-divisoria);background:transparent;color:var(--cromo-tx-menu);font:inherit;font-size:1rem;text-align:left;cursor:pointer}
}
@media(max-width:374px){
  :root body .topo-area .topo-area-curto{font-size:.8125rem}
  :root body .topo-acoes .topo-area{padding:0 8px!important;gap:4px}
  :root body .topo-acoes .btn-ouro{padding:0 10px}
  :root body .marca-nome{font-size:1.0625rem}
}

/* Cabeçalho no celular (20/10, prints do Jotta com fonte do sistema ampliada): o nome onLUME fica sempre ao lado
   da engrenagem; quem cede espaço são as ações. Até 480 px "Minha Área" vira ícone de 44 px (o rótulo continua no
   aria-label) e, abaixo de 360 px, o "Falar" sai do cabeçalho (está no menu e na abertura). */
@media(max-width:480px){
  :root body .marca{flex:0 0 auto;gap:8px}
  :root body .marca img{width:30px;height:30px}
  :root body .marca .marca-nome{display:inline;font-size:1.125rem;white-space:nowrap}
  :root body .topo .topo-acoes{min-width:0;flex:1 1 auto;justify-content:flex-end}
  :root body .topo-area .topo-area-curto{display:none}
  :root body .topo-acoes .topo-area{width:44px!important;padding:0!important;justify-content:center}
  :root body .topo-acoes .btn-ouro{padding:0 12px}
  :root body .topo-acoes .menu-botao{flex:none}
}
@media(max-width:359px){
  :root body .topo-acoes .btn-ouro{display:none}
}

/* Título da abertura (20/10, pedido do Jotta: "mais forte"). Primeira frase em IBM Plex Sans mais pesada e
   condensada; a segunda em Newsreader itálico de título, em ouro, para dar o contraste editorial.
   Fonte: recorte da Newsreader itálica (OFL), tamanho óptico 72, peso 400, só latim; 19 KB. */
:root{--titulo-ouro-claro:#f6e3a1;--titulo-ouro-meio:#e2c167;--titulo-ouro-fundo:#c49a3e}
@font-face{font-family:"Newsreader Titulo";src:url("/assets/fonts/newsreader/newsreader-display-italic-400.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root body main .abertura h1{font-weight:640;font-stretch:84%;letter-spacing:-.038em;line-height:.98;text-wrap:balance}
:root body main .abertura h1 em{display:block;margin-top:.06em;font-family:"Newsreader Titulo",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-stretch:normal;font-size:1.08em;letter-spacing:-.022em;line-height:.98;color:var(--escura-destaque);background:linear-gradient(180deg,var(--titulo-ouro-claro) 0%,var(--titulo-ouro-meio) 48%,var(--titulo-ouro-fundo) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
@media(forced-colors:active){:root body main .abertura h1 em{-webkit-text-fill-color:currentColor;background:none}}

/* Títulos das seções (20/10, pedido do Jotta): a segunda parte do título usa a mesma Newsreader itálica da abertura. */
:root body main :is(.secao h2 em,.secao h3 em,.eixo h3 em){font-family:"Newsreader Titulo",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-stretch:normal;letter-spacing:-.015em;font-size:1.06em}
:root body main :is(.cabeca h2,.sobre h2,.heranca h2,.entrega h2,.contato-grade h2,.isc h2){font-weight:600;letter-spacing:-.03em}

/* "O que a onLUME é. O que não é." (20/10, pedido do Jotta): posicionamento em frases curtas, sem justificativa. */
:root body main .diferenca{margin-top:var(--s5,4rem)}
:root body main .posicao-titulo{font-size:var(--fs-titulo);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--s3,2rem)}
.posicao{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3,2rem)}
.posicao ul{list-style:none;margin:0;padding:0}
.posicao-rotulo{font-family:var(--mono);font-size:var(--fs-rotulo);letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--s1,.75rem);padding-bottom:var(--s1,.75rem);border-bottom:2px solid var(--acento)}
.posicao-nao .posicao-rotulo{border-bottom-color:var(--linha)}
.posicao li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--linha);font-family:var(--sans);font-size:1.3125rem;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--tinta)}
.posicao li::before{content:"";position:absolute;left:0;top:18px;width:20px;height:20px;border-radius:50%;background:var(--acento);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2L4.8 10.4l1.4-1.4 2.4 2.4 5.2-5.2 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2L4.8 10.4l1.4-1.4 2.4 2.4 5.2-5.2 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.posicao-nao li{color:var(--tinta-2);font-weight:400}
.posicao-nao li::before{background:var(--tinta-2);opacity:.7;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8zM6.5 5.1L10 8.6l3.5-3.5 1.4 1.4-3.5 3.5 3.5 3.5-1.4 1.4-3.5-3.5-3.5 3.5-1.4-1.4 3.5-3.5-3.5-3.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8zM6.5 5.1L10 8.6l3.5-3.5 1.4 1.4-3.5 3.5 3.5 3.5-1.4 1.4-3.5-3.5-3.5 3.5-1.4-1.4 3.5-3.5-3.5-3.5z'/%3E%3C/svg%3E")}
@media(max-width:700px){.posicao{grid-template-columns:1fr;gap:var(--s3,2rem)}.posicao li{font-size:1.125rem}}

/* Ícones dos cartões de Soluções (20/10): traço fino na cor de destaque, sem preenchimento. */
.cartao-icone{display:block;width:40px;height:40px;margin:0 0 var(--s2,1.25rem);fill:none;stroke:var(--acento);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cartao-icone circle[r="1.6"]{fill:var(--acento)}

/* ---------- Paleta grafite metálico (20/10, pedido do Jotta: "muito verde"). ----------
   O verde fica só na marca (o "on" e o botão de ligar da engrenagem); superfícies escuras passam a grafite com
   brilho metálico discreto; o ouro continua como destaque. Só tokens; as regras de uso estão logo abaixo. */
:root{
  --fundo:#F3F2EF;--superficie:#FAFAF8;--superficie-2:#E9E7E2;
  --tinta:#16181B;--tinta-2:#4A4F55;--linha:#D6D3CC;--linha-forte:#2A2E33;
  --acento:#2A2E33;--acento-sub:rgba(42,46,51,.4);--foco:#2A2E33;--cota:#2A2E33;
  --titulo-destaque:#7A5F17;
  --btn-solido-bg:#1E2125;--btn-solido-tx:#FFFFFF;--btn-solido-hover:#000000;
  --btn-ouro-tx:#16181B;
  --campo-tx:#16181B;
  --escura-bg:#17191C;--escura-tx:#F3F2EF;--escura-tx-2:#C3C6CA;
  --folha-bg:#FAFAF8;--folha-tx:#16181B;--folha-tx-2:#4A4F55;--folha-borda:#D6D3CC;--folha-linha:#D6D3CC;--folha-termo:#2A2E33;
  --capa-bg:#E9E7E2;--capa-borda:#D6D3CC;
  --hero-bg:#141619;--topo-bg:#141619;--rodape-bg:#0E0F11;
  --grade:rgba(42,46,51,.07);
  --cartao-bg:#FCFCFA;--cartao-bg-papel:#F7F6F3;
  --cartao-borda:rgba(22,24,27,.07);--filete-suave:rgba(22,24,27,.09);
  --sombra-cartao:0 1px 2px rgba(22,24,27,.04),0 4px 12px -2px rgba(22,24,27,.05),0 18px 36px -20px rgba(22,24,27,.18);
  --sombra-cartao-alta:0 2px 4px rgba(22,24,27,.05),0 12px 24px -8px rgba(22,24,27,.10),0 30px 52px -24px rgba(22,24,27,.24);
  --sombra-foto:0 2px 6px rgba(22,24,27,.06),0 24px 44px -26px rgba(22,24,27,.4);
  --metal-grafite:linear-gradient(160deg,#24272C 0%,#17191C 46%,#101114 100%);
  --metal-brilho:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 100%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#0F1012;--superficie:#16181B;--superficie-2:#1D2024;
    --tinta:#EDEBE6;--tinta-2:#B7BBC0;--linha:#2C3035;--linha-forte:#C9A646;
    --acento:#DCC274;--acento-sub:rgba(220,194,116,.45);--foco:#E2C877;--cota:#DCC274;
    --titulo-destaque:#DCC274;
    --btn-solido-bg:#EDEBE6;--btn-solido-tx:#16181B;--btn-solido-hover:#FFFFFF;
    --campo-bg:#0B0C0E;--campo-borda:#80868D;--campo-tx:#EDEBE6;--campo-placeholder:#979CA2;
    --escura-bg:#15171A;--escura-borda:#2C3035;
    --folha-bg:#0B0C0E;--folha-tx:#EDEBE6;--folha-tx-2:#B7BBC0;--folha-borda:#2C3035;--folha-linha:#2C3035;--folha-termo:#DCC274;
    --capa-bg:#16181B;--capa-borda:#2C3035;
    --hero-bg:#111214;--topo-bg:#111214;--rodape-bg:#0A0B0C;
    --cartao-bg:#17191D;--cartao-bg-papel:#1A1D21;
    --metal-grafite:linear-gradient(160deg,#202328 0%,#141619 46%,#0D0E10 100%);
    --vitrine-borda:#2C3035;
  }
}
:root[data-theme="dark"]{
  --fundo:#0F1012;--superficie:#16181B;--superficie-2:#1D2024;
  --tinta:#EDEBE6;--tinta-2:#B7BBC0;--linha:#2C3035;--linha-forte:#C9A646;
  --acento:#DCC274;--acento-sub:rgba(220,194,116,.45);--foco:#E2C877;--cota:#DCC274;
  --titulo-destaque:#DCC274;
  --btn-solido-bg:#EDEBE6;--btn-solido-tx:#16181B;--btn-solido-hover:#FFFFFF;
  --campo-bg:#0B0C0E;--campo-borda:#80868D;--campo-tx:#EDEBE6;--campo-placeholder:#979CA2;
  --escura-bg:#15171A;--escura-borda:#2C3035;
  --folha-bg:#0B0C0E;--folha-tx:#EDEBE6;--folha-tx-2:#B7BBC0;--folha-borda:#2C3035;--folha-linha:#2C3035;--folha-termo:#DCC274;
  --capa-bg:#16181B;--capa-borda:#2C3035;
  --hero-bg:#111214;--topo-bg:#111214;--rodape-bg:#0A0B0C;
  --cartao-bg:#17191D;--cartao-bg-papel:#1A1D21;
  --metal-grafite:linear-gradient(160deg,#202328 0%,#141619 46%,#0D0E10 100%);
  --vitrine-borda:#2C3035;
}
/* Superfícies escuras em grafite com brilho metálico: um filete de luz no topo e o degradê diagonal. */
:root body :is(.abertura,.secao-escura,.rodape){background-color:var(--escura-bg);background-image:var(--metal-grafite)}
:root body :is(.secao-escura,.rodape){position:relative}
:root body :is(.secao-escura,.rodape)::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--metal-brilho);pointer-events:none}
:root body .topo{background:var(--topo-bg)}
:root body main :is(.secao h2 em,.secao h3 em){color:var(--titulo-destaque)}
:root body main :is(.secao-escura h2 em,.secao-escura h3 em,.eixo h3 em){color:var(--escura-destaque)}
/* Mira atrás da engrenagem (20/10, print do Jotta): no celular as linhas de centro ficavam fora do eixo da engrenagem
   e cortavam o texto "Método em movimento". Sai em todas as larguras. */
:root body .abertura-simbolo::before{content:none;background:none}

/* ---------- Tema verde grafite noturno + grafite + dourado (20/10, pedido do Jotta). ----------
   Abertura e seções escuras em verde grafite (verde dessaturado, quase grafite); cabeçalho e rodapé em grafite
   neutro; botões e filetes do tema claro em verde grafite; ouro como destaque. */
:root{
  --verde-grafite:#1F3A2F;
  --acento:#1F3A2F;--acento-sub:rgba(31,58,47,.4);--foco:#1F3A2F;--cota:#1F3A2F;--linha-forte:#1F3A2F;
  --btn-solido-bg:#1F3A2F;--btn-solido-hover:#12231C;
  --escura-bg:#16241F;--hero-bg:#14211C;
  --metal-grafite:linear-gradient(160deg,#21352D 0%,#16241F 50%,#0F1915 100%);
  --metal-neutro:linear-gradient(160deg,#24272C 0%,#17191C 46%,#101114 100%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --acento:#DCC274;--acento-sub:rgba(220,194,116,.45);--foco:#E2C877;--cota:#DCC274;--linha-forte:#C9A646;
    --btn-solido-bg:#EDEBE6;--btn-solido-hover:#FFFFFF;
    --fundo:#0F1311;--superficie:#151B18;--superficie-2:#1B231F;--linha:#2A3530;
    --cartao-bg:#161D1A;--cartao-bg-papel:#19211D;
    --escura-bg:#13201B;--hero-bg:#111D18;
    --metal-grafite:linear-gradient(160deg,#1E3029 0%,#13201B 50%,#0C1512 100%);
    --metal-neutro:linear-gradient(160deg,#202328 0%,#141619 46%,#0D0E10 100%);
  }
}
:root[data-theme="dark"]{
  --acento:#DCC274;--acento-sub:rgba(220,194,116,.45);--foco:#E2C877;--cota:#DCC274;--linha-forte:#C9A646;
  --btn-solido-bg:#EDEBE6;--btn-solido-hover:#FFFFFF;
  --fundo:#0F1311;--superficie:#151B18;--superficie-2:#1B231F;--linha:#2A3530;
  --cartao-bg:#161D1A;--cartao-bg-papel:#19211D;
  --escura-bg:#13201B;--hero-bg:#111D18;
  --metal-grafite:linear-gradient(160deg,#1E3029 0%,#13201B 50%,#0C1512 100%);
  --metal-neutro:linear-gradient(160deg,#202328 0%,#141619 46%,#0D0E10 100%);
}
:root body .rodape{background-image:var(--metal-neutro)}