/* Reserva de mesma largura para o título: se a fonte atrasar, as linhas quebram no mesmo lugar (nada salta na troca). */
  @font-face { font-family: 'Newsreader reserva'; src: local('Georgia'); size-adjust: 95.5%; }
  /* Por cima de base.css (sugestão para a base): reserva de fonte e a entrelinha da vista aprovada de fontes.html. */
  html[data-fonte='b'] { --lp-fonte-titulo: 'Newsreader', 'Newsreader reserva', Georgia, serif; --lp-lh-titulo: 1.13; }
  :root {
    /* Coluna do texto desta hero (mais larga que os 360 px da tela de entrada). */
    --lp-coluna: min(640px, 56vw);
    /* Quanto de rolagem a hero fica presa antes de a seção seguinte começar a cobri-la: 90% de uma tela
       (a câmera parte de mais perto que antes e tem mais caminho até a poligonal inteira). */
    --lp-subida: 120vh;
    /* Cabeçalho: a altura e a borda direita da vista aprovada de fontes.html (o crédito usa os mesmos 32 px). */
    --lp-topo: 72px;
    --lp-borda-direita: 32px;
    /* Onde o bloco de texto começa: o mesmo recuo do topo da vista aprovada. */
    --lp-topo-do-bloco: clamp(150px, 23vh, 224px);
    --lp-sombra-texto: 0 0 3px color-mix(in srgb, var(--ds-cor-fundo) 90%, transparent), 0 0 1px color-mix(in srgb, var(--ds-cor-fundo) 90%, transparent);
  }

  /* Margem em pixel inteiro (sugestão para a base): a marca é imagem e perde nitidez em posição quebrada. */
  @supports (width: round(1px, 1px)) { :root { --lp-margem: round(max(48px, 7vw), 1px); } }

  /* ---------- palco: a hero presa e o trecho de rolagem que conduz a câmera ---------- */
  /* Só a subida da câmera prende a hero. No celular e com movimento reduzido ela rola como tela comum
     (no celular, com o véu escurecendo a foto na saída): não sobra trecho de rolagem sem nada para ler. */
  .palco { position: relative; }
  .hero { position: relative; height: 100vh; height: 100svh; overflow: clip; background: var(--ds-cor-fundo); }
  html[data-saida='subida'] .palco { height: calc(170vh + var(--lp-subida)); }
  html[data-saida='subida'] .hero { position: sticky; top: 0; }
  html[data-saida='subida'] .problema { margin-top: -100vh; }

  .fundo-mapa { background: var(--ds-cor-fundo); }
  .hero[data-fora] .fundo-mapa { visibility: hidden; }

  /* ---------- a poligonal real do processo: traço fino por cima da foto, por baixo do véu ---------- */
  /* Um desenho só, aqui e na amostra do crédito: 1 px na cor do texto, quadradinho de 4 px em cada vértice.
     A força do traço é a opacidade da camada, conduzida pela rolagem: metade em repouso, inteira com a câmera no alto. */
  .tracos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; fill: none; opacity: 0.5; will-change: opacity; }
  .tracos path, .tracos use, .amostra path {
    fill: none; stroke: var(--ds-cor-texto); stroke-width: 1; stroke-opacity: 0.64; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  }
  .tracos .vertices, .amostra path { stroke-linejoin: miter; }
  /* A poligonal nunca passa atrás do texto: a camada principal é recortada na coluna (máscara fixa, em degradê de 80 px).
     O trecho da esquerda mora numa segunda camada, que só aparece (por opacidade) conforme o texto sai na rolagem. */
  /* Ela também não passa atrás do crédito durante a subida: a máscara abre uma janela no canto dele
     (a coluna do texto E, ao mesmo tempo, à esquerda do crédito OU acima dele). */
  .tracos {
    --lp-corte-coluna: linear-gradient(90deg, transparent calc(var(--lp-margem) + var(--lp-coluna) + 20px), var(--ds-cor-fundo) calc(var(--lp-margem) + var(--lp-coluna) + 100px));
    --lp-corte-credito-lado: linear-gradient(90deg, var(--ds-cor-fundo) calc(100% - 453px), transparent calc(100% - 421px));
    --lp-corte-credito-alto: linear-gradient(180deg, var(--ds-cor-fundo) calc(100% - 97px), transparent calc(100% - 73px));
    -webkit-mask-image: var(--lp-corte-coluna), var(--lp-corte-credito-lado), var(--lp-corte-credito-alto); mask-image: var(--lp-corte-coluna), var(--lp-corte-credito-lado), var(--lp-corte-credito-alto);
    -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add;
  }
  .tracos.tracos-esquerda {
    -webkit-mask-image: linear-gradient(90deg, var(--ds-cor-fundo) calc(var(--lp-margem) + var(--lp-coluna) + 20px), transparent calc(var(--lp-margem) + var(--lp-coluna) + 100px)); mask-image: linear-gradient(90deg, var(--ds-cor-fundo) calc(var(--lp-margem) + var(--lp-coluna) + 20px), transparent calc(var(--lp-margem) + var(--lp-coluna) + 100px));
    -webkit-mask-composite: source-over; mask-composite: add; opacity: 0;
  }
  .tracos .vertices { transition: opacity 600ms var(--ds-curva); }
  .js .tracos:not([data-desenhado]) .lado { visibility: hidden; }
  .js .tracos:not([data-vertices]) .vertices { opacity: 0; }
  .tracos .lado[data-desenhando] { transition: stroke-dashoffset var(--dur, 1200ms) var(--ds-curva); }

  /* ---------- véu de leitura: o da vista aprovada de fontes.html (o mesmo desenho da tela de entrada) ---------- */
  .veu-coluna {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--ds-cor-fundo) 90%, transparent) 0%,
      color-mix(in srgb, var(--ds-cor-fundo) 82%, transparent) calc(var(--lp-margem) + 520px),
      color-mix(in srgb, var(--ds-cor-fundo) 24%, transparent) calc(var(--lp-margem) + 800px),
      transparent calc(var(--lp-margem) + 1000px));
    will-change: opacity;
  }
  .veu-borda {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) 0, transparent 150px),
      linear-gradient(0deg, color-mix(in srgb, var(--ds-cor-fundo) 55%, transparent) 0%, transparent 22%);
  }
  /* Reforço atrás do crédito. Na subida ele abre: no zoom aberto a floresta é escura e a mancha apareceria. */
  .veu-canto {
    background: radial-gradient(ellipse 760px 220px at 100% 100%,
      color-mix(in srgb, var(--ds-cor-fundo) 72%, transparent) 0%,
      color-mix(in srgb, var(--ds-cor-fundo) 66%, transparent) 65%,
      transparent 100%);
    will-change: opacity;
  }
  /* Saída sem subida de câmera (celular): a foto só escurece. */
  .veu-saida { background: var(--ds-cor-fundo); opacity: 0; will-change: opacity; }

  /* ---------- cabeçalho: sem contêiner; o desenho é o da vista aprovada de fontes.html ---------- */
  .topo {
    position: fixed; inset: 0 0 auto 0; height: var(--lp-topo); z-index: 50; pointer-events: none;
    display: flex; align-items: center; gap: 28px; padding: 0 var(--lp-borda-direita) 0 var(--lp-margem);
  }
  .topo > * { position: relative; pointer-events: auto; }
  /* Véu de leitura do cabeçalho: gradiente da cor do fundo, sem caixa, sem linha e sem desfoque. Entra por opacidade ao
     sair do topo e sai pelo mesmo caminho. O que passa por baixo some dentro dele antes de encostar nos itens. */
  .topo > .topo-veu {
    position: absolute; inset: 0 0 auto 0; height: calc(var(--lp-topo) + 64px); pointer-events: none;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ds-cor-fundo) 96%, transparent) 0,
      color-mix(in srgb, var(--ds-cor-fundo) 92%, transparent) var(--lp-topo),
      color-mix(in srgb, var(--ds-cor-fundo) 48%, transparent) calc(var(--lp-topo) + 32px),
      transparent 100%);
    opacity: 0; transition: opacity var(--ds-dur-media) var(--ds-curva);
  }
  .topo[data-rolado] > .topo-veu { opacity: 1; }
  /* Sem JavaScript não há véu: o cabeçalho rola embora com a página. */
  html:not(.js) .topo { position: absolute; }
  /* A marca fica na margem da casa; o recuo em volta dela é a área do hover e da pressão. */
  .marca {
    display: block; flex: none; padding: 8px 10px; margin: -8px -10px; border-radius: var(--ds-raio-medio);
    color: var(--ds-cor-texto); text-decoration: none; font-size: 15px; line-height: 21px; font-weight: 600;
    transition: background-color var(--ds-dur-rapida) var(--ds-curva);
  }
  .marca img { display: block; height: 21px; width: auto; }
  .marca:hover { background-color: var(--ds-cor-realce); }
  .marca:active { background-color: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .marca:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .topo-nav { display: flex; align-items: center; gap: 4px; }
  .item {
    display: inline-flex; align-items: center; flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: var(--ds-raio-medio);
    background: transparent; color: var(--ds-cor-texto); font: 400 13px/18px var(--lp-fonte-texto); text-decoration: none; white-space: nowrap; cursor: pointer;
    text-shadow: var(--lp-sombra-texto);
    transition: background-color var(--ds-dur-rapida) var(--ds-curva);
  }
  .item:hover { background-color: var(--ds-cor-preenchimento); }
  .item:active { background-color: color-mix(in srgb, var(--ds-cor-texto) 22%, transparent); transition-duration: 0ms; }
  .item:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .topo .entrar { margin-left: auto; }
  .botao-pequeno { flex: none; height: 36px; padding: 0 14px; margin-left: -18px; border-radius: var(--ds-raio-medio); font-size: 13px; line-height: 18px; }
  .menu-botao, .menu { display: none; }
  .menu a { color: var(--ds-cor-texto); text-decoration: none; }

  /* ---------- coluna do texto ---------- */
  .palavra { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: var(--lp-topo-do-bloco) var(--lp-margem) 0; pointer-events: none; }
  .coluna { width: var(--lp-coluna); pointer-events: auto; will-change: opacity, transform; }
  .coluna[data-fora] { visibility: hidden; }
  /* O título quebra entre as duas orações, não no meio de uma. */
  .vitrine .oracao { display: inline-block; }
  .frase { margin: 0; max-width: 500px; font-size: 17px; line-height: 26px; letter-spacing: -0.01em; color: var(--ds-cor-texto-2); text-wrap: balance; }
  .busca {
    position: relative; display: block; margin: 36px 0 0; width: min(440px, 100%); height: 54px; border-radius: var(--ds-raio-grande);
    -webkit-backdrop-filter: var(--ds-material-desfoque); backdrop-filter: var(--ds-material-desfoque);
  }
  /* O desfoque mora no campo desde a primeira pintura; a tinta e o anel do vidro moram nesta camada, que é a que entra.
     Medido: ligar o desfoque no meio da entrada custava um quadro de 21 a 30 ms em toda carga. */
  .busca::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: color-mix(in srgb, var(--ds-cor-superficie) 74%, transparent);
    box-shadow: inset 0 0 0 1px var(--ds-cor-borda), inset 0 1px 0 color-mix(in srgb, var(--ds-cor-texto) 16%, transparent);
    transition: box-shadow 160ms var(--ds-curva), background-color 160ms var(--ds-curva);
  }
  .busca:hover::before { background: color-mix(in srgb, var(--ds-cor-superficie) 82%, transparent); }
  .busca:focus-within::before {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ds-cor-texto) 52%, transparent), 0 0 0 4px color-mix(in srgb, var(--ds-cor-texto) 10%, transparent);
  }
  .busca input {
    position: relative; width: 100%; height: 100%; margin: 0; padding: 0 56px 0 16px; border: 0; border-radius: inherit; background: transparent; outline: none;
    color: var(--ds-cor-texto); font: 400 15px/22px var(--lp-fonte-texto); letter-spacing: -0.005em;
  }
  .busca input::placeholder { color: var(--ds-cor-texto-2); opacity: 1; }
  .busca input { -webkit-appearance: none; appearance: none; }
  .busca input::-webkit-search-decoration, .busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .lupa {
    position: absolute; top: 9px; right: 9px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0;
    border-radius: var(--ds-raio-medio); background: transparent; color: var(--ds-cor-texto-2); cursor: pointer;
    transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva);
  }
  .lupa:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); }
  .lupa:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .lupa:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 1px; }
  .lupa svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  /* Campo e ação formam um grupo: 16 px entre eles (o texto acima fica a 36). */
  .acao { margin: 16px 0 0; }

  /* Tela larga: o bloco fica onde a vista aprovada o pôs. As contas são em relação à linha de base do título
     (medido: a primeira linha de base fica a 0,8065em do topo da caixa, com a entrelinha de 1,13):
     - o título desce para a linha de base da primeira linha cair a 0,77em do começo do bloco;
     - a frase começa 40 px abaixo da linha de base da segunda linha;
     - a margem óptica (-0,04em) alinha a tinta do "S" e do "e" com a marca, a frase e o campo. */
  @media (min-width: 761px) {
    .hero .vitrine { margin: -0.0365em 0 calc(40px - 0.3235em) -0.04em; }
  }

  /* Entrada do texto: de 10 px abaixo e opacidade zero, escalonada em 70 ms. Só com JavaScript.
     A opacidade termina antes do deslocamento (360 ms na curva padrão; 520 ms na curva de quem desliza), como no pouso do sistema. */
  /* O texto espera a fonte e o mapa (teto de 1 s) e entra de uma vez, com a foto: nasce onde fica, com o navegador já quieto. */
  @keyframes lp-entra-opacidade { from { opacity: 0; } }
  @keyframes lp-entra-desliza { from { transform: translateY(10px); } }
  .js .coluna:not([data-entrada]) .entra { opacity: 0; transform: translateY(10px); }
  .js .coluna[data-entrada] .entra {
    animation: lp-entra-opacidade 360ms var(--ds-curva) backwards, lp-entra-desliza 520ms var(--ds-curva-painel) backwards;
    animation-delay: calc(var(--i) * 70ms);
  }
  /* O campo de vidro só esmaece (como tudo que flutua na casa): entram a tinta, o texto e a lupa; o desfoque já está lá. */
  .js .coluna:not([data-entrada]) .busca::before, .js .coluna:not([data-entrada]) .busca > * { opacity: 0; }
  /* A tinta do vidro espera a 0,4% (menos de um degrau de cor: não se vê), e não a zero: assim o navegador já a deixa
     desenhada antes da entrada. Medido a 400 px: com zero, o primeiro quadro da entrada levava de 13 a 20 ms (a placa de
     vídeo preparava o desenho do anel naquela hora); assim, 4,5 ms. */
  .js .coluna:not([data-entrada]) .busca::before { opacity: 0.004; }
  .js .coluna[data-entrada] .busca::before, .js .coluna[data-entrada] .busca > * { animation: lp-entra-opacidade 360ms var(--ds-curva) 140ms backwards; }

  /* ---------- crédito da paisagem, com a amostra do traço: é ele que diz o que a linha fina é ---------- */
  .credito, .atribuicao { transition: opacity 700ms var(--ds-curva); }
  .fundo-mapa:not([data-pronto]) ~ .credito, .fundo-mapa:not([data-pronto]) ~ .atribuicao { opacity: 0; }
  .credito { right: var(--lp-borda-direita); }
  .credito .legenda { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 3px; }
  .credito .legenda .linha { margin-top: 0; text-wrap: balance; }
  /* A amostra só aparece quando há traço para explicar, e entra por opacidade junto com ele (o lugar dela já está guardado:
     o crédito não muda de tamanho). A força do desenho acompanha a do traço, pela rolagem. */
  .amostra { display: block; flex: none; width: 30px; height: 6px; overflow: visible; fill: none; opacity: 0; transition: opacity 600ms var(--ds-curva); }
  .hero[data-traco] .amostra { opacity: 1; }
  .amostra path { opacity: 0.5; }
  /* Atribuição do fornecedor das imagens: alinhada à coluna do texto, no tom discreto. */
  .atribuicao { left: var(--lp-margem); color: var(--ds-cor-texto-3); }

  /* ---------- seção seguinte ---------- */
  .problema {
    position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; background: var(--ds-cor-fundo);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: 8vw; align-content: start; align-items: start;
    padding: max(144px, 22vh) var(--lp-margem) 120px;
  }
  .problema h2 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.12; }
  .problema .texto { padding-top: 8px; }
  .problema p { margin: 0 0 24px; font-size: 17px; line-height: 28px; letter-spacing: -0.01em; color: var(--ds-cor-texto-2); text-wrap: pretty; }
  .problema p:last-child { margin-bottom: 0; }

  /* ---------- até 900 px: o cabeçalho aperta para caber numa linha ---------- */
  @media (max-width: 900px) {
    .topo { gap: 20px; }
    .topo-nav { gap: 0; }
    .topo-nav .item { padding: 0 8px; }
    .botao-pequeno { margin-left: -10px; }
  }

  /* ---------- até 760 px: texto ao centro, como na tela de entrada ---------- */
  @media (max-width: 760px) {
    :root { --lp-borda: 24px; --lp-coluna: min(360px, calc(100vw - 2 * var(--lp-borda))); --lp-topo: 88px; }
    /* No celular o título usa o corte de texto do Newsreader (o tamanho óptico acompanha o corpo): menos aperto e mais entrelinha. */
    html[data-fonte='b'] { --lp-tr-titulo: -0.014em; --lp-lh-titulo: 1.14; }
    .topo { display: block; padding: 0; }
    .topo > .marca { position: absolute; top: 32px; left: 50%; margin: 0; transform: translateX(-50%); }
    .topo-nav, .topo > .botao-pequeno { display: none; }
    .topo .item { height: 44px; padding: 0 8px; }
    .topo > .entrar { position: absolute; top: 28px; right: 16px; margin: 0; }
    /* Menu: as quatro páginas e a ação, numa folha de vidro que desce do cabeçalho e volta pelo mesmo caminho. */
    .js .topo > .menu-botao { display: inline-flex; position: absolute; top: 28px; left: 16px; }
    .js .topo > .menu {
      display: grid; position: absolute; top: 88px; left: 12px; right: 12px; padding: 8px; border-radius: var(--ds-raio-grande);
      background: var(--ds-material-forte); -webkit-backdrop-filter: var(--ds-material-desfoque); backdrop-filter: var(--ds-material-desfoque);
      box-shadow: inset 0 0 0 1px var(--ds-cor-borda), var(--ds-sombra-flutuante);
      opacity: 0; transform: translateY(-12px); visibility: hidden;
      transition: opacity var(--ds-dur-media) var(--ds-curva), transform var(--ds-dur-painel) var(--ds-curva-painel), visibility 0s linear var(--ds-dur-painel);
    }
    .js .topo[data-menu] > .menu { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
    .menu .opcao {
      display: block; padding: 13px 12px; border-radius: var(--ds-raio-medio); color: var(--ds-cor-texto); text-decoration: none;
      font: 500 15px/22px var(--lp-fonte-texto); letter-spacing: -0.005em; transition: background-color var(--ds-dur-rapida) var(--ds-curva);
    }
    .menu .opcao:hover { background: var(--ds-cor-realce); }
    .menu .opcao:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
    .menu .opcao:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: -2px; }
    /* A ação dentro da folha é um preenchimento quieto: vidro sobre vidro não se empilha. */
    .menu .botao-quieto {
      display: flex; align-items: center; justify-content: center; height: 44px; margin: 8px 4px 4px; border-radius: var(--ds-raio-medio);
      background: var(--ds-cor-preenchimento); box-shadow: inset 0 0 0 1px var(--ds-cor-borda);
      color: var(--ds-cor-texto); font: 600 15px/20px var(--lp-fonte-texto); text-decoration: none; white-space: nowrap;
      transition: transform 100ms ease-out, background-color var(--ds-dur-rapida) var(--ds-curva);
    }
    .menu .botao-quieto:hover { background: color-mix(in srgb, var(--ds-cor-texto) 22%, transparent); }
    .menu .botao-quieto:active { background: color-mix(in srgb, var(--ds-cor-texto) 30%, transparent); transform: scale(0.98); transition-duration: 0ms; }
    .menu .botao-quieto:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 3px; }
    /* Sem JavaScript não há folha: as páginas ficam numa linha sob a marca. */
    html:not(.js) .menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; position: absolute; top: 68px; left: 12px; right: 12px; }
    html:not(.js) .menu .opcao { padding: 8px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ds-cor-texto-2); }
    html:not(.js) .menu .botao-quieto { display: none; }
    /* Celular baixo: a hero não encolhe abaixo de 600 px. */
    .hero { min-height: 600px; }
    /* O título cabe em duas linhas até 320 px de largura. */
    .hero .vitrine { font-size: min(var(--lp-t-vitrine), calc((100vw - 2 * var(--lp-borda)) / 9.7)); }
    .palavra { justify-content: center; align-items: center; padding: 72px var(--lp-borda) 0; text-align: center; }
    .frase { margin: 20px auto 0; max-width: 320px; }
    .busca { margin-left: auto; margin-right: auto; width: 100%; }
    .busca input { padding: 0 52px 0 16px; text-align: left; text-overflow: ellipsis; }
    /* A lupa responde numa área de 44 px; o ícone continua com 18. */
    .lupa { top: 5px; right: 5px; width: 44px; height: 44px; }
    /* Sem trecho preso no celular, a poligonal não se revela: não há traço nem amostra. */
    .tracos, .veu-canto, .amostra { display: none; }
    .veu-coluna {
      background: radial-gradient(ellipse 96% 34% at 50% 52%,
        color-mix(in srgb, var(--ds-cor-fundo) 84%, transparent) 0%,
        color-mix(in srgb, var(--ds-cor-fundo) 84%, transparent) 60%,
        color-mix(in srgb, var(--ds-cor-fundo) 12%, transparent) 100%);
    }
    .veu-borda {
      background:
        linear-gradient(0deg, color-mix(in srgb, var(--ds-cor-fundo) 70%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 60%, transparent) 84px, transparent 170px),
        linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 56%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 40%, transparent) 84px, transparent 20%);
    }
    .atribuicao { left: 0; right: 0; bottom: 8px; text-align: center; }
    .credito { left: 24px; right: 24px; bottom: 30px; }
    .credito .legenda { display: block; }
    .problema { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 96px 24px 96px; min-height: 0; }
  }
  /* Abaixo de 400 px o texto do campo desce um degrau da escala para caber inteiro. */
  @media (max-width: 399px) {
    :root { --lp-borda: 16px; }
    .busca input { font-size: 13px; line-height: 18px; letter-spacing: 0; padding: 0 48px 0 12px; }
    .lupa { top: 5px; right: 3px; }
    .credito { left: 16px; right: 16px; }
    .problema { padding-left: 16px; padding-right: 16px; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .busca { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .busca::before, .busca:hover::before { background: var(--ds-cor-superficie); }
    .js .topo > .menu { background: var(--ds-cor-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* O que deslizava só esmaece: 180 ms, linear, sem deslocamento. */
    .js .coluna:not([data-entrada]) .entra { transform: none; }
    .js .coluna[data-entrada] .entra, .js .coluna[data-entrada] .busca::before, .js .coluna[data-entrada] .busca > * { animation: lp-entra-opacidade 180ms linear backwards; animation-delay: 0ms; }
    .topo > .topo-veu, .tracos .vertices, .amostra, .credito, .atribuicao { transition: opacity 180ms linear; }
    .js .topo > .menu, .js .topo[data-menu] > .menu { transform: none; transition: opacity 180ms linear, visibility 0s linear 180ms; }
    .js .topo[data-menu] > .menu { transition-delay: 0s; }
    .menu .botao-quieto:active { transform: none; }
  }