/*
   * Tela de entrada, igual à do sistema. Valores copiados de docs/design/referencia/entrada/entrada.module.css.
   * Só tokens --ds-* e --lp-*. Nenhum dourado fora da marca: o foco é neutro.
   * A tela inteira é Inter (como no sistema), pedida sem o eixo óptico: é o desenho do arquivo que o sistema serve.
   * A paisagem é sempre a de Carajás (decisão do dono).
   */
  html { height: 100%; }
  body { display: flex; flex-direction: column; min-height: 100%; overflow-x: hidden; }

  /*
   * O palco tem a altura da janela; se a janela for mais baixa que o bloco, a página rola em vez de cortar.
   * --bloco: a altura do formulário mais alto (o passo 1 do criar conta, com o cabeçalho do passo, 670 px, com as linhas reservadas do erro de cada campo); os dois formulários começam na mesma linha,
   * e a reserva é a do mais alto, para o título não mudar de lugar na troca. --reserva: o que o bloco precisa abaixo do
   * seu topo (+ 28 px até a borda). Acima de 820 px o crédito fica à direita da coluna e não entra na conta.
   */
  .palco { position: relative; flex: 1 0 auto; --bloco: 670px; --reserva: calc(var(--bloco) + 28px); min-height: calc(var(--bloco) + 124px); overflow: clip; isolation: isolate; }
  /* De 761 a 820 px o crédito encosta na coluna: o bloco para 16 px acima dele (+ 16 + 65). */
  @media (max-width: 820px) { .palco { --reserva: calc(var(--bloco) + 81px); min-height: calc(var(--bloco) + 177px); } }

  #mapa { position: fixed; inset: 0; z-index: 0; }

  /* Véu de leitura (seção 3.4): só onde o texto pousa, preso à margem e à largura do formulário. */
  .veu {
    z-index: 1;
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ds-cor-fundo) 88%, transparent) 0%,
        color-mix(in srgb, var(--ds-cor-fundo) 76%, transparent) calc(max(48px, 7vw) + 380px),
        color-mix(in srgb, var(--ds-cor-fundo) 18%, transparent) calc(max(48px, 7vw) + 640px),
        transparent calc(max(48px, 7vw) + 860px)),
      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%),
      linear-gradient(0deg, color-mix(in srgb, var(--ds-cor-fundo) 55%, transparent) 0%, transparent 22%);
    transition: opacity 420ms var(--ds-curva);
  }

  /* Cortina na cor do fundo: o salto da câmera no movimento reduzido. */
  .cortina {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background: var(--ds-cor-fundo); opacity: 0;
    transition: opacity 700ms var(--ds-curva);
  }
  .cortina[data-ligada] { opacity: 1; transition-duration: 160ms; }

  /* Atribuição das imagens: sob o crédito, no tom mais quieto da casa enquanto o véu está lá; no mapa aberto, texto cheio. */
  .atribuicao { z-index: 3; right: 32px; bottom: 8px; left: auto; transition: opacity 260ms var(--ds-curva), color 260ms var(--ds-curva); }
  .palco[data-fase='fora'] .atribuicao { color: var(--ds-cor-texto-3); }

  .tela { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

  /* a marca leva de volta ao site (hover, pressão e foco como a marca do cabeçalho; o ponteiro só nela) */
  .marca {
    position: absolute; top: 40px; left: var(--lp-margem);
    display: block; padding: 8px 10px; margin: -8px -10px; border-radius: var(--ds-raio-medio); pointer-events: auto;
    transition: opacity 260ms var(--ds-curva), 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; }

  /*
   * O trecho que existe no sistema (título, frase, campos, "Entrar", "Esqueci a senha": 372 px) fica centrado na
   * altura, como lá: título e botão caem no mesmo lugar dos dois lados. A entrada por terceiros e o cadastro pendem
   * para baixo. Em janela baixa o bloco sobe só o bastante para caber (--reserva).
   */
  .form {
    position: absolute; top: max(96px, min(calc(50% - 186px), calc(100% - var(--reserva)))); left: var(--lp-margem); width: 360px; margin: 0;
    pointer-events: auto;
    will-change: transform, opacity; /* a camada já existe quando o formulário volta no meio do voo de saída */
    transition: opacity 260ms var(--ds-curva), transform 420ms var(--ds-curva-painel), visibility 0s;
  }

  /*
   * Entrar e criar conta são o mesmo documento (entrada.html e cadastro.html): o satélite não recarrega na troca. Os
   * dois formulários ocupam o mesmo lugar, com o título na mesma linha; a troca é só opacidade: o que sai esmaece em
   * 140 ms e só então o que entra aparece, em 220 ms (texto diferente no mesmo lugar não se cruza; data-trocando); a URL
   * muda por pushState. O escondido é pintado uma vez, quase transparente, com a tela parada (data-aquecendo).
   */
  html[data-modo='criar'] #form, html:not([data-modo='criar']) #form-criar {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 140ms var(--ds-curva), visibility 0s linear 140ms;
  }
  html[data-trocando] .form { transition: opacity 220ms var(--ds-curva) 140ms, transform 420ms var(--ds-curva-painel), visibility 0s; }
  html[data-modo='criar'] #form[data-aquecendo], html:not([data-modo='criar']) #form-criar[data-aquecendo] { visibility: visible; opacity: 0.01; transition: none; }

  .credito { transition: opacity 260ms var(--ds-curva); }
  .credito .linha { font-variant-numeric: normal; } /* frase, não coluna: algarismos proporcionais, como no sistema */

  /* Enquanto a Inter não chega, o texto espera invisível e entra em 260 ms (sem JavaScript não há espera). */
  html[data-js]:not([data-fonte-pronta]) .form,
  html[data-js]:not([data-fonte-pronta]) .credito,
  html[data-js]:not([data-fonte-pronta]) .atribuicao { opacity: 0; }

  /* Fora da fase "fora": o formulário esmaece subindo 10 px (o mapa é que se move); marca, crédito e véu esmaecem. */
  .palco:not([data-fase='fora']) .marca,
  .palco:not([data-fase='fora']) .credito,
  .palco:not([data-fase='fora']) .veu { opacity: 0; }
  .palco:not([data-fase='fora']) .marca { pointer-events: none; }
  .palco:not([data-fase='fora']) .form {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 260ms var(--ds-curva), transform 420ms var(--ds-curva-painel), visibility 0s linear 260ms;
  }

  .titulo {
    margin: 0;
    font-size: var(--ds-t-destaque); line-height: var(--ds-lh-destaque);
    font-weight: 600; letter-spacing: var(--ds-tr-destaque);
  }
  .frase {
    margin: 10px 0 28px; color: var(--ds-cor-texto-2);
    font-size: var(--ds-t-titulo); line-height: 22px; letter-spacing: -0.005em;
  }

  /* Campo de vidro com rótulo que sobe (só transform e cor). */
  .campo { position: relative; display: block; margin-top: 10px; text-align: left; }
  .campo input {
    display: block; width: 100%; height: 54px; padding: 22px 16px 6px;
    border: 0; outline: 0; 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), 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-family: var(--lp-fonte-texto); font-size: var(--ds-t-titulo); font-weight: 500; line-height: 20px; letter-spacing: -0.005em;
    transition: box-shadow 160ms var(--ds-curva), background-color 160ms var(--ds-curva);
  }
  .campo input:hover { background: color-mix(in srgb, var(--ds-cor-superficie) 82%, transparent); }
  .campo input:focus {
    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);
  }
  .campo input::placeholder { color: transparent; } /* o marcador é só um espaço: nenhuma cor do navegador */
  /* Preenchimento automático: sem o fundo claro do navegador por cima do vidro. */
  .campo input:-webkit-autofill { -webkit-text-fill-color: var(--ds-cor-texto); transition: background-color 600000s 0s; }
  .rotulo {
    position: absolute; top: 17px; left: 16px; color: var(--ds-cor-texto-2);
    font-size: var(--ds-t-titulo); 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);
  }
  /* o rótulo numa linha só (07/10: "Empresa, pessoa, CNPJ ou processo" quebrava abaixo de 340 px e o rótulo flutuante ficava
     por cima do texto digitado). O rótulo com data-exemplos troca pela forma mais longa que cabe (o script do passo 2), sem
     reticências; o corte é só a rede de segurança. */
  .rotulo { white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; }
  .campo input:focus + .rotulo,
  .campo input:not(:placeholder-shown) + .rotulo { max-width: calc((100% - 32px) / 0.76); }
  .campo input:focus + .rotulo,
  .campo input:not(:placeholder-shown) + .rotulo { color: var(--ds-cor-texto-3); transform: translateY(-9px) scale(0.76); }

  /* Mostrar e ocultar a senha. */
  .campo input.com-botao { padding-right: 52px; }
  .olho {
    position: absolute; top: 9px; right: 8px; display: grid; width: 36px; height: 36px; place-items: center;
    padding: 0; border: 0; border-radius: var(--ds-raio-medio); background: none; color: var(--ds-cor-texto-2); font: inherit; cursor: pointer;
    transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva);
  }
  .olho svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .olho .fechado, .olho[aria-pressed='true'] .aberto { display: none; }
  .olho[aria-pressed='true'] .fechado { display: block; }
  .olho:hover, .olho[aria-pressed='true'] { background: var(--ds-cor-realce); color: var(--ds-cor-texto); }
  .olho:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }

  /* Aviso de Caps Lock: linha sempre reservada, o botão não se mexe quando ele aparece. */
  .aviso {
    min-height: var(--ds-lh-rotulo); margin: 6px 0 0; color: var(--ds-cor-texto-2);
    font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo);
  }

  /* Criar conta: o erro de cada campo numa linha sempre reservada logo abaixo dele, na cor do texto (sem vermelho: não é
     urgência); nada se move quando ele aparece, e ele some quando a pessoa volta a digitar no campo. */
  .erro-campo { min-height: var(--ds-lh-rotulo); margin: 4px 0 0; padding-left: 16px; color: var(--ds-cor-texto); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); text-align: left; }
  /* Criar conta: a regra da senha numa linha sempre reservada logo abaixo do campo (o Caps Lock e o erro da senha escrevem nela). */
  .erro-campo + .campo { margin-top: 14px; } /* o erro fica 4 px abaixo do próprio campo e 14 px acima do seguinte */
  .regra { min-height: var(--ds-lh-rotulo); margin: 4px 0 0; padding-left: 16px; color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); text-align: left; }
  .regra[data-erro] { color: var(--ds-cor-texto); } /* o erro da senha com a mesma cor dos outros (a regra fica no tom 2) */
  /* A concordância, sem caixa de marcar: logo abaixo do botão, no tom quieto; os dois links navegam (sublinhados). */
  .termos { margin: 10px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); text-wrap: pretty; }
  .form .termos .link-texto { display: inline; margin: 0; padding: 2px 0; font-size: inherit; line-height: inherit; color: var(--ds-cor-texto-2);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent); }
  .form .termos .link-texto:hover { color: var(--ds-cor-texto); }
  /* abaixo de 300 px os dois links caem em linhas seguidas: com a entrelinha de 16 px as caixas (com o recuo de 2 px) se
     cobriam; com 20 px sobra vão entre elas, e o sublinhado fica dentro da caixa do próprio link (como no aceite do checkout) */
  @media (max-width: 300px) { .form .termos { line-height: 20px; } }

  /* "Entrar": o botão claro da casa (base.css), na largura do bloco. */
  .entrar { position: relative; display: flex; width: 100%; margin-top: 8px; overflow: hidden; }
  #form-criar .entrar { margin-top: 4px; }
  .entrar[data-entrando] { cursor: progress; }
  .entrar[data-entrando]:hover, .entrar[data-entrando]: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 160ms linear;
  }
  .entrar:not([data-entrando]) .progresso { display: none; }

  /*
   * Depois do "Entrar", três grupos, cada resposta logo abaixo de quem a disparou, em linha já reservada (nada se move):
   *   1. "Esqueci a senha" sozinho e sem sublinhado, como no sistema, com a linha da dica dele;
   *   2. a entrada por terceiros (decisão do dono; ainda sem integração), com a linha da dica dela;
   *   3. o cadastro: a pergunta e o único link que navega, por isso o único sublinhado da tela.
   * Hover só de cor; pressão no pointer-down, sem transição. O texto começa na mesma borda do título e dos campos
   * (o recuo do link é devolvido por margem negativa).
   */
  .apoio { display: flex; margin: 14px 0 0; }
  .form .link-texto {
    position: relative; padding: 4px;
    transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva);
  }
  .form .link-texto:active { background: var(--ds-cor-preenchimento); color: var(--ds-cor-texto); transition-duration: 0ms; }
  .form .link-texto:focus-visible { outline-offset: 2px; }
  #esqueci { margin-left: -4px; }
  /* Cada dica fica duas vezes mais perto de quem a disparou do que do grupo seguinte; vazia, a linha é o respiro
     entre os grupos (32 px nos dois casos). */
  .dica {
    min-height: var(--ds-lh-corpo); margin: 2px 0 0; color: var(--ds-cor-texto-2);
    font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo);
  }
  #dica-terceiros, #c-dica-terceiros { margin-top: 6px; }

  /* Três botões iguais, um degrau abaixo do "Entrar" e diferentes dos campos: a receita do campo que abre menu do
     sistema (realce com anel fino, sem vidro), texto e marca no segundo tom, cheios no hover. Marca em uma cor só. */
  .ou { margin: 12px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); letter-spacing: var(--ds-tr-rotulo); }
  .terceiros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .terceiro {
    height: 44px; padding: 0 8px; gap: 8px;
    background: var(--ds-cor-realce); box-shadow: inset 0 0 0 1px var(--ds-cor-borda); color: var(--ds-cor-texto-2);
    font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); font-weight: 500; letter-spacing: 0;
  }
  .terceiro:hover { background: color-mix(in srgb, var(--ds-cor-preenchimento) 78%, transparent); color: var(--ds-cor-texto); }
  .terceiro:focus-visible { color: var(--ds-cor-texto); }
  .terceiro:active { background: var(--ds-cor-preenchimento); }
  .terceiro svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
  /* Acerto óptico: o quadrado cheio pesa mais que as outras duas marcas; a maçã tem o centro abaixo do centro do texto. */
  .terceiro[data-terceiro='Microsoft'] svg { width: 14px; height: 14px; }
  .terceiro[data-terceiro='Apple'] svg { transform: translateY(-1px); }

  .cadastro { display: flex; align-items: baseline; gap: 7px; margin: 8px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }
  .cadastro .link-texto {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 46%, transparent);
  }

  /* No dedo, os alvos pequenos ganham 44 px de área de toque sem mudar o desenho. */
  @media (pointer: coarse) {
    .form .link-texto::after, .olho::after { content: ''; position: absolute; }
    .form .link-texto::after { inset: -9px -6px; }
    .olho::after { inset: -4px; }
  }

  .olho:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 3px; }

  /*
   * ---------- controle do protótipo (acessório; some com ?limpo) ----------
   * Só existe dentro, depois do voo: a nota e o "Sair da conta", no alto da tela, onde nada mais está.
   */
  .proto-faixa { position: fixed; top: 14px; right: 14px; z-index: 900; display: flex; justify-content: flex-end; pointer-events: none; }
  .proto-faixa .proto {
    position: static; transform: none; max-width: min(660px, calc(100vw - 28px)); pointer-events: auto;
    transition: opacity var(--ds-dur-media) var(--ds-curva), visibility 0s;
  }
  .proto-faixa .proto[data-oculta] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--ds-dur-media) var(--ds-curva), visibility 0s linear var(--ds-dur-media); }
  html[data-limpo] .proto-faixa, html:not([data-js]) .proto-faixa { display: none; } /* sem JavaScript não há o que controlar */
  .proto .nota { margin: 0; color: var(--ds-cor-texto); }
  .proto .sair { background: var(--ds-cor-realce); color: var(--ds-cor-texto); }
  .proto .sair:hover { background: var(--ds-cor-preenchimento); }

  /* ---------- até 760 px: marca e bloco ao centro, véu em elipse com patamar ---------- */
  @media (max-width: 760px) {
    /* Como no sistema, o trecho comum (372 px) fica centrado a 54% da altura; em janela baixa o bloco sobe para não
       encostar no crédito (508 do bloco + 24 + 65 do crédito). */
    .palco { min-height: calc(var(--bloco) + 173px); --topo: max(84px, min(calc(54% - 186px), calc(100% - var(--bloco) - 89px))); --raio-do-veu: 320px; }
    .marca { left: 50%; margin-left: 0; margin-right: 0; transform: translateX(-50%); }
    .form { top: var(--topo); left: 50%; width: calc(100vw - 48px); max-width: 360px; text-align: center; transform: translateX(-50%); }
    .palco:not([data-fase='fora']) .form { transform: translate(-50%, -10px); }
    .frase { max-width: 300px; margin-right: auto; margin-left: auto; }
    .apoio, .cadastro { justify-content: center; }
    #esqueci { margin-left: 0; }
    .cadastro .link-texto { margin-right: -4px; }
    .atribuicao { right: 0; left: 0; bottom: 8px; text-align: center; }
    .veu {
      background:
        /* A elipse é presa ao bloco, não à tela: 320 px de raio na horizontal (os 80% da receita a 400 px, que é onde
           o contraste foi medido; abaixo de 400 px voltam os 80%) e 440 px na vertical (o patamar de 62% cobre do
           título ao cadastro). Entre 400 e 760 px a mina volta a aparecer dos lados do bloco. */
        radial-gradient(ellipse var(--raio-do-veu) calc(var(--bloco) * 0.87) at 50% calc(var(--topo) + var(--bloco) / 2),
          color-mix(in srgb, var(--ds-cor-fundo) 84%, transparent) 0%,
          color-mix(in srgb, var(--ds-cor-fundo) 84%, transparent) 62%,
          color-mix(in srgb, var(--ds-cor-fundo) 20%, transparent) 100%),
        linear-gradient(0deg,
          color-mix(in srgb, var(--ds-cor-fundo) 80%, transparent) 0,
          color-mix(in srgb, var(--ds-cor-fundo) 74%, transparent) 104px,
          transparent 220px),
        linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 45%, transparent) 0%, transparent 18%);
    }
    .proto-faixa { right: 12px; left: 12px; justify-content: center; }
    .proto-faixa .proto button { white-space: nowrap; }
    .proto-faixa #proto-dentro { flex-wrap: nowrap; gap: 10px; text-align: left; }
  }

  @media (max-width: 400px) { .palco { --raio-do-veu: 80%; } }
  /* Celular estreito: a dica usa 12 px de cada margem e cabe em uma linha até 360 px (não empurra o que vem abaixo). */
  @media (max-width: 399px) { .dica { margin-right: -12px; margin-left: -12px; } }
  /* Celular baixo: a marca sobe 12 px para o título não encostar nela. */
  @media (max-width: 760px) and (max-height: 760px) {
    .marca { top: 28px; }
    .palco { --topo: max(76px, min(calc(54% - 186px), calc(100% - var(--bloco) - 89px))); }
  }
  /* Abaixo de 375 px a linha do crédito quebra em duas: mais 16 px de reserva. */
  @media (max-width: 374px) {
    .palco { min-height: calc(var(--bloco) + 189px); --topo: max(84px, min(calc(54% - 186px), calc(100% - var(--bloco) - 105px))); }
  }
  @media (max-width: 374px) and (max-height: 760px) {
    .palco { --topo: max(76px, min(calc(54% - 186px), calc(100% - var(--bloco) - 105px))); }
  }

  /* ---------- movimento reduzido: troca por esmaecer, nada desliza ---------- */
  @media (prefers-reduced-motion: reduce) {
    .marca, .credito, .veu, .cortina, .cortina[data-ligada] { transition: opacity 180ms linear; }
    .form, .palco:not([data-fase='fora']) .form { transform: none; }
    .form { transition: opacity 180ms linear, visibility 0s; }
    .palco:not([data-fase='fora']) .form { transition: opacity 180ms linear, visibility 0s linear 180ms; }
    .rotulo, .entrar, .progresso { transition: none; }
    html[data-trocando] .form, html[data-modo='criar'] #form, html:not([data-modo='criar']) #form-criar { transition: none; }
    .atribuicao { transition: opacity 180ms linear; }
    .proto-faixa .proto { transition: opacity 180ms linear, visibility 0s; }
    .proto-faixa .proto[data-oculta] { transition: opacity 180ms linear, visibility 0s linear 180ms; }
  }
  @media (prefers-reduced-motion: reduce) and (max-width: 760px) {
    .form, .palco:not([data-fase='fora']) .form { transform: translateX(-50%); }
  }

  /* ---------- transparência reduzida: vidro vira superfície sólida ---------- */
  @media (prefers-reduced-transparency: reduce) {
    .campo input, .campo input:hover { background: var(--ds-cor-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .terceiro { background: var(--ds-cor-superficie); }
    .terceiro:hover { background: var(--ds-cor-superficie-elevada); }
    .terceiro:active { background: var(--ds-cor-superficie-elevada); filter: brightness(0.9); }
  }

  /* ---------- motor Mapbox: a reserva, o logotipo e a atribuição ---------- */
  /* A capa do primeiro quadro do mapa, fixa como ele e por baixo dele: pinta desde o primeiro quadro, sem esperar
     JavaScript, e fica se o mapa não pintar (sem chave, cota esgotada, rede). Presa no ponto da mina: o mapa entra por
     cima sem salto. */
  .palco > .mapa-reserva { position: fixed; z-index: 0; }
  /* O logotipo do Mapbox embaixo à direita, na ponta; a atribuição à esquerda dele, na mesma linha; o crédito logo
     acima. O formulário fica longe, à esquerda. */
  #mapa .mapboxgl-ctrl-bottom-left { left: auto; right: 32px; }
  #mapa .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 8px 4px; }
  .logo-entrada { right: 32px; bottom: 4px; }
  .atribuicao { right: 130px; }
  @media (max-width: 760px) {
    /* no celular: o logotipo à esquerda, na linha da atribuição (à direita dele, em duas linhas); o crédito acima */
    #mapa .mapboxgl-ctrl-bottom-left { left: 0; right: auto; }
    #mapa .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 10px 20px; }
    .logo-entrada { right: auto; left: 16px; bottom: 6px; }
    .atribuicao { left: 112px; right: 16px; bottom: 7px; text-align: right; }
    .credito { bottom: 42px; }
  }

  /* ---------- janela baixa: o canto do mapa no alto, preso na janela ---------- */
  /* Onde o formulário enche a tela e a página rola (o script põe data-canto-alto), o pé do palco sai da janela e levava
     junto o logotipo e a atribuição. Termos do Mapbox, 1.4.3: a atribuição tem de estar à vista enquanto o mapa se vê.
     Então os dois vão para o alto à direita, presos na janela, no estilo do pé do mapa (mapa-mapbox.css, 7): véu curto,
     alvo de 24 px, texto de 11 px. No computador ficam na linha da marca, à direita (o formulário mora à esquerda), com
     um reforço curto atrás; no celular, numa faixa no alto, com a marca e o formulário logo abaixo dela. Vale também
     depois do voo de entrada (o canto não troca de lugar; o controle do protótipo desce para baixo dele). */
  .canto-veu { display: none; }
  html[data-canto-alto] .canto-veu { display: block; position: fixed; z-index: 5; pointer-events: none; }
  html[data-canto-alto] #mapa .mapboxgl-ctrl-bottom-left { display: none; }
  html[data-canto-alto] .logo-entrada, html[data-canto-alto][data-mapa-vivo] .logo-entrada { position: fixed; z-index: 6; bottom: auto; visibility: visible; transition: none; }
  html[data-canto-alto] .atribuicao { position: fixed; z-index: 6; bottom: auto; margin: 0; font-size: 11px; line-height: 24px; text-shadow: none; } /* a cor é a da entrada: a mais quieta com o véu, a cheia no mapa aberto */
  html[data-canto-alto] .atribuicao a { display: inline-block; line-height: 24px; }
  @media (min-width: 761px) {
    html[data-canto-alto] .logo-entrada { top: 39px; right: 32px; }
    html[data-canto-alto] .atribuicao { top: 38px; right: 130px; left: auto; white-space: nowrap; }
    /* o reforço: a cor de fundo da casa a 86% atrás da linha inteira (até 70 px), indo a transparente para baixo e para a
       esquerda (a máscara); só atrás do canto. Com 86%, nem um pixel branco do satélite tira a atribuição dos 4,5:1. */
    html[data-canto-alto] .canto-veu { top: 0; right: 0; width: 560px; height: 120px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 70px,
        color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 120px);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px); mask-image: linear-gradient(90deg, transparent 0, #000 160px); }
    html[data-canto-alto] .proto-faixa { top: 72px; }
  }
  /* de 761 a 899 px a linha inteira (294 px) chegaria à coluna do formulário: a atribuição vai em duas linhas, à direita do
     logotipo, e o reforço cheio desce até a segunda */
  @media (min-width: 761px) and (max-width: 899px) {
    html[data-canto-alto] .atribuicao { max-width: 168px; white-space: normal; text-align: right; }
    html[data-canto-alto] .canto-veu { height: 150px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 0, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 96px,
        color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 150px); }
    html[data-canto-alto] .proto-faixa { top: 96px; }
  }
  @media (max-width: 760px) {
    /* a faixa: 56 px cheios (o logotipo à esquerda, a atribuição à direita em duas linhas de 24 px) e 28 px de transição;
       a marca começa abaixo dela e o formulário 27 px abaixo da marca, como antes; embaixo fica só o crédito da foto */
    html[data-canto-alto] .canto-veu { top: 0; left: 0; right: 0; height: 84px;
      background: linear-gradient(180deg, var(--ds-cor-fundo) 0, var(--ds-cor-fundo) 56px, color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 84px); }
    html[data-canto-alto] .logo-entrada { top: 5px; left: 16px; right: auto; }
    html[data-canto-alto] .atribuicao { top: 4px; left: 112px; right: 16px; text-align: right; }
    html[data-canto-alto] .marca { top: 84px; }
    html[data-canto-alto] .palco { --topo: 132px; min-height: calc(var(--bloco) + 203px); }
    html[data-canto-alto] .credito { bottom: 16px; }
    html[data-canto-alto] .proto-faixa { top: 64px; }
  }
  /* o formulário mais alto (criar conta) cresce quando a largura aperta (o texto quebra mais, e o crédito da foto também):
     a folga até o crédito fica em 18 px como no celular de 375 px */
  @media (max-width: 374px) { html[data-canto-alto] .palco { min-height: calc(var(--bloco) + 219px); } }
  @media (max-width: 300px) { html[data-canto-alto] .palco { min-height: calc(var(--bloco) + 269px); } }