/* ==========================================================================
   ESTEIRA — /isca/<slug> e /maquina.
   Carrega DEPOIS de tokens.css e site.css e só existe nestas páginas
   (<html class="esteira">). A home continua só escura, sem nenhuma linha daqui.

   Tema: segue o sistema do visitante. Escuro = o design system da home, igual.
   Claro = a mesma paleta canônica do Laços (cream, ink, forest, orange), com os
   papéis trocados. O laranja NÃO serve como cor de texto sobre cream (2,9:1):
   no claro, texto de acento usa --acento-texto, medido em tools/gate-esteira.mjs.
   ========================================================================== */

html.esteira { color-scheme: dark; }
html.esteira { --acento-texto: var(--acento-claro); --erro: #ffb08a; --topo-fundo: rgba(11, 33, 30, 0.82); --campo-fundo: rgba(11, 33, 30, 0.55); --link-hover: var(--cream);
  /* borda de campo é componente de interface: 3:1 contra o fundo em volta (WCAG 1.4.11).
     O --borda da home dá 1,3:1, medido em tools/gate-esteira.mjs. */
  --borda-campo: rgba(228, 237, 229, 0.42); }

@media (prefers-color-scheme: light) {
  html.esteira {
    color-scheme: light;
    --fundo: var(--cream);
    --fundo-cartao: #ffffff;
    --superficie: rgba(16, 43, 38, 0.035);
    --superficie-forte: rgba(16, 43, 38, 0.07);
    --superficie-hover: rgba(16, 43, 38, 0.05);
    --borda: rgba(16, 43, 38, 0.14);
    --borda-sutil: rgba(16, 43, 38, 0.08);
    --borda-forte: rgba(16, 43, 38, 0.26);
    --borda-acento: rgba(196, 78, 14, 0.45);
    --texto: var(--ink);
    --texto-2: #243a34;
    --texto-3: #3d554c;
    --texto-4: #55695f;
    --acento-claro: #b8480c;
    --acento-texto: #b8480c;
    --acento-10: rgba(243, 106, 33, 0.08);
    --acento-20: rgba(243, 106, 33, 0.16);
    --glow-1: 0 0 40px -12px rgba(243, 106, 33, 0.18);
    --glow-2: 0 6px 24px -10px rgba(217, 84, 15, 0.55);
    --glow-3: 0 8px 30px -8px rgba(217, 84, 15, 0.65);
    --erro: #a4260f;
    --topo-fundo: rgba(252, 250, 247, 0.86);
    --campo-fundo: #ffffff;
    --link-hover: var(--ink);
    --borda-campo: rgba(16, 43, 38, 0.52);
  }
  html.esteira .ambiente .luz-1 { background: rgba(243, 106, 33, 0.07); }
  html.esteira .ambiente .luz-2 { background: rgba(33, 97, 79, 0.10); }
  html.esteira .ambiente .luz-3 { background: rgba(243, 106, 33, 0.04); }
  html.esteira .ambiente .grade {
    background-image:
      linear-gradient(to right, rgba(16, 43, 38, 0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(16, 43, 38, 0.035) 1px, transparent 1px);
  }
  html.esteira ::selection { background: rgba(243, 106, 33, 0.25); color: var(--ink); }
  html.esteira .cartao { background: var(--fundo-cartao); box-shadow: 0 0 0 1px var(--borda), 0 18px 40px -28px rgba(16, 43, 38, 0.35); }
}

/* o que em site.css está com cor escura escrita à mão, aqui vira papel */
html.esteira .topo { background: var(--topo-fundo); }
html.esteira .campo input { background: var(--campo-fundo); border-color: var(--borda-campo); }
html.esteira .campo input:focus { border-color: var(--acento); }
html.esteira .form-erro { color: var(--erro); }
html.esteira a:not(.btn):not(.marca):not(.pula-para):hover { color: var(--link-hover); }
html.esteira .olho--acento { color: var(--acento-texto); }

/* ---------- casca das páginas ---------- */
.esteira main { padding-block: var(--esp-5) 0; }
.esteira .topo .container { justify-content: space-between; }
.esteira-hero { padding-block: var(--esp-5) var(--esp-6); }
.esteira-hero__grade { display: grid; gap: var(--esp-6); align-items: start; }
@media (min-width: 1024px) {
  .esteira-hero { padding-block: var(--esp-7) var(--secao); }
  .esteira-hero__grade { grid-template-columns: 7fr 5fr; gap: var(--esp-7); }
  .esteira-hero__form { position: sticky; top: 96px; }
}
.esteira-hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
.esteira-hero__texto .display { max-width: 16ch; }
.esteira-hero__texto .lead { max-width: 44ch; }

.lista-check { display: grid; gap: var(--esp-3); margin: var(--esp-2) 0 0; padding: 0; list-style: none; }
.lista-check li { display: grid; grid-template-columns: 20px 1fr; gap: var(--esp-3); align-items: start; color: var(--texto-2); line-height: 1.5; }
.lista-check svg { width: 20px; height: 20px; margin-top: 1px; color: var(--acento); }
.lista-check strong { color: var(--texto); font-weight: 600; }

/* ---------- formulário ---------- */
.form-esteira { display: grid; gap: var(--esp-4); }
.form-esteira__titulo { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; letter-spacing: var(--track-display); }
.form-esteira__sub { margin: -8px 0 0; color: var(--texto-3); font-size: var(--t-ui); }
.form-esteira .btn { width: 100%; }
.form-esteira .nota { margin: 0; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }

/* ---------- entrega da isca ---------- */
.entrega { display: grid; gap: var(--esp-4); }
.entrega:focus { outline: none; }
.entrega:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 6px; border-radius: var(--raio-caixa); }
.entrega__selo {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 5px 12px; border-radius: var(--raio-pilula);
  background: var(--acento); color: #1f0b02;
  font-size: var(--t-micro); font-weight: var(--peso-rotulo); letter-spacing: var(--track-rotulo); text-transform: uppercase;
}
.entrega__proximo { margin-top: var(--esp-2); padding-top: var(--esp-4); border-top: 1px solid var(--borda); display: grid; gap: var(--esp-3); }
.entrega__proximo p { margin: 0; color: var(--texto-3); font-size: var(--t-ui); }

/* ---------- /maquina ---------- */
.preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.preco__valor { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 3vw, 3.5rem); line-height: 1; letter-spacing: var(--track-display); color: var(--texto); }
.preco__nota { color: var(--texto-3); font-size: var(--t-ui); }

.pecas-maquina { display: grid; gap: var(--esp-4); }
@media (min-width: 768px) { .pecas-maquina { grid-template-columns: repeat(3, 1fr); } }
.pecas-maquina .caixa { display: grid; gap: var(--esp-2); align-content: start; padding: var(--esp-5); }
.pecas-maquina h3 { margin: 0; font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.pecas-maquina p { margin: 0; color: var(--texto-3); }
.pecas-maquina .numero { font-family: var(--font-display); font-size: var(--t-h3); color: var(--acento-texto); line-height: 1; }

.passos-3 { counter-reset: passo; display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .passos-3 { grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); } }
.passos-3 li { counter-increment: passo; display: grid; grid-template-columns: 36px 1fr; gap: var(--esp-3); align-items: start; color: var(--texto-2); }
.passos-3 li::before {
  content: counter(passo); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--borda-acento); background: var(--acento-10); color: var(--acento-texto); font-weight: 600;
}

.compra { display: grid; gap: var(--esp-6); }
@media (min-width: 1024px) { .compra { grid-template-columns: 1fr 1fr; gap: var(--esp-7); align-items: start; } }

.bump {
  position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--esp-3); align-items: start;
  padding: var(--esp-4); border-radius: var(--raio-caixa);
  border: 1.5px dashed var(--borda-acento); background: var(--acento-10);
  cursor: pointer;
}
.bump:hover { background: var(--acento-20); }
.bump input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--acento); cursor: pointer; }
.bump:has(input:focus-visible) { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
.bump__titulo { display: block; font-weight: 600; color: var(--texto); line-height: 1.35; }
.bump__texto { display: block; margin-top: 4px; font-size: var(--t-ui); color: var(--texto-3); line-height: 1.5; }
.bump__preco { color: var(--acento-texto); white-space: nowrap; }

.resumo { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
.resumo th, .resumo td { padding: 10px 0; border-bottom: 1px solid var(--borda); text-align: left; font-weight: 400; color: var(--texto-2); }
.resumo td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resumo tfoot th, .resumo tfoot td { border-bottom: 0; padding-top: 14px; font-weight: 600; color: var(--texto); font-size: var(--t-grande); }

.aviso {
  display: grid; gap: 4px; padding: var(--esp-4); border-radius: var(--raio-caixa);
  border: 1px solid var(--borda-acento); background: var(--acento-10); color: var(--texto-2); font-size: var(--t-ui);
}
.aviso strong { color: var(--texto); }

.faq { display: grid; gap: 0; border-top: 1px solid var(--borda); }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary { cursor: pointer; list-style: none; padding: var(--esp-4) 0; font-weight: 500; color: var(--texto); display: flex; justify-content: space-between; gap: var(--esp-4); min-height: var(--toque); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acento-texto); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; border-radius: 6px; }
.faq details p { margin: 0 0 var(--esp-4); color: var(--texto-3); max-width: 62ch; }

.rodape-esteira { margin-top: var(--secao); padding-block: var(--esp-6); border-top: 1px solid var(--borda-sutil); }
.rodape-esteira .container { display: grid; gap: var(--esp-3); }
.rodape-esteira .nota { max-width: 72ch; }

/* prévia de carrossel no hero da /maquina: decorativa (aria-hidden), só HTML e CSS */
/* o giro e o deslocamento dos cartões de trás ocupam espaço: a caixa reserva essa folga dos dois
   lados, senão o cartão passa da coluna (desktop) ou da tela (celular), medido pelo gate */
.mock-carrossel { position: relative; width: min(100% - 80px, 280px); aspect-ratio: 4 / 5; margin: var(--esp-6) auto 0; }
@media (min-width: 1024px) { .mock-carrossel { width: 360px; margin: var(--esp-6) 64px 0 auto; } }
.mock-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--esp-5); border-radius: var(--raio-cartao);
  background: var(--fundo-cartao); box-shadow: 0 0 0 1px var(--borda), var(--glow-1);
}
.mock-slide p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.1; letter-spacing: var(--track-display); color: var(--texto); }
.mock-rotulo { font-size: var(--t-micro); font-weight: var(--peso-rotulo); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--acento-texto); }
.mock-slide--1 { z-index: 3; }
.mock-slide--2 { z-index: 2; transform: translate(8px, -8px) rotate(2deg); opacity: .7; }
.mock-slide--3 { z-index: 1; transform: translate(16px, -16px) rotate(4deg); opacity: .4; }
@media (min-width: 1024px) {
  .mock-slide--2 { transform: translate(14px, -14px) rotate(3deg); }
  .mock-slide--3 { transform: translate(28px, -28px) rotate(6deg); }
}
.mock-slide--2 p, .mock-slide--3 p, .mock-slide--2 .mock-rotulo, .mock-slide--3 .mock-rotulo { visibility: hidden; }
.mock-pontos { display: flex; gap: 6px; }
.mock-pontos i { width: 7px; height: 7px; border-radius: 50%; background: var(--borda-forte); }
.mock-pontos i:first-child { background: var(--acento); }

/* amostra da isca: o prompt 1 aberto, antes do formulário */
.amostra { margin: var(--esp-2) 0 0; padding: var(--esp-5); display: grid; gap: var(--esp-3); width: 100%; max-width: 560px;
  border-radius: var(--raio-caixa); background: var(--superficie); box-shadow: 0 0 0 1px var(--borda); border-left: 3px solid var(--acento); }
.amostra__rotulo { font-size: var(--t-peq); font-weight: var(--peso-rotulo); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--acento-texto); }
.amostra__texto { margin: 0; color: var(--texto); line-height: 1.6; overflow-wrap: anywhere; }
.amostra__copiar { justify-self: start; }
.amostra__retorno { margin: 0; min-height: 1.2em; font-size: var(--t-ui); color: var(--texto-3); }
.amostra__retorno:empty { display: none; }
.nota--garantia { color: var(--texto-2); font-weight: 500; }

/* sem JavaScript: o formulário não funciona (o envio é por fetch), então some, e entra o
   caminho por e-mail. Sem isso, o navegador mandaria nome, e-mail e WhatsApp na URL. */
html.esteira:not(.js) .form-esteira, html.esteira:not(.js) .amostra__copiar { display: none; }
.sem-js-esteira { display: grid; gap: var(--esp-2); padding: var(--esp-4); border-radius: var(--raio-caixa);
  border: 1px solid var(--borda-acento); background: var(--acento-10); color: var(--texto-2); font-size: var(--t-ui); line-height: 1.55; }
.sem-js-esteira strong { color: var(--texto); }
.entrega__ja { margin: 0; color: var(--texto-2); font-size: var(--t-ui); }

/* ---------- amostra longa: recolhida até a pessoa pedir ---------- */
.amostra__texto { white-space: pre-wrap; font-family: var(--font-ui); font-size: var(--t-ui); max-height: 15rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.amostra.aberta .amostra__texto, html:not(.js) .amostra__texto { max-height: none; -webkit-mask-image: none; mask-image: none; }
.amostra__abrir { justify-self: start; min-height: var(--toque); padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-ui)/1.2 var(--font-ui); color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
html:not(.js) .amostra__abrir { display: none; }

/* ---------- material: capa, índice, blocos, prompt ---------- */
.capa-pack { display: grid; gap: var(--esp-4); justify-items: start; }
.capa-pack .display { max-width: 18ch; }
.como-usar { width: 100%; max-width: 640px; display: grid; gap: var(--esp-3); }
.como-usar ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--texto-2); }
.indice-pack { margin-block: var(--esp-6); }
.indice-pack > ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-4); }
@media (min-width: 768px) { .indice-pack > ol { grid-template-columns: repeat(3, 1fr); } }
.indice-pack > ol > li { font-weight: 600; color: var(--texto); }
.indice-pack ol ol { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 4px; font-weight: 400; }
.indice-pack a { min-height: 32px; display: inline-block; padding-block: 4px; }
.bloco-pack { scroll-margin-top: 80px; }
.bloco-pack__uso { margin: 0 0 var(--esp-5); max-width: 60ch; }
.prompts { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.prompt { display: grid; gap: var(--esp-3); scroll-margin-top: 80px; }
.prompt__nome { margin: 0; font-size: var(--t-h4); font-weight: 600; line-height: 1.3; display: flex; gap: var(--esp-3); align-items: baseline; }
.prompt__numero { font-family: var(--font-display); font-weight: 400; color: var(--acento-texto); }
.prompt__texto, .prompt__exemplo pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); font-size: var(--t-ui); line-height: 1.6; color: var(--texto-2);
  padding: var(--esp-4); border-radius: var(--raio-controle); background: var(--superficie); box-shadow: 0 0 0 1px var(--borda); }
.prompt__acoes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.prompt__retorno { font-size: var(--t-ui); color: var(--texto-3); }
.prompt__exemplo summary { cursor: pointer; min-height: var(--toque); display: inline-flex; align-items: center; font-weight: 500; color: var(--acento-texto); }
.prompt__exemplo summary:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; border-radius: 6px; }
.prompt__exemplo[open] summary { margin-bottom: var(--esp-2); }

/* ---------- material recolhido: nome, o que faz e copiar; o resto abre quando a pessoa quiser ---------- */
.prompt { gap: var(--esp-2); padding: var(--esp-4); }
.prompt__faz { margin: 0; color: var(--texto-2); line-height: 1.5; }
.prompt__acoes { margin-top: var(--esp-2); }
.prompt__links { margin: 0; }
.prompt__abrir { min-height: var(--toque); padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-ui)/1.2 var(--font-ui); color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.prompt__exemplo summary { text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-ui); }
.prompt__links { display: flex; flex-wrap: wrap; gap: 0 var(--esp-5); }
.prompt__exemplo { display: grid; gap: var(--esp-2); }
.prompt__exemplo-rotulo { margin: 0; font-size: var(--t-peq); font-weight: var(--peso-rotulo); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); }
.js .prompt__texto, .js .prompt__exemplo { display: none; }
.js .prompt.aberto-texto .prompt__texto { display: block; }
.js .prompt.aberto-exemplo .prompt__exemplo { display: grid; }
html:not(.js) .prompt__abrir { display: none; }
.indice-pack > ol { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--esp-2) var(--esp-4); }
.indice-pack > ol > li { display: grid; gap: 2px; }
.indice-pack > ol > li span { font-weight: 400; font-size: var(--t-peq); color: var(--texto-3); }

/* ---------- material com o repo: o bloco da ferramenta vem antes dos prompts ---------- */
.capa-pack__atalhos { margin: var(--esp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.bloco-ferramenta { display: grid; gap: var(--esp-3); justify-items: start; scroll-margin-top: 80px; }
.bloco-ferramenta .display, .bloco-ferramenta .lead { margin: 0; }
.ferramenta__gratis { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-controle); background: var(--acento-10); color: var(--texto); font-weight: 500; }
.ferramenta__requisitos, .ferramenta__primeiro, .ferramenta__instalar { width: 100%; display: grid; gap: var(--esp-2); }
.ferramenta__requisitos h3, .ferramenta__primeiro h3, .ferramenta__instalar h3 { margin: 0; font-size: var(--t-h4); font-weight: 600; }
.ferramenta__requisitos ul { margin: 0; padding-left: 1.2em; color: var(--texto-2); }
.ferramenta__primeiro pre, .ferramenta__passos pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-ui); padding: var(--esp-3); border-radius: var(--raio-controle); background: var(--superficie-forte); box-shadow: 0 0 0 1px var(--borda); color: var(--texto); }
.ferramenta__resultado { margin: 0; color: var(--texto-2); }
.ferramenta__passos { margin: 0; padding-left: 1.2em; display: grid; gap: var(--esp-3); color: var(--texto-2); }
/* list-item (não grid) para o número do passo aparecer */
.ferramenta__passos li { display: list-item; }
.ferramenta__passos li > * + * { margin-top: var(--esp-2); }
.ferramenta__passos li::marker { color: var(--acento); font-weight: 600; }
html:not(.js) [data-abrir-passos] { display: none; }
#bonus { margin-bottom: 0; scroll-margin-top: 80px; }

/* ---------- 21/09: objetivo, caminhos (um botão por caminho) e os 10 prompts em texto ---------- */
.bloco-ferramenta code, .pedido code, .como-usar code, .amostra code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; overflow-wrap: anywhere; }
.caminho__painel pre, .pedido pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-ui); line-height: 1.55; padding: var(--esp-3); border-radius: var(--raio-controle); background: var(--superficie-forte); box-shadow: 0 0 0 1px var(--borda); color: var(--texto); }
pre mark, .amostra__texto mark { background: var(--acento-20); color: var(--texto); border-radius: 3px; box-shadow: 0 0 0 1px var(--borda-acento); }

.objetivos { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-3); }
@media (min-width: 768px) { .objetivos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .objetivos { grid-template-columns: repeat(3, 1fr); } }
.objetivo { display: grid; gap: var(--esp-2); align-content: start; padding: var(--esp-4); }
.objetivo__nome { color: var(--acento-texto); font-weight: 600; }
.objetivo strong { color: var(--texto); font-weight: 600; }
.objetivo span { color: var(--texto-2); line-height: 1.5; }

.caminhos { width: 100%; display: grid; gap: var(--esp-3); }
.caminhos__botoes { display: none; }
.caminhos--abas .caminhos__botoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-2); }
@media (min-width: 560px) { .caminhos--abas .caminhos__botoes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .caminhos--abas .caminhos__botoes { grid-template-columns: repeat(5, 1fr); } }
.caminho__botao { min-height: 56px; display: grid; gap: 2px; justify-items: start; align-content: center; text-align: left; padding: 10px 14px; border-radius: var(--raio-controle); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.caminho__botao small { font-size: var(--t-peq); font-weight: 400; color: var(--texto-3); }
.caminho__botao:hover { background: var(--superficie-hover); }
.caminho__botao[aria-selected="true"] { border-color: var(--acento); background: var(--acento-10); box-shadow: 0 0 0 1px var(--acento) inset; }
.caminho__botao[aria-selected="true"] small { color: var(--texto-2); }
.caminho__botao:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
.caminho__painel { display: grid; gap: var(--esp-3); padding: var(--esp-5); }
.caminho__painel[hidden] { display: none; }
.caminho__painel h3 { margin: 0; font-size: var(--t-h4); font-weight: 600; }
/* com as abas, o nome do painel já está no botão (aria-labelledby); o h3 fica para quem está sem JavaScript */
.caminhos--abas .caminho__painel > h3 { display: none; }
.caminho__linha { margin: 0; color: var(--texto); font-weight: 500; line-height: 1.5; max-width: 62ch; }
.caminho__bloco { display: grid; gap: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--borda); }
.caminho__bloco h4 { margin: 0; font-size: var(--t-ui); font-weight: 600; color: var(--texto); text-transform: none; }
.caminho__bloco p { margin: 0; color: var(--texto-2); }
.caminho__nota { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-controle); background: var(--superficie-forte); color: var(--texto-2); font-size: var(--t-ui); }

.pedidos { gap: var(--esp-5); }
.pedido { display: grid; gap: var(--esp-4); padding: var(--esp-5); }
.pedido__texto { display: grid; gap: var(--esp-3); min-width: 0; align-content: start; }
/* 2 prompts por objetivo: lado a lado no desktop */
@media (min-width: 1100px) { .pedidos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.pedido__promessa { margin: 0; color: var(--texto); font-weight: 500; line-height: 1.5; }
.pedido__ficha { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--esp-3); font-size: var(--t-ui); }
.pedido__ficha dt { color: var(--texto-3); }
.pedido__ficha dd { margin: 0; color: var(--texto-2); }
.pedido__slot { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-controle); background: var(--acento-10); color: var(--texto-2); font-size: var(--t-ui); line-height: 1.5; }
.pedido__slot strong { color: var(--texto); }
.pedido__fonte { margin: 0; font-size: var(--t-peq); color: var(--texto-3); }

.amostra--pedido .amostra__promessa { margin: 0; color: var(--texto); font-weight: 500; line-height: 1.5; }
.amostra__texto--cmd { max-height: none; -webkit-mask-image: none; mask-image: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre .opcao { white-space: nowrap; }
@media (min-width: 768px) { .indice-pack--5 > ol { grid-template-columns: repeat(5, auto); } }

/* ---------- isca de pacote (Agente Pronto, 23/09) ---------- */
.prova-social { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-2); }
.prova-social li { color: var(--texto); font-weight: 600; font-size: var(--t-grande); line-height: 1.35; }
.indicacao { display: grid; gap: var(--esp-2); width: 100%; max-width: 560px; padding: var(--esp-4) var(--esp-5); }
.indicacao p { margin: 0; color: var(--texto-2); line-height: 1.55; }
.indicacao .indicacao__titulo { font-size: var(--t-peq); font-weight: var(--peso-rotulo); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--acento-texto); }
.indicacao__link { color: var(--acento-texto); font-weight: 600; text-underline-offset: 3px; }
.btn--pendente { cursor: not-allowed; border-style: dashed; }
.btn--pendente small { font-weight: 400; }
.saida-isca__cartao { display: grid; gap: var(--esp-3); }
.saida-isca__cartao .lead { margin: 0; }
.saida-isca__botoes { margin: 0; display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.pecas-pacote { margin: 0; padding: 0; list-style: none; }
.pecas-pacote h2 { margin: 0; font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.pecas-pacote .peca-pacote__nota { color: var(--texto-2); font-size: var(--t-ui); }
.pecas-pacote .btn { margin-top: var(--esp-2); }
.requisitos-pacote { margin: 0; max-width: 560px; color: var(--texto-2); line-height: 1.55; }

/* ---------- /implantacao e /planos (23/09) ---------- */
.campo select, .campo textarea {
  min-height: var(--toque); padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-controle);
  background: rgba(11, 33, 30, 0.55); color: var(--texto); font-family: var(--font-ui); font-size: 1rem; width: 100%;
}
html.esteira .campo select, html.esteira .campo textarea { background: var(--campo-fundo); border-color: var(--borda-campo); }
html.esteira .campo select:focus, html.esteira .campo textarea:focus { border-color: var(--acento); }
.campo textarea { resize: vertical; line-height: 1.5; }
.campo textarea::placeholder { color: var(--texto-4); }
.campo select option { color: #172521; background: #fcfaf7; }
.campo--plano { margin: 0; padding: 0; border: 0; display: grid; gap: var(--esp-2); }
.campo--plano legend { padding: 0; margin-bottom: 6px; font-size: var(--t-peq); font-weight: var(--peso-rotulo); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); }
.campo--plano .opcao-plano { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--toque); padding: 10px 14px; border: 1px solid var(--borda-campo); border-radius: var(--raio-controle); cursor: pointer; color: var(--texto); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; }
.opcao-plano:has(input:checked) { border-color: var(--acento); background: var(--acento-10); }
.opcao-plano:has(input:focus-visible) { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
.opcao-plano input { width: 20px; height: 20px; margin: 0; accent-color: var(--acento); }
.passos-oferta { margin-top: var(--esp-2); }
.plano-cartao { display: grid; gap: var(--esp-4); }
.plano-cartao .lead { margin: 0; }
.plano-cartao__acao { margin: 0; }
.plano-cartao__acao .btn { width: 100%; }