/*
  dicode.ai — design system (Opção F · Suíço)
  Fontes: Archivo 800 expandida (títulos, font-stretch 112%), Archivo 400/500 (texto),
  Fragment Mono (rótulos e números).
  Cores: branco #FFFFFF · preto #0A0A0A · laranja #FF4F00 (sempre com texto preto) ·
  cinza #626262 · superfície #F3F3F1 · linha #E4E4E4.
  Regras: cantos retos, sem sombras, sem gradientes, linhas de 1px,
  seções numeradas (00 — Início, 01 — Ferramentas...).
*/

/* ---------- Fontes (hospedadas no próprio site, licença OFL) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fragment-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fragment-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --branco: #FFFFFF;
  --preto: #0A0A0A;
  --laranja: #FF4F00;
  --cinza: #626262;
  --superficie: #F3F3F1;
  --linha: #E4E4E4;

  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'Fragment Mono', ui-monospace, Menlo, monospace;

  --largura: 1360px;
  --margem: 40px;
  --painel: 48px;
}
@media (max-width: 640px) {
  :root { --margem: 20px; --painel: 24px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
/* Efeito de passar o mouse só em aparelho com mouse: no toque, ele ficava "preso" depois do toque
   (o botão parecia desligado ou escolhido). */
@media (hover: hover) {
  a:hover, .botao:hover { opacity: .7; }
}
/* hidden sempre esconde, mesmo quando a classe do elemento define display (ex.: .campo, .opcoes). */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }

.visualmente-oculto {
  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: var(--margem); top: 8px; z-index: 10;
  padding: 12px 18px; background: var(--preto); color: var(--branco);
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* ---------- Layout ---------- */
.faixa { padding: 0 var(--margem); }
.miolo { max-width: var(--largura); margin: 0 auto; }
.com-linha { border-bottom: 1px solid var(--preto); }

/* ---------- Tipografia ---------- */
.rotulo {
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--cinza);
}
.titulo-gigante,
.titulo-secao,
.titulo-destaque,
.titulo-chamada {
  margin: 0;
  font-family: var(--fonte);
  font-stretch: 112%;
  font-weight: 800;
}
.titulo-gigante { font-size: clamp(40px, 11vw, 168px); line-height: .86; letter-spacing: -0.055em; }
.titulo-secao { font-size: clamp(36px, 4.6vw, 72px); line-height: .95; letter-spacing: -0.05em; }
.titulo-destaque { font-size: clamp(44px, 6vw, 92px); line-height: .86; letter-spacing: -0.055em; }
.titulo-chamada { font-size: clamp(40px, 6vw, 96px); line-height: .9; letter-spacing: -0.05em; }
.ponto { color: var(--laranja); }
.lead { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 500; }

/* Seta "→" no meio do texto (ex.: rótulo de formato "PDF → DOCX"), pela macro com_setas
   de partes/icones.html. As fontes do site não têm o desenho da seta (U+2192): sem isto,
   cada aparelho a desenharia com uma fonte diferente. Traço de 1px na cor do texto,
   com a mesma ponta da seta dos desenhos; o caractere continua escondido no texto. */
.seta-texto {
  display: inline-block;
  width: 1em;
  height: .5833em;
  vertical-align: .08em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.seta-texto path { vector-effect: non-scaling-stroke; }

/* ---------- Texto corrido (páginas de texto e de ferramenta) ----------
   O HTML vem do Markdown (web/conteudo/<idioma>/*.md, pelo build.py). Títulos "## 01 — Nome":
   linha preta de 1px em cima, o número em Fragment Mono (.texto-num) e o nome em Archivo 800
   expandida. Listas com marcador quadrado preto; listas numeradas com "01", "02" em mono
   (o ::marker respeita o número inicial da lista). Tabelas: ver "Tabelas" logo abaixo. */
.texto { max-width: 720px; font-size: 17px; line-height: 1.65; overflow-wrap: break-word; }
.texto > :first-child { margin-top: 0; }
.texto h2 {
  margin: 56px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--preto);
  font-stretch: 112%;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.texto-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-stretch: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cinza);
}
.texto h3 { margin: 32px 0 8px; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.texto h4 { margin: 24px 0 8px; font-size: 17px; line-height: 1.4; font-weight: 700; }
.texto :is(h2, h3, h4) { scroll-margin-top: 24px; }
.texto p, .texto ul, .texto ol { margin: 0 0 16px; }
.texto strong { font-weight: 700; }
.texto a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.texto ul, .texto ol { padding-left: 28px; }
.texto ol { padding-left: 36px; }
.texto ul { list-style-type: square; }
.texto ul > li::marker { color: var(--preto); }
.texto ol > li::marker {
  content: counter(list-item, decimal-leading-zero) "\2002";
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--cinza);
}
.texto li + li { margin-top: 6px; }
.texto li > :is(ul, ol) { margin: 6px 0 0; }
.texto code {
  padding: 0 4px;
  background: var(--superficie);
  font-family: var(--fonte-mono);
  font-size: .82em;
  overflow-wrap: break-word;
}
.texto hr { margin: 40px 0; border: 0; border-top: 1px solid var(--linha); }
@media (max-width: 640px) {
  .texto { font-size: 16px; }
  .texto h2 { margin-top: 44px; font-size: 24px; }
  .texto h3 { font-size: 19px; }
}

/* Tabelas do texto. Cada <table> fica num contêiner que rola de lado (.tabela, com nome para
   leitor de tela e foco pelo teclado). Largura mínima por coluna (--colunas vem do build.py):
   8,5rem no celular, onde tabelas de 2 colunas cabem e as mais largas rolam; 7rem a partir
   de 641 px, onde até 6 colunas cabem nos 720 px do texto. A dica
   (.tabela-dica) só aparece quando a tabela não cabe (texto.js) e fica fora do fluxo da página,
   então a página não pula. No celular a tabela vai até a borda da tela, mostrando que continua. */
.tabela-bloco { position: relative; margin: 48px 0 28px; }
.tabela-dica { display: none; position: absolute; left: 0; bottom: 100%; margin: 0 0 6px; }
.tabela-bloco--rola .tabela-dica { display: block; }
.tabela { overflow-x: auto; overscroll-behavior-x: contain; }
.tabela:focus-visible { outline-offset: 4px; }
.tabela table {
  width: 100%;
  min-width: calc(var(--colunas, 2) * var(--coluna-min, 7rem));
  border-collapse: collapse;
  border-top: 1px solid var(--preto);
  font-size: 15px;
  line-height: 1.5;
}
.tabela th, .tabela td { padding: 12px 20px 12px 0; text-align: left; vertical-align: top; }
.tabela :is(th, td):last-child { padding-right: 0; }
.tabela th {
  vertical-align: bottom;
  border-bottom: 1px solid var(--preto);
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--cinza);
}
.tabela td { border-bottom: 1px solid var(--linha); }
@media (max-width: 640px) {
  .tabela { --coluna-min: 8.5rem; margin-right: calc(-1 * var(--margem)); padding-right: var(--margem); }
  .tabela table { font-size: 14px; }
}

/* ---------- Página de texto: abertura, índice e texto ----------
   Índice das seções ("Nesta página") ao lado do texto, só a partir de 1100 px; ele fica parado
   enquanto a página rola. No celular o texto vem direto, sem o índice. */
.pagina-titulo { margin-top: 40px; }
@media (max-width: 640px) { .pagina-titulo { margin-top: 28px; } }
.indice { display: none; }
@media (min-width: 1100px) {
  .pagina-texto--indice { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 720px); column-gap: 80px; align-items: start; }
  .indice {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  .indice ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
  .indice li { border-bottom: 1px solid var(--linha); }
  .indice a { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: 8px 0; font-size: 14px; line-height: 1.4; }
  .indice-num { font-family: var(--fonte-mono); font-size: 12px; color: var(--cinza); }
  .indice a > span:only-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) and (hover: hover) {
  .indice a:hover { opacity: 1; }
  .indice a:hover > span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

/* ---------- Página 404 (endereço que não existe) ----------
   Abertura da página inicial (.abertura) com o título gigante; embaixo, a frase à esquerda e o
   botão para a página inicial à direita, alinhados pela base. No celular o botão ocupa a
   largura toda. Depois, "01 — Ferramentas" com a lista numerada (.cartoes--lista). */
.erro-titulo { text-wrap: balance; }
.erro-base { align-items: flex-end; justify-content: space-between; }
@media (max-width: 640px) {
  .erro-base .botao { width: 100%; justify-content: center; }
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--fonte);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
/* O ponto de "dicode.ai" existe no texto (leitores de tela e Google leem "dicode.ai"),
   mas aparece como o quadrado laranja. */
.logo i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px;
  background: var(--laranja);
  color: transparent;
  font-size: 0;
  font-style: normal;
  overflow: hidden;
}

/* ---------- Cabeçalho ---------- */
.cabecalho .miolo {
  padding: 20px 0;
  border-bottom: 1px solid var(--preto);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 40px;
}
.cabecalho nav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  font-size: 15px;
  font-weight: 500;
}
.cabecalho .acoes { display: flex; align-items: center; gap: 20px; font-size: 15px; font-weight: 500; }
.cabecalho .entrar { padding: 12px 0; }
/* Área de toque de 44 px nos links do menu (11 px em cima e embaixo do texto de 22,5 px). */
.cabecalho nav a { display: inline-block; padding: 11px 0; }
/* Logo: área de toque de 44 px (texto de 33 px), com margem negativa para o cabeçalho não mudar. */
.cabecalho .logo { padding: 5.5px 0; margin: -5.5px 0; }
@media (max-width: 760px) {
  .cabecalho .miolo { gap: 8px 24px; padding: 14px 0; }
  .cabecalho .acoes { order: 2; margin-left: auto; }
  .cabecalho nav { order: 3; flex-basis: 100%; gap: 0 20px; }
  .cabecalho nav a { padding: 11px 0; }
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border: 0;
  border-radius: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.botao svg { flex: none; }
.botao--p { gap: 8px; padding: 12px 18px; font-size: 15px; font-weight: 500; }
.botao--g { font-size: 17px; padding: 18px 28px; }
.botao--contorno { background: transparent; color: var(--preto); border: 1px solid var(--preto); padding: 15px 21px; }
.botao[disabled] { background: var(--linha); color: var(--cinza); cursor: not-allowed; opacity: 1; }
.botao.botao--carregando { position: relative; overflow: hidden; color: transparent; cursor: progress; }
/* Arquivo ainda sendo lido: "Carregando…" no lugar do rótulo (que fica, transparente, para o
   botão não mudar de largura) e uma faixa correndo embaixo (ui.js, permitirExecutar). */
.botao.botao--carregando::after {
  content: attr(data-carregando);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; color: var(--preto); white-space: nowrap;
}
.botao.botao--carregando::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 35%; height: 3px;
  background: var(--preto);
  animation: botao-carregando 1.2s ease-in-out infinite;
}
/* Chegando de outra página com o arquivo (assets/js/chegando.js marca o <html>; o ui.js tira): o
   "Selecionar arquivo" já nasce como "Trazendo o arquivo…", com a mesma faixa correndo. */
html[data-chegando] [data-ui="selecionar"] { position: relative; overflow: hidden; color: transparent; cursor: progress; pointer-events: none; }
html[data-chegando] [data-ui="selecionar"]::after {
  content: attr(data-chegando);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; color: var(--preto); white-space: nowrap;
}
html[data-chegando] [data-ui="selecionar"]::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 35%; height: 3px;
  background: var(--preto);
  animation: botao-carregando 1.2s ease-in-out infinite;
}
/* Link que está levando o arquivo para a outra página (inicio.js, ui.js): responde ao toque na hora. */
a[aria-busy="true"] { opacity: .55; cursor: progress; }
@keyframes botao-carregando { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) {
  .botao.botao--carregando::before,
  html[data-chegando] [data-ui="selecionar"]::before { animation: none; width: 100%; opacity: .3; }
}

/* ---------- Miniaturas (desenhos das ferramentas, em SVG) ----------
   Os desenhos ficam em templates/partes/miniaturas.html: um sprite por página (<symbol>)
   e um <use> em cada lugar onde o desenho aparece. As cores vêm só destas classes,
   ligadas aos tokens. Regra: por cima do laranja, só preto (nunca cinza ou branco).
   Variáveis que mudam o desenho de fora (elas passam para dentro do <use>):
     --m-papel  cor da folha (padrão: branco)   --m-texto  linhas de texto (padrão: cinza)
     --mv       0 ou 1: liga o movimento das partes "x-..." (mouse por cima ou foco no cartão)
     --desce    0 ou 1: a folha desce na bandeja (área de soltar com um arquivo por cima) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html[data-app] .sprite { display: none; }
.m { display: block; overflow: visible; stroke-linecap: square; stroke-linejoin: miter; }
.mp, .mpg, .mk, .mkg, .mdk { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mp  { fill: var(--m-papel, var(--branco)); stroke: var(--preto); }  /* folha */
.mpg { fill: var(--linha); stroke: var(--preto); }                    /* folha escaneada */
.mk  { fill: none; stroke: var(--preto); }                            /* traço preto */
.mkg { fill: none; stroke: var(--cinza); }                            /* traço cinza (nunca sobre o laranja) */
.mdk { fill: var(--laranja); stroke: var(--preto); }                  /* laranja com contorno preto */
.mt  { fill: var(--preto); }                                          /* título, quadradinhos */
.mg  { fill: var(--linha); }                                          /* imagem */
.md  { fill: var(--laranja); }                                        /* o que a ferramenta muda */
.ml, .mlk, .mlw { fill: none; stroke-width: 1.5; }
.ml  { stroke: var(--m-texto, var(--cinza)); }                        /* linha de texto */
.mlk { stroke: var(--preto); }
.mlw { stroke: var(--branco); }                                       /* só sobre o preto */
.mlk3 { fill: none; stroke: var(--preto); stroke-width: 2.4; }        /* alça do cadeado */
.mtr  { stroke-dasharray: 2.6 1.4; }                                  /* texto escaneado */
.mtr2 { stroke-dasharray: 4 2.2; }
.mtr3 { stroke-dasharray: 5 1.8 9 1.8; }
.mtr4 { stroke-dasharray: 4 3; }                                      /* tracejado (bandeja, contorno de antes) */
.mcel  { stroke-dasharray: 6 6.6; }                                   /* texto nas células da planilha */
.mcel2 { stroke-dasharray: 8 4; }
.mlegenda { font-family: var(--fonte-mono); font-size: 7px; fill: var(--cinza); }

/* Movimento das partes "x-...": só com o mouse por cima ou o foco do teclado no elemento
   com a classe .anima (ex.: o cartão). Desligado para quem pediu menos movimento (fim do arquivo). */
.x { transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: center; }
.x-seta      { transform: translateX(calc(var(--mv, 0) * 3px)); }
.x-junta-a   { transform: translate(calc(var(--mv, 0) * 4px), calc(var(--mv, 0) * 4px)); }
.x-junta-b   { transform: translate(calc(var(--mv, 0) * -4px), calc(var(--mv, 0) * -4px)); }
.x-separa-a  { transform: translateY(calc(var(--mv, 0) * -4px)); }
.x-separa-b  { transform: translate(calc(var(--mv, 0) * 3px), calc(var(--mv, 0) * 3px)); }
.x-gira      { transform: rotate(calc(var(--mv, 0) * -90deg)); }
.x-reduz     { transform: scale(calc(1 - var(--mv, 0) * .14)); transform-origin: left bottom; }
.x-desliza   { transform: translateX(calc(var(--mv, 0) * 4px)); }
.x-endireita { transform: rotate(calc(var(--mv, 0) * 5deg)); }
.x-celula    { transform: translateY(calc(var(--mv, 0) * 7px)); }
.x-leque-1   { transform: translate(calc(var(--mv, 0) * 3px), calc(var(--mv, 0) * -3px)); }
.x-leque-2   { transform: translate(calc(var(--mv, 0) * 6px), calc(var(--mv, 0) * -6px)); }
.x-desce     { transform: translateY(calc(var(--desce, 0) * 8px)); }
.x-extrai    { transform: translateX(calc(var(--mv, 0) * 4px)); }
.x-sai       { transform: translateY(calc(var(--mv, 0) * -5px)); }
.x-solta     { transform: translate(calc(var(--mv, 0) * 4px), calc(var(--mv, 0) * 3px)); }
.x-estica    { transform: scale(calc(1 + var(--mv, 0) * .12)); transform-origin: left bottom; }
.x-etiqueta  { transform: translateY(calc(var(--mv, 0) * -3px)); }
.x-trava     { animation: var(--travar, none) .6s ease both; }
.x-destrava  { transform: translateY(calc(var(--mv, 0) * -3px)); }
.x-cursor    { animation: var(--piscar, none) 1s steps(1) infinite; }
.x-assina    { stroke-dasharray: 1 2; stroke-linecap: butt; animation: var(--assinar, none) 1s cubic-bezier(.4, 0, .2, 1) both; }
.anima:focus-visible { --mv: 1; --piscar: piscar; --assinar: assinar; --travar: travar; }
@media (hover: hover) {
  .anima:hover { --mv: 1; --piscar: piscar; --assinar: assinar; --travar: travar; }
}
@keyframes piscar  { 50% { visibility: hidden; } }
@keyframes assinar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes travar  { 40% { transform: translateY(-3px); } }

/* ---------- Abertura (00 — Início) ---------- */
.abertura .miolo { padding: 56px 0 72px; border-bottom: 1px solid var(--preto); }
.abertura-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.abertura .titulo-gigante { margin-top: 40px; }
.abertura-base { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 32px; }
.abertura-base .lead { flex: 1 1 320px; max-width: 440px; }
@media (max-width: 640px) {
  .abertura .miolo { padding: 32px 0 48px; }
  .abertura .titulo-gigante { margin-top: 28px; }
  .abertura-base { margin-top: 36px; gap: 24px; }
  .abertura-base .lead { font-size: 18px; }
}

/* Figura "antes → depois" ao lado do título (folhas escaneadas → pilha limpa) */
.abertura-titulo { position: relative; }
.figura-abertura { position: absolute; top: 0; right: 0; width: min(29vw, 360px); height: auto; }
.figura-chega { animation: chegar .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes chegar { from { transform: translateX(-12px); } }
@media (max-width: 359.98px) { .figura-abertura { display: none; } }
@media (max-width: 999.98px) { .figura-abertura .mlegenda { display: none; } }

/* ---------- Área de soltar arquivo ---------- */
.soltar {
  flex: 1.4 1 420px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--preto);
  background: var(--superficie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.soltar-texto { display: flex; flex-direction: column; gap: 4px; }
.soltar-texto strong { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
/* Com um arquivo por cima, a área fica laranja e tudo o que está nela passa a preto
   (regra: por cima do laranja, só preto). Vale também para as sugestões que já estão na tela
   quando a pessoa arrasta um segundo arquivo: números, descrições e linhas entre os itens. */
.soltar.arrastando { background: var(--laranja); }
.soltar.arrastando :is(.rotulo, .num, .desc) { color: var(--preto); }
.soltar.arrastando .lista-item { border-bottom-color: var(--preto); }
.soltar-resultado { flex-basis: 100%; }
.soltar-resultado[hidden] { display: none; }
@media (max-width: 640px) {
  .soltar { padding: 20px; }
  .soltar .botao { width: 100%; justify-content: center; }
}

/* Desenho da bandeja (some abaixo de 480 px) e formatos aceitos em etiquetas de 1px */
.soltar-cab { display: flex; align-items: center; gap: 18px; min-width: 0; }
.soltar-mini { flex: none; width: 88px; height: auto; aspect-ratio: 4 / 3; }
.soltar.arrastando .soltar-mini { --m-papel: var(--laranja); --m-texto: var(--preto); --desce: 1; }
.tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.tipos li {
  padding: 1px 6px;
  border: 1px solid var(--linha);
  background: var(--branco);
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cinza);
}
.soltar.arrastando .tipos li { background: var(--laranja); border-color: var(--preto); color: var(--preto); }
@media (max-width: 640px) {
  .soltar-cab { gap: 14px; }
  .soltar-mini { width: 72px; }
}
@media (max-width: 479.98px) { .soltar-mini { display: none; } }

/* Sugestões depois de escolher o arquivo: linha da lista com o desenho simplificado (inicio.js) */
.soltar-resultado .lista-item {
  display: grid;
  grid-template-columns: 26px 48px minmax(0, 1fr);
  grid-template-areas: "num mini nome" ". mini desc";
  column-gap: 14px;
  padding: 12px 0;
}
.soltar-resultado .num { grid-area: num; align-self: baseline; }
.soltar-resultado .lista-item .nome { grid-area: nome; align-self: baseline; font-size: 19px; }
.soltar-resultado .desc { grid-area: desc; align-self: start; }
.res-mini { grid-area: mini; align-self: center; width: 48px; height: 48px; background: var(--branco); }
/* Sobre o laranja (arrastando): o quadro do desenho fica igual aos outros (superfície)
   e ganha contorno preto de 1px, sem fundo branco encostado no laranja. */
.soltar.arrastando .res-mini { background: var(--superficie); outline: 1px solid var(--preto); }
@media (min-width: 760px) {
  .soltar-resultado .lista-item { grid-template-columns: 40px 48px minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "num mini nome desc"; column-gap: 16px; }
  /* Mesmo peso do seletor do nome lá em cima (.soltar-resultado .lista-item .nome), e vem depois:
     número, nome e descrição ficam todos no meio da linha. */
  .soltar-resultado .lista-item :is(.num, .nome, .desc) { align-self: center; }
  .soltar-resultado .lista-item .nome { font-size: 21px; }
}
@media (hover: hover) {
  .soltar-resultado .lista-item:hover { opacity: 1; }
  .soltar-resultado .lista-item:hover .nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* ---------- Seções ---------- */
.secao .miolo { padding: 72px 0 96px; }
.secao .titulo-secao { margin-top: 16px; }
@media (max-width: 640px) { .secao .miolo { padding: 48px 0 64px; } }

/* Cabeçalho de seção com uma ação à direita (ex.: seletor Lista/Grade) */
.secao-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 32px; }

/* ---------- Lista numerada ---------- */
.colunas {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr));
  column-gap: 40px;
}
.lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.lista-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.lista-item .num { flex: 0 0 40px; font-family: var(--fonte-mono); font-size: 13px; color: var(--cinza); }
.lista-item .nome { flex: 1 1 200px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.lista-item .desc { flex: 1 1 240px; font-size: 15px; color: var(--cinza); }
.lista-item svg { align-self: center; flex: none; }
.lista--compacta .nome { flex-basis: 140px; }
.lista--compacta .desc { flex-basis: 220px; }

/* ---------- Cartões de ferramenta (01 — Ferramentas) ----------
   Cada ferramenta é um cartão com o desenho "antes → depois", o rótulo de formato em mono
   (ex.: PDF → DOCX), o nome e a descrição. Grade com linhas de 1px: 2 colunas no celular,
   3 no tablet e 4 no computador (as colunas têm o mesmo miolo, por isso o calc).
   Na vista "lista" vira a lista numerada da referência, com o desenho simplificado.
     .cartoes--alternavel  segue o seletor Lista/Grade (atributo data-vista no <html>)
     .cartoes--lista       sempre em lista
   Ordem no HTML: número, desenhos, nome, descrição, formato e seta (o leitor de tela lê
   o nome primeiro); a posição na tela vem das áreas da grade. */
.cartoes {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--preto);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cartoes > li { display: flex; min-width: 0; border-bottom: 1px solid var(--linha); }
.cartao {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas: "num seta" "mini mini" "tipo tipo" "nome nome" "desc desc";
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
  padding: 14px 0 20px;
  -webkit-tap-highlight-color: transparent;
}
.cartao:hover { opacity: 1; }
.cartao:focus-visible { outline-offset: -2px; }
.cartao-num { grid-area: num; align-self: center; font-family: var(--fonte-mono); font-size: 13px; line-height: 1.5; color: var(--cinza); font-variant-numeric: tabular-nums; }
.cartao-mini { grid-area: mini; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 10px 0 12px; background: var(--superficie); }
.cartao-simples { grid-area: simples; display: none; width: 48px; height: 48px; background: var(--superficie); }
.cartao-tipo { grid-area: tipo; margin-bottom: 4px; font-family: var(--fonte-mono); font-size: 11px; line-height: 1.5; color: var(--cinza); text-wrap: balance; }
.cartao-nome { grid-area: nome; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.cartao-desc { grid-area: desc; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--cinza); }
.cartao > svg:last-child { grid-area: seta; align-self: center; justify-self: end; width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.cartao:focus-visible .cartao-nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cartao:focus-visible > svg:last-child { transform: translateX(4px); }
@media (hover: hover) {
  .cartao:hover .cartao-nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .cartao:hover > svg:last-child { transform: translateX(4px); }
}
@media (max-width: 759.98px) {
  .cartoes > li:nth-child(odd) { padding-right: 12px; }
  .cartoes > li:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--linha); }
}
@media (min-width: 760px) {
  .cartoes > li { padding: 0 20px; }
  .cartao {
    grid-template-areas: "cab cab" "mini mini" "nome seta" "desc desc";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 16px;
    padding: 20px 0 28px;
  }
  .cartao-num { grid-area: cab; }
  .cartao-tipo { grid-area: cab; align-self: center; justify-self: end; max-width: calc(100% - 28px); margin: 0; font-size: 12px; text-align: right; }
  .cartao-mini { margin: 14px 0 18px; }
  .cartao-nome { align-self: center; font-size: 21px; }
  .cartao-desc { margin-top: 4px; font-size: 15px; }
  .cartao > svg:last-child { width: 20px; height: 20px; }
}
@media (min-width: 760px) and (max-width: 1199.98px) {
  .cartoes { grid-template-columns: calc((100% - 80px) / 3 + 20px) calc((100% - 80px) / 3 + 40px) calc((100% - 80px) / 3 + 20px); }
  .cartoes > li:nth-child(3n+1) { padding-left: 0; }
  .cartoes > li:nth-child(3n) { padding-right: 0; }
  .cartoes > li:not(:nth-child(3n+1)) { border-left: 1px solid var(--linha); }
}
@media (min-width: 1200px) {
  .cartoes { grid-template-columns: calc((100% - 120px) / 4 + 20px) repeat(2, calc((100% - 120px) / 4 + 40px)) calc((100% - 120px) / 4 + 20px); }
  .cartoes > li:nth-child(4n+1) { padding-left: 0; }
  .cartoes > li:nth-child(4n) { padding-right: 0; }
  .cartoes > li:not(:nth-child(4n+1)) { border-left: 1px solid var(--linha); }
}

/* Vista em lista. O seletor :is(...) tem peso maior que as regras da grade, então ganha sempre. */
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) { display: block; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) > li { padding: 0; border-left: 0; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao {
  grid-template-columns: 26px 48px minmax(0, 1fr) 20px;
  grid-template-areas: "num simples nome seta" ". simples desc seta";
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-content: center;
  padding: 14px 0;
}
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-mini, :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-tipo { display: none; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-num { grid-area: num; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-simples { display: block; align-self: center; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-num, :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-nome { align-self: baseline; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-nome { font-size: 19px; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-desc { align-self: start; margin-top: 0; font-size: 15px; }
:is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao > svg:last-child { width: 20px; height: 20px; }
@media (min-width: 760px) {
  :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao {
    grid-template-columns: 40px 48px minmax(0, 1fr) minmax(0, 1.2fr) 20px;
    grid-template-areas: "num simples nome desc seta";
    column-gap: 16px;
    align-items: center;
    padding: 12px 0;
  }
  :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-num, :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-nome, :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-desc { align-self: center; }
  :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) .cartao-nome { font-size: 21px; }
}
/* Computador: duas colunas, como na referência (01–06 e 07–12). O número de linhas vem do
   modelo (--linhas = metade das ferramentas), para a lista crescer sem criar uma 3ª coluna. */
@media (min-width: 1200px) {
  :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(var(--linhas, 6), auto);
    grid-auto-flow: column;
    column-gap: 40px;
    border-top: 0;
  }
  :is(.cartoes--lista, :root[data-vista="lista"] .cartoes--alternavel) > li.coluna-topo { border-top: 1px solid var(--preto); }
}

/* ---------- Seletor de vista (Lista / Grade) ----------
   Dois botões com aria-pressed e 44 px de altura. A escolha fica guardada no aparelho
   (inicio.js) e é aplicada no <head>, antes de desenhar, para a página não pular.
   Sem JavaScript o seletor não aparece e as ferramentas ficam em grade. */
.vista { display: inline-flex; border: 1px solid var(--preto); }
:root:not([data-js]) .vista { display: none; }
.vista-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vista-botao + .vista-botao { border-left: 1px solid var(--preto); }
.vista-botao svg { flex: none; }
.vista-botao:focus-visible { outline-offset: 2px; }
/* Botão marcado (preto): segue o atributo data-vista do <html> */
:root:not([data-vista="lista"]) .vista-botao[value="grade"],
:root[data-vista="lista"] .vista-botao[value="lista"] { background: var(--preto); color: var(--branco); }
@media (hover: hover) {
  .vista-botao:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- Painel laranja (02 — Inteligência) ---------- */
.painel { border: 1px solid var(--preto); display: flex; flex-wrap: wrap; }
.painel-laranja {
  flex: 1 1 480px;
  min-width: 0;
  min-height: 520px;
  padding: var(--painel);
  background: var(--laranja);
  color: var(--preto);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.painel-laranja .rotulo { color: var(--preto); }
.painel-texto { margin: 0; max-width: 420px; font-size: 18px; line-height: 1.5; font-weight: 500; }
.painel-branco {
  flex: 1 1 480px;
  min-width: 0;
  padding: var(--painel);
  background: var(--branco);
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .painel-laranja { min-height: 0; gap: 32px; }
}

/* Topo do painel: rótulo da seção e selo */
.painel-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

/* ---------- Selo (ex.: "Em breve") ----------
   Contorno e texto pretos: vale sobre o branco e sobre o laranja. */
.selo {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--preto);
  color: var(--preto);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- Lista de recursos de IA (13–16), com o desenho simplificado ---------- */
.ia-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.ia-item {
  display: grid;
  grid-template-columns: 26px 48px minmax(0, 1fr);
  grid-template-areas: "num mini nome" ". mini desc";
  column-gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}
.ia-num { grid-area: num; align-self: baseline; font-family: var(--fonte-mono); font-size: 13px; line-height: 1.5; color: var(--cinza); font-variant-numeric: tabular-nums; }
.ia-mini { grid-area: mini; align-self: center; width: 48px; height: 48px; background: var(--superficie); }
.ia-nome { grid-area: nome; align-self: baseline; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.ia-desc { grid-area: desc; align-self: start; font-size: 15px; line-height: 1.45; color: var(--cinza); }
@media (min-width: 760px) {
  .ia-item {
    grid-template-columns: 40px 48px minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-areas: "num mini nome desc";
    column-gap: 16px;
    align-items: center;
  }
  .ia-num, .ia-nome, .ia-desc { align-self: center; }
  .ia-nome { font-size: 21px; }
}

/* ---------- Pergunta e resposta ---------- */
.qa { margin-top: 32px; padding: 24px; background: var(--superficie); display: flex; flex-direction: column; gap: 10px; }
.qa .pergunta { font-size: 19px; font-weight: 600; line-height: 1.4; }
.qa .resposta { font-size: 19px; line-height: 1.4; }
.qa .rotulo-resposta { margin-top: 6px; }
.etiqueta {
  align-self: flex-start;
  display: inline-block;
  margin-top: 4px;
  padding: 5px 9px;
  background: var(--laranja);
  color: var(--preto);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- Passos (03 — Como funciona) ----------
   Celular: desenho à esquerda e texto à direita. Tablet e computador: 3 colunas. */
.secao--passos .miolo { padding-bottom: 0; }  /* a chamada logo abaixo já dá o respiro */
.passos { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.passo {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "mini num" "mini titulo" "mini texto";
  grid-template-rows: auto auto 1fr;
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.passo-num { grid-area: num; font-family: var(--fonte-mono); font-size: 13px; line-height: 1.5; color: var(--cinza); }
.passo-mini { grid-area: mini; align-self: start; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--superficie); }
.passo h3 { grid-area: titulo; margin: 2px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.passo p { grid-area: texto; margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--cinza); }
@media (min-width: 760px) {
  .passos { display: grid; grid-template-columns: calc((100% - 80px) / 3 + 20px) calc((100% - 80px) / 3 + 40px) calc((100% - 80px) / 3 + 20px); }
  .passo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "mini" "titulo" "texto";
    grid-template-rows: auto auto auto 1fr;
    padding: 20px 20px 28px;
  }
  .passo:first-child { padding-left: 0; }
  .passo:last-child { padding-right: 0; }
  .passo + .passo { border-left: 1px solid var(--linha); }
  .passo-mini { height: 220px; aspect-ratio: auto; margin: 14px 0 18px; }
  .passo h3 { font-size: 21px; }
  .passo p { max-width: 38ch; }
}

/* ---------- Chamada final (04 — Comece) ---------- */
.chamada .miolo {
  padding: 96px 0;
  border-bottom: 1px solid var(--preto);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.chamada .titulo-chamada { margin-top: 16px; }
@media (max-width: 640px) { .chamada .miolo { padding: 64px 0; } }

/* ---------- Rodapé ----------
   Marca e colunas (Ferramentas, Inteligência, Empresa, Legal). Celular: marca em cima e
   colunas de 2 em 2. Tablet: até 4 colunas embaixo da marca. Computador (1100 px ou mais):
   tudo numa linha, a marca com o dobro da largura, como na referência; o número de colunas
   segue o que existe (no lançamento, a coluna Inteligência some).
   Linha final em mono com o responsável pelo site: cada parte fica inteira (nowrap). */
.rodape .miolo { padding: 40px 0 48px; }
.rodape-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.rodape-marca { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.rodape nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 15px; }
/* Cada link do rodapé com 44 px de altura (alvo de toque), um embaixo do outro, sem se cobrirem. */
.rodape nav a, .rodape nav .link-botao { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
@media (min-width: 760px) {
  .rodape-colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
}
@media (min-width: 1100px) {
  .rodape-colunas { grid-template-columns: minmax(0, 2fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 32px 48px; }
  .rodape-marca { grid-column: auto; }
}
.rodape-fim { margin: 40px 0 0; }
.rodape-fim span { white-space: nowrap; }

/* Botão com cara de link (ex.: "Preferências de cookies" no rodapé): mesma letra e mesmo
   espaço dos links da coluna; é botão porque abre o aviso de cookies, não outra página. */
.link-botao {
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .link-botao:hover { opacity: .7; } }

/* ---------- Perguntas frequentes ---------- */
.faq { border-top: 1px solid var(--preto); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 4px 16px;
  padding: 18px 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .num { flex: 0 0 40px; font-family: var(--fonte-mono); font-size: 13px; font-weight: 400; color: var(--cinza); }
.faq summary::after { content: '+'; margin-left: auto; padding-left: 16px; font-family: var(--fonte-mono); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 20px 56px; max-width: 760px; color: var(--preto); }
.faq details > div p { margin: 0 0 12px; }
@media (max-width: 640px) { .faq details > div { padding-left: 0; } }

/* ---------- Campos de formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.entrada, .selecao {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--preto);
  border-radius: 0;
  background: var(--branco);
  font-size: 16px;
  line-height: 1.5;
  appearance: none;
}
.selecao {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.opcao input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--preto); }
/* Caixa de seleção quadrada, com linha preta de 1px e o "v" preto (sem os cantos arredondados do
   navegador). Desligada: linha cinza. Em alto contraste volta a ser a do sistema. */
.opcao input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--preto);
  border-radius: 0;
  background: var(--branco);
  cursor: pointer;
}
.opcao input[type="checkbox"]:checked {
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E") no-repeat center;
}
.opcao input[type="checkbox"]:disabled { border-color: var(--linha); cursor: not-allowed; }
.opcao input[type="checkbox"]:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }

/* ---------- Aviso ---------- */
.aviso {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 16px 20px;
  border: 1px solid var(--preto);
  font-size: 15px;
}
.aviso::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }

/* ---------- Espaço de anúncio (reservado para a página não pular) ----------
   Macro anuncio(lugar, formato) em templates/partes/anuncio.html. Altura FIXA (não mínima):
   o bloco do AdSense entra dentro dele sem empurrar nada (CLS 0) e o que passar é cortado.
   A borda de 1px fica por fora da altura do anúncio (--anuncio-altura + 2px). O tamanho do bloco
   do AdSense vai no próprio <ins> (consentimento.js), centrado no espaço.
     .anuncio--amostra  só na prévia: a caixa cinza com "Publicidade", para ver onde vai ficar.
     .anuncio--real     o espaço de verdade. Só é reservado com data-com-anuncios no <html> (a
                        pessoa aceitou anúncios, ou Europa); sem escolha, nem ocupa lugar. Fica
                        em branco (sem fundo, borda nem rótulo) até o Google encher o bloco
                        (.anuncio--cheio, posta pelo consentimento.js; ou data-ad-status="filled").
   Quem recusou anúncios não vê o espaço (data-sem-anuncios no <html>, gravado no <head>). */
.anuncio { --anuncio-altura: 280px; display: flex; flex-direction: column; gap: 8px; }
.anuncio-espaco {
  height: calc(var(--anuncio-altura) + 2px);
  background: var(--superficie);
  border: 1px solid var(--linha);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.anuncio--faixa { --anuncio-altura: 100px; }
@media (min-width: 768px) { .anuncio--faixa { --anuncio-altura: 90px; } }
.anuncio--real { display: none; }
:root[data-com-anuncios] .anuncio--real { display: flex; }
.anuncio--real > .rotulo { visibility: hidden; }
.anuncio--real > .anuncio-espaco { background: none; border-color: transparent; }
.anuncio--real.anuncio--cheio > .rotulo,
.anuncio--real:has(ins.adsbygoogle[data-ad-status="filled"]) > .rotulo { visibility: visible; }
.anuncio--real.anuncio--cheio > .anuncio-espaco,
.anuncio--real:has(ins.adsbygoogle[data-ad-status="filled"]) > .anuncio-espaco { background: var(--superficie); border-color: var(--linha); }
/* Bloco que o Google não encheu: some (o jeito que o Google ensina); o espaço continua reservado. */
.anuncio-espaco > ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
:root[data-sem-anuncios] [data-anuncio-lugar] { display: none; }
/* Página inicial: uma faixa entre "Sobre o site" e "Comece", longe dos cartões
   e dos botões "Selecionar arquivo": pelo menos 200 px até o botão da chamada final,
   em qualquer largura (no computador o botão fica no alto da chamada, por isso os 96 px). */
.secao-anuncio .miolo { padding: 72px 0 96px; }
@media (max-width: 640px) { .secao-anuncio .miolo { padding: 48px 0 48px; } }

/* ---------- Aviso de cookies (LGPD) ----------
   templates/partes/consentimento.html e js/consentimento.js. Dois níveis:
     .consentimento          1º nível, preso no rodapé da tela (fixed: não empurra a página, CLS 0).
                             Não bloqueia: dá para navegar sem responder. Linha preta de 1px em cima.
     .consentimento-dialogo  2º nível, <dialog> modal no mesmo lugar, mais alto, com rolagem própria.
                             Sem fundo escurecido (só as 6 cores): a página fica parada atrás.
   Botões (.consentimento-botao): MESMO tamanho, cor e peso (guia de cookies da ANPD), em
   células iguais com linhas de 1px; no foco, o contorno fica dentro da célula.
   Celular: texto em cima e os 3 botões numa linha só. Computador (900 px ou mais): texto à
   esquerda e botões à direita; nas preferências, as 3 categorias lado a lado. */
.consentimento, .consentimento-dialogo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0 var(--margem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-top: 1px solid var(--preto);
  border-radius: 0;
  background: var(--branco);
  color: var(--preto);
}
.consentimento[hidden] { display: none; }
.consentimento-dialogo::backdrop { background: transparent; }
.consentimento-rotulo { margin: 0; }
.consentimento-rotulo:focus { outline: none; }   /* título com tabindex=-1: só recebe o foco ao abrir */
#conteudo[tabindex="-1"]:focus { outline: none; }

.consentimento-aviso, .consentimento-pref { max-width: var(--largura); margin: 0 auto; }
.consentimento-aviso { display: grid; gap: 16px; padding: 20px 0; }
.consentimento-texto { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.consentimento-texto p, .consentimento-pref-texto { margin: 0; font-size: 15px; line-height: 1.5; }
.consentimento-texto strong { font-weight: 700; }
.consentimento-links { margin: 0; font-size: 14px; line-height: 1.5; }
.consentimento-links a { display: inline-block; padding: 2px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.consentimento-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--preto); }
.consentimento-botoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.consentimento-botao {
  min-height: 48px;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consentimento-botao + .consentimento-botao { border-left: 1px solid var(--preto); }
.consentimento-botao:focus-visible { outline-offset: -5px; }
@media (max-width: 479.98px) { .consentimento-botao { padding: 10px 4px; font-size: 14px; } }
@media (max-width: 359.98px) { .consentimento-texto p, .consentimento-pref-texto { font-size: 14px; } }
/* Celular de tela baixa: o aviso não pode cobrir a abertura da página. */
@media (max-height: 700px) and (max-width: 640px) {
  .consentimento-aviso { gap: 10px; padding: 12px 0; }
  .consentimento-texto { gap: 4px; }
  .consentimento-texto p { font-size: 14px; line-height: 1.4; }
  .consentimento-links { font-size: 13px; }
  .consentimento-botao { min-height: 44px; padding: 8px 4px; }
}
@media (hover: hover) {
  .consentimento-botao:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}

/* 2º nível: preferências */
.consentimento-pref { display: flex; flex-direction: column; gap: 12px; padding: 20px 0 24px; }
.consentimento-pref-texto { max-width: 640px; }
.consentimento-categorias { margin: 4px 0 4px; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
/* Cada categoria: número em mono; nome e chave (ou o selo "Sempre ligados") na mesma linha;
   quem coloca, em mono; e a explicação em cinza, na largura toda. */
.consentimento-categoria {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "num cab" ". quem" ". desc";
  column-gap: 12px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--linha);
}
.consentimento-num { grid-area: num; font-family: var(--fonte-mono); font-size: 13px; line-height: 1.8; color: var(--cinza); font-variant-numeric: tabular-nums; }
.consentimento-cab { grid-area: cab; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.consentimento-cat-nome { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
label.consentimento-cat-nome { cursor: pointer; }
.consentimento-cab .selo { flex: none; }
.consentimento-quem { grid-area: quem; margin-top: 2px; }
.consentimento-desc { grid-area: desc; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--cinza); }

@media (min-width: 900px) {
  .consentimento-aviso { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: end; column-gap: 48px; padding: 24px 0; }
  .consentimento-categorias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linha); }
  .consentimento-categoria {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "cab" "quem" "desc";
    align-content: start;
    row-gap: 4px;
    padding: 14px 24px 20px;
    border-bottom: 0;
  }
  .consentimento-categoria:first-child { padding-left: 0; }
  .consentimento-categoria:last-child { padding-right: 0; }
  .consentimento-categoria + .consentimento-categoria { border-left: 1px solid var(--linha); }
  .consentimento-pref .consentimento-botoes { max-width: 480px; }
}

/* ---------- Chave liga/desliga (checkbox com role="switch") ----------
   Trilho de 48 × 28 px com linha preta de 1px e quadrado preto. Desligada: branca, quadrado à
   esquerda. Ligada: laranja (com preto por cima), quadrado à direita. Sem cantos arredondados.
   Em alto contraste (forced-colors) volta a ser a caixa de seleção do sistema. */
.chave {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--preto);
  border-radius: 0;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' fill='%230A0A0A'/%3E%3C/svg%3E") no-repeat 4px 50%;
  cursor: pointer;
}
.chave:checked { background-color: var(--laranja); background-position: calc(100% - 4px) 50%; }
@media (prefers-reduced-motion: no-preference) { .chave { transition: background-position .15s ease; } }
@media (forced-colors: active) { .chave { -webkit-appearance: auto; appearance: auto; width: 24px; height: 24px; } }

/* ---------- Página de ferramenta (templates/ferramenta.html) ----------
   Abertura curta (para a ferramenta aparecer logo no celular), o selo de onde o arquivo é
   processado, a área da ferramenta (caixa de 1px na superfície) com as etapas
   escolher → opções → processando → pronto, e as seções Como usar, Saiba mais, Perguntas
   frequentes e Relacionadas. Peças em templates/partes/ferramenta.html; comportamento em
   assets/js/ferramentas/telas/ui.js (atributos data-ui). */
.abertura--ferramenta .miolo { padding: 40px 0 48px; }
/* Link da categoria: área de toque de 44 px; a margem negativa devolve a altura do rótulo (19,5 px),
   para a linha de cima da abertura não mudar. */
.abertura-categoria { display: inline-flex; align-items: center; min-height: 44px; margin: -12.25px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ferramenta-cab {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
}
.titulo-ferramenta {
  margin: 0;
  font-family: var(--fonte);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(32px, 7vw, 104px);
  line-height: .9;
  letter-spacing: -0.05em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ferramenta-cab .lead { margin-top: 24px; max-width: 600px; }
.ferramenta-mini { width: clamp(150px, 24vw, 300px); height: auto; aspect-ratio: 4 / 3; background: var(--superficie); }
@media (max-width: 640px) {
  .abertura--ferramenta .miolo { padding: 24px 0 28px; }
  .ferramenta-cab { margin-top: 20px; align-items: start; gap: 16px; }
  .ferramenta-cab .lead { margin-top: 12px; font-size: 17px; }
  .ferramenta-mini { width: 112px; }
}
@media (max-width: 479.98px) {
  .ferramenta-cab { grid-template-columns: minmax(0, 1fr); }
  .ferramenta-mini { display: none; }
}

/* Selo honesto de onde o arquivo é processado: faixa branca colada em cima da área. */
.ferramenta .miolo { padding: 32px 0 0; }
.selo-onde {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--preto);
  border-bottom: 0;
  background: var(--branco);
  font-size: 15px;
  line-height: 1.45;
}
.selo-onde p { margin: 0; }
.selo-onde strong { font-weight: 700; }
.selo-onde-texto { color: var(--cinza); }
.selo-onde-icone { flex: none; margin-top: -2px; }
@media (max-width: 640px) {
  .ferramenta .miolo { padding-top: 20px; }
  .selo-onde { padding: 12px 14px; font-size: 14px; }
}

/* Área da ferramenta. Arrastando um arquivo por cima: laranja, e tudo nela passa a preto. */
.area {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--preto);
  background: var(--superficie);
}
.area > [hidden] { display: none; }
.area-aviso { margin: 0; background: var(--branco); }
.soltar--ferramenta { flex: none; min-height: 168px; padding: 0; border: 0; background: none; align-content: center; }
.soltar-limite { flex-basis: 100%; margin: 0; }
.area.arrastando { background: var(--laranja); }
.area.arrastando :is(.rotulo, .num, .arquivo-info, .selo-onde-texto) { color: var(--preto); }
.area.arrastando .tipos li { background: var(--laranja); border-color: var(--preto); color: var(--preto); }
.area.arrastando .soltar-mini { --m-papel: var(--laranja); --m-texto: var(--preto); --desce: 1; }
@media (max-width: 640px) {
  .area { padding: 20px 16px; gap: 20px; }
  .soltar--ferramenta { min-height: 0; }
}

/* Lista de arquivos escolhidos: número, nome (texto puro), tamanho e informações, botões de
   44 px (arrastar, subir, descer, remover) e, embaixo, o que a ferramenta quiser pôr
   (.arquivo-extra, ex.: as páginas de cada PDF). */
.arquivos-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.arquivos-titulo { margin: 0; }
.arquivos-titulo:focus { outline: none; }
.arquivos-adicionar { margin-top: 16px; }
/* overflow-anchor: o navegador não "segura" a rolagem num item que muda de lugar (no Firefox, a
   página pulava enquanto a pessoa arrastava). */
.arquivos-lista { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); overflow-anchor: none; }
.arquivos-lista * { overflow-anchor: none; }
.arquivo {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: "num nome botoes" ". info botoes" ". estado estado" ". extra extra";
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
}
.arquivo-num { grid-area: num; align-self: baseline; font-family: var(--fonte-mono); font-size: 13px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.arquivo-nome { grid-area: nome; align-self: baseline; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.arquivo-info { grid-area: info; align-self: start; font-family: var(--fonte-mono); font-size: 13px; line-height: 1.5; color: var(--cinza); }
.arquivo-botoes { grid-area: botoes; display: flex; border: 1px solid var(--preto); background: var(--branco); }
.arquivo-botao, .arquivo-alca {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--branco);
  color: var(--preto);
  cursor: pointer;
}
.arquivo-botoes > * + * { border-left: 1px solid var(--preto); }
.arquivo-botao[disabled] { color: var(--linha); cursor: default; }
.arquivo-botao:focus-visible { outline-offset: -5px; }
.arquivo-alca { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.arquivo-estado { grid-area: estado; margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.arquivo-estado:empty { display: none; }
.arquivo--erro .arquivo-estado, .arquivo--aviso .arquivo-estado { display: flex; gap: 10px; align-items: baseline; }
.arquivo--erro .arquivo-estado::before, .arquivo--aviso .arquivo-estado::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }
.arquivo--erro .arquivo-nome { text-decoration: line-through; text-decoration-thickness: 1px; }
.arquivo-extra { grid-area: extra; min-width: 0; }
.arquivo-extra:empty { display: none; }
.arquivo-extra > :first-child { margin-top: 12px; }
.arquivo--movendo { position: relative; z-index: 1; background: var(--branco); outline: 1px solid var(--preto); }
.arquivo--movendo .arquivo-alca { cursor: grabbing; }
@media (max-width: 559.98px) {
  .arquivo {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: "num nome" ". info" ". botoes" ". estado" ". extra";
  }
  .arquivo-botoes { justify-self: start; margin-top: 10px; }
}

/* Opções da ferramenta (templates/ferramentas/<slug>.html): campos do design system (seção 09)
   e as escolhas em botões (.escolhas: rádios com cara de botão, 44 px, o marcado fica preto). */
.opcoes { display: grid; gap: 24px; }
.opcoes-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.opcoes-grupo > legend { margin: 0 0 10px; padding: 0; }
.campo-ajuda { margin: 0; }
.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha { position: relative; display: inline-flex; cursor: pointer; }
.escolha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.escolha span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--preto);
  background: var(--branco);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.escolha input:checked + span { background: var(--preto); color: var(--branco); }
.escolha input:focus-visible + span { outline: 2px solid var(--preto); outline-offset: 3px; }
.escolha input:disabled + span { border-color: var(--linha); color: var(--cinza); cursor: not-allowed; }

.opcoes-dica { margin: 0; font-size: 15px; color: var(--cinza); }
.campo-erro { margin: 0; font-size: 15px; font-weight: 600; }
.campo-erro:empty { display: none; }
.campo-erro::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--laranja); vertical-align: 1px; }
.entrada[aria-invalid="true"] { outline: 2px solid var(--laranja); outline-offset: -2px; }
.entrada:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
/* "Mais opções" e outras partes que abrem e fecham (<details>): linha de 1px, sinal + e − em mono */
.mais-opcoes { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.mais-opcoes > summary, .arquivo-paginas > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.mais-opcoes > summary::-webkit-details-marker, .arquivo-paginas > summary::-webkit-details-marker { display: none; }
.mais-opcoes > summary::after, .arquivo-paginas > summary::after { content: '+'; margin-left: auto; font-family: var(--fonte-mono); font-weight: 400; }
.mais-opcoes[open] > summary::after, .arquivo-paginas[open] > summary::after { content: '−'; }
.mais-opcoes-corpo { display: grid; gap: 20px; padding: 4px 0 20px; max-width: 560px; }
.arquivo-paginas > summary { min-height: 44px; font-weight: 500; }
.arquivo-paginas > summary .rotulo { margin-left: 4px; }
.arquivo-paginas .campo { padding: 4px 0 8px; max-width: 360px; }

/* Ação principal: o botão grande, "Começar de novo" e a dica (ex.: "Escolha pelo menos 2 PDFs") */
.acao { display: grid; gap: 12px; }
.acao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.acao-dica { margin: 0; }
.acao-dica:empty { display: none; }
.acao-recomecar { min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.captcha:empty { display: none; }
@media (max-width: 640px) {
  .acao-linha .botao { width: 100%; justify-content: center; }
}

/* Progresso: fase em mono, barra de 1px com o preenchimento laranja e o botão Cancelar.
   Sem a fração (o motor não sabe quanto falta), a barra anda de um lado para o outro. */
.progresso { display: grid; gap: 12px; }
.progresso-cab { display: flex; justify-content: space-between; gap: 16px; }
.progresso-fase { color: var(--preto); }
.progresso-barra { height: 14px; border: 1px solid var(--preto); background: var(--branco); overflow: hidden; }
.progresso-barra > span { display: block; width: 0; height: 100%; background: var(--laranja); }
.progresso-barra--indefinida > span { width: 30%; animation: indefinida 1.4s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
@keyframes indefinida { from { transform: translateX(0); } to { transform: translateX(233%); } }
.progresso .botao { justify-self: start; }

/* Erro (role="alert"): some quando vazia. Quadrado laranja, o que houve em negrito, o que fazer
   e, quando cabe, os botões ("Tentar mesmo assim", "Voltar"). */
.erro { display: grid; gap: 6px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); }
.erro:empty { display: none; }
.erro-mensagem { margin: 0; display: flex; gap: 12px; align-items: baseline; font-weight: 700; }
.erro-mensagem::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); }
.erro-acao { margin: 0 0 0 19px; }
.erro-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0 19px; }
/* Reserva no servidor (Leva 8, telas/reserva-servidor.js; só nas páginas com reserva_servidor = true):
   o "Fazer no servidor" embaixo do erro ou da barra, e o aviso com a verificação e o envio. */
.reserva-oferta { display: grid; gap: 8px; justify-items: start; margin: 8px 0 0 19px; }
.reserva-oferta .erro-acao { margin: 0; }
.reserva-demora { display: grid; gap: 8px; justify-items: start; margin-top: 16px; }
.reserva-demora[hidden], .reserva[hidden] { display: none; }
.reserva { display: grid; gap: 12px; padding: 16px 20px; border: 1px solid var(--preto); background: var(--branco); min-width: 0; }
.reserva-titulo { margin: 0; font-size: 18px; font-weight: 700; }
.reserva-titulo:focus { outline: none; }
.reserva-titulo:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
.reserva-aviso, .reserva-resumo, .reserva-dica { margin: 0; }

/* Tela "pronto": título, tamanhos antes e depois (a diferença numa etiqueta laranja), Baixar,
   arquivos um por um, observações, Voltar / Começar de novo e "Continuar com". */
.resultado { display: grid; gap: 20px; }
.resultado:focus { outline: none; }
.resultado > [hidden] { display: none; }
.resultado-rotulo { margin-bottom: -12px; }
.resultado-titulo { margin: 0; font-stretch: 112%; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
.resultado-detalhe { margin: 0; font-size: 17px; }
.resultado-tamanhos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; margin: 0; padding-top: 12px; border-top: 1px solid var(--preto); }
.resultado-tamanhos dd { margin: 2px 0 0; font-family: var(--fonte-mono); font-size: 20px; line-height: 1.3; }
.resultado-tamanhos .resultado-diferenca { padding: 2px 8px; background: var(--laranja); color: var(--preto); font-size: 13px; }
.resultado-tamanhos .resultado-diferenca:empty { display: none; }
.resultado-baixar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.resultado-nome { overflow-wrap: anywhere; }
/* Estrelas de avaliação (Leva 11, ui.js): "Como foi?" logo abaixo do Baixar. O lugar fica guardado
   e invisível (espera) desde que o resultado aparece; depois de baixar, aparece (aberta); depois de
   votar, vira "Obrigado pela nota." na mesma altura; se o envio falhar, some sem mexer em nada. */
.avaliacao { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 44px; margin-top: -10px; }
.avaliacao[data-estado="espera"], .avaliacao[data-estado="some"] { visibility: hidden; }
.avaliacao-pergunta { font-size: 15px; }
.avaliacao-estrelas { display: inline-flex; }
.avaliacao-estrela { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--preto); cursor: pointer; }
.avaliacao-estrela svg { fill: transparent; }
.avaliacao-estrela:focus-visible { outline: 2px solid var(--preto); outline-offset: -4px; }
.avaliacao-estrela[disabled] { cursor: default; }
/* Passar o mouse (ou o foco do teclado) numa estrela pinta ela e as anteriores. */
@media (hover: hover) {
  .avaliacao-estrelas:hover .avaliacao-estrela svg { fill: var(--laranja); }
  .avaliacao-estrelas:hover .avaliacao-estrela:hover ~ .avaliacao-estrela svg { fill: transparent; }
}
.avaliacao-estrelas:has(.avaliacao-estrela:focus-visible) .avaliacao-estrela svg { fill: var(--laranja); }
.avaliacao-estrelas .avaliacao-estrela:focus-visible ~ .avaliacao-estrela svg { fill: transparent; }
.avaliacao-obrigado { margin: 0; font-size: 15px; font-weight: 600; }
.avaliacao-obrigado:focus { outline: none; }
.avaliacao[data-estado="votada"] .avaliacao-pergunta, .avaliacao[data-estado="votada"] .avaliacao-estrelas { display: none; }
/* Nota de 1 a 3: "Quer contar o que faltou?" na mesma linha do "Obrigado" (sem quebrar a linha da
   área: o link pode quebrar o próprio texto em 2 linhas, que cabem nos 44 px guardados). */
.avaliacao[data-estado="votada"] { flex-wrap: nowrap; }
.avaliacao-obrigado { flex: none; }
.avaliacao-comentar { min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--preto); font: inherit; font-size: 15px; line-height: 1.25; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.avaliacao-comentar:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
/* A janela do comentário (<dialog> por cima de tudo; a página atrás não se mexe). */
.avaliacao-dialogo { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--preto); background: var(--branco); color: var(--preto); overflow-y: auto; }
.avaliacao-dialogo::backdrop { background: rgba(10, 10, 10, 0.5); }
.avaliacao-form { display: grid; gap: 12px; padding: 24px; }
.avaliacao-dialogo-titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.avaliacao-tipos { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; border: 0; }
.avaliacao-tipos legend { width: 100%; margin-bottom: 4px; padding: 0; font-weight: 600; }
.avaliacao-tipo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.avaliacao-tipo input { width: 20px; height: 20px; margin: 0; accent-color: var(--preto); }
.avaliacao-texto-rotulo { font-weight: 600; }
.avaliacao-texto { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--preto); background: var(--branco); color: var(--preto); font: inherit; font-size: 16px; resize: vertical; }
.avaliacao-texto:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
.avaliacao-dica { margin: -8px 0 0; }
.avaliacao-aviso { margin: 0; font-size: 15px; }
.avaliacao-msg { margin: 0; font-weight: 600; }
.avaliacao-msg:empty { display: none; }
.avaliacao-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* Nota média perto do título da ferramenta (build.py, só com votos de verdade acima do mínimo). */
.ferramenta-avaliacao { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 15px; }
.ferramenta-avaliacao svg { fill: var(--laranja); color: var(--preto); flex: none; }
.resultado-arquivos { display: grid; gap: 8px; }
.resultado-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
.resultado-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
/* Muitos arquivos: a lista "um por um" rola por dentro e o resto da tela continua perto. */
.area .resultado-lista { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.resultado-mais { margin: 0; }
.resultado-extra { display: grid; gap: 20px; min-width: 0; }
.resultado-extra:empty { display: none; }
.resultado-lista a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.resultado-avisos { display: grid; gap: 8px; }
.resultado-avisos ul { margin: 0; padding-left: 20px; list-style-type: square; font-size: 15px; }
.resultado-avisos li + li { margin-top: 4px; }
.resultado-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* Baixar preso no pé da tela (ui.js, precisaBaixarFixo): só na tela estreita, quando a pessoa rola
   e o Baixar do resultado sai da tela. Fixed (não empurra nada: CLS 0), entra deslizando de baixo
   (transform). Linha preta de 1px em cima, como o aviso de cookies; fica abaixo dele (z-index). */
.baixar-fixo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 15;
  padding: 10px var(--margem) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--preto);
  background: var(--branco);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.baixar-fixo[data-visivel] { transform: none; visibility: visible; transition: transform 0.2s ease; }
.baixar-fixo .botao { width: 100%; justify-content: center; padding-top: 14px; padding-bottom: 14px; }
@media (min-width: 900px) { .baixar-fixo { display: none; } }
@media (prefers-reduced-motion: reduce) { .baixar-fixo, .baixar-fixo[data-visivel] { transition: none; } }
.continuar { display: grid; gap: 10px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--linha); }
.continuar ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.continuar-item { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 14px 5px 5px; border: 1px solid var(--preto); background: var(--branco); font-size: 15px; font-weight: 600; }
@media (hover: hover) {
  .continuar-item:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
.continuar-mini { width: 32px; height: 32px; background: var(--superficie); }
.continuar p { margin: 0; }
/* "Mais ferramentas para este arquivo": enche o espaço que a área guarda depois de converter
   (ui.js, encherEspaco). Cartões com nome e uma linha de descrição. */
.continuar-mais { display: grid; gap: 10px; margin-top: 8px; }
.continuar-mais ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.continuar-item--card { display: flex; width: 100%; min-height: 56px; padding: 8px 12px 8px 8px; font-weight: 400; }
.continuar-card-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.continuar-card-nome { font-weight: 600; }
.continuar-card-desc { font-size: 13px; color: var(--cinza, #555); }
/* Receitas de /fluxos (ui.js): o próximo passo logo depois do Baixar e, na ferramenta do passo,
   o aviso "passo n de N" em cima da área. */
.continuar--receita { margin-top: 0; border-top-color: var(--preto); }
.receita-passo { margin: 0 0 16px; }
/* Página de receitas (/fluxos, templates/fluxos.html): passos no desenho do "Como usar". */
.fluxos-lead { margin-top: 20px; max-width: 60ch; }
.fluxo-para { margin: 12px 0 0; max-width: 60ch; font-size: 17px; }
.fluxo-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fluxo-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.fluxo-nota { flex: 1 1 320px; max-width: 60ch; margin: 0; font-size: 15px; color: var(--cinza); }
@media (max-width: 640px) {
  .resultado-baixar .botao, .resultado-acoes .botao { width: 100%; justify-content: center; }
}

/* Depois da área: o que acontece com o arquivo. Fica entre a ferramenta e o espaço de anúncio. */
.ferramenta-nota { max-width: 760px; margin: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--cinza); }
/* "Achou um erro? Conte pra gente" (linha discreta logo embaixo da área, antes da nota; leva a
   /relatar-erro?f=<slug> e a ui.js acrescenta &e=<código> depois de um erro). Alvo de 44 px. */
.ferramenta-relatar { margin: 12px 0 0; font-size: 15px; }
.ferramenta-relatar a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* 96 px também no celular entre a ferramenta (com "Baixar" e "Continuar com") e o espaço de
   anúncio, como promete o Sobre ("longe do botão de baixar"; achado 24 da auditoria). */
.secao-anuncio--ferramenta .miolo { padding: 96px 0 0; }

/* Seções de baixo (Como usar, Saiba mais, Perguntas frequentes, Relacionadas) */
.secao--ferramenta .miolo { padding-bottom: 0; }
.secao--relacionadas .miolo { padding-bottom: 96px; }
.secao--ferramenta .faq, .secao--ferramenta .texto { margin-top: 40px; }
.faq-pergunta { flex: 1 1 auto; min-width: 0; }
/* 64 px antes e depois do anúncio do meio do texto (e o build.py nunca o põe encostado em link). */
.ferramenta-texto .anuncio--texto { margin: 64px 0; }
.ferramenta-atualizado { margin: 40px 0 0; }
/* Leva 12: "Passo a passo:" e os guias que usam a ferramenta, logo antes do "Atualizado em". */
.ferramenta-guias { margin: 40px 0 0; }
.ferramenta-guias .rotulo { margin-right: 4px; }
@media (max-width: 640px) {
  .secao--relacionadas .miolo { padding-bottom: 64px; }
  .faq summary { font-size: 17px; }
}

/* Página "Todas as ferramentas" (templates/ferramentas.html) */
.catalogo-base { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.catalogo-base .lead { flex: 1 1 420px; max-width: 640px; }
.catalogo-indice { flex: 1 1 100%; }
.catalogo-indice ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.catalogo-indice a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--preto); font-size: 15px; font-weight: 600; line-height: 1.5; }
@media (hover: hover) {
  .catalogo-indice a:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
.catalogo-indice .indice-num { font-family: var(--fonte-mono); font-size: 12px; font-weight: 400; color: var(--cinza); }
.catalogo-grupo .miolo { padding-bottom: 24px; }
.catalogo-grupo + .catalogo-grupo .miolo { padding-top: 48px; }
.catalogo-grupo:last-child .miolo { padding-bottom: 96px; }
.catalogo-grupo { scroll-margin-top: 8px; }
.catalogo-desc { margin: 16px 0 0; max-width: 640px; font-size: 17px; color: var(--cinza); }
.catalogo-ia { margin-top: 32px; }
.selo--cartao { margin-left: 2px; padding: 0 6px; font-size: 11px; vertical-align: 1px; }
/* Páginas de categoria (Leva 11): atalhos no /ferramentas e a lista "Outras categorias" */
.colecoes-atalhos { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 24px; }
.colecoes-atalhos .rotulo { margin-right: 4px; }
.colecoes-atalhos a { display: inline-block; padding: 10px 0; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.colecoes-atalhos--inicio { margin: -8px 0 24px; }
.colecoes-links { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); max-width: 760px; }
.colecoes-links li { border-bottom: 1px solid var(--linha); }
.colecoes-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
/* Duas seções de cartões seguidas na página inicial ("Ferramentas" e "Imagens") */
.secao--seguida .miolo { padding-top: 0; }

/* ---------- Design system (página de referência) ---------- */
.amostras { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--preto); border-left: 1px solid var(--linha); }
.amostra { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.amostra-cor { height: 120px; border-bottom: 1px solid var(--linha); }
.amostra-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.amostra-info strong { font-size: 17px; }
.especificacao { margin-top: 8px; }
.exemplo { padding: 32px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ds-progresso-40 { width: 40%; }
/* Amostra parada do aviso de cookies (seção 20): o mesmo miolo, dentro de uma caixa de 1px */
.consentimento-amostra { padding: 0 24px; border: 1px solid var(--preto); border-top-width: 1px; }
@media (max-width: 640px) { .consentimento-amostra { padding: 0 16px; } }

/* Catálogo de miniaturas (todas as ferramentas, com o nome e o slug) */
.miniaturas { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); border-top: 1px solid var(--preto); border-left: 1px solid var(--linha); }
.miniaturas > li { min-width: 0; padding: 16px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.miniaturas .mini { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 12px; background: var(--superficie); }
.miniaturas .simples { width: 64px; height: 64px; margin-bottom: 12px; background: var(--superficie); }
.miniaturas--simples { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.miniaturas .rotulo { overflow-wrap: anywhere; }
.miniaturas strong { font-size: 16px; line-height: 1.3; }
.legenda-desenho { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.legenda-desenho li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.legenda-desenho li > svg { flex: none; width: 32px; height: 20px; }

/* ---------- Menos movimento para quem pediu (configuração do aparelho) ---------- */
@media (prefers-reduced-motion: reduce) {
  .x, .cartao > svg:last-child { transition: none; }
  .anima:focus-visible, .anima:hover { --mv: 0; --piscar: none; --assinar: none; --travar: none; }
  .figura-chega { animation: none; }
  .progresso-barra--indefinida > span { animation: none; width: 100%; }
}

/* ---------- Alto contraste (forced-colors, como o do Windows) ----------
   O navegador troca as cores pelas do sistema e o "marcado" deixaria de aparecer: a escolha
   marcada usa as cores de seleção do sistema e os botões ganham borda. */
@media (forced-colors: active) {
  .escolha input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .escolha input:disabled + span { color: GrayText; border-color: GrayText; }
  .botao, .vista-botao, .consentimento-botao, .arquivo-botao, .arquivo-alca { border: 1px solid ButtonText; }
  :root:not([data-vista="lista"]) .vista-botao[value="grade"],
  :root[data-vista="lista"] .vista-botao[value="lista"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .botao[disabled] { color: GrayText; border-color: GrayText; }
  .progresso-barra > span { forced-color-adjust: none; background: Highlight; }
  .opcao input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
  .soltar.arrastando, .area.arrastando { outline: 3px solid Highlight; }
}

/* ---------- Página inicial: "Sobre o site" (templates/inicio.html) ----------
   Texto próprio da página inicial e perguntas gerais, abertas (sem nada para clicar), em lista
   numerada com linhas de 1px. No computador, o texto à esquerda e as perguntas à direita. */
.secao--sobre .miolo { padding-top: 96px; }
.inicio-sobre { margin-top: 40px; display: grid; gap: 48px; }
.inicio-sobre-texto p { margin: 0 0 16px; }
.inicio-sobre-guias { margin-top: 24px; }
.inicio-perguntas-rotulo { margin: 0 0 12px; }
.inicio-perguntas-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.inicio-pergunta {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "num pergunta" ". resposta";
  column-gap: 16px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--linha);
}
.inicio-pergunta-num { grid-area: num; font-family: var(--fonte-mono); font-size: 13px; line-height: 1.6; color: var(--cinza); }
.inicio-pergunta h4 { grid-area: pergunta; margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.inicio-pergunta-resposta { grid-area: resposta; margin-top: 6px; font-size: 16px; line-height: 1.55; }
.inicio-pergunta-resposta p { margin: 0 0 8px; }
.inicio-pergunta-resposta p:last-child { margin-bottom: 0; }
.inicio-pergunta-resposta a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (min-width: 1100px) {
  .inicio-sobre { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); column-gap: 80px; align-items: start; }
}
@media (max-width: 640px) {
  .secao--sobre .miolo { padding-top: 72px; }
  .inicio-pergunta { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .inicio-pergunta h4 { font-size: 17px; }
}

/* ---------- Guias (templates/guias.html e guia.html) ----------
   Índice: lista numerada, um guia por linha (número em mono, título em Archivo 800 expandida,
   a frase e a data). No guia, o bloco "Ferramentas usadas neste guia" usa os cartões das
   relacionadas e termina com o link para todos os guias. */
.guias-lead { margin-top: 24px; max-width: 640px; }
.guias-rotulo { margin: 0; }
.guias-lista { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--preto); }
.guias-lista > li { border-bottom: 1px solid var(--linha); }
.guia-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "num nome" ". desc" ". pe";
  column-gap: 16px;
  padding: 20px 0 22px;
}
.guia-num { grid-area: num; font-family: var(--fonte-mono); font-size: 13px; line-height: 2; color: var(--cinza); }
.guia-nome { grid-area: nome; font-stretch: 112%; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.035em; }
.guia-desc { grid-area: desc; margin-top: 8px; max-width: 760px; font-size: 16px; line-height: 1.5; color: var(--cinza); }
.guia-pe { grid-area: pe; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.guia-ler { display: inline-flex; align-items: center; gap: 8px; color: var(--preto); }
@media (hover: hover) {
  .guia-item:hover { opacity: 1; }
  .guia-item:hover .guia-nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
}
.guia-todos { margin: 40px 0 0; }
@media (max-width: 640px) {
  .guia-item { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
}

/* ---------- App instalado (PWA, Opção A do dono, 28/10/2026) ----------
   Tudo aqui só vale com o site aberto como app (ícone na tela inicial, app da Google Play).
   No navegador, nada muda: a barra de abas (partes/app-abas.html) e as telas do app da inicial
   (.app-tela, inicio.html) ficam display:none. "Aberto como app" = html[data-app], posto antes de
   desenhar pelo assets/js/app-modo.js (display-mode standalone, fullscreen ou minimal-ui).
   No app: barra de abas no pé, cabeçalho só com a marca, sem rodapé (os links dele estão em Ajustes), a inicial vira "Abrir arquivo" + "Mais
   usadas" + "Por assunto", e as ferramentas ficam sem os textos longos (Como usar, Saiba mais,
   Perguntas), que são para o Google. */
.app-abas, .app-tela, .so-app { display: none; }
html[data-app] { --abas: calc(68px + env(safe-area-inset-bottom, 0px)); }
html[data-app] body { padding-bottom: var(--abas); }
html[data-app] .so-site { display: none; }
html[data-app] .so-app { display: inline; }
/* Ferramenta com o molde do app (pwa/foto-tela.js, data-molde-app): com o arquivo chegando de outra
   tela (data-chegando, assets/js/chegando.js) ou já escolhido e o molde ainda abrindo, a tela fica
   escura (a cor do molde), com a rodinha, sem mostrar a página do site por um instante (pedido do
   dono, 29/10/2026: "carrega primeiro essa página com o botão preto"). Se o molde não carregar, a
   ui.js tira o data-molde-app e a tela de sempre aparece. */
html[data-app][data-chegando] #ferramenta[data-molde-app]:not(:has(> .ft))::before,
html[data-app] #ferramenta[data-molde-app]:not(:has(> .ft)):has(.area:not([data-etapa="escolher"]))::before {
  content: ""; position: fixed; inset: 0; z-index: 39; background: #1A1A1A;
}
html[data-app][data-chegando] #ferramenta[data-molde-app]:not(:has(> .ft))::after,
html[data-app] #ferramenta[data-molde-app]:not(:has(> .ft)):has(.area:not([data-etapa="escolher"]))::after {
  content: ""; position: fixed; left: 50%; top: 50%; z-index: 39; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 3px solid #3A3A3A; border-top-color: var(--laranja); animation: app-molde-roda .8s linear infinite;
}
@keyframes app-molde-roda { to { transform: rotate(360deg); } }
/* Barra de abas */
html[data-app] .app-abas {
    position: fixed; inset: auto 0 0 0; z-index: 18;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    height: var(--abas); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
    border-top: 1px solid var(--preto); background: var(--branco);
  }
html[data-app] .app-abas a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; color: var(--cinza); font-size: 12px; font-weight: 500; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
html[data-app] .app-abas svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
html[data-app] .app-abas a::after { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px; margin-left: -14px; background: transparent; }
html[data-app] .app-abas a[aria-current="page"],
html[data-app] body:has(#recentes:target) .app-abas a[data-aba="recentes"],
html[data-app] body:has(#ajustes:target) .app-abas a[data-aba="ajustes"],
html[data-app] body:has(#todas:target) .app-abas a[data-aba="ferramentas"] { color: var(--preto); font-weight: 700; }
html[data-app] .app-abas a[aria-current="page"]::after,
html[data-app] body:has(#recentes:target) .app-abas a[data-aba="recentes"]::after,
html[data-app] body:has(#ajustes:target) .app-abas a[data-aba="ajustes"]::after,
html[data-app] body:has(#todas:target) .app-abas a[data-aba="ferramentas"]::after { background: var(--laranja); }
html[data-app] body:has(.app-vista:target) .app-abas a[data-aba="inicio"] { color: var(--cinza); font-weight: 500; }
html[data-app] body:has(.app-vista:target) .app-abas a[data-aba="inicio"]::after { background: transparent; }
/* Troca de tela como num app (pedido do dono, 28/10/2026): a tela atual fica até a próxima estar
   pronta e as duas se misturam rápido, sem o branco no meio; a barra de abas fica parada. Só com o
   site aberto como app (as mesmas janelas do app-modo.js) e sem "reduzir movimento". Chrome 126+;
   nos outros, a troca de sempre. */
@media (prefers-reduced-motion: no-preference) and ((display-mode: standalone) or (display-mode: fullscreen) or (display-mode: minimal-ui)) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 160ms; }
  html[data-app] .app-abas { view-transition-name: app-abas; }
  ::view-transition-group(app-abas) { animation: none; }
  /* Com direção (30/10/2026, app-modo.js, direcaoDaTroca): "tela" = a tela nova já entrou
     deslizando no toque (.app-tela-chegando), a página de verdade só se mistura a ela; "ir" = o
     mesmo deslizar, quando não houve a tela do toque; "voltar" = a tela de cima sai pela direita e a
     de baixo volta da esquerda, como nos apps do Android; trocar de aba continua só misturando. */
  html:active-view-transition-type(tela)::view-transition-old(root),
  html:active-view-transition-type(tela)::view-transition-new(root) { animation-duration: 120ms; }
  html:active-view-transition-type(ir)::view-transition-old(root) { animation: app-sai-ir 260ms cubic-bezier(.2, 0, 0, 1) both; }
  html:active-view-transition-type(ir)::view-transition-new(root) { animation: app-entra-ir 260ms cubic-bezier(.2, 0, 0, 1) both; }
  html:active-view-transition-type(voltar)::view-transition-old(root) { animation: app-sai-voltar 260ms cubic-bezier(.2, 0, 0, 1) both; z-index: 1; }
  html:active-view-transition-type(voltar)::view-transition-new(root) { animation: app-entra-voltar 260ms cubic-bezier(.2, 0, 0, 1) both; }
}
@keyframes app-entra-ir { from { transform: translateX(100%); } }
@keyframes app-sai-ir { to { transform: translateX(-25%); filter: brightness(.92); } }
@keyframes app-entra-voltar { from { transform: translateX(-25%); filter: brightness(.92); } }
@keyframes app-sai-voltar { to { transform: translateX(100%); } }
/* A tela nova entrando no toque (pwa/app.js, mostrarTelaChegando): por cima da página atual, até a
   página de verdade aparecer; a barra de abas fica parada por cima dela. */
html[data-app] .app-tela-chegando {
  position: fixed; inset: 0 0 var(--abas) 0; z-index: 17; overflow: hidden; background: var(--branco);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
  animation: app-tela-entra 240ms cubic-bezier(.2, 0, 0, 1) both;
}
html[data-app] .app-tela-chegando .app-esqueleto { height: 64px; margin-top: 20px; border: 1px solid var(--linha); background: var(--linha); opacity: .5; }
html[data-app] .app-tela-chegando .app-esqueleto--grande { height: 180px; }
@keyframes app-tela-entra { from { transform: translateX(100%); } }
/* A cópia fiel mostra a abertura e a ferramenta mesmo com uma tela da inicial aberta (#todas etc.) */
html[data-app] .app-tela-chegando .abertura { display: block !important; }
/* Só na prévia: o tempo da troca de tela (pwa/app.js, mostrarDiagnostico) */
html[data-app] .app-diagnostico {
  position: fixed; top: 6px; right: 6px; z-index: 200; pointer-events: none;
  padding: 3px 6px; background: rgba(26, 26, 26, .85); color: #fff; font: 11px/1.3 var(--mono, monospace);
}
@media (prefers-reduced-motion: reduce) { html[data-app] .app-tela-chegando { animation: none; box-shadow: none; } }
/* Resposta na hora ao toque (29/10/2026): a barrinha laranja do topo anda enquanto a próxima tela
   chega (html.app-indo, posta pelo pwa/app.js), e o item tocado escurece enquanto o dedo está nele. */
html[data-app].app-indo body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px;
  background: var(--laranja); transform-origin: 0 50%; opacity: 0;
  animation: app-indo-ver 1ms linear 250ms forwards, app-indo 3s cubic-bezier(.1, .7, .3, 1) 250ms forwards;
}
/* Só aparece se a troca passar de 250 ms (a tela que já veio buscada troca antes, sem barrinha) */
@keyframes app-indo-ver { to { opacity: 1; } }
@keyframes app-indo { from { transform: scaleX(.08); } to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) { html[data-app].app-indo body::before { animation: app-indo-ver 1ms linear 250ms forwards; transform: scaleX(.6); } }
html[data-app] .app-grade a:active .app-icone,
html[data-app] .app-chips a:active,
html[data-app] .app-lista a:active,
html[data-app] .cartao:active { background: var(--linha); }
/* Como um app (30/10/2026): sem o realce azul do navegador ao tocar, sem "puxar para recarregar" (as
   telas vêm do aparelho), botões que escurecem na hora sob o dedo e sem selecionar texto sem querer
   nos botões, abas e cartões (o texto das páginas e dos resultados continua selecionável). */
html[data-app] { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
html[data-app] :is(.app-abas, .app-grade, .app-chips, .app-lista, .cartao, .botao, button) { -webkit-user-select: none; user-select: none; }
html[data-app] :is(.botao, button):not(:disabled):active { opacity: .78; }
html[data-app] .app-abas a:active { color: var(--preto); }
/* Lista de ferramentas mais leve: os grupos fora da tela só são desenhados ao chegar perto */
html[data-app] .catalogo-grupo { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
/* O que fica fixo no pé sobe para cima da barra de abas */
html[data-app] .baixar-fixo,
html[data-app] .consentimento,
html[data-app] .consentimento-dialogo { bottom: var(--abas); }
html[data-app] .baixar-fixo { padding-bottom: 10px; }
/* Cabeçalho só com a marca; sem rodapé */
html[data-app] .cabecalho nav,
html[data-app] .cabecalho .acoes { display: none; }
html[data-app] .cabecalho .miolo { padding: 14px 0; }
html[data-app] .rodape { display: none; }
/* Ferramentas: sem os textos longos para o Google */
html[data-app] #como-usar,
html[data-app] #saiba-mais,
html[data-app] #perguntas { display: none; }
/* Página inicial: só as telas do app (o resto é do site) */
html[data-app] body:has(#comecar) main > :not(.abertura):not(.app-tela) { display: none; }
html[data-app] .abertura-topo,
html[data-app] .abertura-titulo,
html[data-app] .abertura .lead { display: none; }
html[data-app] .abertura .miolo { padding: 16px 0 0; border-bottom: 0; }
html[data-app] .abertura-base { margin-top: 0; }
html[data-app] #comecar { flex: 1 1 100%; background: var(--preto); color: var(--branco); border-color: var(--preto); gap: 16px; }
html[data-app] #comecar .soltar-cab { display: none; }
html[data-app] .app-abrir { display: flex; flex-direction: column; gap: 8px; }
html[data-app] .app-abrir strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
html[data-app] .app-abrir .rotulo { color: var(--linha); }
html[data-app] #comecar .botao { width: 100%; justify-content: center; background: var(--laranja); color: var(--preto); border-color: var(--laranja); }
/* A lista do arquivo escolhido ocupa a largura toda do cartão, sem a moldura preta dos lados (pedido do
   dono, 29/10/2026: "parece que deixa os menus muito encaixotados") */
html[data-app] #comecar { --pad: 28px; }
html[data-app] #comecar .soltar-resultado { flex: 0 0 calc(100% + 2 * var(--pad)); box-sizing: border-box; background: var(--branco); color: var(--preto); margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 16px var(--pad); }
html[data-app] #comecar:has(.soltar-resultado:not([hidden])) { border-color: var(--linha); }
@media (max-width: 640px) { html[data-app] #comecar { --pad: 20px; } }
html[data-app] .app-tela { display: block; }
html[data-app] .app-tela .miolo { padding: 24px 0 32px; }
html[data-app] .app-secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
html[data-app] .app-secao-cab h2,
html[data-app] .app-subtitulo { margin: 0; }
html[data-app] .app-secao-cab a { font-size: 15px; font-weight: 600; padding: 11px 0; }
html[data-app] .app-grade { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
html[data-app] .app-grade a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--preto); }
html[data-app] .app-icone { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--superficie); border: 1px solid var(--linha); }
html[data-app] .app-icone .simples { width: 48px; height: 48px; }
html[data-app] .app-nome { font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; }
html[data-app] .app-subtitulo { margin-top: 28px; }
html[data-app] .app-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
html[data-app] .app-chips a { display: inline-block; padding: 11px 14px; border: 1px solid var(--preto); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--preto); }
/* Recentes e Ajustes: telas da inicial pelo endereço (#recentes e #ajustes) */
html[data-app] .app-vista { display: none; }
html[data-app] .app-vista:target { display: block; scroll-margin-top: 100vh; }   /* abre do topo, com o cabeçalho */
html[data-app] body:has(.app-vista:target) .abertura,
html[data-app] body:has(.app-vista:target) .app-inicio { display: none; }
html[data-app] .app-titulo { margin: 0 0 16px; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
html[data-app] .app-lista { list-style: none; margin: 0; padding: 0; }
html[data-app] .app-lista li { border-bottom: 1px solid var(--linha); }
html[data-app] .app-lista a,
html[data-app] .app-lista button {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0; border: 0; background: none;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--preto); text-align: left; text-decoration: none; cursor: pointer;
  }
html[data-app] .app-lista .simples { width: 40px; height: 40px; flex: none; background: var(--superficie); }
html[data-app] .app-lista a::after,
html[data-app] .app-lista button::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 auto;
  border-top: 2px solid var(--preto); border-right: 2px solid var(--preto); transform: rotate(45deg);
}
html[data-app] .app-lista--links { margin-top: 8px; }
html[data-app] .app-vazio { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
html[data-app] .app-nota { margin-top: 20px; }
/* "Abrindo…" na hora do toque (pedido do dono, 29/10/2026: "quando clico devia aparecer algo carregando"):
   aviso no meio da tela enquanto o arquivo é guardado e a próxima tela chega (inicio.js e pwa/abrir.js
   põem o .app-carregando; na /abrir que recebe um PDF, o app-modo.js marca html[data-abrindo] antes de
   desenhar, e o aviso da página aparece no lugar da lista até o leitor abrir). */
.app-carregando, [data-abrindo-aviso] { display: none; }
html[data-app] .app-carregando,
html[data-abrindo] [data-abrindo-aviso] {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(243, 243, 241, .88);
}
html[data-abrindo] main > :not([data-abrindo-aviso]) { visibility: hidden; }
/* Indo para o leitor de PDF: fundo opaco (a cor do leitor), para a página de trás não aparecer
   antes do PDF (pedido do dono, 30/10/2026). */
html[data-app] .app-carregando--cheio,
html[data-abrindo] [data-abrindo-aviso] { background: var(--superficie); }
/* O leitor cobre a tela desde o 1º quadro, mesmo antes de o pwa/leitor.css chegar. */
html[data-app] .leitor { position: fixed; inset: 0; z-index: 60; background: var(--superficie); }
.app-carregando-caixa {
  display: flex; align-items: center; gap: 14px; max-width: 100%;
  padding: 18px 22px; background: var(--preto); color: var(--branco); font-size: 16px; font-weight: 600;
}
.app-carregando-caixa span { overflow-wrap: anywhere; }
.app-roda {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--laranja);
  animation: app-roda .8s linear infinite;
}
@keyframes app-roda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-roda { animation-duration: 2.4s; } }