/* ==========================================================================
   Central de Ajuda + Desenvolvedores NexTags — visual
   --------------------------------------------------------------------------
   Mesmo sistema da UI 2.0 da V1 (src/css/00-tokens.css): Inter, cinzas
   neutros (R=G=B), painel branco com raio 20 sobre a moldura cinza, cartões
   com sombra leve e o azul NexTags #2E5BFF como destaque. No escuro, o
   ciano #00E9FF do portal de creators faz o papel do azul.
   ========================================================================== */

:root {
  color-scheme: light;
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --fundo: #f4f4f4;
  --painel: #ffffff;
  --cartao: #ffffff;
  --elevado: #ffffff;
  --afundado: #f7f7f7;
  --hover: #f5f5f5;
  --cinza-100: #f0f0f0;
  --cinza-150: #eaeaea;
  --cinza-200: #e3e3e3;
  --borda: #e7e7e7;
  --borda-forte: #d6d6d6;
  --divisoria: #efefef;
  --texto: #1a1a1a;
  --texto-2: #555555;
  --texto-3: #6e6e6e;
  --texto-desab: #adadad;

  --marca: #2e5bff;
  --marca-hover: #1f4af0;
  --marca-ativo: #183dd6;
  --marca-texto: #2349e6;
  --marca-suave: #edf2ff;
  --marca-borda: #d3defe;
  --marca-tinta: rgba(46, 91, 255, 0.06);
  --sobre-marca: #ffffff;
  --anel: rgba(46, 91, 255, 0.26);
  --destaque-fundo: #111318;
  --destaque-texto: #ffffff;
  --destaque-brilho: 0 0 0 1px rgba(46, 91, 255, 0.55), 0 18px 48px -18px rgba(46, 91, 255, 0.65);

  --sucesso: #0b8a55;  --sucesso-suave: #e6f6ee;  --sucesso-texto: #036b40;
  --aviso: #b26a0a;    --aviso-suave: #fef5e1;    --aviso-texto: #7a4a04;
  --erro: #e5484d;     --erro-suave: #fdeeee;     --erro-texto: #b42b2f;
  --info: #1f6fc8;     --info-suave: #ebf4fe;     --info-texto: #17589f;

  --cartao-sombra: 0 0 0 1px rgba(0, 0, 0, 0.055), 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
  --cartao-sombra-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04), 0 10px 24px -8px rgba(0, 0, 0, 0.12);
  --painel-sombra: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --sombra-md: 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 10px 24px -6px rgba(0, 0, 0, 0.13);
  --sombra-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 24px 48px -12px rgba(0, 0, 0, 0.22);
  --sombra-botao: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(46, 91, 255, 0.45);
  --veu: rgba(17, 17, 17, 0.42);

  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-2xl: 20px; --r-pilula: 999px;

  --topo-h: 60px;
  --abas-h: 46px;
  --moldura: 12px;
  --lateral-w: 280px;
  --indice-w: 224px;
  --leitura: 744px;

  --rapido: 120ms;
  --normal: 200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --metodo-get: #17589f;    --metodo-get-fundo: #ebf4fe;
  --metodo-post: #036b40;   --metodo-post-fundo: #e6f6ee;
  --metodo-delete: #b42b2f; --metodo-delete-fundo: #fdeeee;
  --metodo-put: #7a4a04;    --metodo-put-fundo: #fef5e1;
}

/* Escuro: cinzas neutros da V1 + ciano dos creators como destaque */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #1a1a1a;
  --painel: #222222;
  --cartao: #2a2a2a;
  --elevado: #2c2c2c;
  --afundado: #262626;
  --hover: #2d2d2d;
  --cinza-100: #303030;
  --cinza-150: #363636;
  --cinza-200: #3e3e3e;
  --borda: #333333;
  --borda-forte: #424242;
  --divisoria: #303030;
  --texto: #ededed;
  --texto-2: #b4b4b4;
  --texto-3: #939393;
  --texto-desab: #606060;

  --marca: #00e9ff;
  --marca-hover: #5cf3ff;
  --marca-ativo: #00c4d6;
  --marca-texto: #00e9ff;
  --marca-suave: rgba(0, 233, 255, 0.1);
  --marca-borda: rgba(0, 233, 255, 0.38);
  --marca-tinta: rgba(0, 233, 255, 0.05);
  --sobre-marca: #00161a;
  --anel: rgba(0, 233, 255, 0.32);
  --destaque-fundo: #10262b;
  --destaque-texto: #ffffff;
  --destaque-brilho: 0 0 0 1.5px #00e9ff, 0 0 32px rgba(0, 233, 255, 0.28);

  --sucesso: #34b87e;  --sucesso-suave: #1f3329;  --sucesso-texto: #8fdcb5;
  --aviso: #d99a2b;    --aviso-suave: #3a311d;    --aviso-texto: #efcc83;
  --erro: #ec6a6e;     --erro-suave: #3e2627;     --erro-texto: #f6aaa8;
  --info: #4a96e6;     --info-suave: #222d3a;     --info-texto: #a3cffd;

  --cartao-sombra: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  --cartao-sombra-hover: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  --painel-sombra: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --sombra-md: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sombra-lg: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --sombra-botao: 0 0 0 1px rgba(0, 233, 255, 0.4), 0 6px 18px -6px rgba(0, 233, 255, 0.45);
  --veu: rgba(0, 0, 0, 0.6);

  --metodo-get: #a3cffd;    --metodo-get-fundo: #222d3a;
  --metodo-post: #8fdcb5;   --metodo-post-fundo: #1f3329;
  --metodo-delete: #f6aaa8; --metodo-delete-fundo: #3e2627;
  --metodo-put: #efcc83;    --metodo-put-fundo: #3a311d;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + var(--abas-h) + 16px); }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
a { color: var(--marca-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0; }
kbd {
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-3);
  background: var(--painel);
  border: 1px solid var(--borda);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  line-height: 1.5;
}
.ic { width: 18px; height: 18px; flex: none; }
.marca { width: 18px; height: 18px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -40px; z-index: 100; background: var(--marca); color: var(--sobre-marca); padding: 8px 14px; border-radius: var(--r-md); }
.pular:focus { top: 10px; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--r-pilula);
  border: 1px solid var(--borda-forte);
  background: var(--painel);
  color: var(--texto);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.botao:hover { text-decoration: none; background: var(--hover); }
.botao .ic { width: 16px; height: 16px; }
.botao-primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); box-shadow: var(--sombra-botao); }
.botao-primario:hover { background: var(--marca-hover); border-color: var(--marca-hover); }
.botao-grande { height: 46px; padding: 0 22px; font-size: 15px; }
.botao-icone {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-pilula);
  border: 0; background: transparent; color: var(--texto-2);
  transition: background var(--rapido), color var(--rapido);
}
.botao-icone:hover { background: var(--hover-menu, rgba(0, 0, 0, 0.05)); color: var(--texto); }
:root[data-tema="escuro"] .botao-icone:hover { background: rgba(255, 255, 255, 0.07); }
.botao-icone .ic { width: 19px; height: 19px; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  height: var(--topo-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px 0 24px;
  background: var(--fundo);
}
.topo-esq { display: flex; align-items: center; gap: 18px; min-width: 0; flex: none; }
.topo-dir { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.topo-menu { display: none; }
.logo { display: block; flex: none; }
.logo img { height: 21px; width: auto; }
.logo-escuro { display: none !important; }
:root[data-tema="escuro"] .logo-claro { display: none !important; }
:root[data-tema="escuro"] .logo-escuro { display: block !important; }

.troca {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--r-pilula);
  background: var(--cinza-150);
}
.troca-item {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px 0 11px;
  border-radius: var(--r-pilula);
  color: var(--texto-2); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.troca-item .ic { width: 16px; height: 16px; }
.troca-item:hover { text-decoration: none; color: var(--texto); }
.troca-item.ativo { background: var(--painel); color: var(--texto); box-shadow: var(--cartao-sombra); }
.troca-item.ativo .ic { color: var(--marca); }

.topo-busca {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 440px; min-width: 180px; margin: 0 auto; height: 40px; padding: 0 8px 0 14px;
  border-radius: var(--r-pilula);
  border: 1px solid var(--borda);
  background: var(--painel);
  color: var(--texto-3); font-size: 14px; text-align: left;
  box-shadow: var(--cartao-sombra);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.topo-busca:hover { border-color: var(--borda-forte); box-shadow: var(--cartao-sombra-hover); }
.topo-busca span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-busca kbd { flex: none; }
.topo-busca .ic { width: 17px; height: 17px; }
.tema-claro-ic, .tema-escuro-ic { display: none; }
:root:not([data-tema="escuro"]) .tema-escuro-ic { display: block; }
:root[data-tema="escuro"] .tema-claro-ic { display: block; }

/* ---------- abas das seções ---------- */
.abas {
  position: sticky; top: var(--topo-h); z-index: 39;
  height: var(--abas-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px;
  background: var(--fundo);
}
.abas-lista { display: flex; align-items: stretch; gap: 4px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.abas-lista::-webkit-scrollbar { display: none; }
.aba {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px;
  color: var(--texto-2); font-size: 14px; font-weight: 550; white-space: nowrap;
  border-radius: var(--r-md);
}
.aba .ic { width: 17px; height: 17px; color: var(--texto-3); }
.aba:hover { text-decoration: none; color: var(--texto); }
.aba:hover .ic { color: var(--texto-2); }
.aba.ativo { color: var(--texto); font-weight: 600; }
.aba.ativo .ic { color: var(--marca); }
.aba.ativo::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--marca);
}
.aba-externa .seta { width: 14px; height: 14px; color: var(--texto-3); }
.abas-extra { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.abas-extra .ic { width: 16px; height: 16px; }
.abas-extra:hover { color: var(--texto); text-decoration: none; }

/* ---------- casca: lateral + painel ---------- */
.casca {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--moldura);
  padding: 0 var(--moldura) var(--moldura);
  min-height: calc(100vh - var(--topo-h) - var(--abas-h));
}
.casca.com-lateral { grid-template-columns: var(--lateral-w) minmax(0, 1fr); padding-left: 0; }
.painel {
  min-width: 0;
  background: var(--painel);
  border-radius: var(--r-2xl);
  box-shadow: var(--painel-sombra);
  display: flex; flex-direction: column;
}
.painel > .pagina, .painel > .inicio { flex: 1; }

.lateral {
  position: sticky; top: calc(var(--topo-h) + var(--abas-h));
  align-self: start;
  height: calc(100vh - var(--topo-h) - var(--abas-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 12px 28px 16px;
  scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent;
}
.arvore { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.arvore-titulo { padding: 6px 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.arvore a, .arvore summary { color: var(--texto-2); border-radius: var(--r-md); }
.arvore a:hover, .arvore summary:hover { color: var(--texto); background: rgba(0, 0, 0, 0.045); text-decoration: none; }
:root[data-tema="escuro"] .arvore a:hover, :root[data-tema="escuro"] .arvore summary:hover { background: rgba(255, 255, 255, 0.06); }
.arvore-inicio { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-weight: 550; }
.arvore-inicio .ic { width: 17px; height: 17px; color: var(--texto-3); }
.arvore-inicio.ativo { color: var(--texto); background: var(--painel); box-shadow: var(--cartao-sombra); }
.grupo { margin-top: 2px; }
.grupo > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px; font-weight: 550; color: var(--texto);
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo-icone {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--painel); box-shadow: var(--cartao-sombra); color: var(--texto-2);
}
.grupo-icone .ic, .grupo-icone .marca { width: 15px; height: 15px; }
.grupo > summary .seta { margin-left: auto; width: 15px; height: 15px; color: var(--texto-3); transition: transform var(--normal) var(--ease); }
.grupo[open] > summary .seta { transform: rotate(90deg); }
.grupo.atual > summary .grupo-icone { color: var(--marca); }
.grupo-itens { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 18px; padding-left: 10px; border-left: 1px solid var(--borda); }
.subgrupo { padding: 10px 10px 3px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.item { display: block; padding: 5px 10px; line-height: 1.4; font-size: 13.5px; }
.item.ativo, .arvore a.item.ativo:hover {
  color: var(--marca-texto); background: var(--marca-suave); font-weight: 600;
}
.item-metodo { display: flex; align-items: flex-start; gap: 8px; }
.item-metodo .metodo { flex: none; margin-top: 0; }
.item-metodo span:last-child { min-width: 0; }

/* ---------- página com índice ---------- */
.pagina {
  display: grid;
  grid-template-columns: minmax(0, var(--leitura)) var(--indice-w);
  justify-content: center;
  gap: 56px;
  padding: 36px 48px 56px;
}
.pagina.sem-indice { grid-template-columns: minmax(0, 960px); }
.pagina.larga { grid-template-columns: minmax(0, 1080px); }
.artigo { min-width: 0; }
.indice { min-width: 0; }
.indice-fixo { position: sticky; top: calc(var(--topo-h) + var(--abas-h) + 28px); display: flex; flex-direction: column; gap: 20px; }
.indice-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 8px; }
.indice-titulo .ic { width: 15px; height: 15px; color: var(--texto-3); }
.indice-lista { display: flex; flex-direction: column; border-left: 1px solid var(--borda); }
.indice-lista a { margin-left: -1px; padding: 4px 0 4px 13px; border-left: 2px solid transparent; color: var(--texto-3); font-size: 13px; line-height: 1.45; }
.indice-lista a.nivel-3 { padding-left: 25px; }
.indice-lista a:hover { color: var(--texto); text-decoration: none; }
.indice-lista a.ativo { color: var(--marca-texto); border-left-color: var(--marca); font-weight: 550; }

.cartao-ajuda {
  padding: 14px 16px; border-radius: var(--r-xl);
  background: var(--afundado); border: 1px solid var(--borda);
  font-size: 13px; color: var(--texto-2);
}
.cartao-ajuda strong { display: block; color: var(--texto); font-size: 13.5px; margin-bottom: 4px; }
.cartao-ajuda a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; font-size: 13px; }
.cartao-ajuda a .ic { width: 15px; height: 15px; }

/* ---------- cabeçalho do artigo ---------- */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 14px; font-size: 13px; color: var(--texto-3); }
.migalhas a { color: var(--texto-3); }
.migalhas a:hover { color: var(--texto); }
.migalhas .ic { width: 14px; height: 14px; color: var(--texto-desab); }
.artigo-topo h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.18; text-wrap: balance; }
.artigo-topo .lead { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--texto-2); max-width: 680px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pilula);
  background: var(--cinza-100); color: var(--texto-2);
  font-size: 12.5px; font-weight: 550; white-space: nowrap;
}
.chip .ic { width: 14px; height: 14px; }
.chip .marca { width: 14px; height: 14px; }
.chip-marca { background: var(--marca-suave); color: var(--marca-texto); }
.chip-canais { gap: 4px; padding: 0 8px; background: transparent; border: 1px solid var(--borda); }
.nivel { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.nivel i { width: 3px; border-radius: 1px; background: var(--borda-forte); }
.nivel i:nth-child(1) { height: 5px; } .nivel i:nth-child(2) { height: 8px; } .nivel i:nth-child(3) { height: 11px; }
.nivel-1 i:nth-child(-n+1), .nivel-2 i:nth-child(-n+2), .nivel-3 i:nth-child(-n+3) { background: var(--marca); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--divisoria); }
.acoes .atualizado { margin-left: auto; font-size: 12.5px; color: var(--texto-3); }

/* menu Copiar página / Abrir no ChatGPT / Claude */
.copiar { position: relative; display: inline-flex; }
.copiar > button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--borda-forte); background: var(--painel); color: var(--texto);
  font-size: 13px; font-weight: 600;
  transition: background var(--rapido);
}
.copiar > button:hover { background: var(--hover); }
.copiar > button .ic { width: 15px; height: 15px; }
.copiar-botao { border-radius: var(--r-pilula) 0 0 var(--r-pilula); }
.copiar-seta { border-left: 0 !important; border-radius: 0 var(--r-pilula) var(--r-pilula) 0; padding: 0 10px !important; }
.copiar-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 290px; padding: 6px;
  background: var(--elevado); border-radius: var(--r-lg); box-shadow: var(--sombra-lg);
}
.copiar-menu[hidden] { display: none; }
.copiar-menu a, .copiar-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--texto); text-align: left;
}
.copiar-menu a:hover, .copiar-menu button:hover { background: var(--hover); text-decoration: none; }
.copiar-menu .tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--borda); background: var(--painel); color: var(--texto-2); }
.copiar-menu .tile .ic, .copiar-menu .tile .marca { width: 16px; height: 16px; }
.copiar-menu strong { display: block; font-size: 13.5px; font-weight: 600; }
.copiar-menu small { display: block; font-size: 12px; color: var(--texto-3); line-height: 1.35; }
.copiar-menu .fora { margin-left: auto; width: 14px; height: 14px; color: var(--texto-3); }
.copiar-menu hr { border: 0; border-top: 1px solid var(--divisoria); margin: 6px 4px; }
:root[data-tema="escuro"] .copiar-menu .marca path[fill="#000000"], :root[data-tema="escuro"] .marca-ia path { fill: currentColor; }

/* ---------- corpo do artigo ---------- */
.corpo { margin-top: 28px; }
.corpo > * + * { margin-top: 18px; }
.corpo h2 { margin-top: 44px; font-size: 23px; font-weight: 680; display: flex; align-items: center; gap: 12px; }
.corpo h3 { margin-top: 28px; font-size: 17.5px; font-weight: 650; }
.corpo p, .corpo li { font-size: 15.5px; line-height: 1.7; color: var(--texto); overflow-wrap: break-word; }
.corpo h2 .num {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--marca); color: var(--sobre-marca);
  font-size: 14px; font-weight: 700; letter-spacing: 0;
}
.ancora { opacity: 0; color: var(--texto-3); transition: opacity var(--rapido); }
.ancora .ic { width: 16px; height: 16px; }
h3 > .ancora { display: inline-flex; vertical-align: -2px; margin-left: 8px; }
.corpo h2:hover .ancora, .corpo h3:hover .ancora { opacity: 1; }

/* esqueleto: o lugar do texto que ainda vai ser escrito */
.esq { display: flex; flex-direction: column; gap: 10px; }
.esq i { display: block; height: 11px; border-radius: 6px; background: var(--cinza-100); }
.esq i:nth-child(4n+1) { width: 100%; } .esq i:nth-child(4n+2) { width: 94%; }
.esq i:nth-child(4n+3) { width: 86%; } .esq i:nth-child(4n) { width: 62%; }
.esq.curto i:last-child { width: 44%; }
.esq-titulo { display: block; width: 46%; height: 14px; border-radius: 7px; background: var(--cinza-150); }

.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-xl);
  background: var(--afundado); border: 1px solid var(--borda);
  font-size: 14px; color: var(--texto-2);
}
.aviso > .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--texto-3); }
.aviso strong { color: var(--texto); font-weight: 600; }
.aviso-producao { background: var(--marca-tinta); border-color: var(--marca-borda); }
.aviso-producao > .ic { color: var(--marca); }
.aviso-dica { background: var(--sucesso-suave); border-color: transparent; color: var(--sucesso-texto); }
.aviso-dica > .ic, .aviso-dica strong { color: var(--sucesso-texto); }
.aviso-atencao { background: var(--aviso-suave); border-color: transparent; color: var(--aviso-texto); }
.aviso-atencao > .ic, .aviso-atencao strong { color: var(--aviso-texto); }
.aviso .esq { flex: 1; margin-top: 4px; }
.aviso-atencao .esq i, .aviso-dica .esq i { background: currentColor; opacity: 0.16; }

.caixa-antes {
  padding: 18px 20px; border-radius: var(--r-xl);
  background: var(--cartao); box-shadow: var(--cartao-sombra);
}
.caixa-antes h2 { margin: 0 0 14px !important; font-size: 15px !important; font-weight: 650 !important; gap: 10px !important; }
.caixa-antes h2 .ic { width: 18px; height: 18px; color: var(--marca); }
.requisitos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.requisitos li { display: flex; align-items: center; gap: 10px; }
.requisitos li .ic { width: 17px; height: 17px; color: var(--sucesso); }
.requisitos li .esq { flex: 1; }

/* resposta rápida (topo do tutorial) e "Faça com a IA" (fim) */
.resposta-rapida { padding: 14px 18px 16px; border-radius: var(--r-xl); background: var(--afundado); border-left: 3px solid var(--marca); }
.resposta-rapida .rr-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 650; color: var(--marca-texto); }
.resposta-rapida .rr-titulo .ic { width: 15px; height: 15px; }
.faca-ia { margin-top: 36px !important; padding: 18px 20px; border-radius: var(--r-xl); background: var(--cartao); box-shadow: var(--cartao-sombra); display: flex; flex-direction: column; gap: 14px; }
.faca-ia-topo { display: flex; gap: 14px; align-items: flex-start; }
.faca-ia-topo .tile { margin: 0; }
.faca-ia h2 { margin: 0 !important; font-size: 16.5px !important; }
.faca-ia-topo p { margin-top: 4px; font-size: 13.5px !important; color: var(--texto-2) !important; line-height: 1.5 !important; }
.faca-ia-pedido { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--afundado); border: 1px dashed var(--borda-forte); }
.faca-ia-pedido .esq { flex: 1; }
.faca-ia-pedido .botao { height: 32px; font-size: 12.5px; }
.faca-ia-pedido .botao[disabled] { opacity: 0.6; cursor: not-allowed; }

/* lugar do print (imagem que entra depois, em tons do azul da marca) */
.print { margin-inline: 0; margin-bottom: 0; }
.corpo > .print:first-child, .passo-corpo > .print { margin-top: 0; }
.print-moldura {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 1px 1px, var(--marca-borda) 1px, transparent 0) 0 0 / 18px 18px,
    var(--marca-tinta);
  border: 1px solid var(--marca-borda);
  display: grid; place-items: center;
}
.print-janela {
  width: 72%; height: 70%;
  border-radius: 12px; background: var(--painel);
  box-shadow: var(--sombra-md);
  display: grid; grid-template-columns: 22% 1fr; overflow: hidden;
}
.print-janela .pj-lateral { background: var(--fundo); padding: 10% 10%; display: flex; flex-direction: column; gap: 8%; }
.print-janela .pj-lateral i { height: 6px; border-radius: 3px; background: var(--cinza-200); }
.print-janela .pj-lateral i:first-child { background: var(--marca); width: 70%; }
.print-janela .pj-corpo { padding: 6% 7%; display: flex; flex-direction: column; gap: 9%; }
.print-janela .pj-corpo i { height: 8px; border-radius: 4px; background: var(--cinza-150); }
.print-janela .pj-corpo i:nth-child(1) { width: 40%; height: 10px; background: var(--cinza-200); }
.print-janela .pj-corpo i:nth-child(3) { width: 80%; }
.print-janela .pj-corpo i:nth-child(4) { width: 64%; }
.print-janela .pj-corpo b { margin-top: auto; align-self: flex-end; width: 26%; height: 14px; border-radius: 7px; background: var(--marca); }
.print-rotulo {
  position: absolute; left: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pilula);
  background: var(--painel); box-shadow: var(--cartao-sombra);
  font-size: 12px; font-weight: 600; color: var(--texto-2);
}
.print-rotulo .ic { width: 14px; height: 14px; color: var(--marca); }
.etapa-nota { font-size: 13.5px; color: var(--texto-2); }
.etapa-nota a { color: var(--marca); }
.print figcaption { margin-top: 10px; font-size: 13px; color: var(--texto-3); text-align: center; }
.print-fonte { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texto-3); opacity: 0.85; }
.print-fonte a { color: inherit; text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 2px; }

/* ---------- conteúdo escrito (tema/markdown.mjs) ---------- */
.corpo ul, .corpo ol { margin-bottom: 0; padding-left: 22px; }
.passo-corpo > :is(ul, ol) { margin-top: 0; }
.corpo li + li { margin-top: 6px; }
.corpo li::marker { color: var(--texto-3); }
.corpo ol > li::marker { font-weight: 650; color: var(--marca-texto); }
.corpo strong { font-weight: 640; }
.corpo code { font-family: var(--fonte-mono); font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: var(--afundado); border: 1px solid var(--borda); }
.corpo kbd { font-size: 12px; color: var(--texto); padding: 0 7px; vertical-align: 1px; }
.corpo .resposta-rapida p { font-size: 15px; line-height: 1.65; }
.corpo .resposta-rapida p + p { margin-top: 8px; }
.aviso > div { flex: 1; min-width: 0; }
.aviso > div > * + * { margin-top: 8px; }
.corpo .aviso .aviso-titulo { font-weight: 650; }
.aviso > div > .aviso-titulo + * { margin-top: 2px; }
.corpo .aviso p, .corpo .aviso li { font-size: 14px; line-height: 1.6; color: inherit; }
.caixa-antes .requisitos li { align-items: flex-start; font-size: 15px; line-height: 1.55; }
.caixa-antes .requisitos li .ic { margin-top: 3px; }
.tabela { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--borda); }
.tabela table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12.5px; font-weight: 640; color: var(--texto-2); background: var(--afundado); white-space: nowrap; }
.tabela th, .tabela td { padding: 10px 14px; border-bottom: 1px solid var(--divisoria); vertical-align: top; line-height: 1.55; }
.tabela tr:last-child td { border-bottom: 0; }
pre.codigo { margin: 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--destaque-fundo); color: #e6e6e6; font: 13px/1.6 var(--fonte-mono); overflow-x: auto; }
pre.codigo code { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
.bloco-codigo { position: relative; }
.bloco-codigo pre.codigo { padding-right: 48px; }
.bloco-codigo .copiar-codigo { position: absolute; top: 8px; right: 8px; opacity: 0.7; }
.bloco-codigo:hover .copiar-codigo, .copiar-codigo:focus-visible { opacity: 1; }
/* realce do código (os painéis são sempre escuros) */
.tk-c { color: #7f8aa3; font-style: italic; }
.tk-s { color: #b5e08b; }
.tk-k { color: #8ec5ff; }
.tk-n { color: #f5a97f; }
.tk-p { color: #d4a6ff; }
.tk-f { color: #7fe0e8; }
.tk-v { color: #ffd479; }
/* o print aparece no tamanho real da tela (o arquivo é 2x) e só encolhe se não couber */
.print-zoom { display: block; width: fit-content; max-width: 100%; margin-inline: auto; overflow: hidden; border-radius: var(--r-lg); background: var(--painel); box-shadow: 0 0 0 1px var(--borda), var(--sombra-md); cursor: zoom-in; }
.print-zoom img { max-width: 100%; height: auto; }
.print-zoom:focus-visible { outline-offset: 3px; }
.sintoma { padding: 16px 18px; border-radius: var(--r-xl); background: var(--cartao); box-shadow: var(--cartao-sombra); }
.corpo .sintoma + .sintoma { margin-top: 12px; }
.sintoma > * + * { margin-top: 8px; }
.corpo .sintoma h3 { margin: 0 !important; display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.sintoma h3 > .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--aviso); }
.corpo .sintoma p, .corpo .sintoma li { font-size: 14.5px; line-height: 1.6; }
.corpo .faca-ia-pedido .pedido { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--texto); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .passo-corpo > .print { margin-left: -44px; } /* no celular o print usa a largura toda, sem o recuo do número */
  .faca-ia-pedido { flex-direction: column; align-items: stretch; }
  .faca-ia-pedido .botao { justify-content: center; }
}
.zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--veu); cursor: zoom-out; }
.zoom img { max-width: min(1600px, 100%); max-height: 100%; width: auto; height: auto; border-radius: var(--r-lg); background: var(--painel); box-shadow: var(--sombra-lg); }

/* passo numerado (tutorial) */
.passo { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; margin-top: 30px; }
.passo-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-size: 14px; font-weight: 700; }
.passo-corpo { display: flex; flex-direction: column; gap: 14px; padding-top: 3px; }
.passo-corpo h3 { margin: 0 !important; font-size: 17px; }

/* cartões de link (relacionados, áreas, trilhas) */
.grade { display: grid; gap: 14px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartao {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: var(--r-xl);
  background: var(--cartao); box-shadow: var(--cartao-sombra);
  color: var(--texto);
  transition: box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease);
}
a.cartao:hover { text-decoration: none; box-shadow: var(--cartao-sombra-hover); transform: translateY(-1px); }
.cartao h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.corpo .cartao h3, .corpo .etapa-cartao h3, .corpo .cartao-link h3 { margin-top: 0; }
.cartao p { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.cartao .rodape-cartao { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--texto-3); }
.cartao .rodape-cartao .ic { width: 14px; height: 14px; }
.cartao .ir { position: absolute; top: 18px; right: 16px; width: 16px; height: 16px; color: var(--texto-desab); transition: color var(--rapido), transform var(--rapido); }
a.cartao:hover .ir { color: var(--marca); transform: translateX(2px); }
.tile {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--painel); box-shadow: var(--cartao-sombra); color: var(--marca);
}
.tile .ic { width: 20px; height: 20px; }
.tile .marca { width: 20px; height: 20px; }
.tile-azul { background: var(--marca-suave); box-shadow: none; }
.cartao .tile { margin-bottom: 8px; }
.cartao-link { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.cartao-link .ic.tipo { width: 18px; height: 18px; color: var(--texto-3); }
.cartao-link h3 { font-size: 14.5px; }
.cartao-link small { display: block; font-size: 12.5px; color: var(--texto-3); }
.cartao-link .ir { position: static; margin-left: auto; }

.secao-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.corpo > .secao-titulo:not(:first-child) { margin-top: 40px; }
.metodos .conta-metodo { font-size: 11.5px; font-weight: 600; color: var(--texto-3); margin: 0 6px 0 -1px; align-self: center; }
.secao-titulo h2 { font-size: 21px; font-weight: 680; margin: 0 !important; }
.secao-titulo p { margin-top: 4px; color: var(--texto-2); font-size: 14.5px; }
.secao-titulo a { font-size: 13.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.secao-titulo a .ic { width: 15px; height: 15px; }

/* ajudou? + anterior/próximo */
.ajudou {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 48px; padding: 16px 18px;
  border-radius: var(--r-xl); background: var(--afundado);
}
.ajudou p { font-weight: 600; font-size: 14.5px; margin-right: auto; }
.ajudou button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--r-pilula);
  border: 1px solid var(--borda-forte); background: var(--painel); font-size: 13.5px; font-weight: 600;
}
.ajudou button:hover { border-color: var(--marca); color: var(--marca-texto); }
.ajudou button .ic { width: 16px; height: 16px; }
.ajudou.respondido button { display: none; }
.ajudou-obrigado { display: none; color: var(--sucesso-texto); font-size: 14px; font-weight: 600; }
.ajudou.respondido .ajudou-obrigado { display: inline-flex; align-items: center; gap: 6px; }

.vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.vizinho {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: var(--r-xl);
  border: 1px solid var(--borda); color: var(--texto);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.vizinho:hover { text-decoration: none; border-color: var(--marca-borda); box-shadow: var(--cartao-sombra); }
.vizinho small { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 12.5px; }
.vizinho small .ic { width: 14px; height: 14px; }
.vizinho span { font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.vizinho.proximo { text-align: right; align-items: flex-end; grid-column: 2; }

/* ---------- início (home) ---------- */
.inicio { padding: 0 0 32px; }
.heroi {
  position: relative; overflow: hidden;
  padding: 64px 48px 56px; text-align: center;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, var(--marca-tinta), transparent 70%),
    var(--painel);
  border-bottom: 1px solid var(--divisoria);
}
.heroi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, var(--borda) 1px, transparent 0) 0 0 / 22px 22px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.7;
}
.heroi > * { position: relative; }
.heroi-selo {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px 0 6px; border-radius: var(--r-pilula);
  background: var(--painel); box-shadow: var(--cartao-sombra);
  font-size: 13px; font-weight: 600; color: var(--texto-2);
}
.heroi-selo .canais { display: inline-flex; }
.heroi-selo .canais span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--painel); box-shadow: 0 0 0 2px var(--painel); margin-left: -5px; }
.heroi-selo .canais span:first-child { margin-left: 0; }
.heroi-selo .canais .marca { width: 14px; height: 14px; }
.heroi h1 { margin: 18px auto 0; max-width: 760px; font-size: 48px; font-weight: 720; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.heroi h1 em { font-style: normal; color: var(--marca); }
.heroi > p { margin: 16px auto 0; max-width: 600px; font-size: 17px; color: var(--texto-2); }
.heroi-busca {
  display: flex; align-items: center; gap: 12px;
  width: min(640px, 100%); height: 58px; margin: 30px auto 0; padding: 0 10px 0 20px;
  border-radius: var(--r-pilula); border: 1px solid var(--borda-forte);
  background: var(--painel); box-shadow: var(--sombra-md);
  color: var(--texto-3); font-size: 16px; text-align: left;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.heroi-busca:hover { border-color: var(--marca-borda); box-shadow: var(--sombra-lg); }
.heroi-busca .ic { width: 20px; height: 20px; color: var(--texto-2); }
.heroi-busca > span:not(.botao) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heroi-busca .botao { flex: none; height: 40px; pointer-events: none; }
.populares { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 760px; }
.populares > span { font-size: 13px; color: var(--texto-3); align-self: center; margin-right: 2px; }
.populares a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: var(--r-pilula);
  background: var(--painel); border: 1px solid var(--borda);
  color: var(--texto-2); font-size: 13px; font-weight: 550;
}
.populares a:hover { text-decoration: none; border-color: var(--marca-borda); color: var(--marca-texto); }
.populares a .ic, .populares a .marca { width: 14px; height: 14px; }

.faixa { padding: 44px 48px 0; max-width: 1240px; margin: 0 auto; width: 100%; }
.cartao-area { min-height: 168px; }
.problemas { padding: 22px 24px; border-radius: var(--r-2xl); background: var(--afundado); border: 1px solid var(--borda); }
.problemas-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.problemas-topo h2 { font-size: 19px; font-weight: 680; }
.problemas-topo p { margin-top: 2px; font-size: 14px; color: var(--texto-2); }
.problemas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.problemas-lista a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-lg); background: var(--cartao); box-shadow: var(--cartao-sombra); color: var(--texto); font-size: 14px; font-weight: 550; }
.problemas-lista a:hover { text-decoration: none; box-shadow: var(--cartao-sombra-hover); }
.problemas-lista a > .ic:first-child, .problemas-lista a > .marca { width: 17px; height: 17px; color: var(--texto-3); flex: none; }
.problemas-lista a span { flex: 1; min-width: 0; }
.problemas-lista a .ir { width: 15px; height: 15px; color: var(--texto-desab); flex: none; }
.cartao-area .conta { margin-top: auto; padding-top: 12px; font-size: 12.5px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; }

.cartao-trilha { gap: 10px; }
.cartao-trilha .trilha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cartao-trilha .canais-mini { display: inline-flex; gap: 4px; }
.cartao-trilha .canais-mini .marca { width: 16px; height: 16px; }
.passos-mini { display: flex; gap: 4px; margin-top: auto; padding-top: 6px; }
.passos-mini i { flex: 1; height: 4px; border-radius: 2px; background: var(--cinza-150); }
.passos-mini i:first-child { background: var(--marca); }

.cartao-segmento { padding: 0; overflow: hidden; }
.cartao-segmento .imagem {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 1px 1px, var(--marca-borda) 1px, transparent 0) 0 0 / 16px 16px,
    linear-gradient(135deg, var(--marca-suave), var(--marca-tinta));
  display: grid; place-items: center; color: var(--marca);
  border-bottom: 1px solid var(--divisoria);
}
.cartao-segmento .imagem .ic { width: 34px; height: 34px; opacity: 0.85; }
.cartao-segmento .texto { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }

.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.logos-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.logo-tile > span:last-child { min-width: 0; }
.logo-tile > span:last-child { line-height: 1.3; }
.logo-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logos [hidden] { display: none; }
.logo-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--cartao); box-shadow: var(--cartao-sombra);
  color: var(--texto); font-size: 13.5px; font-weight: 600;
}
a.logo-tile:hover { text-decoration: none; box-shadow: var(--cartao-sombra-hover); }
.logo-tile .logo-img { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); flex: none; overflow: hidden; }
.logo-tile .logo-img img { width: 22px; height: 22px; object-fit: contain; }
.logo-tile .logo-img .marca { width: 18px; height: 18px; }
.logo-tile .logo-img.letra { background: var(--marca-suave); color: var(--marca-texto); font-weight: 700; font-size: 13px; box-shadow: none; }
.logo-tile small { display: block; font-size: 11.5px; font-weight: 550; color: var(--texto-3); }

.cartao-destaque {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center;
  padding: 36px 40px; border-radius: var(--r-2xl);
  background: var(--destaque-fundo); color: var(--destaque-texto);
  box-shadow: var(--destaque-brilho);
}
.cartao-destaque h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.cartao-destaque p { margin-top: 10px; color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.cartao-destaque .botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cartao-destaque .botao:not(.botao-primario) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.cartao-destaque .botao:not(.botao-primario):hover { background: rgba(255, 255, 255, 0.14); }
.codigo-falso {
  border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 18px; font-family: var(--fonte-mono); font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, 0.85);
}
.codigo-falso .linha { display: flex; gap: 8px; align-items: center; min-height: 24px; }
.codigo-falso .metodo { flex: none; }
.codigo-falso i { display: inline-block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }

.faixa-ia {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 20px 24px; border-radius: var(--r-2xl);
  background: var(--afundado); border: 1px solid var(--borda);
}
.faixa-ia .marcas-ia { display: flex; }
.faixa-ia .marcas-ia span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--painel); box-shadow: 0 0 0 3px var(--afundado), var(--cartao-sombra); margin-left: -8px; color: var(--texto); }
.faixa-ia .marcas-ia span:first-child { margin-left: 0; }
.faixa-ia .marcas-ia .marca { width: 20px; height: 20px; }
.faixa-ia h3 { font-size: 16px; font-weight: 650; }
.faixa-ia p { font-size: 13.5px; color: var(--texto-2); margin-top: 2px; }

.suporte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.suporte .cartao { flex-direction: row; align-items: center; gap: 14px; }
.suporte .cartao .tile { margin: 0; }

/* ---------- capa de seção / área ---------- */
.capa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--divisoria); }
.capa .tile { width: 56px; height: 56px; border-radius: 16px; }
.capa .tile .ic, .capa .tile .marca { width: 26px; height: 26px; }
.capa h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.028em; }
.capa p { margin-top: 8px; font-size: 16.5px; color: var(--texto-2); max-width: 640px; }
.lista-artigos { display: flex; flex-direction: column; border-radius: var(--r-xl); box-shadow: var(--cartao-sombra); background: var(--cartao); overflow: hidden; }
.lista-artigos a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: var(--texto); font-size: 14.5px; font-weight: 550; border-top: 1px solid var(--divisoria); }
.lista-artigos a:first-child { border-top: 0; }
.lista-artigos a:hover { background: var(--hover); text-decoration: none; }
.lista-artigos a .ic.tipo { width: 17px; height: 17px; color: var(--texto-3); }
.lista-artigos a .ir { margin-left: auto; width: 15px; height: 15px; color: var(--texto-desab); }
.lista-artigos a .chip { margin-left: auto; height: 22px; font-size: 11.5px; }
.lista-artigos a .chip + .ir { margin-left: 8px; }
.lista-artigos a .passo-n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-texto); font-size: 12px; font-weight: 700; }
.grupo-bloco + .grupo-bloco { margin-top: 30px; }
.grupo-bloco > h2 { font-size: 16px !important; font-weight: 650 !important; margin: 0 0 12px !important; color: var(--texto); }

/* ---------- trilha ---------- */
.progresso { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-xl); background: var(--afundado); font-size: 13.5px; font-weight: 600; }
.progresso-barra { flex: 1; height: 8px; border-radius: 4px; background: var(--cinza-150); overflow: hidden; }
.progresso-barra i { display: block; height: 100%; width: 0; background: var(--marca); border-radius: 4px; transition: width var(--normal) var(--ease); }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etapa { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.etapa::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--borda); }
.etapa:last-child::before { display: none; }
.etapa-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--painel); border: 2px solid var(--marca-borda); color: var(--marca-texto);
  font-weight: 700; font-size: 14px; transition: background var(--rapido), border-color var(--rapido);
}
.etapa.feita .etapa-num { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.etapa-cartao { padding: 16px 18px; border-radius: var(--r-xl); background: var(--cartao); box-shadow: var(--cartao-sombra); display: flex; flex-direction: column; gap: 8px; }
.etapa-cartao h3 { font-size: 16px; font-weight: 650; }
.etapa-cartao .etapa-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.etapa-cartao .etapa-rodape a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.etapa-cartao .etapa-rodape a .ic { width: 15px; height: 15px; }
.marcar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); cursor: pointer; user-select: none; }
.marcar input { width: 16px; height: 16px; accent-color: var(--marca); margin: 0; }
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border-radius: var(--r-xl); background: var(--cartao); box-shadow: var(--cartao-sombra); }
.resultado .print-moldura { aspect-ratio: 4 / 3; }

/* ---------- integrações ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtro {
  height: 32px; padding: 0 14px; border-radius: var(--r-pilula);
  border: 1px solid var(--borda); background: var(--painel); color: var(--texto-2);
  font-size: 13px; font-weight: 600;
}
.filtro:hover { border-color: var(--borda-forte); color: var(--texto); }
.filtro.ativo { background: var(--texto); border-color: var(--texto); color: var(--painel); }
.campo-filtro { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: var(--r-pilula); border: 1px solid var(--borda-forte); background: var(--painel); margin-bottom: 14px; max-width: 360px; }
.campo-filtro input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--texto); font-size: 14px; }
.campo-filtro .ic { width: 16px; height: 16px; color: var(--texto-3); }
.modo { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pilula); font-size: 11px; font-weight: 650; background: var(--cinza-100); color: var(--texto-2); }
.modo-nativa { background: var(--marca-suave); color: var(--marca-texto); }

/* ---------- API ---------- */
.metodo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 20px; padding: 0 6px; border-radius: 6px;
  font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.metodo-get { color: var(--metodo-get); background: var(--metodo-get-fundo); }
.metodo-post { color: var(--metodo-post); background: var(--metodo-post-fundo); }
.metodo-delete { color: var(--metodo-delete); background: var(--metodo-delete-fundo); }
.metodo-put, .metodo-patch { color: var(--metodo-put); background: var(--metodo-put-fundo); }
.caminho { font-family: var(--fonte-mono); font-size: 13px; color: var(--texto-2); word-break: break-all; }
.caminho b { color: var(--marca-texto); font-weight: 600; }
.endpoint-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--afundado); border: 1px solid var(--borda); }
.endpoint-topo .metodo { height: 24px; min-width: 56px; font-size: 12px; }
.endpoint-topo .caminho { font-size: 14px; color: var(--texto); }
.pagina-api { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; padding: 36px 48px 56px; max-width: 1240px; margin: 0 auto; width: 100%; }
.codigo-no-texto { display: none; }
.pagina-api .lado-codigo { position: sticky; top: calc(var(--topo-h) + var(--abas-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 14px; }
.tabela-param { border-radius: var(--r-xl); box-shadow: var(--cartao-sombra); background: var(--cartao); overflow: hidden; }
.tabela-param .linha-param { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-top: 1px solid var(--divisoria); align-items: center; }
.tabela-param .linha-param:first-child { border-top: 0; }
.tabela-param .linha-param .nome { display: flex; flex-direction: column; gap: 6px; }
.tabela-param .linha-param .nome i { display: block; height: 10px; width: 70%; border-radius: 5px; background: var(--cinza-150); }
.tabela-param .linha-param .nome i + i { width: 40%; height: 8px; background: var(--cinza-100); }
.painel-codigo { border-radius: var(--r-xl); overflow: hidden; background: #16181d; box-shadow: var(--sombra-md); }
:root[data-tema="escuro"] .painel-codigo { background: #141414; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); }
.painel-codigo .abas-codigo { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.painel-codigo .codigo-abas { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.painel-codigo .abas-codigo [role="tab"], .painel-codigo .abas-codigo .aba { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: rgba(255, 255, 255, 0.55); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.painel-codigo .abas-codigo [role="tab"]:hover { color: rgba(255, 255, 255, 0.85); }
.painel-codigo .abas-codigo .ativo { color: #fff; box-shadow: inset 0 -2px 0 #00e9ff; }
.painel-codigo .abas-codigo .titulo { margin-left: auto; min-width: 0; padding: 0 2px 6px; font-size: 12px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-codigo .abas-codigo .copiar-codigo { margin: 0 0 6px auto; }
.painel-codigo .abas-codigo .titulo + .copiar-codigo { margin-left: 0; }
.painel-codigo pre.codigo { border-radius: 0; background: transparent; max-height: 560px; overflow: auto; }
.copiar-codigo { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); cursor: pointer; position: relative; }
.copiar-codigo:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.copiar-codigo svg { width: 15px; height: 15px; }
.copiar-url.copiado { position: relative; }
.copiar-url.copiado::after { content: "Copiado!"; position: absolute; right: 0; top: calc(100% + 6px); padding: 3px 8px; border-radius: 6px; background: var(--texto); color: var(--fundo); font: 600 11.5px/1.4 var(--fonte); white-space: nowrap; z-index: 2; }
.copiar-codigo.copiado::after { content: "Copiado!"; position: absolute; right: 0; top: calc(100% + 6px); padding: 3px 8px; border-radius: 6px; background: #fff; color: #111; font: 600 11.5px/1.4 var(--fonte); white-space: nowrap; z-index: 2; }
.painel-codigo .linhas { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.painel-codigo .linhas i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); }
.painel-codigo .linhas i:nth-child(2n) { width: 82%; margin-left: 18px; background: rgba(0, 233, 255, 0.22); }
.painel-codigo .linhas i:nth-child(3n) { width: 64%; margin-left: 18px; }
.painel-codigo .linhas i:last-child { width: 30%; margin-left: 0; }
/* campos de parâmetros, corpo, respostas e objetos da referência */
.campos { border-radius: var(--r-xl); box-shadow: var(--cartao-sombra); background: var(--cartao); overflow: hidden; margin: 12px 0 4px; }
.campo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 6px 18px; padding: 12px 16px; border-top: 1px solid var(--divisoria); }
.campo:first-child { border-top: 0; }
.campo-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-left: calc(var(--nivel, 0) * 14px); min-width: 0; }
.campo-nome code { padding: 0; border: 0; background: none; font-size: 13.5px; font-weight: 640; color: var(--texto); overflow-wrap: anywhere; }
.campo-pai { color: var(--texto-3); font-weight: 500; }
.campo-tipo { font-size: 12px; color: var(--texto-3); font-family: var(--fonte-mono); }
.campo-obrigatorio { font-size: 11.5px; font-weight: 640; color: var(--erro-texto); }
.campo-desc { font-size: 14px; line-height: 1.55; color: var(--texto-2); min-width: 0; }
.campo-desc p { margin: 0; }
.campo-desc p + p { margin-top: 6px; }
.campo-extra { font-size: 12.5px; }
.campo-extra code { font-size: 12px; }
.campos-dobra { margin: 10px 0 0; }
.campos-dobra > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--marca-texto); width: fit-content; }
.resposta { padding: 14px 0 6px; border-top: 1px solid var(--divisoria); }
.resposta:first-of-type { border-top: 0; }
.resposta-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.resposta-topo strong { font-size: 15px; }
.resposta-forma { font-size: 12.5px; color: var(--texto-3); }
.resposta-desc { margin-top: 6px; color: var(--texto-2); font-size: 14.5px; }
.resposta-desc p { margin: 0; }
.status { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 12px/1 var(--fonte-mono); }
.status-2xx { color: var(--sucesso-texto); background: var(--sucesso-suave); }
.status-4xx, .status-5xx { color: var(--erro-texto); background: var(--erro-suave); }
.corpo-midia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.corpo-midia code { font-size: 12.5px; }
.endpoint-topo .copiar-url { margin-left: auto; width: 30px; height: 30px; }
@media (max-width: 720px) {
  .campo { grid-template-columns: minmax(0, 1fr); }
  .painel-codigo .abas-codigo .titulo { display: none; }
  .painel-codigo .abas-codigo .copiar-codigo { margin-left: auto; }
}
.lista-endpoints { display: flex; flex-direction: column; border-radius: var(--r-xl); box-shadow: var(--cartao-sombra); background: var(--cartao); overflow: hidden; }
.lista-endpoints a { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.2fr) 16px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--divisoria); color: var(--texto); }
.lista-endpoints a:first-child { border-top: 0; }
.lista-endpoints a:hover { background: var(--hover); text-decoration: none; }
.lista-endpoints a > span:nth-child(2) { font-weight: 600; font-size: 14px; }
.lista-endpoints a .ir { width: 15px; height: 15px; color: var(--texto-desab); }
.cartao-grupo-api .metodos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* ---------- busca (Ctrl K) ---------- */
.busca { position: fixed; inset: 0; z-index: 80; display: grid; align-items: start; justify-items: center; padding: 10vh 16px 16px; background: var(--veu); }
.busca[hidden] { display: none; }
.busca-caixa { width: min(680px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: var(--r-2xl); background: var(--elevado); box-shadow: var(--sombra-lg); overflow: hidden; }
.busca-campo { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 60px; border-bottom: 1px solid var(--divisoria); }
.busca-campo .ic { width: 20px; height: 20px; color: var(--texto-3); }
.busca-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16.5px; color: var(--texto); }
.busca-campo input::placeholder { color: var(--texto-3); }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-escopo { display: flex; gap: 6px; padding: 10px 16px 0; }
.busca-escopo button { height: 28px; padding: 0 12px; border-radius: var(--r-pilula); border: 1px solid var(--borda); background: transparent; color: var(--texto-2); font-size: 12.5px; font-weight: 600; }
.busca-escopo button.ativo { background: var(--marca-suave); border-color: var(--marca-borda); color: var(--marca-texto); }
.busca-resultados { overflow-y: auto; padding: 8px; min-height: 120px; }
.busca-grupo { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.busca-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--texto); }
.busca-item:hover, .busca-item.ativo { background: var(--marca-suave); text-decoration: none; }
.busca-item .tile { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; border: 1px solid var(--borda); color: var(--texto-2); }
.busca-item .tile .ic { width: 16px; height: 16px; }
.busca-item.ativo .tile { color: var(--marca); border-color: var(--marca-borda); background: var(--painel); }
.busca-item strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.busca-item small { display: block; font-size: 12.5px; color: var(--texto-3); line-height: 1.35; }
.busca-item mark { background: transparent; color: var(--marca-texto); font-weight: 700; }
.busca-item .ir { margin-left: auto; width: 15px; height: 15px; color: var(--texto-3); opacity: 0; }
.busca-item.ativo .ir { opacity: 1; }
.busca-vazio { padding: 26px 16px; text-align: center; color: var(--texto-3); font-size: 14px; }
.busca-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px 12px; }
.busca-sugestoes button { height: 30px; padding: 0 12px; border-radius: var(--r-pilula); border: 1px solid var(--borda); background: var(--painel); color: var(--texto-2); font-size: 13px; font-weight: 550; }
.busca-sugestoes button:hover { border-color: var(--marca-borda); color: var(--marca-texto); }
.busca-rodape { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--divisoria); font-size: 12px; color: var(--texto-3); }
.busca-rodape span { display: inline-flex; align-items: center; gap: 6px; }
.busca-rodape .ia { margin-left: auto; }

/* ---------- rodapé ---------- */
.rodape { margin-top: auto; padding: 28px 48px 24px; border-top: 1px solid var(--divisoria); font-size: 13px; color: var(--texto-3); }
.rodape-colunas { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1240px; margin: 0 auto; }
.rodape-colunas strong { display: block; margin-bottom: 8px; font-size: 13px; color: var(--texto); font-weight: 600; }
.rodape-colunas a { display: block; padding: 3px 0; color: var(--texto-3); }
.rodape-colunas a:hover { color: var(--texto); }
.rodape-marca img { height: 18px; width: auto; }
.rodape-marca p { margin-top: 10px; max-width: 260px; line-height: 1.55; }
.rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin: 22px auto 0; padding-top: 16px; border-top: 1px solid var(--divisoria); }
.rodape-base .sociais { display: flex; gap: 6px; }
.rodape-base .sociais a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--texto-3); }
.rodape-base .sociais a:hover { background: var(--hover); color: var(--texto); }
.rodape-base .sociais .marca { width: 16px; height: 16px; }

/* ---------- celular: barra Menu / Nesta página + gavetas ---------- */
.barra-movel { display: none; }
.gaveta-veu { display: none; }

@media (max-width: 1240px) {
  :root { --lateral-w: 256px; --indice-w: 200px; }
  .pagina { gap: 40px; padding: 32px 36px 48px; }
}
@media (max-width: 1100px) {
  .pagina { grid-template-columns: minmax(0, var(--leitura)); }
  .pagina > .indice { display: none; }
  .troca-item span { display: none; }
  .troca-item { padding: 0 10px; }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .problemas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-api { grid-template-columns: minmax(0, 1fr); }
  .pagina-api .lado-codigo { position: static; }
  /* no celular, a chamada vem logo depois do texto; as respostas de exemplo ficam no fim */
  .codigo-no-texto { display: block; margin: 18px 0 6px; }
  .pagina-api .lado-codigo .lado-requisicao { display: none; }
  .abas-extra span { display: none; }
}
@media (max-width: 900px) {
  :root { --topo-h: 56px; }
  html { scroll-padding-top: calc(var(--topo-h) + 56px); }
  .topo { padding: 0 8px 0 4px; gap: 4px; border-bottom: 1px solid var(--borda); }
  .topo-menu { display: inline-grid; }
  .troca { display: none; }
  .topo-busca { flex: none; min-width: 0; margin: 0 0 0 auto; border: 0; box-shadow: none; background: transparent; padding: 0; width: 38px; justify-content: center; }
  .topo-busca span, .topo-busca kbd { display: none; }
  .topo-busca .ic { width: 19px; height: 19px; color: var(--texto-2); }
  .topo-dir .botao-primario { display: none; }
  .logo img { height: 19px; }
  .abas { display: none; }
  .casca, .casca.com-lateral { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .painel { border-radius: 0; box-shadow: none; }
  .heroi { border-radius: 0; }
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: min(330px, 88vw); height: 100vh; height: 100dvh;
    padding: 14px 14px 32px; background: var(--fundo);
    transform: translateX(-102%); transition: transform var(--normal) var(--ease);
    box-shadow: var(--sombra-lg);
  }
  .gaveta-aberta .lateral { transform: none; }
  .gaveta-aberta .gaveta-veu { display: block; position: fixed; inset: 0; z-index: 85; background: var(--veu); }
  .gaveta-cabeca { display: flex !important; }
  .barra-movel {
    position: sticky; top: var(--topo-h); z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 48px; padding: 0 16px;
    background: var(--painel); border-bottom: 1px solid var(--borda);
    font-size: 14px; font-weight: 600;
  }
  .barra-movel button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 0; color: var(--texto); font-weight: 600; }
  .barra-movel button .ic { width: 17px; height: 17px; color: var(--texto-2); }
  .indice-movel { position: absolute; top: 100%; left: 0; right: 0; padding: 12px 16px 16px; background: var(--painel); border-bottom: 1px solid var(--borda); box-shadow: var(--sombra-md); }
  .indice-movel[hidden] { display: none; }
  .pagina, .pagina-api { padding: 24px 16px 40px; }
  .faixa { padding: 32px 16px 0; }
  .heroi { padding: 44px 16px 36px; }
  .heroi h1 { font-size: 34px; }
  .heroi > p { font-size: 15.5px; }
  .heroi-busca { height: 52px; font-size: 15px; }
  .heroi-busca .botao { display: none; }
  .artigo-topo h1, .capa h1 { font-size: 27px; }
  .artigo-topo .lead { font-size: 16px; }
  .grade-2, .grade-3, .grade-4, .suporte { grid-template-columns: minmax(0, 1fr); }
  .logos, .logos-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problemas { padding: 18px 16px; }
  .problemas-topo { grid-template-columns: auto minmax(0, 1fr); }
  .problemas-topo .botao { grid-column: 1 / -1; justify-self: start; }
  .problemas-lista { grid-template-columns: minmax(0, 1fr); }
  /* no celular os cartões ficam deitados: ícone à esquerda, texto ao lado */
  .cartao-area, .grade-4 > a.cartao:not(.cartao-segmento):not(.cartao-grupo-api), .grade-3 > a.cartao:not(.cartao-trilha):not(.cartao-segmento) {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: start;
    min-height: 0; padding: 14px 40px 14px 16px;
  }
  .cartao-area > .tile, .grade-4 > a.cartao > .tile, .grade-3 > a.cartao > .tile { grid-row: span 3; margin: 0; }
  .cartao-area .conta { padding-top: 4px; }
  .cartao .ir { top: 16px; right: 14px; }
  .populares > span { width: 100%; text-align: center; }
  .cartao-destaque { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .faixa-ia { grid-template-columns: minmax(0, 1fr); }
  .capa { grid-template-columns: minmax(0, 1fr); }
  .capa > .tile { display: none; }
  .resultado { grid-template-columns: minmax(0, 1fr); }
  .vizinhos { grid-template-columns: minmax(0, 1fr); }
  .vizinho.proximo { grid-column: auto; }
  .rodape { padding: 24px 16px; }
  .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-marca { grid-column: 1 / -1; }
  .lista-endpoints a { grid-template-columns: 56px minmax(0, 1fr) 16px; }
  .lista-endpoints a .caminho { grid-column: 2; grid-row: 2; font-size: 12px; }
  .tabela-param .linha-param { grid-template-columns: minmax(0, 1fr); }
  .acoes .atualizado { margin-left: 0; width: 100%; }
}
.gaveta-cabeca { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--borda); }
.gaveta-cabeca .troca { display: inline-flex; }
.gaveta-cabeca .troca-item span { display: inline; }
.gaveta-abas { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.gaveta-abas a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--texto-2); font-weight: 550; font-size: 14.5px; }
.gaveta-abas a .ic { width: 17px; height: 17px; color: var(--texto-3); }
.gaveta-abas a.ativo { color: var(--texto); background: var(--painel); box-shadow: var(--cartao-sombra); }
.gaveta-abas a.ativo .ic { color: var(--marca); }
@media (min-width: 901px) { .gaveta-abas { display: none; } .lateral.so-movel { display: none; } }

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