/* ═══════════════════════════════════════════════════════════════════════════
   Ostentei — o salão: balcão (identidade + preço + guichê de lance) à esquerda,
   placar ocupando o resto. Também mora aqui o formulário compartilhado com as
   outras páginas (denunciar, admin, pix carregam esta folha antes da sua).
   Direção: vitrine de joalheria (docs/design-system.md).

   Disciplina que este arquivo respeita:
   · um metal só. Sem prata, sem segunda cor de acento.
   · --ouro-alto aparece EXCLUSIVAMENTE no #1. Se outra coisa usar, o #1 deixa
     de valer — e o #1 é literalmente o produto à venda.
   · sem vermelho de erro. Erro é --marfim com peso maior e barra --ouro.
   · uma ousadia só: o #1 na vitrine iluminada, todo o resto plano.
   · listagem fundador não tem estilo próprio. Não existe seletor para ela.

   Hierarquia de ação, e ela é visível a olho nu:
   · primária   → .botao          ouro sólido, o único bloco preenchido da tela
   · secundária → .fileira__tomar contorno de ouro, texto de ouro, fundo vazio
   · terciária  → .balcao__alternar, .fileira__denunciar: fumaça, sem preenchimento
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Borda de campo. Não é acento novo — é a família do --fio dois passos mais
       clara, o suficiente para o input não se confundir com o fundo do balcão.
       3.1:1 contra --veludo, acima do mínimo de 3:1 de componente de interface. */
    --fio-campo:      #755E52;
    --fio-campo-alto: #9A8175;   /* hover do campo */

    --balcao-largura:   clamp(21rem, 26vw, 25rem);
    --balcao-encolhido: 9.5rem;
}

/* ─── Casca ──────────────────────────────────────────────────────────────── */

/* Usada pelas outras páginas (pix, denunciar, jurídicas). Não mexer. */
.faixa-central {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ouro);
    color: var(--ouro-fundo);
    padding: 0.5rem 1rem;
    font-weight: 600;
    z-index: 20;
}

.pular:focus {
    left: 0;
}

.salao {
    max-width: 96rem;
    margin: 0 auto;
}

/* ─── Balcão ─────────────────────────────────────────────────────────────── */

.balcao {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 0;
}

/* O botão fica ACIMA do wordmark, alinhado à direita. Ao lado dele não cabe:
   "Ostentei." em Bodoni ocupa quase toda a coluna e o botão saía cortado pela
   borda do balcão. Aqui ele nunca disputa espaço com a marca. */
.balcao__topo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.875rem;
}

.balcao__marca {
    align-self: flex-start;
}

.balcao__alternar {
    order: -1;
}

.balcao__marca {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(3rem, 13vw, 4.25rem);
    line-height: 0.92;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--marfim);
}

.balcao__tese {
    font-size: clamp(1rem, 4vw, 1.1875rem);
    font-weight: 500;
    color: var(--marfim);
    margin: 1rem 0 0;
    max-width: 26ch;
}

.balcao__texto {
    color: var(--fumaca);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: 0.75rem 0 0;
    max-width: 46ch;
}

/* ─── Botão de encolher o balcão ─────────────────────────────────────────── */
/* Ação terciária: não compete com Ostentar, e por isso não tem preenchimento
   nem ouro. Só existe onde o balcão é coluna lateral — abaixo de 76rem ele já
   empilha, e encolher uma coluna única não quer dizer nada.                   */

.balcao__alternar {
    display: none;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    background: transparent;
    border: 1px solid var(--fio);
    border-radius: 2px;
    color: var(--fumaca);
    font-family: var(--dado);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.5rem 0.5625rem;
    min-height: 2rem;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.balcao__alternar:hover {
    color: var(--marfim);
    border-color: var(--fio-campo);
}

.balcao__seta {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    transition: transform 200ms ease;
}

/* ─── A placa de preço ───────────────────────────────────────────────────── */
/* É o número que convida, então é o maior dado da coluna — vem antes do
   formulário no olho, mesmo estando depois no fluxo de leitura.                */

.placa {
    margin: 1.75rem 0 0;
    border: 1px solid var(--fio);
    border-left: 2px solid var(--ouro);
    background: var(--vitrine);
    padding: 0.875rem 1rem;
}

.placa__rotulo {
    font-family: var(--dado);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fumaca);
    margin: 0;
}

.placa__valor {
    font-family: var(--dado);
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 500;
    color: var(--ouro);
    line-height: 1.1;
    margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
}

.placa__nota {
    font-size: 0.8125rem;
    color: var(--marfim);
    margin: 0.375rem 0 0;
}

/* ─── Formulário ─────────────────────────────────────────────────────────── */

.balcao__form {
    padding: 1.75rem 0 2.5rem;
}

.secao__titulo {
    font-family: var(--dado);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fumaca);
    margin: 0 0 0.75rem;
}

.form {
    background: var(--vitrine);
    border: 1px solid var(--fio);
    padding: 1.125rem;
    display: grid;
    gap: 0.875rem;
}

.campo {
    display: grid;
    gap: 0.375rem;
}

.campo--duplo {
    grid-template-columns: 1fr;
    gap: 0.875rem;
}

.campo__rotulo {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--marfim);
}

/* Um campo tem que parecer campo: borda mais clara que o fio das superfícies,
   fundo mais escuro que o do balcão, e sombra interna de poço. Sem isso ele se
   confunde com o próprio rótulo — foi a queixa principal do preview. */
.campo__entrada {
    width: 100%;
    background: var(--veludo);
    border: 1px solid var(--fio-campo);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    color: var(--marfim);
    font-family: inherit;
    font-size: 1rem;             /* 16px: abaixo disso o iOS dá zoom no foco */
    padding: 0.75rem;
    border-radius: 2px;
    min-height: 2.75rem;         /* alvo de toque confortável */
    transition: border-color 160ms ease;
}

.campo__entrada:hover {
    border-color: var(--fio-campo-alto);
}

/* O outline global de :focus-visible (app.css) já marca o foco. Aqui a borda
   acompanha, para o campo focado não ficar com dois contornos brigando. */
.campo__entrada:focus-visible {
    border-color: var(--ouro);
    outline-offset: 1px;
}

/* Placeholder sem opacidade: a 0.75 o texto caía para 3.8:1 e reprovava AA. */
.campo__entrada::placeholder {
    color: var(--fumaca);
    opacity: 1;
}

/* Select nativo em fundo escuro não anuncia que abre. Seta própria (Lucide
   chevron-down, o mesmo traço da seta do balcão) e cursor de ponteiro. */
select.campo__entrada {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8C82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.875rem;
}

.campo__moeda {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    background: var(--veludo);
    border: 1px solid var(--fio-campo);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    transition: border-color 160ms ease;
}

.campo__moeda:hover {
    border-color: var(--fio-campo-alto);
}

/* O foco mora no input, mas quem desenha a caixa é o invólucro: o anel tem que
   contornar os dois, senão o R$ fica de fora do foco. O :has espelha o
   :focus-visible do input — com :focus-within o anel apareceria também no
   clique de mouse, e aí este campo destoaria de todos os outros. */
.campo__moeda:focus-within {
    border-color: var(--ouro);
}

.campo__moeda:has(.campo__entrada:focus-visible) {
    outline: 2px solid var(--ouro);
    outline-offset: 1px;
}

.campo__moeda .campo__entrada {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0.25rem;
}

.campo__moeda .campo__entrada:focus-visible {
    outline: none;
}

.campo__prefixo {
    color: var(--fumaca);
    padding-left: 0.75rem;
    font-size: 0.9375rem;
}

.campo__ajuda {
    font-size: 0.75rem;
    color: var(--fumaca);
    margin: 0;
}

.campo--aceite {
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: start;
    font-size: 0.8125rem;
    color: var(--fumaca);
    line-height: 1.5;
}

.campo--aceite input {
    margin-top: 0.15rem;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ouro);
    cursor: pointer;
}

.campo--aceite label {
    cursor: pointer;
}

/* ─── Ação primária ──────────────────────────────────────────────────────── */

.botao {
    background: var(--ouro);
    color: var(--ouro-fundo);
    border: 0;
    border-radius: 2px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.875rem 1.25rem;
    min-height: 3rem;
    cursor: pointer;
    transition: background 160ms ease;
}

/* Clarear com filter em vez de trocar por um ouro mais claro: --ouro-alto é
   exclusivo do #1 e não pode reaparecer num hover de botão. */
.botao:hover {
    filter: brightness(1.08);
}

.botao:active {
    transform: translateY(1px);
}

/* Só no balcão: lá o botão é a largura da coluna e não tem com o que competir.
   Nas outras páginas .botao continua do tamanho do próprio texto. */
.botao--bloco {
    width: 100%;
}

.form__nota {
    font-size: 0.75rem;
    color: var(--fumaca);
    margin: 0;
}

/* Erro sem vermelho: peso maior em --marfim e barra de ouro à esquerda.
   Vermelho quebraria o mundo da vitrine. */
.aviso {
    border-left: 2px solid var(--ouro);
    background: var(--vitrine);
    color: var(--marfim);
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ─── Quadro ─────────────────────────────────────────────────────────────── */

.quadro {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.quadro__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-bottom: 0.75rem;
}

.quadro__titulo {
    font-family: var(--dado);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fumaca);
    margin: 0;
}

.quadro__meta {
    font-family: var(--dado);
    font-size: 11px;
    color: var(--fumaca);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.vazio {
    color: var(--fumaca);
    text-align: center;
    padding: 3rem 0;
}

/* ─── O #1: a vitrine iluminada ──────────────────────────────────────────── */
/* A única ousadia da página. Fio de ouro no topo, brilho radial atrás, número
   em Bodoni grande. Tudo isso é EXCLUSIVO desta listagem.                     */

.vitrine {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #241B18 0%, var(--vitrine) 62%);
    border: 1px solid var(--fio);
    margin-bottom: 1.25rem;
    padding: 1.75rem 1.125rem 1.5rem;
    display: grid;
    gap: 1rem;
}

/* fio de ouro em gradiente, no topo */
.vitrine::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ouro) 22%,
        var(--ouro-alto) 50%,
        var(--ouro) 78%,
        transparent 100%
    );
}

/* Brilho radial ancorado ACIMA do card, e pequeno o bastante para morrer antes
   da faixa de dados. Um glow centrado no meio do card clareava o fundo sob os
   rótulos mono e derrubava o contraste deles para 3.5:1 — abaixo de AA. */
.vitrine::after {
    content: "";
    position: absolute;
    top: -14rem;
    left: 4rem;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(
        circle,
        rgba(245, 214, 123, 0.13) 0%,
        rgba(245, 214, 123, 0.04) 42%,
        transparent 70%
    );
    pointer-events: none;
}

.vitrine > * {
    position: relative;
    z-index: 1;
}

.vitrine__numero {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(3.5rem, 17vw, 6.5rem);
    line-height: 0.8;
    /* Bodoni tem # largo e 1 estreito: a -0.04em do rascunho encavalava os dois
       no tamanho grande, e "#1" é o dado mais caro da página. */
    letter-spacing: -0.005em;
    color: var(--ouro-alto);     /* exclusivo do #1 */
    margin: 0;
}

.vitrine__corpo {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
}

.vitrine__corpo > * {
    min-width: 0;
}

.vitrine__host {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    font-weight: 600;
    color: var(--marfim);
    text-decoration: none;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

.vitrine__host:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.vitrine__titulo {
    font-size: 0.9375rem;
    color: var(--marfim);
    overflow-wrap: anywhere;
}

.vitrine__descricao {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--fumaca);
    max-width: 60ch;
}

.vitrine__pe {
    font-size: 0.75rem;
    color: var(--fumaca);
    margin-top: 0.25rem;
}

.vitrine__dados {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    border-top: 1px solid var(--fio);
    padding-top: 1rem;
}

.dado-bloco {
    display: grid;
    gap: 0.125rem;
}

.dado-bloco__rotulo {
    font-family: var(--dado);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fumaca);
}

.dado-bloco__valor {
    font-family: var(--dado);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--marfim);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dado-bloco__valor--ouro {
    color: var(--ouro);
}

/* ─── Grade do placar ────────────────────────────────────────────────────── */
/* Uma variável de colunas só, usada pelo cabeçalho e por toda fileira — é o que
   mantém o alinhamento de coluna a coluna.                                    */

.grade,
.grade__cabecalho,
.fileira {
    --colunas: 2.75rem 2rem minmax(0, 1fr) 5.5rem 4rem 3.75rem 8.5rem;
    --vao: 0.875rem;
}

.grade__cabecalho {
    display: none;
    font-family: var(--dado);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fumaca);
    border-bottom: 1px solid var(--fio);
    padding: 0 0.875rem 0.5rem;
}

.grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;                    /* o fio entre linhas é o próprio fundo */
    background: var(--fio);
    border: 1px solid var(--fio);
}

/* O platô do meio não pode virar massa uniforme: cada faixa se apresenta, e o
   texto da faixa é o mesmo da microcopy da linha (docs/voz-e-copy.md). */
.faixa-titulo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--dado);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fumaca);
    margin: 1.75rem 0 0.625rem;
}

.faixa-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fio);
}

.fileira {
    background: var(--vitrine);
    padding: 0.875rem;
    display: grid;
    grid-template-columns: 2.75rem 2rem minmax(0, 1fr);
    grid-template-areas:
        "pos icone conteudo"
        "num num   num";
    column-gap: 0.625rem;
    row-gap: 0.625rem;
    align-items: start;
    transition: background 160ms ease;
}

.fileira:hover {
    background: var(--vitrine-2);
}

/* Item de grid nasce com min-width:auto, e auto é o min-content do conteúdo.
   Uma descrição longa vira, sozinha, a largura mínima da página inteira — foi
   exatamente o que estourou o layout em 375px. Zero em todos os filhos. */
.fileira > *,
.fileira__conteudo > *,
.fileira__numeros > * {
    min-width: 0;
}

.fileira__posicao {
    grid-area: pos;
    font-family: var(--dado);
    color: var(--fumaca);
    font-size: 0.8125rem;
    padding-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fileira__icone {
    grid-area: icone;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: var(--veludo);
    border: 1px solid var(--fio);
    border-radius: 2px;
    overflow: hidden;
}

.fileira__icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fileira__inicial {
    font-family: var(--corpo);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fumaca);
    line-height: 1;
}

.fileira__conteudo {
    grid-area: conteudo;
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.fileira__host {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--marfim);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.fileira__host:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fileira__titulo {
    font-size: 0.8125rem;
    color: var(--marfim);
    overflow-wrap: anywhere;
}

.fileira__descricao {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--fumaca);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sem opacity: a 0.85 o texto caía para 4.2:1 sobre --vitrine e reprovava AA. */
.fileira__pe {
    font-size: 0.75rem;
    color: var(--fumaca);
    margin-top: 0.125rem;
}

/* Denunciar mora na linha da microcopy, não na coluna da ação: a coluna da
   direita vende a posição, e é a única coisa que pode chamar atenção ali. */
.fileira__denunciar {
    color: var(--fumaca);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.fileira__denunciar:hover {
    color: var(--marfim);
    border-bottom-color: var(--fio-campo);
}

.fileira__numeros {
    grid-area: num;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-left: 2.625rem;      /* alinha com o texto, não com a posição */
    min-width: 0;
}

.fileira__valor {
    font-family: var(--dado);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--marfim);
    font-variant-numeric: tabular-nums;
}

.fileira__cliques,
.fileira__idade {
    font-family: var(--dado);
    font-size: 0.75rem;
    color: var(--fumaca);
    font-variant-numeric: tabular-nums;
}

/* ─── Ação secundária: tomar a posição de uma linha ──────────────────────── */
/* Contorno de ouro, fundo vazio. Lê-se como controle à primeira vista e mesmo
   assim fica claramente abaixo do bloco sólido de Ostentar. A pílula é a forma;
   .fileira__tomar e .vitrine__tomar só dizem onde ela fica.                   */

/* inline-block, não inline-flex: em flex o "R$ 218" dentro do <span class=dado>
   vira um item separado, o espaço entre ele e o texto some e os dois quebram em
   linhas diferentes. Aqui a altura vem do padding, e o rótulo é uma frase só. */
.pilula {
    display: inline-block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ouro);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(227, 178, 60, 0.42);
    border-radius: 2px;
    padding: 0.875rem 0.75rem;   /* 44px de alvo de toque no celular */
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.pilula:hover {
    border-color: var(--ouro);
    background: rgba(227, 178, 60, 0.09);
}

.fileira__tomar {
    margin-left: auto;
}

.vitrine__tomar {
    justify-self: start;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.8125rem 1rem;
    white-space: nowrap;
}

/* ─── Paginação e rodapé ─────────────────────────────────────────────────── */

.paginacao {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0.25rem 0;
    font-size: 0.875rem;
}

.rodape {
    border-top: 1px solid var(--fio);
    margin-top: 2.5rem;
    padding: 2rem 1.25rem 3rem;
}

.rodape__interno {
    max-width: 96rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
}

.rodape__analytics {
    color: var(--fumaca);
    font-size: 0.8125rem;
    margin: 0;
}

.rodape__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.8125rem;
}

/* ─── 600px pra cima ─────────────────────────────────────────────────────── */

@media (min-width: 37.5rem) {
    .campo--duplo {
        grid-template-columns: 1fr 1fr;
    }

    .vitrine {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding: 2rem 1.5rem;
        column-gap: 1.75rem;
    }

    /* A pílula ganha a linha inteira: com nowrap na coluna estreita do #1 ela
       empurraria o número e espremeria o host. */
    .vitrine__tomar,
    .vitrine__dados {
        grid-column: 1 / -1;
    }
}

/* ─── 76rem pra cima: o salão abre em duas colunas ───────────────────────── */
/* Antes disso o balcão não cabe sem espremer a coluna da listagem a ponto de um
   host longo quebrar em três linhas — e o host é o que se lê primeiro.        */

@media (min-width: 76rem) {
    .salao {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    /* A largura é do próprio balcão, não da trilha do grid: largura de elemento
       transiciona em qualquer navegador, grid-template-columns não. */
    .balcao {
        width: var(--balcao-largura);
        max-width: none;
        margin: 0;
        position: sticky;
        top: 0;

        /* min-height, não height com overflow. A diferença é a regra da casa:
           antes espremer nada do que prender.

           · balcão encolhido, ou tela alta: o conteúdo cabe em 100vh, o balcão
             gruda e o fio da direita desce a tela inteira.
           · balcão aberto numa tela de 900px: o formulário passa de 1200px. Com
             overflow-y:auto ele viraria um painel com barra de rolagem própria e
             o botão Ostentar ficaria escondido abaixo da dobra do rail — a
             pessoa teria que descobrir que aquela coluna rola sozinha. Aqui ele
             simplesmente acompanha a página: rola tudo junto, nada some. */
        min-height: 100vh;
        border-right: 1px solid var(--fio);
        padding: 2.75rem 2.25rem 2rem;
        transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .balcao__alternar {
        display: inline-flex;
    }

    /* Na coluna lateral os dois campos lado a lado ficam com 125px cada e
       "é do Instagram" não cabe no select. Um por linha: o balcão tem altura
       de sobra e a regra da casa é não espremer. */
    .balcao .campo--duplo {
        grid-template-columns: 1fr;
    }

    .quadro {
        max-width: none;
        margin: 0;
        padding: 2.75rem 2.25rem 4rem;
    }

    .grade__cabecalho {
        display: grid;
        grid-template-columns: var(--colunas);
        column-gap: var(--vao);
    }

    .grade__cabecalho span:nth-child(n+4) {
        text-align: right;
    }

    .fileira {
        grid-template-columns: var(--colunas);
        grid-template-areas: "pos icone conteudo valor cliques idade acao";
        column-gap: var(--vao);
        align-items: center;
        padding: 0.625rem 0.875rem;
    }

    /* As três células de número deixam de ser um bloco e viram colunas da
       grade da fileira — é o que alinha valor com valor, clique com clique. */
    .fileira__numeros {
        display: contents;
    }

    .fileira__valor   { grid-area: valor;   text-align: right; }
    .fileira__cliques { grid-area: cliques; text-align: right; }
    .fileira__idade   { grid-area: idade;   text-align: right; }

    /* Aqui o cabeçalho de colunas já diz "cliques"; repetir em toda linha seria
       ruído. Empilhado, sem cabeçalho, a palavra fica. */
    .fileira__cliques-rotulo {
        display: none;
    }

    /* Na fileira densa a pílula encolhe: aqui o ponteiro é mouse, não dedo, e
       o alvo de 44px do celular viraria uma faixa alta demais para a linha. */
    .fileira__tomar {
        grid-area: acao;
        margin-left: 0;
        justify-self: stretch;
        padding: 0.4375rem 0.5rem;
    }

    /* Fora do topo a descrição sai: dez linhas de descrição viram parede de
       texto, e o que se lê de relance é host, valor e clique. */
    .fileira--plato .fileira__descricao {
        display: none;
    }

    .fileira--podio {
        padding: 1rem 0.875rem;
    }

    .fileira--podio .fileira__host,
    .fileira--podio .fileira__valor {
        font-size: 1.0625rem;
    }

    .vitrine {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 2.25rem 2rem;
        column-gap: 2.25rem;
    }

    /* Aqui cabe a terceira coluna: a pílula volta para o lado do host. */
    .vitrine__tomar {
        grid-column: auto;
        justify-self: end;
        align-self: center;
    }

    .vitrine__dados {
        grid-column: 1 / -1;
        gap: 1rem 3rem;
    }

    .vitrine__numero {
        font-size: clamp(5rem, 7vw, 7rem);
    }

    /* ── Balcão encolhido ────────────────────────────────────────────────── */
    /* Some o peso morto — texto de apoio e campos. Fica o gancho: a placa de
       preço e o botão Ostentar, visíveis e clicáveis. Ostentar aqui não envia
       o formulário: reexpande e põe o cursor no primeiro campo (balcao.js).
       Tudo dentro desta media query de propósito — abaixo de 76rem o balcão é
       coluna única e esconder os campos deixaria a página sem formulário.     */

    :root[data-balcao="encolhido"] .balcao {
        width: var(--balcao-encolhido);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    :root[data-balcao="encolhido"] .balcao__topo {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    :root[data-balcao="encolhido"] .balcao__marca {
        font-size: 1.0625rem;
        line-height: 1.1;
    }

    :root[data-balcao="encolhido"] .balcao__alternar {
        justify-content: center;
    }

    :root[data-balcao="encolhido"] .balcao__seta {
        transform: rotate(180deg);
    }

    :root[data-balcao="encolhido"] .balcao__tese,
    :root[data-balcao="encolhido"] .balcao__texto,
    :root[data-balcao="encolhido"] .placa__nota,
    :root[data-balcao="encolhido"] .secao__titulo,
    :root[data-balcao="encolhido"] .aviso,
    :root[data-balcao="encolhido"] .form__nota,
    :root[data-balcao="encolhido"] .balcao__form .campo {
        display: none;
    }

    :root[data-balcao="encolhido"] .placa {
        margin-top: 1.25rem;
        padding: 0.625rem 0.6875rem;
    }

    :root[data-balcao="encolhido"] .placa__valor {
        font-size: 1.25rem;
    }

    :root[data-balcao="encolhido"] .balcao__form {
        padding: 0.875rem 0 1.5rem;
    }

    :root[data-balcao="encolhido"] .form {
        background: transparent;
        border: 0;
        padding: 0;
    }

    :root[data-balcao="encolhido"] .botao {
        font-size: 0.8125rem;
        padding: 0.75rem 0.5rem;
        min-height: 2.75rem;
    }

    /* Os dois rótulos do botão vivem no HTML; quem escolhe é o estado. Assim o
       texto nunca pisca errado entre a pintura e o JS montar. O aria-expanded
       quem acerta é o balcao.js. */
    .balcao__alternar-texto--expandir {
        display: none;
    }

    :root[data-balcao="encolhido"] .balcao__alternar-texto--encolher {
        display: none;
    }

    :root[data-balcao="encolhido"] .balcao__alternar-texto--expandir {
        display: inline;
    }
}

/* prefers-reduced-motion: o bloco global de app.css já zera transition-duration
   com !important, e ele vence esta folha. A transição de largura do balcão e a
   rotação da seta caem junto — o estado troca, sem animação. */