/* ============================================================
   ATLAS LAB · páginas de nicho e Sessão de implantação
   Repaginada 29/09/2026: tema claro, azul-petróleo + âmbar.
   Toda cor, fonte, espaço, raio e sombra vem de /atlas-tokens.css
   (carregado antes deste arquivo). Nada de hex solto aqui.
   Regras: âmbar só em botão; texto sobre âmbar sempre escuro;
   botão âmbar sobre fundo claro leva borda --cor-ambar-borda;
   link de texto sempre sublinhado; faixa escura só no CTA final
   (#fecho) e no rodapé.
   Versão escura anterior:
   _versoes-anteriores/nicho.css.bak-2026-09-29-repaginada
   ============================================================ */
:root{
  --wrap: var(--largura-pagina);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--cor-fundo); color:var(--cor-texto);
  font-family:var(--fonte-corpo); font-weight:var(--peso-corpo);
  font-size:var(--fs-base); line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--cor-petroleo-tint); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--esp-5); }
h1,h2,h3,h4{
  font-family:var(--fonte-titulo); font-weight:var(--peso-titulo);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); color:var(--cor-texto);
}
em{ font-style:normal; }
a{ color:inherit; text-decoration:none; }
img, svg{ max-width:100%; }
:focus-visible{ outline:none; box-shadow:var(--sombra-foco); border-radius:var(--raio-sm); }

/* link dentro de texto corrido: sempre sublinhado, em petróleo */
p a:not(.btn), li p a:not(.btn), .nicho-faq details p a{
  color:var(--cor-petroleo); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
p a:not(.btn):hover{ color:var(--cor-petroleo-hover); text-decoration-thickness:2px; }

/* ---------- reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.js .hero .reveal{ opacity:1; transform:none; transition:none; } /* topo aparece na hora: é o maior elemento da 1ª tela (LCP) */
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal.d1{ transition-delay:.06s; } .js .reveal.d2{ transition-delay:.12s; }
.js .reveal.d3{ transition-delay:.18s; } .js .reveal.d4{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:var(--cor-superficie);
  border-bottom:1px solid var(--cor-borda);
  box-shadow:var(--sombra-1);
}
header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--esp-4); height:60px; }
.brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.brand-mark{ width:24px; height:24px; color:var(--cor-texto); flex:none; }
.brand .name{ font-family:var(--fonte-titulo); font-weight:700; font-size:var(--fs-md); color:var(--cor-texto); }
.brand .name em{ color:var(--cor-petroleo); }
.nav-links{ display:flex; align-items:center; gap:var(--esp-5); font-size:var(--fs-sm); }
.nav-links a{ color:var(--cor-texto-2); transition:color .2s; }
.nav-links a:hover{ color:var(--cor-petroleo); text-decoration:underline; text-underline-offset:3px; }
.nav-links a.nav-cta{
  color:var(--cor-texto-sobre-ambar); background:var(--cor-ambar);
  border:1px solid var(--cor-ambar-borda);
  padding:8px 16px; border-radius:var(--raio-md); font-weight:600; font-size:var(--fs-sm);
  box-shadow:var(--sombra-1); transition:background .2s;
}
.nav-links a.nav-cta:hover{ background:var(--cor-ambar-hover); color:var(--cor-texto-sobre-ambar); text-decoration:none; }

/* menu mobile */
.nav-toggle{
  display:none; background:none; border:1px solid var(--cor-borda-forte); border-radius:var(--raio-sm);
  width:44px; height:40px; cursor:pointer; position:relative; flex:none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; height:2px;
  background:var(--cor-texto); border-radius:2px; transition:transform .25s, opacity .2s;
}
.nav-toggle span{ left:11px; right:11px; top:50%; margin-top:-1px; }
.nav-toggle span::before, .nav-toggle span::after{ left:0; right:0; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:800px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:60px;
    background:var(--cor-superficie); border-bottom:1px solid var(--cor-borda); box-shadow:var(--sombra-2);
    flex-direction:column; align-items:stretch; gap:0; padding:var(--esp-2) 0 var(--esp-4);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px var(--esp-5); font-size:var(--fs-base); border-bottom:1px solid var(--cor-borda); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links a.nav-cta{ margin:var(--esp-3) var(--esp-5) 0; text-align:center; padding:12px 16px; }
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:var(--esp-3) var(--esp-5);
  background:var(--cor-ambar); color:var(--cor-texto-sobre-ambar);
  font-family:var(--fonte-corpo); font-weight:600; font-size:var(--fs-base); line-height:1.2;
  border:1px solid var(--cor-ambar-borda); border-radius:var(--raio-md);
  box-shadow:var(--sombra-1); cursor:pointer; text-decoration:none;
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{ background:var(--cor-ambar-hover); color:var(--cor-texto-sobre-ambar); }
.btn .arr{ display:inline-block; font-size:0; line-height:0; vertical-align:middle; width:16px; height:2px; background:currentColor; position:relative; transition:transform .2s; }
.btn .arr::after{ content:""; position:absolute; right:-1px; top:-3px; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.btn:hover .arr{ transform:translateX(3px); }
.btn.ghost{
  background:transparent; color:var(--cor-petroleo); border-color:var(--cor-petroleo); box-shadow:none;
}
.btn.ghost:hover{ background:var(--cor-petroleo-tint); color:var(--cor-petroleo-hover); }

/* ---------- estrutura de seção ---------- */
section{ padding:var(--esp-7) 0; border-top:1px solid var(--cor-borda); }
section.no-line{ border-top:none; }
/* faixas alternadas em creme: separam sem cor forte */
body > section:nth-of-type(odd):not(.hero):not(#fecho){ background:var(--cor-superficie-2); }
.eyebrow{
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cor-texto-sutil);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--cor-petroleo); flex:none; }
.sec-head{ margin-bottom:var(--esp-6); }
.sec-head h2{ font-size:var(--fs-xl); margin-top:var(--esp-3); max-width:28ch; }
.sec-head h2 .em{ color:var(--cor-petroleo); }
.sec-head .lead{ margin-top:var(--esp-3); max-width:62ch; color:var(--cor-texto-2); font-size:var(--fs-md); }

/* ---------- HERO ---------- */
.hero{ padding:var(--esp-7) 0 var(--esp-7); border-top:none; background:var(--cor-fundo); }
.hero-copy{ max-width:760px; }
.hero h1{ font-size:var(--fs-2xl); margin-top:var(--esp-4); }
.hero h1 .line2{ display:block; color:var(--cor-petroleo); }
.hero .intro{ margin-top:var(--esp-4); max-width:60ch; color:var(--cor-texto-2); font-size:var(--fs-md); }
.hero .intro strong{ color:var(--cor-texto); font-weight:600; }
.hero-ctas{ display:flex; gap:var(--esp-3); margin-top:var(--esp-5); flex-wrap:wrap; }
.hero-meta{
  display:flex; gap:var(--esp-6); margin-top:var(--esp-6); padding-top:var(--esp-4);
  border-top:1px solid var(--cor-borda); flex-wrap:wrap;
}
.hero-meta small{ display:block; font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cor-texto-sutil); margin-bottom:4px; }
.hero-meta b{ font-weight:600; font-size:var(--fs-base); color:var(--cor-texto); }

/* ---------- cards (áreas, resolve, passos) ---------- */
.areas-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--esp-4); }
.area{
  background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-lg);
  padding:var(--esp-5); box-shadow:var(--sombra-1); transition:border-color .2s, box-shadow .2s;
}
.area:hover{ border-color:var(--cor-borda-forte); box-shadow:var(--sombra-2); }
.area .num{
  display:inline-block; font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em;
  color:var(--cor-petroleo); background:var(--cor-petroleo-tint);
  padding:2px var(--esp-3); border-radius:var(--raio-pilula);
}
.area h3{ font-size:var(--fs-lg); margin:var(--esp-3) 0 var(--esp-2); }
.area p{ color:var(--cor-texto-2); font-size:var(--fs-base); }

/* grade de 3 passos: sem o buraco que sobra numa grade de 2 colunas */
.passos-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* ---------- citação ---------- */
.nicho-quote{
  border-left:3px solid var(--cor-petroleo); padding:var(--esp-2) 0 var(--esp-2) var(--esp-5);
  margin:var(--esp-6) 0 0; max-width:60ch;
  font-family:var(--fonte-titulo); font-weight:500; font-size:var(--fs-lg); line-height:1.45; color:var(--cor-texto);
}

/* ---------- FAQ ---------- */
.nicho-faq details{ border-bottom:1px solid var(--cor-borda); padding:var(--esp-4) 0; max-width:860px; }
.nicho-faq details:first-of-type{ border-top:1px solid var(--cor-borda); }
.nicho-faq summary{
  cursor:pointer; font-family:var(--fonte-titulo); font-weight:600; font-size:var(--fs-md); list-style:none;
  display:flex; justify-content:space-between; gap:var(--esp-4); align-items:flex-start; color:var(--cor-texto);
}
.nicho-faq summary:hover{ color:var(--cor-petroleo); }
.nicho-faq summary::-webkit-details-marker{ display:none; }
.nicho-faq summary::after{ content:"+"; color:var(--cor-petroleo); font-size:var(--fs-lg); line-height:1; flex:none; }
.nicho-faq details[open] summary::after{ content:"\2212"; }
.nicho-faq details p{ margin:var(--esp-3) 0 0; color:var(--cor-texto-2); font-size:var(--fs-base); max-width:70ch; }

/* ---------- CTA final: faixa escura petróleo ---------- */
#fecho{ background:var(--cor-faixa); color:var(--cor-texto-faixa); border-top:none; }
#fecho .eyebrow{ color:var(--cor-texto-faixa-2); }
#fecho .eyebrow::before{ background:var(--cor-link-faixa); }
#fecho h2, #fecho .sec-head h2{ color:var(--cor-texto-faixa); }
#fecho .sec-head h2 .em{ color:var(--cor-link-faixa); }
#fecho .sec-head .lead, #fecho p{ color:var(--cor-texto-faixa-2); }
#fecho p a:not(.btn){ color:var(--cor-link-faixa); }
#fecho .btn{ border-color:var(--cor-ambar); }
#fecho .btn.ghost{ color:var(--cor-texto-faixa); border-color:var(--cor-link-faixa); background:transparent; }
#fecho .btn.ghost:hover{ background:var(--cor-faixa-2); color:var(--cor-texto-faixa); }

/* ---------- rodapé: faixa escura ---------- */
footer{ background:var(--cor-faixa); color:var(--cor-texto-faixa-2); border-top:1px solid var(--cor-borda-faixa); padding:var(--esp-7) 0 var(--esp-5); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--esp-6); }
.foot-brand-row{ display:flex; align-items:center; gap:10px; }
.foot-mark{ width:22px; height:22px; color:var(--cor-texto-faixa); flex:none; }
.foot-name{ font-family:var(--fonte-titulo); font-weight:700; font-size:var(--fs-md); color:var(--cor-texto-faixa); }
.foot-name em{ color:var(--cor-link-faixa); }
.foot-about{ margin-top:var(--esp-3); color:var(--cor-texto-faixa-2); font-size:var(--fs-sm); max-width:34ch; }
footer h5, footer .foot-h{
  font-family:var(--fonte-corpo); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--cor-texto-faixa-2); font-weight:600; margin-bottom:var(--esp-3);
}
footer ul{ list-style:none; }
footer ul li{ margin-bottom:var(--esp-2); }
footer ul a{
  color:var(--cor-link-faixa); font-size:var(--fs-sm);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
footer ul a:hover{ color:var(--cor-texto-faixa); text-decoration-thickness:2px; }
.foot-tag{ font-size:var(--fs-xs); }
.foot-bot{
  margin-top:var(--esp-6); padding-top:var(--esp-4); border-top:1px solid var(--cor-borda-faixa);
  display:flex; justify-content:space-between; gap:var(--esp-4); flex-wrap:wrap;
  color:var(--cor-texto-faixa-2); font-size:var(--fs-sm);
}

/* ---------- barra de ação fixa: só no celular (29/09, melhorias) ----------
   Sem JS o atributo hidden mantém a barra fora. O script mostra depois que o
   topo sai da tela e esconde quando o fecho ou o rodapé entram. */
.barra-acao{ display:none; }
.barra-acao[hidden]{ display:none !important; }
@media (max-width:640px){
  .barra-acao{
    display:flex; align-items:center; gap:var(--esp-3);
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:var(--esp-3) var(--gutter) calc(var(--esp-3) + env(safe-area-inset-bottom));
    background:var(--cor-faixa); border-top:1px solid var(--cor-borda-forte);
    box-shadow:0 -4px 12px rgba(0,0,0,.18);
    transform:translateY(110%); visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
  }
  .barra-acao.on{ transform:none; visibility:visible; transition:transform .25s ease; }
  .barra-acao .btn{ flex:1 1 auto; min-width:0; justify-content:center; text-align:center; padding:var(--esp-3) var(--esp-4); font-size:var(--fs-sm); }
  .barra-acao .barra-wpp{
    flex:none; min-height:44px; display:inline-flex; align-items:center; padding:0 var(--esp-2);
    color:var(--cor-petroleo); font-weight:600; font-size:var(--fs-sm);
    text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  }
  body.barra-visivel{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){
  .barra-acao, .barra-acao.on{ transition:none; }
}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .passos-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .wrap{ padding:0 var(--gutter); }
  section{ padding:var(--esp-6) 0; }
  .hero{ padding:var(--esp-6) 0; }
  .sec-head{ margin-bottom:var(--esp-5); }
  .areas-grid{ grid-template-columns:1fr; gap:var(--esp-3); }
  .area{ padding:var(--esp-4); }
  .hero-meta{ gap:var(--esp-4); }
  .hero-ctas .btn{ width:100%; }
  .nicho-quote{ padding-left:var(--esp-4); font-size:var(--fs-md); }
  .foot-top{ grid-template-columns:1fr; gap:var(--esp-5); }
  footer{ padding:var(--esp-6) 0 var(--esp-5); }
}

/* ============================================================
   LINGUAGEM PLANTA nas 4 páginas de nicho · 30/09/2026
   [WILLIANS 30/09 07h20] escopo "Planta nas 8 páginas + Sonnet 5".
   Vale só com <body class="planta nicho"> (a sessao.html também usa
   este arquivo e não é tocada aqui). Carrega antes de atlas-moderno.css
   e de atlas-planta.css, por isso os seletores são mais específicos.
   As páginas de nicho não têm <main>: as seções são filhas do body.
   Ordem dos tons: 01 topo escuro com piso · 02 problema escuro com a
   grade do piso continuando · 03 resolve claro · (03A calendário
   claro, só contabilidade) · 04 como petróleo com grade milimetrada ·
   05 FAQ claro · 06 fecho escuro com o piso voltando · rodapé com carimbo.
   ============================================================ */
body.planta.nicho{ counter-reset:prancha; }
.planta.nicho > section{
  position:relative; isolation:isolate; border-top:none;
  counter-increment:prancha;
}
body.planta.nicho > section#calendario{ counter-increment:none; }

/* topo: fundo termina no mesmo tom da 2ª seção e o piso encosta na borda de baixo */
.planta.nicho > section.hero.escuro{
  background:#070b0d !important; /* [WILLIANS 07/10] começa direto no preto; o piso 3D fica no ::before */
}
.planta.nicho > section.hero.escuro::before{ bottom:0; }

/* 01 · problema: continua o topo, grade com a mesma geometria do piso (64 px, -30%) */
body.planta.nicho > section#dor.escuro{ background:#070b0d !important; overflow:hidden; }
body.planta.nicho > section#dor.escuro::before{
  inset:0 -30% 0 -30%;
  background-image:
    linear-gradient(90deg, rgba(95,211,222,.24) 1px, transparent 1px),
    linear-gradient(rgba(95,211,222,.24) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:0 0;
  -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.45) 260px, rgba(0,0,0,.22) 100%);
  mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.45) 260px, rgba(0,0,0,.22) 100%);
}

/* 02 · resolve: claro (era verde-água; [WILLIANS 07/10] só 3 fundos de seção) */
body.planta.nicho > section#resolve{
  background:#f6f8f8;
  --cor-fundo:#f6f8f8; --cor-superficie:#ffffff;
}
/* 02A · calendário (contabilidade): claro */
body.planta.nicho > section#calendario{ background:#f6f8f8; --cor-fundo:#f6f8f8; --cor-superficie:#ffffff; }

/* 03 · como: [WILLIANS 07/10 17h59] sai o petróleo, entra o preto do topo com a grade ciano de 64 px */
body.planta.nicho > section#como.escuro{
  background:#070b0d !important;
  --cor-fundo:#070b0d;
  overflow:hidden;
}
body.planta.nicho > section#como.escuro::before{
  inset:0 -30% 0 -30%;
  background-image:
    linear-gradient(90deg, rgba(95,211,222,.24) 1px, transparent 1px),
    linear-gradient(rgba(95,211,222,.24) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:0 0;
  -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.45) 260px, rgba(0,0,0,.22) 100%);
  mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.45) 260px, rgba(0,0,0,.22) 100%);
}
.planta.nicho #como .area{ --cant:#6fd6df; }
/* destaque em degradê sobre o petróleo: paradas mais claras, cada uma ≥ 4,9:1 contra #0e5a66
   (o degradê padrão cai a 4,28:1 no âmbar, abaixo de 4,5 no título de 22 px do celular) */
body.planta.nicho > section#como h2 .em{ background:linear-gradient(92deg, #7fe0e9 0%, #a8ead7 45%, #f6c47a 100%); }

/* 04 · FAQ: claro */
body.planta.nicho > section#faq{ background:#f6f8f8; --cor-fundo:#f6f8f8; --cor-superficie:#ffffff; }

/* 05 · fecho: quase-preto com o piso 3D voltando embaixo */
body.planta.nicho > section#fecho{
  background:#070b0d; overflow:hidden;
  padding-bottom:calc(var(--esp-7) + 88px);
  --cor-faixa:#070b0d; --cor-faixa-2:#0f1619; --cor-borda-faixa:#2a3a3f;
}
body.planta.nicho > section#fecho::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-30%; right:-30%; bottom:-6%; height:60%;
  background-image:
    linear-gradient(rgba(95,211,222,.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,211,222,.36) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(700px) rotateX(64deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  animation:atlas-piso 14s linear infinite;
}
body.planta.nicho > section#fecho .wrap{ position:relative; z-index:1; }
/* traço do rótulo no fecho: a regra de seção clara do atlas-moderno pintava de preto sobre preto */
body.planta.nicho > section#fecho .eyebrow::before{ background:var(--cor-link-faixa) !important; }

/* rótulo FIG. antes do número que já está no texto (o texto da página não muda) */
.planta.nicho > section .eyebrow::before{ order:-2; }
.planta.nicho > section .sec-head .eyebrow::after{ content:"FIG."; order:-1; margin-right:-3px; }
.planta.nicho > section .eyebrow::after{ flex:none; white-space:nowrap; }
.planta.nicho > section.hero .eyebrow::after{ content:"FIG. 01 ·"; order:-1; margin-right:-3px; }
body.planta.nicho > section#calendario .sec-head .eyebrow::after{ content:"FIG. 03A ·"; }

/* numeração de prancha na margem (desktop largo), igual à home */
.planta.nicho > section::after,
.planta.nicho > section.hero.escuro::after{
  content:counter(prancha, decimal-leading-zero) "/06";
  display:none;
  position:absolute; z-index:2; pointer-events:none;
  top:var(--esp-7);
  left:max(12px, calc(50% - (var(--largura-pagina) / 2) - 104px));
  font-family:var(--planta-mono); font-size:12px; font-weight:500; letter-spacing:.08em;
  color:var(--cor-texto-sutil);
  padding-top:8px; border-top:1px solid currentColor;
  animation:none;
}
body.planta.nicho > section#calendario::after{ content:"03A/06"; }
body.planta.nicho > section#fecho::after{ color:#b8ccd0; }
@media (min-width:1320px){
  .planta.nicho > section::after,
  .planta.nicho > section.hero.escuro::after{ display:block; }
}

/* selo de número dos cards: quadrado de prancha */
.planta.nicho .area .num{ border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  body.planta.nicho > section#fecho::before{ animation:none !important; }
}