/*
 * A página de apresentação — `/` (português) e `/en/` (inglês), rodada 19.
 *
 * Só o layout dela. Todo valor vem de `tokens.css` (a escala maior de título
 * mora lá, no bloco "página de apresentação"). A lista de pontos da
 * demonstração usa as classes da ferramenta (`.alteracao`, de
 * `painel-alteracoes.css`), carregado antes deste: quando o desenho do item
 * mudar no app, a demonstração muda junto. O resto das peças do app (barra do
 * par, segmentado, lista agrupada) é redesenhado aqui com os mesmos tokens,
 * para a página não carregar os 190 KB do `app.css`.
 *
 * A página não carrega o JavaScript da ferramenta. `landing.js` faz três
 * coisas: a contagem das comparações recentes, o acender do ponto e a escala
 * da folha. Sem ele, tudo continua legível.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Âncora ("Nenhum arquivo é enviado a servidor.", "Formatos") não para com
     o título por baixo do cabeçalho de vidro. */
  scroll-padding-top: calc(var(--landing-cabecalho) + var(--e-lg));
  accent-color: var(--acento-superficie);
  scrollbar-color: var(--linha-forte) transparent;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-interface);
  font-size: var(--t-corpo);
  line-height: var(--entrelinha-interface);
  letter-spacing: var(--letra-corpo);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--selecao);
  color: inherit;
}

:focus-visible {
  outline: var(--anel-foco) solid var(--acento);
  outline-offset: var(--anel-foco);
  border-radius: var(--raio-sm);
}

a {
  color: var(--acento);
  text-decoration: none;
  text-underline-offset: var(--docx-recuo-sublinhado);
}

@media (hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}

p,
h1,
h2,
h3,
ol,
ul,
figure {
  margin: 0;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* O ícone desenhado: traço na grade de 20, como `js/ui/icones.js`. */
.icone-l {
  flex: none;
  width: var(--icone);
  height: var(--icone);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icone-traco);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- *
 * Cabeçalho — vidro, fino, a marca e três ações                     *
 * ---------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: var(--camada-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  min-height: var(--landing-cabecalho);
  padding: env(safe-area-inset-top) max(var(--e-xl), env(safe-area-inset-right)) 0
    max(var(--e-xl), env(safe-area-inset-left));
  background: var(--vidro);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border-bottom: 1px solid var(--linha); /* hairline */
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: var(--alvo-toque);
  margin-left: calc(var(--e-sm) * -1); /* o ícone na margem, não o recuo */
  padding: 0 var(--e-sm);
  border-radius: var(--raio-md);
  color: var(--tinta);
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
  transition: background var(--rapido) var(--suave);
}

@media (hover: hover) {
  .topo__marca:hover {
    background: var(--fundo-realce);
    text-decoration: none;
  }
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-xs);
}

/* Botão discreto no vidro: `--acento-sobre-realce`, medido para o vidro nos
   dois temas (o `--acento` caía a 4,45:1 no escuro). */
.discreto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-ponteiro);
  padding: 0 var(--e-md);
  border-radius: var(--raio-pilula);
  color: var(--acento-sobre-realce);
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-apoio);
  white-space: nowrap;
  transition: background var(--rapido) var(--suave);
}

@media (hover: hover) {
  .discreto:hover {
    background: var(--fundo-realce);
    text-decoration: none;
  }
}

.icone-topo {
  display: grid;
  place-items: center;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  padding: 0;
  border: none;
  border-radius: var(--raio-md);
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

@media (hover: hover) {
  .icone-topo:hover {
    background: var(--fundo-realce);
    color: var(--tinta);
  }
}

@media (pointer: coarse) {
  .discreto {
    min-height: var(--alvo-toque);
  }
}

/* "Comparar agora" no cabeçalho (rodada 19b): o primário da página, sempre à
   vista (o cabeçalho é fixo). A pílula desenhada tem `--landing-botao-compacto`
   de altura, e o alvo em volta tem `--alvo-toque` — o toque pega a faixa
   inteira do cabeçalho, sem engordar o vidro. A pílula é o `::before`, e por
   isso o anel de foco e o encolher do toque vão nela, e não no alvo. */
.botao-topo {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  margin-left: var(--e-sm);
  padding: 0 calc(var(--e-md) + var(--e-xs));
  color: var(--acento-tinta);
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-apoio);
  white-space: nowrap;
}

.botao-topo::before {
  content: '';
  position: absolute;
  inset: calc((var(--alvo-toque) - var(--landing-botao-compacto)) / 2) 0;
  z-index: -1;
  border-radius: var(--raio-pilula);
  background: var(--acento-superficie);
  transition: background var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}

.botao-topo:focus-visible {
  outline: none;
}

.botao-topo:focus-visible::before {
  outline: var(--anel-foco) solid var(--acento);
  outline-offset: var(--anel-foco);
}

.botao-topo:active::before {
  transform: scale(var(--escala-toque));
}

@media (hover: hover) {
  .botao-topo:hover {
    color: var(--acento-tinta);
    text-decoration: none;
  }

  .botao-topo:hover::before {
    background: var(--acento-superficie-forte);
  }
}

/* ---------------------------------------------------------------- *
 * Botões                                                            *
 * ---------------------------------------------------------------- */

.botao-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--e-lg);
  border: none;
  border-radius: var(--raio-pilula);
  font-family: inherit;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  transition: background var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}

.botao-l:active {
  transform: scale(var(--escala-toque));
}

.botao-l--primario {
  background: var(--acento-superficie);
  color: var(--acento-tinta);
}

@media (hover: hover) {
  .botao-l--primario:hover {
    background: var(--acento-superficie-forte);
    color: var(--acento-tinta);
    text-decoration: none;
  }
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm) var(--e-lg);
}

/* O link ao lado do primário: texto azul solto, a outra assinatura do que
   clica. Alvo de 44px no dedo sem mudar o desenho. */
.link-l {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-ponteiro);
  font-size: var(--t-corpo);
}

@media (pointer: coarse) {
  .link-l {
    min-height: var(--alvo-toque);
  }
}

/* ---------------------------------------------------------------- *
 * Texto                                                             *
 * ---------------------------------------------------------------- */

.coluna {
  width: min(100% - 2 * var(--e-xl), var(--landing-coluna));
  margin-inline: auto;
}

.titulo-pagina {
  font-size: var(--t-landing-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-landing-titulo);
  letter-spacing: var(--letra-landing-titulo);
  color: var(--marca-tinta);
  text-wrap: balance;
}

.titulo-secao {
  font-size: var(--t-landing-secao);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-landing-secao);
  letter-spacing: var(--letra-landing-secao);
  color: var(--marca-tinta);
  text-wrap: balance;
}

.texto {
  max-width: var(--landing-medida);
  font-size: var(--t-landing-texto);
  line-height: var(--entrelinha-landing-texto);
  text-wrap: pretty;
}

/* Link no meio de uma frase de apoio ("Ver este exemplo", "Abrir a
   ferramenta completa", "Ver todas"): sublinhado, além da cor. Só o tom de
   azul não o separa do texto cinza em volta para quem não distingue a cor
   (axe `link-in-text-block`). Os links soltos seguem sem sublinhado. */
.apoio a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

.texto--suave {
  color: var(--tinta-suave);
}

.apoio {
  font-size: var(--t-apoio);
  line-height: var(--entrelinha-interface);
  letter-spacing: var(--letra-apoio);
  color: var(--tinta-suave);
}

.etiqueta-l {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.pilha {
  display: flex;
  flex-direction: column;
  gap: var(--e-lg);
}

/* ---------------------------------------------------------------- *
 * Dobra e seções                                                    *
 * ---------------------------------------------------------------- */

.dobra {
  display: grid;
  grid-template-columns: var(--landing-texto-dobra) minmax(0, 1fr);
  column-gap: var(--e-xxl);
  align-items: start;
  padding-block: var(--landing-respiro-dobra) var(--e-xxl);
}

.dobra__texto {
  padding-top: var(--e-lg);
}

/* A pergunta seguinte já aparece no pé da dobra, como a próxima linha de uma
   conversa. Texto, e não link: o convite é rolar. */
.dobra__proxima {
  grid-column: 1;
  margin-top: var(--e-xl);
  font-size: var(--t-landing-texto);
  font-weight: var(--peso-forte);
  color: var(--tinta-suave);
}

.secao {
  padding-block: var(--landing-respiro-secao);
  border-top: 1px solid var(--linha); /* hairline, o único separador */
}

.secao__grade {
  display: grid;
  grid-template-columns: var(--landing-texto-secao) minmax(0, 1fr);
  gap: var(--e-xxl);
  align-items: start;
}

.secao__grade--centro {
  align-items: center;
}

.fecho {
  text-align: center;
}

.fecho .pilha {
  align-items: center;
}

.fecho .texto {
  margin-inline: auto;
}

.fecho .acoes {
  justify-content: center;
}

.fecho__titulo {
  font-size: var(--t-destaque);
  line-height: var(--entrelinha-destaque);
  letter-spacing: var(--letra-destaque);
}

/* ---------------------------------------------------------------- *
 * As zonas de soltar (rodada 19b)                                   *
 *                                                                   *
 * O desenho da zona da ferramenta (`.cartao-documento__zona`, em    *
 * `app.css`): papel, traço tracejado de hairline forte, raio grande; *
 * sob o arquivo arrastado, traço cheio no azul e a lavagem de       *
 * adição. Com o arquivo escolhido, o traço fica cheio e o nome      *
 * toma o lugar da dica. Recusado, a lavagem de supressão.           *
 * ---------------------------------------------------------------- */

.entrega {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
}

.zonas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-md);
}

.zona-l {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
  min-width: 0;
  min-height: var(--landing-zona-altura);
  padding: var(--e-md);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-lg);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background var(--rapido) var(--suave), border-color var(--rapido) var(--suave),
    transform var(--rapido) var(--suave);
}

/* O `dragleave` dispara ao passar sobre um filho; sem alvo nos filhos, a
   zona não pisca enquanto o arquivo anda por cima dela. */
.zona-l > * {
  pointer-events: none;
}

.zona-l:focus-visible {
  border-radius: var(--raio-lg);
}

@media (hover: hover) {
  .zona-l:hover {
    border-color: var(--acento);
  }
}

.zona-l:active {
  transform: scale(var(--escala-toque));
}

.zona-l__icone {
  color: var(--acento);
}

.zona-l__rotulo {
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-apoio);
}

.zona-l__dica {
  max-width: 100%;
  font-size: var(--t-apoio);
  letter-spacing: var(--letra-apoio);
  color: var(--tinta-suave);
}

/* O nome do arquivo: uma linha, cortada no fim; o `title` da zona o tem
   inteiro. */
.zona-l__nome {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tinta);
}

.zona-l--arrastando {
  border-style: solid;
  border-color: var(--acento);
  background: var(--adicao-fundo);
  transform: scale(var(--escala-arraste));
}

.zona-l--cheia {
  border-style: solid;
}

.zona-l--erro {
  border-color: var(--supressao-borda);
  background: var(--supressao-fundo);
}

.zona-l[aria-disabled='true'] {
  cursor: progress;
}

/* "Solte ou escolha" no ponteiro; no dedo não há o que soltar. */
.so-toque {
  display: none;
}

@media (pointer: coarse) {
  .so-ponteiro {
    display: none;
  }

  .so-toque {
    display: inline;
  }
}

.entrega__estado:empty {
  display: none;
}

.entrega__estado--erro {
  color: var(--supressao-tinta);
}

/* ---------------------------------------------------------------- *
 * Quem já usa: "Continue de onde parou" (rodada 19b)                *
 * ---------------------------------------------------------------- */

/* A dobra só existe com `data-retorno` na raiz, posto no `<head>` antes do
   primeiro desenho: mostrada depois, ela empurraria a página já desenhada. */
.retorno {
  display: none;
  grid-template-columns: var(--landing-texto-retorno) minmax(0, 1fr);
  column-gap: var(--e-xxl);
  align-items: start;
  padding-block: var(--landing-respiro-retorno) var(--e-xxl);
}

[data-retorno] .retorno {
  display: grid;
}

/* A frase de apoio das zonas na primeira visita sai com elas. */
[data-retorno] [data-papel='apoio-primeira'] {
  display: none;
}

.retorno__recentes {
  gap: var(--e-md);
}

.retorno__titulo {
  font-size: var(--t-landing-texto);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-interface);
  color: var(--marca-tinta);
}

/* A apresentação continua abaixo, depois da hairline — o mesmo separador
   entre as perguntas. */
[data-retorno] .dobra {
  border-top: 1px solid var(--linha);
}

/* Cada comparação recente: a linha da lista da ferramenta
   (`.historico__*` em `app.css`), com a pastilha, o par cortado pelo par na
   linha 1 e formato · quando · pontos · progresso na linha 2. */
.par-l {
  display: flex;
  align-items: baseline;
  gap: var(--e-xs);
  min-width: 0;
  font-weight: var(--peso-medio);
}

/* Sem começo comum, os dois nomes inteiros quebram onde der, e não cortam:
   nome que não quebra empurraria a página de lado no celular. */
.par-l:not(.par-l--cortado) {
  display: block;
  overflow-wrap: anywhere;
}

.par-l:not(.par-l--cortado) .par-l__seta {
  margin: 0 var(--e-xs);
}

.par-l--cortado {
  gap: 0;
}

.par-l__inicio {
  flex: 0 1 auto;
  min-width: var(--historico-inicio-minimo);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.par-l__diferenca {
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(100% - var(--historico-inicio-minimo));
  overflow-wrap: anywhere;
}

.par-l__marca {
  font-weight: var(--peso-forte);
}

.par-l__extensao {
  white-space: nowrap;
}

.par-l__seta {
  display: inline-grid;
  flex: none;
  align-self: center;
  vertical-align: middle;
  color: var(--tinta-fraca);
}

.par-l__diferenca .par-l__seta {
  margin: 0 var(--e-xs);
}

.par-l__seta--meta {
  margin: 0 var(--vao-linha-dupla);
}

.icone-l--miudo {
  width: var(--icone-miudo);
  height: var(--icone-miudo);
}

.recente-l__meta {
  overflow-wrap: anywhere;
}

.recente-l__formato {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- *
 * A demonstração da dobra — barra do par, lista de pontos, folha    *
 * ---------------------------------------------------------------- */

.demo {
  overflow: hidden;
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.demo__par {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  padding: var(--e-md);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-suave);
}

.chip-l {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: var(--alvo-toque);
  padding: 0 var(--e-md);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
}

.chip-l__nome {
  overflow: hidden;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-apoio);
  color: var(--tinta);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo__titulo {
  padding: var(--e-md) var(--e-lg) var(--e-xs);
  font-size: var(--t-corpo);
  font-weight: var(--peso-forte);
}

.demo__semelhanca {
  font-size: var(--t-apoio);
  font-weight: var(--peso-normal);
  color: var(--tinta-suave);
}

/* A lista é um container, como na ferramenta: a regra "estreita" do item
   (`@container lista`) vale aqui também. */
.demo__pontos {
  container: lista / inline-size;
  padding: 0 var(--e-md) var(--e-md);
  list-style: none;
}

/* Na ferramenta o item aberto mostra decisões e nota; aqui ele só acende. */
.demo__pontos .alteracao {
  outline-offset: calc(var(--anel-foco) * -1);
}

/* A mesa sob a folha: o realce, e não o fundo da página — no escuro o
   `--fundo` é preto, e a demonstração parecia terminar no meio. */
.demo__mesa {
  padding: var(--e-lg);
  border-top: 1px solid var(--linha);
  background: var(--fundo-realce);
}

/*
 * A folha branca — nos DOIS temas (Regra da Folha Branca). Papel, tinta e
 * marcas da família `--docx-`, que não vira com o tema.
 */
.folha-l {
  padding: var(--e-lg) var(--e-xl);
  border-radius: var(--raio-sm);
  background: var(--docx-papel);
  color: var(--docx-tinta);
  font-family: var(--fonte-documento);
  font-size: var(--t-documento);
  line-height: var(--entrelinha-documento);
  box-shadow: var(--sombra-chip);
}

.folha-l table {
  width: 100%;
  border-collapse: collapse;
}

.folha-l th,
.folha-l td {
  padding: var(--e-xs) var(--e-sm);
  border: var(--docx-tabela-linha);
  text-align: start;
  vertical-align: top;
}

/*
 * O trecho do ponto aceso. Um só à vista por vez: tocar outro ponto troca o
 * trecho, como a ferramenta leva o documento ao ponto escolhido. É o único
 * movimento da página — o trecho surge por opacidade, curto, e a palavra
 * marcada ganha o anel do ponto aceso.
 */
.demo__trecho {
  animation: landing-acender var(--entrada) var(--suave);
}

@keyframes landing-acender {
  from {
    opacity: 0;
  }
}

/* As marcas dentro da folha: a tinta congelada da folha, e o fundo é a mesma
   tinta a 18% misturada sobre o PAPEL (como a palavra marcada do parágrafo
   aceso na ferramenta — sobre o papel ela fica em 5,0:1). */
.folha-l ins,
.folha-l del {
  border-radius: var(--docx-raio-marca);
  text-decoration-thickness: var(--docx-traco-marca);
  text-underline-offset: var(--docx-recuo-sublinhado);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: box-shadow var(--rapido) var(--suave);
}

.folha-l ins {
  color: var(--docx-adicao-tinta);
  background: color-mix(in srgb, var(--docx-adicao-tinta) calc(var(--marca-fluxo-alfa) * 100%), var(--docx-papel));
  text-decoration: underline;
}

.folha-l del {
  color: var(--docx-supressao-tinta);
  background: color-mix(in srgb, var(--docx-supressao-tinta) calc(var(--marca-fluxo-alfa) * 100%), var(--docx-papel));
  text-decoration: line-through;
}

.folha-l .movida {
  border-radius: var(--docx-raio-marca);
  color: var(--docx-movido-tinta);
  background: color-mix(in srgb, var(--docx-movido-tinta) calc(var(--marca-fluxo-alfa) * 100%), var(--docx-papel));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* O anel do ponto aceso, o mesmo `.marca-fluxo--ativa` da ferramenta — só
   onde o trecho à vista carrega mais de um ponto (a tabela: uma linha por
   ponto). Num parágrafo de um ponto só, o anel em cada palavra seria ruído. */
.folha-l table [data-ponto].aceso {
  box-shadow: 0 0 0 var(--anel-foco) var(--acento);
}

.demo__rotulo {
  margin-top: var(--e-md);
}

/* ---------------------------------------------------------------- *
 * Lista agrupada (histórico, legenda, formatos, modos)              *
 * ---------------------------------------------------------------- */

.grupo {
  overflow: hidden;
  border-radius: var(--raio-lg);
  background: var(--papel);
  list-style: none;
  padding: 0;
}

/* As duas listas que vêm da tela inicial da ferramenta ("Comparações
   recentes", "Outras formas de comparar") levam a superfície de marca de lá:
   papel no claro, azul-escuro no escuro. Nenhum link solto mora sobre ela. */
.grupo--marca {
  background: var(--marca-superficie);
}

.grupo__linha {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  min-height: var(--alvo-toque);
  padding: var(--e-md) var(--e-lg);
  color: var(--tinta);
}

.grupo__linha + .grupo__linha {
  border-top: 1px solid var(--linha);
}

.grupo__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
  min-width: 0;
}

.grupo__nome {
  font-weight: var(--peso-medio);
}

/* A linha que leva a algum lugar: seta › à direita e realce no ponteiro e no
   toque (a Regra das Duas Assinaturas). */
a.grupo__linha {
  transition: background var(--rapido) var(--suave);
}

a.grupo__linha::after {
  content: '';
  flex: none;
  width: var(--seta-revelador);
  height: var(--seta-revelador);
  margin: 0 var(--e-xs) 0 auto;
  border-right: var(--traco-icone) solid var(--tinta-suave);
  border-bottom: var(--traco-icone) solid var(--tinta-suave);
  transform: rotate(-45deg);
}

a.grupo__linha:active {
  background: var(--marca-superficie-realce);
}

@media (hover: hover) {
  a.grupo__linha:hover {
    background: var(--marca-superficie-realce);
    text-decoration: none;
  }
}

/* Dentro da lista a linha é o `<a>`; a hairline fica entre os itens. */
.grupo > li + li > .grupo__linha {
  border-top: 1px solid var(--linha);
}

.pastilha-l {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--pastilha-icone);
  height: var(--pastilha-icone);
  border-radius: var(--raio-md);
  background: var(--marca-pastilha);
  color: var(--marca-pastilha-tinta);
}

/* ---- "Comparações recentes", como na tela inicial da ferramenta ---- */

.recentes {
  padding: var(--e-lg);
}

.recentes__titulo {
  margin-bottom: var(--e-sm);
  font-size: var(--t-corpo);
  font-weight: var(--peso-forte);
  color: var(--marca-tinta);
}

.recentes__opcao {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  margin-top: var(--e-lg);
  padding-top: var(--e-md);
  border-top: 1px solid var(--linha);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

/* A caixa marcada, desenhada: é a figura do controle da ferramenta, e não um
   controle — aqui ela não grava nada. */
.recentes__caixa {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--icone);
  height: var(--icone);
  border-radius: var(--raio-sm);
  background: var(--acento-superficie);
  color: var(--acento-tinta);
}

.recentes__caixa .icone-l {
  width: var(--icone-miudo);
  height: var(--icone-miudo);
}

.recentes__nota {
  margin-top: var(--e-sm);
}

/* ---- A legenda das cinco marcas ---- */

.legenda__amostra {
  flex: none;
  width: var(--landing-legenda-amostra);
  font-family: var(--fonte-documento);
}

.marca-formatacao-l {
  border-radius: var(--raio-sm);
  color: var(--formatacao-tinta);
  background: var(--formatacao-fundo);
  font-weight: var(--peso-forte);
}

/* ---- A seção "mudou de lugar": duas colunas de texto ---- */

.duas-folhas {
  overflow: hidden;
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.duas-folhas__colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-md);
  padding: var(--e-lg);
  background: var(--fundo-realce);
}

.duas-folhas .folha-l {
  padding: var(--e-md) var(--e-lg);
  font-size: var(--t-apoio);
}

.duas-folhas .folha-l p + p {
  margin-top: var(--e-sm);
}

.folha-l .etiqueta-l {
  color: var(--docx-tinta-fraca);
}

.duas-folhas .etiqueta-l {
  display: block;
  margin-bottom: var(--e-sm);
}

.lista-estatica {
  container: lista / inline-size;
  padding: var(--e-xs) var(--e-md);
  border-top: 1px solid var(--linha);
  list-style: none;
}

.lista-estatica .alteracao {
  cursor: default;
}

.lista-estatica .alteracao:hover,
.lista-estatica .alteracao:active {
  background: none;
}

/* ---- A folha do Word, na aba Documento ---- */

.mesa-documento {
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--fundo-realce);
}

.zoom-l {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-sm);
}

.zoom-l__valor {
  min-width: var(--largura-valor-zoom);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.segmentado-l {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--trilho-abas);
  padding: var(--trilho-abas);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
}

.mesa-documento .segmentado-l {
  background: var(--papel);
}

.segmentado-l__opcao {
  min-height: var(--alvo-ponteiro);
  padding: 0 var(--e-lg);
  border: none;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-apoio);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rapido) var(--suave), color var(--rapido) var(--suave);
}

@media (hover: hover) {
  .segmentado-l__opcao:hover {
    color: var(--tinta);
  }
}

.segmentado-l__opcao[aria-checked='true'],
.segmentado-l__opcao[aria-pressed='true'] {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-chip);
}

.mesa-documento .segmentado-l__opcao[aria-pressed='true'] {
  background: var(--fundo-realce);
  box-shadow: none;
}

@media (pointer: coarse) {
  .segmentado-l__opcao {
    min-height: var(--alvo-toque);
  }
}

.mesa-documento__janela {
  overflow: auto;
  max-height: var(--landing-folha-altura);
  border-radius: var(--raio-sm);
  overscroll-behavior: contain;
}

/* A folha do arquivo: largura, altura e margens do `w:pgSz`/`w:pgMar` vêm
   inline do HTML (são medidas do documento, e não escolha de desenho). */
.folha-word {
  zoom: var(--folha-zoom, var(--landing-folha-escala-inicial));
  width: var(--folha-largura);
  min-height: var(--folha-altura);
  padding: var(--folha-margem);
  background: var(--docx-papel);
  color: var(--docx-tinta);
  font-family: 'Cambria', var(--docx-fonte-serif);
  font-size: var(--folha-corpo);
  box-shadow: var(--sombra-chip);
}

.folha-word p {
  margin: 0;
}

.folha-word table {
  border-collapse: collapse;
  table-layout: fixed;
}

.folha-word th,
.folha-word td {
  padding: 0 var(--e-xs);
  border: var(--docx-tabela-linha);
  text-align: start;
  vertical-align: top;
}

/* No Documento cada lado mostra as marcas dele: a folha revisada, o que
   entrou. A tinta e o traço são os da folha. */
.folha-word ins {
  color: var(--docx-adicao-tinta);
  background: color-mix(in srgb, var(--docx-adicao-tinta) calc(var(--marca-fluxo-alfa) * 100%), var(--docx-papel));
  text-decoration: underline;
  text-decoration-thickness: var(--docx-traco-marca);
  text-underline-offset: var(--docx-recuo-sublinhado);
  border-radius: var(--docx-raio-marca);
}

/* ---- O Exportar ---- */

.exportar-l {
  display: flex;
  flex-direction: column;
  gap: var(--e-md);
  padding: var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.exportar-l + .grupo {
  margin-top: var(--e-lg);
}

/* ---------------------------------------------------------------- *
 * Rodapé                                                            *
 * ---------------------------------------------------------------- */

.rodape {
  padding-block: var(--e-xl) var(--e-xxl);
  border-top: 1px solid var(--linha);
}

.rodape__faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md) var(--e-lg);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
}

.rodape__nome {
  font-weight: var(--peso-forte);
  color: var(--tinta);
}

.rodape__links {
  display: flex;
  gap: var(--e-lg);
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-ponteiro);
}

@media (pointer: coarse) {
  .rodape a {
    min-height: var(--alvo-toque);
  }
}

/* ---------------------------------------------------------------- *
 * Larguras                                                          *
 * ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .dobra,
  .secao__grade,
  .retorno {
    grid-template-columns: minmax(0, 1fr);
  }

  .retorno {
    row-gap: var(--e-xl);
    padding-block: var(--e-xxl) var(--e-xl);
  }

  .dobra {
    row-gap: var(--e-xl);
    padding-block: var(--e-xxl) var(--e-xl);
  }

  .dobra__texto {
    padding-top: 0;
  }

  .dobra__proxima {
    margin-top: 0;
  }

  .secao {
    padding-block: var(--e-xxl);
  }

  .secao__grade {
    gap: var(--e-xl);
  }
}

@media (max-width: 600px) {
  .coluna {
    width: calc(100% - 2 * var(--e-lg));
  }

  .topo {
    padding-inline: max(var(--e-lg), env(safe-area-inset-left)) max(var(--e-lg), env(safe-area-inset-right));
  }

  .so-largo {
    display: none;
  }

  .titulo-pagina {
    font-size: var(--t-destaque);
    line-height: var(--entrelinha-destaque);
    letter-spacing: var(--letra-destaque);
  }

  /* A demonstração no celular: três pontos e o parágrafo. */
  .demo__pontos li:nth-child(n + 4) {
    display: none;
  }

  .demo__par {
    padding: var(--e-sm);
  }

  /* Como na barra do par da ferramenta: as etiquetas ORIGINAL/REVISADO só em
     tela larga. No celular o nome inteiro cabe no lugar delas; o leitor de
     tela continua ouvindo qual lado é qual. */
  .chip-l {
    padding-inline: var(--e-sm);
  }

  .chip-l .etiqueta-l {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .demo__mesa {
    padding: var(--e-md);
  }

  .folha-l {
    padding: var(--e-md) var(--e-lg);
  }

  .duas-folhas__colunas {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--e-md);
  }

  .legenda .grupo__linha {
    flex-wrap: wrap;
    row-gap: var(--e-xs);
  }

  .legenda__amostra {
    width: 100%;
  }

  .mesa-documento {
    padding: var(--e-md);
  }

  .rodape__faixa {
    flex-direction: column;
    align-items: flex-start;
  }
}