/* ==========================================================================
   Central de ajuda — Marcha
   Referência de layout: help.yampi.com.br (faixa de busca + grade de cards).
   Paleta e tipografia são da Marcha, não do Yampi.

   Ordem de carregamento nesta página:
     1. marcha-transitions.css   transição entre rotas
     2. faq.css                  ESTE arquivo — dono do layout da página
     3. marcha-shell.css         header e rodapé injetados por JS (carrega por último)

   Tokens ficam todos no :root abaixo. Não há !important em lugar nenhum:
   o shell só estiliza .mnav e .marcha-final-footer, que esta página não toca.
   ========================================================================== */

.faq-page {
  /* ---- cor ---- */
  --rosa:        #FF2D8A;
  --rosa-escuro: #E01F76;
  --creme:       #FAF5EB;
  /* Era #FFFDF8: quase-branco fora de sintonia com o branco puro do topo e do
     rodape. Alinhado com o blog e o resto do site. 2026-08-13. */
  --superficie:  #FFFFFF;   /* card sobre o creme */
  --preto:       #1A1816;
  --texto:       #3A3630;
  --suave:       #6B655C;
  --linha:       #E6E0D2;

  /* ---- medida ---- */
  --largura:     1180px;
  --raio:        10px;
  --raio-card:   12px;
  --gap:         24px;

  background: var(--creme);
  color: var(--preto);
}

.faq-frame { width: min(var(--largura), calc(100% - 48px)); margin-inline: auto; }

/* ==========================================================================
   1. Faixa de busca
   ========================================================================== */
.faq-hero {
  padding: clamp(56px, 7vw, 92px) 0 clamp(52px, 6vw, 76px);
  background: var(--rosa);
  color: #fff;
  text-align: center;
}
.faq-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.faq-hero p { margin: 0 auto 30px; max-width: 560px; font-size: 17px; opacity: .88; }

.faq-busca { position: relative; max-width: 720px; margin-inline: auto; }
.faq-busca svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--suave); pointer-events: none;
}
.faq-busca input {
  width: 100%; padding: 18px 18px 18px 52px;
  border: 0; border-radius: var(--raio);
  background: #fff; color: var(--preto);
  font: 400 17px/1.3 inherit;
}
.faq-busca input::placeholder { color: #9A9288; }
.faq-busca input:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 2px; }

/* ==========================================================================
   2. Grade de categorias
   ========================================================================== */
.faq-secao { padding: clamp(44px, 5vw, 68px) 0; }
.faq-secao-titulo {
  margin: 0 0 6px; font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--suave);
}
.faq-secao-sub { margin: 0 0 28px; font-size: 16px; color: var(--suave); }

.faq-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

.faq-cat {
  display: block; padding: 24px;
  border: 1px solid var(--linha); border-radius: var(--raio-card);
  background: var(--superficie); color: inherit; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.faq-cat:hover { border-color: var(--rosa); transform: translateY(-2px); }
.faq-cat:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.faq-cat-ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: 9px; background: rgba(255,45,138,.1); color: var(--rosa);
}
.faq-cat-ico svg { width: 20px; height: 20px; }
.faq-cat strong { display: block; margin-bottom: 6px; font-size: 18px; letter-spacing: -.01em; }
.faq-cat small { display: block; color: var(--suave); font-size: 14.5px; line-height: 1.5; }
.faq-cat em { display: block; margin-top: 14px; font-style: normal; font-size: 13px; color: var(--rosa); }

/* ==========================================================================
   3. Perguntas
   ========================================================================== */
.faq-grupo { scroll-margin-top: 120px; }
.faq-grupo + .faq-grupo { margin-top: 44px; }
.faq-grupo > h2 {
  margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -.015em;
}
.faq-lista { border: 1px solid var(--linha); border-radius: var(--raio-card); overflow: hidden; background: var(--superficie); }

.faq-item + .faq-item { border-top: 1px solid var(--linha); }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 22px; cursor: pointer;
  font-size: 16.5px; font-weight: 500; list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ''; flex: 0 0 11px; width: 11px; height: 11px;
  border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-item > summary:hover { color: var(--rosa); }
.faq-item > summary:focus-visible { outline: 2px solid var(--rosa); outline-offset: -2px; }
.faq-resposta { padding: 0 22px 22px; max-width: 76ch; color: var(--texto); font-size: 16px; line-height: 1.62; }

/* estado de busca */
.faq-item[hidden], .faq-grupo[hidden] { display: none; }
.faq-vazio {
  padding: 42px 22px; border: 1px dashed var(--linha); border-radius: var(--raio-card);
  color: var(--suave); text-align: center;
}
.faq-vazio[hidden] { display: none; }
.faq-contagem { margin: 0 0 20px; font-size: 14px; color: var(--suave); }

/* ==========================================================================
   4. Ainda com dúvida
   ========================================================================== */
.faq-ajuda {
  margin: clamp(44px,5vw,68px) 0 clamp(60px,7vw,96px);
  padding: 38px; border: 1px solid var(--linha); border-radius: var(--raio-card);
  background: var(--superficie); text-align: center;
}
.faq-ajuda h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.015em; }
.faq-ajuda p  { margin: 0 0 22px; color: var(--suave); }
.faq-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.faq-botao {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: var(--raio); font-size: 16px; font-weight: 500; text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.faq-botao-1 { background: var(--rosa); color: #fff; }
.faq-botao-1:hover { background: var(--rosa-escuro); }
.faq-botao-2 { border: 1px solid var(--linha); color: var(--preto); }
.faq-botao-2:hover { border-color: var(--rosa); color: var(--rosa); }

/* ==========================================================================
   5. Responsivo
   ========================================================================== */
@media (max-width: 940px) { .faq-grade { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .faq-frame { width: calc(100% - 32px); }
  .faq-grade { grid-template-columns: 1fr; }
  .faq-item > summary { padding: 18px; font-size: 16px; }
  .faq-resposta { padding: 0 18px 18px; }
  .faq-ajuda { padding: 28px 20px; }
  .faq-botoes { flex-direction: column; }
  .faq-botao { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-cat, .faq-item > summary::after, .faq-botao { transition: none; }
  .faq-cat:hover { transform: none; }
}

/* ==========================================================================
   6. Navegação em 3 níveis
   /duvidas-frequentes/  →  /duvidas-frequentes/<categoria>/  →  /duvidas-frequentes/<categoria>/<artigo>/
   ========================================================================== */
.faq-estreito { width: min(760px, calc(100% - 48px)); }

.faq-trilha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; font-size: 14px; }
.faq-trilha a { color: var(--suave); text-decoration: none; }
.faq-trilha a:hover { color: var(--rosa); }
.faq-trilha i { font-style: normal; color: #B8B0A2; }
.faq-trilha span { color: var(--preto); }

/* topo da página de categoria */
.faq-topo { padding: clamp(34px,4vw,52px) 0 clamp(28px,3vw,38px); border-bottom: 1px solid var(--linha); }
.faq-topo h1 { margin: 0 0 10px; font-size: clamp(28px,3.2vw,38px); font-weight: 700; letter-spacing: -.02em; }
.faq-topo p  { margin: 0 0 16px; max-width: 60ch; color: var(--suave); font-size: 17px; line-height: 1.55; }
.faq-selo {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,45,138,.1); color: var(--rosa);
  font-size: 13px; font-weight: 500;
}

/* linha de artigo — usada na home, na categoria e nos relacionados */
.faq-artigo {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 22px; color: inherit; text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.faq-artigo + .faq-artigo { border-top: 1px solid var(--linha); }
.faq-artigo span { display: block; font-size: 16.5px; font-weight: 500; }
.faq-artigo small { display: block; margin-top: 3px; color: var(--suave); font-size: 13.5px; font-weight: 400; }
.faq-artigo i { font-style: normal; color: #B8B0A2; font-size: 20px; line-height: 1; }
.faq-artigo:hover { background: rgba(255,45,138,.05); color: var(--rosa); }
.faq-artigo:hover i { color: var(--rosa); }
.faq-artigo:focus-visible { outline: 2px solid var(--rosa); outline-offset: -2px; }

/* corpo do artigo */
/* O padding-bottom era 0 porque o bloco "Não achou o que precisava?" ocupava
   esse espaço. Ele saiu em 2026-08-13, então o respiro até o rodapé passa a ser
   do próprio corpo do artigo. */
.faq-artigo-corpo { padding: clamp(34px,4vw,52px) 0 clamp(56px,6vw,88px); }
.faq-artigo-corpo h1 { margin: 0 0 24px; font-size: clamp(26px,3vw,34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.faq-texto p { margin: 0 0 18px; color: var(--texto); font-size: 17px; line-height: 1.7; }

/* isso ajudou? */
.faq-util {
  margin-top: 40px; padding: 24px; border: 1px solid var(--linha);
  border-radius: var(--raio-card); background: var(--superficie); text-align: center;
}
.faq-util strong { display: block; margin-bottom: 14px; font-size: 16px; }
.faq-util-botoes { display: flex; gap: 10px; justify-content: center; }
.faq-util-botoes[hidden] { display: none; }
.faq-util button {
  min-width: 92px; min-height: 42px; padding: 0 20px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: transparent; color: var(--preto);
  font: 500 15px/1 inherit; cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.faq-util button:hover { border-color: var(--rosa); color: var(--rosa); }
.faq-util button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.faq-util-obrigado { margin: 0; color: var(--suave); }
.faq-util-obrigado[hidden] { display: none; }

/* resultados de busca na home */
#faq-resultados[hidden], #faq-conteudo[hidden] { display: none; }

@media (max-width: 620px) {
  .faq-estreito { width: calc(100% - 32px); }
  .faq-artigo { padding: 16px 18px; }
  .faq-util-botoes { flex-direction: column; }
  .faq-util button { width: 100%; }
}

/* ==========================================================================
   7. Head exclusivo da central
   A central NÃO usa o header do shell: ela tem o dela, dentro da faixa rosa,
   como uma central de ajuda de verdade (referência: help.yampi.com.br).
   O rodapé continua vindo do shell — só o topo é próprio.

   Confirmado pelo dono em 2026-08-07: quando o header do shell foi padronizado
   em todas as páginas, esta continua sendo a única exceção.
   ========================================================================== */

/* some com o header do shell, a faixa de aviso e o marcador de coordenadas.
   Eles são criados por marcha-shell.js em runtime, então não dá para tirar do
   HTML — some por CSS. !important porque o shell usa !important no tema dele. */
html body.faq-page > header#__mnav,
html body.faq-page > aside.pricing-revenue-banner,
html body.faq-page > #__marcha-coordinate-overlay { display: none !important; }
/* O shell reserva espaço no topo para o header dele. Sem header, sem espaço.
   Os seletores abaixo espelham a especificidade das regras do shell
   do shell E do pricing/precos.css. Atencao: marcha-shell.js INJETA precos.css
   em runtime, entao aquele arquivo sempre entra por ultimo no documento e ganha
   qualquer empate de especificidade. Por isso aqui usamos 3 classes
   (.faq-page.shell-claro + a classe do html), que supera o (0,2,2) de la. */
html.marcha-global-shell body.faq-page.shell-claro,
html.marcha-internal-page body.faq-page.shell-claro,
html body.faq-page.shell-claro { padding-top: 0 !important; }

.faq-head { background: var(--rosa); }
.faq-head-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px; padding: 14px 0;
}
.faq-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.faq-marca img { display: block; width: 118px; height: auto; }
.faq-marca span {
  padding: 3px 8px; border-radius: 5px;
  background: var(--lima, #DFFF00); color: var(--preto);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.faq-head-links { display: flex; align-items: center; gap: 26px; }
.faq-head-links a {
  color: #fff; text-decoration: none; font-size: 15.5px; font-weight: 500;
  transition: opacity .14s ease;
}
.faq-head-links a:hover { opacity: .74; }
.faq-head-links a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 3px; }
.faq-head-cta {
  padding: 10px 18px; border-radius: 8px;
  background: var(--lima, #DFFF00); color: var(--preto) !important;
}
.faq-head-cta:hover { opacity: 1; background: #fff; }

/* a faixa de busca encosta no head: vira uma coisa só */
.faq-page .faq-hero { padding-top: clamp(40px, 5vw, 64px); }

@media (max-width: 760px) {
  .faq-head-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .faq-head-links { flex-wrap: wrap; gap: 16px; font-size: 15px; }
  .faq-marca img { width: 104px; }
}

/* o bloco de ajuda encosta no CTA do shell — sem vão morto entre os dois */
.faq-page .faq-ajuda { margin-bottom: clamp(28px, 3vw, 44px); }

/* ==========================================================================
   8. Correções de contraste no head rosa
   ========================================================================== */

/* O logo padrão tem o símbolo em rosa — sobre a faixa rosa ele desaparece, e a
   versão dark deixa a palavra preta, que fica dura sobre rosa saturado.
   brand-marcha-logo-creme.png é a versão monocromática: mesma silhueta, uma cor
   só, gerada a partir do canal alfa do logo claro. É a prática padrão de marca
   para fundo colorido. */
.faq-marca img { filter: none; }

/* O CTA de venda do shell ("Venda com taxas transparentes") não entra na central:
   quem está aqui tem um problema, não está comprando. A chamada certa é o bloco
   contextual .faq-ajuda, que fica logo acima. */
html body.faq-page > .marcha-footer-cta,
html body.faq-page .marcha-footer-cta { display: none !important; }

/* ==========================================================================
   9. Corpo do artigo — blocos de conteúdo
   Os artigos deixaram de ser um parágrafo e passaram a ter estrutura:
   subtítulo, lista, passo a passo, nota e tabela.
   ========================================================================== */
.faq-texto > * + * { margin-top: 18px; }
.faq-texto p { color: var(--texto); font-size: 17px; line-height: 1.7; }

.faq-texto h2 {
  margin-top: 34px; font-size: 20px; font-weight: 700;
  letter-spacing: -.015em; color: var(--preto);
}

.faq-texto ul, .faq-texto ol { margin-left: 0; padding-left: 22px; }
.faq-texto li { margin-bottom: 9px; color: var(--texto); font-size: 16.5px; line-height: 1.62; }
.faq-texto li::marker { color: var(--rosa); font-weight: 600; }
.faq-texto ol { counter-reset: passo; list-style: none; padding-left: 0; }
.faq-texto ol > li {
  position: relative; margin-bottom: 14px; padding-left: 42px;
  counter-increment: passo;
}
.faq-texto ol > li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; background: rgba(255,45,138,.12); color: var(--rosa);
  font-size: 13.5px; font-weight: 700;
}

.faq-nota {
  padding: 16px 20px; border-left: 3px solid var(--rosa);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: rgba(255,45,138,.06);
  color: var(--texto); font-size: 16px; line-height: 1.6;
}

.faq-tabela-wrap { overflow-x: auto; }
.faq-texto table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--linha); border-radius: var(--raio-card);
  overflow: hidden; font-size: 15.5px;
}
.faq-texto th, .faq-texto td {
  padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linha);
  vertical-align: top; line-height: 1.55;
}
.faq-texto th { background: rgba(26,24,22,.04); font-weight: 600; font-size: 14px; }
.faq-texto tbody tr:last-child td { border-bottom: 0; }
.faq-texto td:first-child { font-weight: 500; color: var(--preto); white-space: nowrap; }

/* prévia do artigo na lista de categoria */
.faq-artigo span small.faq-resumo { font-weight: 400; }

@media (max-width: 620px) {
  .faq-texto p, .faq-texto li { font-size: 16px; }
  .faq-texto td:first-child { white-space: normal; }
}