/* =====================================================================
   A PÁGINA /ajuda (23/10/2026, desenho aprovado pelo dono): abertura em duas colunas (texto + cartão da IA), o passo a passo de cada resgate
   e as perguntas rápidas. Usa os tokens --s- do site.css e as peças da janela (ajuda-ia-site.css). Ciano só no botão "Começar a conversa".
   ===================================================================== */
.aj-main { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.aj-ativo { color: var(--s-text) !important; border-bottom: 2px solid var(--s-text); box-sizing: border-box; }

/* abertura */
.aj-abertura { padding: 72px 0; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.aj-texto { flex: 1 1 420px; min-width: 0; }
.aj-olho { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); }
.aj-h1 { margin: 12px 0 0; font-family: var(--s-f-display); font-size: 56px; line-height: 1.08; font-weight: 600; }
.aj-lead { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--s-muted); max-width: 480px; }

.aj-cartao, .aj-fora {
  flex: 1 1 400px; min-width: 0; max-width: 520px; box-sizing: border-box; padding: 24px; border-radius: 16px;
  background: var(--s-card); border: 1px solid var(--s-line-2); display: flex; flex-direction: column; gap: 16px;
}
.aj-fora { color: var(--s-muted); font-size: 15px; line-height: 1.5; }
.aj-fora b { color: var(--s-text); font-size: 18px; font-weight: 600; }
.aj-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aj-etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); }
.aj-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--s-ok); }
.aj-estado i { width: 8px; height: 8px; border-radius: 99px; background: var(--s-ok); }
.aj-cartao h2 { margin: 0; font-family: var(--s-f-display); font-size: 24px; font-weight: 600; }
.aj-cartao p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--s-muted); }
.aj-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aj-produtos .ia-op { text-align: left; }
.aj-horario { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: 13px !important; color: var(--s-muted); }
.aj-horario svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* seções */
.aj-secao { padding: 0 0 72px; display: flex; flex-direction: column; gap: 20px; }
.aj-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.aj-cab h2 { margin: 0; font-size: 22px; font-weight: 600; }
.aj-cab span { font-size: 14px; color: var(--s-muted); }
.aj-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.aj-passo {
  display: flex; flex-direction: column; gap: 14px; padding: 22px; min-height: 168px; box-sizing: border-box;
  background: var(--s-card); border: 1px solid var(--s-line); border-radius: 14px; text-decoration: none;
}
.aj-passo:hover { background: var(--s-card-hover); border-color: var(--s-line-2); }
.aj-marca { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; }
.aj-marca.n { background: #B20710; }
.aj-marca.d { background: #0B2C73; }
.aj-marca.g { background: #0E7C62; }
.aj-marca.s { background: #1B2838; color: var(--s-text); }
.aj-marca.i { background: #C13584; }
.aj-marca.b { background: #E8A33D; color: #1C1200; }
.aj-passo-txt { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.aj-passo-txt b { font-size: 18px; font-weight: 600; }
.aj-passo-txt span { font-size: 14px; line-height: 1.45; color: var(--s-muted); }
.aj-ver { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.aj-ver svg { width: 16px; height: 16px; }

.aj-faq-sec { padding: 0 0 72px; display: flex; flex-wrap: wrap; gap: 24px 48px; }
.aj-faq-tit { flex: 1 1 260px; min-width: 0; }
.aj-faq-tit h2 { margin: 0; font-size: 22px; font-weight: 600; }
.aj-faq-tit p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--s-muted); max-width: 300px; }
.aj-faq { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--s-line); }
.aj-faq div { padding: 20px 0; border-top: 1px solid var(--s-line); }
.aj-faq b { font-size: 17px; font-weight: 600; }
.aj-faq p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--s-muted); }

@media (max-width: 560px) {
  .aj-main { padding: 0 20px; }
  .aj-abertura { padding: 36px 0 44px; }
  .aj-h1 { font-size: 38px; }
  .aj-lead { font-size: 16px; }
  .aj-secao, .aj-faq-sec { padding-bottom: 44px; }
  .aj-cartao, .aj-fora { padding: 20px; }
}