/*
   * Assinatura de DEMONSTRAÇÃO. O molde é a tela de entrada: a capa do satélite de Carajás, parada (sem mapa vivo), véu de leitura, bloco
   * à esquerda sem cartão, marca no alto. Só tokens --ds-* e --lp-*. Nenhum dourado fora da marca: o foco é neutro.
   * Nada sai da página: nenhum campo tem name, nenhum botão envia o formulário, nada é guardado no navegador.
   */
  html { height: 100%; }
  body { min-height: 100%; overflow-x: hidden; }

  /* ---------- palco: mapa, véu e a camada do texto (tela larga: nada rola fora do bloco) ---------- */
  .palco { position: fixed; inset: 0; overflow: clip; isolation: isolate; }
  #mapa { position: fixed; inset: 0; z-index: 0; }

  /* Véu de leitura: o da tela de entrada, preso à margem e à largura do bloco (520 px, a medida do formulário largo
     da casa), mais o reforço do canto do crédito. */
  .veu {
    position: fixed; z-index: 1;
    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) + 540px),
        color-mix(in srgb, var(--ds-cor-fundo) 20%, transparent) calc(var(--lp-margem) + 820px),
        transparent calc(var(--lp-margem) + 1040px)),
      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%);
  }

  .tela { position: absolute; inset: 0; z-index: 2; }
  /* o botão de idioma (botao-idioma.cjs) termina na borda da coluna de 520 px; no celular, na margem de 24 px */
  .tela { --idioma-coluna: min(520px, calc(100vw - 2 * var(--lp-margem))); --idioma-direita: 24px; --idioma-topo-baixo: 35px; }

  .marca {
    position: absolute; top: 40px; left: var(--lp-margem);
    display: block; padding: 8px 10px; margin: -8px -10px; border-radius: var(--ds-raio-medio);
    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; }

  .credito .linha { font-variant-numeric: normal; }
  .atribuicao { right: 32px; bottom: 8px; left: auto; color: var(--ds-cor-texto-3); }

  /*
   * O bloco: coluna de 520 px a partir da margem da casa, centrada na altura quando cabe. Se a janela for baixa, ele
   * rola por dentro (a página não rola). O recuo de 8 px por dentro dá lugar aos anéis de foco sem cortá-los.
   */
  .bloco {
    --largura: min(520px, calc(100vw - 2 * var(--lp-margem)));
    position: absolute; top: 80px; bottom: var(--reserva, 16px); left: calc(var(--lp-margem) - 8px);
    display: flex; flex-direction: column; max-width: calc(100vw - var(--lp-margem));
    padding: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: rgba(241, 239, 232, 0.18) transparent;
  }
  .bloco-dentro { width: var(--largura); margin: auto 0; }
  /* Até 1000 px o crédito encosta na coluna: o bloco para acima dele. */
  @media (max-width: 1000px) { .bloco { --reserva: 84px; } }

  /* Enquanto a Inter não chega, o bloco espera escondido e entra esmaecendo (sem JavaScript, nada espera). */
  html[data-js]:not([data-entrou]):not([data-folhas]) :is(.bloco, .credito, .atribuicao) { visibility: hidden; }

  /* Qualquer parte trocada (formulário, confirmação, painel de pagamento) fica fora de vista e fora do teclado. */
  [data-oculto] { visibility: hidden; }

  /* ---------- título e frase ---------- */
  .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: 8px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-titulo); line-height: 22px; letter-spacing: -0.005em; }

  .corpo { position: relative; margin-top: 24px; }

  /* ---------- resumo: plano, preço, acessos e total, direto sobre o véu (sem cartão) ---------- */
  .resumo-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .resumo-plano { margin: 0; font-size: var(--ds-t-titulo); line-height: var(--ds-lh-titulo); font-weight: 600; letter-spacing: var(--ds-tr-titulo); }
  .resumo-preco { margin: 2px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }
  .resumo-preco span { display: block; }
  .resumo-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
  .resumo-col { display: flex; flex-direction: column; gap: 4px; }
  .resumo-col.total { align-items: flex-end; text-align: right; }
  .resumo-rotulo { color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); letter-spacing: var(--ds-tr-rotulo); }
  .total-valor {
    display: flex; align-items: center; height: 44px; margin: 0; white-space: nowrap;
    font-size: var(--ds-t-painel); line-height: var(--ds-lh-painel); font-weight: 600; letter-spacing: var(--ds-tr-painel); font-variant-numeric: tabular-nums;
  }
  /* Janela muito estreita (com mouse, até uns 300 px, o total e o seletor de acessos não cabiam juntos e a página rolava 2 a
     19 px na horizontal): o total quebra antes de "por mês"; as duas linhas de 22 px cabem nos mesmos 44 px de altura. */
  @media (max-width: 340px) { .total-valor { white-space: normal; text-align: right; } }

  /* Quantidade de acessos: menos, número, mais. O vidro dos campos, na altura do seletor de pagamento. */
  .passo {
    display: inline-flex; align-items: center; gap: 2px; 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);
  }
  .passo button {
    position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--ds-raio-medio);
    background: none; color: var(--ds-cor-texto); 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);
  }
  .passo button:hover { background: var(--ds-cor-realce); }
  .passo button:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .passo button[aria-disabled='true'] { color: var(--ds-cor-texto-3); cursor: default; }
  .passo button[aria-disabled='true']:hover, .passo button[aria-disabled='true']:active { background: none; }
  .passo button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .passo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
  .passo output { min-width: 32px; text-align: center; font-size: var(--ds-t-titulo); line-height: var(--ds-lh-titulo); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* "Trocar o plano": botão de texto que abre a lista dos planos ali mesmo (a página não muda). */
  .trocar { position: relative; flex: none; margin-right: -4px; }
  .bloco .link-texto { position: relative; padding: 4px; transition: color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  .bloco .link-texto:active { background: var(--ds-cor-preenchimento); color: var(--ds-cor-texto); transition-duration: 0ms; }
  .bloco .link-texto:focus-visible { outline-offset: 2px; }
  #trocar[aria-expanded='true'] { color: var(--ds-cor-texto); }

  /* A lista abre do gatilho e fecha pelo mesmo caminho (desce 4 px e aparece; sobe e some). Superfície sólida: não há
     vidro sobre vidro. */
  .menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: 300px; max-width: calc(100vw - 48px);
    padding: 4px; border-radius: var(--ds-raio-grande);
    background: var(--ds-cor-superficie); box-shadow: inset 0 0 0 1px var(--ds-cor-borda), var(--ds-sombra-popover);
    opacity: 0; transform: translateY(-4px); visibility: hidden;
    transition: opacity 160ms var(--ds-curva), transform 160ms var(--ds-curva), visibility 0s linear 160ms;
  }
  .menu[data-aberto] { opacity: 1; transform: none; visibility: visible; transition: opacity 160ms var(--ds-curva), transform 160ms var(--ds-curva), visibility 0s; }
  .menu button {
    display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: 12px; align-items: center; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--ds-raio-medio); background: transparent;
    color: var(--ds-cor-texto-2); font-family: var(--lp-fonte-texto); text-align: left; cursor: pointer;
    transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva);
  }
  .menu button:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); }
  .menu button:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .menu button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: -2px; }
  .menu button[aria-checked='true'] { color: var(--ds-cor-texto); }
  .m-nome { grid-column: 1; font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); font-weight: 500; }
  .m-preco { grid-column: 1; color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); font-variant-numeric: tabular-nums; }
  .menu svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
  .menu button[aria-checked='true'] svg { visibility: visible; }

  /* ---------- campos de vidro com rótulo que sobe (os da casa, na altura de 48 px do formulário largo) ---------- */
  .dados { margin-top: 24px; }
  .linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 10px; }
  .linha + .linha { margin-top: 10px; }
  .campo { position: relative; display: block; text-align: left; }
  .campo input {
    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;
    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[data-erro] input { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); }
  .campo input: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 { color: transparent; }
  .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.numeros { font-variant-numeric: tabular-nums; }
  .rotulo {
    position: absolute; top: 14px; left: 16px; max-width: calc(100% - 20px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    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 { transform: translateY(-8px) scale(0.76); }
  .campo input:-webkit-autofill + .rotulo { transform: translateY(-8px) scale(0.76); }

  /* linha de apoio de um campo (sempre ocupada: nada se move quando o texto troca) */
  .ajuda { min-height: var(--ds-lh-rotulo); margin: 4px 0 0 16px; color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); letter-spacing: var(--ds-tr-rotulo); }

  /* Mostrar e ocultar a senha (o olho da tela de entrada). */
  .campo input.com-botao { padding-right: 52px; }
  .olho {
    position: absolute; top: 6px; right: 6px; 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; }
  .olho:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 3px; }

  /* ---------- forma de pagamento: o seletor da casa, com a peça clara que corre até a escolha ---------- */
  .pagamento { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
  /* inglês: só cartão (a moeda da cobrança segue o país do cartão); some a escolha Cartão/Pix e tudo do Pix */
  html[lang='en'] #opcoes, html[lang='en'] #painel-pix, html[lang='en'] #pix { display: none !important; }
  .pagamento legend { margin: 0 0 6px; padding: 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }
  .opcoes, .copia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .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); }
  .pagamento input { position: absolute; opacity: 0; pointer-events: none; }
  .pagamento label, .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; }
  .pagamento 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); }
  @media (hover: hover) { .pagamento label:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); } }
  .pagamento label:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .opcoes:not([data-peca]) input:checked + label { background: var(--ds-cor-texto); color: var(--ds-cor-sobre-acento); }
  .opcoes:not([data-peca]) input:focus-visible + label { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  /* A peça clara leva por dentro as palavras em tom escuro, numa cópia que anda ao contrário dela: cada palavra escura
     fica sempre sobre a clara, e o contraste vale em todo quadro (o seletor de "Você representa"). */
  .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); }
  .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); }
  .copia > span { color: var(--ds-cor-sobre-acento); }
  .copia > span::before { content: attr(data-t); }
  .opcoes[data-peca] .peca { display: block; }
  .opcoes[data-sem-transicao] .peca, .opcoes[data-sem-transicao] .copia { transition: none; }
  @media (hover: hover) { .opcoes[data-peca] input:checked + label:hover ~ .peca { background: color-mix(in srgb, var(--ds-cor-texto) 90%, var(--ds-cor-fundo)); } }
  .opcoes[data-peca] input:checked + label:active ~ .peca { background: color-mix(in srgb, var(--ds-cor-texto) 86%, var(--ds-cor-fundo)); transition: transform 280ms var(--ds-curva), background-color 0ms; }
  .opcoes[data-peca]:has(input:focus-visible) .peca { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }

  /* Os dois painéis moram na mesma célula: a área tem sempre a altura do maior, e o botão não se mexe na troca. */
  .paineis { display: grid; margin-top: 10px; }
  .painel { grid-area: 1 / 1; align-self: start; min-width: 0; }
  .cartao { display: grid; grid-template-columns: minmax(0, 1fr) 100px 180px; grid-template-areas: 'num num num' 'nome val cod'; gap: 10px 12px; }
  .c-num { grid-area: num; } .c-nome { grid-area: nome; } .c-val { grid-area: val; } .c-cod { grid-area: cod; }
  .pix-titulo { margin: 0; font-size: var(--ds-t-titulo); line-height: var(--ds-lh-titulo); font-weight: 500; letter-spacing: var(--ds-tr-titulo); }
  .pix-texto { margin: 6px 0 0; max-width: 46ch; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }

  /* ---------- aviso, botão e entrada ---------- */
  /* Aviso de validação: linha sempre reservada logo acima do botão; esmaece ao entrar e ao sair. */
  .aviso { min-height: var(--ds-lh-corpo); margin: 12px 0 0; color: var(--ds-cor-texto); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo);
    opacity: 0; transition: opacity var(--ds-dur-media) var(--ds-curva); }
  .aviso[data-visivel] { opacity: 1; }
  .assinar { display: flex; width: 100%; margin-top: 8px; }
  /* o aceite dos termos, logo abaixo do botão, como no criar conta da entrada (abre em outra aba: o checkout fica) */
  .termos { margin: 16px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-rotulo); line-height: var(--ds-lh-rotulo); text-wrap: pretty; }
  .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); }
  .termos .link-texto:hover { color: var(--ds-cor-texto); }
  .termos .link-texto:active { color: var(--ds-cor-texto); background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  /* o alvo de toque com 44 px: uma faixa transparente centrada no link, sem mexer na linha. A regra completa (top, bottom, os
     lados, a altura e o deslocamento) e mais específica que a de toque do formulário (.bloco .link-texto::after), que só trocava
     parte dela. O aceite fica 16 px abaixo do botão: a faixa (12,5 px acima do link) não chega ao botão de compra. */
  .termos .link-texto { position: relative; }
  .form .termos .link-texto::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; bottom: auto; height: 44px; transform: translateY(-50%); }
  /* abaixo de 300 px (o Fold fechado) os dois links caem em linhas seguidas, um sobre o outro: a faixa de um cobria o outro.
     Ali a faixa é o próprio link (os dois alcançáveis; link dentro de frase, a exceção de tamanho de alvo do WCAG), e o link
     fica com 1 px embaixo só (com o recuo de 2 px, as caixas das duas linhas, a 16 px uma da outra, se cobriam em 3 px; sem
     recuo nenhum, o sublinhado de "Termos de uso", 3 px abaixo da base, ficava fora da caixa dele): as caixas se encostam e
     o sublinhado fica dentro da do próprio link. A entrelinha sobe para 20 px: com 16 px (a altura do link) as linhas se
     encostavam e o arredondamento de meio pixel da faixa de uma cobria o sublinhado da outra; com 20 px sobra um vão de 3 px,
     e os anéis de foco também não se cruzam */
  @media (max-width: 300px) { .form .termos { line-height: 20px; } .form .termos .link-texto { padding: 0 0 1px; } .form .termos .link-texto::after { top: 0; height: 100%; transform: none; } }
  /* 24 px abaixo do aceite (na grade de 4): a faixa de toque dos links do aceite (12,5 px abaixo do texto) e a do Entrar (9 px
     acima) não se encontram. Os nomes dos links do aceite não se partem (espaço inseparável): partido, o link perdia a faixa. */
  .conta { display: flex; align-items: baseline; gap: 7px; margin: 26px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }
  .conta .link-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent); }

  /* ---------- confirmação, no lugar do formulário ---------- */
  .ok { position: absolute; top: 0; left: 0; width: 100%; }
  .ok h2 { margin: 0; font-size: var(--ds-t-destaque); line-height: 28px; font-weight: 600; letter-spacing: var(--ds-tr-destaque); text-wrap: balance; }
  .ok h2:focus { outline: none; }
  .ok-resumo { margin: 10px 0 0; max-width: 52ch; color: var(--ds-cor-texto-2); font-size: var(--ds-t-titulo); line-height: 22px; }
  .pix { margin-top: 24px; }
  .pix h3 { margin: 0; font-size: var(--ds-t-titulo); line-height: var(--ds-lh-titulo); font-weight: 600; letter-spacing: var(--ds-tr-titulo); }
  .pix-nota { margin: 4px 0 0; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }
  .pix-corpo { display: flex; align-items: flex-start; gap: 20px; margin-top: 12px; }
  .qr { flex: none; display: block; width: 152px; height: 152px; }
  .qr-fundo { fill: var(--ds-cor-texto); }
  .qr-pontos { fill: var(--ds-cor-sobre-acento); }
  .pix-copia { flex: 1; min-width: 0; }
  .pix-rotulo { margin: 0 0 6px; color: var(--ds-cor-texto-2); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); }
  .pix-codigo {
    margin: 0; padding: 12px 14px; 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); font-size: var(--ds-t-corpo); line-height: var(--ds-lh-corpo); font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
  }
  .copiar { min-width: 112px; height: 44px; margin-top: 10px; padding: 0 20px; font-size: var(--ds-t-corpo); font-weight: 500; }
  .ok .mapa { display: flex; width: 100%; margin-top: 24px; }
  .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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

  /* ---------- até 760 px: uma coluna; a página rola, o mapa e o véu ficam parados atrás ---------- */
  @media (max-width: 760px) {
    .palco { position: relative; inset: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
    .tela { position: relative; inset: auto; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 0 24px; }
    .marca { position: relative; top: auto; left: auto; align-self: flex-start; margin: 32px -10px 0; }
    .bloco { position: static; display: block; max-width: none; padding: 28px 0 0; overflow: visible; scrollbar-gutter: auto; }
    .bloco-dentro { width: 100%; max-width: 440px; }
    .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)); }
    .credito { position: static; max-width: 440px; margin: 40px 0 0; text-align: left; }
    .atribuicao { position: static; margin: 8px 0 24px; text-align: left; }
    .linha { grid-template-columns: minmax(0, 1fr); }
    .campo input { font-size: 16px; }
    .pagamento label, .copia > span { height: 44px; }
    .cartao { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: 'num num' 'nome nome' 'val cod'; }
    .pix-corpo { flex-direction: column; gap: 16px; }
    .pix-copia { width: 100%; }
  }
  @media (max-width: 359px) {
    .cartao { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'num' 'nome' 'val' 'cod'; }
  }

  /* ---------- movimento reduzido: trocas imediatas, nada desliza ---------- */
  @media (prefers-reduced-motion: reduce) {
    .peca, .copia, .rotulo { transition: none; }
    .menu, .menu[data-aberto] { transform: none; transition: none; }
    .aviso { transition: none; }
  }

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

  /* ---------- motor Mapbox: a reserva e o logotipo ---------- */
  /* 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 canto do mapa é o pé do mapa (mapa-mapbox.css, 7): o logotipo (link de verdade, no Tab) e a atribuição.
     No computador a tela não rola: o pé some como caixa e os dois ficam embaixo à direita, o logotipo na ponta e a
     atribuição à esquerda dele, o crédito logo acima, dentro da camada da tela (antes o logotipo ficava sob ela, sem
     clique). No celular a página rola sobre o mapa parado: o pé fica no fim da página, logo depois do crédito, no fluxo
     (05/10, revisora: preso ao pé da janela, ele cobria os campos do cartão com a página no alto; a imagem do mapa é o
     fundo da página inteira, e o fim dela serve ao crédito). */
  .tela .mapa-pe, .tela .mapa-pe-canto { display: contents; }
  .tela .logo-pe { position: absolute; z-index: 1; right: 32px; bottom: 4px; height: 23px; }
  .tela .mapa-pe .atribuicao { position: absolute; right: 130px; bottom: 3px; max-width: none; white-space: nowrap; color: var(--ds-cor-texto-3); }
  @media (max-width: 760px) {
    .tela .mapa-pe { display: block; position: static; height: auto; margin: 16px 0 24px; }
    .tela .mapa-pe::before { display: none; }
    .tela .mapa-pe-canto { display: flex; position: static; }
    .tela .logo-pe { position: relative; right: auto; bottom: auto; height: 24px; }
    .tela .mapa-pe .atribuicao { position: static; max-width: 272px; white-space: normal; color: var(--ds-cor-texto-2); }
  }