/* 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)}
}