/* Página do WaitScope. Tokens da console (IBM Carbon): cinzas em camadas, azul só em
   ação e barras, cantos retos, filetes de 1px. O tema escuro segue o sistema. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --layer: #f4f4f4;
  --layer-2: #ffffff;
  --layer-hover: #e8e8e8;
  --border: #e0e0e0;
  --border-strong: #8d8d8d;
  --text: #161616;
  --text-2: #525252;
  --interactive: #0f62fe;
  --interactive-hover: #0050e6;
  --interactive-active: #002d9c;
  --link: #0f62fe;
  --link-hover: #0043ce;
  --focus: #0f62fe;
  --shell: #161616;
  --shell-text: #f4f4f4;
  --shell-text-2: #c6c6c6;
  --shell-border: #393939;
  --shell-hover: #2c2c2c;
  --shell-active: #393939;
  --inverse: #161616;
  --inverse-text: #f4f4f4;
  --inverse-text-2: #c6c6c6;
  --inverse-border: #393939;
  --bar: #0f62fe;
  --bar-track: #e0e0e0;
  --warning: #f1c21b;
  --hot: #fcf4d6;
  --hot-edge: #f1c21b;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Escala: 3 display, 2.25 título, 1.125 subtítulo, 1 corpo, .875 apoio, .75 rótulo. */
  --t-display: clamp(2rem, 1.25rem + 3vw, 3rem);
  --t-titulo: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  --grade-gap: 3rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --layer: #1f1f1f;
    --layer-2: #262626;
    --layer-hover: #333333;
    --border: #393939;
    --border-strong: #6f6f6f;
    --text: #f4f4f4;
    --text-2: #c6c6c6;
    --link: #78a9ff;
    --link-hover: #a6c8ff;
    --focus: #ffffff;
    --inverse: #393939;
    --inverse-border: #6f6f6f;
    --bar: #4589ff;
    --bar-track: #393939;
    --hot: #3a3112;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 3rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .2em; }
a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; letter-spacing: 0; }
p { margin: 0; }
code, pre { font-family: var(--mono); letter-spacing: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 1rem; top: 0; z-index: 30; transform: translateY(-110%); background: var(--interactive); color: #fff; padding: .75rem 1rem; }
.pular:focus { transform: none; color: #fff; }
.pular:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.faixa { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); }
@media (min-width: 42rem) { .faixa { padding: 0 max(2rem, env(safe-area-inset-right)) 0 max(2rem, env(safe-area-inset-left)); } }
.grade > * { min-width: 0; }

/* Rótulo de seção: a voz mono do produto, igual ao item do menu. */
.sobre { margin: 0 0 .75rem; font: 400 .75rem/1rem var(--mono); letter-spacing: .32px; color: var(--text-2); }

/* ---- Barra do topo: a mesma da console ---- */
.topo { position: sticky; top: 0; z-index: 10; background: var(--shell); color: var(--shell-text); box-shadow: 0 1px 0 var(--shell-border); letter-spacing: .16px; --focus: #fff; }
.topo .faixa { display: flex; align-items: stretch; height: 3rem; }
.topo a { text-decoration: none; }
.topo :focus-visible, .menu :focus-visible { outline-offset: -2px; }
.topo .botao:focus-visible { outline-offset: 2px; }
.marca { display: flex; align-items: center; gap: .625rem; margin: 0; color: var(--shell-text); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.marca img { flex: none; width: 1.125rem; height: 1.125rem; }
.topo .marca { flex: none; padding-right: 1.25rem; margin-right: auto; }
.secoes, .idiomas, .topo .entrar { display: none; }
.secoes a, .idiomas a { display: flex; align-items: center; padding: 0 .75rem; color: var(--shell-text-2); font-size: .875rem; white-space: nowrap; }
.idiomas a { min-width: 2.75rem; justify-content: center; }
.idiomas a[aria-current] { color: var(--shell-text); box-shadow: inset 0 -2px 0 var(--shell-text); }
.topo .entrar { align-items: center; padding: 0 1rem; color: var(--shell-text); font-size: .875rem; white-space: nowrap; border-left: 1px solid var(--shell-border); }
/* Botão de 32px no meio da barra; a área de toque tem os 48px da barra (o ::after conta de dentro da borda de 1px). */
.topo .botao { position: relative; align-self: center; justify-content: center; height: 2rem; min-height: 2rem; padding: 0 1rem; font-size: .875rem; white-space: nowrap; }
.topo .botao::after { content: ""; position: absolute; inset: -9px 0; }
@media (min-width: 40rem) {
  .idiomas, .topo .entrar { display: flex; }
  .topo .botao { margin-left: .5rem; }
}
@media (min-width: 62rem) {
  .topo .marca { margin-right: 0; }
  .secoes { display: flex; margin-right: auto; padding-left: .5rem; border-left: 1px solid var(--shell-border); }
}
@media (hover: hover) {
  .secoes a:hover, .idiomas a:hover, .topo .entrar:hover { background: var(--shell-hover); color: var(--shell-text); }
}
.secoes a:active, .idiomas a:active, .topo .entrar:active, .menu-abre:active, .menu a:active { background: var(--shell-active); }

/* ---- Menu do celular e do tablet: só HTML e CSS, aberto por #menu ---- */
.menu-abre, .menu, .menu-fundo { display: none; }
@media (max-width: 61.99rem) {
  .topo .faixa { padding-right: env(safe-area-inset-right, 0); }
  body:has(#menu:target) .menu-abre { visibility: hidden; }
  body:has(#menu:target):has(:focus-visible) :is(main, .rodape) { visibility: hidden; }
  .menu-abre { display: flex; flex: none; align-items: center; justify-content: center; width: 3rem; margin-left: .5rem; color: var(--shell-text); }
  .menu-abre::before { content: ""; width: 1.125rem; height: 2px; background: currentColor; box-shadow: 0 -.375rem 0 currentColor, 0 .375rem 0 currentColor; }
  .menu:target { display: block; position: fixed; z-index: 11; top: 3rem; left: 0; right: 0; max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 1.5rem; background: var(--shell); box-shadow: 0 1px 0 var(--shell-border) inset, 0 1px 0 var(--shell-border); letter-spacing: .16px; --focus: #fff; }
  .menu > a:not(.menu-fecha) { display: flex; align-items: center; min-height: 3rem; padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); color: var(--shell-text); text-decoration: none; border-bottom: 1px solid var(--shell-border); }
  .menu-fecha { position: fixed; z-index: 12; top: 0; right: env(safe-area-inset-right, 0); display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: var(--shell-hover); color: var(--shell-text); }
  .menu-fecha::before, .menu-fecha::after { content: ""; position: absolute; width: 1.25rem; height: 2px; background: currentColor; transform: rotate(45deg); }
  .menu-fecha::after { transform: rotate(-45deg); }
  .menu:target + .menu-fundo { display: block; position: fixed; z-index: 9; inset: 3rem 0 0; background: rgb(22 22 22 / .55); }
  .menu-idiomas { display: flex; margin: 1.5rem max(1rem, env(safe-area-inset-left)) 0; border: 1px solid var(--shell-border); }
  .menu-idiomas a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3rem; color: var(--shell-text-2); font-size: .875rem; text-decoration: none; }
  .menu-idiomas a + a { border-left: 1px solid var(--shell-border); }
  .menu-idiomas a[aria-current] { color: var(--shell-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--shell-text); }
  @media (hover: hover) { .menu-abre:hover, .menu a:hover { background: var(--shell-hover); color: var(--shell-text); } }
}
@media (min-width: 42rem) and (max-width: 61.99rem) { .menu > a:not(.menu-fecha) { padding: 0 max(2rem, env(safe-area-inset-right)) 0 max(2rem, env(safe-area-inset-left)); } }
/* Celular estreito: marca, botão e menu cabem a 320px com folga de 12px; o botão não encosta no menu. */
@media (max-width: 23.99rem) {
  .topo .marca { padding-right: .75rem; }
  .topo .botao { padding: 0 .75rem; }
}
@media (min-width: 40rem) { .menu > a.menu-entrar, .menu > .menu-idiomas { display: none; } }

/* ---- Botões: retos, folgas iguais, seta a 16px da borda ---- */
.botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0 1rem; border: 1px solid transparent; background: var(--interactive); color: #fff; font-size: 1rem; line-height: 1.25; text-decoration: none; transition: background-color .11s, border-color .11s, color .11s; }
.botao .seta { flex: none; width: 1rem; height: 1rem; transition: transform .11s; }
.botao.secundario { background: transparent; color: var(--link); border-color: currentColor; }
@media (hover: hover) {
  a:hover { color: var(--link-hover); }
  .botao:hover { background: var(--interactive-hover); color: #fff; }
  .botao.secundario:hover { background: var(--interactive); border-color: var(--interactive); color: #fff; }
  .botao:hover .seta { transform: translateX(2px); }
}
.botao:active, .botao.secundario:active { background: var(--interactive-active); border-color: var(--interactive-active); color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.5rem; }
.acoes .botao { flex: 1 1 100%; }
@media (min-width: 40rem) {
  .acoes { max-width: 34rem; }
  .acoes .botao { flex: 1 1 auto; }
}
.via-email { margin-top: .75rem; font-size: .875rem; letter-spacing: .16px; color: var(--text-2); }
.via-email a { white-space: nowrap; }

/* ---- Abertura: o texto e o recibo do tempo de resposta ---- */
.abertura { padding: 1.5rem 0 0; background: var(--layer); border-bottom: 1px solid var(--border); }
.abertura-grade { display: grid; gap: 1.5rem; }
@media (min-width: 42rem) { .abertura { padding: 3rem 0 4rem; } .abertura-grade { gap: 3rem; } }
@media (min-width: 66rem) {
  .abertura { padding: 4rem 0 5rem; }
  .abertura-grade { grid-template-columns: 5fr 7fr; column-gap: var(--grade-gap); align-items: start; }
  /* Na coluna de 5/12 o display acompanha a largura e fica em 3 linhas. */
  .abertura h1 { font-size: clamp(2.25rem, 4.3vw - .3rem, 3rem); }
}
h1 { font-weight: 300; font-size: var(--t-display); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.lead { margin-top: 1rem; font-size: 1.125rem; line-height: 1.5; color: var(--text-2); max-width: 34rem; text-wrap: pretty; }
@media (min-width: 42rem) { .lead { margin-top: 1.25rem; } }
@media (max-width: 29.99rem) { .abertura { padding-top: 1rem; } .abertura-grade { gap: 1.25rem; } .abertura .lead { font-size: 1rem; } .abertura .acoes { margin-top: 1.25rem; } .abertura .via-email, .abertura .nota { margin-top: .5rem; } }
/* No celular a primeira tela é do recibo; o rótulo da abertura repete o que o lead já diz. */
@media (max-width: 41.99rem) { .abertura .sobre { display: none; } }
/* Nota de confiança: um fato, com o visto desenhado em CSS (a Plex servida não tem U+2713). */
.nota { display: flex; gap: .5rem; margin-top: .75rem; max-width: 34rem; font-size: .875rem; letter-spacing: .16px; color: var(--text); text-wrap: pretty; }
.nota::before { content: ""; flex: none; width: .375rem; height: .75rem; margin: .1875rem .375rem 0 .25rem; border: solid var(--text); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Recibo: o trecho do trace e o perfil que fecha em 100%. */
.recibo { margin: 0 -1rem; background: var(--layer-2); border-top: 1px solid var(--border); }
.recibo-rotulo { margin: 0 0 .75rem; padding: 0; font-size: .875rem; font-weight: 600; line-height: 1.25rem; letter-spacing: .16px; color: var(--text); text-align: left; }
.recibo caption { caption-side: top; }
.recibo-trace, .recibo-perfil { padding: 1rem; }
.trace code { display: block; padding-left: 2ch; text-indent: -2ch; font-size: .75rem; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.trace code + code { margin-top: .25rem; }
/* Os valores que viram linha do perfil levam o marca-texto da console. */
.trace b { padding: 0 .125rem; font-weight: 400; color: var(--text); background: var(--hot); box-shadow: inset 0 -2px 0 var(--hot-edge); white-space: nowrap; }
.recibo table { width: 100%; border-collapse: collapse; font-size: .875rem; letter-spacing: .16px; font-variant-numeric: tabular-nums; }
.recibo thead th { padding: 0 0 .5rem; font-size: .75rem; font-weight: 400; letter-spacing: .32px; color: var(--text-2); text-align: left; border-bottom: 1px solid var(--border); }
.recibo tbody th, .recibo tfoot th { padding: .625rem 1rem .625rem 0; font-weight: 400; text-align: left; overflow-wrap: anywhere; }
.recibo td { padding: .625rem 0; }
.recibo .num { padding-left: .75rem; text-align: right; white-space: nowrap; }
.recibo thead .num { padding-left: .75rem; }
.recibo tbody tr + tr { border-top: 1px solid var(--border); }
/* O traço da soma: fio escuro sobre o total. */
.recibo tfoot tr { border-top: 1px solid var(--text); }
.recibo tfoot th, .recibo tfoot .num { font-weight: 600; }
.recibo tbody tr:nth-child(1) { --p: 71.3%; }
.recibo tbody tr:nth-child(2) { --p: 18.5%; --atraso: .08s; }
.recibo tbody tr:nth-child(3) { --p: 4.1%; --atraso: .16s; }
.recibo tbody tr:nth-child(4) { --p: 2.8%; --atraso: .24s; }
.recibo tbody tr:nth-child(5) { --p: 3.3%; --atraso: .32s; }
.recibo tfoot tr { --atraso: .45s; }
/* Barra com trilho (a parte de 100%); no total, as cinco partes enchem a barra. */
.recibo .barra { display: none; width: 36%; }
.recibo .barra span, .recibo tbody th::after, .recibo tfoot th::after { display: block; height: .5rem; background: linear-gradient(var(--bar), var(--bar)) 0 0 / var(--p) 100% no-repeat, var(--bar-track); animation: enche .9s cubic-bezier(.2, 0, .38, .9) both; animation-delay: var(--atraso, 0s); }
.recibo .barra .soma, .recibo tfoot th::after { background: linear-gradient(90deg, var(--bar) 0 calc(71.3% - 2px), transparent 0 71.3%, var(--bar) 0 calc(89.8% - 2px), transparent 0 89.8%, var(--bar) 0 calc(93.9% - 2px), transparent 0 93.9%, var(--bar) 0 calc(96.7% - 2px), transparent 0 96.7%, var(--bar) 0) 0 0 / 100% 100% no-repeat; }
@keyframes enche { from { background-size: 0 100%; } }
@media (max-width: 39.99rem) {
  .recibo thead th { padding: 0; border: 0; }
  .recibo thead span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .recibo tbody th, .recibo tfoot th { padding: .5rem 0; }
  .recibo td { padding: .5rem 0; }
  .recibo tbody th::after, .recibo tfoot th::after { content: ""; height: .375rem; margin-top: .375rem; }
  .recibo tbody td.num, .recibo tfoot td.num { vertical-align: top; }
}
/* Linhas de 36px a partir do tablet: no notebook de 1366x768 o recibo fecha, com a legenda, na primeira tela. */
@media (min-width: 40rem) {
  .recibo .barra { display: table-cell; }
  .recibo tbody th, .recibo tfoot th, .recibo td { padding-top: .4375rem; padding-bottom: .4375rem; }
}
.achado { margin-top: 1.25rem; padding: .75rem 1rem; background: var(--layer); border-left: 3px solid var(--warning); font-size: .875rem; letter-spacing: .16px; color: var(--text-2); text-wrap: pretty; }
.achado strong { display: block; margin-bottom: .25rem; color: var(--text); font-weight: 600; }
.recibo figcaption { padding: .75rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; letter-spacing: .32px; color: var(--text-2); text-wrap: balance; text-wrap: pretty; }
/* No celular o perfil vem primeiro, logo depois dos botões; o trace fica embaixo, como origem. */
@media (max-width: 41.99rem) {
  .recibo { display: flex; flex-direction: column; }
  .recibo-perfil { order: -1; }
  .recibo-trace { border-top: 1px solid var(--border); }
}
@media (min-width: 42rem) {
  .recibo { margin: 0; border: 1px solid var(--border); }
  .recibo-trace { padding: 1.25rem 1.25rem 1.125rem; border-bottom: 1px solid var(--border); }
  .recibo-perfil { padding: 1.25rem; }
  .recibo figcaption { padding: .75rem 1.25rem; }
}

/* ---- Seções ---- */
.secao { padding: 3rem 0; }
@media (min-width: 42rem) { .secao { padding: 4rem 0; } }
@media (min-width: 66rem) { .secao { padding: 5rem 0; } }
.alternada { background: var(--layer); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
h2 { font-weight: 300; font-size: var(--t-titulo); line-height: 1.2; max-width: 30ch; text-wrap: balance; }
.intro { margin-top: 1rem; max-width: 38rem; font-size: 1.125rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 42rem) { .intro { margin-top: 1.25rem; } }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; text-wrap: balance; }

/* Passos: trilha com índice mono num quadro de 2rem. */
/* A trilha fica por baixo do código, que no celular ocupa a largura toda. */
.passos { position: relative; z-index: 0; display: grid; gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: passo; }
@media (min-width: 42rem) { .passos { margin-top: 3rem; } }
.passos > li { position: relative; padding-left: 3rem; counter-increment: passo; }
.passos > li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; font: 400 .875rem/calc(2rem - 2px) var(--mono); text-align: center; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); }
.passos > li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: calc(1rem - .5px); top: 2rem; bottom: -2rem; border-left: 1px solid var(--border-strong); }
.passos h3 { padding-top: .25rem; }
.passos p { margin-top: .375rem; max-width: 36rem; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 66rem) {
  .passos { grid-template-columns: 5fr 7fr; column-gap: var(--grade-gap); row-gap: 2.5rem; }
  .passos > li:first-child { grid-row: 1 / span 2; }
  .passos > li:first-child::after { content: none; }
  .passos > li:nth-child(2)::after { bottom: -2.5rem; }
}
/* Código com cara de terminal, como o SQL da console. */
.codigo { margin: 1.25rem 0 0; padding: 1rem; overflow-x: auto; background: var(--shell); color: var(--shell-text); border: 1px solid var(--shell-border); border-left: 3px solid var(--border-strong); font-size: .75rem; line-height: 1.6; }
.codigo .com { color: var(--shell-text-2); }
@media (max-width: 41.99rem) { .passos .codigo { margin-left: -3rem; } }
@media (min-width: 42rem) { .codigo { padding: 1.25rem 1.5rem; font-size: .8125rem; } }
@media (max-width: 22rem) { .codigo { white-space: pre-wrap; overflow-wrap: anywhere; } }
@media (min-width: 66rem) and (max-width: 74.99rem) { .passos .codigo { margin-left: -3rem; } }
@media (min-width: 42rem) and (max-width: 65.99rem) { .comparacao { max-width: 44rem; } .passos .codigo { max-width: 36rem; } }

/* ---- Relatório ---- */
.rel-grade { display: grid; }
.captura { position: relative; max-width: 44rem; margin: 2rem 0 0; background: var(--layer-2); border: 1px solid var(--border); }
.captura img { width: 100%; }
.captura figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: .25rem 1rem; border-top: 1px solid var(--border); font-size: .875rem; letter-spacing: .16px; color: var(--text-2); }
.captura figcaption span { padding: .5rem 0; }
.captura figcaption a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: none; }
/* A imagem inteira abre o exemplo: o link da legenda cobre o quadro. */
.captura figcaption a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  .captura:hover { border-color: var(--border-strong); }
  .captura figcaption a:hover { text-decoration: underline; }
  .captura figcaption a:hover .seta { transform: translateX(2px); }
}
.captura figcaption .seta { flex: none; transition: transform .11s; }
.captura:active { border-color: var(--interactive); }
.comparacao { display: grid; gap: 1px; margin: 2rem 0 0; background: var(--border); border: 1px solid var(--border); }
.comparacao > div { display: grid; gap: .25rem 1.5rem; padding: 1rem 1.25rem; background: var(--layer-2); }
.comparacao dt { font: 400 .75rem/1.5rem var(--mono); letter-spacing: .32px; color: var(--text-2); }
.comparacao dd { margin: 0; color: var(--text-2); text-wrap: pretty; }
.comparacao > div:last-child dd { color: var(--text); }
@media (min-width: 30rem) { .comparacao > div { grid-template-columns: 5.5rem minmax(0, 1fr); } }
.itens { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.itens > div { padding-left: 1rem; border-left: 2px solid var(--border-strong); }
.itens p { margin-top: .25rem; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 42rem) {
  .captura { margin-top: 3rem; }
  .itens { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; margin-top: 3rem; }
}
@media (min-width: 66rem) {
  .rel-grade { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr auto; column-gap: var(--grade-gap); }
  .rel-texto { grid-column: 1; grid-row: 1; }
  .captura { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin-top: 0; align-self: start; }
  .comparacao { grid-column: 1; grid-row: 2; align-self: start; }
  .itens { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; }
}

/* ---- Privacidade: faixa invertida, fatos em ladrilhos ---- */
/* A faixa troca os tokens, e o que estiver dentro dela já sai com as cores certas. */
.inversa { --bg: var(--inverse); --text: var(--inverse-text); --text-2: var(--inverse-text-2); --border: var(--inverse-border); --link: #78a9ff; --link-hover: #a6c8ff; --focus: #fff; background: var(--bg); color: var(--text); }
.fatos { display: grid; gap: 1px; margin: 2rem 0 0; background: var(--border); border: 1px solid var(--border); }
.fatos > div { padding: 1.25rem; background: var(--bg); }
.fatos dt { font-size: 1.125rem; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.fatos dd { margin: .375rem 0 0; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 41.99rem) { .fatos { margin-left: -1rem; margin-right: -1rem; border-width: 1px 0; } .fatos > div { padding: .875rem 1rem 1rem; } }
@media (min-width: 42rem) { .fatos { grid-template-columns: 1fr 1fr; margin-top: 3rem; } .fatos > div { padding: 1.5rem; } }
@media (min-width: 66rem) { .fatos { grid-template-columns: repeat(3, 1fr); } }
.priv-mais { margin-top: 1.5rem; }
.priv-mais a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.priv-mais .seta { flex: none; transition: transform .11s; }
@media (hover: hover) { .priv-mais a:hover .seta { transform: translateX(2px); } }

/* ---- Perguntas: details nativo, sem script ---- */
.perg-grade { display: grid; gap: 2rem; }
.perg-outra { margin-top: 1rem; color: var(--text-2); }
.perg-outra a { white-space: nowrap; }
details { border-top: 1px solid var(--border); }
details:last-child { border-bottom: 1px solid var(--border); }
summary { position: relative; margin: 0 -1rem; padding: 1rem 3rem 1rem 1rem; font-size: 1.125rem; line-height: 1.4; list-style: none; cursor: pointer; text-wrap: balance; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 1.25rem; top: 1.375rem; width: .5rem; height: .5rem; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); transition: transform .15s; }
details[open] summary::after { top: 1.625rem; transform: rotate(-135deg); }
summary:focus-visible { outline-offset: -2px; }
@media (hover: hover) { summary:hover { background: var(--layer); } }
summary:active { background: var(--layer-hover); }
details p { padding: 0 0 1.25rem; max-width: 36rem; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 42rem) { details p { padding-right: 3rem; } }
@media (min-width: 66rem) {
  .perg-grade { grid-template-columns: 5fr 7fr; column-gap: var(--grade-gap); align-items: start; }
  .perg-lado { position: sticky; top: 5rem; }
}

/* ---- Chamada final: cartão com a borda de 3px da console ---- */
.chamada { background: var(--layer); border-top: 1px solid var(--border); }
.chamada-cartao { display: grid; gap: 1.5rem; padding: 2rem 1.25rem; background: var(--layer-2); border: 1px solid var(--border); border-top: 3px solid var(--interactive); }
.chamada .acoes { margin-top: 0; }
@media (min-width: 42rem) { .chamada-cartao { gap: 2rem; padding: 2.5rem 2rem; } }
@media (min-width: 66rem) { .chamada-cartao { grid-template-columns: 7fr 5fr; column-gap: var(--grade-gap); align-items: center; padding: 3rem; } }

/* ---- Documentos legais e página 404 ---- */
.doc-topo { padding: 2rem 0; background: var(--layer); border-bottom: 1px solid var(--border); }
.doc-topo h1 { font-size: var(--t-titulo); line-height: 1.2; max-width: 30ch; }
.doc-topo .lead { max-width: 44rem; }
@media (min-width: 42rem) { .doc-topo { padding: 3rem 0; } }
.doc-erro { padding: 3rem 0 4rem; }
@media (min-width: 42rem) { .doc-erro { padding: 5rem 0 6rem; } }
.doc-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 4rem; }
@media (min-width: 42rem) { .doc-grade { padding-top: 2.5rem; padding-bottom: 5rem; } }
.doc-indice-curto ul, .doc-indice-lado ul { margin: 0; padding: 0; list-style: none; }
/* Índice no celular e no tablet: fechado, para o texto começar na primeira tela. */
.doc-indice-curto details { border: 1px solid var(--border); }
.doc-indice-curto summary { margin: 0; padding: .75rem 3rem .75rem 1rem; font-size: 1rem; font-weight: 600; }
.doc-indice-curto summary::after { top: 1.125rem; }
.doc-indice-curto details[open] summary::after { top: 1.375rem; }
.doc-indice-curto a { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem; border-top: 1px solid var(--border); color: var(--text); line-height: 1.375; text-decoration: none; }
@media (hover: hover) { .doc-indice-curto a:hover { background: var(--layer); color: var(--text); } }
/* No notebook o índice fica ao lado do texto e acompanha a rolagem. */
.doc-indice-lado { display: none; }
@media (min-width: 66rem) {
  .doc-grade { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--grade-gap); padding-top: 3rem; }
  .doc-indice-curto { display: none; }
  .doc-indice-lado { display: block; position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
.doc-indice-lado .sobre { margin-bottom: .5rem; }
.doc-indice-lado a { display: block; padding: .375rem .5rem .375rem 1rem; border-left: 1px solid var(--border); color: var(--text-2); font-size: .875rem; line-height: 1.25rem; letter-spacing: .16px; text-decoration: none; }
@media (hover: hover) { .doc-indice-lado a:hover { background: var(--layer); color: var(--text); border-left-color: var(--border-strong); } }
/* O índice rola e corta o que passa da borda: o foco fica por dentro do link. */
.doc-indice-lado a:focus-visible { outline-offset: -2px; }

/* Texto longo: linha de até 44rem, entrelinha folgada, cada seção aberta por um filete. */
.doc-texto { max-width: 44rem; line-height: 1.625; }
.doc-texto > * + * { margin-top: 1rem; }
.doc-texto h2 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); font-size: 1.5rem; font-weight: 400; line-height: 1.3; max-width: none; }
.doc-texto h3 { margin-top: 2rem; font-size: 1.125rem; }
.doc-texto > h2 + *, .doc-texto > h3 + * { margin-top: .75rem; }
.doc-texto p, .doc-texto li { text-wrap: pretty; }
.doc-texto ul, .doc-texto ol { padding-left: 1.25rem; }
.doc-texto li + li, .doc-texto li > ul { margin-top: .5rem; }
.doc-texto strong { font-weight: 600; }
.doc-texto a { overflow-wrap: anywhere; }
.doc-texto code { padding: 0 .25rem; background: var(--layer); font-size: .875em; overflow-wrap: anywhere; }
.doc-vigencia { font: 400 .75rem/1rem var(--mono); letter-spacing: .32px; color: var(--text-2); }
.doc-traducao { padding: .75rem 1rem; background: var(--layer); border-left: 3px solid var(--border-strong); font-size: .875rem; line-height: 1.5; color: var(--text-2); }
/* Tabela larga rola dentro do quadro; no celular o quadro vai até a borda da tela. */
.tabela { margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; overflow-x: auto; }
.doc-texto > .tabela { margin-top: 1.5rem; }
.tabela:focus-visible { outline-offset: -2px; }
.doc-texto table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.5; letter-spacing: .16px; }
.doc-texto caption { caption-side: top; padding: 0 0 .5rem; font-weight: 600; text-align: left; }
.doc-texto th, .doc-texto td { min-width: 9rem; padding: .625rem .75rem; vertical-align: top; text-align: left; border-bottom: 1px solid var(--border); text-wrap: pretty; }
.doc-texto thead th { background: var(--layer); border-bottom-color: var(--border-strong); }
.doc-texto th { font-weight: 600; }
@media (min-width: 42rem) { .tabela { margin-left: 0; margin-right: 0; padding: 0; } }
/* No celular a legenda cabe na tela e fica parada enquanto a tabela rola. */
@media (max-width: 41.99rem) { .doc-texto caption { position: sticky; left: 0; max-width: calc(100vw - 2rem); } }

/* ---- Rodapé: mapa da página ---- */
.rodape { padding: 3rem 0 1.5rem; background: var(--shell); color: var(--shell-text-2); font-size: .875rem; letter-spacing: .16px; --focus: #fff; }
.rodape a { color: var(--shell-text); text-decoration: none; }
@media (hover: hover) { .rodape a:hover { color: var(--shell-text); text-decoration: underline; text-decoration-thickness: 1px; } }
.rodape-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
.rodape-marca, .rodape-contato, .rodape .direitos { grid-column: 1 / -1; }
/* Contato e idiomas lado a lado no celular, um embaixo do outro a partir do tablet. */
.rodape-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.rodape-contato .rodape-rotulo + p { margin-bottom: 0; }
/* Símbolo de acessibilidade em destaque (LBI, art. 63, § 1º), com a declaração. */
.acessivel { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin-top: 1rem; }
.acessivel svg { flex: none; width: 2rem; height: 2rem; }
/* A marca do rodapé volta ao topo, onde estão o menu e o pedido de acesso. */
.rodape .marca { display: inline-flex; min-height: 2.75rem; font-size: 1rem; }
.rodape-lema { margin-top: .25rem; max-width: 22rem; color: var(--shell-text-2); text-wrap: balance; }
.rodape-rotulo { margin: 0 0 .25rem; font: 400 .75rem/1rem var(--mono); letter-spacing: .32px; color: var(--shell-text-2); }
.rodape-rotulo + p { margin-bottom: 1.5rem; }
.rodape nav a, .rodape-rotulo + p a { display: flex; align-items: center; min-height: 2.75rem; }
.rodape nav a[aria-current] { font-weight: 600; }
.rodape .direitos { padding-top: 1.5rem; border-top: 1px solid var(--shell-border); font-size: .75rem; letter-spacing: .32px; }
/* Abaixo de 352px (ou com o texto grande) o e-mail não cabe em meia coluna: uma coluna só. */
@media (max-width: 21.99rem) { .rodape-grade, .rodape-contato { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 42rem) {
  .rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape-contato { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: start; }
}
@media (min-width: 66rem) {
  .rodape-grade { grid-template-columns: 4fr 2.75fr 2.75fr 2.5fr; column-gap: var(--grade-gap); }
  .rodape-marca { grid-column: auto; }
}

/* ---- Celular deitado e janela baixa ---- */
@media (orientation: landscape) and (max-height: 34rem) {
  .abertura .sobre { display: none; }
  h1 { font-size: 2.25rem; }
  .lead { margin-top: .75rem; font-size: 1rem; }
  .acoes { margin-top: 1.25rem; }
  .abertura { padding: 2rem 0 2.5rem; }
  .secao { padding: 2.5rem 0; }
  .passos { margin-top: 2rem; }
}
@media (max-height: 16rem) { .topo { position: relative; } }
@media (max-width: 15rem) { .topo .botao { display: none; } }

/* ---- Movimento reduzido e cores forçadas ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .botao:hover .seta, .captura figcaption a:hover .seta, .priv-mais a:hover .seta { transform: none; }
}
@media (forced-colors: active) {
  .recibo .barra span, .recibo tbody th::after, .recibo tfoot th::after { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 0 0 / var(--p, 100%) 100% no-repeat, Canvas; outline: 1px solid CanvasText; }
  .recibo .barra .soma, .recibo tfoot th::after { background: linear-gradient(90deg, CanvasText 0 calc(71.3% - 2px), Canvas 0 71.3%, CanvasText 0 calc(89.8% - 2px), Canvas 0 89.8%, CanvasText 0 calc(93.9% - 2px), Canvas 0 93.9%, CanvasText 0 calc(96.7% - 2px), Canvas 0 96.7%, CanvasText 0); }
  .menu-abre::before, .menu-fecha::before, .menu-fecha::after { forced-color-adjust: none; background: ButtonText; box-shadow: 0 -.375rem 0 ButtonText, 0 .375rem 0 ButtonText; }
  .menu-fecha::before, .menu-fecha::after { box-shadow: none; }
  .idiomas a[aria-current], .menu-idiomas a[aria-current], .rodape nav a[aria-current] { text-decoration: underline 2px; text-underline-offset: .4em; }
  .trace b { text-decoration: underline; }
  .passos > li::before { border-color: CanvasText; }
}