/* =============================================================================
   comercial.css — a ÚNICA folha de estilo de `.claude/comercial/`, a pasta AUTOCONTIDA
   do que se publica: a porta e as páginas de instância (e, por cópia, a landing Django de
   cada instância). A vitrine que morava aqui foi para `.claude/dashboard/apresentacao/`
   no plano `comercialdashboard` (2026-09-25), com uma folha de conteúdo extraída desta
   (`apresentacao.css`). O que as duas têm IGUAL mora em `vitrine.css`, nesta pasta, e entra
   aqui por `@import` logo abaixo da ordem das camadas (plano `comercialsimples`, F6c): regra que
   vale para as duas se escreve uma vez, lá; a que é só desta fica aqui. O `vitrine.css` vai junto
   para o espelho da landing Django (`_paginas_landing._espelhar_comum`).

   AUDIÊNCIA: o cliente, e só ele. Nasceu na F1 do plano `comercial`, por cópia da folha do
   dashboard; a F5 podou daqui a camada `quadro` — as superfícies de acompanhamento interno
   ficaram na fonte, com `dashboard.css`. Duas pastas, duas audiências, duas folhas, e nenhum
   seletor de uma serve à outra. A linhagem é a `flexor.css` (F0 do plano
   `flexor-apresentacao`), que já servia só à apresentação comercial: o corte da F5 devolve
   a esta folha o escopo com que ela nasceu.

   POR QUE ARQUIVO EXTERNO, e não CSS inline como os atlas faziam: o molde é consumido pelas
   40 páginas (8 na raiz + 32 em `modulos/`). Inline significaria 40 cópias divergindo à
   primeira correção. `file://` carrega stylesheet por caminho relativo sem restrição
   (não é fetch/XHR), então o consumo por UNC do Windows continua funcionando.

   AS QUATRO CAMADAS (`@layer`, ordem de cascata declarada abaixo):
     tokens   paleta e reset. Fonte única das variáveis — inclusive os APELIDOS que o tema
              quadro usava (`--ink`, `--mut`, `--acc`, `--ok`…), agora apontando para a
              paleta espacial Flexor. Os apelidos ficaram: são a fonte única desta folha,
              e é por eles que a identidade continua a mesma dos dois lados do corte.
     vitrine   nav sticky com 2º nível em CSS puro (plano `navdashboard`, F2 — hover +
               focus-within, zero JS), hero, cards, chips, tabelas, gráficos, CTA, rodapé.
     atlas     o que é exclusivo dos atlas escritos à mão (starfield, gradientes de planeta,
               grade de cursos). Preenchida na F4 — declarada aqui para fixar a ordem.
     landing   a home do site (`index.html`, landing page desde 2026-09-10). Escopada por
               `body.landing`, e só com o que a vitrine de páginas não tem: hero em duas
               colunas, faixa de prova, card de módulo em linha, faixa de métodos e o fecho.
               Card, grid, chip, botão, `.reflex`, `.lgpd` e a fusão vêm da camada `vitrine`.
     instancia a LANDING DE SOLUÇÃO de cada instância do tema Educação (2026-09-29):
               `instancias/educacaobasica|educacaosuperior|escolalivre.html`. Escopada por
               `body.lp-inst`, com o acento da persona em `.f-basica|.f-superior|.f-livre`
               (o mesmo trio do `landing.local.css` de cada uma). Hero de conversão, faixa de
               prova, seletor do tema, linha do tempo da DSR, pilares, dobras `<details>` do
               aprofundamento e o fecho de contato — zero JS (a landing derivada tem CSP).

   Camada só decide EMPATE de especificidade: regra sem camada vence qualquer regra em
   camada.

   Consumo:
     .claude/comercial/<pagina>.html             -> <link href="comercial.css">
     .claude/comercial/instancias/<pagina>.html  -> <link href="../comercial.css">

   Imagens: a pasta é AUTOCONTIDA — nenhuma referência sai dela (nem o favicon, que mora
   em `img/favicon.png` desde a F1). Todo caminho de imagem resolve dentro de `img/`:
     de .claude/comercial/          -> img/<arquivo>
     de .claude/comercial/instancias/  -> ../img/<arquivo>
   ============================================================================= */

@layer tokens, vitrine, atlas, landing, instancia;
@import url("vitrine.css");

/* ============================================================ CAMADA: tokens */
@layer tokens {

  :root{
    --bg:#05070f; --panel:rgba(13,19,38,.82); --panel2:rgba(9,13,28,.9);
    --line:#1f2b4a; --line2:#2b3a63;
    --txt:#dbe4f5; --muted:#8fa0bf; --dim:#5c6c8c;
    --gold:#f5c542; --violet:#a78bfa; --cyan:#67e8f9; --green:#6ee7b7; --rose:#fda4af;
    /* Os DERIVADOS de cada acento — a borda, o fundo lavado, o texto sobre o ouro e o gradiente
       do botão dourado. Existem como token porque a landing de instância troca de paleta
       redeclarando `:root` num `landing.local.css`: enquanto estes valores ficavam cozidos nas
       regras, a troca pegava na marca e no chip e deixava para trás chips, tags e `.btn.gold`.
       Valores idênticos aos literais que substituíram — tokenizar não mudou um pixel. */
    --on-gold:#2a1f00;
    --gold-grad:linear-gradient(100deg,#ffe9a8,#f5c542 60%,#d9a63a);
    --gold-line:rgba(245,197,66,.55);   --gold-soft:rgba(245,197,66,.06);
    --green-line:rgba(110,231,183,.5);  --green-soft:rgba(110,231,183,.06);
    --violet-line:rgba(167,139,250,.4); --violet-soft:rgba(167,139,250,.07);
    --cyan-line:rgba(103,232,249,.4);
    --rose-line:rgba(253,164,175,.5);   --rose-soft:rgba(253,164,175,.06);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; color:var(--txt); background:var(--bg);
    background-image:
      radial-gradient(1100px 700px at 85% -8%, rgba(76,54,140,.38), transparent 62%),
      radial-gradient(900px 650px at -12% 28%, rgba(16,72,120,.32), transparent 58%),
      radial-gradient(1000px 800px at 55% 115%, rgba(120,48,90,.20), transparent 60%);
    background-attachment:fixed;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Ubuntu,sans-serif;
    line-height:1.55;
  }
  main,footer{max-width:1180px; margin:0 auto; padding:0 28px}
  a{color:var(--cyan); text-decoration:none}
  a:hover{text-decoration:underline}
  img{max-width:100%; height:auto}
  /* Apelidos do tema "quadro" — o que era `--bg:#0f1320` nos 5 geradores agora resolve na
     paleta espacial acima. Mantidos com os NOMES ANTIGOS de propósito: as regras de quadro
     migram sem serem reescritas, e a diferença fica só aqui. */
  :root{
    --panel-q:#141a2c;              /* superfície de painel/aba, opaca (o --panel da vitrine é translúcido) */
    --panel-q2:#101a30;             /* cabeçalho de grupo, linha de topo de tabela */
    --panel-q3:#0c1020;             /* poço: code inline, trilho da barra de progresso */
    --ink:var(--txt);               /* texto principal */
    --mut:var(--muted);             /* texto secundário */
    --acc:var(--cyan);              /* acento de interação (foi #36d1c4) */
    --ok:var(--green);              /* concluído */
    --open:var(--gold);             /* em aberto / em andamento (foi #f39c12) */
    --wip:var(--gold);              /* parcial na matriz */
    --pend:var(--rose);             /* pendente na matriz (foi #e74c3c) */
    --na:var(--dim);                /* não se aplica */
    --alerta:var(--rose);           /* achado grave (foi #e74c3c no performance.py) */
  }
}

/* =========================================================== CAMADA: vitrine */
@layer vitrine {

  /* --- navegação sticky ----------------------------------------------------- */
  nav{
    position:sticky; top:0; z-index:50; display:flex; gap:4px; align-items:center; flex-wrap:wrap;
    padding:10px 28px; background:rgba(5,7,15,.86); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav .brand{display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.18em;
    font-size:13px; color:var(--gold); margin-right:14px}
  nav .brand img{width:26px; height:26px; border-radius:7px}
  nav a{color:var(--muted); font-size:12.5px; padding:5px 10px; border-radius:8px; letter-spacing:.04em}
  nav a:hover{color:var(--txt); background:rgba(255,255,255,.06); text-decoration:none}
  nav .sp{flex:1}

  /* --- menu canônico: o 2º nível em CSS puro (F2 do plano `navdashboard`) ---------------
     ZERO JavaScript, e não por gosto: estas páginas abrem por `file://`. Daí o par
     `:hover` (mouse) + `:focus-within` (teclado) — e daí o gatilho ser um <button>, que
     recebe foco por Tab; um <span> não recebe, e menu que só abre no mouse é menu que
     metade das pessoas não tem.
     O ::after do .mitem é uma PONTE invisível de 12px entre o gatilho e o painel: sem ela,
     o cursor atravessa o vão do `top:calc(100% + 12px)`, perde o :hover e o menu fecha na
     cara de quem estava indo até ele. */
  nav .menu{display:flex; gap:2px; align-items:center; flex-wrap:wrap}
  nav .mitem{position:relative}
  nav .mitem::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px}
  nav .mtop{
    font:inherit; font-size:12.5px; letter-spacing:.04em; color:var(--muted);
    padding:5px 10px; border-radius:8px; border:0; background:none; cursor:pointer;
  }
  nav .mtop::after{content:"▾"; margin-left:6px; font-size:9px; opacity:.65}
  nav .mitem:hover .mtop, nav .mitem:focus-within .mtop{color:var(--txt);
    background:rgba(255,255,255,.06)}
  nav .mitem.atual .mtop{color:var(--gold)}
  nav .msub{
    position:absolute; top:calc(100% + 12px); left:0; z-index:60; min-width:212px;
    display:none; flex-direction:column; gap:1px; padding:7px;
    background:rgba(9,12,24,.98); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 18px 42px rgba(0,0,0,.55);
  }
  nav .mitem:hover .msub, nav .mitem:focus-within .msub{display:flex}
  nav .msub a{display:block; white-space:nowrap}
  nav .msub a[aria-current="page"]{color:var(--gold); background:rgba(245,197,66,.08)}
  /* A vitrine subiu para o 1º nível (`menu_plano`): o item corrente ali acende igual ao do
     2º nível — antes só o `.msub a` tinha a regra, e o `Índice` corrente ficava apagado. */
  nav .menu > a[aria-current="page"]{color:var(--gold); background:rgba(245,197,66,.08)}
  /* A faixa secundária são as âncoras DAQUELA página: `flex-basis:100%` a joga para a
     própria linha, senão 10 âncoras de curso empurram o menu para fora da barra. */
  nav .ancoras{flex-basis:100%; display:flex; gap:2px; align-items:center; flex-wrap:wrap;
    margin-top:8px; padding-top:7px; border-top:1px solid var(--line)}
  nav .ancoras a{font-size:11.5px; padding:4px 9px; color:var(--dim)}
  /* ...EXCETO quando o que vem abaixo é TABELA. Os 1040px acima são a folga deliberada contra
     uma grade de CARDS: card tem borda arredondada e fundo, e a folga de ~84px lê como respiro.
     Tabela não — ela é uma régua de bordas retas que vai até 1124px, e o lead parando antes lê
     como texto RECORTADO, não como respiro (usuário, 2026-09-08). Por isso o recorte é por
     vizinhança e não global: 45 dos 233 leads mudam; os outros 188 mantêm a medida de leitura.
     `~` e não `+`: entre o lead e a tabela costuma haver um `<h3>` (a transparencia.html é
     assim), e o que decide é a seção conter a tabela, não a adjacência exata. */
  .lead:has(~ .tblwrap), .lead:has(~ table){max-width:none}
}

/* ========================================================== CAMADA: landing
   A home do site: `index.html`. Página única de conversão — o argumento longo mora em
   `argumento.html`. Tudo escopado por `body.landing`, pelo mesmo motivo da camada `atlas`:
   esta folha é lida pelas 45 páginas da pasta, e regra solta vazaria para elas.
   -------------------------------------------------------------------------- */
@layer landing {

  /* Blocos do Acervo de argumentos (marcador ACERVO do comercial.py): miolo gerado, nunca à mão */
  .acervo-fabrica{list-style:none; margin:24px 0 0; padding:0; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
  .acervo-fabrica li{border:1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius:12px; padding:16px 18px}
  .acervo-fabrica h3{margin:0 0 6px; font-size:1rem; line-height:1.3}
  .acervo-fabrica p{margin:0; opacity:.82; line-height:1.5}
  .acervo-norma{overflow-x:auto}
  .acervo-norma table{width:100%; border-collapse:collapse}
  .acervo-norma th, .acervo-norma td{text-align:left; vertical-align:top; padding:9px 10px;
    border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent)}
}

/* ========================================================= CAMADA: instancia
   A LANDING DE SOLUÇÃO das instâncias do tema Educação (2026-09-29): a página que vende uma
   instância como o que ela é — uma solução possível, já demonstrada, para a classe de problemas
   de um tipo de instituição, entregue pela M3 Consultores Associados pelo ciclo da Design Science
   Research. Topo de conversão (hero → prova → tema → desafio → método → solução → módulos) e,
   abaixo, o conteúdo técnico preservado em dobras `<details>`.

   Tudo escopado por `body.lp-inst` (a folha é lida pela pasta inteira). O acento da persona é
   `--f`/`--f-line`/`--f-soft`, fixado pela classe `.f-*` do `<body>` com as MESMAS cores do
   `landing.local.css` de cada instância — básica laranja, superior azul, livre verde-água —, para
   a página publicada e a landing da raiz da instância falarem com a mesma cor. O dourado segue
   sendo a cor de ação (`.btn.gold`), e na landing derivada ele já vira o acento da instância.

   ⚑ ZERO JS e zero `style=`: esta página vira template da instância, onde a CSP bloqueia os dois.
   O recolhível é `<details>`; o movimento é CSS e respeita `prefers-reduced-motion`.
   -------------------------------------------------------------------------- */
@layer instancia {

  body.lp-inst{--f:var(--gold); --f-line:var(--gold-line); --f-soft:var(--gold-soft)}
  body.lp-inst.f-basica{--f:#fb923c; --f-line:rgba(251,146,60,.55); --f-soft:rgba(251,146,60,.08)}
  body.lp-inst.f-superior{--f:#60a5fa; --f-line:rgba(96,165,250,.55); --f-soft:rgba(96,165,250,.08)}
  body.lp-inst.f-livre{--f:#2dd4bf; --f-line:rgba(45,212,191,.55); --f-soft:rgba(45,212,191,.08)}

  body.lp-inst section{padding-top:84px}
  body.lp-inst .overline{color:var(--f)}
  body.lp-inst .lp-centro{text-align:center}
  body.lp-inst .lp-centro .lead{margin-left:auto; margin-right:auto; max-width:820px}
  body.lp-inst .lp-centro .grid{text-align:left}

  /* --- hero de conversão ---------------------------------------------------- */
  body.lp-inst .lp-hero{position:relative; max-width:1180px; margin:0 auto; padding:88px 28px 36px;
    display:grid; grid-template-columns:1.3fr .7fr; gap:44px; align-items:center}
  body.lp-inst .lp-hero .overline{font-size:12px; letter-spacing:.26em}
  body.lp-inst .lp-hero h1{margin:14px 0 0; font-size:clamp(34px,5vw,60px); line-height:1.07;
    font-weight:800; letter-spacing:.005em}
  body.lp-inst .lp-brilho{background:linear-gradient(100deg,#fff 5%, var(--f) 55%, #a78bfa 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent}
  body.lp-inst .lp-tag{font-size:clamp(15.5px,1.8vw,19px); color:var(--muted); max-width:640px;
    margin:20px 0 0}
  body.lp-inst .lp-tag b{color:var(--txt)}
  body.lp-inst .lp-acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  body.lp-inst .lp-acoes .btn{font-size:15px; padding:12px 22px}
  body.lp-inst .lp-selo{display:inline-flex; align-items:center; gap:8px; margin-top:22px;
    font-size:12.5px; color:var(--dim); letter-spacing:.04em}
  body.lp-inst .lp-selo b{color:var(--muted); font-weight:600}
  /* a arte: o mascote do módulo-âncora sobre um halo na cor da persona */
  body.lp-inst .lp-arte{position:relative; display:grid; place-items:center; aspect-ratio:1/1}
  body.lp-inst .lp-arte::before{content:""; position:absolute; inset:6%; border-radius:50%;
    background:radial-gradient(circle at 50% 45%, var(--f-soft), transparent 68%);
    border:1px solid var(--f-line); box-shadow:0 0 90px var(--f-soft), inset 0 0 60px var(--f-soft)}
  body.lp-inst .lp-arte::after{content:""; position:absolute; inset:-2%; border-radius:50%;
    border:1px dashed var(--line2); animation:lp-orbita 60s linear infinite}
  body.lp-inst .lp-arte img{position:relative; width:72%; max-width:300px;
    filter:drop-shadow(0 26px 50px rgba(0,0,0,.6))}
  @keyframes lp-orbita{to{transform:rotate(360deg)}}
  @media(max-width:900px){
    body.lp-inst .lp-hero{grid-template-columns:1fr; text-align:center; padding-top:28px; gap:18px}
    body.lp-inst .lp-tag{margin-left:auto; margin-right:auto}
    body.lp-inst .lp-acoes{justify-content:center}
    body.lp-inst .lp-arte{max-width:170px; margin:0 auto; grid-row:1}
  }

  /* --- faixa de prova: os números que a instância de demonstração EMITE --------- */
  body.lp-inst .lp-prova{max-width:1180px; margin:0 auto; padding:0 28px}
  body.lp-inst .lp-prova ul{list-style:none; margin:0; padding:22px 0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 12px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  body.lp-inst .lp-prova li{text-align:center; color:var(--muted); font-size:12.5px;
    letter-spacing:.04em; line-height:1.35}
  body.lp-inst .lp-prova b{display:block; font-size:clamp(24px,2.8vw,34px); color:var(--txt);
    font-weight:800; letter-spacing:.01em; margin-bottom:2px}
  body.lp-inst .lp-prova .nota{margin:10px 0 0; text-align:center; font-size:12.5px; color:var(--dim)}

  /* --- o método: a DSR como linha do tempo de seis passos --------------------- */
  body.lp-inst ol.lp-dsr{list-style:none; counter-reset:dsr; margin:34px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  body.lp-inst ol.lp-dsr > li{counter-increment:dsr; position:relative; padding:24px 22px 22px;
    border-radius:18px; border:1px solid var(--line);
    background:linear-gradient(180deg, var(--panel), var(--panel2))}
  body.lp-inst ol.lp-dsr > li::before{content:counter(dsr); display:inline-grid; place-items:center;
    width:38px; height:38px; border-radius:12px; margin-bottom:14px; font-weight:800; font-size:17px;
    color:var(--bg); background:var(--f); box-shadow:0 0 26px var(--f-soft)}
  body.lp-inst ol.lp-dsr .fase{margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--f)}
  body.lp-inst ol.lp-dsr h3{margin:4px 0 8px; font-size:18px}
  body.lp-inst ol.lp-dsr p{margin:0; color:var(--muted); font-size:14px}
  body.lp-inst ol.lp-dsr .entrega{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line2);
    font-size:13px; color:var(--txt)}
  body.lp-inst ol.lp-dsr .entrega::before{content:"Você recebe · "; color:var(--f); font-weight:600}
  @media(max-width:1000px){body.lp-inst ol.lp-dsr{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){body.lp-inst ol.lp-dsr{grid-template-columns:1fr}}
  /* o laço: avaliação e comunicação voltam para o problema — a DSR é ciclo, não cascata */
  body.lp-inst .lp-laco{margin:18px 0 0; text-align:center; color:var(--dim); font-size:13.5px}
  body.lp-inst .lp-laco b{color:var(--f)}

  /* --- os pilares da solução ------------------------------------------------ */
  body.lp-inst .lp-pilar{border-left:3px solid var(--f)}
  body.lp-inst .lp-pilar h3{font-size:19px}
  body.lp-inst .lp-pilar ul{margin:12px 0 0; padding:0; list-style:none; color:var(--muted); font-size:14px}
  body.lp-inst .lp-pilar li{padding-left:18px; position:relative; margin-top:6px}
  body.lp-inst .lp-pilar li::before{content:"▸"; position:absolute; left:0; color:var(--f)}
  body.lp-inst .lp-pilar .tags{margin-top:14px}

  body.lp-inst .tags .t.core{color:var(--f); border-color:var(--f-line); background:var(--f-soft)}

  /* --- o fecho: o convite para o diagnóstico ------------------------------- */
  body.lp-inst .lp-fecho{margin:90px 0 0; padding:56px 40px; border-radius:26px; text-align:center;
    border:1px solid var(--f-line);
    background:
      radial-gradient(640px 320px at 50% 0%, var(--f-soft), transparent 70%),
      linear-gradient(180deg, var(--panel), var(--panel2))}
  body.lp-inst .lp-fecho h2{font-size:clamp(26px,3.6vw,40px)}
  body.lp-inst .lp-fecho .lead{margin-left:auto; margin-right:auto; max-width:760px}
  body.lp-inst .lp-fecho .lp-acoes{justify-content:center}
  body.lp-inst .lp-passos{list-style:none; margin:26px auto 0; padding:0; max-width:880px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:left}
  body.lp-inst .lp-passos li{border:1px solid var(--line); border-radius:14px; padding:14px 16px;
    font-size:13.5px; color:var(--muted); background:rgba(255,255,255,.02)}
  body.lp-inst .lp-passos b{display:block; color:var(--txt); font-size:14.5px; margin-bottom:2px}
  body.lp-inst .lp-contato{display:inline-block; margin-top:22px; padding:10px 18px; border-radius:12px;
    border:1px dashed var(--f-line); color:var(--txt); font-size:15px; letter-spacing:.02em}
  @media(max-width:760px){
    body.lp-inst .lp-passos{grid-template-columns:1fr}
    body.lp-inst .lp-fecho{padding:40px 20px}
  }

  @media (prefers-reduced-motion:reduce){
    body.lp-inst .lp-arte::after{animation:none}
  }
}

/* paginasjs (F6): a casca tem um `div.paginasjs-raiz` no lugar do corpo, e o dashboard.js põe nele os
   blocos do JSON; os dois envoltórios não entram no layout, e a árvore desenhada é a de antes. */
.paginasjs-raiz, .paginasjs-solto{display:contents}
.paginasjs-raiz[data-estado="falha"]{display:block; max-width:760px; margin:40px auto; padding:0 28px}