/* ============================================================
   Naq Tickets — páginas institucionais (ajuda, termos,
   privacidade, reembolso).

   São HTML estático, sem React. Este arquivo veste o conteúdo
   delas com o design system novo: papel, tinta, um lime por
   tela, vermelho só para alerta, hairline em vez de sombra.
   Todos os valores vêm de tokens.css — nada de cor solta.
   ============================================================ */

/* ── Cabeçalho e rodapé (espelham o Chrome.jsx do site React) ── */

.naq-site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--paper-18);
}
.naq-site-header .naq-header {
  display: flex; align-items: center; gap: 32px; height: 76px;
}
.naq-site-header a { border: none; color: var(--paper-70); text-decoration: none; }
.naq-site-header .naq-header-nav { display: flex; gap: 24px; }
.naq-site-header .naq-header-nav a {
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: 12px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.naq-site-header .naq-header-nav a:hover,
.naq-site-header .naq-header-nav a[aria-current="page"] { color: var(--lime); }
.naq-site-header .naq-header-actions {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
}
.naq-site-header .naq-header-actions a.naq-btn { color: var(--paper); }

.naq-site-footer { background: var(--ink); color: var(--paper); }
.naq-site-footer a { border: none; color: var(--paper-70); text-decoration: none; font-size: 13px; }
.naq-site-footer a:hover { color: var(--lime); }
.naq-site-footer .naq-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding: 64px var(--page-pad) 40px;
}
.naq-site-footer .naq-footer-col { display: flex; flex-direction: column; gap: 12px; }
.naq-site-footer .naq-footer-tagline {
  font-size: 13px; line-height: 1.6; color: var(--paper-55); max-width: 280px;
}
.naq-site-footer .naq-footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 20px var(--page-pad) 40px; border-top: 1px solid var(--paper-18);
  font-size: 12px; color: var(--paper-55);
}
.naq-site-footer .footer-social { display: flex; gap: 8px; margin-top: 4px; }
.naq-site-footer .social-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-18); border-radius: var(--radius-xs);
  color: var(--paper-70); background: transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.naq-site-footer .social-btn:hover { background: var(--lime); color: var(--ink); }

/* ── Botões (as páginas já usam estas classes) ──────────────── */

.btn-primary, .btn-outline, .btn-ghost, .naq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 var(--space-6); cursor: pointer; text-decoration: none;
  border: 1px solid var(--ink); border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: var(--ink); color: var(--lime); }
.btn-outline, .naq-btn { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover, .naq-btn:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--lime-16); }
.btn-sm { height: 34px; padding: 0 var(--space-4); font-size: var(--text-2xs); }
.on-ink .btn-outline, .on-ink .naq-btn { color: var(--paper); border-color: var(--paper-30); }
.on-ink .btn-outline:hover, .on-ink .naq-btn:hover { background: var(--paper); color: var(--ink); }

/* ── Corpo da página ────────────────────────────────────────── */

.help-page, .terms-page, .policy-page, .refund-page {
  max-width: 860px; margin: 0 auto;
  padding: var(--space-12) var(--page-pad) 96px;
  color: var(--ink);
}

.help-hero, .terms-hero, .policy-hero, .refund-hero {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-bottom: var(--space-8); margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--ink-14);
}
.help-hero h1, .terms-hero h1, .policy-hero h1, .refund-hero h1 {
  font-family: var(--font-ui); font-weight: var(--weight-strong);
  font-size: clamp(32px, 7vw, 52px); letter-spacing: var(--tracking-display);
  line-height: .98; margin: 0;
}
.help-hero p, .terms-hero p, .policy-hero p, .refund-hero p {
  font-size: var(--text-md); line-height: 1.6; color: var(--ink-70); max-width: 62ch; margin: 0;
}
.meta {
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-55);
}

.terms-section, .policy-section, .faq-section, .contact-section {
  padding-top: var(--space-10); scroll-margin-top: 96px;
}
.terms-section h2, .policy-section h2, .faq-section h2, .contact-section h2,
.refund-page h2 {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-ui); font-weight: var(--weight-strong);
  font-size: clamp(22px, 4vw, 30px); letter-spacing: var(--tracking-display);
  line-height: 1.1; margin: 0 0 var(--space-5);
}
.terms-page h3, .policy-page h3, .refund-page h3 {
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight); margin: var(--space-6) 0 var(--space-3);
}
.sec-num, .num {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  color: var(--ink-30); letter-spacing: var(--tracking-tight); flex: none;
}
.terms-page p, .policy-page p, .refund-page p, .help-page p,
.terms-page li, .policy-page li, .refund-page li {
  font-size: var(--text-sm); line-height: 1.7; color: var(--ink-70);
}
.terms-page ul, .terms-page ol, .policy-page ul, .policy-page ol,
.refund-page ul, .refund-page ol { padding-left: var(--space-6); margin: var(--space-4) 0; }
.terms-page li, .policy-page li, .refund-page li { margin-bottom: var(--space-2); }
.terms-page strong, .policy-page strong, .refund-page strong { color: var(--ink); font-weight: 600; }
.terms-page a, .policy-page a, .refund-page a, .help-page a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--ink-30);
}
.terms-page a:hover, .policy-page a:hover, .refund-page a:hover, .help-page a:hover {
  text-decoration-color: var(--red); color: var(--red);
}

/* Sumário */
.terms-toc, .toc {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2);
  padding: var(--space-5); border: 1px solid var(--ink-14); border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.terms-toc a, .toc a { text-decoration: none; font-size: var(--text-sm); color: var(--ink-70); }
.terms-toc a:hover, .toc a:hover { color: var(--ink); text-decoration: underline; }

/* Caixas de destaque — o lime é o único acento da página */
.highlight-box {
  padding: var(--space-5); margin: var(--space-5) 0;
  border: 1px solid var(--ink); border-left: 4px solid var(--lime);
  border-radius: var(--radius-xs); background: var(--lime-16);
}
.warn-box, .warn-box-privacy {
  padding: var(--space-5); margin: var(--space-5) 0;
  border: 1px solid var(--red); border-left: 4px solid var(--red);
  border-radius: var(--radius-xs);
}
.warn-box *, .warn-box-privacy * { color: var(--ink); }
.contact-box, .cta-box {
  padding: var(--space-6); margin-top: var(--space-8);
  border: 1px solid var(--ink); border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard);
}
.cta-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.badge, .badge-lgpd {
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-3);
  border: 1px solid var(--ink); border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  background: var(--lime); color: var(--ink); align-self: flex-start;
}

/* Tabelas */
.data-table, .timeline-table {
  width: 100%; border-collapse: collapse; margin: var(--space-5) 0;
  border: 1px solid var(--ink-14); border-radius: var(--radius-md); overflow: hidden;
  font-size: var(--text-sm);
}
.data-table th, .timeline-table th {
  text-align: left; padding: var(--space-3) var(--space-4);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.data-table td, .timeline-table td {
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--ink-14);
  color: var(--ink-70); vertical-align: top;
}

/* ── Ajuda: busca, categorias, FAQ, contato ─────────────────── */

.help-search {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-5); margin-bottom: var(--space-8);
  border: 1px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
}
.help-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: var(--text-md); color: var(--ink); height: 34px;
}

.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.help-cat-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); height: 128px; padding: var(--space-5); cursor: pointer; text-align: left;
  border: 1px solid var(--ink-14); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.help-cat-btn:hover {
  background: var(--lime); border-color: var(--ink);
  transform: translate(-2px, -2px); box-shadow: var(--shadow-hard);
}
.hc-icon { font-size: 22px; line-height: 1; }
.hc-label { font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-sm); }

.faq-item {
  border: 1px solid var(--ink-14); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); overflow: hidden;
}
.faq-item.open { border-color: var(--ink); }
.faq-question {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-5); cursor: pointer; background: none; border: none; text-align: left;
}
.faq-question:hover { background: var(--lime-16); }
.q-text {
  flex: 1; font-family: var(--font-ui); font-weight: var(--weight-strong);
  font-size: var(--text-md); color: var(--ink);
}
.q-icon { flex: none; color: var(--ink-55); transition: transform var(--dur-fast) var(--ease-out); }
.faq-item.open .q-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-5) var(--space-5); }
.faq-answer p { margin: 0; }

.contact-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.contact-channel {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border: 1px solid var(--ink-14); border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink);
}
.contact-channel:hover { border-color: var(--ink); }
.cc-icon { font-size: 20px; line-height: 1; }
.cc-label { font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-sm); }
.cc-time { font-size: var(--text-2xs); color: var(--ink-55); }

/* ── Privacidade: grade de direitos ─────────────────────────── */

.rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.right-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--ink-14); border-radius: var(--radius-md); }
.right-card .icon { font-size: 20px; line-height: 1; }
.right-card .title { font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-sm); }
.right-card .desc { font-size: var(--text-2xs); line-height: 1.55; color: var(--ink-55); }
.contact-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-sm); }
.contact-item .label { font-family: var(--font-ui); font-weight: var(--weight-strong); color: var(--ink); min-width: 120px; }
.contact-item .value { color: var(--ink-70); }

/* ── Reembolso: passos e cenários ───────────────────────────── */

.refund-steps { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.refund-step { display: flex; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--ink-14); border-radius: var(--radius-md); }
.refund-step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: var(--radius-circle);
  border: 1px solid var(--ink); color: var(--ink); font-size: var(--text-sm);
}
.step-content { display: flex; flex-direction: column; gap: 4px; }
.step-title { font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-md); color: var(--ink); }
.step-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-70); }

.scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.scenario-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--ink-14); border-radius: var(--radius-md); }
.sc-icon { font-size: 20px; line-height: 1; }
.sc-title { font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-sm); }
.sc-amount { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.sc-desc { font-size: var(--text-2xs); line-height: 1.55; color: var(--ink-55); }
/* Semáforo do reembolso: verde e âmbar não existem na paleta da marca, então
   o sinal é a tinta (integral), o cinza (parcial) e o vermelho (sem). */
.scenario-card.green .sc-amount { color: var(--ink); }
.scenario-card.amber .sc-amount { color: var(--ink-55); }
.scenario-card.red .sc-amount { color: var(--red); }
.scenario-card.red { border-color: var(--red); }

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .naq-site-header .naq-header { height: 60px; gap: 12px; }
  .naq-site-header .naq-header-nav { display: none; }
  .naq-site-header img { height: 20px; }
  .naq-site-footer .naq-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--page-pad) 28px; }
  .help-page, .terms-page, .policy-page, .refund-page { padding-top: var(--space-8); }
  .refund-step { flex-direction: column; gap: var(--space-3); }
  .data-table, .timeline-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* FAQ é acordeão: a resposta nasce fechada e o script só troca a classe. */
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }

/* Os ícones viraram SVG (o design system não usa emoji): herdam a cor do
   bloco e ficam na mesma caixa que o emoji ocupava. */
.hc-icon, .cc-icon, .sc-icon, .right-card .icon,
.badge svg, .badge-lgpd svg, .btn-primary svg, .btn-ghost svg, .btn-outline svg {
  display: inline-flex; flex: none;
}
.hc-icon svg, .cc-icon svg, .sc-icon svg, .right-card .icon svg { color: var(--ink); }
.badge svg, .badge-lgpd svg { margin-right: 6px; }

/* ── Três idiomas na mesma página ───────────────────────────
   As páginas legais trazem PT, EN e ES lado a lado no HTML; o
   main.js mostra um por vez. Sem a regra abaixo os três apareceriam
   empilhados até o script rodar (e para sempre, com JS desligado). */
[data-lang] { display: none; }
span[data-lang="pt"], a[data-lang="pt"], button[data-lang="pt"],
small[data-lang="pt"], strong[data-lang="pt"], em[data-lang="pt"], label[data-lang="pt"] { display: inline; }
div[data-lang="pt"], p[data-lang="pt"], li[data-lang="pt"], ul[data-lang="pt"], ol[data-lang="pt"],
h1[data-lang="pt"], h2[data-lang="pt"], h3[data-lang="pt"], section[data-lang="pt"], table[data-lang="pt"] { display: block; }

.naq-lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--paper-18); border-radius: var(--radius-pill); }
.naq-lang button {
  height: 26px; padding: 0 10px; border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--paper-55); cursor: pointer;
  font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.naq-lang button:hover { color: var(--paper); }
.naq-lang button.active { background: var(--paper); color: var(--ink); }

@media (max-width: 560px) { .naq-lang { display: none; } }