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

  /* ============ Falar com especialista ============ */
  body { min-height: 100vh; }
  .esp-fundo { position: fixed; inset: 0; z-index: 0; }
  .esp-fundo .fundo-mapa { position: absolute; inset: 0; }
  /* o véu de leitura da tela de entrada: só onde o texto pousa. Fica dentro da camada do mapa, entre o satélite e a
     atribuição: no celular ele cobre a tela inteira, e por cima da atribuição a deixava com 1,06:1. */
  .esp-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ds-cor-fundo) 90%, transparent) 0%,
        color-mix(in srgb, var(--ds-cor-fundo) 80%, transparent) calc(var(--lp-margem) + 440px),
        color-mix(in srgb, var(--ds-cor-fundo) 20%, transparent) calc(var(--lp-margem) + 720px),
        transparent calc(var(--lp-margem) + 940px)),
      linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) 0, transparent 150px); }
  /* O canto do mapa (logotipo e atribuição) é o pé do mapa (mapa-mapbox.css, 7): no fim da seção, preso ao pé da janela e
     acima do formulário; quando o rodapé sobe, ele sobe com o fim da seção (o mapa visível termina ali). Sem margem
     negativa: no fim da rolagem ele fica depois do bloco, sem cobrir a última linha. */
  /* 06/10 (print do Alex a 1899 x 947: o crédito no meio do mapa): o pé ia logo depois do formulário, e o sticky só o puxa
     para cima, nunca o empurra para baixo. A seção é uma coluna da altura da janela e o pé vai ao fim dela (margin-top: auto),
     descontando os 64 px da margem de baixo da seção: na tela grande ele encosta no pé da janela; no celular, com a seção
     mais alta, continua preso ao pé enquanto rola. */
  .esp .mapa-pe { margin-top: auto; margin-bottom: -64px; }
  .esp-fundo > .mapa-reserva { z-index: 0; }
  /* No computador, o reforço atrás do canto mora no pé (mapa-mapbox.css, .mapa-pe.reforco): sobe com ele. */
  /* O bloco inteiro cabe numa tela de 1440 x 900 e de 1366 x 768, nas duas variantes. Até 05/10/2026 ele começava na
     altura do texto da hero (--lp-topo-do-bloco: 23% da altura, 177 px em 768), e o formulário de vendas passava da
     tela de notebook. Agora começa 80 px acima disso e nunca a menos de 24 px do cabeçalho (a mesma distância do
     celular): 97 px em 768, 127 px em 900, 168 px em 1080. */
  /* o topo do bloco: o mesmo nas duas telas irmãs (especialista e vendas), 16 px abaixo do cabeçalho na janela baixa */
  .esp { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: clamp(calc(var(--lp-topo) + 16px), calc(23vh - 88px), 216px) var(--lp-margem) 64px; }
  .esp-bloco { width: min(440px, 100%); }
  .esp h1 { margin: 0; font-family: var(--lp-fonte-titulo); font-weight: 300; font-size: clamp(40px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-optical-sizing: auto; text-wrap: balance; }
  .esp-pal { display: inline-block; }
  .esp .frase { margin: 12px 0 24px; max-width: 44ch; }

  /* campos de vidro com rótulo que sobe (os da tela de entrada), na altura de 48 px */
  .par { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; }
  .campo { position: relative; display: block; }
  .campo input, .campo textarea {
    display: block; width: 100%; height: 48px; padding: 20px 16px 4px; border: 0; outline: 0; border-radius: var(--ds-raio-grande);
    -webkit-appearance: none; appearance: none;
    background: color-mix(in srgb, var(--ds-cor-superficie) 74%, transparent);
    -webkit-backdrop-filter: var(--ds-material-desfoque); backdrop-filter: var(--ds-material-desfoque);
    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);
    color: var(--ds-cor-texto); caret-color: var(--ds-cor-texto);
    font: 500 15px/20px var(--lp-fonte-texto); letter-spacing: -0.005em; resize: none;
    transition: box-shadow 160ms var(--ds-curva), background-color 160ms var(--ds-curva);
  }
  /* a mensagem: duas linhas ao chegar, cresce enquanto a pessoa escreve, até seis (depois rola por dentro); empurra o que
     está embaixo como qualquer campo de texto, nada pula sozinho */
  .campo textarea { height: auto; min-height: 68px; max-height: 148px; padding-top: 24px; line-height: 20px; field-sizing: content; overflow-y: auto; }
  /* a mensagem vem logo depois da linha reservada do aviso do seletor, como um campo depois do outro */
  .campo[data-mensagem] { margin-top: 0; }
  .campo input:hover, .campo textarea:hover { background: color-mix(in srgb, var(--ds-cor-superficie) 82%, transparent); }
  .campo[data-erro] input { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); }
  /* Foco: um contorno de 1 px e um halo curto, no lugar do traço grosso de antes. Vale para o mouse e para o teclado (o
     contorno a 60% fica acima de 3:1 contra o vidro). O contorno transparente aparece no modo de alto contraste. */
  .campo input:focus, .campo textarea:focus {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 60%, transparent), 0 0 0 3px color-mix(in srgb, var(--ds-cor-texto) 8%, transparent);
    outline: 2px solid transparent;
  }
  .campo input::placeholder, .campo textarea::placeholder { color: transparent; }
  /* Preenchimento automático do navegador: o vidro e a cor do texto continuam os da casa, e o foco continua fino. */
  .campo input:-webkit-autofill { -webkit-text-fill-color: var(--ds-cor-texto); caret-color: var(--ds-cor-texto); transition: box-shadow 160ms var(--ds-curva), background-color 600000s 0s; }
  .campo input:autofill { -webkit-text-fill-color: var(--ds-cor-texto); caret-color: var(--ds-cor-texto); transition: box-shadow 160ms var(--ds-curva), background-color 600000s 0s; }
  .rotulo { position: absolute; top: 14px; left: 16px; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 20px; pointer-events: none; transform-origin: 0 0;
    transition: transform var(--ds-dur-media) var(--ds-curva), color var(--ds-dur-media) var(--ds-curva); }
  .campo :focus + .rotulo, .campo :not(:placeholder-shown) + .rotulo { color: var(--ds-cor-texto-2); transform: translateY(-8px) scale(0.76); }
  /* na prévia do preenchimento automático o valor ainda não existe, mas o texto já aparece: o rótulo sobe junto */
  .campo input:-webkit-autofill + .rotulo { transform: translateY(-8px) scale(0.76); }
  .campo input:autofill + .rotulo { transform: translateY(-8px) scale(0.76); }
  /* a linha da mensagem de cada campo fica sempre reservada: nada se move quando ela aparece */
  .erro { min-height: 16px; margin: 4px 0 0 16px; color: var(--ds-cor-texto); font-size: 12px; line-height: 16px; }
  /* a mensagem esmaece ao entrar e ao sair (o texto só é apagado depois de sumir), em vez de aparecer seca */
  .js .erro { opacity: 0; transition: opacity var(--ds-dur-media) var(--ds-curva); }
  .js .erro[data-visivel] { opacity: 1; }

  /* perfil: quatro opções iguais, uma escolhida (o segmentado da casa) */
  .perfil { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
  .perfil legend { margin: 0 0 6px; padding: 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
  .perfil-opcoes, .perfil-copia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .perfil-opcoes { position: relative; padding: 4px; border-radius: var(--ds-raio-grande);
    background: color-mix(in srgb, var(--ds-cor-superficie) 74%, transparent); -webkit-backdrop-filter: var(--ds-material-desfoque); backdrop-filter: var(--ds-material-desfoque);
    box-shadow: inset 0 0 0 1px var(--ds-cor-borda); }
  .perfil input { position: absolute; opacity: 0; pointer-events: none; }
  .perfil label, .perfil-copia > span { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 6px; border-radius: var(--ds-raio-medio);
    font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }
  .perfil label { color: var(--ds-cor-texto-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva); }
  /* hover só com mouse: no toque que vira rolagem a escolha volta, e a opção tocada não fica acesa */
  @media (hover: hover) { .perfil label:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); } }
  .perfil label:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  /* sem JavaScript: a opção escolhida é a própria etiqueta clara */
  .perfil-opcoes:not([data-peca]) input:checked + label { background: var(--ds-cor-texto); color: var(--ds-cor-sobre-acento); }
  .perfil-opcoes:not([data-peca]) input:focus-visible + label { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  /* Com JavaScript, uma peça clara desliza até a opção escolhida (só transform, 280 ms na curva da casa; outra escolha no
     meio do caminho parte de onde a peça está). Por dentro ela leva as quatro palavras em tom escuro, numa cópia que anda
     ao contrário da peça: cada palavra escura fica sempre exatamente sobre a clara, e o contraste vale em todo quadro. */
  .perfil-peca { position: absolute; left: 4px; top: 4px; display: none; overflow: hidden; border-radius: var(--ds-raio-medio);
    background: var(--ds-cor-texto); pointer-events: none;
    transform: translate(var(--x, 0px), var(--y, 0px));
    transition: transform 280ms var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva), opacity var(--ds-dur-media) var(--ds-curva); }
  /* Nenhuma opção chega marcada (quem não mexe mandaria um dado errado). Enquanto nada está escolhido a peça não aparece;
     na primeira escolha ela é posta sob a opção sem deslizar e só esmaece ali (data-escolhido); se o toque vira rolagem,
     ela esmaece no mesmo lugar. Sem a peça, o foco do teclado fica na própria etiqueta. */
  .perfil-opcoes[data-peca]:not([data-escolhido]) .perfil-peca { opacity: 0; }
  .perfil-opcoes[data-peca]:not([data-escolhido]) input:focus-visible + label { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .perfil-copia { position: absolute; left: 0; top: 0; transform: translate(calc(-1 * var(--x, 0px)), calc(-1 * var(--y, 0px))); transition: transform 280ms var(--ds-curva); }
  /* As palavras escuras vêm do CSS (content), e não do HTML: assim não aparecem duas vezes na busca da página nem na
     cópia de texto, e o leitor de tela só lê as etiquetas. */
  .perfil-copia > span { color: var(--ds-cor-sobre-acento); }
  .perfil-copia > span::before { content: attr(data-t); }
  .perfil-opcoes[data-peca] .perfil-peca { display: block; }
  .perfil-opcoes[data-sem-transicao] .perfil-peca, .perfil-opcoes[data-sem-transicao] .perfil-copia { transition: none; }
  /* a opção escolhida responde ao mouse e à pressão pela própria peça; o foco do teclado anda com ela */
  @media (hover: hover) { .perfil-opcoes[data-peca] input:checked + label:hover ~ .perfil-peca { background: color-mix(in srgb, var(--ds-cor-texto) 90%, var(--ds-cor-fundo)); } }
  .perfil-opcoes[data-peca] input:checked + label:active ~ .perfil-peca { background: color-mix(in srgb, var(--ds-cor-texto) 86%, var(--ds-cor-fundo)); transition: transform 280ms var(--ds-curva), background-color 0ms, opacity var(--ds-dur-media) var(--ds-curva); }
  .perfil-opcoes[data-peca]:has(input:focus-visible) .perfil-peca { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }

  .enviar { position: relative; display: flex; width: 100%; height: 48px; margin-top: 16px; overflow: hidden; }
  .enviar[data-enviando] { cursor: progress; }
  .enviar[data-enviando]:hover, .enviar[data-enviando]:active { filter: none; transform: none; }
  .progresso { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: color-mix(in srgb, var(--ds-cor-sobre-acento) 55%, transparent);
    transform: scaleX(0.06); transform-origin: 0 50%; transition: transform 900ms var(--ds-curva); }
  .enviar:not([data-enviando]) .progresso { display: none; }
  .enviar[data-enviando] .progresso { transform: scaleX(0.92); }
  .nota { margin: 12px 0 0; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 18px; }
  .nota a { color: inherit; border-radius: var(--ds-raio-pequeno); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent);
    transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  .nota a:hover { color: var(--ds-cor-texto); }
  .nota a:active { color: var(--ds-cor-texto-2); background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  .nota a:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  @media (pointer: coarse) { .nota a { display: inline-block; padding: 14px 0; margin: -14px 0; } }

  /* Entrada: o título palavra por palavra e, depois dele, a frase e os campos, cada um subindo 12 px e aparecendo,
     40 ms um do outro; o mapa ao fundo esmaece ao mesmo tempo (.fundo-mapa[data-pronto]). A opacidade termina antes do
     deslocamento, como no pouso do sistema. No vidro, o deslocamento fica no invólucro e a opacidade no próprio campo:
     opacidade num ancestral cortaria o desfoque do mapa durante a entrada. */
  @keyframes esp-surge { from { opacity: 0; } }
  @keyframes esp-surge-vidro { from { opacity: 0.004; } }
  @keyframes esp-sobe { from { transform: translateY(12px); } }
  @keyframes esp-sobe-pal { from { transform: translateY(0.32em); } }
  .js .esp:not([data-entrada]) :is(.esp-pal, .frase, .rotulo, .perfil legend, .enviar, .nota) { opacity: 0; }
  /* O vidro espera a 0,4% (menos de um degrau de cor: não se vê), e não a zero: o navegador já desenha o desfoque antes
     da entrada (o mesmo recurso da busca da hero). Medido: começando de zero, a primeira visita levava um quadro de 30 ms
     quando o primeiro campo começava a aparecer. */
  .js .esp:not([data-entrada]) :is(.campo > input, .campo > textarea, .perfil-opcoes) { opacity: 0.004; }
  .js .esp:not([data-entrada]) :is(.frase, .campo, .perfil, .enviar, .nota) { transform: translateY(12px); }
  .js .esp:not([data-entrada]) .esp-pal { transform: translateY(0.32em); }
  .js .esp[data-entrada] .esp-pal { animation: esp-surge 400ms var(--ds-curva) backwards, esp-sobe-pal 560ms var(--ds-curva-painel) backwards; animation-delay: calc(var(--i) * 40ms); }
  .js .esp[data-entrada] :is(.frase, .enviar, .nota) { animation: esp-surge 360ms var(--ds-curva) backwards, esp-sobe 520ms var(--ds-curva-painel) backwards; animation-delay: calc(var(--i) * 40ms); }
  .js .esp[data-entrada] :is(.campo, .perfil) { animation: esp-sobe 520ms var(--ds-curva-painel) calc(var(--i) * 40ms) backwards; }
  .js .esp[data-entrada] :is(.rotulo, .perfil legend) { animation: esp-surge 360ms var(--ds-curva) calc(var(--i) * 40ms) backwards; }
  .js .esp[data-entrada] :is(.campo > input, .campo > textarea, .perfil-opcoes) { animation: esp-surge-vidro 360ms var(--ds-curva) calc(var(--i) * 40ms) backwards; }

  /* o envio: o formulário esmaece subindo 10 px e a confirmação entra pelo mesmo caminho, no mesmo lugar */
  .esp-form, .esp-ok { transition: opacity 260ms var(--ds-curva), transform 420ms var(--ds-curva-painel), visibility 0s; }
  .esp-ok { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(10px); visibility: hidden; }
  .esp-corpo { position: relative; }
  .esp-corpo[data-enviado] .esp-form { opacity: 0; transform: translateY(-10px); visibility: hidden; transition: opacity 260ms var(--ds-curva), transform 420ms var(--ds-curva-painel), visibility 0s linear 260ms; }
  .esp-corpo[data-enviado] .esp-ok { opacity: 1; transform: none; visibility: visible; transition: opacity 260ms var(--ds-curva) 160ms, transform 420ms var(--ds-curva-painel) 160ms, visibility 0s 0s; }
  .esp-ok h2 { margin: 0; font: 600 22px/28px var(--lp-fonte-texto); letter-spacing: -0.01em; }
  /* o título recebe o foco só para o leitor de tela anunciar a confirmação; não é um controle e não sai na ordem do Tab.
     Sem esta linha, quem enviava com Enter via o contorno padrão do navegador em volta do título. */
  .esp-ok h2:focus { outline: none; }
  .esp-ok p { margin: 10px 0 24px; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; max-width: 40ch; }
  .esp-ok .acoes { display: flex; flex-wrap: wrap; gap: 12px; }

  /* Fale com vendas: depois da empresa vêm CNPJ e número de acessos lado a lado, 20 px abaixo (o mesmo espaço entre nome
     e empresa, que é a linha reservada da mensagem). O seletor guarda os 12 px dele acima da legenda: sem eles, a
     mensagem de erro do CNPJ encostava na legenda e as duas se liam como uma frase só. As cinco necessidades não cabem
     numa linha (cada coluna teria 99 px e a etiqueta mais longa tem 168): o seletor vai em três colunas, duas linhas,
     na altura de 44 px que ele já usa no celular, porque duas etiquetas quebram em duas linhas. No celular três colunas
     não cabem ("Grupo econômico sem teto" iria a três linhas): ficam as duas colunas de sempre. A quebra vale nas duas
     camadas (a cópia escura tem as mesmas regras e a mesma largura, e continua exatamente sobre a clara). Nenhuma destas
     regras alcança a tela do especialista. */
  .esp-form > .campo + .par { margin-top: 20px; }
  /* vendas na janela real de um notebook de 1366x768 (~657 px de altura para a página): o Enviar à vista sem cortar
     campo; cada vão um pouco menor (o topo, 8 px mais alto, vale para as duas telas; título e frase 4, frase e campos 8, empresa e CNPJ 8, seletor 4, Enviar 8) */
  @media (min-width: 761px) {
    .esp-bloco-vendas .frase { margin: 8px 0 16px; }
    .esp-bloco-vendas .esp-form > .campo + .par { margin-top: 12px; }
    .esp-bloco-vendas .perfil { margin-top: 8px; }
    .esp-bloco-vendas .enviar { margin-top: 8px; }
  }
  .perfil-cinco .perfil-opcoes, .perfil-cinco .perfil-copia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perfil-cinco label, .perfil-cinco .perfil-copia > span { height: 44px; white-space: normal; text-align: center; text-wrap: balance; }
  @media (max-width: 760px) { .perfil-cinco .perfil-opcoes, .perfil-cinco .perfil-copia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Tela larga: o bloco alarga e nome e e-mail ficam lado a lado; o véu de leitura acompanha a largura nova. */
  @media (min-width: 1100px) {
    .esp-bloco { width: 520px; }
    .par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .esp-veu { background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ds-cor-fundo) 90%, transparent) 0%,
        color-mix(in srgb, var(--ds-cor-fundo) 80%, transparent) calc(var(--lp-margem) + 520px),
        color-mix(in srgb, var(--ds-cor-fundo) 20%, transparent) calc(var(--lp-margem) + 800px),
        transparent calc(var(--lp-margem) + 1020px)),
      linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 62%, transparent) 0, transparent 150px); }
  }
  @media (max-width: 760px) {
    .esp { padding: calc(var(--lp-topo) + 24px) 24px 64px; }
    .esp-bloco { margin: 0 auto; }
    .esp h1 { font-size: 34px; }
    .esp-veu { background: linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent), color-mix(in srgb, var(--ds-cor-fundo) 78%, transparent)); }
    .campo input, .campo textarea { font-size: 16px; }
    .perfil-opcoes, .perfil-copia { grid-template-columns: 1fr 1fr; }
    .perfil label, .perfil-copia > span { height: 44px; }
    /* no celular o pé fica no fluxo, no fim da página, depois do formulário (06/10, a mesma saída do checkout: preso ao pé da
       janela, ele cobria campos com a página no alto); sem o véu, a 24 px do fim da seção */
    .esp .mapa-pe { position: static; height: auto; margin-top: auto; padding-top: 24px; margin-bottom: -40px; }
    .esp .mapa-pe::before { display: none; }
    .esp .mapa-pe-canto { position: static; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* o que subia só esmaece (180 ms, linear, todos juntos); a peça do perfil troca de lugar sem deslizar */
    .js .esp:not([data-entrada]) :is(.esp-pal, .frase, .campo, .perfil, .enviar, .nota) { transform: none; }
    .js .esp[data-entrada] :is(.esp-pal, .frase, .enviar, .nota, .rotulo, .perfil legend) { animation: esp-surge 180ms linear backwards; }
    .js .esp[data-entrada] :is(.campo > input, .campo > textarea, .perfil-opcoes) { animation: esp-surge-vidro 180ms linear backwards; }
    .js .esp[data-entrada] :is(.campo, .perfil) { animation: none; }
    /* a peça troca de lugar sem deslizar, também durante a pressão (a regra da pressão é mais específica e devolvia os
       280 ms de deslize); na primeira escolha ela só esmaece, como o resto */
    .perfil-peca, .perfil-opcoes[data-peca] input:checked + label:active ~ .perfil-peca { transition: background-color 0ms, opacity 180ms linear; }
    .perfil-copia { transition: none; }
    .esp-form, .esp-ok, .esp-corpo[data-enviado] .esp-form, .esp-corpo[data-enviado] .esp-ok { transform: none; transition: opacity 180ms linear, visibility 0s; }
    .rotulo { transition: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .campo input, .campo textarea, .perfil-opcoes { background: var(--ds-cor-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

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