/* Folha só da página /ecommerce/, o checklist de e-commerce. Fica fora do
   style.css global porque nenhuma outra página usa estas classes, e carregar
   isso na home custaria download para todo mundo. Paleta, tipografia e
   espaçamento vêm do style.css, que carrega antes: aqui não se redefine nada
   disso. Mesma decisão da folha de /scripts/. */

/* ---------- cores só desta página ---------- */
/* As três respostas precisam ser lidas de relance numa lista de 113 linhas, e
   a única cor do site (--accent) não dá conta de três estados. Verde, âmbar e
   vermelho aparecem só aqui, sempre com o texto do rótulo junto: quem não
   distingue as três cores lê "Faço bem" do mesmo jeito. O âmbar é o mesmo dos
   favoritos de /scripts/. */
.pg-check{
  --r-bem:   #7fc98a;
  --r-meio:  #e8b44a;
  --r-nao:   #d98282;
  --r-bem-fundo:  rgba(127,201,138,.14);
  --r-meio-fundo: rgba(232,180,74,.14);
  --r-nao-fundo:  rgba(217,130,130,.14);
}

/* ---------- fundo da página ---------- */
/* Sem a grade de cinco linhas verticais (.guides) do resto do site, pelo mesmo
   motivo de /scripts/: numa lista longa a grade cruza o texto o tempo todo.
   O `fixed` mantém o degradê parado enquanto rola, senão a emenda de cor
   reaparece no meio da lista. */
.pg-check{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(75,157,214,.09), transparent 68%),
    linear-gradient(180deg, #0c0c11 0%, #08080b 45%, #050505 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.pg-check .proj-hero,
.pg-check .section,
.pg-check .footer{background:transparent}
.pg-check .noise{opacity:.045}
.pg-check .footer{border-top:1px solid var(--line)}

/* ---------- como funciona ---------- */
.passos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.passo{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.passo strong{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
}
.passo p{color:var(--muted);font-size:.9375rem;line-height:1.6}

/* ---------- barra fixa ---------- */
/* Sticky no topo: com 113 linhas, rolar de volta até a busca a cada consulta
   inviabiliza a página. A barra também é onde o progresso aparece enquanto a
   pessoa responde, senão ela responde 40 itens sem retorno nenhum. */
/* top:72px e não 0. O header do site é `position:fixed` a 14px do topo e tem
   48px de altura, então ele termina em 62px: uma barra grudada em 0 desliza
   por baixo dele e o campo de busca fica coberto, sem receber nem o clique.
   Os 10px que sobram são respiro entre os dois. */
.barra{
  position:sticky;top:72px;z-index:20;
  background:rgba(11,11,16,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  margin:0 calc(var(--pad-x) * -1);padding:14px var(--pad-x);
  display:flex;flex-direction:column;gap:12px;
}

.busca{position:relative;display:flex;align-items:center;gap:12px}
.busca svg{position:absolute;left:18px;color:var(--muted);pointer-events:none}
.busca input{
  width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:13px 46px 13px 48px;color:var(--ink);
  font-family:var(--sans);font-size:1rem;transition:border-color .3s var(--ease);
}
.busca input::placeholder{color:var(--muted)}
.busca input:focus{outline:none;border-color:var(--accent)}
.busca__limpar{
  position:absolute;right:14px;background:transparent;border:0;cursor:pointer;
  color:var(--muted);font-size:1.25rem;line-height:1;padding:6px;display:none;
}
.busca__limpar.is-on{display:block}
.busca__limpar:hover{color:var(--ink)}

.chips{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips__grupo{display:flex;gap:8px;flex:none}
.chips__rotulo{
  flex:none;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-right:2px;
}
/* separa os dois grupos de filtro sem gastar uma linha inteira com isso */
.chips__risco{flex:none;width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.chip{
  flex:none;background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;color:var(--muted);font-family:var(--sans);font-size:.8125rem;
  font-weight:500;cursor:pointer;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip span{opacity:.5;margin-left:6px}

/* rodapé da barra: progresso de um lado, atalho para o resultado do outro */
.barra__pe{display:flex;align-items:center;justify-content:space-between;gap:16px}
.progresso{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.progresso__trilho{
  flex:1;max-width:280px;height:4px;border-radius:999px;
  background:rgba(255,255,255,.10);overflow:hidden;
}
.progresso__barra{
  display:block;height:100%;width:0;border-radius:999px;background:var(--accent);
  transition:width .35s var(--ease);
}
.progresso__txt{
  flex:none;color:var(--muted);font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;white-space:nowrap;
}
.barra__acao{
  flex:none;background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;color:var(--muted);font-family:var(--sans);font-size:.75rem;
  font-weight:600;cursor:pointer;white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.barra__acao:hover{color:var(--ink);border-color:var(--line-2)}
.barra__acao.is-forte{border-color:var(--accent);color:var(--accent)}

/* ---------- lista ---------- */
.grupos{display:flex;flex-direction:column;gap:56px}

.grupo__cab{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.grupo__tit{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 320px}
.grupo__tit h2{font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:-.02em}
.grupo__tit p{color:var(--muted);font-size:.9375rem;max-width:620px;line-height:1.55}
/* a nota da alavanca ao lado do título: retorno enquanto a pessoa rola, sem
   precisar ir até o resultado no fim da página */
.grupo__nota{flex:none;text-align:right;display:flex;flex-direction:column;gap:2px}
.grupo__nota b{font-family:var(--mono);font-size:1.75rem;line-height:1;font-weight:600}
.grupo__nota small{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}

/* subtítulo de categoria dentro da alavanca */
.sub{
  display:flex;align-items:center;gap:10px;margin:28px 0 10px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}
.sub::after{content:"";flex:1;height:1px;background:var(--line)}
.sub:first-child{margin-top:0}

.itens{display:flex;flex-direction:column;gap:8px}

/* ---------- linha de item ---------- */
.item{
  display:flex;align-items:center;gap:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;transition:border-color .25s var(--ease),background .25s var(--ease);
  scroll-margin-top:150px;
}
.item:hover{border-color:var(--line-2)}
/* a borda esquerda colorida é o que deixa a lista legível de longe: dá para
   ver quanto de verde e quanto de vermelho tem numa alavanca sem ler linha
   por linha */
.item[data-r="2"]{border-left:3px solid var(--r-bem)}
.item[data-r="1"]{border-left:3px solid var(--r-meio)}
.item[data-r="0"]{border-left:3px solid var(--r-nao)}
.item.is-alvo{border-color:var(--accent)}

.item__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.item__txt h3{font-size:.9375rem;font-weight:500;line-height:1.5;letter-spacing:0}
.item__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.selo{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);white-space:nowrap;
}
.selo--alto{color:var(--accent);border-color:rgba(75,157,214,.45)}
.selo--cat{color:var(--muted)}

/* os três botões de resposta */
.resp{display:flex;gap:6px;flex:none}
.resp button{
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  color:var(--muted);font-family:var(--sans);font-size:.75rem;font-weight:600;
  cursor:pointer;white-space:nowrap;background:transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.resp button:hover{color:var(--ink);border-color:var(--line-2)}
.resp button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.resp button[aria-pressed="true"][data-v="2"]{color:var(--r-bem);border-color:var(--r-bem);background:var(--r-bem-fundo)}
.resp button[aria-pressed="true"][data-v="1"]{color:var(--r-meio);border-color:var(--r-meio);background:var(--r-meio-fundo)}
.resp button[aria-pressed="true"][data-v="0"]{color:var(--r-nao);border-color:var(--r-nao);background:var(--r-nao-fundo)}

/* ---------- resultado ---------- */
.resultado{
  display:flex;flex-direction:column;gap:28px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:32px 34px;scroll-margin-top:140px;
}
.resultado__cab{display:flex;flex-direction:column;gap:8px}
.resultado__cab h2{font-size:clamp(1.375rem,2.6vw,2rem);letter-spacing:-.02em}
.resultado__cab p{color:var(--muted);font-size:.9375rem;line-height:1.6;max-width:680px}

/* aviso de checklist ainda em branco: sem ele o painel de resultado abre
   zerado e parece defeito */
.resultado__vazio{
  color:var(--muted);font-size:.9375rem;line-height:1.6;
  padding:18px 20px;background:var(--surface-2);border-radius:12px;
}

.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.placar__item{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
}
.placar__topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.placar__topo h3{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.placar__topo b{font-family:var(--mono);font-size:1.5rem;line-height:1;font-weight:600}
.placar__trilho{height:5px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.placar__barra{display:block;height:100%;width:0;border-radius:999px;transition:width .45s var(--ease)}
.placar__pe{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--muted)}

/* a nota muda de cor com a faixa: 0 a 39 vermelho, 40 a 69 âmbar, 70+ verde */
.n--baixa{color:var(--r-nao)}
.n--media{color:var(--r-meio)}
.n--alta{color:var(--r-bem)}
.b--baixa{background:var(--r-nao)}
.b--media{background:var(--r-meio)}
.b--alta{background:var(--r-bem)}
.n--vazia{color:var(--muted)}

/* ---------- plano de ação ---------- */
.plano{display:flex;flex-direction:column;gap:14px}
.plano__cab{display:flex;flex-direction:column;gap:6px}
.plano__cab h3{font-size:1.125rem;letter-spacing:-.01em}
.plano__cab p{color:var(--muted);font-size:.875rem;line-height:1.55;max-width:680px}
.plano__lista{display:flex;flex-direction:column;gap:2px;counter-reset:p}
.plano__item{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--bg);border:1px solid var(--line);padding:14px 18px;
}
.plano__item:first-child{border-radius:12px 12px 0 0}
.plano__item:last-child{border-radius:0 0 12px 12px}
.plano__item + .plano__item{border-top:0;margin-top:-1px}
.plano__item::before{
  counter-increment:p;content:counter(p);flex:none;
  font-family:var(--mono);font-size:.75rem;font-weight:600;color:var(--accent);
  width:22px;line-height:1.6;
}
.plano__corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.plano__corpo a{font-size:.9375rem;line-height:1.5;text-underline-offset:3px}
.plano__corpo a:hover{text-decoration:underline;color:var(--accent)}
.plano__mais{color:var(--muted);font-size:.875rem;line-height:1.55;padding-top:4px}

/* ---------- receber o diagnóstico por e-mail ---------- */
/* Mesma estrutura do favmail de /scripts/. A borda azul liga o bloco ao
   painel de resultado logo acima. */
.diagmail{
  display:flex;flex-direction:column;gap:20px;
  background:var(--surface);border:1px solid var(--line);
  border-left:2px solid var(--accent);border-radius:16px;padding:26px 28px;
  max-width:720px;
}
.diagmail__txt{display:flex;flex-direction:column;gap:8px}
.diagmail__txt h2{font-size:clamp(1.125rem,2vw,1.375rem);letter-spacing:-.02em}
.diagmail__txt p{color:var(--muted);font-size:.9375rem;line-height:1.6}
.diagmail__txt strong{color:var(--ink);font-weight:600}

.diagmail__form{display:flex;flex-direction:column;gap:14px}
.diagmail__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.diagmail__linha{display:flex;gap:10px;flex-wrap:wrap}
.diagmail__form input[type="text"],
.diagmail__form input[type="email"]{
  flex:1 1 220px;min-width:0;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--sans);font-size:1rem;padding:13px 15px;
  transition:border-color .25s var(--ease);
}
.diagmail__form input::placeholder{color:rgba(255,255,255,.28)}
.diagmail__form input:focus{outline:none;border-color:var(--accent)}
.diagmail__form input[aria-invalid="true"]{border-color:#d66b6b}
.diagmail__linha .btn{flex:none}
.diagmail__form[aria-busy="true"]{opacity:.6;pointer-events:none}

.diagmail__aceite{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  color:var(--muted);font-size:.8125rem;line-height:1.5;
}
.diagmail__aceite input{flex:none;margin-top:2px;accent-color:var(--accent);width:16px;height:16px}
.diagmail__aceite a{color:var(--accent);text-underline-offset:3px}

.diagmail__msg{font-size:.875rem;line-height:1.5;padding:10px 12px;border-radius:8px}
.diagmail__msg.is-ok{color:#8fd18f;background:rgba(143,209,143,.08)}
.diagmail__msg.is-erro{color:#e29a9a;background:rgba(226,154,154,.08)}

/* honeypot: fora da tela, e não display:none. Robô que lê CSS ignora campo
   com display:none, mas preenche o que está só deslocado. */
.diagmail__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- estados ---------- */
.vazio{text-align:center;padding:70px 20px;color:var(--muted)}
.vazio h3{color:var(--ink);font-size:1.25rem;margin-bottom:10px}
.vazio p{font-size:.9375rem;line-height:1.6}

.marca{background:rgba(75,157,214,.25);color:var(--ink);border-radius:3px}

.aviso{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);border-radius:999px;padding:11px 20px;
  font-size:.875rem;font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.aviso.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- telas estreitas ---------- */
/* Abaixo de 860px os três botões não cabem na mesma linha do texto sem
   espremer a frase da ação a duas palavras por linha. Eles descem e ocupam a
   largura inteira, que também é alvo de toque maior. */
/* o style.css baixa o header para top:10px em <=760px e ele fica mais alto ali
   (termina em 74px, contra 62px no desktop). Sem este ajuste a barra encosta
   nele de novo. */
@media (max-width:760px){
  .barra{top:84px}
}

@media (max-width:860px){
  .item{flex-direction:column;align-items:stretch;gap:12px}
  .resp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  /* 44px é o alvo de toque mínimo; com o padding sozinho o botão parava em 35 */
  .resp button{padding:6px;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25}
  .grupo__cab{align-items:flex-start}
  .grupo__nota{text-align:left}
}
@media (max-width:600px){
  .barra{padding:12px var(--pad-x);gap:10px}
  /* os rótulos saem: numa fileira que já rola de lado eles roubam espaço, e
     "Tráfego" e "Ainda não" dizem sozinhos o que filtram */
  .chips__rotulo,.chips__risco{display:none}
  .barra__pe{flex-direction:column;align-items:stretch;gap:10px}
  .progresso__trilho{max-width:none}
  .barra__acao{width:100%}
  .resultado{padding:24px 20px}
  .diagmail{padding:22px 20px}
  .diagmail__linha .btn{width:100%;justify-content:center}
  .resp button{font-size:.6875rem}
}

/* ---------- papel ---------- */
/* Quem imprime quer a lista para levar para reunião ou preencher à mão, não a
   interface.

   O site inteiro é texto branco sobre preto e o style.css não tem bloco de
   impressão nenhum: como o navegador descarta cor de fundo por padrão, a
   página sairia branca no branco, ilegível. Por isso aqui a paleta é
   redefinida em vez de só escondida. É tinta preta sobre papel branco, e
   nenhuma regra depende de fundo impresso. */
@media print{
  .pg-check{
    --bg:#fff; --surface:#fff; --surface-2:#fff;
    --ink:#000; --muted:#444;
    --line:#bbb; --line-2:#888;
    --accent:#000; --accent-ink:#fff;
    /* as três respostas viram três pesos de cinza: em impressora preto e
       branco o verde e o âmbar chegariam quase iguais */
    --r-bem:#000; --r-meio:#777; --r-nao:#bbb;
    background:#fff !important;
  }
  body{background:#fff !important;color:#000}
  .barra,.passos,.diagmail,.header,.footer,.nav,.wa,.aviso,.noise,.vazio{display:none !important}

  .item{break-inside:avoid;background:none;border-color:#bbb}
  .grupo__cab{break-after:avoid}
  .sub{break-after:avoid}
  .resultado{break-inside:avoid;background:none;border-color:#bbb;padding:0;border:0}
  .placar__item,.plano__item{background:none;border-color:#bbb;break-inside:avoid}
  .selo{border-color:#bbb;color:#444}
  .selo--alto{color:#000;border-color:#000}
  /* a nota e a barra do placar são cor pura: no papel viram texto preto e a
     barra some, então o número precisa se bastar */
  .n--baixa,.n--media,.n--alta,.n--vazia{color:#000}
  .placar__trilho{display:none}

  .resp button{color:#777;border-color:#ccc;background:none}
  .resp button[aria-pressed="true"]{color:#000;border-color:#000;border-width:2px;background:none}
  /* o link do plano de ação vira texto: URL impressa ao lado não ajuda quem
     está com a lista na mão */
  .plano__corpo a{color:#000;text-decoration:none}
}