/* 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 usa fundo preto chapado. Numa página de leitura longa, com
   72 cards de texto corrido, aqui o fundo vira um degradê liso, com um halo
   frio no topo só para a página não ficar dura.
   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(1200px 700px at 50% -8%, rgba(75,157,214,.26), transparent 70%),
    linear-gradient(180deg, #12161f 0%, #0b0d14 42%, #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}
}