/* Guia do Roque · cromo da documentação. Prefixo doc- para não confundir com o sistema.
   O guia usa os tokens do próprio Roque. */

.doc-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  min-height: 100svh;
}

/* ---- Lateral ------------------------------------------------------------------- */
.doc-lateral {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 28px 48px;
  scrollbar-width: thin;
  scrollbar-color: var(--rq-linha) transparent;
}
.doc-lateral__topo { display: grid; gap: 14px; }
.doc-lateral__logo { display: block; inline-size: 132px; color: var(--rq-texto); }
.doc-lateral__logo .rq-logo { --rq-logo-largura: 132px; }
.doc-lateral__nome { display: flex; align-items: baseline; gap: 10px; font-size: var(--rq-t-pequeno); color: var(--rq-texto-suave); }
.doc-lateral__nome b { font-size: 22px; font-weight: var(--rq-peso-medio); letter-spacing: -0.015em; color: var(--rq-texto); }
.doc-lateral__alternar { display: none; }

/* Guia aberto direto como arquivo (file://): o navegador bloqueia os módulos, o docs.js não roda
   e a lateral fica vazia. Se ela continuar vazia depois de 2 s, aparece o aviso; no servidor, o
   docs.js a preenche antes disso. Durante a espera o aviso não ocupa altura: abaixo de 1024 px a
   lateral fica no fluxo, e um aviso escondido mas com altura empurraria o conteúdo na carga. */
html.js .doc-lateral:empty::before {
  content: 'O guia não montou a navegação.\A \A Aberto direto como arquivo, o navegador bloqueia os scripts do guia. Para ler sem servidor, abra ds-roque-v1/dist/roque-v1-guia.html (gerado por python3 tools/empacotar.py). Ou sirva a pasta ds-roque-v1 com python3 tools/servir.py e abra /docs/.';
  display: block;
  max-inline-size: 36rem;
  overflow: hidden;
  white-space: pre-line;
  font-size: var(--rq-t-pequeno);
  line-height: var(--rq-lh-pequeno);
  color: var(--rq-texto);
  animation: doc-espera 0s 2s backwards;
}
@keyframes doc-espera { from, to { visibility: hidden; max-block-size: 0; } }
/* O atraso não é movimento: numa camada anterior à rq.motion, este !important vence o zeramento
   de atrasos do movimento reduzido, e o aviso não pisca no servidor enquanto o docs.js carrega. */
@layer rq.base {
  html.js .doc-lateral:empty::before { animation-delay: 2s !important; }
}

.doc-filtro { position: relative; margin-block: 28px 8px; }
.doc-filtro .rq-icone { position: absolute; inset-inline-start: 0; inset-block-start: 50%; translate: 0 -50%; --rq-icone: 18px; color: var(--rq-texto-suave); pointer-events: none; }
.doc-filtro input {
  inline-size: 100%;
  block-size: 40px;
  padding: 0 0 0 28px;
  border: 0;
  border-block-end: 1px solid var(--rq-linha);
  border-radius: 0;
  background: transparent;
  font-size: var(--rq-t-pequeno);
}
.doc-filtro input:focus-visible { outline: none; border-block-end-color: var(--rq-anel); box-shadow: 0 1px 0 var(--rq-anel); }

.doc-nav p { margin: 28px 0 8px; font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); }
.doc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--rq-t-pequeno);
  line-height: 1.35;
  color: var(--rq-texto-suave);
  text-decoration: none;
  transition: color var(--rq-m-rapido) var(--rq-curva-saida);
}
.doc-nav a:hover { color: var(--rq-texto); }
.doc-nav a[aria-current='page'] { color: var(--rq-texto); font-weight: var(--rq-peso-medio); }
.doc-nav a[aria-current='page']::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--cl-pistachio); margin-inline-start: -16px; }
.doc-nav ul, .doc-nav ol { list-style: none; padding: 0; }
.doc-nav ol { margin: 2px 0 8px; padding-inline-start: 0; border-inline-start: 1px solid var(--rq-linha); }
.doc-nav ol a { padding: 4px 0 4px 14px; font-size: 14px; }
.doc-nav ol a.is-atual { color: var(--rq-texto); }
.doc-nav__vazio { padding: 12px 0; font-size: var(--rq-t-pequeno); color: var(--rq-texto-suave); }

/* ---- Principal ------------------------------------------------------------------- */
.doc-main { min-inline-size: 0; }

.doc-barra {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--rq-z-cabecalho);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 28px;
  padding: 12px clamp(24px, 5vw, 88px);
  border-block-end: 1px solid var(--rq-linha);
  background: var(--rq-fundo);
  font-size: var(--rq-t-legenda);
  color: var(--rq-texto-suave);
}
.doc-controle { display: flex; align-items: center; gap: 10px; }
.doc-segmentos { display: flex; gap: 2px; padding: 3px; border-radius: var(--rq-raio-pilula); background: var(--rq-superficie-alt); }
.doc-segmentos button {
  block-size: 30px;
  padding: 0 12px;
  border-radius: var(--rq-raio-pilula);
  font-size: var(--rq-t-legenda);
  color: var(--rq-texto-suave);
  white-space: nowrap;
  transition: background-color var(--rq-m-rapido) var(--rq-curva-saida), color var(--rq-m-rapido) var(--rq-curva-saida);
}
.doc-segmentos button:hover { color: var(--rq-texto); }
.doc-segmentos button[aria-pressed='true'] { background: var(--rq-fundo); color: var(--rq-texto); box-shadow: var(--rq-sombra-1); }

.doc-pagina { padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 88px) 160px; max-inline-size: 1280px; }
.doc-cabeca { max-inline-size: 52rem; }
.doc-cabeca .rq-lead { margin-block-start: 24px; }

.doc-secao { margin-block-start: clamp(80px, 9vw, 128px); scroll-margin-block-start: 72px; }
.doc-secao > h2 { scroll-margin-block-start: 72px; }
.doc-secao__intro { margin-block-start: 16px; max-inline-size: var(--rq-largura-leitura); color: var(--rq-texto-suave); }

.doc-bloco { margin-block-start: 56px; }
.doc-bloco__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-block-end: 12px; }
.doc-bloco__cab h3 { font-size: var(--rq-t-t3); line-height: var(--rq-lh-t3); font-weight: var(--rq-peso-medio); letter-spacing: -0.01em; }
.doc-bloco__cab code { font-family: var(--rq-fonte-codigo); font-size: 12.5px; color: var(--rq-texto-suave); }
.doc-bloco__texto { max-inline-size: var(--rq-largura-leitura); margin-block-end: 20px; color: var(--rq-texto-suave); }
.doc-bloco__texto + .doc-bloco__texto { margin-block-start: -8px; }

/* ---- Palco de demonstração ----------------------------------------------------------
   data-tema-livre: o seletor de tema troca. data-largura-livre: o seletor de largura limita o
   palco (mostra as container queries). data-densidade-livre: o seletor de densidade. */
.doc-demo {
  position: relative;
  padding: clamp(20px, 4vw, 48px);
  border: 1px solid var(--rq-linha);
  border-radius: var(--rq-raio-m);
  overflow: clip;
}
.doc-demo--sem-pad { padding: 0; }
.doc-demo--alto { min-block-size: 440px; }
.doc-demo__palco { max-inline-size: var(--doc-largura, none); margin-inline: auto; transition: max-inline-size var(--rq-m-medio) var(--rq-curva-saida); }
.doc-demo[data-largura='360'] .doc-demo__palco,
.doc-demo[data-largura='768'] .doc-demo__palco { outline: 1px dashed var(--rq-linha); outline-offset: 12px; }
.doc-demo[data-largura='360'] { --doc-largura: 360px; }
.doc-demo[data-largura='768'] { --doc-largura: 768px; }
.doc-demo--linha .doc-demo__palco, .doc-demo--linha:not(:has(.doc-demo__palco)) { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.doc-replay { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 5; }

/* ---- Código ------------------------------------------------------------------------- */
.doc-codigo { margin-block-start: 10px; }
.doc-codigo summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--rq-t-pequeno);
  color: var(--rq-texto-suave);
  cursor: pointer;
  list-style: none;
}
.doc-codigo summary::-webkit-details-marker { display: none; }
.doc-codigo summary .rq-icone { --rq-icone: 16px; transition: rotate var(--rq-m-base) var(--rq-curva-saida); }
.doc-codigo[open] summary .rq-icone { rotate: 90deg; }
.doc-codigo summary:hover { color: var(--rq-texto); }
.doc-codigo__corpo { position: relative; margin-block-start: 8px; }
.doc-codigo__corpo pre {
  margin: 0;
  padding: 20px 22px;
  border-radius: var(--rq-raio-m);
  background: var(--cl-ink);
  color: var(--cl-mist);
  font: 12.5px/1.65 var(--rq-fonte-codigo);
  overflow-x: auto;
  tab-size: 2;
  max-block-size: 460px;
}
.doc-copiar {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  padding: 6px 12px;
  border-radius: var(--rq-raio-pilula);
  background: rgb(247 248 242 / 10%);
  color: var(--cl-snow);
  font-size: 12px;
  font-weight: var(--rq-peso-medio);
}
.doc-copiar:hover { background: rgb(247 248 242 / 18%); }

/* ---- Notas de uso ------------------------------------------------------------------- */
.doc-notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 40px;
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rq-linha);
  font-size: var(--rq-t-pequeno);
  line-height: var(--rq-lh-pequeno);
}
.doc-notas dt { font-weight: var(--rq-peso-medio); margin-block-end: 6px; }
.doc-notas dd { color: var(--rq-texto-suave); }
.doc-notas dd + dd { margin-block-start: 6px; }
.doc-notas code, .doc-bloco__texto code, .doc-tabela code, .doc-secao__intro code, .doc-cabeca code { font-family: var(--rq-fonte-codigo); font-size: 0.86em; }

/* ---- Tabelas ---------------------------------------------------------------------- */
.doc-tabela-rolagem { overflow-x: auto; }
.doc-tabela { inline-size: 100%; font-size: var(--rq-t-pequeno); font-variant-numeric: tabular-nums; }
.doc-tabela th, .doc-tabela td { padding: 12px 16px 12px 0; text-align: start; vertical-align: baseline; border-block-end: 1px solid var(--rq-linha); }
.doc-tabela th { font-weight: var(--rq-peso-medio); font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); border-block-end-color: var(--rq-linha-forte); white-space: nowrap; }
.doc-tabela td:first-child { white-space: nowrap; }

/* ---- Cores ------------------------------------------------------------------------- */
.doc-paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 20px; }
.doc-cor__amostra { block-size: 112px; border-radius: var(--rq-raio-m); box-shadow: inset 0 0 0 1px rgb(29 38 33 / 8%); }
.doc-cor__info { margin-block-start: 12px; font-size: var(--rq-t-pequeno); line-height: 1.5; }
.doc-cor__info b { display: block; font-weight: var(--rq-peso-medio); }
.doc-cor__info code { font-family: var(--rq-fonte-codigo); font-size: 12px; color: var(--rq-texto-suave); }
.doc-cor__info span { display: block; color: var(--rq-texto-suave); font-size: var(--rq-t-legenda); margin-block-start: 2px; }
/* Arquivos de logo: célula mais larga para o wordmark, e o logo nunca passa da amostra. */
.doc-paleta--logos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.doc-paleta--logos .doc-cor__amostra { display: grid; place-items: center; padding: 20px; }
.doc-paleta--logos img { inline-size: min(140px, 100%); block-size: auto; }

.doc-rampa { display: grid; grid-template-columns: 96px repeat(11, minmax(0, 1fr)); align-items: stretch; gap: 4px; margin-block-start: 8px; }
.doc-rampa > b { align-self: center; font-size: var(--rq-t-pequeno); font-weight: var(--rq-peso-medio); }
.doc-rampa > span { display: grid; align-content: end; min-block-size: 76px; padding: 8px; border-radius: var(--rq-raio-p); font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.doc-rampa > span.is-marca { box-shadow: inset 0 0 0 2px currentColor; }
.doc-rampa > span i { font-style: normal; opacity: 0.8; }

.doc-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.doc-tema { display: grid; gap: 14px; padding: 24px; border-radius: var(--rq-raio-m); box-shadow: inset 0 0 0 1px var(--rq-linha); }
.doc-tema__nome { font-size: var(--rq-t-t2); line-height: 1.1; letter-spacing: -0.015em; font-weight: var(--rq-peso-medio); }
.doc-tema__codigo { display: block; margin-block-start: 6px; font-family: var(--rq-fonte-codigo); font-size: 12px; color: var(--rq-texto-suave); }
.doc-tema__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); }
.doc-tema__ponto { display: inline-flex; align-items: center; gap: 6px; }
.doc-tema__ponto::before { content: ''; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c); }
.doc-tema__acao { display: inline-flex; align-items: center; block-size: 36px; padding: 0 16px; border-radius: var(--rq-raio-pilula); font-size: 14px; font-weight: var(--rq-peso-medio); }
/* A ação laranja não fica ao lado do realce verde: o secundário entre os dois, numa linha só. */
.doc-tema__acoes { flex-wrap: nowrap; gap: 8px; }
.doc-tema__acoes .doc-tema__acao { padding: 0 12px; white-space: nowrap; }
.doc-tema hr { border: 0; border-block-start: 1px solid var(--rq-linha); }

.doc-serie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.doc-serie > span { display: grid; gap: 8px; font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); }
.doc-serie > span::before { content: ''; block-size: 56px; border-radius: var(--rq-raio-p); background: var(--c); }
.doc-serie code { font-family: var(--rq-fonte-codigo); font-size: 11.5px; }

/* ---- Tipografia, espaço, motion --------------------------------------------------- */
.doc-escala > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: baseline; padding-block: 18px; border-block-end: 1px solid var(--rq-linha); }
.doc-escala > div:first-child { border-block-start: 1px solid var(--rq-linha); }
.doc-escala code { font-family: var(--rq-fonte-codigo); font-size: 12px; color: var(--rq-texto-suave); line-height: 1.5; }
.doc-escala code span { display: block; }
.doc-escala p { min-inline-size: 0; overflow-wrap: anywhere; }

.doc-espacos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 22px; }
.doc-espacos div { display: grid; justify-items: start; gap: 8px; font-size: 11.5px; color: var(--rq-texto-suave); font-variant-numeric: tabular-nums; }
.doc-espacos i { display: block; inline-size: var(--w); block-size: var(--w); min-inline-size: 2px; min-block-size: 2px; background: var(--rq-realce); border-radius: 1px; }

.doc-grade-demo > * { display: grid; place-items: center; min-block-size: 56px; border-radius: var(--rq-raio-p); background: var(--rq-realce-tinta); font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); font-variant-numeric: tabular-nums; }
.doc-caixa { display: grid; place-items: center; min-block-size: 64px; padding: 16px; border-radius: var(--rq-raio-p); background: var(--rq-superficie-alt); font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); text-align: center; }

.doc-raios { display: flex; flex-wrap: wrap; gap: 24px; }
.doc-raios div { display: grid; gap: 10px; font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); }
.doc-raios i { inline-size: 120px; block-size: 84px; border: 1px solid var(--rq-linha-forte); border-radius: var(--r); }

.doc-sombras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; padding: 16px 4px; }
.doc-sombras div { display: grid; place-items: end start; min-block-size: 120px; padding: 16px; border-radius: var(--rq-raio-m); background: var(--rq-superficie); box-shadow: var(--s); font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); }

.doc-proporcoes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; }
.doc-proporcoes div { display: grid; place-items: center; inline-size: 132px; aspect-ratio: var(--p); border-radius: var(--rq-raio-p); background: var(--rq-superficie-alt); font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); font-variant-numeric: tabular-nums; }
.doc-proporcoes div.is-larga { inline-size: 220px; }

.doc-curvas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.doc-curva { display: grid; gap: 12px; padding: 20px; border-radius: var(--rq-raio-m); box-shadow: inset 0 0 0 1px var(--rq-linha); text-align: start; }
.doc-curva b { font-size: var(--rq-t-t3); font-weight: var(--rq-peso-medio); }
.doc-curva span { font-size: var(--rq-t-legenda); color: var(--rq-texto-suave); }
.doc-curva__trilho { position: relative; block-size: 12px; border-radius: 6px; background: var(--rq-superficie-alt); }
.doc-curva__trilho i { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--rq-realce); transition: inset-inline-start var(--d, 700ms) var(--e, ease); }
.doc-curva.is-indo .doc-curva__trilho i { inset-inline-start: calc(100% - 12px); }

.doc-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px; }
.doc-icone {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 6px 14px;
  border-radius: var(--rq-raio-m);
  font-size: 11.5px;
  color: var(--rq-texto-suave);
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color var(--rq-m-rapido) var(--rq-curva-saida), color var(--rq-m-rapido) var(--rq-curva-saida);
}
.doc-icone:hover { background: var(--rq-superficie-alt); color: var(--rq-texto); }
.doc-icone .rq-icone { --rq-icone: 28px; color: var(--rq-texto); }
.doc-icones__grupo { margin-block: 32px 12px; font-size: var(--rq-t-pequeno); font-weight: var(--rq-peso-medio); }

.doc-foto { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---- Celular e tablet ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .doc-lateral { position: relative; block-size: auto; padding: 18px 20px; overflow: visible; }
  .doc-lateral__topo { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .doc-lateral__logo, .doc-lateral__logo .rq-logo { inline-size: 112px; --rq-logo-largura: 112px; }
  /* O nome encolhe e a versão desce para a linha de baixo: o botão Guia nunca sai da tela. */
  .doc-lateral__nome { justify-self: start; min-inline-size: 0; flex-wrap: wrap; row-gap: 0; }
  .doc-lateral__alternar { display: inline-flex; align-items: center; gap: 8px; block-size: 40px; padding: 0 14px; border-radius: var(--rq-raio-pilula); box-shadow: inset 0 0 0 1px var(--rq-linha-forte); font-size: var(--rq-t-pequeno); }
  .doc-lateral__painel { display: none; padding-block-end: 12px; }
  .doc-lateral.is-aberta .doc-lateral__painel { display: block; }
  .doc-barra { position: static; justify-content: flex-start; padding-inline: 20px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .doc-pagina { padding-inline: 20px; }
  .doc-rampa { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .doc-rampa > b { grid-column: 1 / -1; }
  .doc-rampa > span { min-block-size: 56px; padding: 4px; font-size: 9.5px; }
  .doc-rampa > span i { display: none; }
}
/* Abaixo de 390 px (até 320, a largura do refluxo da WCAG 1.4.10): logo e vãos menores. */
@media (max-width: 389px) {
  .doc-lateral__topo { gap: 12px; }
  .doc-lateral__logo, .doc-lateral__logo .rq-logo { inline-size: 96px; --rq-logo-largura: 96px; }
}
@media (max-width: 760px) {
  .doc-escala > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .doc-serie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-demo { padding: 20px 16px; }
  .doc-demo--sem-pad { padding: 0; }
}

/* Botão do cromo do guia (repetir, piscar, trocar). Não é componente do sistema. */
.doc-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 36px;
  padding: 0 16px;
  border-radius: var(--rq-raio-pilula);
  box-shadow: inset 0 0 0 1px var(--rq-linha-forte);
  font-size: var(--rq-t-pequeno);
  font-weight: var(--rq-peso-medio);
  color: var(--rq-texto);
  transition: background-color var(--rq-m-rapido) var(--rq-curva-saida);
}
.doc-botao:hover { background: var(--rq-superficie-alt); }
.doc-botao[aria-pressed='true'] { background: var(--rq-texto); color: var(--rq-fundo); box-shadow: none; }
.doc-botao .rq-icone { --rq-icone: 18px; }

/* Abertura da página inicial do guia: foto com o texto na área calma. */
.doc-abertura { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: min(72svh, 680px); border-radius: var(--rq-raio-m); overflow: clip; }
.doc-abertura > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 64% 50%; z-index: -2; }
.doc-abertura::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rq-veu); }
.doc-abertura__texto { padding: clamp(28px, 5vw, 72px); max-inline-size: 44rem; }
.doc-abertura__texto .rq-lead { margin-block-start: 24px; max-inline-size: 32rem; }
@media (max-width: 760px) {
  .doc-abertura::before { background: var(--rq-veu-baixo); }
  .doc-abertura > img { object-position: 68% 30%; }
}
@media (max-width: 760px) { .doc-codigo__corpo pre { padding-block-start: 52px; } }

/* Demos de navegação: uma área que rola por dentro, com cabeçalho e seções. */
.doc-rolagem { position: relative; block-size: 480px; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--rq-raio-m); box-shadow: inset 0 0 0 1px var(--rq-linha); }
.doc-rolagem > section { padding: 64px clamp(20px, 4vw, 48px); }
.doc-rolagem .rq-cabecalho--sobre { position: sticky; }
.doc-atalho-demo { position: relative; min-block-size: 200px; padding-block-end: 96px; }
.doc-atalho-demo .rq-atalho { position: absolute; }
.doc-indice-demo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.doc-indice-demo section + section { margin-block-start: 56px; }
@media (max-width: 1023px) { .doc-indice-demo { grid-template-columns: minmax(0, 1fr); gap: 24px; } }