/* Folha só da página /scripts/. Fica fora do style.css global porque são ~200
   linhas que nenhuma outra página usa. Carregar isso na home custaria download
   para todo mundo. As variáveis (--bg, --ink, --accent, --line…) vêm do
   style.css, que é carregado antes; aqui não se redefine paleta nem tipografia. */

/* ---------- fundo da página ---------- */
/* O resto do site desenha uma grade de cinco linhas verticais (.guides) atrás
   de cada seção. Numa página de leitura longa, com 72 cards de texto corrido,
   essa grade cruza os parágrafos e cansa. Aqui ela sai do HTML e o fundo vira
   um degradê liso, com um halo frio no topo só para a página não ficar chapada.
   O `fixed` mantém o degradê parado enquanto o conteúdo rola: com `scroll` a
   emenda de cor voltaria a aparecer no meio da lista. */
.pg-scripts{
  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;
}
/* as seções deixam de pintar por cima do degradê do body */
.pg-scripts .proj-hero,
.pg-scripts .section,
.pg-scripts .footer{background:transparent}
/* o ruído continua, mas na metade: ele dava textura ao preto chapado e aqui o
   degradê já faz esse trabalho */
.pg-scripts .noise{opacity:.045}
/* uma linha só, separando a lista do rodapé, no lugar da grade inteira */
.pg-scripts .footer{border-top:1px solid var(--line)}

/* ---------- painel de personalização ---------- */
.perso{
  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;
}
.perso__campo{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.perso__campo label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.perso__campo input{
  background:transparent;border:0;color:var(--ink);font-family:var(--sans);
  font-size:1rem;padding:0;width:100%;
}
.perso__campo input::placeholder{color:rgba(255,255,255,.28)}
.perso__campo input:focus{outline:none}
.perso__campo:focus-within{background:var(--surface-2)}
/* "opcional" na etiqueta do telefone. É o único campo que faz algum dado sair
   do navegador, então a palavra precisa estar na etiqueta e não numa nota de
   rodapé que ninguém lê. */
.perso__campo label span{
  color:var(--accent);letter-spacing:.06em;
}

/* botão e aviso lado a lado: o aviso só cumpre a função dele se estiver
   grudado no botão que dispara o envio */
.perso__pe{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.perso__pe .btn{flex:none}
.perso__nota{
  flex:1 1 320px;color:var(--muted);font-size:.8125rem;line-height:1.5;
}
.perso__nota a{color:var(--accent);text-underline-offset:3px}

.perso__aviso{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--muted);font-size:.875rem;line-height:1.5;
}
.perso__aviso button{
  background:transparent;border:0;color:var(--accent);font:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;
}

/* ---------- barra de busca e filtros ---------- */
/* sticky no topo: com 72 cards, rolar de volta até a busca a cada consulta
   inviabiliza o uso da página no meio de um atendimento */
.barra{
  position:sticky;top:0;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:16px var(--pad-x);
  display:flex;flex-direction:column;gap:14px;
}
.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:14px 46px 14px 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;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;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}

.contagem{color:var(--muted);font-family:var(--mono);font-size:.75rem;letter-spacing:.06em}

/* ---------- lista de cards ---------- */
.grupos{display:flex;flex-direction:column;gap:56px}
/* empilhado, não lado a lado: com a descrição ao lado do h2 ela quebrava em
   duas linhas curtas e disputava a atenção com o título */
.grupo__cab{
  display:flex;flex-direction:column;gap:6px;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.grupo__cab h2{font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:-.02em}
.grupo__cab p{color:var(--muted);font-size:.9375rem;max-width:640px;line-height:1.5}

.cards{display:flex;flex-direction:column;gap:12px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:border-color .3s var(--ease);
}
.card:hover{border-color:var(--line-2)}
.card.is-open{border-color:var(--accent)}
/* a estrela fica fora do botão do card: botão dentro de botão é HTML inválido
   e o clique na estrela não pode abrir o acordeão junto */
.card__topo{display:flex;align-items:center}
.card__cab{
  flex:1;min-width:0;background:transparent;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:16px;padding:18px 8px 18px 20px;color:var(--ink);
  font-family:var(--sans);
}
.card__topo .fav{margin-right:14px}
.card__icone{font-size:1.25rem;flex:none;line-height:1;width:24px;text-align:center}
.card__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.card__txt h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.card__txt p{color:var(--muted);font-size:.8125rem;font-family:var(--mono);letter-spacing:.04em}
.card__seta{flex:none;color:var(--muted);transition:transform .3s var(--ease),color .3s var(--ease)}
.card.is-open .card__seta{transform:rotate(180deg);color:var(--accent)}

.card__corpo{display:none;padding:0 20px 22px;border-top:1px solid var(--line)}
.card.is-open .card__corpo{display:block}
.card__intro{color:var(--muted);font-size:.9375rem;line-height:1.65;padding:18px 0 4px;max-width:720px}

.motivos{margin:16px 0 0;padding:16px 18px;background:var(--surface-2);border-radius:12px}
.motivos strong{display:block;font-size:.8125rem;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:500}
.motivos ul{display:flex;flex-direction:column;gap:6px;padding-left:18px}
.motivos li{list-style:disc;color:var(--muted);font-size:.9375rem;line-height:1.55}

/* ---------- blocos de mensagem ---------- */
.blocos{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.bloco{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.bloco__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.bloco__cab h4{font-size:.9375rem;font-weight:600;line-height:1.4;flex:1}
.bloco__acoes{display:flex;gap:6px;flex:none}
.acao{
  display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  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),background .25s var(--ease);
}
.acao:hover{color:var(--ink);border-color:var(--line-2)}
.acao.is-copiado{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.acao svg{flex:none}

/* pre-wrap: as mensagens têm quebras de linha que fazem parte do script. No
   WhatsApp cada parágrafo é uma respiração da conversa, não formatação solta */
.bloco__msg{
  white-space:pre-wrap;color:#e6e6e6;font-size:.9375rem;line-height:1.7;
  font-family:var(--sans);
}
.bloco__uso{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.8125rem;line-height:1.55;
}
.bloco__uso strong{color:#c9c9c9;font-weight:600}

/* variável ainda não preenchida x variável já substituída pelo painel do topo */
.var{color:var(--accent);font-weight:600}
.var-ok{background:rgba(75,157,214,.16);color:var(--ink);border-radius:4px;padding:0 3px}

/* guia: conteúdo de leitura (os 9 erros, as 15 frases). Sem botão de copiar,
   porque não é mensagem para mandar ao cliente. */
.guia{display:flex;flex-direction:column;gap:2px;margin-top:18px;counter-reset:g}
.guia__item{background:var(--surface-2);border:1px solid var(--line);padding:16px 18px}
.guia__item:first-child{border-radius:12px 12px 0 0}
.guia__item:last-child{border-radius:0 0 12px 12px}
.guia__item + .guia__item{border-top:0;margin-top:-1px}
.guia__item h4{font-size:.9375rem;font-weight:600;line-height:1.45;margin-bottom:6px}
.guia__item p{color:var(--muted);font-size:.9375rem;line-height:1.65}

/* lista de frases curtas: grid, porque em coluna única as 30 frases de
   fechamento viram uma parede de 30 linhas quase idênticas */
.frases{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-top:18px}
.frase{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:#e6e6e6;font-size:.9375rem;line-height:1.4;
}
.frase button{
  flex:none;background:transparent;border:0;cursor:pointer;color:var(--muted);
  padding:4px;display:inline-flex;transition:color .25s var(--ease);
}
.frase button:hover{color:var(--accent)}
.frase button.is-copiado{color:var(--accent)}

.dicas{margin-top:18px;padding:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.dicas strong.dicas__tit{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:500}
.dicas ul{display:flex;flex-direction:column;gap:10px;padding-left:18px}
.dicas li{list-style:disc;color:var(--muted);font-size:.9375rem;line-height:1.6}
.dicas li strong{color:var(--ink);font-weight:600}


/* ---------- rodapé da barra: contagem e ação em massa ---------- */
.barra__pe{display:flex;align-items:center;justify-content:space-between;gap:16px}
.barra__acao{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:6px 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)}

/* ---------- favoritos ---------- */
/* Quem vende usa cinco scripts todo dia e os outros sessenta quase nunca.
   A estrela fixa esses cinco num grupo próprio no topo da lista. */
.fav{
  flex:none;background:transparent;border:0;cursor:pointer;padding:6px;
  color:var(--muted);display:inline-flex;line-height:0;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.fav:hover{color:var(--accent);transform:scale(1.12)}
.fav.is-on{color:#e8b44a}
.fav svg{pointer-events:none}

.chip--fav.is-on{background:#e8b44a;border-color:#e8b44a;color:#1a1405}
.grupo--fav .grupo__cab h2{color:#e8b44a}

@media (max-width:600px){
  .barra__pe{flex-direction:column;align-items:flex-start;gap:8px}
  .perso__pe{flex-direction:column;align-items:stretch}
  .perso__pe .btn{width:100%;justify-content:center}
}

/* ---------- estados ---------- */
.vazio{text-align:center;padding:80px 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 do navegador sem suporte a área de transferência */
.aviso-copia{
  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-copia.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:900px){
  .barra{top:0}
  .bloco__cab{flex-direction:column;align-items:stretch;gap:10px}
  .bloco__acoes{justify-content:flex-start}
}
@media (max-width:600px){
  .card__cab{padding:16px 14px;gap:12px}
  .card__corpo{padding:0 14px 18px}
  .bloco{padding:14px}
  .frases{grid-template-columns:1fr}
}

/* quem imprime a página quer a lista inteira no papel, não a interface */
@media print{
  .barra,.perso,.card__seta,.bloco__acoes,.fav,.wa,.header,.footer,.nav{display:none !important}
  .card__corpo{display:block !important}
  .card{break-inside:avoid;border-color:#ccc}
}

/* ---------- receber os favoritos por e-mail ---------- */
/* O bloco só aparece com pelo menos um favorito marcado (o app.js tira o
   `hidden`). A borda dourada é a mesma do grupo Favoritos, para o olho ligar
   um ao outro sem precisar de texto explicando. */
.favmail{
  display:flex;flex-direction:column;gap:20px;
  background:var(--surface);border:1px solid var(--line);
  border-left:2px solid #e8b44a;border-radius:16px;padding:26px 28px;
  max-width:720px;
}
.favmail__txt{display:flex;flex-direction:column;gap:8px}
.favmail__txt h2{font-size:clamp(1.125rem,2vw,1.375rem);letter-spacing:-.02em}
.favmail__txt p{color:var(--muted);font-size:.9375rem;line-height:1.6}
.favmail__txt strong{color:var(--ink);font-weight:600}

.favmail__form{display:flex;flex-direction:column;gap:14px}
.favmail__linha{display:flex;gap:10px;flex-wrap:wrap}
.favmail__linha input[type="email"]{
  flex:1 1 240px;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);
}
.favmail__linha input[type="email"]::placeholder{color:rgba(255,255,255,.28)}
.favmail__linha input[type="email"]:focus{outline:none;border-color:var(--accent)}
.favmail__linha input[type="email"][aria-invalid="true"]{border-color:#d66b6b}
.favmail__linha .btn{flex:none}
.favmail__form[aria-busy="true"]{opacity:.6;pointer-events:none}

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

.favmail__msg{font-size:.875rem;line-height:1.5;padding:10px 12px;border-radius:8px}
.favmail__msg.is-ok{color:#8fd18f;background:rgba(143,209,143,.08)}
.favmail__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
   escondido com display:none, mas preenche o que está só deslocado. */
.favmail__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* o site não tinha esta classe: o index.html vinha resolvendo com style
   embutido no único lugar que precisava */
.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}

@media (max-width:600px){
  .favmail{padding:22px 20px}
  .favmail__linha .btn{width:100%;justify-content:center}
}

/* no papel, um formulário não serve para nada */
@media print{
  .favmail{display:none !important}
}