/* paginas.css: o que as páginas de dentro (/sandbox, /sandbox/claude-code, /agente-24h, /publicar e /precos) usam
   além do styles.css. É carregado depois dele, com o mesmo ?v=. Toda classe daqui começa com "pg-", para não
   esbarrar nas da landing. O resto (wrap, secao, intro, acoes, nota, inclui, janela, conversa, terminal, no-ar,
   recursos, produto-ficha, tabela-precos, perguntas, maquina, etiqueta, rodape) vem do styles.css: aqui ele só
   é ajustado dentro de .pg-pagina, nunca redefinido. Sem style="" e sem script: a CSP do site não deixa. */

/* ---------- a página de dentro: os títulos ficam uma medida abaixo dos da inicial ---------- */
.pg-pagina h1{font-size:clamp(36px,5.6vw,80px);line-height:.98;letter-spacing:-0.045em;max-width:20ch}
.pg-pagina h2{font-size:clamp(30px,3.5vw,48px);line-height:1.04;letter-spacing:-0.036em;max-width:20ch}
.pg-pagina .secao{padding:72px 0}
@media (min-width:1000px){.pg-pagina .secao{padding:96px 0}}
.pg-pagina .secao .intro{max-width:44ch}
.pg-pagina .recursos{margin-top:48px}
.pg-pagina .perguntas{margin-top:40px}
.pg-pagina .cena-nota{margin-left:0;margin-right:0}

/* ---------- trilha de navegação (Início / Sandbox / Claude Code) ---------- */
.pg-trilha{padding-top:26px;font-size:15px;color:var(--pedra)}
.pg-trilha ol{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;padding:0;list-style:none}
.pg-trilha li + li::before{content:"/";margin-right:10px;color:var(--apagado)}
.pg-trilha a{color:var(--texto);text-decoration-color:var(--linha)}
.pg-trilha a:hover{color:var(--grafite);text-decoration-color:var(--grafite)}
.pg-trilha [aria-current]{font-weight:600;color:var(--grafite)}

/* ---------- abertura: o título em cima, o texto à esquerda e uma janela de exemplo à direita ---------- */
.pg-capa{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding:30px 0 72px}
@media (min-width:1020px){
  .pg-capa{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;row-gap:40px;align-items:start;padding:40px 0 100px}
  .pg-capa h1{grid-column:1 / -1}
}
.pg-capa .lead{margin:0;font-size:clamp(19px,1.55vw,22px);line-height:1.5;color:var(--texto);max-width:42ch;text-wrap:pretty}
.pg-capa .etiqueta{font-size:16px}
.pg-capa-lado{min-width:0}
/* a moldura de alumínio em volta da janela branca, como na cena da inicial */
.pg-moldura{padding:8px;border-radius:30px;background:var(--aluminio)}
.pg-moldura .terminal{margin-top:20px}
.pg-moldura .conversa .terminal{margin-top:0}
.pg-moldura .no-ar{margin-top:20px}

/* ---------- seção em duas colunas: o título fica parado à esquerda e o conteúdo corre à direita ---------- */
.pg-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
@media (min-width:1000px){
  .pg-grade{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  .pg-cabeca{position:sticky;top:104px}
}
/* o conteúdo é um contêiner: as listas de termo e explicação abrem em duas colunas pela largura dele, não da tela */
.pg-corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start;min-width:0;container-type:inline-size}
.pg-corpo > *{margin:0}
/* :where não soma peso: as notas (.cena-nota, .precos-nota) continuam com a cor delas */
:where(.pg-corpo) p{color:var(--texto);text-wrap:pretty}
.pg-corpo > h3{margin-top:26px;font-size:22px;line-height:1.2;letter-spacing:-0.018em;text-wrap:balance}
.pg-corpo > h3:first-child{margin-top:0}
.pg-corpo > h3 + *{margin-top:-8px}
.pg-corpo .cena-nota{max-width:var(--medida)}
/* a ficha da máquina de teste, fora da grade dos produtos da inicial: em três colunas dentro do conteúdo */
.pg-corpo .produto-ficha{grid-area:auto}
@media (min-width:560px){.pg-corpo .produto-ficha dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}}

/* ---------- comandos e endereços no meio do texto ---------- */
.pg-cmd{padding:.14em .42em;border-radius:6px;background:var(--aluminio-2);color:var(--grafite);font:500 .86em/1.45 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;white-space:nowrap}
/* no celular estreito, o comando comprido quebra em vez de empurrar a página para o lado */
@media (max-width:479px){.pg-cmd{white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}}
.pg-url{overflow-wrap:anywhere}
/* nas colunas largas, o endereço vai inteiro para a linha de baixo em vez de quebrar no hífen */
@media (min-width:640px){.pg-corpo .pg-url,.cena-nota .pg-url,.secao .intro .pg-url{white-space:nowrap}}

/* o terminal da landing, com as linhas longas quebrando em vez de rolar para o lado */
.pg-terminal{white-space:pre-wrap;overflow-wrap:anywhere}
.pg-terminal .pg-saida{color:var(--inverso-fraco)}

/* o conteúdo de um arquivo (nimu.toml): claro, para não se confundir com o terminal */
.pg-arquivo{border:1px solid var(--linha);border-radius:14px;background:var(--branco);overflow:hidden}
.pg-arquivo figcaption{padding:10px 18px;border-bottom:1px solid var(--linha);font-size:14px;font-weight:600;color:var(--pedra)}
.pg-arquivo pre{margin:0;padding:14px 18px;color:var(--grafite);font:500 14.5px/1.65 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.pg-arquivo code{font:inherit}

/* ---------- passos: uma sequência de verdade, então leva número ---------- */
.pg-passos{padding:0;list-style:none;counter-reset:pg-passo}
.pg-passos > li{counter-increment:pg-passo;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:18px 0;border-top:1px solid var(--linha);color:var(--texto);text-wrap:pretty}
.pg-passos > li:last-child{border-bottom:1px solid var(--linha)}
.pg-passos > li::before{content:counter(pg-passo);font-size:26px;font-weight:600;line-height:1.12;letter-spacing:-0.03em;color:var(--grafite);font-variant-numeric:tabular-nums}
.pg-passos strong{font-weight:600;color:var(--grafite)}
.pg-passos .terminal,.pg-passos .pg-arquivo{margin-top:12px}

/* ---------- lista de termo e explicação: os comandos, os limites ---------- */
.pg-defs > div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 28px;padding:16px 0;border-top:1px solid var(--linha)}
.pg-defs > div:last-child{border-bottom:1px solid var(--linha)}
@container (min-width:560px){
  .pg-defs > div{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:baseline}
  .pg-comandos > div{grid-template-columns:15em minmax(0,1fr)}
}
.pg-defs dt{font-weight:600;color:var(--grafite);overflow-wrap:anywhere}
.pg-defs dd{margin:0;color:var(--texto);text-wrap:pretty}

/* ---------- duas listas lado a lado (o que volta e o que não volta) ---------- */
.pg-duas{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 44px}
@media (min-width:640px){.pg-duas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-duas h3{font-size:19px;letter-spacing:-0.012em}
.pg-duas .inclui{margin-top:12px}
/* o xis do que não vem, mais apagado que o visto */
.inclui .pg-x{color:var(--pedra)}

/* ---------- tabela de comparação: no celular cada linha vira um bloco, com o nome da coluna em cima ---------- */
.pg-compara{margin-top:44px}
.pg-tabela{width:100%;border-collapse:collapse}
.pg-tabela th,.pg-tabela td{padding:16px 0;border-top:1px solid var(--linha);text-align:left;vertical-align:top;font-size:17px;font-weight:400;line-height:1.5;color:var(--texto);text-wrap:pretty}
.pg-tabela thead th{padding:0 0 10px;border-top:0;vertical-align:bottom;font-size:16px;font-weight:600;color:var(--pedra)}
.pg-tabela th + th,.pg-tabela td{padding-left:22px}
.pg-tabela tbody th{font-weight:600;color:var(--grafite)}
.pg-tabela tbody tr:last-child > *{border-bottom:1px solid var(--linha)}
@media (min-width:760px){.pg-tabela tbody th{width:22%}.pg-tabela td{width:39%}}
@media (max-width:759px){
  .pg-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pg-tabela,.pg-tabela tbody,.pg-tabela tr,.pg-tabela th,.pg-tabela td{display:block}
  .pg-tabela tr{padding:18px 0;border-top:1px solid var(--linha)}
  .pg-tabela tbody tr:last-child{border-bottom:1px solid var(--linha)}
  .pg-tabela th,.pg-tabela td,.pg-tabela tbody tr:last-child > *{padding:0;border:0}
  .pg-tabela tbody th{font-size:19px;letter-spacing:-0.012em}
  .pg-tabela td{margin-top:10px}
  .pg-tabela td::before{content:attr(data-rotulo);display:block;font-size:14px;color:var(--pedra)}
}

/* ---------- os três planos, um ao lado do outro ---------- */
.pg-planos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px;margin-top:48px}
@media (min-width:900px){.pg-planos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pg-plano{padding:26px 0 30px;border-top:1px solid var(--linha)}
.pg-plano h3{font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:-0.035em}
.pg-plano-frase{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--texto);text-wrap:pretty}
.pg-plano-preco{margin:22px 0 0;font-variant-numeric:tabular-nums}
.pg-plano-preco strong{display:block;font-size:clamp(30px,2.8vw,40px);font-weight:600;line-height:1.1;letter-spacing:-0.035em;white-space:nowrap;color:var(--grafite)}
.pg-plano-preco span{display:block;margin-top:4px;font-size:16px;color:var(--texto)}
.pg-plano .inclui{margin-top:22px;font-size:17px}
.pg-planos + .cena-nota{margin-top:8px;max-width:70ch}

/* ---------- chamado final e os caminhos para as outras páginas ---------- */
.pg-fim .acoes{margin-top:32px}
.pg-mais{margin-top:64px;padding-top:26px;border-top:1px solid var(--linha)}
.pg-mais-titulo{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--pedra)}
.pg-mais ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 40px;margin:0;padding:0;list-style:none}
.pg-mais li span{display:block;margin-top:4px;font-size:16px;line-height:1.45;color:var(--texto);text-wrap:pretty}

/* ---------- rodapé: a linha das marcas de terceiros, embaixo de tudo ---------- */
.rodape .pg-marcas{flex-basis:100%;margin:0;max-width:none;font-size:14px;line-height:1.55;color:var(--pedra)}