/* Gerado a partir dos `<style>` que viviam dentro do HTML (29/09/2026).
   Arquivo .css em /styles E SERVIDO pela plataforma, e ao contrario do CSS inline ele
   tem ETag, entao a segunda visita revalida com 304 em vez de baixar tudo de novo.
   NAO passa pela compiladora: sem `@apply`, e `rgb(a b c / d)` aqui funciona.
   A ORDEM DOS BLOCOS ABAIXO E A ORDEM QUE ELES TINHAM NO DOCUMENTO. Nao reordenar. */

.how-faq{
  --fq-violeta:rgb(var(--how-violeta));
  --fq-roxo:rgb(var(--how-roxo));
  /* As superficies sao as MESMAS do /como-funciona, porque as duas paginas sao vizinhas no
   menu e o cliente pula de uma para a outra. **E copia, nao vinculo:** sao componentes
   separados, mexeu num, conferir o outro. */
  --fq-linha:rgb(var(--foreground) / .09);
  /* A borda do item e mais forte que a do cartao porque o degrau de fundo entre os dois e
     de 2 niveis: sem ela o item some dentro do painel. */
  --fq-borda:rgb(var(--foreground) / .14);
  --fq-superficie:rgb(var(--how-grafite) / .55);
  --fq-superficie2:rgb(var(--how-grafite));
  --fq-mola:cubic-bezier(.34,1.5,.64,1);
  padding-bottom:16px;
}
/* `--how-grafite` e escuro nos DOIS temas (o tema claro troca `--foreground` e
   `--background`, nao cor de marca), por isso o tema claro precisa deste bloco. */
html[data-how-theme=light] .how-faq{
  --fq-linha:rgb(0 0 0 / .1);
  --fq-borda:rgb(0 0 0 / .14);
  --fq-superficie:rgb(255 255 255);
  --fq-superficie2:rgb(245 245 245);
}

/* ===================== topo ===================== */
/* A FAIXA E ROXA NOS DOIS TEMAS, entao tudo que vive dentro dela usa cor fixa e nao token:
   um `--foreground` claro sobre o roxo sumiria no tema claro. */
/* O `margin-bottom` e o respiro ate os topicos. Sem ele a faixa encosta no conteudo: o
   layout antigo nao precisava, porque o titulo solto ja trazia padding proprio. Mesmo
   descuido que eu tive no /produtos, na mesma tarde. */
.how-faq-topo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px;margin:8px 0 22px;padding:28px 34px;border-radius:22px;background:#33299e;overflow:hidden}
.how-faq-arco{position:absolute;left:14%;top:-162px;width:380px;height:380px;opacity:.5}
.how-faq-retic{position:absolute;right:26px;top:0;bottom:0;width:250px;background-image:radial-gradient(#645cfa 2px,transparent 2.1px);background-size:13px 13px;opacity:.4}
.how-faq-topo-txt{position:relative;z-index:1}
.how-faq-topo h1{margin:0 0 9px;font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.how-faq-topo-txt > p{margin:0;max-width:46ch;color:#dad7ff;font-size:15px;line-height:1.5}

/* campo de busca: quem chega na FAQ tem UMA duvida e nao quer varrer a pagina */
/* Campo escuro sobre o roxo, como na maquete: cores fixas pelo motivo acima. */
.how-faq-busca{position:relative;max-width:520px;display:flex;align-items:center;gap:11px;margin-top:20px;padding:0 16px;border:1px solid #ffffff1f;border-radius:14px;background:#12121a;transition:border-color .22s ease}
.how-faq-busca:focus-within{border-color:#9a94fd}
.how-faq-busca > svg{width:18px;height:18px;flex:none;color:#a6a1c9}
/* a folha da plataforma traz `input,select{height:2rem}`: com box-sizing border-box
   isso engole o padding e deixa o campo com 34px de altura, o texto espremido */
.how-faq-busca input{flex:1;min-width:0;height:auto;padding:15px 0;border:0;background:transparent;color:#fff;font:inherit;font-size:15px}
.how-faq-busca input::placeholder{color:#a6a1c9}
/* A folha da plataforma aplica um anel de 2px no input focado, via `box-shadow`. Com a
   caixa ja acendendo a borda no `:focus-within`, davam duas linhas roxas concentricas. */
.how-faq-busca input:focus,.how-faq-busca input:focus-visible{outline:none;box-shadow:none}
.how-faq-busca input::-webkit-search-cancel-button{display:none}
.how-faq-limpar{display:grid;place-items:center;width:26px;height:26px;flex:none;padding:0;border:0;border-radius:999px;background:#ffffff1f;color:#dad7ff;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.how-faq-limpar[hidden]{display:none}
.how-faq-limpar:hover{background:#ffffff33;color:#fff}
.how-faq-limpar svg{width:13px;height:13px}
.how-faq-contagem{position:relative;z-index:1;margin:11px 0 0;color:#dad7ff;font-size:13px}

/* ===================== arte do topo ===================== */
.how-faq-arte{position:relative;z-index:1;display:grid;place-items:center end}
.how-faq-arte .hcg-support-mascote{width:auto;height:168px}

/* ===================== corpo ===================== */
.how-faq-corpo{display:grid;grid-template-columns:258px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:20px}

/* lateral de topicos */
.how-faq-topicos{padding:18px;border:1px solid var(--fq-linha);border-radius:16px;background:var(--fq-superficie)}
.how-faq-topicos h2{margin:0 0 14px;padding:0 6px;font-size:17px;font-weight:700;letter-spacing:-.015em}
.how-faq-tlista{display:flex;flex-direction:column;gap:4px}
.how-faq-topico{display:flex;align-items:center;gap:11px;width:100%;padding:12px 13px;border:0;border-radius:11px;background:transparent;color:rgb(var(--muted-foreground));font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer;transition:background-color .22s ease,color .22s ease}
.how-faq-topico > svg:first-child{width:18px;height:18px;flex:none}
.how-faq-tchev{margin-left:auto;width:16px;height:16px;flex:none;opacity:.65;transition:transform .32s var(--fq-mola)}
.how-faq-topico:hover{background:rgb(var(--foreground) / .05);color:rgb(var(--foreground))}
.how-faq-topico:hover .how-faq-tchev{transform:translateX(2px)}
.how-faq-topico[aria-selected=true]{background:var(--fq-violeta);color:#fff}
.how-faq-topico:focus-visible{outline:2px solid var(--fq-violeta);outline-offset:2px}
/* durante a busca, topico sem resultado nenhum apaga em vez de sumir:
   some seria esconder do cliente que aquele assunto existe */
.how-faq-topico[data-vazio=true]{opacity:.35}

.how-faq-paineis{display:flex;flex-direction:column;gap:16px}
/* painel */
.how-faq-painel{padding:26px;border:1px solid var(--fq-linha);border-radius:16px;background:var(--fq-superficie)}
.how-faq-painel[hidden]{display:none}
.how-faq-painel > h2{margin:0 0 5px;font-size:clamp(21px,2.4vw,27px);font-weight:700;letter-spacing:-.025em}
.how-faq-painel-sub{margin:0 0 18px;color:rgb(var(--muted-foreground));font-size:14.5px;line-height:1.5}
.how-faq-itens{display:flex;flex-direction:column;gap:10px}
.how-faq-painel.is-entrando{animation:fq-entra .4s cubic-bezier(.22,1,.36,1) both}
@keyframes fq-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Subtitulo dentro do painel: separa as perguntas por tipo de produto. O JS esconde o
   subtitulo quando a busca esvazia o grupo dele, senao sobra rotulo sem nada embaixo. */
.how-faq-sub{display:flex;align-items:center;gap:11px;margin:24px 0 2px;color:rgb(var(--foreground));font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.how-faq-sub::before{content:"";width:3px;height:13px;flex:none;border-radius:2px;background:var(--fq-violeta)}
.how-faq-sub::after{content:"";flex:1;height:1px;background:var(--fq-linha)}
.how-faq-itens > .how-faq-sub:first-child{margin-top:0}
.how-faq-sub[hidden]{display:none}

/* ===================== pergunta ===================== */
.how-faq-item{border:1px solid var(--fq-borda);border-radius:12px;background:var(--fq-superficie2);transition:border-color .22s ease}
.how-faq-item:hover{border-color:rgb(var(--foreground) / .16)}
.how-faq-item summary{display:flex;align-items:flex-start;gap:16px;padding:15px 17px;color:rgb(var(--foreground));font-size:15px;font-weight:600;line-height:1.42;cursor:pointer;list-style:none}
/* o triangulo nativo aparece em tres formatos diferentes conforme o navegador */
.how-faq-item summary::-webkit-details-marker{display:none}
.how-faq-item summary::marker{content:""}
.how-faq-item summary:focus-visible{outline:2px solid var(--fq-violeta);outline-offset:-2px;border-radius:12px}
.how-faq-sinal{margin-left:auto;width:17px;height:17px;flex:none;margin-top:2px;color:rgb(var(--muted-foreground));transition:transform .32s var(--fq-mola),color .2s ease}
.how-faq-item[open] .how-faq-sinal{transform:rotate(180deg);color:var(--fq-violeta)}

.how-faq-resp{padding:0 42px 16px 17px;max-width:72ch}
.how-faq-item[open] .how-faq-resp{animation:fq-abre .34s cubic-bezier(.22,1,.36,1) both}
@keyframes fq-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.how-faq-resp p{margin:0 0 10px;color:rgb(var(--muted-foreground));font-size:14.5px;line-height:1.6}
.how-faq-resp p:last-child{margin-bottom:0}
/* o unico realce dentro da resposta: e o que o cliente leva se ler so meia linha */
.how-faq-resp strong{color:rgb(var(--foreground));font-weight:600}
.how-faq-resp a{color:rgb(var(--foreground));text-decoration:underline;text-decoration-color:rgb(var(--how-violeta) / .6);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.how-faq-resp a:hover{text-decoration-color:var(--fq-violeta)}
.how-faq-lista{margin:0 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.how-faq-lista li{position:relative;padding-left:19px;color:rgb(var(--foreground));font-size:14px;line-height:1.5}
.how-faq-lista li::before{content:"";position:absolute;left:3px;top:.6em;width:6px;height:6px;border-radius:999px;background:var(--fq-violeta)}

/* rotulo do topico, so aparece quando a busca junta perguntas de varios topicos */
.how-faq-de{margin:0 0 9px;color:rgb(var(--muted-foreground));font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ===================== nada encontrado ===================== */
.how-faq-vazio{padding:34px 26px;border:1px dashed var(--fq-linha);border-radius:14px;text-align:center;color:rgb(var(--muted-foreground));font-size:14.5px}
.how-faq-vazio b{display:block;margin-bottom:4px;color:rgb(var(--foreground));font-size:15.5px;font-weight:650}

/* ===================== barra de suporte ===================== */
.how-faq-ajuda{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--fq-linha);border-radius:16px;background:var(--fq-superficie)}
.how-faq-ajuda-icone{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:14px;background:var(--fq-roxo);color:#fff}
.how-faq-ajuda-icone svg{width:24px;height:24px}
.how-faq-ajuda-txt{flex:1 1 220px;min-width:0}
.how-faq-ajuda-txt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em}
.how-faq-ajuda-txt span{display:block;margin-top:3px;color:rgb(var(--muted-foreground));font-size:14px}
.how-faq-botao{display:inline-flex;align-items:center;gap:9px;flex:none;padding:13px 22px;border-radius:12px;background:var(--fq-violeta);color:#fff;font-size:14.5px;font-weight:650;text-decoration:none;transition:background-color .22s ease,transform .4s var(--fq-mola)}
.how-faq-botao:hover{background:rgb(var(--how-violeta) / .85);transform:translateY(-2px)}
.how-faq-botao svg{width:16px;height:16px}

/* a FAQ resume um documento juridico; a ressalva nao pode ficar implicita */
.how-faq-nota{display:flex;align-items:flex-start;gap:11px;margin:12px 0 0;padding:14px 16px;border-radius:12px;background:rgb(var(--foreground) / .035);color:rgb(var(--muted-foreground));font-size:13px;line-height:1.55}
.how-faq-nota > svg{width:16px;height:16px;flex:none;margin-top:2px;color:rgb(var(--muted-foreground))}
.how-faq-nota a{color:rgb(var(--foreground));font-weight:600;text-decoration:underline;text-decoration-color:rgb(var(--how-violeta) / .6);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.how-faq-nota a:hover{text-decoration-color:var(--fq-violeta)}

/* ===================== telas menores ===================== */
@media(max-width:1000px){
  .how-faq-corpo{grid-template-columns:minmax(0,1fr)}
  .how-faq-topicos{padding:14px;min-width:0}
  .how-faq-topicos h2{margin-bottom:10px}
  /* com a lateral virando fileira, a lista rola no eixo X em vez de empilhar 6 itens */
  .how-faq-tlista{flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .how-faq-tlista::-webkit-scrollbar{display:none}
  .how-faq-topico{width:auto;flex:none;padding:10px 15px;border:1px solid var(--fq-linha);border-radius:999px;white-space:nowrap}
  .how-faq-topico[aria-selected=true]{border-color:var(--fq-violeta)}
  .how-faq-tchev{display:none}
}
@media(max-width:860px){
  .how-faq-topo{grid-template-columns:1fr;padding:22px;border-radius:18px}
  /* A reticula sai no celular: com a faixa estreita ela passa por baixo do texto, e o
     subtitulo em #dad7ff sobre os pontos perde a folga de contraste. */
  .how-faq-retic{display:none}
  .how-faq-arco{left:auto;right:-110px;top:-130px;width:300px;height:300px}
  .how-faq-arte{order:-1;place-items:center;height:auto}
  .how-faq-arte .hcg-support-mascote{height:124px}
  /* -4% empurrava a bolha 7px para fora da tela e a pagina inteira rolava de lado;
     o sangramento da bolha so cabe no desktop, onde o container tem folga */
}
@media(max-width:620px){
  .how-faq-painel{padding:18px}
  .how-faq-resp{padding:0 17px 15px}
  .how-faq-item summary{font-size:14.5px;gap:12px;padding:14px 15px}
  .how-faq-ajuda{flex-wrap:wrap;padding:18px}
  .how-faq-botao{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .how-faq-item[open] .how-faq-resp,.how-faq-painel.is-entrando{animation:none}
  .how-faq-botao,.how-faq-tchev,.how-faq-sinal{transition:none}
}