/* TriQ Hub — site institucional (https://triqhub.tech)
   Design system único: tokens em rem na escala Fibonacci, mobile-first (base = celular,
   media queries só para crescer), contêineres em % / min() / clamp(). Tokens em DESIGN.md.
   CSP: style-src 'self' 'unsafe-inline'; script-src 'self' (js/site.js + js/hero3d.js). */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Cores do logo (paleta oficial) */
  --marinho-900: #12227a;
  --marinho-800: #2e1280;
  --violeta: #6438ae;
  --magenta: #bf51e8;
  --ciano: #00caf2;
  --azul: #085fbc;

  /* Superfícies: noite profunda tirada do marinho/roxo do logo */
  --fundo: #05061a;
  --fundo-2: #090a24;
  --superficie: rgba(255, 255, 255, 0.03);
  --superficie-2: rgba(255, 255, 255, 0.055);
  --borda: rgba(255, 255, 255, 0.08);
  --borda-forte: rgba(255, 255, 255, 0.16);
  --texto: #f3f1ff;
  --texto-2: #bcc0e2;
  --texto-3: #9196c2;
  --sobre-marca: #ffffff;
  --ok: #5eead4;
  --aviso: #fcd34d; --pago: #e9d5ff; --perigo: #fca5a5;

  /* Gradientes — usados com parcimônia (botão principal, fio do hover, chamada final) */
  /* texto branco sobre o gradiente: #bf51e8 dava 3,78:1; #a44ad7 dá 4,63:1 (AA) */
  --grad-marca: linear-gradient(135deg, var(--violeta) 0%, #a44ad7 100%);
  --grad-fio: linear-gradient(90deg, var(--ciano), var(--magenta));

  /* Escala Fibonacci em rem (1rem = 16px): 2 · 3 · 5 · 8 · 13 · 21 · 34 · 55 · 89 · 144 px */
  --s-2: 0.125rem;
  --s-3: 0.1875rem;
  --s-5: 0.3125rem;
  --s-8: 0.5rem;
  --s-13: 0.8125rem;
  --s-21: 1.3125rem;
  --s-34: 2.125rem;
  --s-55: 3.4375rem;
  --s-89: 5.5625rem;
  --s-144: 9rem;

  /* Tipografia: mesma escala; títulos leves e grandes, corpo 1rem, entrelinha φ */
  --fonte: "Inter", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-21: 1.3125rem;
  --t-34: 2.125rem;
  --t-55: 3.4375rem;
  --t-h1: clamp(2.125rem, 1.2rem + 3.6vw, 3.4375rem);
  --t-h2: clamp(1.3125rem, 0.9rem + 2vw, 2.125rem);
  --t-h3: 1.3125rem;
  --t-lead: clamp(1rem, 0.9rem + 0.5vw, 1.3125rem);
  --altura-linha: 1.618;
  --peso-titulo: 350;

  /* Raios: hierarquia, não um raio só (fio = 0, campo = 8, bloco = 13, pílula = botões) */
  --r-5: 0.3125rem; --r-8: 0.5rem; --r-13: 0.8125rem; --r-21: 1.3125rem; --r-pilula: 999px;
  --sombra-2: 0 0.8125rem 2.125rem -0.8125rem rgba(0, 0, 0, 0.6);
  --brilho-marca: 0 0 0 1px rgba(191, 81, 232, 0.35), 0 0.8125rem 3.4375rem -0.8125rem rgba(191, 81, 232, 0.55);

  /* Movimento (ms Fibonacci) */
  --d-144: 144ms; --d-233: 233ms; --d-377: 377ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout: contêineres em % e min(), calha fluida */
  --calha: clamp(1.3125rem, 5%, 3.4375rem);
  --largura: 72rem;
  --largura-texto: 44.5rem;
  --alvo: 2.75rem; /* 44 px */
}

:root[data-theme="light"] {
  color-scheme: light;
  --fundo: #ffffff; --fundo-2: #f5f6fa;
  --superficie: #f7f8fc; --superficie-2: #eef0f7;
  --borda: #d6d9e5; --borda-forte: #a1a7bd;
  --texto: #161a32; --texto-2: #414863; --texto-3: #565e7a;
  --ciano: #00677b; --magenta: #8536a7;
  --ok: #006b52; --aviso: #785200; --pago: #71399b; --perigo: #a62438;
  --sombra-2: 0 .8125rem 2.125rem -.8125rem #161a3226;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --fundo: #ffffff; --fundo-2: #f5f6fa;
  --superficie: #f7f8fc; --superficie-2: #eef0f7;
  --borda: #d6d9e5; --borda-forte: #a1a7bd;
  --texto: #161a32; --texto-2: #414863; --texto-3: #565e7a;
  --ciano: #00677b; --magenta: #8536a7;
  --ok: #006b52; --aviso: #785200; --pago: #71399b; --perigo: #a62438;
  --sombra-2: 0 .8125rem 2.125rem -.8125rem #161a3226;
  }
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--fonte);
  line-height: var(--altura-linha);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: var(--s-89);
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-size: var(--t-16);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

h1, h2, h3, h4 { margin: 0 0 var(--s-13); line-height: 1.15; letter-spacing: -0.02em; font-weight: var(--peso-titulo); color: var(--texto); text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: var(--t-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 500; }
h4 { font-size: var(--t-16); font-weight: 600; }
p { margin: 0 0 var(--s-21); color: var(--texto-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--texto); text-decoration-thickness: 1px; text-underline-offset: 0.1875rem;  }
a:hover { color: var(--texto); }
strong { color: var(--texto); font-weight: 600; }
code { font-family: var(--fonte-mono); font-size: 0.875em; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-5); padding: 0.0625rem var(--s-5); color: var(--texto); overflow-wrap: anywhere; }
img, svg, canvas { max-width: 100%; height: auto; }
ul, ol { color: var(--texto-2); padding-left: var(--s-21); margin: 0 0 var(--s-21); }
li { margin-bottom: var(--s-8); }
hr { border: 0; border-top: 1px solid var(--borda); margin: var(--s-34) 0; }
::selection { background: rgba(191, 81, 232, 0.35); color: #fff; }

*:focus-visible { outline: 0.1875rem solid var(--ciano); outline-offset: 0.1875rem; border-radius: var(--r-5); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pular-link { position: absolute; top: -6.25rem; left: var(--s-13); z-index: 1000; background: var(--marinho-900); color: #fff; border: 1px solid var(--ciano); padding: var(--s-13) var(--s-21); border-radius: var(--r-8); font-weight: 600; text-decoration: none;  }
.pular-link:focus { top: var(--s-13); }

.container { width: min(100% - 2 * var(--calha), var(--largura)); margin-inline: auto; }
.estreito { max-width: var(--largura-texto); }

/* ── 3. Cabeçalho e navegação (menu mobile sem JS: <details>) ──────────────── */
.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s-13); min-height: 4.25rem; }

.marca { display: inline-flex; align-items: center; gap: var(--s-8); text-decoration: none; color: var(--texto); font-weight: 600; letter-spacing: -0.02em; font-size: var(--t-21); min-height: var(--alvo); }
.marca:hover { color: var(--texto); }
.marca svg { width: 2.125rem; height: 1.5625rem; flex-shrink: 0; color: var(--texto); transition: transform var(--d-377) var(--curva); }
.marca:hover svg { transform: rotate(-8deg) scale(1.05); }
.marca-nome { line-height: 1; white-space: nowrap; }
.marca-nome small { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--texto-3); margin-top: var(--s-3); }

.nav-principal { display: none; }
.nav-principal ul { display: flex; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.nav-principal li { margin: 0; }
.nav-principal a { position: relative; display: inline-flex; white-space: nowrap; align-items: center; min-height: var(--alvo); padding: 0 var(--s-13); color: var(--texto-2); font-size: var(--t-15); text-decoration: none; }
.nav-principal a::after { content: ""; position: absolute; left: var(--s-13); right: var(--s-13); bottom: var(--s-8); height: 1px; background: var(--grad-fio); transform: scaleX(0); transform-origin: left; transition: transform var(--d-377) var(--curva); }
.nav-principal a:hover { color: var(--texto); }
.nav-principal a:hover::after, .nav-principal a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principal a[aria-current="page"] { color: var(--texto); }

/* "Soluções": <details> nativo (abre sem JS); js/site.js só fecha ao clicar fora ou com Esc. */
.nav-grupo { position: relative; }
.nav-grupo summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-8); min-height: var(--alvo); padding: 0 var(--s-13); color: var(--texto-2); font-size: var(--t-15); cursor: pointer; user-select: none; white-space: nowrap; }
.nav-grupo summary::-webkit-details-marker { display: none; }
.nav-grupo summary::after { content: ""; width: 0.375rem; height: 0.375rem; border-right: 1.5px solid var(--ciano); border-bottom: 1.5px solid var(--ciano); transform: translateY(-0.125rem) rotate(45deg); transition: transform var(--d-233) var(--curva); }
.nav-grupo[open] summary::after { transform: translateY(0.125rem) rotate(225deg); }
.nav-grupo summary:hover, .nav-grupo[open] summary, .nav-grupo summary.atual, .nav-grupo summary:focus-visible { color: var(--texto); }
.nav-principal .nav-submenu { position: absolute; left: 0; top: calc(100% + var(--s-8)); display: grid; gap: 0; width: max-content; min-width: 17rem; padding: var(--s-8); background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: var(--r-13); box-shadow: var(--sombra-2); animation: aparecer var(--d-233) var(--curva); }
.nav-principal .nav-submenu a { display: flex; justify-content: space-between; gap: var(--s-8); padding: 0 var(--s-13); border-radius: var(--r-8); }
.nav-principal .nav-submenu a::after { display: none; }
.nav-principal .nav-submenu a:hover, .nav-principal .nav-submenu a[aria-current="page"] { background: var(--superficie-2); }
.nav-principal small, .menu-mobile-painel small { font-size: 0.75rem; color: var(--aviso); white-space: nowrap; }

.nav-acoes { display: none; align-items: center; gap: var(--s-8); }
/* Navegação completa só quando cabe numa linha (≥ 75rem); abaixo disso, o menu <details>. */
@media (min-width: 75rem) {
  .nav-principal, .nav-acoes { display: flex; }
  .menu-mobile { display: none; }
}

.menu-mobile { position: relative; }
.menu-mobile summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-8); min-height: var(--alvo); padding: 0 var(--s-21); border: 1px solid var(--borda-forte); border-radius: var(--r-pilula); color: var(--texto); font-weight: 500; cursor: pointer; user-select: none; }
.menu-mobile summary:hover, .menu-mobile summary:focus-visible { background: var(--superficie-2); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary .icone-menu { display: inline-grid; gap: 0.25rem; width: 1.125rem; }
.menu-mobile summary .icone-menu i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--d-233) var(--curva), opacity var(--d-144); }
.menu-mobile[open] summary .icone-menu i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-mobile[open] summary .icone-menu i:nth-child(2) { opacity: 0; }
.menu-mobile[open] summary .icone-menu i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-mobile-painel { position: absolute; right: 0; top: calc(100% + var(--s-8)); width: min(89vw, 23.5625rem); max-height: calc(100vh - 5.5625rem); overflow-y: auto; background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: var(--r-13); box-shadow: var(--sombra-2); padding: var(--s-8); animation: aparecer var(--d-233) var(--curva); }
.menu-mobile-painel ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile-painel li { margin: 0; }
.menu-mobile-painel li a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); min-height: var(--alvo); padding: 0 var(--s-13); border-radius: var(--r-8); color: var(--texto-2); text-decoration: none; }
.menu-mobile-painel li a:hover, .menu-mobile-painel li a[aria-current="page"] { color: var(--texto); background: var(--superficie-2); }
.menu-mobile-painel .menu-grupo { padding: var(--s-13) var(--s-13) var(--s-5); font-size: var(--t-13); color: var(--texto-3); }
.menu-mobile-painel .menu-acoes { display: grid; gap: var(--s-8); padding: var(--s-13) var(--s-8) var(--s-8); border-top: 1px solid var(--borda); margin-top: var(--s-8); }

/* ── 4. Botões (pílula; primário é o único bloco de cor cheia da página) ──── */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: var(--alvo); padding: 0 var(--s-21); border-radius: var(--r-pilula); font-weight: 500; font-size: var(--t-15); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform var(--d-233) var(--curva); }
.botao:hover { transform: translateY(-0.125rem); color: inherit; }
.botao:active { transform: translateY(0) scale(0.98); }
.botao-primario { background: var(--grad-marca); color: var(--sobre-marca); }
.botao-primario:hover { box-shadow: var(--brilho-marca); color: var(--sobre-marca); }
.botao-secundario { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
.botao-secundario:hover { background: var(--superficie-2); border-color: rgba(255, 255, 255, 0.32); }
.botao-claro { background: #fff; color: var(--marinho-900); }
.botao-claro:hover { background: #f1f0ff; color: var(--marinho-900); }
.botao-grande { min-height: var(--s-55); padding: 0 var(--s-34); font-size: var(--t-16); }
.botao-bloco { width: 100%; }

/* ── 5. Seções ─────────────────────────────────────────────────────────────── */
.secao { padding-block: var(--s-55); }
@media (min-width: 45rem) { .secao { padding-block: var(--s-89); } }
@media (min-width: 64rem) { .secao { padding-block: var(--s-144); } }
.secao-contraste { background: var(--fundo-2); }
.secao-cabecalho { max-width: var(--largura-texto); margin: 0 0 var(--s-34); }
.secao-cabecalho.centro { margin-inline: auto; text-align: center; }
.secao-cabecalho p { font-size: var(--t-lead); line-height: 1.55; }
@media (min-width: 45rem) { .secao-cabecalho { margin-bottom: var(--s-55); } }

/* Rótulo da seção: frase curta, sem caixa-alta, marcada pelo triângulo do logo */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-13); font-size: var(--t-15); font-weight: 500; color: var(--ciano); }
.eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); flex-shrink: 0; }
.centro .eyebrow::before { display: none; }

/* Um só destaque por página é o 3D da home: frases dentro do h1 não ganham cor própria */
.gradiente-texto { color: inherit; }

/* ── 6. Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: var(--s-34) var(--s-55); }
@media (min-width: 45rem) { .hero { padding-block: var(--s-89); } }
@media (min-width: 64rem) { .hero { padding-block: var(--s-144) var(--s-89); } }
.hero::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: min(140vw, 60rem); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(100, 56, 174, 0.26), rgba(0, 202, 242, 0.06) 62%, transparent); pointer-events: none; }
.hero > .container { position: relative; }
.hero-grid { display: grid; gap: var(--s-21); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-55); } }
.hero h1 { margin-bottom: var(--s-21); max-width: 18ch; }
.hero-texto { font-size: var(--t-lead); line-height: 1.55; max-width: 55ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--s-13); margin-top: var(--s-34); }
@media (max-width: 29.9375rem) { .hero-acoes .botao { flex: 1 1 100%; } }
.hero-notas { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-21); margin-top: var(--s-34); padding-top: var(--s-21); border-top: 1px solid var(--borda); color: var(--texto-3); font-size: var(--t-13); }
.hero-notas span { display: inline-flex; align-items: center; gap: var(--s-8); }
.hero-notas span::before { content: ""; width: 0.3125rem; height: 0.3125rem; background: var(--magenta); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Logo do hero: SVG estático (LCP e fallback); o canvas 3D entra por cima, na mesma caixa */
.hero-logo { position: relative; justify-self: center; width: min(61.8%, 23.5625rem); aspect-ratio: 377 / 276; order: -1; touch-action: pan-y; }
@media (min-width: 60rem) { .hero-logo { order: 0; width: min(100%, 31rem); } }
.hero-logo img { display: block; width: 100%; height: 100%;  transition: opacity var(--d-233) var(--curva); }
.hero-logo canvas { position: absolute; inset: -21%; width: 142%; max-width: none; height: 142%; opacity: 0; transition: opacity var(--d-233) var(--curva); cursor: grab; }
.hero-logo canvas:active { cursor: grabbing; }
.hero-logo.em-3d canvas { opacity: 1; }
.hero-logo.em-3d img { opacity: 0; }

.hero-compacto { padding-bottom: var(--s-21); }
@media (min-width: 64rem) { .hero-compacto { padding-block: var(--s-89) var(--s-34); } }
.hero-compacto h1 { max-width: 24ch; }

/* ── 7. Blocos: fio no topo em vez de caixa; o fio acende no hover ────────── */
.grade { display: grid; gap: var(--s-34) var(--s-34); }
.grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grade-2, .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade { gap: var(--s-55) var(--s-34); } .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cartao { position: relative; padding-top: var(--s-21); border-top: 1px solid var(--borda-forte); }
.cartao::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--grad-fio); transform: scaleX(0); transform-origin: left; transition: transform var(--d-233) var(--curva); }
.cartao:hover::before, .cartao:focus-within::before, .cartao:focus-visible::before { transform: scaleX(1); }
.cartao h3 { margin-bottom: var(--s-8); }
.cartao p { font-size: var(--t-15); }
.cartao p:last-child { margin: 0; }
.cartao-destaque { padding: var(--s-21); border: 1px solid rgba(191, 81, 232, 0.4); border-radius: var(--r-13); background: linear-gradient(180deg, rgba(100, 56, 174, 0.16), rgba(100, 56, 174, 0.03)); }
.cartao-destaque::before { display: none; }
.cartao-link { display: block; text-decoration: none; color: inherit; }
.cartao-link:hover { color: inherit; }
.cartao-link .seta { display: inline-flex; align-items: center; gap: var(--s-5); min-height: var(--alvo); margin-top: var(--s-5); color: var(--ciano); font-weight: 500; font-size: var(--t-15); transition: transform var(--d-377) var(--curva); }
.cartao-link:hover .seta, .cartao-link:focus-visible .seta { transform: translateX(var(--s-5)); }

.icone { display: inline-flex; align-items: center; justify-content: flex-start; width: var(--s-34); height: var(--s-34); color: var(--ciano); margin-bottom: var(--s-8); }
.icone svg { width: var(--s-21); height: var(--s-21); stroke-width: 1.5; }

/* Passos: sequência real, numerais leves */
.passos { counter-reset: passo; display: grid; gap: 0; padding: 0; list-style: none; }
.passo { counter-increment: passo; display: grid; grid-template-columns: var(--s-55) minmax(0, 1fr); gap: var(--s-13); padding-block: var(--s-21); border-top: 1px solid var(--borda); margin: 0; }
.passo:last-child { border-bottom: 1px solid var(--borda); }
.passo::before { content: counter(passo, decimal-leading-zero); font-size: var(--t-34); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--texto-3); font-variant-numeric: tabular-nums;  }
.passo:hover::before { color: var(--ciano); }
.passo h3 { font-size: var(--t-16); font-weight: 600; margin-bottom: var(--s-5); }
.passo p { font-size: var(--t-15); margin: 0; }
.passo > div { max-width: 55ch; }
@media (min-width: 45rem) { .passo { grid-template-columns: var(--s-89) minmax(0, 1fr); padding-block: var(--s-34); } }

.etiqueta { display: inline-flex; align-items: center; gap: var(--s-5); padding: 0 var(--s-8); border-radius: var(--r-pilula); font-size: 0.75rem; font-weight: 500; line-height: 1.6; vertical-align: 0.15em; border: 1px solid var(--borda-forte); color: var(--texto-2); white-space: nowrap; }
.etiqueta-ar { color: var(--ok); border-color: rgba(94, 234, 212, 0.4); }
.etiqueta-breve { color: var(--aviso); border-color: rgba(252, 211, 77, 0.4); }
.etiqueta-pago { color: var(--pago); border-color: rgba(191, 81, 232, 0.5); }

.lista-marcada { list-style: none; padding: 0; display: grid; gap: var(--s-8); }
.lista-marcada li { position: relative; padding-left: var(--s-21); }
.lista-marcada li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; background: var(--ciano); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Fluxo de estados (restaurante) */
.fluxo { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; list-style: none; padding: 0; margin: var(--s-21) 0; }
.fluxo li { margin: 0; padding: var(--s-5) var(--s-13); border: 1px solid var(--borda-forte); border-radius: var(--r-pilula); font-family: var(--fonte-mono); font-size: var(--t-13); color: var(--texto); overflow-wrap: anywhere; }
.fluxo li + li::before { content: "→"; margin-right: var(--s-8); color: var(--ciano); }

/* ── 8. Tabelas ────────────────────────────────────────────────────────────── */
.tabela-rolagem table { min-width: 34rem; }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-13); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-15); text-align: left; }
th, td { padding: var(--s-13) var(--s-21); border-bottom: 1px solid var(--borda); vertical-align: top; color: var(--texto-2); }
th { color: var(--texto); font-weight: 600; background: var(--superficie); }
tr:last-child td { border-bottom: 0; }
.col-marca { background: rgba(100, 56, 174, 0.12); color: var(--texto); }

/* ── 9. FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 0; max-width: 50rem; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--borda); }
.faq-item:last-child { border-bottom: 1px solid var(--borda); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-13); padding: var(--s-21) 0; min-height: var(--alvo); cursor: pointer; font-weight: 500; color: var(--texto);  }
.faq-item summary:hover, .faq-item summary:focus-visible { color: var(--texto); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex-shrink: 0; width: 0.5625rem; height: 0.5625rem; border-right: 1.5px solid var(--ciano); border-bottom: 1.5px solid var(--ciano); transform: rotate(45deg); transition: transform var(--d-377) var(--curva); margin-right: var(--s-5); }
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-conteudo { padding: 0 0 var(--s-21); color: var(--texto-2); font-size: var(--t-15); animation: aparecer var(--d-377) var(--curva); }

/* ── 10. Chamada final ─────────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; border-radius: var(--r-21); padding: var(--s-55) var(--s-21); text-align: center; background: linear-gradient(135deg, var(--marinho-900) 0%, var(--violeta) 62%, #8c3fc0 100%); }
@media (min-width: 45rem) { .cta { padding: var(--s-89) var(--s-55); } }
.cta::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 61.8%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0, 202, 242, 0.3), transparent 65%); pointer-events: none; }
.cta > * { position: relative; }
.cta h2 { color: #fff; margin-bottom: var(--s-13); }
.cta p { color: rgba(255, 255, 255, 0.9); max-width: 55ch; margin: 0 auto var(--s-34); font-size: var(--t-lead); line-height: 1.55; }
.cta .nota { display: block; margin-top: var(--s-21); color: rgba(255, 255, 255, 0.9); font-size: var(--t-13); }

/* ── 11. Rodapé ────────────────────────────────────────────────────────────── */
.rodape { border-top: 1px solid var(--borda); padding: var(--s-55) 0 var(--s-34); font-size: var(--t-15); }
.rodape-grade { display: grid; gap: var(--s-34); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rodape-sobre { grid-column: 1 / -1; }
@media (min-width: 45rem) { .rodape-grade { grid-template-columns: 1.618fr 1fr 1fr 1fr; } .rodape-sobre { grid-column: auto; } }
.rodape-sobre p { color: var(--texto-3); font-size: var(--t-13); margin-top: var(--s-13); max-width: 34ch; }
.rodape h4 { font-size: var(--t-13); font-weight: 500; color: var(--texto-3); margin-bottom: var(--s-8); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; }
.rodape li { margin: 0; }
.rodape ul a { display: inline-flex; align-items: center; min-height: var(--alvo); min-width: var(--alvo); color: var(--texto-2); text-decoration: none; }
.rodape ul a:hover { color: var(--texto); }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-13); margin-top: var(--s-55); padding-top: var(--s-21); border-top: 1px solid var(--borda); color: var(--texto-3); font-size: var(--t-13); }
.rodape-base p { margin: 0; color: inherit; }
.rodape-base a { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--texto-2); }

/* ── 12. Páginas de texto (termos, privacidade, sobre) ─────────────────────── */
.prosa { max-width: var(--largura-texto); }
.prosa h2 { font-size: var(--t-21); margin-top: var(--s-34); }
.prosa h3 { font-size: var(--t-16); margin-top: var(--s-21); }
.prosa p, .prosa li { color: var(--texto-2); }
.aviso { display: grid; gap: var(--s-5); padding: var(--s-21); border-radius: var(--r-13); border: 1px solid rgba(252, 211, 77, 0.45); background: rgba(252, 211, 77, 0.06); color: var(--texto); }
.aviso strong { color: var(--aviso); }
.aviso p { margin: 0; color: var(--texto-2); font-size: var(--t-15); }
.aviso-info { border-color: rgba(0, 202, 242, 0.45); background: rgba(0, 202, 242, 0.06); }
.aviso-info strong { color: var(--ciano); }

.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); margin-bottom: var(--s-13); font-size: var(--t-13); color: var(--texto-3); list-style: none; padding: 0; }
.trilha li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-8); }
.trilha li + li::before { content: "/"; color: var(--borda-forte); }
.trilha a { color: var(--texto-2); text-decoration: none; min-height: var(--alvo); min-width: var(--alvo); display: inline-flex; align-items: center; }

/* ── 13. Guia (/docs/) ─────────────────────────────────────────────────────── */
.docs-layout { display: grid; gap: var(--s-34); padding: var(--s-34) 0 var(--s-55); align-items: start; }
@media (min-width: 60rem) { .docs-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-55); } }
.docs-sidebar { border-top: 1px solid var(--borda-forte); padding-top: var(--s-13); }
@media (min-width: 60rem) { .docs-sidebar { position: sticky; top: var(--s-89); max-height: calc(100vh - 6.875rem); overflow-y: auto; } }
.docs-sidebar h3 { font-size: var(--t-13); font-weight: 500; color: var(--texto-3); margin-bottom: var(--s-8); }
.docs-sidebar ol { list-style: none; padding: 0; margin: 0; display: grid; }
.docs-sidebar li { margin: 0; }
.docs-sidebar a { display: flex; align-items: center; min-height: var(--alvo); padding: 0 var(--s-8); border-left: 1px solid var(--borda); color: var(--texto-2); text-decoration: none; font-size: var(--t-15);  }
.docs-sidebar a:hover { border-left-color: var(--ciano); color: var(--texto); }
.docs-conteudo { min-width: 0; display: grid; gap: var(--s-55); }
.docs-artigo { min-width: 0; padding-top: var(--s-21); border-top: 1px solid var(--borda-forte); scroll-margin-top: var(--s-89); }
.docs-passo-header { display: flex; align-items: center; gap: var(--s-13); margin-bottom: var(--s-21); }
.docs-passo-num { display: inline-flex; align-items: center; justify-content: center; width: var(--s-34); height: var(--s-34); border-radius: 50%; border: 1px solid var(--borda-forte); color: var(--ciano); font-weight: 500; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.docs-artigo h2 { font-size: var(--t-21); margin: 0; }
.docs-artigo h3 { font-size: var(--t-16); font-weight: 600; margin: var(--s-21) 0 var(--s-8); }
.docs-artigo p, .docs-artigo li { font-size: var(--t-15); }
.callout { padding: var(--s-13) var(--s-21); border-radius: 0 var(--r-8) var(--r-8) 0; border-left: 2px solid var(--ciano); background: rgba(0, 202, 242, 0.06); color: var(--texto-2); margin: var(--s-21) 0; font-size: var(--t-15); }
.callout-alerta { border-left-color: var(--aviso); background: rgba(252, 211, 77, 0.06); }
.callout-sucesso { border-left-color: var(--ok); background: rgba(94, 234, 212, 0.06); }
.exemplo-card { border: 1px solid var(--borda); border-radius: var(--r-13); padding: var(--s-21); margin: var(--s-21) 0; }
.exemplo-card h4 { margin-bottom: var(--s-13); }
.linha-calculo { display: flex; justify-content: space-between; gap: var(--s-13); padding: var(--s-8) 0; border-bottom: 1px dashed var(--borda-forte); font-size: var(--t-15); color: var(--texto-2); }
.linha-calculo:last-child { border-bottom: 0; font-weight: 600; color: var(--ok); padding-top: var(--s-13); }
.bloco-codigo { background: var(--fundo-2); color: var(--texto); border: 1px solid var(--borda); padding: var(--s-13) var(--s-21); border-radius: var(--r-8); font-family: var(--fonte-mono); font-size: var(--t-13); overflow-x: auto; margin: var(--s-13) 0; word-break: break-all; }
.badge-status { display: inline-block; padding: 0 var(--s-8); border-radius: var(--r-pilula); font-size: 0.75rem; font-weight: 500; border: 1px solid var(--borda-forte); }
.badge-pending { color: var(--aviso); }
.badge-active { color: var(--ok); }
.badge-suspended { color: var(--perigo); }
.badge-banned { color: var(--texto-3); }
.badge-breve { color: var(--pago); }
.docs-artigo .lista-faq { display: grid; gap: 0; }
.docs-artigo .faq-conteudo p { margin: 0; }
.faq-seta { display: none; }
.hero-subtitulo { font-size: var(--t-lead); line-height: 1.55; max-width: 55ch; }
.badge-tag { display: inline-flex; align-items: center; margin-bottom: var(--s-13); font-size: var(--t-15); font-weight: 500; color: var(--ciano); }

/* ── 14. Movimento ─────────────────────────────────────────────────────────── */
@keyframes aparecer { from { opacity: 0; transform: translateY(calc(-1 * var(--s-5))); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 15. Utilidades ────────────────────────────────────────────────────────── */
.mt-21 { margin-top: var(--s-21); }
.mt-34 { margin-top: var(--s-34); }
.centro-texto { text-align: center; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-13); }
.acoes.centro { justify-content: center; }
.nota { color: var(--texto-3); font-size: var(--t-13); }


.preferencias { display: flex; flex-wrap: wrap; gap: var(--s-13); padding-block: var(--s-21); }
.preferencias label { display: grid; gap: var(--s-5); color: var(--texto-2); font-size: var(--t-15); }
.preferencias select { min-height: var(--alvo); max-width: 100%; padding: var(--s-8) var(--s-13); border: 1px solid var(--borda-forte); border-radius: var(--r-8); background: var(--fundo); color: var(--texto); font: inherit; }