/* public/css/faq.css — Central de Conteúdo (/faq)
   Visual alinhado à landing: Montserrat, dourado #fabe12, fundo claro, topo e rodapé pretos.
   Páginas geradas por scripts/build-faq.js */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#fabe12;--gold-soft:rgba(250,190,18,.15);
  --text:#1A1814;--muted:#5C6070;--border:#E5E2D9;
  --bg:#FAFAF7;--surface:#FFFFFF;--ink:#000000;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);
  --radius:16px;
}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
.fq-in{max-width:900px;margin:0 auto;padding:0 24px}

/* ── topo ─────────────────────────────────────────────── */
.fq-nav{background:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.fq-nav-in{max-width:1140px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.fq-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-size:.95rem;font-weight:700;flex-shrink:0}
.fq-logo img{border-radius:7px;object-fit:contain}
.fq-logo b{color:var(--gold);font-weight:700}
.fq-nav-links{display:flex;gap:26px}
.fq-nav-links a{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s}
.fq-nav-links a:hover{color:#fff}
.fq-nav-ctas{display:flex;gap:10px;align-items:center}
.fq-btn{padding:9px 20px;border-radius:22px;font-family:inherit;font-size:.82rem;font-weight:600;text-decoration:none;display:inline-block;transition:all .2s;cursor:pointer}
.fq-btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.fq-btn-ghost:hover{border-color:rgba(255,255,255,.75)}
.fq-btn-gold{background:var(--gold);color:#000;border:none;box-shadow:0 2px 12px rgba(250,190,18,.3)}
.fq-btn-gold:hover{box-shadow:0 4px 20px rgba(250,190,18,.45);transform:translateY(-1px)}
@media(max-width:860px){.fq-nav-links{display:none}.fq-btn-ghost{display:none}}

/* ── cabeçalho ────────────────────────────────────────── */
.fq-hero{background:var(--ink);color:#fff;padding:56px 0 60px;position:relative;overflow:hidden}
.fq-hero::after{content:'';position:absolute;top:-40%;left:55%;width:600px;height:600px;pointer-events:none;
  background:radial-gradient(circle,rgba(250,190,18,.13) 0%,rgba(250,190,18,.03) 42%,transparent 66%)}
.fq-hero .fq-in{position:relative;z-index:1}
.fq-hero h1{font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;line-height:1.18;letter-spacing:-.015em;max-width:20ch}
.fq-hero-art h1{max-width:26ch}
.fq-lead{margin-top:16px;font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.65);max-width:60ch}
.fq-bread{font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.fq-bread a{color:var(--gold);text-decoration:none}
.fq-bread a:hover{text-decoration:underline}
.fq-meta{margin-top:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.79rem;color:rgba(255,255,255,.5)}

.fq-tag{display:inline-block;padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:600;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.12)}
.fq-tag-noticias{background:var(--gold-soft);color:var(--gold);border-color:rgba(250,190,18,.3)}
.fq-tag-guia{background:rgba(74,193,255,.14);color:#4AC1FF;border-color:rgba(74,193,255,.28)}

/* ── listagem ─────────────────────────────────────────── */
.fq-lista{padding:48px 0 72px}
.fq-secoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:52px}
.fq-secao{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px;
  text-decoration:none;transition:all .25s;box-shadow:var(--shadow-sm);display:block}
.fq-secao:hover{border-color:rgba(250,190,18,.5);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.fq-secao h2{font-size:1.02rem;font-weight:700;margin-bottom:8px}
.fq-secao p{font-size:.86rem;line-height:1.6;color:var(--muted);margin-bottom:14px}
.fq-secao span{font-size:.82rem;font-weight:600;color:var(--gold)}
.fq-h2{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.fq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.fq-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:22px;
  text-decoration:none;transition:all .25s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px}
.fq-card:hover{border-color:rgba(250,190,18,.5);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.fq-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.fq-card .fq-tag{background:#F3F1EA;color:var(--muted);border-color:var(--border)}
.fq-card .fq-tag-noticias{background:var(--gold-soft);color:#9a7400;border-color:rgba(250,190,18,.4)}
.fq-card .fq-tag-guia{background:rgba(74,193,255,.12);color:#1B7FB8;border-color:rgba(74,193,255,.3)}
.fq-card h3{font-size:1.02rem;font-weight:700;line-height:1.35}
.fq-card p{font-size:.87rem;line-height:1.6;color:var(--muted);flex:1}
.fq-card-data{font-size:.75rem;color:#8A8E9C}
.fq-vazio{color:var(--muted);font-size:.92rem}

/* ── artigo ───────────────────────────────────────────── */
.fq-artigo{padding:52px 0 64px}
.fq-artigo article{font-size:1.02rem;line-height:1.78;color:#2B2A26}
.fq-artigo p{margin-bottom:20px}
.fq-artigo h2{font-size:1.42rem;font-weight:700;margin:40px 0 16px;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.fq-artigo h3{font-size:1.13rem;font-weight:700;margin:30px 0 12px;color:var(--text)}
.fq-artigo strong{font-weight:700;color:var(--text)}
.fq-artigo a{color:#1B7FB8;text-decoration:underline;text-underline-offset:2px}
.fq-artigo a:hover{color:var(--text)}
.fq-artigo ul,.fq-artigo ol{margin:0 0 22px 22px}
.fq-artigo li{margin-bottom:9px}
.fq-artigo code{background:#F1EFE8;padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,monospace}
.fq-artigo blockquote{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(250,190,18,.09),transparent);
  padding:16px 20px;margin:28px 0;border-radius:0 10px 10px 0;font-size:1rem;line-height:1.7;color:#3A3833}
.tabela-wrap{overflow-x:auto;margin:26px 0;border:1.5px solid var(--border);border-radius:12px;background:var(--surface)}
.fq-artigo table{width:100%;border-collapse:collapse;font-size:.9rem}
.fq-artigo th{background:#F5F3EC;text-align:left;padding:12px 16px;font-weight:700;font-size:.83rem;
  border-bottom:1.5px solid var(--border);white-space:nowrap}
.fq-artigo td{padding:12px 16px;border-bottom:1px solid var(--border);line-height:1.55}
.fq-artigo tbody tr:last-child td{border-bottom:none}
.fq-fontes{margin-top:44px;padding-top:22px;border-top:1.5px solid var(--border)}
.fq-fontes h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px}
.fq-fontes ul{margin:0 0 0 18px}
.fq-fontes li{font-size:.85rem;line-height:1.6;color:var(--muted);margin-bottom:6px}

/* ── compartilhar ─────────────────────────────────────────
   Fica entre o fim do texto e o CTA de cadastro: é o momento em que o leitor
   já sabe o que a notícia diz e lembra de quem precisa saber também.
   [hidden] é reafirmado porque .fq-sh declara display:inline-flex, e isso
   derrubaria o hidden do HTML dos botões que dependem de JavaScript. */
.fq-share{margin-top:44px;padding-top:22px;border-top:1.5px solid var(--border);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fq-share-lb{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.fq-share-bt{display:flex;gap:9px;flex-wrap:wrap}
.fq-sh{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:22px;
  border:1.5px solid var(--border);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:.82rem;font-weight:600;line-height:1;text-decoration:none;
  cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}
.fq-sh svg{width:16px;height:16px;flex-shrink:0}
.fq-sh:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.fq-sh-wa:hover{border-color:#25D366;color:#0F7A40}
.fq-sh-x:hover{border-color:#000;color:#000}
.fq-sh-cp:hover,.fq-sh-nt:hover{border-color:var(--gold)}
.fq-sh.is-ok{border-color:#22C55E;color:#15803D;transform:none}
.fq-sh[hidden]{display:none}
/* mesma armadilha do .fq-btn: `.fq-artigo a` pinta e sublinha todo link */
.fq-artigo a.fq-sh,.fq-artigo a.fq-sh:hover{text-decoration:none}
.fq-artigo a.fq-sh{color:var(--text)}
.fq-artigo a.fq-sh-wa:hover{color:#0F7A40}
.fq-artigo a.fq-sh-x:hover{color:#000}

.fq-cta{margin-top:48px;background:var(--ink);border-radius:20px;padding:34px 30px;text-align:center;position:relative;overflow:hidden}
.fq-cta::after{content:'';position:absolute;top:-60%;left:50%;width:420px;height:420px;pointer-events:none;
  background:radial-gradient(circle,rgba(250,190,18,.16) 0%,transparent 62%)}
.fq-cta h3{color:#fff;font-size:1.22rem;font-weight:700;margin-bottom:10px;position:relative;z-index:1}
.fq-cta p{color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.65;max-width:46ch;margin:0 auto 20px;position:relative;z-index:1}
.fq-cta .fq-btn{position:relative;z-index:1;padding:12px 28px;font-size:.88rem}
/* Botão dentro do corpo do artigo continua sendo BOTÃO. `.fq-artigo a` (0,1,1)
   é mais específico que `.fq-btn` (0,1,0), então a cor de link e o sublinhado
   da prosa venciam e o CTA do rodapé saía azul e sublinhado, diferente do botão
   idêntico do topo (que vive fora do .fq-artigo). Reafirmado com peso maior —
   sem !important. O :hover precisa vir explícito porque `.fq-artigo a:hover`
   empata em especificidade com `.fq-artigo a.fq-btn-gold`. */
.fq-artigo a.fq-btn{text-decoration:none}
.fq-artigo a.fq-btn-gold,.fq-artigo a.fq-btn-gold:hover{color:#000}
.fq-artigo a.fq-btn-ghost,.fq-artigo a.fq-btn-ghost:hover{color:#fff}

.fq-rel{background:#F4F2EB;border-top:1.5px solid var(--border);padding:52px 0 64px}
.fq-rel h2{font-size:1.22rem;font-weight:700;margin-bottom:20px}

/* ── rodapé ───────────────────────────────────────────── */
.fq-footer{background:var(--ink);color:rgba(255,255,255,.55);padding:52px 0 0;margin-top:0}
.fq-footer-in{max-width:1140px;margin:0 auto;padding:0 24px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.fq-footer p{font-size:.85rem;line-height:1.7;margin-top:14px;max-width:44ch}
.fq-footer-links{display:flex;flex-direction:column;gap:11px}
.fq-footer-links a{font-size:.85rem;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.fq-footer-links a:hover{color:var(--gold)}
.fq-footer-fim{border-top:1px solid rgba(255,255,255,.08);padding:20px 24px;text-align:center;font-size:.76rem;color:rgba(255,255,255,.35)}
@media(max-width:720px){
  .fq-footer-in{grid-template-columns:1fr;gap:28px}
  .fq-hero{padding:40px 0 44px}
  .fq-artigo{padding:38px 0 48px}
  .fq-share{flex-direction:column;align-items:flex-start;gap:12px}
  .fq-share-bt{width:100%}
  .fq-sh{flex:1 1 auto;justify-content:center}
}

/* ── Tutor público (widget) ────────────────────────────────────
   Mesmo visual do Condutor do app (public/js/condutor-widget.js): bolha
   preta de 56px com a raposa e borda dourada, painel escuro. Se aquele
   mudar, este deveria acompanhar.
   ATENÇÃO: [hidden] precisa de !important no fim deste bloco — as classes
   aqui declaram display, e isso derruba o hidden do HTML. */
.tt-wrap{font-family:'Montserrat',system-ui,sans-serif}

/* bolha */
.tt-fab{position:fixed;bottom:24px;right:24px;z-index:9999;width:56px;height:56px;border-radius:50%;
  background:#000;border:2px solid rgba(250,190,18,.5);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 12px rgba(250,190,18,.15);
  transition:transform .3s,box-shadow .3s;animation:ttPulse 3s ease infinite}
.tt-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,0,0,.5),0 0 18px rgba(250,190,18,.25)}
.tt-fab img{width:36px;height:36px;border-radius:50%;object-fit:cover}
/* selo de mensagem não lida — a borda é preta (a cor da própria bolha) e não
   branca, senão ele briga com o fundo da página, que muda de artigo para
   artigo. Vermelho de aviso, não o dourado da marca: o dourado se dissolve na
   borda da bolha e o selo deixa de ser percebido como algo a resolver. */
.tt-selo{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:#E5342A;border:2px solid #000;color:#fff;
  font-size:.7rem;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 2px 8px rgba(229,52,42,.45);animation:ttSelo .38s cubic-bezier(.2,1.5,.45,1)}
@keyframes ttSelo{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tt-selo{animation:none}}
@keyframes ttPulse{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 12px rgba(250,190,18,.15)}
  50%{box-shadow:0 4px 28px rgba(0,0,0,.5),0 0 20px rgba(250,190,18,.3)}}
/* convite que aparece uma vez e some sozinho */
.tt-convite{position:fixed;bottom:34px;right:92px;z-index:9998;background:#000;color:#fff;
  padding:9px 15px;border-radius:22px;font-size:.83rem;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 22px rgba(0,0,0,.35);animation:ttConvite .4s ease;pointer-events:none}
.tt-convite::after{content:'';position:absolute;right:-5px;top:50%;margin-top:-5px;
  border:5px solid transparent;border-left-color:#000;border-right:0}
@keyframes ttConvite{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:600px){.tt-fab{bottom:16px;right:16px;width:50px;height:50px}
  .tt-fab img{width:30px;height:30px}.tt-convite{display:none}}

/* painel */
.tt-painel{position:fixed;bottom:92px;right:24px;z-index:9998;width:370px;
  max-width:calc(100vw - 32px);height:min(560px,calc(100vh - 130px));
  background:#111;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  box-shadow:0 12px 48px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;
  animation:ttSobe .25s ease}
@keyframes ttSobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.tt-painel{bottom:0;right:0;left:0;width:100%;max-width:100%;
  height:100dvh;border-radius:0;border:none}}

.tt-topo{padding:14px 16px;background:linear-gradient(135deg,rgba(250,190,18,.12),rgba(245,158,11,.08));
  border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px;flex-shrink:0}
.tt-avatar{width:40px;height:40px;border-radius:50%;border:2px solid rgba(250,190,18,.5);
  overflow:hidden;flex-shrink:0}
.tt-avatar img{width:100%;height:100%;object-fit:cover}
.tt-topo-txt{flex:1;min-width:0}
.tt-topo-txt strong{display:block;font-size:.88rem;font-weight:700;color:#fff}
.tt-topo-txt span{font-size:.72rem;color:rgba(255,255,255,.5)}
.tt-x{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:1.1rem;line-height:1;padding:4px}
.tt-x:hover{color:#fff}

.tt-msgs{flex:1;overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.tt-msgs::-webkit-scrollbar{width:5px}
.tt-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
/* O balão é a MENSAGEM inteira, não o parágrafo. Antes o fundo estava em
   .tt-msg p, então lista e código — irmãos do <p> — saíam sem fundo, como
   texto solto no painel. Qualquer elemento novo dentro da resposta herda o
   balão automaticamente agora. */
.tt-msg{max-width:90%;font-size:.86rem;line-height:1.62;padding:11px 14px;border-radius:14px}
.tt-msg p{margin:0}
.tt-msg p+p,.tt-msg p+ul,.tt-msg p+ol,.tt-msg ul+p,.tt-msg ol+p{margin-top:8px}
.tt-msg ul,.tt-msg ol{margin:0;padding-left:20px}
.tt-msg li{margin-bottom:4px}
.tt-msg li:last-child{margin-bottom:0}
.tt-msg code{background:rgba(255,255,255,.1);padding:1px 5px;border-radius:4px;font-size:.92em}
.tt-msg a{color:var(--gold);text-decoration:underline}
.tt-bot{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.88);border-bottom-left-radius:5px}
.tt-eu{align-self:flex-end;background:var(--gold);color:#000;border-bottom-right-radius:5px;font-weight:500}
.tt-eu a,.tt-eu code{color:#000}
.tt-erro{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.28);color:#FCA5A5}
.tt-pensando{display:inline-flex;gap:4px;align-items:center;height:12px}
.tt-pensando i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);animation:ttp 1.1s infinite}
.tt-pensando i:nth-child(2){animation-delay:.16s}
.tt-pensando i:nth-child(3){animation-delay:.32s}
@keyframes ttp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Pulo para o fim da conversa. Substitui a rolagem automática, que arrastava
   a leitura da pessoa a cada pedaço do texto. Fica ancorado ao wrapper da área
   de mensagens — e não ao painel — para não dançar quando os chips de sugestão
   aparecem e somem embaixo. */
.tt-msgs-area{position:relative;flex:1;min-height:0;display:flex}
.tt-descer{position:absolute;right:14px;bottom:10px;z-index:5;width:32px;height:32px;border-radius:50%;
  background:var(--gold);color:#000;border:none;font-size:1rem;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.45);transition:transform .18s}
.tt-descer:hover{transform:translateY(2px)}
.tt-sugestoes{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.tt-sugestoes:not([hidden])::before{content:'Continue perguntando';width:100%;font-size:.66rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.28);margin-bottom:2px}
.tt-sug{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);
  padding:7px 12px;border-radius:16px;font-family:inherit;font-size:.76rem;cursor:pointer;transition:all .18s}
.tt-sug:hover{background:rgba(250,190,18,.14);border-color:rgba(250,190,18,.4);color:#fff}

.tt-cta{display:flex;gap:8px;padding:12px 14px;background:rgba(250,190,18,.1);
  border-top:1px solid rgba(250,190,18,.25);flex-shrink:0}
.tt-btn-gold,.tt-btn-ghost{flex:1;text-align:center;padding:10px;border-radius:9px;
  font-size:.81rem;font-weight:600;text-decoration:none;transition:all .18s}
.tt-btn-gold{background:var(--gold);color:#000}
.tt-btn-gold:hover{filter:brightness(1.08)}
.tt-btn-ghost{border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
.tt-btn-ghost:hover{border-color:var(--gold);color:#fff}

.tt-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.tt-form input{flex:1;padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:22px;
  font-family:inherit;font-size:.85rem;background:rgba(255,255,255,.05);color:#fff}
.tt-form input::placeholder{color:rgba(255,255,255,.35)}
.tt-form input:focus{outline:none;border-color:rgba(250,190,18,.55);background:rgba(255,255,255,.07)}
.tt-form button{width:38px;height:38px;border:none;border-radius:50%;background:var(--gold);color:#000;
  font-size:1.05rem;cursor:pointer;flex-shrink:0;transition:filter .18s}
.tt-form button:hover:not(:disabled){filter:brightness(1.08)}
.tt-form button:disabled{opacity:.4;cursor:not-allowed}
.tt-rodape{padding:0 16px 11px;font-size:.66rem;color:rgba(255,255,255,.3);text-align:center;flex-shrink:0}

.tt-wrap [hidden]{display:none !important}