/* 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; }
  }

  /* ============ SONDA "inova": só a hero em repouso é a de antes ============ */
  html[data-saida='subida'] .palco { height: auto; }
  /* Véu do cabeçalho em duas partes: a faixa sólida atrás dos itens e, por baixo dela, o esmaecer (a cauda) que some o
     que passa. Enquanto a frase do produto está presa no alto a cauda se recolhe: ali é a própria faixa da frase que
     cobre o que passa, e a cauda só escureceria o topo das letras. Volta quando a frase vai embora. */
  .topo > .topo-veu { background: linear-gradient(180deg, var(--ds-cor-fundo) 0, var(--ds-cor-fundo) 62px, transparent 62px); }
  .topo > .topo-veu::after { content: ""; position: absolute; left: 0; right: 0; top: 62px; height: 70px; background: linear-gradient(180deg, var(--ds-cor-fundo) 0, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) 30px, transparent 70px); }
  body { timeline-scope: --t-parte; }
  .t-prod-parte { view-timeline-name: --t-parte; }
  .topo > .topo-veu::after { opacity: var(--t-cauda, 1); }

  /* 1. A tela do sistema sobe em pé e deita devagar, como quem a pousa na mesa. Peça sobre o satélite: o contorno escuro
     e a sombra da casa, sem borda clara. */
  .t-cena { position: relative; z-index: 5; padding: 4vh 0 0; perspective: 1500px; perspective-origin: 50% 30%; pointer-events: none; overflow: clip; }
  .t-tela { width: min(1560px, 88vw); margin: 0 auto; aspect-ratio: 1906 / 942; border-radius: var(--ds-raio-grande); overflow: clip; background: var(--ds-cor-superficie); box-shadow: var(--ds-sombra-destaque); transform-origin: 50% 100%; position: relative; }
  /* A gravação traz uma linha clara no alto (a borda da janela de onde foi gravada): cada vídeo sobe o tanto que a esconde. */
  .t-tela video, .t-tela2 video { position: absolute; left: 0; top: calc(-1 * var(--t-corte, 0px)); width: 100%; height: calc(100% + var(--t-corte, 0px)); object-fit: cover; object-position: 50% 0; }
  /* Véus dos vídeos (o recurso das páginas de soluções, mesmas classes): camadas desfocadas sobre número de processo junto
     de nota, nota, valor e nome de empresa ou pessoa (/dados/veus-videos.json, em porcentagem do quadro). .pv-veus repete a
     caixa do <video> (com o mesmo --t-corte); .pv-veus-q é o quadro do vídeo com o mesmo corte do object-fit cover e do
     object-position 50% 0 (largura e altura pela proporção --pv-ar, centrado na horizontal, preso no alto). Cada camada só
     aparece na janela de tempo dela (o laço do fim troca data-ligado no quadro mostrado); não é movimento, é recorte. */
  .t-tela, .t-tela2 { --pv-desfoque: 10px; }
  /* A tela é a raiz do desfoque dos véus (um filtro neutro): o desfoque lê só o vídeo dela. Sem isso, com a tela girando
     em 3D (a abertura que deita, as do produto que se levantam), cada véu lia o fundo da página inteira e custava quadros
     de 25 a 75 ms na rolagem (medido; com o filtro neutro, nenhum acima de 20 ms). */
  .t-tela:has(> .pv-veus), .t-tela2:has(> .pv-veus) { filter: opacity(1); }
  .pv-veus { position: absolute; left: 0; top: calc(-1 * var(--t-corte, 0px)); width: 100%; height: calc(100% + var(--t-corte, 0px)); container-type: size; pointer-events: none; }
  .pv-veus-q { position: absolute; top: 0; left: 50%; width: max(100cqw, 100cqh * var(--pv-ar)); height: max(100cqh, 100cqw / var(--pv-ar)); margin-left: calc(max(100cqw, 100cqh * var(--pv-ar)) / -2); }
  .pv-veu { position: absolute; border-radius: 4px; background: color-mix(in srgb, var(--ds-cor-fundo) 22%, transparent);
    -webkit-backdrop-filter: blur(var(--pv-desfoque)); backdrop-filter: blur(var(--pv-desfoque)); }
  /* a camada apagada sai da árvore: o Video1 tem 147 camadas e, apagadas só com opacidade zero, elas ainda custavam
     quadros longos na rolagem (medido) */
  .pv-veu:not([data-ligado]) { display: none; }
  @media (max-width: 760px) { .t-tela, .t-tela2 { --pv-desfoque: 6px; } .pv-veu { border-radius: 2px; } }
  /* sem desfoque no navegador, ou com transparência reduzida: o véu fica quase opaco (o que ele cobre não pode aparecer) */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pv-veu { background: color-mix(in srgb, var(--ds-cor-fundo) 92%, transparent); } }
  @media (prefers-reduced-transparency: reduce) { .pv-veu { background: color-mix(in srgb, var(--ds-cor-fundo) 72%, transparent); } }
  @media (forced-colors: active) { .pv-veu { background: Canvas; forced-color-adjust: none; } }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .t-tela { animation: t-deita linear both; animation-timeline: view(); animation-range: cover 18% cover 82%; will-change: transform; }
    }
  }
  .t-tela { pointer-events: auto; }
  .t-pausa { position: absolute; right: 12px; bottom: 12px; z-index: 1; height: 32px; padding: 0 12px; border: 0; border-radius: var(--ds-raio-medio);
    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); color: var(--ds-cor-texto); font: 500 13px/18px var(--lp-fonte-texto); cursor: pointer;
    opacity: 0; transition: opacity var(--ds-dur-media) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  /* a ponta de baixo da tela da abertura fica sob a folha: o botão dela mora no alto */
  .t-tela .t-pausa { top: 12px; bottom: auto; }
  .t-tela:hover .t-pausa, .t-tela2:hover .t-pausa, .t-pausa:focus-visible, .t-pausa[data-parado] { opacity: 1; }
  .t-pausa:hover { background: var(--ds-cor-superficie-elevada); }
  .t-pausa:active { background: var(--ds-cor-superficie); transition-duration: 0ms; }
  .t-pausa:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  @media (hover: none), (prefers-reduced-motion: reduce) { .t-pausa { opacity: 1; } }
  @keyframes t-deita { from { transform: none; } to { transform: rotateX(34deg) scale(0.94); } }
  html:not([data-saida='subida']) .t-cena { height: auto; padding: 24px 24px 56px; background: var(--ds-cor-fundo); }
  html:not([data-saida='subida']) .t-tela { width: 100%; animation: none; }

  .t-folha { position: relative; z-index: 6; margin-top: -5vh; }
  .t-sec { position: relative; padding: 168px var(--lp-margem) 0; background: var(--ds-cor-fundo); }
  .t-folha > .t-sec:first-child { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ds-cor-texto) 16%, transparent); padding-top: 152px; }

  .t-titulo { margin: 0; font-family: var(--lp-fonte-titulo); font-weight: 300; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; letter-spacing: -0.02em; font-optical-sizing: auto; text-wrap: balance; }
  .t-titulo.t-declara { font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -0.025em; }
  .t-titulo.t-grande { font-size: clamp(44px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.03em; }
  .t-or { display: block; }
  .t-pal { display: inline-block; }
  /* Texto: cada palavra sobe um pouco e aparece; o resto do bloco vem logo depois. */
  [data-anima] .t-pal { opacity: 0; transform: translateY(0.32em); transition: opacity 400ms var(--ds-curva), transform 560ms var(--ds-curva-painel); }
  [data-anima] [data-visto] .t-pal { opacity: 1; transform: none; transition-delay: calc(var(--n) * 40ms); }
  [data-anima] .t-sobe { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ds-curva), transform 560ms var(--ds-curva-painel); }
  [data-anima] [data-visto] .t-sobe { opacity: 1; transform: none; transition-delay: 260ms; }

  /* 2. O problema, com o país: a frase ao centro, o Brasil em hexágonos e um número de cada lado. */
  .t-pais { text-align: center; padding-bottom: 112px; }
  .t-mapa-num { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 40px; margin-top: 56px; }
  .t-brasil { width: min(600px, 44vw, calc((100vh - 330px) * 1.029)); height: auto; display: block; }
  .t-num { text-align: left; }
  .t-mapa-num .t-num:first-child { text-align: right; }
  .t-valor { display: block; white-space: nowrap; font-size: clamp(30px, min(4.4vw, calc((100vw - 2 * var(--lp-margem) - min(600px, 44vw) - 80px) / 9.8)), 64px); line-height: 1; font-weight: 500; letter-spacing: -0.035em; }
  .t-rotulo { display: block; margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--ds-cor-texto-2); }
  .t-apoio { margin: 0; font-size: 17px; line-height: 26px; letter-spacing: -0.01em; color: var(--ds-cor-texto-2); text-wrap: pretty; }
  .t-pais .t-apoio { max-width: 52ch; margin: 40px auto 0; text-wrap: balance; }

  /* 3. O produto. A frase da hero volta inteira e fica fixa no alto, com o texto de apoio; as duas telas passam por
     baixo dela na rolagem comum, uma depois da outra, sem se sobrepor: no meio do caminho vê-se o fim de uma e o
     começo da outra. Cada tela chega deitada e fica em pé (o gesto da tela da abertura, ao contrário). A metade acesa
     da frase e o texto de apoio trocam conforme a segunda tela sobe. Quando ela encosta na frase, as duas vão embora
     juntas. */
  .t-prod { position: relative; background: var(--ds-cor-fundo); text-align: center; timeline-scope: --t-ato2; --t-apagado: color-mix(in srgb, var(--ds-cor-texto) 50%, var(--ds-cor-fundo)); }
  .t-prod-cab { position: sticky; top: 0; z-index: 3; padding: calc(var(--lp-topo) + 16px) var(--lp-margem) 20px; background: var(--ds-cor-fundo); }
  /* borda de rolagem: o que passa por baixo some num esmaecer curto, sem linha */
  .t-prod-cab::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(180deg, var(--ds-cor-fundo), transparent); pointer-events: none; }
  .t-titulo.t-frase { font-size: clamp(30px, min(4.4vw, 7.4vh), 80px); line-height: 1.08; letter-spacing: -0.026em; }
  .t-frase .t-or { display: inline-block; }
  .t-apoios { display: grid; justify-items: center; margin-top: 16px; }
  .t-apoios .t-apoio { grid-area: 1 / 1; max-width: 68ch; text-wrap: balance; }
  .t-ato { padding: 12px var(--lp-margem) 72px; }
  /* em tela estreita a legenda sai da faixa fixa e vai para baixo da própria tela */
  .t-apoio-ato { display: none; max-width: 68ch; margin: 20px auto 0; text-wrap: balance; }
  .t-prod-parte .t-ato { padding-bottom: 96px; }
  .t-palco { width: min(1560px, 100%, calc((100vh - 342px) * 2.0234)); margin: 0 auto; perspective: 1600px; perspective-origin: 50% 30%; }
  .t-tela2 { position: relative; aspect-ratio: 1906 / 942; border-radius: var(--ds-raio-grande); overflow: clip; background: var(--ds-cor-superficie); box-shadow: var(--ds-sombra-destaque); transform-origin: 50% 100%; }
  #t-ato2 { view-timeline-name: --t-ato2; }
  @supports (animation-timeline: view()) {
    /* a frase: a primeira metade apaga e a segunda acende, cada uma inteira, quando a segunda tela passa a dominar */
    .t-meia:nth-child(1) { animation: t-apaga linear both; animation-timeline: --t-ato2; animation-range: cover 14% cover 20%; }
    .t-meia:nth-child(2) { animation: t-acende linear both; animation-timeline: --t-ato2; animation-range: cover 14% cover 20%; }
    .t-apoios .t-apoio:nth-child(1) { animation: t-some linear both; animation-timeline: --t-ato2; animation-range: cover 14% cover 17%; }
    .t-apoios .t-apoio:nth-child(2) { animation: t-surge linear both; animation-timeline: --t-ato2; animation-range: cover 17% cover 20%; }
    @media (prefers-reduced-motion: no-preference) {
      .t-tela2 { animation: t-levanta linear both; animation-timeline: view(); animation-range: entry 0% entry 62%; will-change: transform; }
    }
  }
  @supports not (animation-timeline: view()) {
    .t-apoios { row-gap: 8px; }
    .t-apoios .t-apoio { grid-area: auto; }
  }
  @keyframes t-apaga { to { color: var(--t-apagado); } }
  @keyframes t-acende { from { color: var(--t-apagado); } }
  @keyframes t-some { to { opacity: 0; } }
  @keyframes t-surge { from { opacity: 0; } }
  @keyframes t-levanta { from { transform: rotateX(26deg) scale(0.93); } to { transform: none; } }

  /* A folha não acaba numa linha: ela se desfaz sobre o Brasil. */
  .t-cauda { height: 44vh; background: linear-gradient(180deg,
    var(--ds-cor-fundo) 0,
    color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 18%,
    color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) 38%,
    color-mix(in srgb, var(--ds-cor-fundo) 36%, transparent) 58%,
    color-mix(in srgb, var(--ds-cor-fundo) 14%, transparent) 78%,
    transparent 100%); pointer-events: none; }
  html:not([data-cena]) .t-cauda { display: none; }
  /* sem a cena presa à rolagem (celular, navegador sem linha do tempo de rolagem): as perguntas e o fecho sobre o último
     quadro da cena, parado (Carajás com a área e as linhas), com o véu da casa; custo de quadro zero */
  html:not([data-cena]) .t-fecho { background: var(--ds-cor-fundo); }
  html:not([data-cena]) .t-fecho .t-para { color: var(--ds-cor-texto); text-shadow: 0 0 6px var(--ds-cor-fundo), 0 0 2px var(--ds-cor-fundo); }

  /* 4. A cena final. O texto passa por cima do mapa no passo da rolagem, como texto comum de página: três perguntas e,
     por fim, o fecho; cada palavra acende conforme sobe. Enquanto isso a câmera desce do Brasil para dentro do
     hexágono de Carajás (ver o laço da hero): o dado dá lugar aos contornos reais e, no fim, uma área acende. */
  .t-hex { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  /* Nesta cena o texto passa pela esquerda: a atribuição do mapa vai para o canto direito, onde ficava o crédito. */
  .hero[data-pais] .atribuicao { left: auto; right: var(--lp-borda-direita); color: var(--ds-cor-texto-2); }
  /* A área final ganha a cor da concessão de lavra do sistema, com o nome ao lado (cor sempre com legenda); os vizinhos apagam. */
  .hero[data-pais] .tracos path { stroke: #5AA3D4; stroke-opacity: 1; stroke-width: 1.75; }
  .t-cam-rotulo { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ds-cor-texto); white-space: nowrap;
    pointer-events: none; opacity: 0; will-change: transform, opacity; transform-origin: 0 0;
    text-shadow: 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); }
  .t-cam-nota { margin-left: 6px; color: var(--ds-cor-texto-2); }
  .t-cam-km { font-weight: 600; font-variant-numeric: tabular-nums; }
  .t-dist { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .t-dist line { stroke: var(--ds-cor-texto); stroke-opacity: 0.85; stroke-width: 1.25; stroke-dasharray: 5 4; }
  .t-dist circle { fill: var(--ds-cor-texto); }
  .t-dist-rotulo { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ds-cor-texto); white-space: nowrap;
    pointer-events: none; opacity: 0; will-change: transform, opacity;
    text-shadow: 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); }
  .t-dist-rotulo .km { margin-left: 6px; color: var(--ds-cor-texto-2); font-variant-numeric: tabular-nums; }
  .t-rotulo-area { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500;
    color: var(--ds-cor-texto); white-space: nowrap; pointer-events: none; opacity: 0; will-change: transform, opacity;
    text-shadow: 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); }
  .t-quadro-cor { flex: none; width: 10px; height: 10px; border-radius: 2px; background: #4A90B8; box-shadow: inset 0 0 0 1px #5AA3D4; }
  .t-fecho { position: relative; z-index: 6; padding: 96px var(--lp-margem); background: var(--ds-cor-fundo); }
  .t-fecho > * { display: block; max-width: 600px; }
  /* A pergunta inteira é o alvo: o fundo leve responde ao mouse e à pressão (o recuo de 20 px mantém o texto na margem). */
  .t-pergunta { max-width: 640px; margin: 0 0 72px -20px; padding: 14px 20px 16px; color: var(--ds-cor-texto); text-decoration: none; border-radius: var(--ds-raio-medio); transition: background-color var(--ds-dur-rapida) var(--ds-curva); }
  /* quem chega por teclado (ou por link interno) não para escondido atrás do cabeçalho fixo */
  .t-pergunta, .t-acoes a, .t-planos a { scroll-margin: 132px 0 48px; }
  .t-pergunta:hover { background-color: var(--ds-cor-realce-leve); }
  .t-pergunta:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  .t-titulo.t-q { display: block; font-size: clamp(32px, 3.5vw, 56px); line-height: 1.06; letter-spacing: -0.026em; }
  .t-para { display: block; margin-top: 24px; font-size: 17px; line-height: 26px; letter-spacing: -0.01em; color: var(--ds-cor-texto-2); }
  [data-anima] .t-para { transition: opacity 420ms var(--ds-curva), transform 560ms var(--ds-curva-painel), color var(--ds-dur-rapida) var(--ds-curva); }
  .t-pergunta:hover .t-para { color: var(--ds-cor-texto); }
  /* no toque não há hover: o rótulo leva o sublinhado de link, como o "Ou veja como o TERRADAR é contratado" */
  @media (hover: none) { .t-pergunta .t-para { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent); } }
  .t-pergunta:active .t-pal, .t-pergunta:active .t-para { color: var(--ds-cor-texto-2); transition-duration: 0ms; }
  .t-pergunta:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .t-final .t-apoio { margin: 24px 0 32px; max-width: 46ch; text-wrap: balance; }
  /* As duas ações com a mesma largura (a da maior); o caminho para os planos vai numa linha abaixo, como frase. */
  .t-acoes { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
  .t-planos { margin: 20px 0 0; }
  .t-planos .link-texto { padding: 11px 8px; margin: -11px -8px; font-size: 15px; line-height: 22px; letter-spacing: -0.005em;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
  .t-planos .link-texto:active { color: var(--ds-cor-texto-2); background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  html[data-cena] .t-fecho { z-index: 7; margin-top: -44vh; padding-top: 62vh; padding-bottom: 0; background: none; pointer-events: none; }
  html[data-cena] .t-fecho > * { pointer-events: auto; }
  html[data-cena] .t-pergunta { margin-bottom: 44vh; }
  html[data-cena] .t-pergunta:nth-of-type(3) { margin-bottom: 54vh; }
  html[data-cena] .t-final { min-height: 70vh; }
  @supports (animation-timeline: view()) {
    html[data-cena] .t-fecho .t-pal { transition: none; animation: t-escreve linear both; animation-timeline: view(); animation-range: cover calc(4% + var(--n) * 0.6%) cover calc(14% + var(--n) * 0.6%); }
    html[data-cena] .t-fecho .t-sobe { transition: color var(--ds-dur-rapida) var(--ds-curva); animation: t-escreve linear both; animation-timeline: view(); animation-range: cover 4% cover 14%; }
    html[data-cena] .t-pergunta { animation: t-passa linear both; animation-timeline: view(); animation-range: cover 72% cover 86%; }
  }
  @keyframes t-escreve { from { opacity: 0.36; transform: translateY(0.18em); } to { opacity: 1; transform: none; } }
  /* ao apagar no topo a pergunta sai de cena de verdade: não recebe clique nem foco */
  @keyframes t-passa { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }

  @media (max-width: 900px) {
    .t-sec { padding: 96px 24px 0; }
    .t-folha > .t-sec:first-child { padding-top: 80px; }
    .t-pais { padding-bottom: 96px; }
    .t-mapa-num { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; column-gap: 24px; align-items: start; }
    .t-valor { font-size: clamp(28px, 8vw, 40px); white-space: normal; overflow-wrap: break-word; }
    .t-mapa-num .t-brasil { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 100%; }
    .t-mapa-num .t-num, .t-mapa-num .t-num:first-child { text-align: left; }
    .t-prod-cab, .t-ato { padding-left: 24px; padding-right: 24px; }
  }
  @media (max-width: 760px) {
    .t-prod-cab { padding-top: calc(var(--lp-topo) + 8px); padding-bottom: 12px; }
    .t-prod-cab .t-apoios { display: none; }
    .t-apoio-ato { display: block; }
    .t-prod-parte .t-ato { padding-bottom: 56px; }
    .t-fecho { padding-left: 24px; padding-right: 24px; }
    .t-acoes { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
    .t-pergunta { margin-left: -12px; padding-left: 12px; padding-right: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-anima] .t-pal, [data-anima] .t-sobe { opacity: 1 !important; transform: none !important; transition: none !important; }
  }

  /* ---------- rodapé: sóbrio, sobre o fundo sólido; o mapa termina acima dele ---------- */
  .rodape { position: relative; z-index: 8; padding: 96px var(--lp-margem) 40px; background: var(--ds-cor-fundo); box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
  .rodape-grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
  .rodape .marca { display: inline-block; position: static; padding: 8px 10px; margin: -8px -10px; }
  .rodape-marca p { margin: 20px 0 0; max-width: 34ch; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 20px; text-wrap: pretty; }
  .rodape h2 { margin: 0 0 12px; color: var(--ds-cor-texto); font: 500 13px/18px var(--lp-fonte-texto); letter-spacing: 0; }
  .rodape-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  /* o texto do link começa na mesma borda do título do grupo; a área de clique fica com o recuo */
  .rodape .link-texto { margin-left: -2px; }
  .rodape .link-texto:active { color: var(--ds-cor-texto-2); background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  .rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 72px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
  .rodape-base p { margin: 0; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; }
  .rodape-base nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  @media (max-width: 760px) {
    .rodape { padding: 72px 24px 32px; }
    .rodape-grade { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
    .rodape-marca { grid-column: 1 / -1; }
    .rodape-base { margin-top: 48px; }
  }
  @media (pointer: coarse) { .rodape .link-texto { display: inline-block; min-width: 44px; padding-top: 13px; padding-bottom: 13px; } }

  /* ============ Motor Mapbox: reserva, logotipo e atribuição ============ */
  /* A reserva em escala 1:1, presa no ponto da mina: a mesma câmera do mapa em repouso (a mina a 70% da largura no
     computador; no celular, no meio da largura e a 20% da altura, um nível e pouco acima). O mapa entra por cima sem
     salto. Capturas: 1920x1080 (computador) e 480x1000 a 2x (celular), com a mina no ponto de âncora. */
  /* (a regra da reserva ancorada está no mapa-mapbox.css; no celular a home sobe a mina para 20% da altura) */
  /* a capa da cena final só existe (e só é baixada) sem o mapa vivo, na cena final */
  .mapa-reserva .reserva-hero { position: absolute; inset: 0; } /* a capa estática da hero (capa-estatica.js): as peças cobrem a reserva */
  .mapa-reserva .reserva-final { display: none; }
  html:not([data-mapa-vivo]) .hero[data-reserva-final] .mapa-reserva .reserva-hero { visibility: hidden; }
  html:not([data-mapa-vivo]) .hero[data-reserva-final] .mapa-reserva .reserva-final { display: block; position: absolute; inset: 0; overflow: hidden; }
  /* com a reserva da cena final, os véus ficam como na cena com o mapa (o laço só os põe assim com o mapa pronto): a coluna e o
     canto fechados e o de saída a 0,1; sem isso, o texto do fecho passava sobre as nuvens e a BR-222 a 1:1, ou a foto
     escurecia 46% (VISUAL 3, 05/10) */
  html:not([data-mapa-vivo]) .hero[data-reserva-final] :is(#veu-coluna, #veu-canto) { opacity: 1 !important; }
  html:not([data-mapa-vivo]) .hero[data-reserva-final] #veu-saida { opacity: 0.1 !important; }
  .hero[data-fora] .mapa-reserva { visibility: hidden; }
  /* o crédito e a atribuição aparecem com a reserva (antes, só com o mapa) */
  .mapa-reserva ~ .fundo-mapa:not([data-pronto]) ~ .credito, .mapa-reserva ~ .fundo-mapa:not([data-pronto]) ~ .atribuicao { opacity: 1; }
  /* o logotipo: embaixo à esquerda, na margem da casa, na linha da atribuição (que vai à direita dele); na cena final o
     texto passa pela esquerda, e os dois vão para o canto direito (troca com a folha cobrindo a tela). */
  .fundo-mapa .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 10px calc(var(--lp-margem) + 4px); }
  .logo-hero { left: var(--lp-margem); bottom: 6px; }
  .atribuicao { left: calc(var(--lp-margem) + 98px); }
  .hero[data-pais] .fundo-mapa .mapboxgl-ctrl-bottom-left { left: auto; right: var(--lp-borda-direita); }
  .hero[data-pais] .fundo-mapa .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin-left: 4px; }
  .hero[data-pais] .atribuicao, .hero[data-reserva-final] .atribuicao { left: auto; right: calc(var(--lp-borda-direita) + 98px); }
  .hero[data-reserva-final] .logo-hero { left: auto; right: var(--lp-borda-direita); }
  /* o fecho sem a cena presa (celular, movimento reduzido, janela estreita): a capa da cena final pela Static Images API
     (capa-estatica.js, na câmera do fim da cena na janela de quem visita, em cover presa à esquerda no computador, a área à direita do texto; no celular ao centro: a 360 x 640, presa à esquerda,
     a área saía pela direita), o desenho
     dos dados em SVG por cima e o véu da casa; com a cena ligada, nada é montado (nem pedido) */
  .t-fecho > .t-fecho-capa { display: none; }
  html:not([data-cena]) .t-fecho > .t-fecho-capa { display: block; position: absolute; inset: 0; z-index: 0; max-width: none; overflow: hidden; pointer-events: none; }
  html:not([data-cena]) .t-fecho > :not(.t-fecho-capa):not(.fecho-pe) { position: relative; z-index: 1; }
  .t-fecho-capa img.capa-peca { position: absolute; max-width: none; filter: url(#capa-cor); will-change: transform; }
  .t-fecho-capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ds-cor-fundo) 0, color-mix(in srgb, var(--ds-cor-fundo) 70%, transparent) 14%, color-mix(in srgb, var(--ds-cor-fundo) 58%, transparent) 55%, color-mix(in srgb, var(--ds-cor-fundo) 82%, transparent) 86%, var(--ds-cor-fundo) 100%); }
  /* o desenho numa camada própria: junto da imagem, a primeira pintura dos dois custava um quadro de 40 a 60 ms na rolagem
     do celular (medido, VISUAL 3, 05/10: some sem o desenho, some sem a imagem; com o desenho e a imagem cada um na sua camada, somem
     também os tiques de 21 ms que sobravam com só o desenho na camada dele) */
  .capa-desenho { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; will-change: transform; }
  /* a capa estática do fecho: o canto é o pé do mapa da seção (mapa-mapbox.css, 6), só quando ela é o fundo; com a cena
     final ligada, vale o canto da própria hero */
  html[data-cena] .fecho-pe-home { display: none !important; }
  @media (max-width: 760px) {
    .mapa-reserva.ancorada img { width: 480px; height: 1000px; left: calc(50% - 240px); top: calc(20% - 200px); }
    /* no celular: o logotipo à esquerda, na linha da atribuição (que fica à direita dele, em duas linhas); o crédito
       continua com as duas linhas dele, logo acima */
    .fundo-mapa .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 10px 20px; }
    .logo-hero { left: 16px; bottom: 6px; }
    .atribuicao { left: 112px; right: 16px; bottom: 7px; text-align: right; }
    .credito { bottom: 42px; }
  }
  /* ============ O pé do mapa na home (6b no montador) ============ */
  /* o pé fica acima da hero e na camada da tela do sistema (ele nunca a cobre: mora rente à borda de cima dela) */
  .pe-home { z-index: 5; }
  /* a folha deixa passar o clique onde ela mesma é transparente (o canto da cena final mora por baixo dela); os filhos
     dela recebem o clique como antes */
  .t-folha { pointer-events: none; }
  .t-folha > * { pointer-events: auto; }
  /* o canto da própria hero só na cena final; antes dela o canto é o pé */
  .hero:not([data-pais]):not([data-reserva-final]) :is(.logo-hero, #atribuicao-final) { visibility: hidden; }
  html[data-mapa-vivo] .hero:is([data-pais], [data-reserva-final]) .logo-hero { visibility: visible; }
  @media (max-width: 760px) {
    /* o crédito do lugar sobe para cima do pé (84 px) */
    .credito { bottom: 92px; }
  }