/* ==========================================================================
   TIEZZI — camada sobre o main.bundle.css.
   Só duas coisas: a marca em texto (o logo original era contorno vetorial) e
   os controles de formulário, que o site não tinha. Todos os valores abaixo
   saem do próprio main.bundle.css:
     #1c1c1c tinta · #e3e3e3 fundo · #2354e8 azul · #7c7c7c cinza
     #979797 borda · #3f3f3f texto · #ff715b coral · #1ac6ba turquesa
     Playfair Display / Rubik · easing cubic-bezier(.86,0,.07,1)
   ========================================================================== */

/* ---------- marca ----------
   A fonte do wordmark do Kirkland nao esta no pacote (o logo veio como um unico
   path de contornos). O nome provavel e Septimus / Friz Quadrata / Quadrat
   Serial — todas comerciais e nenhuma instalada aqui. Sao GLIFICAS de serifa
   flamejada, e e por isso que Playfair e Forum erravam o desenho.

   Para escolher a substituta, o SVG foi rasterizado e medido em tres numeros
   independentes de corpo e de tracking:
     haste vertical / cap-height ....... 0,1505
     barra horizontal / cap-height ..... 0,107
     contraste (haste / barra) ......... 1,41

   O contraste foi o que denunciou o erro anterior: na Forum ele e 0,67, ou seja
   INVERTIDO (horizontais mais grossas que verticais). Entre 40 candidatas:
     Copse ...... 2,7 %      Brawler .... 8,7 %
     Eczar ...... 6,3 %      Aleo ...... 13,4 %
   Copse acerta os tres (0,1533 / 0,1113 / 1,38) e e do mesmo genero glifico.
   Substituta proxima, nao a fonte original. */
/* ⚠ A MARCA VIROU IMAGEM, e com ela foram embora duas `@font-face`.
   Isto aqui era texto vivo em Friz Quadrata, com corpo calibrado por
   cap-height, `letter-spacing`, `line-height` e `scaleX(.894)`. Funcionava, mas
   tinha um custo que só aparecia ao carregar: com `font-display: swap` o
   navegador desenha o logo em Georgia e o redesenha quando a Friz chega. Era
   metade do flick do cabeçalho que o Lucca viu em 04/09/2026.

   Agora são dois `<img>` de SVG, como na referência (`logo-white.svg` e
   `logo.svg`): imagem não tem fonte de reserva e não reflui. O desenho sai de
   `scripts/gerar-marca.mjs`, que lê os contornos da própria Friz e aplica o
   MESMO tracking e a MESMA condensação que estavam aqui — a geometria não
   mudou, mudou o meio.

   As `@font-face` da Friz e da Copse saíram porque nenhum texto as usa mais. Os
   arquivos continuam em `images/`: quem os lê agora é `gerar-marca.mjs` e
   `gerar-favicon.mjs`, na hora de gerar a arte, não o navegador.

   A `viewBox` do SVG vai da linha de base ao alto da maiúscula, então a altura
   da imagem É a altura de maiúscula — e a calibragem, que era três contas de
   corpo de fonte, virou um número só. */
.site-header__logo--marca {
  --arte: 16.9px; /* altura de maiúscula na marca estreita do celular */
  display: block;
  height: var(--arte);
  /* `.site-header__logo` do bundle manda `width: 100%`, que servia para a marca
     larga deles preencher a caixa. A nossa é uma palavra curta: a largura tem
     de vir da proporção do desenho. */
  width: auto;
  /* ⚠ O DESENHO E CENTRADO NUMA CAIXA DE 25px, e nao encostado no topo dela —
     o `<img>` da referencia tem `height="25"` fixo com a arte menor dentro,
     entao o navegador centra a arte na sobra. Metade da caixa menos metade da
     arte, e a conta vale em qualquer largura.

     MARGEM, e nao padding: o site usa `box-sizing: border-box`, entao padding
     entraria DENTRO do `height` e comeria a arte — a marca saia 24% estreita,
     porque a largura vinha do que sobrou da altura. */
  margin-top: calc(1.5625rem / 2 - var(--arte) / 2);
}

/* ⚠ O CLIQUE DA MARCA ERA MUITO MAIOR QUE A MARCA, e sobrava tudo à direita.
   Pedido do Lucca em 16/09/2026. Medido antes de mexer: o `<a>` mede 190px no
   celular e 286px de 62em para cima, e o desenho mede 73 e 104 — sobravam 117 e
   182px de área clicável em cima de nada.

   ⚠ A LARGURA DO `<a>` NÃO PODE ENCOLHER, e é por isso que a correção é
   `pointer-events` e não `width`. Ela vem do bundle em quatro degraus
   (11.875em, 13.75em, 16.875em, 17.875em) e SUSTENTA O CABEÇALHO: em
   `/services` e nas outras páginas de listagem o `.site-header__body` é um
   flex, e o `.site-header__brand` entra nele com `flex-shrink: 0` — a largura
   dele é o vão entre a marca e o menu. Encolhendo o `<a>`, o menu inteiro anda
   182px para a esquerda. Provado medindo os dois lados antes de escolher.

   Então a caixa fica onde está, e só deixa de receber clique: o `<a>` não é
   mais alvo, os dois `<img>` voltam a ser. Clique na arte ainda navega, porque
   o evento sobe da imagem para o link; `:hover` também sobe, então o estado do
   link continua vivo; e o teclado nunca passou por aqui — `pointer-events` não
   mexe em foco nem em Enter.

   São DOIS `<img>` (a marca branca e a preta, uma delas absoluta, trocadas
   conforme o fundo), e por isso o seletor é a classe dos dois. */
.site-header__brand { pointer-events: none; }
.site-header__brand .site-header__logo { pointer-events: auto; }

/* ⚠ A MARCA DO RODAPÉ PRECISA DE ALTURA, e não de largura. O pacote manda
   `.site-footer__logo > img { width: 100% }` dentro de uma caixa de
   `max-width: 16.875em` — servia para a marca do Kirkland, que era uma faixa de
   270 por 24. A nossa tem proporção 4,34:1 (a `viewBox` do SVG é 3047,65 por
   702), então ocupando os mesmos 270px de largura ela nasceria com 62px de
   altura: duas vezes e meia o tamanho da do cabeçalho, no pé da página.

   Travando a ALTURA em 24px — que é a mesma da marca do cabeçalho de 48em para
   cima, e a mesma que a do Kirkland tinha aqui — a largura sai da proporção e
   dá 104px. A troca foi pedida pelo Lucca em 17/09/2026, junto com o rodapé em
   português.

   `.site-footer__logo { display: none }` abaixo de certa largura é do pacote e
   continua valendo: no celular o rodapé não mostra marca nenhuma. */
.site-footer__logo > img { height: 1.5rem; width: auto; }

/* ⚠ O LOSANGO DO "VOLTAR" DO PAINEL PRECISA DE MARGEM AUTOMATICA, e a
   referencia nao precisava. Lá o `.showcase__back-icon` é um bloco de 39,4px
   sem margem lateral, encostado à esquerda da caixa do botão — e a caixa era
   dos 41px da palavra "Back", então os dois pareciam centrados por acidente.
   Traduzido para "Voltar" a caixa foi para 51,5px e o desalinho apareceu: 5,4px
   de losango à esquerda do centro da palavra.

   `auto` nos dois lados resolve para qualquer rótulo, e é o mesmo recurso que
   os losangos do rodapé do formulário já usam. */
.showcase__back-icon { margin-left: auto; margin-right: auto; }
/* A quebra é a do `.site-header__brand` no bundle, não uma nossa: é a largura
   da marca que manda no corpo do texto. De 62em para cima a marca ainda
   cresce um pouco (17.875em), mas a arte já bate no teto de 25px da caixa e
   para de crescer — por isso não há uma terceira quebra aqui. */
@media screen and (min-width: 48em) {
  .site-header__logo--marca { --arte: 24px; }
}

/* ---------- formulário dentro do painel de detalhe ----------
   O formulário ocupa exatamente a altura do painel (a mesma `100vh - 2.5em` que
   o site já usa) e se divide em três faixas: cabeçalho e navegação com altura
   natural, e o palco tomando o resto. Assim Voltar/Avançar ficam sempre à vista,
   sem rolar a página — se uma pergunta passar do espaço, ela rola por dentro do
   palco, não a página inteira. */
/* Voltar/Avançar ficam a 45px da base do painel — a MESMA distância a que o
   logo do site fica do topo da página. É uma âncora do próprio layout, não um
   número solto, e vale em qualquer zoom porque tudo escala junto.
   Antes eram 96px (os 80 de padding do painel + 1em do corpo): sobrava faixa
   vazia embaixo e o palco ficava espremido — em viewport de 520px de altura,
   96px vazios contra 86px de palco. */
.showcase-copy.tz-com-formulario { padding-bottom: 2.8125rem; }
.showcase-copy__body.tz-com-formulario { justify-content: flex-start; }
/* Entre o corpo do painel e o formulário há um <div> sem altura e o .rte, que
   quebravam a cadeia de `height: 100%` — sem estes dois, o formulário voltava a
   ter altura de conteúdo e a navegação descia junto com a pergunta. */
.showcase-copy__body.tz-com-formulario > div,
.showcase-copy__body.tz-com-formulario > div > .rte { height: 100%; }
.tz-form { display: flex; flex-direction: column; height: 100%; }
.tz-form__cabecalho, .tz-navegacao { flex: none; }
/* Sem overflow: um recorte aqui cortava a sombra de foco do input (que desce
   ~31px) e, durante a animacao de entrada, o translateY de 20px transbordava a
   caixa e fazia a barra de rolagem piscar. Quem se ajusta agora e o textarea,
   que encolhe para caber (regra mais abaixo). */
.tz-palco { flex: 1 1 auto; min-height: 0; }

.tz-form { font-weight: 300; line-height: 1.5; }
.tz-form__intro { color: #7c7c7c; margin: 0 0 2.5em; }

/* ---------- tela de abertura ----------
   Apresentação idêntica à do texto de uma marquee story (medido em "Unlocking
   Capital Through Rated Solutions"): parágrafos corridos, Rubik 20px/30px,
   30px entre eles, centrados na vertical no painel. Quase tudo já vem de
   graça, porque o formulário é montado dentro do `.rte` — é a mesma caixa que
   recebe a cópia das matérias. Só duas coisas destoavam: o peso 300 do
   formulário (a cópia das matérias é 400) e a centralização, que o
   `.tz-com-formulario` tinha trocado por `flex-start`. O `margin: auto` é o
   mesmo recurso da pergunta ativa — quando o texto é mais alto que o espaço,
   as margens automáticas viram zero e nada some por cima.
   Enquanto a abertura está no ar, cabeçalho e palco saem: sem "Pergunta X de
   N" e sem barra de progresso, porque ainda não se está em pergunta nenhuma.
   Os botões ficam onde sempre estiveram, a 45px da base do painel. */
/* `min-height: 0` + `overflow-y` pela mesma razão do palco: em janela baixa o
   texto rola dentro da própria caixa, sem empurrar Voltar/Avançar para fora. */
.tz-intro {
  font-weight: 400; margin: auto 0; max-height: 100%; min-height: 0;
  overflow-y: auto;
}
/* Mesma entrada das perguntas — a animação reinicia toda vez que o modo de
   abertura volta, que é quando o seletor passa a casar. */
.tz-form--intro .tz-intro { animation: tz-entra .45s cubic-bezier(.86, 0, .07, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .tz-form--intro .tz-intro { animation: none; }
}
.tz-form--intro .tz-form__cabecalho,
.tz-form--intro .tz-palco { display: none; }
.tz-form:not(.tz-form--intro) .tz-intro { display: none; }

/* ---------- cabeçalho: seção + progresso ----------
   ⚠ ESTA MEDIDA MUDOU DUAS VEZES EM 02/09/2026, e a ordem explica o valor.

   Era 2.25em, com a pergunta ainda CENTRADA no palco, o que punha o título do
   campo 165px abaixo do contador. O Lucca pediu que essa distância fosse igual
   à do Avançar até o rodapé, e ela virou 2.8125rem (45px), o mesmo valor do
   `padding-bottom` do `.showcase-copy.tz-com-formulario`. Depois pediu mais
   alto ainda: na altura em que o título "Conte a sua situação" ficava antes.

   Aquela altura vinha de uma regra que só valia para as telas de textarea, e
   era 1.35em. É este o valor agora, e ele vale para TODA tela.

   ⚠ Isso desfaz de propósito a simetria com o rodapé: são ~22px em cima contra
   45 embaixo. Foi escolha dele, com a diferença dita. Se um dia a simetria
   voltar a ser o que se quer, o número a usar é 2.8125rem, e ele tem de
   acompanhar o `padding-bottom` daquele seletor. */
.tz-form__cabecalho { margin-bottom: 1.35rem; }
/* Nas perguntas de mais de uma linha o campo sobe: em vez de ficar centrada no
   palco, a pergunta encosta no topo, e a distância entre "Pergunta X de N" e o
   rótulo do campo passa a ser a mesma que separa o logo de "Dados básicos"
   (27px). Só a margem do cabeçalho separa os dois — antes a centralização
   somava mais ~20px de folga por cima e o campo descia. Toda a folga que era
   dividida em cima e embaixo vai agora para o textarea, que é flexível
   (`flex: 1 1 auto`, mais abaixo) e vira área de digitação. */
/* O `--saindo` entra na conta porque durante os .2s de saída não existe
   pergunta ativa: sem ele o cabeçalho e os botões voltavam ao espaçamento
   largo no meio da troca e pulavam 53px de ida e volta. */
/* ⚠ A EXCEÇÃO DO TEXTAREA SAIU. Ela encolhia esta margem para 1.35em nas
   perguntas de caixa grande, para sobrar altura ao textarea. Não sobrevive à
   regra nova: a distância pedida é a mesma em toda tela, e uma exceção aqui
   faria a pergunta do relato ser a única fora do padrão. O textarea perde
   ~18px de altura, e ele é flexível — encolhe sozinho. */
/* Vale igual em `--ativa` e `--saindo`: o quadro do campo tem que ter o mesmo
   tamanho antes, durante e depois da troca. Se a esticada saísse junto com o
   `--ativa`, o textarea encolheria para a altura das `rows` no instante do
   clique e voltaria a crescer do outro lado — a mudança de tamanho que se via
   na animação. */
/* ⚠ O `:not([data-etapa="pagamento"])` das duas regras abaixo não é capricho.
   Estas regras existem para a pergunta cujo textarea ocupa o palco, e ele está
   escrito no HTML: quando a tela entra, ela JÁ casa com `:has(textarea)`, e a
   animação começa e termina sendo a mesma.

   A tela de pagamento faz o contrário. Ela nasce sem textarea e ganha um
   depois, quando `montarPagamento` injeta o campo do Pix copia e cola. Nesse
   instante estas duas regras passam a casar com ela e a `animation-name` muda
   NO MEIO DO VOO — e trocar a `animation-name` de uma animação em curso a
   REINICIA. Com `fill-mode: both`, ela reinicia no primeiro quadro, que é
   `opacity: 0`. Em aba visível isso é um pisca-pisca; em aba de fundo, onde o
   navegador suspende animações, a tela fica invisível e não volta.
   Achado em 02/09/2026, ao mover o preço para esta tela. Vale para qualquer
   conteúdo injetado numa tela já ativa. */
:is(.tz-pergunta--ativa, .tz-pergunta--saindo):has(textarea):not([data-etapa="pagamento"]) {
  /* ⚠ `margin-top: 10px` REPETIDO AQUI de propósito. Este seletor é mais
     específico que o `.tz-pergunta--ativa` de cima, então um `margin: 0` aqui
     apagaria o respiro só nas telas de caixa grande — e a tela do relato seria
     a única fora de alinhamento com as outras oito. */
  display: flex; flex-direction: column; height: 100%; margin: 50px 0 0;
}
/* Sem deslocamento vertical nestas: a pergunta ocupa o palco inteiro e os
   1.25em que `tz-entra` desce levariam o contador a 3px de Voltar/Avançar.
   Só a opacidade entra — mesma duração e mesmo easing das outras. */
.tz-pergunta--ativa:has(textarea):not([data-etapa="pagamento"]) { animation-name: tz-aparece; }
.tz-form__eyebrow {
  color: #7c7c7c; font-size: .8125em; letter-spacing: .08em; margin: 0 0 .75em;
  text-transform: uppercase;
}
/* Mesma altura das barras do carrossel (.showcase__nav-option): .625em */
.tz-progresso { background: #fff; display: block; height: .625em; width: 100%; }
.tz-progresso__barra {
  background: #505050; display: block; height: 100%; width: 0;
  transition: width .45s cubic-bezier(.86, 0, .07, 1);
}
/* ⚠ A BARRA FECHA COLORIDA NA TELA DA PROPOSTA, e só nela: verde quando o caso
   foi analisado e aprovado, vermelha quando a análise não pôde ser feita.
   Pedido do Lucca em 10/09/2026.

   ⚠ E O VERMELHO TEM SIGNIFICADO, não é decoração de estado de erro. Se o
   cálculo falha, não há proposta, não há cobrança e não há o que pagar — o
   corpo da página não chega a aparecer. A barra é o que conta isso.

   As duas cores já existiam no projeto: o verde é o do tique que existiu no
   campo de anexo, o vermelho é o do X que o substituiu, que é o mesmo do
   asterisco de campo obrigatório. A transição acompanha a da largura, para a
   cor entrar junto com o último passo e não depois dele. */
.tz-progresso__barra--aprovado { background: #1e8e3e; }
.tz-progresso__barra--negado { background: #c0392b; }
.tz-progresso__barra--aprovado,
.tz-progresso__barra--negado {
  transition: width .45s cubic-bezier(.86, 0, .07, 1), background-color .45s ease-out;
}

/* A entrada do que aparece depois da análise: o corpo da página quando a barra
   enche, e o "Pagar" quando a proposta é aberta. É a mesma `tz-aparece` das
   telas — só opacidade, sem deslocamento, porque aqui nada muda de lugar. */
.tz-entrando { animation: tz-aparece .45s cubic-bezier(.86, 0, .07, 1) both; }
/* ⚠ `.75em` E NÃO `.6em`, E O NÚMERO É EMPRESTADO DO EYEBROW.
   Pedido do Lucca em 09/09/2026: a distância de "Pergunta X de N" até a barra
   tem de ser a mesma que existe de "Entrevista" até ela, e a de cima é a que
   manda. Eram 9,75px em cima contra 7,79px embaixo — quase 2px de diferença,
   pequena e visível, porque a barra fica entre as duas e serve de régua.

   Os dois valores casam de verdade e não só no papel: eyebrow e rótulo têm o
   mesmo `font-size` (.8125em → 13px) e o mesmo `line-height` (19,5px), então
   o `em` vale o mesmo nos dois e a caixa de texto tem a mesma entrelinha. Se
   um dia o tamanho de um deles mudar, este `.75em` deixa de casar com o
   `margin-bottom` do outro e vira número solto — os dois andam juntos. */
.tz-progresso__rotulo {
  color: #7c7c7c; font-size: .8125em; letter-spacing: .06em; margin: .75em 0 0;
  text-transform: uppercase;
}

/* ---------- uma pergunta por vez ----------
   O palco ocupa o espaço que sobra entre cabeçalho e navegação (ver acima) e
   centra a pergunta nele. Assim uma pergunta curta não achata o formulário nem
   puxa o rodapé para cima: fica no meio do espaço de sempre.
   A entrada vem de baixo; a saída sobe e some, mais rápida, para a troca não
   parecer lenta. */
/* Centralização com `margin: auto`, não com `align-items: center`: quando a
   pergunta é mais alta que o palco, margens automáticas viram zero e nada é
   cortado. Com `align-items: center` o excedente sai pelos DOIS lados e o topo
   da pergunta fica inalcançável — foi o que apareceu em telas mais baixas. */
/* ⚠ A ROLAGEM VIVE AQUI, e não em cada pergunta.

   Ela nasceu em `.tz-pergunta--ativa`, como `max-height: 100%` mais
   `overflow-y: auto`, para conter a pergunta alta que PINTAVA POR CIMA da
   navegação. Continha, e criava outro defeito: `overflow-y: auto` desenha a
   barra inteira por UM pixel de transbordo, e um pixel é o que sobra de
   arredondamento de subpixel quando a borda de 1px do gatilho do dropdown
   renderiza como 0,667px. Medido em 02/09/2026 na primeira pergunta:
   `scrollHeight` 129 contra `clientHeight` 128, dentro de um palco de 385px
   onde não havia transbordo nenhum. A barra aparecia ao lado de um campo que
   cabia folgado.

   Quem tem altura fixa é o palco, então é o palco que rola. Uma pergunta de
   128px num palco de 385 não produz barra alguma; uma de 600px rola aqui
   dentro, e a navegação, que está FORA do palco, continua intocada. */
.tz-palco { display: flex; flex-direction: column; overflow-y: auto; }
.tz-pergunta { display: none; width: 100%; }
.tz-pergunta--ativa {
  animation: tz-entra .45s cubic-bezier(.86, 0, .07, 1) both;
  display: flex;
  flex-direction: column;
  /* ⚠ `0`, e não `auto 0`. A centralização vertical no palco era o que jogava o
     campo para o meio da tela: com o palco de 385px e a pergunta de 128, ela
     nascia 165px abaixo do contador em vez dos 45 pedidos. Encostada no topo, a
     única coisa que separa o contador do título é a margem do cabeçalho, que é
     onde a medida agora mora.

     ⚠ E os 50px vieram depois, em 02/09/2026, quando o cabeçalho inteiro saiu
     e a pergunta passou a encostar no topo do painel. Foram dois pedidos
     seguidos do Lucca, 10px e depois mais 40, ajustados a olho: não é medida
     derivada de nenhuma outra, então não há nada a manter em sincronia. */
  margin: 50px 0 0;
}
.tz-pergunta--saindo { animation: tz-sai .2s ease-out both; display: block; }

/* ---------- de 1000px para cima: TODAS as telas nascem no topo do palco -----
   Pedido do Lucca em 06/09/2026: "a altura padrão dos inputs deve ser a mesma
   do input Conte a sua situação".

   ⚠ ISSO DESFAZ A CENTRALIZAÇÃO QUE ELE PEDIU EM 02/09/2026, e o motivo é que
   ela nunca valeu para todas as telas. A do relato tem `height: 100%` (o
   textarea absorve a folga do palco), e item de flex que já ocupa o container
   não tem folga para a margem `auto` dividir: ela computa ZERO. Ou seja, de
   1000px para cima o relato sempre nasceu no topo e as outras oito no meio —
   e era exatamente esse degrau que fazia o campo pular de altura ao avançar.

   Como a tela do relato não pode ser centrada (ela precisa preencher o palco
   para o textarea crescer), alinhar as nove só era possível num sentido: todas
   no topo, que é onde ela já estava.

   ⚠ ESTA FAIXA ERA `min-width: 62.5em`, E VIROU `1000px` EM 10/09/2026. O par
   dela (`max-width: 62.4375em`, 999px) virou `999.98px` no mesmo dia, e é a
   segunda vez que este arquivo passa por isso: a primeira foi em 767/768, e o
   argumento é o mesmo, escrito lá embaixo por extenso. `em` depende do tamanho
   de fonte raiz e do zoom, e a fronteira escorrega.

   ⚠ O SINTOMA FOI MEDIDO, e não deduzido: numa janela de 999px, `max-width:
   62.4375em` dava FALSO e `min-width: 1000px` também. Nenhuma das duas faixas
   valia, e a tela do fim aparecia com o texto centralizado na vertical e sem
   os 80px do topo — o desenho do desktop numa largura que devia ter o da
   matéria. O Lucca viu isso em 10/09/2026 e pediu as margens da notícia "de
   1000px para baixo": era este vão de um pixel.

   ⚠ E SÓ AQUI EM CIMA. Abaixo de 1000px o formulário é documento em fluxo:
   não existe palco de altura fixa para centrar coisa nenhuma, e o respiro do
   topo é o `padding` de 80px do miolo, como na matéria. */
@media screen and (min-width: 1000px) {
  .tz-pergunta--ativa,
  :is(.tz-pergunta--ativa, .tz-pergunta--saindo):has(textarea):not([data-etapa="pagamento"]) {
    /* `0`, e não os 50px de baixo de 1000px: aqui o alvo é a altura em que a
       tela do relato já nascia, e ela nasce colada no topo do palco. */
    margin: 0;
  }


  /* ---- a troca de tela acontece no lugar da tela ----
     ⚠ ERA A CENTRALIZAÇÃO QUE ATRAPALHAVA A SI MESMA. Durante os 200ms da
     troca as duas perguntas existem juntas no palco, e com duas caixas em
     fluxo as margens `auto` dividem a folga entre elas: a que entra nascia
     encostada no alto, animava lá, e só depois — quando a que sai era
     removida — voltava para o meio. Dava o pulo para debaixo do logo que o
     Lucca viu.

     A que SAI passa a flutuar: fora do fluxo, o palco volta a ter uma caixa
     só e a que entra nasce onde vai ficar.

     ⚠ E ELA SAI NO TOPO, como a que entra. Enquanto a entrada era centrada,
     esta precisava de `top: 50%` mais `translateY(-50%)` e de uma animação
     própria (`tz-sai-centrado`) que carregasse os -50% nos keyframes — senão
     ela pulava para o topo no primeiro quadro, porque `transform` é o mesmo
     canal que a animação usa. Com a entrada ancorada no topo (06/09/2026),
     `top: 0` basta e a `tz-sai` comum serve. Se a centralização voltar, as
     duas coisas voltam JUNTAS: entrada e saída são a mesma decisão, e mudar
     uma sozinha põe a tela que sai no meio enquanto a que entra está no alto. */
  .tz-palco { position: relative; }
  .tz-pergunta--saindo {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* ⚠ SEM VOLTAR NO RODAPÉ, por pedido do Lucca em 02/09/2026: acima de
     1000px quem volta é o Back do painel, no alto à esquerda.

     Ele é escondido, não removido — e isso é de propósito. O Back não sabe
     andar na entrevista; o que ele faz é fechar o painel. Quem sabe voltar
     uma pergunta é este botão, com todo o estado que isso envolve (porteiros,
     etapas, a volta para a abertura). Então o Back passa a CLICAR nele
     quando há para onde voltar, e a fechar o painel quando não há — ver
     `wireShowcaseDetail` em restore-interactions.js. */
  .tz-navegacao [data-voltar] { display: none; }
}
@keyframes tz-entra {
  from { opacity: 0; transform: translateY(1.25em); }
  to   { opacity: 1; transform: none; }
}
@keyframes tz-sai {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-.75em); }
}
@keyframes tz-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-pergunta--ativa, .tz-pergunta--saindo { animation: none; }
  .tz-progresso__barra { transition: none; }
}

/* ⚠ A ORDEM VISUAL É TÍTULO, CAMPO, SUBTÍTULO — e no HTML o subtítulo
   continua entre os dois. Pedido do Lucca em 02/09/2026, resolvido por
   `order` e não mexendo nos sete moldes: no DOM a dica segue logo depois do
   rótulo, que é onde ela deve estar para quem usa leitor de tela — a
   explicação é lida junto da pergunta, antes de o campo receber o foco.
   Trocar a ordem no HTML mudaria as duas coisas de uma vez; trocar por
   `order` muda só a de cima. */
.tz-campo { display: flex; flex-direction: column; margin-bottom: 1.75em; }
/* ⚠ SEM ESTA LINHA, O `hidden` DO HTML NÃO ESCONDE NADA AQUI. O atributo
   `hidden` só vale porque o navegador traz `[hidden]{display:none}` na folha
   DELE, e folha do navegador perde para qualquer regra de autor: o
   `display: flex` da linha acima vence, e a caixa aparece com o atributo
   posto.

   Quem paga são as caixas condicionais — as que a opção "Outro" abre, em cinco
   moldes (`autorProfissaoOutro` no `jef`, `tipoCasoOutro` no `jec`,
   `beneficioOutro` no INSS, `tipoContratoOutro`, `tipoAcordoOutro`). Elas
   nascem com `hidden` e devem aparecer só depois da escolha; sem isto ficavam
   à mostra o tempo todo, pedindo um texto que ninguém tinha pedido.

   Achado em 09/09/2026, quando o Lucca viu a caixa de profissão aberta antes
   de ele escolher "Outro". É a mesma armadilha que o `.tz-btn[hidden]` mais
   abaixo já desarma para os botões. */
.tz-campo[hidden] { display: none; }
.tz-campo__contador { order: 1; }
.tz-campo__dica { order: 2; }
/* ---------- o freio: a explicação das telas de porteiro, em vermelho -------
   É uma `.tz-campo__dica` comum — mesmo tamanho, mesmo peso, mesma distância do
   campo — e esta classe só troca a cor. Ela fica nas duas telas que podem
   encerrar a entrevista, e fica o TEMPO TODO, respondida ou não.

   ⚠ FOI O QUARTO DESENHO EM UM DIA, e os três anteriores merecem registro
   porque cada um foi descartado por um motivo diferente (Lucca, 10/09/2026):

     tela inteira ..... a recusa tomava a tela e devolvia a pessoa para a
                        abertura. Quem marcou por engano perdia a pergunta de
                        vista e só descobria o conserto clicando em Voltar.
     linha embaixo .... a recusa aparecia sob a explicação em cinza. Duas
                        frases sobre o mesmo assunto, empilhadas.
     linha no lugar ... a recusa substituía a explicação quando a resposta não
                        servia. Melhor, e ainda escondia a regra de quem ainda
                        ia responder.

   O que ficou é o mais simples dos quatro: nessas telas o requisito e a recusa
   são a mesma informação, então há UMA frase, e ela está sempre à vista. O JS
   não escreve nada aqui — só decide se o botão passa.

   ⚠ O `.tz-form` NA FRENTE É O QUE FAZ O VERMELHO VALER. As duas classes estão
   no mesmo elemento e pesam igual (0,1,0), então a disputa seria por ordem — e
   `.tz-campo__dica`, com o `color: #7c7c7c`, está escrita LÁ EMBAIXO, depois
   desta. Sem o prefixo o freio sai cinza. Visto na tela assim em 10/09/2026.

   O vermelho é o `#c0392b` de sempre — o asterisco, o aceite que falta. */
.tz-form .tz-campo__freio { color: #c0392b; }
.tz-pergunta .tz-campo:last-child { margin-bottom: 0; }
/* ⚠ PESO 400, e nao 500. O rotulo era o unico ponto do formulario acima do
   peso do corpo, e o Lucca pediu para afinar em 02/09/2026. Foi para 400 e
   nao para 300 de proposito: a dica e 300, e com os dois no mesmo peso a
   pergunta deixaria de se distinguir da explicacao. 400 e o peso do corpo
   das materias do site (`.rte`), entao a hierarquia continua de pe usando
   dois pesos que o site ja usa.

   ⚠ E `1rem`, PELO MESMO MOTIVO DA DICA. Sem tamanho proprio o rotulo
   herdava a escala do `.rte`, que e 20px no desktop e 16 no celular — ou
   seja, ele batia com a dica no celular e ficava 25% maior no desktop. O
   Lucca pediu os dois no mesmo tamanho; `rem` ancora na raiz e da 16px nas
   duas larguras.

   ⚠ AS DUAS FOLGAS ESTAO TROCADAS DE PROPOSITO. Quando o subtitulo desceu
   para baixo do campo, os 32px que o separavam da caixa vieram para ca e o
   subtitulo ficou com .5rem — e o Lucca inverteu no mesmo dia: titulo COLADO
   no campo (.5rem, os 8px que o subtitulo tinha) e subtitulo AFASTADO (2rem,
   os 32 que eram do titulo).

   E faz sentido de leitura: o titulo pertence ao campo, e cola nele; o
   subtitulo e nota sobre o conjunto, e se descola. Os 32px continuam sendo
   os do `.jumpto-nav` da pagina de offices — mudou de lado, nao de valor. */
.tz-campo__rotulo {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: .5rem;
}
.tz-campo__obrigatorio { color: #c0392b; margin-left: .15em; }
/* ⚠ MEDIDO NO `.page-heading__summary` da página de offices — o parágrafo
   "Our approximately 4,000 attorneys…": 16px, line-height 28px, peso 300.

   `rem` porque o formulário roda numa escala de 20px: em `em`, 1 daria 20px
   e nem o tamanho nem a distância bateriam. O peso 300 já vem herdado do
   `.tz-form`, e está escrito aqui só para não depender disso.

   Os 32px que este bloco tinha EMBAIXO agora estão EM CIMA: é a distância do
   pé do campo até a explicação. O rótulo ficou com os .5rem que eram daqui
   (ver a regra dele acima, onde a troca está explicada). */
.tz-campo__dica {
  color: #7c7c7c;
  display: block;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  margin-top: 2rem;
}

/* ---------- o campo de anexo ----------
   Vazio, o ícone é uma seta de baixar e não faz nada: quem recebe o clique é o
   input invisível por cima, que cobre a caixa toda. Com arquivo escolhido ele
   vira lixeira e passa a ser botão.

   ⚠ OS DOIS SÃO SVG, escritos por `iconeBaixar` e `iconeLixeira`, em
   restore-interactions.js. O bundle tem um `icon-download` (estava aqui até
   09/09/2026) e não tem lixeira nenhuma; a que existiu desenhada com bordas e
   pseudo-elementos saiu no mesmo pedido. O que fica aqui é só posição, tamanho
   e área de clique.

   ⚠ A ÁREA DE CLIQUE É MAIOR QUE O DESENHO, e é o `padding` que faz isso: o
   ícone tem ~17px, e dedo pede 24. O `right` desconta o padding para o desenho
   continuar a 1.375em da borda, alinhado com a setinha dos dropdowns. */
/* ⚠ O BOTÃO DE DENTRO DO CAMPO NATIVO TAMBÉM PRECISA DA MÃOZINHA, e é aqui que
   uma coisa invisível estraga o cursor. O `<input type=file>` está a
   `opacity: 0`, mas continua DESENHANDO as próprias partes por baixo: um botão
   ("Escolher arquivos") à esquerda e o nome do arquivo ao lado. Invisíveis, e
   ainda assim é sobre elas que o ponteiro passa.

   O `cursor: pointer` do `.tz-select__nativo` vale para o input e NÃO alcança
   esse botão interno, que o navegador mantém em `default`. Medido no próprio
   campo: input `pointer`, `::file-selector-button` `default`. Como o botão fica
   à ESQUERDA, bem onde o nosso rótulo é desenhado, a mãozinha virava setinha
   exatamente ao passar sobre a palavra. O Lucca viu isso em 09/09/2026.

   ⚠ O `-webkit-` NÃO É SOBRA. `::file-selector-button` é o nome padrão (Chrome
   89, Firefox 82, Safari 14.1); o alias antigo atende o Safari anterior a
   isso, que é o mesmo público que já não tem o `DataTransfer` da pilha. */
.tz-select__nativo::file-selector-button { cursor: pointer; }
.tz-select__nativo::-webkit-file-upload-button { cursor: pointer; }

.tz-arquivo__acao {
  color: inherit;
  line-height: 0;
  padding: .5em;
  position: absolute;
  right: .875em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.tz-arquivo__acao svg {
  display: block;
  height: 1.05em;
  width: 1.05em;
}
/* ⚠ `z-index: 3` PORQUE O INPUT ESTÁ EM 2. Sem subir acima dele, o clique na
   lixeira cairia no campo de arquivo e abriria a janela de escolher — o oposto
   do que ela promete. É só neste estado: com a seta, o alvo tem de continuar
   sendo o input. */
/* ⚠ VERMELHO, E O SELETOR REPETE A CLASSE por causa do `color: inherit` da
   regra de cima: as duas valeriam (0,1,0) e a disputa seria por ordem. Com
   (0,2,0) o vermelho ganha sem depender de quem está escrito antes.

   ⚠ `#c0392b` E NAO `#ff715b`. O coral é o vermelho do bundle, mas ele vive
   como FUNDO ou fio de aviso, sobre um painel quase branco (`.tz-aviso`, com
   `#fff8f6`): sobre o `#e3e3e3` do miolo ele dá 2,11 de contraste, e um ícone
   pede 3. O `#c0392b` já é o vermelho DESTE formulário — é o asterisco de
   campo obrigatório — e dá 4,24. Mesma família de significado (atenção), e o
   único dos dois que se enxerga aqui. */
.tz-arquivo__acao.tz-arquivo__acao--limpar {
  color: #c0392b;
  cursor: pointer;
  z-index: 3;
}
/* ⚠ O NOME DO ARQUIVO EM PRETO, e é a única coisa que separa este campo do
   dropdown. Lá, respondido ou não, o texto é azul (decisão do Lucca em
   08/09/2026); aqui ele pediu o contrário em 09/09: escolhido vira preto.

   E faz sentido no que cada um é. No dropdown o texto é sempre um rótulo
   nosso, escrito por nós; aqui, escolhido, ele passa a ser o nome do arquivo
   DA PESSOA — conteúdo, e não convite. O preto é o do site, o mesmo dos
   títulos. */
.tz-arquivo .tz-select__valor:not(.tz-select__valor--vazio) { color: #1c1c1c; }
/* ⚠ E A CAIXA INTEIRA ESCURECE JUNTO: borda e lixeira, e não só o nome. Pedido
   do Lucca em 09/09/2026, e é o que faz o campo respondido se ler como um
   bloco, em vez de um nome preto dentro de uma moldura azul.

   O `color` é o que pinta a lixeira: os dois ícones são SVG com
   `stroke: currentColor`, então mudar a cor do gatilho basta.

   ⚠ A CLASSE VEM DO JS, e não de um `:has()`. O `.tz-arquivo--cheio` é posto
   por `pintar`, na mesma função que troca o ícone e o texto — três coisas que
   mudam juntas e por isso mudam no mesmo lugar. Um `:has()` aqui espalharia a
   mesma decisão por dois arquivos. */
.tz-arquivo--cheio .tz-select__gatilho {
  border-color: #1c1c1c;
  color: #1c1c1c;
}
/* Um campo de anexo debaixo do outro (frente e verso) precisa de ar entre os
   dois; sozinho, a folga viria do `.tz-campo` e ficaria dobrada. */
.tz-arquivo + .tz-arquivo { margin-top: .5rem; }

/* ---------- o quadro da proposta ----------
   Mesma caixa dos campos de anexo, e de propósito: quem chega aqui já viu
   aquele desenho nas telas de documento, e reconhece que é para clicar. O que
   muda é o que o clique faz — lá abre a janela de arquivos, aqui abre o PDF
   noutra aba.

   ⚠ É UM `<a>`, e por isso precisa das linhas abaixo: âncora vem com sublinhado,
   com a cor de link do bundle e com a TRANSIÇÃO do bundle, e as três
   atravessariam o desenho do campo. O resto (borda, altura, recuo, caixa alta)
   vem do `.tz-select__gatilho`, como nos anexos.

   ⚠ O `.tz-form` NA FRENTE É O QUE FAZ AS TRÊS VALEREM. Sozinha, esta regra
   pesa (0,1,0) e `.rte a` pesa (0,1,1): quem mandava na cor e na transição era
   o link de artigo, e não isto aqui. A cor passava despercebida porque o azul
   dos dois é o mesmo `#2354e8` — coincidência, não acerto. A transição não
   passava: medida em 10/09/2026, o quadro herdava `color, background-color` do
   bundle, então no hover a cor ia suave e a BORDA e a SOMBRA saltavam de uma
   vez. O Lucca pediu o gesto do dropdown, e o gesto inclui o tempo.

   ⚠ AQUI DIZIA `color: inherit`, e a troca é o preço de a regra passar a ganhar.
   Enquanto ela perdia, `inherit` não fazia nada e o azul vinha do `.rte a`; ao
   ganhar, `inherit` passou a valer de verdade — e o que ele herda é o cinza
   `#3f3f3f` do corpo do formulário, não o azul do campo. O `#2354e8` está
   escrito por extenso porque é isso que ele é: o mesmo azul do
   `.tz-select__gatilho`, repetido aqui como as outras regras de estado deste
   arquivo repetem o `#1c1c1c`. */
.tz-form .tz-proposta__link {
  color: #2354e8;
  text-decoration: none;
  transition: color .35s cubic-bezier(.86, 0, .07, 1),
              border-color .35s cubic-bezier(.86, 0, .07, 1),
              box-shadow .35s cubic-bezier(.86, 0, .07, 1);
}
/* ⚠ O HOVER É O DO DROPDOWN, e não o do bundle (pedido do Lucca, 10/09/2026).
   Sem as regras abaixo quem manda aqui é `.rte a:hover`, o link de artigo: ele
   leva o quadro inteiro para o verde-água `#1ac6ba`, ícone junto, porque o SVG
   é `stroke: currentColor`. Um campo que troca de família de cor ao passar o
   mouse não se lê como os outros campos da entrevista — lá o gesto é sempre o
   mesmo: escurece e ganha sombra.

   ⚠ O `.tz-form` NA FRENTE NÃO É ENFEITE. `.tz-proposta__link:hover` pesa
   (0,2,0) e `.rte a:hover` pesa (0,2,1); a disputa se decide no `a`, e o do
   bundle ganha. Com o `.tz-form` a nossa vai a (0,3,0) e vence sem depender de
   quem está escrito antes.

   ⚠ HOVER SÓ A PARTIR DE 768px, como no dropdown: no toque o navegador dispara
   `:hover` e o deixa GRUDADO até se tocar noutro lugar.

   ⚠ E O TECLADO PINTA POR `:focus-visible`, e não por `:focus` como o dropdown.
   Clicar aqui abre o PDF NOUTRA ABA e o link continua focado nesta — com
   `:focus` o quadro ficaria preto e aceso para sempre depois do clique, que é o
   mesmo defeito que o campo de anexo teve em 09/09/2026. E é por isso que o
   `outline` do navegador fica de pé aqui, ao contrário do dropdown: ele só
   aparece para quem chega por Tab, e nunca depois de um clique, que era a razão
   de apagá-lo lá. */
@media screen and (min-width: 768px) {
  .tz-form .tz-proposta__link:hover {
    border-color: #1c1c1c;
    box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15);
    color: #1c1c1c;
  }
}
.tz-form .tz-proposta__link:focus-visible {
  border-color: #1c1c1c;
  box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15);
  color: #1c1c1c;
}

/* ---------- a pilha de anexos ----------
   Nos campos que aceitam vários, o escolhedor fica no lugar, sempre vazio, e
   cada arquivo entra numa linha abaixo. As linhas usam a MESMA classe da caixa
   do campo (`.tz-select__gatilho`), então borda, altura e recuo não se repetem
   aqui — o que muda é a cor, que é a de campo respondido, e o cursor.

   ⚠ ELAS NÃO SÃO CAMPO. Não há input por baixo: o arquivo já está guardado no
   escolhedor de cima, e a linha é só o que se vê dele. Por isso `cursor:
   default` — clicar no meio da linha não deve abrir janela nenhuma; só a
   lixeira, na ponta, faz alguma coisa.

   ⚠ E O `.tz-form` NOS DOIS ÚLTIMOS SELETORES é o de sempre: `.rte ul` e
   `.rte li` (do bundle) valem (0,1,1) e trariam recuo de 32px e marcador
   redondo para dentro da pilha. */
/* ⚠ O QUE SEPARA O CAMPO DA PILHA É SÓ ESPAÇO, e ele vale exatamente o DOBRO
   do que separa um anexo do outro: 16px contra 8. Pedido do Lucca em
   09/09/2026, no lugar de uma divisória de 1px que durou meia hora — o fio
   dizia a mesma coisa, e dizia alto demais numa tela que já tem três caixas
   com borda.

   ⚠ E O DOBRO É A RELAÇÃO, não o número. Os dois valores saem daqui e da
   margem do `.tz-anexos__item`, logo abaixo; mexer num sem o outro desfaz o
   que ele pediu, que é a proporção e não o 16. */
.tz-anexos {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
/* ⚠ VAZIA, ELA NÃO OCUPA NADA. A `<ul>` fica no DOM desde que a tela nasce, e
   sem isto o `margin-top` abriria um vão embaixo de um campo sem anexo
   nenhum — espaço separando coisa nenhuma de coisa nenhuma. */
.tz-anexos:empty { margin: 0; }
/* ⚠ O SELETOR CARREGA O `.tz-select__gatilho` PELA MESMA RAZÃO DA LIXEIRA: as
   duas classes valem (0,1,0), e a regra do gatilho mora ~300 linhas abaixo
   desta, então o azul dela ganhava por ordem e as linhas da pilha saíam com a
   cor de campo VAZIO — dizendo "escolha" ao lado de um arquivo já escolhido. */
.tz-select__gatilho.tz-anexos__item {
  border-color: #1c1c1c;
  color: #1c1c1c;
  cursor: default;
  display: block;
}
.tz-form .tz-anexos { list-style: none; margin-left: 0; padding-left: 0; }
.tz-form .tz-anexos__item { margin: 0 0 .5rem; }
.tz-form .tz-anexos__item:last-child { margin-bottom: 0; }

/* ---------- o roteiro de onde baixar um documento ----------
   Só duas telas o usam (carta negativa e CNIS), e ele vive DENTRO de um
   `.tz-campo__dica` — então corpo, cor e entrelinha já vêm de lá e não se
   repetem aqui. O que se declara é só o que uma lista precisa.

   ⚠ `<ol>` E NÃO `<ul>`: são passos em ordem, e a numeração é a informação.
   O `padding-left` de 1.35em é o que cabe um "6." sem o texto encavalar.

   ⚠ E O RECUO NÃO VEM DO `.rte`. Aquele bloco dá `margin-left: 1em` mais
   `padding-left: 1em` a toda lista (é do bundle, e ganha de nome de classe
   sozinho), o que jogaria o roteiro 32px para dentro e o desalinharia do
   título do campo. Por isso o seletor carrega o `.tz-form` — é a mesma
   armadilha, e a mesma saída, do cartão que existiu na tela do veredito. */
.tz-passos__titulo { margin: 0 0 .5em; }
.tz-form .tz-passos {
  list-style: decimal;
  margin: 0;
  padding-left: 1.35em;
}
/* A lista dos "Documentos diversos" não é sequência: marcador redondo, e não
   número. O recuo é o mesmo, para as duas se lerem iguais na página. */
.tz-form .tz-passos--soltos { list-style: disc; }
.tz-form .tz-passos li { margin: 0 0 .35em; }
.tz-form .tz-passos li:last-child { margin-bottom: 0; }
.tz-passos__nota { margin: 1em 0 0; }

/* Borda, foco e placeholder vêm do campo de busca da landing
   (`.searchbox__input`): borda 1px #2354e8, cor #3f3f3f, peso 300, transição de
   .35s no easing do site e, no foco, borda #3f3f3f com
   `box-shadow: 0 6px 20px 5px rgba(0,0,0,.15)`.
   O CORPO não vem de lá: os 1.875em do `.site-search .searchbox__input` são
   para a cortina de busca em tela cheia e ficam enormes num formulário. */
.tz-campo__controle {
  background: #fff;
  border: 1px solid #2354e8;
  color: #3f3f3f;
  font-family: Rubik, sans-serif;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.4;
  outline: none;
  padding: .8em 1em;
  transition: border-color .35s cubic-bezier(.86, 0, .07, 1),
              box-shadow .35s cubic-bezier(.86, 0, .07, 1);
  width: 100%;
}
/* ⚠ SEM SOMBRA. O foco pinta só a borda. A sombra
   `0 6px 20px 5px rgba(0,0,0,.15)` saiu por pedido do Lucca em 02/09/2026 —
   ela vinha do campo de busca da landing, e num formulário de nove telas
   piscava a cada campo. Os BOTÕES continuam com ela: lá é o comportamento do
   `.button-primary` da referência, e não foi isso que se pediu para tirar. */
/* ⚠ O FOCO FECHA NO PRETO DO SITE, e não num cinza qualquer. `#1c1c1c` é a
   cor que o `body` pinta atrás de "Conte-nos o seu caso" — o mesmo fundo do
   `.showcase-panel__figures`. Antes era `#3f3f3f`, herdado do campo de busca
   da landing; a pedido do Lucca em 06/09/2026 a borda passa a terminar na cor
   do painel, de modo que o campo em foco se ancore no fundo da página em vez
   de parar num tom intermediário que não existe em lugar nenhum do desenho.
   O `#3f3f3f` continua no TEXTO: lá ele é leitura, não moldura, e cinza escuro
   sobre branco cansa menos que preto cheio. */
.tz-campo__controle:focus { border-color: #1c1c1c; }

/* ⚠ O PLACEHOLDER SAIU DO `#3f3f3f` EM 19/09/2026, a pedido do Lucca: "deixe o
   placeholder com a cor de placeholder mesmo". Ele tinha a MESMA cor do texto
   digitado, herdada da linha acima, e o resultado era um campo que parecia
   preenchido — ninguém distingue sugestão de resposta quando as duas são do
   mesmo cinza.

   ⚠ O `#7c7c7c` NÃO É COR NOVA: é o cinza que o exemplo do relato já usava
   dentro da moldura `.tz-campo__escrita` (tiezzi-teste.css), e era exatamente
   ele que fazia aquele exemplo se ler como exemplo. Agora vale para todo campo.

   ⚠ E O `opacity: 1` FICA: sem ele o Firefox aplica a opacidade dele por cima
   da cor e o texto some. */
.tz-campo__controle::placeholder { color: #7c7c7c; opacity: 1; }
/* ⚠ CAMPO DE UMA LINHA TEM A ALTURA DO DROPDOWN (Lucca, 08/09/2026), e a conta
   está aqui porque as duas caixas não se encontravam sozinhas — mediam em
   unidades diferentes:

     .tz-select__gatilho    font-size 1rem  · line-height 1.1 · padding 1.0714285714em
     .tz-campo__controle    font-size 1em   · line-height 1.4 · padding .8em

   O `1em` do campo herda o corpo do painel, que é 20px no desktop e 16px no
   celular; o `1rem` do dropdown é sempre 16. Media: 53,2px o dropdown contra
   49,3 no celular e 61,3 no desktop. Não era um ajuste, eram dois.

   A altura vem da conta DELE, em `rem`, então vale em qualquer largura:
   1.1 de linha + 2 × 1.0714285714 de padding = 3.2428571428rem, mais as duas
   bordas de 1px que os dois declaram igual.

   ⚠ TENTEI ANTES COPIAR OS INGREDIENTES — `line-height: 1.1rem` e o mesmo
   padding — para que a soma batesse parcela a parcela, sem supor a borda. Não
   funciona em `<input>`: o navegador NÃO deixa a linha ficar menor que o line
   box natural da fonte. Com 20px de corpo ele trava em 24px, e o campo media
   59,6 contra 53,2 do dropdown. O `<select>` obedecia; o `<input>`, não. Por
   isso a altura é explícita.

   `padding` vertical zerado porque a altura passa a mandar: o navegador
   centraliza sozinho a linha única. O horizontal fica como estava — o pedido
   foi de altura.

   ⚠ FORA O `type=file` e o `textarea`: um tem botão próprio e o outro é de
   várias linhas, e é ele que estica para ocupar o palco.

   (⚠ ESTEVE AQUI TAMBÉM, por algumas horas de 09/09/2026, o quadro da tela do
   veredito — um `<p>` que vestia a classe do campo para pegar esta altura.
   Saiu com a tela, quando o veredito virou o primeiro parágrafo da proposta.) */
input.tz-campo__controle:not([type="file"]),
select.tz-campo__controle {
  height: calc(3.2428571428rem + 2px);
  padding-bottom: 0;
  padding-top: 0;
}
textarea.tz-campo__controle { display: block; resize: vertical; }
/* ⚠ CAIXA VAZIA NAO ROLA. Com um exemplo no `placeholder`, o navegador
   trata o exemplo como conteúdo: se ele for mais alto que a caixa (janela
   baixa, tela estreita), nasce a barra de rolagem que o Lucca mandou tirar em
   02/09/2026 — numa caixa onde ainda não há nada para rolar. Enquanto o campo
   está vazio o excesso é só cortado; na primeira tecla `:placeholder-shown`
   deixa de casar e o `auto` volta, para o texto de verdade. */
textarea.tz-campo__controle:placeholder-shown { overflow-y: hidden; }
/* O campo com textarea absorve a altura livre do palco e encolhe quando a
   janela e baixa — assim nada transborda e a navegacao nao desce. */
:is(.tz-pergunta--ativa, .tz-pergunta--saindo) .tz-campo:has(textarea) {
  display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0;
}
/* ⚠ `flex: 0 0 auto`, e nao `1 1 auto`. Ele absorvia toda a folga do palco e
   nascia com 319px — a caixa maior da entrevista, para uma pergunta que a
   maioria responde em tres linhas. O Lucca pediu em 02/09/2026 que ela comece
   pela METADE e cresca conforme a pessoa escreve, ate o tamanho de antes.

   Quem manda na altura agora e `ajustarTextarea`, em restore-interactions.js.
   O `.tz-campo` em volta CONTINUA com `flex: 1 1 auto`, e isso e o que faz a
   conta funcionar: a folga disponivel nao muda quando o textarea cresce, entao
   o limite e estavel e a caixa nao persegue o proprio rabo. */
:is(.tz-pergunta--ativa, .tz-pergunta--saindo) textarea.tz-campo__controle {
  flex: 0 0 auto; min-height: 4.5em;
}
select.tz-campo__controle {
  appearance: none; padding-right: 2.5em;
  background-image: linear-gradient(45deg, transparent 50%, #3f3f3f 50%),
                    linear-gradient(135deg, #3f3f3f 50%, transparent 50%);
  background-position: right 1.25em top 1.3em, right 1em top 1.3em;
  background-repeat: no-repeat; background-size: 5px 5px, 5px 5px;
}
/* Campos de valor, data e cidade usam a MESMA largura dos demais — nada de
   input curto quebrando o alinhamento da coluna. */
.tz-campo--curto .tz-campo__controle { max-width: none; }
.tz-campo__moeda { position: relative; }
.tz-campo__moeda::before {
  color: #3f3f3f; content: "R$"; left: 1em; position: absolute; top: 50%;
  transform: translateY(-50%);
}
.tz-campo__moeda .tz-campo__controle { padding-left: 3em; }
/* Alinhado a DIREITA, sob o canto inferior direito do campo — que e onde
   ele ja estava. O respiro ate o input e que subiu de .25em para .6em
   (3,25px -> 7,8px no corpo de 13px): colado, ele lia como parte da caixa e
   nao como nota sobre ela. */
.tz-campo__contador { color: #7c7c7c; font-size: .8125em; margin: .6em 0 0; text-align: right; }
/* A `.tz-linha--2` punha dois campos lado a lado (CPF+nascimento, CEP+numero,
   estado civil+profissao, e-mail+telefone, no JEC). Saiu: a entrevista promete
   "uma pergunta por tela" na propria tela de abertura, e duas caixas juntas
   quebravam a promessa. Se voltar a fazer falta, quebre a pergunta em duas
   `.tz-pergunta` em vez de reintroduzir a linha. */

/* ---------- veredito: a tela que fecha a triagem ----------
   Ela e a unica da entrevista que MOSTRA em vez de perguntar, e por isso e a
   unica com hierarquia tipografica propria. O preco ganha o maior corpo da
   pagina de proposito: e a informacao que a pessoa veio buscar, e escondê-la
   num paragrafo seria fingir que ela nao importa. */
.tz-veredito { margin: .25em 0 1.75em; }
.tz-veredito__preco {
  font-size: 2.25em; font-weight: 300; letter-spacing: -.01em; margin: 0;
}
.tz-veredito__nome { color: #7c7c7c; margin: .1em 0 1.25em; }
.tz-veredito__titulo { font-weight: 500; margin: 0 0 .35em; }
.tz-veredito__inclui, .tz-veredito__nao {
  margin: 0 0 1.25em; padding-left: 1.15em;
}
.tz-veredito__inclui li, .tz-veredito__nao li { margin-bottom: .3em; }
/* O que NAO esta incluido em cinza, e nao escondido: e ele que sustenta o
   preco baixo perante a tabela da OAB, e esconder seria o oposto do ponto. */
.tz-veredito__nao { color: #7c7c7c; }
.tz-pagamento__codigo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .8125em;
  margin-bottom: 1em; word-break: break-all;
}
.tz-veredito__comparacao {
  border-left: 2px solid #d5d5d5; color: #7c7c7c; font-size: .9375em;
  margin: 0; padding-left: .9em;
}

/* ---------- a lauda: o texto livre da tela da proposta ----------
   Pedido do Lucca em 09/09/2026, e é o fim de um dia inteiro de voltas nesta
   tela. Ele mandou juntar o veredito com a proposta, tirar a barra de progresso
   e escrever "em texto livre, como nas páginas de kirkland.com, destacando em
   azul, deixando em negrito ou itálico o importante".

   Saíram daqui, com o pedido, as três peças que a tela do veredito tinha
   ganhado horas antes: `.tz-boanoticia__selo` (o "BOA NOTÍCIA" em caixa alta),
   `__quadro` (o dropdown por clicar dizendo "JUS POSTULANDI") e `__check` (o
   tique verde, a única cor que este projeto teve fora da paleta do site). Estão
   no histórico do arquivo, inteiras, se um dia voltarem a fazer falta.

   ⚠ SÃO DUAS DECLARAÇÕES, e o resto vem do `.rte`. É a mesma economia do
   `.tz-intro` da abertura, e pelo mesmo motivo: o formulário é montado dentro
   da caixa que recebe a cópia das matérias, então parágrafo, entrelinha,
   espaço entre parágrafos e o `b,strong{font-weight:700}` já são os do site.
   Escrever números aqui seria fazer esta tela divergir da cópia no dia em que
   ela mudar.

   O peso 400 é a única coisa que destoa por conta própria, pelo mesmo motivo
   da abertura: o `.tz-form` roda a 300, e a cópia das matérias é 400. */
.tz-lauda { font-weight: 400; }
/* O azul do site, o mesmo do botão e da borda dos campos, usado como grifo.

   ⚠ SÓ A COR, SEM PESO, por pedido do Lucca em 09/09/2026: ele viu o grifo em
   `<strong class="tz-lauda__azul">` e mandou tirar o negrito. Por isso a
   classe vive hoje num `<span>`.

   Isso deixa a cor como único portador do destaque, que é a falha de
   acessibilidade mais comum que existe — e aqui ela não custa nada, porque o
   destaque é ORNAMENTO: as duas frases marcadas ("Jus Postulandi" e o preço)
   se leem inteiras em preto, sem perder informação nenhuma. O dia em que o
   azul passar a significar "isto é o que importa", ele precisa de peso ou de
   itálico junto. */
.tz-lauda__azul { color: #2354e8; }

.tz-opcoes { display: grid; gap: .5em; }
.tz-opcao {
  align-items: flex-start; background: #fff; border: 1px solid #979797;
  cursor: pointer; display: flex; gap: .75em; padding: .85em 1em;
  transition: border-color .35s ease-out, background-color .35s ease-out;
}
.tz-opcao:hover { border-color: #7090f0; }
.tz-opcao input { accent-color: #2354e8; margin: .25em 0 0; }
.tz-opcao--marcada { background: #f4f7ff; border-color: #2354e8; }

/* ---------- o aceite da proposta ----------
   Ocupa a linha em que vivia o subtítulo do campo (o Lucca trocou os dois em
   10/09/2026), e por isso repete a medida dele: `1rem`, entrelinha 1.75 e os
   2rem de distância do pé do quadro. O que muda é a cor — o subtítulo é cinza
   `#7c7c7c` porque explica, e isto não explica: é uma frase que a pessoa está
   afirmando, e fica no preto do corpo do formulário.

   ⚠ A CAIXA É DESENHADA AQUI, e não é a nativa dos `.tz-opcao`. O motivo é o
   estado vermelho: `accent-color` só pinta a caixa MARCADA, e a que precisa
   ficar vermelha é justamente a vazia. Com a nativa, "o checkbox em vermelho"
   não tem como acontecer — sobraria pintar só o texto.

   O desenho copia o que já existe: fundo branco e borda `#979797` como o
   `.tz-opcao` em repouso, azul `#2354e8` quando marcada, que é o
   `accent-color` de lá. O tique é o de sempre, dois lados de um quadrado
   girados 45°, e não um SVG: aqui ele tem 6px e qualquer traço mais elaborado
   se perde nesse tamanho.

   ⚠ `1.125em` DE CAIXA E `.3125em` DE TOPO. A linha tem 28px (1rem × 1.75) e a
   caixa 18px; os 5px de margem são a metade da diferença, e é o que a alinha
   ao centro da PRIMEIRA linha em vez de ao topo do bloco. Sem isso ela sobe e
   descola do texto quando a frase quebra em duas linhas. */
/* ⚠ SEM `cursor: pointer` NA LINHA, e a falta é pedida (Lucca, 10/09/2026): a
   mãozinha fica na caixa e no link, que é o que de fato responde ao clique. A
   frase em volta não marca nada desde que isto deixou de ser um `<label>` — ver
   o comentário no molde, em pages/_formularios/jef.html. */
.tz-form .tz-concordo {
  align-items: flex-start;
  color: #3f3f3f;
  display: flex;
  font-size: 1rem;
  font-weight: 300;
  gap: .75em;
  line-height: 1.75;
  margin-top: 2rem;
}
/* ⚠ QUADRADA DE NOVO, e agora com o desenho que o Lucca mandou em 10/09/2026:
   fio grosso e canto de leve arredondado vazia, quadrado inteiro pintado com um
   tique branco cheio quando marcada. Ela chegou a ser redonda por algumas horas
   do mesmo dia; ficou o registro porque redondo é a forma do RÁDIO, e este
   controle não escolhe entre alternativas — afirma uma coisa só.

   ⚠ O FIO É DE 2px, E É DAÍ QUE VEM O ESTILO. Com 1px a caixa vazia quase
   desaparecia ao lado de uma frase de 16px; a referência tem fio da ordem de 8%
   do lado da caixa, que em 18px dá justamente 2. O `border-box` do site (o
   `html` inteiro roda nele) é o que mantém os 18px totais mesmo com o fio
   engrossando — sem ele a caixa iria a 22px e desalinharia do texto.

   ⚠ E `#979797` VAZIA, que é a mesma borda do `.tz-opcao`. Não é o azul: azul
   aqui diria "isto já está marcado" a quem passa o olho, e a caixa vazia é
   justamente o que ainda falta.

   ⚠ SEM TRANSIÇÃO NENHUMA, e a ausência é pedida (Lucca, 10/09/2026). Havia
   `.35s` no fundo e na borda da caixa, e outros `.35s` na cor da frase; marcar
   virava um azul que ia chegando. Um checkbox não é um campo que reage ao
   ponteiro — ele registra uma decisão que já foi tomada, e o registro é
   instantâneo ou atrasa a leitura de que pegou. As transições dos DROPDOWNS
   continuam onde estavam: lá elas acompanham hover e foco, que são estados
   contínuos, e não um interruptor. */
.tz-concordo__caixa {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 2px solid #979797;
  border-radius: 2px;
  /* `flex: none` porque a caixa é item de flex ao lado de um texto que cresce:
     sem isto ela encolhe para caber a frase e deixa de ser quadrada. */
  /* ⚠ MÃOZINHA AQUI TAMBÉM, e não só no `<label>`. O `cursor: pointer` da linha
     inteira não chega neste elemento: `input` vem com `cursor: default` da folha
     do NAVEGADOR, e folha do navegador só perde para regra de autor que fale
     com ele. Sem esta linha o ponteiro vira seta justo em cima da caixa, que é
     onde a pessoa mira. É o mesmo defeito que o `::file-selector-button` dos
     campos de anexo teve em 09/09/2026, pela mesma razão. */
  cursor: pointer;
  flex: none;
  height: 1.125em;
  margin: .3125em 0 0;
  position: relative;
  width: 1.125em;
}
/* ⚠ A ÁREA DE TOQUE É MAIOR QUE O DESENHO, e ela passou a fazer falta em
   10/09/2026: enquanto a frase era `<label>`, marcar era acertar qualquer ponto
   de duas linhas de texto; agora o alvo é só a caixa, e 18px é pequeno para um
   dedo. Os 8px invisíveis em volta levam o alvo a 34px sem mexer no desenho.

   Não chegam no texto: a folga entre a caixa e a frase é de 12px (`gap: .75em`),
   então a auréola para antes e não rouba o clique do link. */
.tz-concordo__caixa::before {
  content: '';
  inset: -.5em;
  position: absolute;
}
/* ⚠ O TIQUE É O `check` DO LUCIDE, o mesmo desenho dos outros ícones da
   entrevista (a seta de baixar, o X dos anexos, o abrir-noutra-aba) — só que
   aqui ele vem por `background-image`, e não por SVG no HTML: quem o carrega é
   um `<input>`, que não tem filhos onde pendurar um `<svg>`.

   ⚠ AQUI HAVIA UM TIQUE DESENHADO COM BORDA, dois lados de um quadrado girados
   45°. Saiu no pedido de 10/09/2026: a ponta daquele desenho é sempre em
   esquadro, e o que a referência tem é ponta arredondada e traço mais gordo. Um
   `border` não faz nem uma coisa nem outra.

   ⚠ `stroke-width: 3` E NÃO 2. O traço nasce num `viewBox` de 24 e chega aqui
   com 14px de largura, então cada unidade vale 0,58px: com 2 o tique sairia
   com 1,17px e some no azul; com 3 dá 1,75px, que é a proporção da referência.

   ⚠ O `%23` É O `#` DA COR. Dentro de uma `url()` o `#` abre fragmento e corta
   o resto do SVG em silêncio — o tique simplesmente não aparece, sem erro
   nenhum no console. */
.tz-concordo__caixa:checked {
  background: #2354e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .875em .875em no-repeat;
  border-color: #2354e8;
}
/* ⚠ O VERMELHO É RESPOSTA A UM CLIQUE NO "PAGAR", e some no tique. Pedido do
   Lucca em 10/09/2026: sem o aceite o botão não segue, e o que diz isso é o
   próprio campo mudando de cor. Quem põe e tira a classe é `aceitouAProposta`,
   em restore-interactions.js.

   ⚠ É O `#c0392b` DO PROJETO, o mesmo do asterisco de campo obrigatório e do X
   dos anexos, e ele dá 4,24 de contraste sobre o `#e3e3e3` do miolo — abaixo
   dos 4,5 que a WCAG pede para texto deste tamanho. Fica assim de propósito:
   um segundo vermelho, indistinguível deste a olho nu, custaria mais em
   coerência do que os 0,26 valem. O que compensa a diferença é o sinal não ser
   só a cor: a caixa muda de borda junto, o `aria-invalid` anuncia a mesma
   coisa a quem ouve a página, e o foco vai para lá.

   ⚠ O `.tz-form` NA FRENTE, E ELE É O QUE FAZ O TEXTO VIRAR. Sem ele esta regra
   pesa (0,1,0) contra os (0,2,0) da regra de repouso ali em cima, e perde: a
   caixa ficava vermelha (aquela disputa é entre (0,2,0) e (0,1,0), e o vermelho
   ganha) e a frase continuava cinza. Medido assim na tela em 10/09/2026. */
/* ---------- o link dentro do aceite ----------
   "proposta de honorários advocatícios" abre o mesmo PDF do quadro acima
   (pedido do Lucca, 10/09/2026): quem já está com o dedo na frase que vai
   assinar não precisa subir de volta para lê-la.

   ⚠ O AZUL ESTÁ ESCRITO, e não herdado do `.rte a`. Ele daria este mesmo
   `#2354e8` hoje, mas por (0,1,1) contra os (0,1,0) de uma classe solta — é a
   mesma armadilha que o quadro da proposta tinha, em que o azul certo aparecia
   por coincidência. Com `.tz-form` na frente a regra pesa (0,3,0) e manda de
   verdade.

   ⚠ E O HOVER SUBLINHA EM VEZ DE TROCAR DE COR. Sem esta regra quem manda é
   `.rte a:hover`, que leva o link para o verde-água `#1ac6ba` — a mesma cor que
   o Lucca mandou tirar do quadro horas antes. O sublinhado é o gesto de link
   que não inventa cor nenhuma.

   ⚠ NÃO SUBLINHADO EM REPOUSO, como todo link de corpo de texto deste site. No
   meio de uma frase curta o azul basta para separar. */
.tz-form .tz-concordo__link { color: #2354e8; text-decoration: none; }
.tz-form .tz-concordo__link:hover,
.tz-form .tz-concordo__link:focus-visible { color: #2354e8; text-decoration: underline; }
/* ⚠ O LINK NÃO ACOMPANHA O VERMELHO. Quando falta marcar, a frase toda fica
   `#c0392b` — menos ele, que continua azul. É de propósito: o vermelho diz "o
   aceite está faltando", e o link não é o que falta; ele é o caminho para o
   documento, e um link vermelho no meio da frase se leria como "isto aqui está
   errado". */
.tz-form .tz-concordo--faltando { color: #c0392b; }
.tz-form .tz-concordo--faltando .tz-concordo__caixa { border-color: #c0392b; }

.tz-aviso {
  background: #fff8f6; border-left: 3px solid #ff715b; margin-bottom: 1.75em;
  padding: 1.25em 1.5em;
}
.tz-aviso__titulo { font-weight: 500; margin: 0 0 .35em; }
.tz-aviso p { margin: 0 0 .75em; }

.tz-navegacao {
  display: flex; flex-wrap: wrap; gap: 1em;
  justify-content: space-between; margin-top: 2.25em; padding-top: 1.75em;
}
/* Avançar/Concluir SEMPRE encostado à direita, mesmo quando é o único botão na
   linha. Quem fazia isso era um `<span></span>` vazio no meio da navegação, que
   segurava o `space-between` de pé; ele deu lugar ao `.tz-recado`, que some
   quando não há recado, e aí o botão sozinho caía para a esquerda — foi o que
   aconteceu com o "Começar" da tela de abertura, onde o Voltar também não
   existe. A margem automática não depende de quantos itens há na linha. */
.tz-navegacao [data-avancar] { margin-left: auto; }
/* O recado de falha do envio. Fica ENTRE Voltar e Concluir, e nao acima do
   campo, porque o que falhou foi o botao: e ali que a pessoa esta olhando
   quando "Enviando..." volta a ser "Concluir" sem nada acontecer. Vazio ele
   nao ocupa altura nenhuma (o `:empty`), entao a navegacao nao dança quando a
   mensagem aparece e some. */
.tz-recado {
  color: #8a1f2b; flex-basis: 100%; font-size: .8125em; line-height: 1.4;
  margin-bottom: .25em;
  /* LINHA INTEIRA, ACIMA dos botões (`order: -1` com o `flex-wrap` acima), e
     não a fatia do meio entre eles: ali a mensagem cai numa coluna de ~180px e
     quebra em quatro linhas tortas, encostando nas duas setas. */
  order: -1;
}
.tz-recado:empty { display: none; }
/* Nas perguntas de mais de uma linha os botões sobem: a folga acima deles passa
   de 80px (2.25em + 1.75em) para os mesmos 27px que separam "Pergunta X de N"
   do rótulo do campo. Fica um respiro igual dos dois lados da pergunta, e os
   ~53px que sobram vão para o textarea, que é flexível e cresce sozinho. */
.tz-form:has(.tz-pergunta--ativa textarea, .tz-pergunta--saindo textarea) .tz-navegacao {
  margin-top: 0; padding-top: 1.35em;
}
.tz-btn {
  border: 1px solid transparent; cursor: pointer;
  font: 400 .9375em/1 Rubik, sans-serif; letter-spacing: .06em;
  padding: 1.05em 2.25em; text-transform: uppercase;
  transition: background-color .35s ease-out, color .35s ease-out,
              border-color .35s ease-out;
}
.tz-btn--principal { background: #1c1c1c; border-color: #1c1c1c; color: #fff; }
.tz-btn--principal:hover { background: #2354e8; border-color: #2354e8; }
.tz-btn--fantasma { background: none; border-color: #979797; color: #1c1c1c; }
.tz-btn--fantasma:hover { border-color: #1c1c1c; }
.tz-btn[hidden] { display: none; }

/* ---------- os botões da navegação ----------

   ⚠ ISTO SUBSTITUIU A CHEVRON E O LOSANGO. Até 02/09/2026 os botões Começar,
   Voltar e Avançar eram uma réplica do "Back" do showcase: chevron de 2em
   dentro de um losango girado, com o preenchimento subindo na diagonal. O
   Lucca mandou usar o botão de "Social Commitment", "Pro Bono" e "Wellbeing",
   e aquele botão não tem ícone nenhum — então a chevron e o losango saíram.
   Quem quiser o gesto antigo de volta: ele está no histórico deste arquivo,
   e as medidas dele estavam documentadas linha a linha.

   O que se perde com isso é a seta indicando a direção. O que sobra dizendo
   para onde se vai é a POSIÇÃO (Voltar à esquerda, Avançar à direita, pelo
   `space-between` da `.tz-navegacao`) e a palavra escrita no botão. Para uma
   navegação de duas opções rotuladas, basta.

   Os valores abaixo são os medidos no botão de referência, não estimados:
   `.button` + `.button-primary` do bundle do site, conferidos no computado do
   "Pro Bono" renderizado (121x55px, padding 15x26, borda 0,67px arredondada de
   1px, Rubik 16px/400, SEM caixa alta, centralizado).

   ⚠ A MECÂNICA DO HOVER É UM PAINEL QUE SOBE, e não uma troca de
   `background-color`. O `::before` cobre o botão inteiro e vive deslocado em
   `translateY(100%)`; no hover ele volta a zero. É por isso que o botão precisa
   de `overflow: hidden` e de `position: relative`, e é por isso que o rótulo
   precisa de `position: relative` — sem ele o painel azul passa POR CIMA do
   texto e o botão fica mudo no meio da transição. */
.tz-btn--seta {
  background-color: #fff;
  border: 1px solid #2354e8;
  border-radius: 0;
  color: #2354e8;
  cursor: pointer;
  display: inline-block;
  /* ⚠ `rem`, e nao `em`. O botao de referencia herda os 16px do corpo da
     pagina dele; aqui o formulario roda numa escala propria, e `1em` saiu em
     20px — botao 25% maior que o original, com o padding em `em` crescendo
     junto. `rem` ancora na raiz e devolve os 16px exatos, e como o padding e
     em `em` ele passa a ser calculado sobre esses 16px: 15px x 26px, que sao
     os medidos no "Pro Bono". */
  font: 400 1rem/1.5 Rubik, sans-serif;
  letter-spacing: normal;
  min-width: 6.25em;
  overflow: hidden;
  padding: .9375em 1.625em;
  position: relative;
  text-align: center;
  /* ⚠ VERSALETE, e o botao de referencia NAO tem. Pedido do Lucca em
     02/09/2026, depois de ver os dois: `.button-primary` herda o
     `text-transform: none` do reset e renderiza "Pro Bono"; aqui fica
     "AVANÇAR". E o unico ponto em que estes botoes divergem da referencia, e
     diverge de proposito. */
  text-transform: uppercase;
  /* ⚠ `opacity` NA LISTA POR CAUSA DO DESATIVADO (Lucca, 10/09/2026). Desde que
     os porteiros passaram a travar o Avançar, esse estado vai e volta enquanto
     a pessoa responde — e sem transição ele PISCAVA entre 100% e 40% a cada
     tecla do CEP. Com os mesmos .35s dos outros estados do botão, apagar e
     acender viraram gesto em vez de susto. */
  transition: color .35s cubic-bezier(.86, 0, .07, 1),
              box-shadow .35s cubic-bezier(.86, 0, .07, 1),
              opacity .35s cubic-bezier(.86, 0, .07, 1);
}
.tz-btn--seta:before {
  background-color: #2354e8;
  bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.86, 0, .07, 1);
}
/* ⚠ HOVER SÓ A PARTIR DE 768px, e a referência faz igual: no bundle do site,
   `.button-utility:hover` e `.select-dropdown__select:hover` vivem dentro de
   `@media screen and (min-width: 48em)`.

   O motivo é toque. Num celular não existe "passar o mouse": o navegador
   dispara `:hover` no toque e o deixa GRUDADO até a pessoa tocar em outro
   lugar. O botão ficaria preenchido de azul depois de clicado, como se ainda
   estivesse sob o cursor. Pedido do Lucca em 02/09/2026, para todos os botões
   animados do site. */
@media screen and (min-width: 768px) {
  .tz-btn--seta:not([disabled]):hover { box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15); color: #fff; }
  .tz-btn--seta:not([disabled]):hover:before { transform: translateY(0); }
  .tz-btn--seta:focus { box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15); outline: none; }
}
/* `.button-primary__label`, valor a valor: é só isto que o mantém acima do
   painel que sobe. */
.tz-btn__rotulo { position: relative; }
/* A chevron e o losango continuam no HTML dos seis formulários e do JS que
   troca o rótulo; escondê-los aqui evita mexer em sete arquivos para apagar
   um <span>. Se um dia a seta voltar, é só remover esta linha. */
.tz-btn__icone { display: none; }
/* ⚠ AQUI HAVIA DUAS REGRAS QUE "DESFAZIAM" O HOVER DO BOTÃO TRAVADO, e elas
   eram a causa do último defeito que o Lucca viu em 10/09/2026: o rótulo
   AVANÇAR ficando AZUL ao passar o mouse com o botão desativado.

   Elas repunham `color: #2354e8` e o painel abaixado — os valores de repouso do
   `.tz-btn--seta` SOLTO. Só que na navegação este botão não repousa em azul:
   repousa em `#3f3f3f` no desktop e em BRANCO sobre azul no celular. Então o
   que parecia restauração era repintura, e no celular chegava a ser texto azul
   sobre fundo azul.

   É o mesmo erro que eu cometi duas vezes seguidas neste botão, canal por
   canal. A regra que vale: para desligar um hover, não se repete o repouso —
   tira-se o hover. Quem faz isso agora é o `:not([disabled])` lá em cima, e
   sem hover o repouso é o que sempre foi, sem ninguém precisar copiá-lo. */
.tz-btn--seta[disabled] { cursor: default; opacity: .4; }

/* ---------- dropdown das perguntas de opção única ----------
   Substitui a lista de rádios. Os rádios continuam no DOM, fora da tela: são
   eles que guardam o valor e disparam os `change` que a lógica do formulário já
   escuta (condicionais, caixa "Outro", avanço automático). O dropdown é só a
   interface.
   Usa o vocabulário do próprio site: a caixa do campo de busca, os chevrons da
   fonte de ícones `kirkland` e a sombra do foco da busca. */
.tz-select { position: relative; }
/* ⚠ O <select> DE VERDADE, INVISIVEL E POR CIMA. É o `.select-dropdown__select`
   do zip da página de lawyers, valor a valor: `opacity: 0`, `position: absolute`
   cobrindo a caixa toda, `z-index: 2`. É ele que recebe o clique, o foco e o
   hover — e é ele que abre a aba do sistema. O `.tz-select__gatilho` embaixo é
   só a pintura, e reage por irmão adjacente (`+`).

   `cursor: pointer` é a única coisa que o zip não tem. Sem ela o ponteiro fica
   o de texto sobre um campo que é claramente um botão; o Lucca reclamou disso
   na primeira vez que o campo foi nativo, em 02/09/2026. */
.tz-select__nativo {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: Rubik, sans-serif;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

/* ⚠ ESTE É O `.select-dropdown__label` DO SITE, valor a valor.

   Referência: os filtros "PRACTICE", "LEVEL" e "OFFICE" da página de lawyers.
   Medidos no computado, em ≥48em: Rubik 16px/1.1, versalete, borda de 1px
   #2354e8, cor #2354e8, fundo transparente, padding 17,14 / 38,5 / 17,14 / 22,
   e a chevron a 22px da direita, centrada na vertical.

   Lá o desenho é um `<select>` nativo invisível (`opacity: 0`) por cima de um
   `<span>` que é a caixa que se vê. Aqui a lista é própria (ver o comentário
   acima), então o que recebe o estilo é o GATILHO. O visual é o mesmo; o que
   abre é que é outro.

   ⚠ `1rem`, e não `1em`: o formulário roda numa escala própria de 20px, e `1em`
   inflaria a caixa em 25% junto com todo o padding, que é declarado em `em`.
   Ancorado na raiz, o padding volta a ser calculado sobre 16px e dá os
   17,14 x 22 exatos. Mesma armadilha dos botões. */
/* ⚠ O AZUL VIROU SINAL DE RESPONDIDO, e não a cor de repouso. Antes toda
   caixa nascia azul, respondida ou não, e uma tela de nove perguntas ficava
   com o mesmo peso visual antes e depois de a pessoa responder. Agora:
   vazia é cinza, preenchida é azul. Pedido do Lucca em 02/09/2026.

   O estado mora numa CLASSE DO FILHO (`.tz-select__valor--vazio`), então o
   seletor usa `:has()` para pintar o pai a partir dela — é o mesmo recurso
   que o resto deste arquivo já usa para as telas com textarea. */
.tz-select__gatilho {
  background: transparent;
  border: 1px solid #2354e8;
  color: #2354e8;
  /* A mãozinha saiu quando o campo virou um `<select>` nativo (select não vira
     mãozinha) e voltou junto com a lista própria, a pedido do Lucca. Aqui o
     gatilho é um `<button>` de verdade, e mãozinha é o que se espera dele. */
  cursor: pointer;
  display: block;
  font-family: Rubik, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1;
  overflow: hidden;
  padding: 1.0714285714em 2.40625em 1.0714285714em 1.375em;
  position: relative;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
  transition: color .35s cubic-bezier(.86, 0, .07, 1),
              border-color .35s cubic-bezier(.86, 0, .07, 1),
              box-shadow .35s cubic-bezier(.86, 0, .07, 1);
}
/* ⚠ O ESTADO VEM DO SELECT, e não do <span>. É o select que está por cima,
   então é nele que o mouse entra e o foco pousa; o <span> abaixo nunca recebe
   nenhum dos dois. Irmão adjacente (`+`) funciona porque o select vem ANTES do
   gatilho no DOM — a mesma ordem da referência, e inverter a ordem apagaria o
   hover em silêncio.
   Hover e foco são a MESMA regra, e escurecem em vez de acender. */
/* ---- o gesto do campo, agora o do zip de lawyers -----------------------
   ⚠ AQUI HAVIA UM PAINEL QUE SUBIA, e ele saiu em 08/09/2026.

   Era o `.button-utility` da pagina de OFFICES — um retangulo escuro que subia
   de `top: 100%` para `top: 0` e invertia as cores. Chegou aqui quando a aba
   tambem era de la; com a aba nativa, o campo passou a ser inteiro o
   `.select-dropdown` da pagina de LAWYERS, e o gesto de la e outro:

     .select-dropdown__select:focus + .select-dropdown__label,
     .select-dropdown__select:hover + .select-dropdown__label {
       border-color: #505050;
       box-shadow: 0 6px 20px 5px rgba(0,0,0,.15);
       color: #505050;
     }

   Sem painel, sem inversao: a borda e o texto viram cinza e a caixa ganha
   sombra. Foi a escolha do Lucca com os dois desenhos lado a lado.

   ⚠ E A SOMBRA VOLTA SO AQUI. Ela saiu de todos os campos de texto em
   02/09/2026, porque num formulario de nove telas piscava a cada um. Este
   campo e outro elemento e o zip a tem; se incomodar, e apagar esta linha.

   Vai junto o `#1c1c1c` que o painel usava desde 06/09: sem painel nao ha o
   que pintar, e a cor do estado passa a ser a do zip. */
/* ⚠ O ABERTO ENTROU NO MEDIA QUERY JUNTO COM O HOVER (Lucca, 02/09/2026).
   Eu tinha deixado o aberto de fora, argumentando que ele não é gesto de
   mouse e precisa valer no celular. Ele decidiu o contrário: de 767 para
   baixo o campo NÃO muda de cor ao abrir a aba.

   Funciona porque a aba aberta já se anuncia sozinha — ela ocupa a tela
   inteira abaixo do campo. Pintar o campo também é redundância que, num
   toque, chega junto com o dedo em cima. */
/* ⚠ ABERTO E HOVER SÓ A PARTIR DE 768px, os dois na mesma regra.

   O hover sai por causa de toque: no celular o navegador dispara `:hover`
   no toque e o deixa GRUDADO até tocarem em outro lugar. O ABERTO sai por
   pedido do Lucca (02/09/2026) — de 767 para baixo o campo não muda de cor
   ao abrir a aba. Funciona porque a aba aberta já se anuncia sozinha: ela
   ocupa a tela inteira abaixo do campo.

   ⚠ E não há regra que DESFAÇA isto em outro lugar. Cheguei a escrever uma,
   convencido de que esta versão não pegava na tela; não pegava a MEDIÇÃO. O
   painel de navegador embutido congela transições, e `color` aqui tem
   `transition: .35s` — a cor computada ficava presa no valor inicial, e eu
   li isso como "a regra não aplicou" umas seis vezes seguidas. Ao forçar o
   fim das transições, a cor era branca, como devia. */
/* ---- os quatro estados do campo, que sao DOIS no CSS -------------------
   O Lucca descreveu assim, em 08/09/2026:

     sem hover ................ azul
     com hover ................ preto com sombra
     aberto ................... preto com sombra
     depois de escolher ....... preto com sombra, ate clicar fora

   Os dois ultimos sao o MESMO estado, e e por isso que nao precisam de JS: um
   `<select>` nativo ganha foco ao ser clicado, mantem o foco enquanto a aba
   esta aberta, CONTINUA com ele depois de a opcao ser escolhida, e so o perde
   quando se clica fora. `:focus` cobre "aberto" e "ja respondi" de uma vez —
   que e exatamente o desenho que ele pediu, e sem uma linha de script.

   ⚠ E `:focus`, nao `:focus-visible`: clicar num select o foca, e e nesse
   instante que a aba abre. `:focus-visible` so casaria com teclado, e o campo
   ficaria sem reacao justo no gesto mais comum.

   ⚠ AS DUAS FAIXAS SAO DIFERENTES DE PROPOSITO. `:hover` fica no desktop
   porque no toque o navegador dispara hover e o deixa GRUDADO ate se tocar em
   outro lugar. `:focus` vale em qualquer largura: no celular ele acende ao
   abrir a aba e apaga ao tocar fora, que e o mesmo desenho. */
@media screen and (min-width: 768px) {
  .tz-select__nativo:hover + .tz-select__gatilho {
    border-color: #1c1c1c;
    box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15);
    color: #1c1c1c;
    outline: none;
  }
}
.tz-select__nativo:focus + .tz-select__gatilho {
  border-color: #1c1c1c;
  box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15);
  color: #1c1c1c;
  outline: none;
}
/* ⚠ NO CAMPO DE ANEXO O FOCO DE PONTEIRO NÃO PINTA, e a exceção é de
   09/09/2026. Escolher um arquivo abre a janela do sistema; quando ela fecha, o
   campo continua com o FOCO — e a regra acima o deixa preto, com sombra, do
   jeito que ele fica sob o cursor. Quem acabou de anexar vê um campo aceso que
   não responde a nada, e a leitura é "isto aqui ainda quer alguma coisa".

   `:focus-visible` é o que separa os dois focos: o navegador o aplica ao foco
   de TECLADO e não ao de clique. Então `:focus:not(:focus-visible)` é
   exatamente "focado por ponteiro", e é aí que se desfaz a pintura. Quem chega
   por Tab continua vendo onde está, que é o que a regra de cima existe para
   garantir.

   ⚠ SÓ NO ANEXO. Os dropdowns de verdade continuam como estavam: lá o clique
   ABRE uma lista, e o campo aceso enquanto ela está aberta é informação.

   As cores repetidas aqui são as de repouso: azul no campo vazio, preto no
   respondido (a mesma dupla de `.tz-arquivo--cheio`). */
.tz-arquivo .tz-select__nativo:focus:not(:focus-visible) + .tz-select__gatilho {
  border-color: #2354e8;
  box-shadow: none;
  color: #2354e8;
}
.tz-arquivo--cheio .tz-select__nativo:focus:not(:focus-visible) + .tz-select__gatilho {
  border-color: #1c1c1c;
  color: #1c1c1c;
}
/* ⚠ O TEXTO E A SETA PRECISAM SUBIR JUNTO. O painel é um `::before` absoluto
   dentro do gatilho; sem `position` e `z-index` próprios, ele passa POR CIMA
   dos dois e o campo fica um retângulo escuro mudo no meio da transição. */
.tz-select__valor { position: relative; z-index: 1; }
/* Ainda sem resposta: preto. #1c1c1c e não #000 — é o preto DESTE site, o
   mesmo do `.button-primary--dark` e das manchetes; preto puro ao lado dele
   lê como uma cor a mais, não como mais contraste.

   ⚠ A MESMA DECLARAÇÃO EM DUAS FAIXAS, e a duplicação é proposital. Tentei
   escrever uma regra só, sem escopo, contando que as regras de aberto e hover
   viessem depois e vencessem por especificidade. Na tela não venceram: com a
   aba aberta no desktop o campo continuava preto. Não gastei mais tempo
   caçando o porquê — duas faixas explícitas dizem a intenção sem depender de
   quem ganha um duelo de `:has()`, e cada uma é conferível olhando.

   Desktop: preto só quando fechado e sem cursor em cima; aberto e hover
   pintam de branco (regras acima). */
/* (EM REPOUSO O CAMPO E AZUL, respondido ou nao. Havia aqui duas regras que
   pintavam de preto o campo AINDA SEM RESPOSTA — uma por faixa de largura.
   Sairam em 08/09/2026: "o input de dropdown sem hover fica azul", sem
   ressalva. O azul e a cor base do `.tz-select__gatilho`, que e a do
   `.select-dropdown__label` do zip; nada precisa dize-lo de novo.

   A distincao respondido/nao-respondido deixou de pintar. Ela continua no DOM,
   na classe `--vazio`, porque o script a usa para saber o que escrever na
   caixa — so nao tem mais efeito visual.) */
/* ⚠ SEM CINZA NO VAZIO. O `--vazio` pintava "Selecione" de #9a9a9a para
   separar o que ainda não foi escolhido. A referência não faz isso: o rótulo
   do filtro e o valor escolhido saem na mesma cor, e a caixa alta some junto
   com a diferença. Fica registrado porque É uma perda de leitura, e foi trocada
   pelo "exato estilo" que o Lucca pediu. */
.tz-select__valor--vazio { color: inherit; }
/* A chevron: `::before` absoluto na referência, aqui um <span> já existente,
   posicionado igual. `\e908` é o mesmo glifo dos dois lados. */
.tz-select__seta {
  color: inherit;
  font-size: 1em;
  line-height: 1;
  position: absolute;
  right: 1.375em;
  top: 50%;
  transform: translateY(-50%);
  /* ⚠ `ease-out`, e não o easing do site. É o que o
     `.dropdown-custom .button-utility__label:after` da referência usa nesta
     seta, e só nela. */
  transition: transform .35s ease-out;
  /* Abaixo do <select> invisivel (z-index 2) e acima do resto. Ja e
     `absolute`, entao nao precisa de `position` aqui, so do z-index.
     (Existia para nao sumir atras do painel que subia; o painel saiu em
     08/09/2026, o z-index fica porque a ordem com o select ainda importa.) */
  z-index: 1;
}
/* (A seta nao tomba mais ao abrir. Ela tombava com `rotateX(180deg)` quando
   `.tz-select--aberto` existia; com a aba do sistema nao ha como saber que
   ela abriu, e o zip da pagina de lawyers tambem nao vira a dele.) */

/* (O PAINEL PROPRIO SAIU em 08/09/2026, com o zip da pagina de lawyers: a aba
   voltou a ser a do navegador. Foram embora `.tz-select__lista`, `__opcao` e
   os estados delas — o cinza #3f3f3f do hover, a caixa alta, as linhas de 1px
   e a inversao de cores. Aba desenhada pelo sistema nao aceita CSS; era esse
   o preco, e foi dito antes. O que sobrou aqui vale para a CAIXA, que
   continua sendo o `.select-dropdown__label` do zip.) */

.tz-select__radios {
  height: 1px; overflow: hidden; position: absolute;
  visibility: hidden; width: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .tz-select__gatilho, .tz-select__seta { transition: none; }
}

/* ---------- formulário abaixo de 1000px ----------
   O painel de detalhe do showcase é desktop-only no site original: abaixo de
   62.5em (o mesmo 1000px do `VERTICAL_BREAKPOINT` no JS) ele fica transparente,
   sem Back, e o carrossel aparece por trás. Para as três matérias isso não é
   problema — na visão vertical o clique vai para a página delas. O formulário
   não tem página, então abre o painel em qualquer largura (ver
   restore-interactions.js) e precisa aqui da mesma superfície e das mesmas
   âncoras do desktop, numa coluna só. Tudo em em/rem: as distâncias encolhem
   junto com a fonte do site, que cai de 20px para 16px abaixo de 48em.

   As duas medidas que mudam nesta faixa vêm do próprio bundle: a altura do
   cabeçalho (`.site-header { height: 3.75em }`, que vira 6.25em a partir de
   48em) e a margem lateral do painel (1.25em, que vira 2.5em na mesma quebra).
   Ficam em variáveis porque o Back é irmão do painel, não descendente. */
@media screen and (max-width: 999.98px) {
  :root { --tz-cabecalho: 3.75rem; --tz-margem: 1.25em; --tz-faixa-topo: 3.75rem; }
}
@media screen and (min-width: 768px) and (max-width: 999.98px) {
  /* ⚠ `--tz-faixa-topo` NÃO É A ALTURA DO CABEÇALHO aqui, e a diferença é de
     propósito. Na referência a faixa preta começa em `margin-top: 6.5625em`
     (105px) enquanto o cabeçalho tem 6.25em (100px): sobram 5px de preto
     entre um e outro, e é em 105 que a emenda aparece. Abaixo de 48em os
     dois valores coincidem em 3.75em, e por isso lá a variável dá no mesmo. */
  :root { --tz-cabecalho: 6.25rem; --tz-margem: 2.5em; --tz-faixa-topo: 6.5625rem; }
}
@media screen and (max-width: 999.98px) {
  /* O cinza é o do `.showcase-layout__frame`, a superfície que fica atrás do
     formulário no desktop. O z-index tira o carrossel de cima; o cabeçalho,
     que é 90, continua acima. */
  .showcase-copy.tz-com-formulario {
    background: #e3e3e3;
    /* ⚠ O TOPO SEGUE A MARGEM LATERAL, e não os 80px da matéria.

       Vinha de `kirkland-to-launch-tokyo-office`, que enquadra o texto com
       `padding: 80px 0`. Numa matéria isso é respiro; na entrevista era um vão
       morto acima da sobrelinha, e o Lucca mandou tirá-lo em 08/09/2026: o
       espaço em cima passa a ser o MESMO da margem lateral dos itens.

       `var(--tz-margem)` e não um número, porque a lateral muda de faixa e o
       topo tem de mudar junto. Medido nas duas:

         abaixo de 768px    --tz-margem 1.25em = 20px   lateral do wrapper 20px
         de 768 a 1000px    --tz-margem 2.5em  = 40px   lateral do wrapper 40px

       ⚠ O RODAPÉ FICA EM 80px, de propósito: ele não é margem, é a folga até o
       fim do painel, e o pedido foi só sobre o topo.

       ⚠ O `height: auto` é o que solta a altura. A base do bundle é
       `height: calc(100vh - 2.5em)`: sem derrubá-la, o painel continua do
       tamanho da tela e o vão morto volta com ele. */
    height: auto;
    padding-bottom: 5rem;
    padding-top: var(--tz-margem);
    position: relative;
    z-index: 30;
  }
  /* ⚠ AS TELAS SÓ DE TEXTO MANTÊM OS 80px, e a diferença é de propósito.
     Pedido do Lucca em 08/09/2026, no mesmo dia em que o topo das telas de
     pergunta encolheu: onde não há campo, o vão em cima não é vão morto — é o
     enquadramento da matéria, e o texto respira com ele. São três no fluxo do
     `jef`, e as três nascem da mesma decisão:

       a abertura      "No Juizado Especial Federal você pode entrar..."
       o veredito      "O seu caso serve para o Juizado"
       a proposta      "Esta é a proposta"

     ⚠ POR NOME DE ETAPA, e não por "não tem campo". A tela da proposta NASCE
     sem campo e GANHA um quando `montarPagamento` injeta o Pix copia e cola —
     uma regra do tipo `:not(:has(campo))` deixaria de casar no meio da tela e o
     topo saltaria com a pessoa olhando. */
  /* (A TELA DA PROPOSTA SAIU DESTE GRUPO em 10/09/2026, quando ela deixou de
     ser dois parágrafos e voltou a ter título, quadro e subtítulo como as
     outras. Só a abertura continua aqui.) */
  .showcase-copy.tz-com-formulario:has(.tz-form--intro) {
    padding-top: 5rem;
  }
  /* ⚠ NA TELA DO FIM A NAVEGAÇÃO SAI DO LAYOUT, e é isso que iguala a folga de
     baixo à de cima. Pedido do Lucca em 10/09/2026: "as distâncias entre o
     texto e o rodapé e o cabeçalho iguais, como na página de referência".

     ⚠ O VÃO NÃO ERA `padding`. O painel já tinha 80px em cima e 80 embaixo,
     medidos; o que sobrava eram outros 180px, e vinham do `margin-top: auto`
     da `.tz-navegacao` — a regra que gruda os botões no pé do painel. Ali os
     dois botões estão escondidos, então a barra tinha altura ZERO e mesmo
     assim empurrava: margem automática ocupa o espaço que existir. Medido em
     402px: 80 em cima e 260 embaixo, contra os 80/80 da matéria.

     ⚠ E É `--desfecho`, E NÃO `--intro`. A abertura dos outros moldes usa o
     mesmo `--intro` e PRECISA da navegação: é dali que sai o "Começar".
     Escondê-la por `--intro` deixaria aqueles moldes sem como começar. Quem põe
     esta classe é `encerrar`, em restore-interactions.js, que é a única função
     que esconde os dois botões de uma vez.

     ⚠ E SÓ ABAIXO DE 1000px, como ele pediu. Acima disso o texto é
     centralizado na vertical (decisão dele de 09/09/2026), e ali a folga de
     baixo não é margem: é metade da centralização. */
  .tz-form--desfecho .tz-navegacao { display: none; }
  /* ⚠ A TROCA DE LOGO VIROU DO AVESSO, e a faixa preta é o motivo.
     Enquanto o formulário começava no cinza, o logo tinha de virar preto
     para aparecer, como no desktop. Agora quem está debaixo do cabeçalho é
     a faixa: logo preto sobre #1c1c1c é logo invisível.

     Abaixo de 48em bastou apagar as regras que havia aqui. De 48em a 62.5em
     não basta: ali quem troca é o próprio bundle
     (`.site-header--showcase-expanded .site-header__logo{opacity:0}`), escrito
     para um painel claro. Por isso as duas linhas abaixo, que o desfazem.
     Medido na referência: logo branco nas duas larguras, e a lupa em #7c7c7c
     nas duas também — essa fica como está. */
  .site-header--showcase-expanded .site-header__logo { opacity: 1; }
  .site-header--showcase-expanded .site-header__logo--black { opacity: 0; }
  /* As três regras que deitavam o Back nesta faixa saíram com ele: abaixo de
     1000px o único detalhe que abre é o formulário (as matérias têm página
     própria e o clique vai para lá), e o formulário não tem mais Back. */

  /* ---- a faixa preta do título ----
     Fundo, tipografia e o `display: none` de 62.5em para cima vêm do bundle:
     são as classes da própria referência. Aqui muda só o que difere por esta
     ser uma entrevista e não uma matéria.

     ⚠ O ESPAÇO DO CABEÇALHO VIROU PADDING, e não margem. Na referência são
     `margin-top: 60px`, e a tira acima da faixa fica preta porque a página
     inteira é escura. Aqui atrás dela está o carrossel: com margem, a foto
     apareceria numa tira de 80px entre o logo e a faixa. Como padding, o
     preto começa no topo da página e o Back cai dentro dele. */
  /* ⚠ `.tz-detalhe-formulario` EM TODAS ELAS, e não só `--show-detail`.
     As marquee stories do pacote são servidas com este mesmo CSS e com as
     mesmas classes de layout: sem a marca, a faixa da matéria de Tóquio
     passou a nascer com o padding do NOSSO cabeçalho (180px no lugar dos
     60 de margem dela). Quem põe a marca é `openDetail`, e só quando o
     detalhe aberto é um formulário. */
  /* ---- a sanduíche que faz o fio nascer sozinho ----
     ⚠ ISTO É A CÓPIA DO MECANISMO, e não do desenho. Passei quatro rodadas
     tentando acertar a espessura de um fio desenhado, e ele nunca ia bater:
     o da matéria é uma FATIA DE PIXEL — o branco do `<main>` escapando sob a
     borda da faixa preta —, e o tanto que escapa depende do zoom e da
     densidade da tela. Provado pintando o `<main>` da matéria de vermelho
     com o nosso fio desligado: o fio ficou vermelho.

     Copiada a montagem, o navegador produz o mesmo fio aqui, com a mesma
     espessura e o mesmo tom em qualquer tela — inclusive sumindo onde ele
     some lá, como no celular em zoom 100%.

     São três camadas, na mesma ordem em que a matéria as pinta:
       1. o PRETO do `.tz-faixa-fundo`, que é a tela do `body` de lá: cobre
          tudo, inclusive a tira do cabeçalho, sem nenhuma borda no meio;
       2. o BRANCO do `::before`, do tamanho exato da faixa, que é o `<main>`;
       3. o PRETO do `::after`, do mesmo tamanho, que é a faixa em si. É a
          borda superior DELE que deixa vazar a fatia de branco.

     ⚠ A TIRA DE CIMA NÃO PODE TER BORDA PRÓPRIA. Na primeira tentativa ela
     era um bloco separado que terminava exatamente onde a faixa começa, e
     essa segunda emenda fez aparecer fio no celular — onde a referência não
     tem nenhum. Por isso o preto de cima virou o fundo do embrulho inteiro:
     assim existe UMA borda só na página, a mesma que existe lá.

     O `flow-root` segura a margem da faixa dentro do embrulho; sem ele a
     margem escapa e o embrulho desce junto, acabando com a borda. */
  .tz-faixa-fundo {
    background: #1c1c1c;
    display: flow-root;
    position: relative;
    z-index: 30;
  }
  .showcase-layout--show-detail.tz-detalhe-formulario .tz-faixa {
    /* O preto da faixa sai daqui e vira o `::after`: o fundo do elemento
       pinta ANTES dos filhos negativos, e o branco tem de ficar entre os
       dois. */
    background: none;
    margin-top: var(--tz-faixa-topo);
    /* 100px em cima e embaixo do título, como na matéria. O que antes era
       padding de topo virou a margem acima: é ela que cria a borda. */
    padding: 6.25rem 0;
    position: relative;
  }
  .showcase-layout--show-detail.tz-detalhe-formulario .tz-faixa::before,
  .showcase-layout--show-detail.tz-detalhe-formulario .tz-faixa::after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    /* Negativo: pintam acima do fundo do embrulho e abaixo do título. Entre
       si vale a ordem do documento, então o `::after` cobre o `::before`. */
    z-index: -1;
  }
  .showcase-layout--show-detail.tz-detalhe-formulario .tz-faixa::before { background: #fff; }
  .showcase-layout--show-detail.tz-detalhe-formulario .tz-faixa::after { background: #1c1c1c; }
  .showcase-layout:not(.tz-detalhe-formulario) .tz-faixa-fundo,
  .tz-detalhe-formulario:not(.showcase-layout--show-detail) .tz-faixa-fundo {
    display: none;
  }
  /* ⚠ SEM BACK, por pedido do Lucca em 02/09/2026: a matéria não tem, e o
     formulário passa a não ter abaixo de 1000px.

     A consequência está dita: o painel não é navegação, não entra no
     histórico, então o botão do navegador também não volta para a capa —
     daqui só se sai recarregando. Na matéria isso não acontece porque ela
     é uma página de verdade. */
  .showcase-layout--show-detail.tz-detalhe-formulario .showcase__back-wrapper { display: none; }
  /* (⚠ ESTEVE AQUI DUAS VEZES uma exceção para o painel de TEXTO, e as duas
     saíram. Em 15/09/2026, quando ele abria também no celular e sem o Voltar
     quem só quis ler sairia recarregando a página; em 16/09/2026, quando o
     "Sobre nós" ficou sem página irmã e precisou abrir painel aqui.

     Na segunda vez ficou medido o que ela custa: o `.showcase__back-wrapper` é
     o ÚLTIMO filho do `<main>`, depois do rodapé, e acima de 1000px só não se
     nota porque o bundle o deixa `position: fixed`. Devolvido só com `display`,
     ele cai 1294px abaixo do topo, embaixo do rodapé preto. Para servir, tem de
     ser reancorado no começo do cinza, com `--tz-faixa`, e o miolo tem de
     ganhar respiro para ele.

     Enquanto as três manchetes de texto tiverem página irmã, o clique no
     celular navega e não há painel de texto nesta faixa — nada a excetuar.) */


  /* ---- SEM MÍNIMO: o miolo tem o tamanho do que ele diz ----
     Esta regra já teve três formas, e a história explica a de agora.

     Primeiro foi `min-height: calc(100vh - faixa)`, para o preto do rodapé
     nunca começar antes da dobra. Depois virou `616px`, o número literal do
     cinza da matéria num celular de 375 — e eu já tinha mostrado, medindo,
     que a matéria NÃO tem mínimo nenhum: aqueles 616 são só o comprimento
     daquele press release (encurtando o texto dela por script, o rodapé dela
     sobe igual ao nosso).

     O mínimo saiu em 02/09/2026, com o Lucca comparando as margens lado a
     lado: qualquer mínimo obriga a sobra a ir para algum lugar, e os dois
     lugares possíveis estragam o enquadramento — no pé, vira assimetria; 
     dividida, engorda as margens para além dos 80px da referência. Sem
     mínimo não há sobra, e as margens são as de lá: 80 em cima, 80 embaixo,
     em toda tela.

     ⚠ O QUE ISSO CUSTA, e é conhecido: nas perguntas curtas o cinza termina
     cedo e o preto do rodapé aparece antes da dobra. As barras do rodapé
     cobrem os 108px de baixo da tela, então parte disso fica escondida —
     mas não tudo. Foi escolha dele, com o preço dito. */

  /* ---- o formulário deixa de ser painel e vira documento ----
     De 62.5em para cima ele tem a altura do painel e se divide em faixas,
     com Voltar/Avançar ancorados na base e a pergunta rolando por dentro do
     palco. Aqui isso só produzia vão morto: numa tela de 812px sobravam
     ~300px vazios entre a pergunta e os botões. Em fluxo, cada tela tem a
     altura do que ela pergunta, os botões vêm logo abaixo, e quem rola é a
     página — que é o que a matéria faz.

     ⚠ A CADEIA DE `height: 100%` TEM DE CAIR INTEIRA. Basta um elo de pé
     (o <div> anônimo, o .rte, o .tz-form ou o palco) para a altura travada
     voltar e o vão com ela. */
  .showcase-copy__body.tz-com-formulario,
  .showcase-copy__body.tz-com-formulario > div,
  .showcase-copy__body.tz-com-formulario > div > .rte,
  .tz-form { height: auto; }
  .tz-palco { flex: none; overflow-y: visible; }
  .tz-intro { margin: 0; max-height: none; overflow-y: visible; }
  /* Os 50px que descem a pergunta no painel saem: aqui o respiro de cima é
     o `padding-top` de 80px do `.showcase-copy`, como na matéria. */
  .tz-pergunta--ativa { margin-top: 0; }
  :is(.tz-pergunta--ativa, .tz-pergunta--saindo):has(textarea):not([data-etapa="pagamento"]) {
    height: auto; margin-top: 0;
  }
  /* Sem folga do palco para absorver, o campo do relato para de esticar: a
     caixa nasce com quatro linhas e cresce com o texto (ver
     `ajustarTextarea`, que aqui trabalha sem teto). */
  :is(.tz-pergunta--ativa, .tz-pergunta--saindo) .tz-campo:has(textarea) { flex: none; }
}

/* ---------- acima de 767: o Avançar é o mesmo losango, espelhado e cheio ----
   Pedido do Lucca em 02/09/2026, na sequência do Voltar: mesmo estilo, seta
   virada para o outro lado, e mais destaque sem sair do padrão de cores.

   A geometria é a mesma do `.showcase__back` (ver o bloco abaixo, onde ela
   está documentada valor por valor). O que muda são três coisas:

     1. a seta aponta para a direita — vem de graça, porque o molde já traz
        `icon-chevron-thin-right` neste botão;
     2. os -3px que centram a chevron no losango viram +3px, porque a
        assimetria do glifo espelha junto;
     3. o losango nasce CHEIO de #2354e8, com a chevron branca por cima. É
        daqui que vem o destaque: primário preenchido, secundário só de
        contorno, que é o par que o site usa e o mesmo que as duas barras já
        fazem no celular.

   ⚠ O QUADRADO QUE DESLIZA MUDA DE CAMADA. No Voltar ele vive em
   `z-index: -2`, atrás de um losango transparente. Aqui o losango tem fundo,
   então um quadrado atrás dele não apareceria: ele sobe para cima do fundo.

   ⚠ E A CHEVRON TROCA DE COR NO HOVER, nos dois botões, porque o fundo dela
   troca. No Avançar o losango é azul com chevron branca e o hover o enche de
   BRANCO — chevron branca sobre branco desapareceria, então ela vira azul. No
   Voltar acontece o inverso (ver o bloco abaixo). A transição tem a mesma
   duração do deslize, senão a cor pularia no meio do caminho.

   ⚠ O RÓTULO DO PRIMÁRIO É #3f3f3f, o mesmo dos títulos dos inputs (que o
   herdam do `.tz-form`). Ele já foi #2354e8 e já foi o cinza #7c7c7c do
   Voltar; o Lucca escureceu em 02/09/2026. O Voltar segue cinza, então a
   palavra também carrega um pouco da hierarquia — o peso maior continua
   sendo o losango cheio.

   ⚠ O `min-width` SAIU E VOLTOU NO MESMO DIA (08/09/2026). O Lucca pediu o
   losango também no celular, e a `@media` passou a valer em qualquer largura;
   horas depois ele viu os dois lado a lado e voltou atrás: abaixo de 767 o
   Começar/Avançar é a barra do "Close", não o losango. A `@media` voltou ao
   que era, e a barra está descrita no bloco de 767 para baixo.

   ⚠ `min-width` DE 3.75rem, E ELE EXISTE PARA O LOSANGO CABER. Medido em
   09/09/2026, quando o Lucca viu a ponta do losango cortada no botão "Pagar":

     ícone ................. 28px de corpo, caixa de 1.40625em = 39,38px
     losango ............... o mesmo quadrado virado 45°, logo 39,38 × √2 = 55,68
     botão com "AVANÇAR" ... 64,05px  → o losango cabe
     botão com "PAGAR" ..... 46px     → o losango sobra 5px de cada lado

   O `.rte` que embrulha o formulário tem `overflow: hidden` (é do bundle), e o
   Avançar é encostado na borda direita por `margin-left: auto`. Com um rótulo
   curto, o que sobrava do losango caía fora e era recortado — a ponta sumia.

   3.75rem são 60px: o losango inteiro mais dois pixels de folga de cada lado,
   para não depender de arredondamento de subpixel. Quem manda na conta é o
   ÍCONE: se o corpo dele mudar, este número muda junto.

   ⚠ ELE DESFAZIA O `min-width: 6.25em` do `.tz-btn`, e o `0` que estava aqui
   era de propósito — o botão do painel não é caixa, é marca com palavra
   embaixo, e 100px de piso o alargariam sem motivo. 60px é o piso que a marca
   pede, e não o da caixa que ela deixou de ser.

   ⚠ E VALE PARA O VOLTAR PELO MESMO MOTIVO. "VOLTAR" ainda é largo o bastante
   hoje, mas ele é encostado na borda ESQUERDA, e um rótulo mais curto ali
   cortaria a ponta do mesmo jeito. */
@media screen and (min-width: 768px) {
  .tz-navegacao [data-avancar] {
    background: none;
    border: 0;
    color: #3f3f3f;
    font: 400 .875rem/1.1 Rubik, sans-serif;
    letter-spacing: normal;
    min-width: 3.75rem;
    overflow: visible;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
  }
  .tz-navegacao [data-avancar]:before { content: none; }
  /* ⚠ `:not([disabled])` EM TODO HOVER DESTE BOTÃO, e é a única forma que se
     sustenta. Pedido do Lucca em 10/09/2026, em duas passadas: na primeira eu
     prendi só o losango, repetindo os valores de repouso dele num
     `[disabled]:hover` — e sobrou a SETA BRANCA, que muda de cor por esta regra
     aqui e continuava mudando. Prender canal por canal é jogo de gato e rato:
     são três (a cor do botão, a cor da seta, o losango que se preenche), e
     cada um repetido é um valor a mais para sair de sincronia com o repouso.

     Desarmar o hover na origem resolve os três de uma vez e não duplica valor
     nenhum: sem hover, o que vale é a regra de repouso, que já existe. */
  .tz-navegacao [data-avancar]:not([disabled]):hover { box-shadow: none; color: #3f3f3f; }
  .tz-navegacao [data-avancar]:not([disabled]):hover .tz-btn__icone { color: #2354e8; }

  /* ⚠ SEM A SOMBRA DE FOCO, e ela não vinha de nós: é o
     `box-shadow: 0 6px 20px 5px rgba(0,0,0,.15)` que o `.tz-btn--seta:focus`
     herdou do botão de referência. Naquele botão, retangular, a sombra
     acompanha a borda; nestes, que são um losango dentro de uma caixa
     transparente, ela desenha o retângulo INTEIRO — o quadrado acinzentado
     que aparecia atrás do losango ao clicar. O Lucca pediu para tirar.

     ⚠ E O TECLADO NÃO FICA SEM AVISO. Apagar `:focus` e parar aí deixaria
     quem navega por Tab sem saber onde está. Em vez de sombra, o foco de
     teclado (`:focus-visible`, que o clique de mouse não dispara) acende o
     MESMO preenchimento do hover — inclusive a troca de cor da seta. */
  .tz-navegacao [data-voltar]:focus,
  .tz-navegacao [data-avancar]:focus { box-shadow: none; outline: none; }
  .tz-navegacao [data-voltar]:focus-visible .tz-btn__losango:after,
  .tz-navegacao [data-avancar]:focus-visible .tz-btn__losango:after {
    left: -25%;
    top: -25%;
  }
  .tz-navegacao [data-voltar]:focus-visible .tz-btn__icone { color: #fff; }
  .tz-navegacao [data-avancar]:focus-visible .tz-btn__icone { color: #2354e8; }
  .tz-navegacao [data-avancar] .tz-btn__icone {
    color: #fff;
    transition: color .35s ease-out;
    display: block;
    font-size: 1.75rem;
    height: 1.40625em;
    margin: 0 auto .75em;
    overflow: visible;
    padding-top: .234375em;
    position: relative;
    width: 1.40625em;
    z-index: 1;
  }
  .tz-navegacao [data-avancar] .tz-btn__icone:before { margin-left: 3px; }
  .tz-navegacao [data-avancar] .tz-btn__losango {
    background: #2354e8;
    border: 1px solid #2354e8;
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: rotate(45deg);
    width: 100%;
    z-index: -1;
  }
  .tz-navegacao [data-avancar] .tz-btn__losango:after {
    background-color: #fff;
    content: "";
    display: block;
    height: 150%;
    left: 85%;
    position: absolute;
    top: 85%;
    transform: rotate(-45deg);
    transition: top .35s ease-out, left .35s ease-out;
    width: 150%;
    z-index: 1;
  }
  /* O quadrado branco que varre o losango — a animação de hover deste botão no
     desktop. Travado, ela não roda: ver o `:not([disabled])` lá em cima, que
     vale para os três canais do gesto. */
  .tz-navegacao [data-avancar]:not([disabled]):hover .tz-btn__losango:after { left: -25%; top: -25%; }
  /* Desabilitado (o "Enviando…" dos passos que falam com o servidor, e os
     porteiros desde 10/09/2026) mantém a opacidade que o botão já usava. */
  .tz-navegacao [data-avancar][disabled] { opacity: .4; }
}

/* ---------- de 768 a 1000: o Voltar é o Back, no lugar do Voltar ----------
   Pedido do Lucca em 02/09/2026. Acima de 1000px o Voltar do rodapé sumiu e
   quem volta é o Back do painel; nesta faixa intermediária ele continua no
   rodapé, à esquerda, mas com a APARÊNCIA do Back.

   ⚠ ISTO RESSUSCITA A CHEVRON E O LOSANGO, que saíram destes botões em
   02/09/2026, quando eles viraram réplica do "Pro Bono". O HTML nunca perdeu
   as peças — `.tz-btn__icone` e `.tz-btn__losango` seguem nos sete moldes, só
   escondidos —, então aqui é questão de reacendê-las.

   Os valores são os do `.showcase__back` do bundle. No corpo do botão eles
   viram `rem`, porque o formulário roda numa escala de 20px; dentro do ícone
   seguem em `em`, que é como a referência os escreve — ali `1em` já são os
   28px dele:
     .showcase__back          font-size .875em (14px), #7c7c7c, caixa alta
     .showcase__back-icon     2em, lado de 1.40625em, padding-top .234375em,
                              margin-bottom .75em
     .showcase__back-diamond  borda de 1px #7c7c7c, girada 45 graus
     :after                   quadrado de 150% que desliza na diagonal no
                              hover (de 85% para -25%) e preenche o losango

   ⚠ O PREENCHIMENTO É PRETO, e na referência é branco. Pedido do Lucca em
   02/09/2026: lá o Back vive na coluna escura, onde branco é o contraste;
   aqui ele está sobre o cinza #e3e3e3 do formulário, e branco quase não
   aparecia. Com #1c1c1c a chevron cinza também desapareceria, então ela vira
   branca no hover, na mesma duração do deslize.

   ⚠ A FAIXA DESCEU ATÉ ZERO E VOLTOU PARA 768 no mesmo dia (08/09/2026),
   pelo mesmo motivo do bloco do Avançar acima: por algumas horas o celular
   teve este Back no lugar da barra branca, e o Lucca preferiu as barras. */
@media screen and (min-width: 768px) and (max-width: 999.98px) {
  /* Os dois botões alinhados pelo pé: o Voltar fica mais alto que o Avançar
     (ícone mais rótulo), e sem isto o `stretch` do flex esticaria o Avançar
     junto com ele. */
  .tz-navegacao { align-items: flex-end; }
  .tz-navegacao [data-voltar] {
    background: none;
    border: 0;
    color: #7c7c7c;
    font: 400 .875rem/1.1 Rubik, sans-serif;
    letter-spacing: normal;
    min-width: 3.75rem;
    overflow: visible;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
  }
  /* O painel que subia no hover não existe mais neste botão: o gesto agora é
     o losango se preenchendo. */
  .tz-navegacao [data-voltar]:before { content: none; }
  .tz-navegacao [data-voltar]:hover { box-shadow: none; color: #7c7c7c; }
  .tz-navegacao [data-voltar]:hover .tz-btn__icone { color: #fff; }
  .tz-navegacao [data-voltar] .tz-btn__icone {
    display: block;
    transition: color .35s ease-out;
    font-size: 1.75rem;
    height: 1.40625em;
    margin: 0 auto .75em;
    overflow: visible;
    padding-top: .234375em;
    position: relative;
    width: 1.40625em;
    z-index: 1;
  }
  /* Os -3px são os da referência: a chevron não é centrada na própria caixa,
     e sem eles ela nasce à direita do meio do losango. */
  .tz-navegacao [data-voltar] .tz-btn__icone:before { margin-left: -3px; }
  .tz-navegacao [data-voltar] .tz-btn__losango {
    border: 1px solid #7c7c7c;
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: rotate(45deg);
    width: 100%;
    z-index: -1;
  }
  .tz-navegacao [data-voltar] .tz-btn__losango:after {
    background-color: #1c1c1c;
    content: "";
    display: block;
    height: 150%;
    left: 85%;
    position: absolute;
    top: 85%;
    transform: rotate(-45deg);
    transition: top .35s ease-out, left .35s ease-out;
    width: 150%;
    z-index: -2;
  }
  .tz-navegacao [data-voltar]:hover .tz-btn__losango:after { left: -25%; top: -25%; }
  /* ⚠ NESTA FAIXA OS BOTÕES NÃO MUDAM DE COR (Lucca, 08/09/2026): o Voltar
     fica sempre vazado com traços cinza, o Avançar sempre com o losango azul
     cheio. É o desenho que a faixa já mostrava EM REPOUSO — o que sai é a
     troca no hover, no foco e no clique.

     São dois canais, e os dois precisam ser presos: a COR DO ÍCONE e o
     losango, que se preenche por um `::after` deslizando de `85%` para
     `-25%`. Prender só um deixa metade do gesto vivo.

     `:focus` junto com `:hover` e `:active` porque o clique deixa o botão
     focado — sem ele o Avançar ficava com a cor trocada depois de clicado,
     que foi exatamente o que se pediu para tirar.

     ⚠ O `:not([disabled])` DE CADA LINHA NÃO É SOBRE ESTAR DESATIVADO. Ele
     está aqui por PESO, e a história é curta: em 10/09/2026 as regras de hover
     da faixa de cima ganharam `:not([disabled])` para o botão travado parar de
     reagir ao mouse. Com isso elas foram de (0,4,1) para (0,5,1) — `:not()`
     vale o que vale o seu argumento — e passaram a vencer estas aqui, que
     tinham (0,4,1) e só ganhavam por ordem. O efeito apareceu na hora: nesta
     faixa, clicar no Avançar deixava o losango BRANCO e assim ficava, porque
     o ponteiro segue em cima depois do clique. O Lucca viu no mesmo dia.

     Repondo o mesmo qualificador dos dois lados, as duas voltam a (0,5,1) e
     estas, que vêm depois no arquivo, voltam a mandar. Com o botão travado
     nenhuma das duas casa, e aí vale o repouso — que é o que se quer lá também.

     ⚠ A REGRA GERAL DESTE PAR DE FAIXAS: elas se equilibram por ORDEM, não por
     peso. Mexer na especificidade de um lado sem mexer no outro quebra em
     silêncio, e é a segunda vez que isso acontece neste arquivo. */
  .tz-navegacao [data-voltar]:not([disabled]):hover .tz-btn__icone,
  .tz-navegacao [data-voltar]:not([disabled]):focus .tz-btn__icone,
  .tz-navegacao [data-voltar]:not([disabled]):active .tz-btn__icone { color: #7c7c7c; }
  .tz-navegacao [data-avancar]:not([disabled]):hover .tz-btn__icone,
  .tz-navegacao [data-avancar]:not([disabled]):focus .tz-btn__icone,
  .tz-navegacao [data-avancar]:not([disabled]):active .tz-btn__icone { color: #fff; }
  .tz-navegacao [data-voltar]:not([disabled]):hover .tz-btn__losango:after,
  .tz-navegacao [data-voltar]:not([disabled]):focus .tz-btn__losango:after,
  .tz-navegacao [data-voltar]:not([disabled]):focus-visible .tz-btn__losango:after,
  .tz-navegacao [data-voltar]:not([disabled]):active .tz-btn__losango:after,
  .tz-navegacao [data-avancar]:not([disabled]):hover .tz-btn__losango:after,
  .tz-navegacao [data-avancar]:not([disabled]):focus .tz-btn__losango:after,
  .tz-navegacao [data-avancar]:not([disabled]):focus-visible .tz-btn__losango:after,
  .tz-navegacao [data-avancar]:not([disabled]):active .tz-btn__losango:after {
    left: 85%;
    top: 85%;
  }
  /* ⚠ POR ÚLTIMO NA FAIXA, e isso é o que faz a regra valer. As declarações
     do Voltar (ícone e losango) vêm acima com a MESMA especificidade; escrito
     no topo do bloco, este `transition: none` era sobrescrito por elas e só o
     Avançar parava de animar. Medido: Avançar 0s, Voltar 0.35s. */
  /* ⚠ NESTA FAIXA OS BOTÕES NÃO ANIMAM (Lucca, 08/09/2026). O estado de hover
     continua — o losango se preenche, o ícone troca de cor —, mas acontece no
     quadro, sem os .35s.

     É o mesmo recurso que a faixa do celular já usava (`transition: none`) e
     que o `prefers-reduced-motion` usa: aqui a animação não é desligada por
     regra de acessibilidade, é decisão de desenho para esta largura.

     São cinco alvos porque a animação mora em cinco lugares: o painel que sobe
     no Avançar (`.tz-btn--seta:before`), a cor do ícone dos dois, e o losango
     que se preenche nos dois. Esquecer um deixa metade do gesto animada, que
     lê pior que o gesto inteiro. */
  .tz-btn,
  .tz-btn--seta,
  .tz-btn--seta:before,
  .tz-navegacao [data-voltar] .tz-btn__icone,
  .tz-navegacao [data-avancar] .tz-btn__icone,
  .tz-navegacao [data-voltar] .tz-btn__losango:after,
  .tz-navegacao [data-avancar] .tz-btn__losango:after {
    transition: none;
  }
}

/* ---- título da escolha, na página de serviços ----------------------------
   O título da família (Judicial / Extrajudicial) usa a classe
   `services-areas__listing-link` para herdar a aparência do original — o azul
   #2354e8 e o peso 700. Mas ele não navega: na referência o título aponta para
   a página de visão geral da área, e não existe uma por família. Só o hover
   sai, porque é o que promete um clique que não vem;
   `.services-areas__listing-link:hover{color:#3f3f3f}` fica valendo para os
   itens da lista, que são links de verdade.

   O `:not([href])` é o que separa os dois casos, e não uma classe nova: se um
   dia o título virar `<a href>`, o hover volta sozinho. */
.services-areas__listing-parent .services-areas__listing-link:not([href]):hover {
  color: #2354e8;
}

/* Atalho de teste da tela de pagamento (ver `montarPagamento`). Deliberadamente
   feio e fora da linguagem visual do resto: ele nao e um controle do produto, e
   no dia em que aparecer numa tela que nao devia, tem que saltar aos olhos. */
.tz-pagamento__simulado {
  background: #b3261e; border: 0; color: #fff; cursor: pointer;
  display: block; font-size: .875em; letter-spacing: .04em; margin: 1.25em 0 0;
  padding: .7em 1.2em; text-transform: uppercase;
}
.tz-pagamento__simulado[disabled] { opacity: .6; cursor: default; }

/* ---------- de 767px para baixo: sem hover e sem animação ----------
   ⚠ EM PIXEL, E NÃO EM `em`. Eu tinha escrito `48em` / `47.9375em` para
   copiar a unidade da referência, e o argumento parecia bom — só que `em`
   depende do tamanho de fonte raiz e do zoom, e a fronteira escorregava um
   pixel conforme o navegador. O Lucca mediu 766 onde eu tinha medido 767.
   O pedido é um número de pixels, então a unidade honesta é o pixel: 767 é
   767 em qualquer zoom.

   Aqui morrem as TRANSIÇÕES. Os hovers já não existem nesta faixa (ver as
   regras acima); o que sobraria animando é o estado aberto do dropdown e a
   seta que tomba. Num celular isso é meio segundo de espera entre tocar e
   ver a lista, sem nada a ganhar: não há cursor a acompanhar.

   Pedido do Lucca em 02/09/2026, valendo para todo botão animado. */
/* ⚠ `767.98px`, E NAO `767px`. Entre `max-width: 767px` e o
   `min-width: 768px` da faixa de cima ha um VAO: uma largura de 767,5 nao
   casa com nenhuma das duas, e os botoes caiam no estilo base — nem a barra
   fixa daqui, nem o losango de la. Largura fracionaria nao e exotica: sai de
   zoom do navegador e de tela HiDPI. Foi o que o Lucca fotografou em
   08/09/2026 dizendo "olha como estao em 767".
   O .98 e o mesmo truque do Bootstrap, e cobre qualquer fracao real. */
@media screen and (max-width: 767.98px) {
  .tz-btn,
  .tz-btn--seta,
  .tz-btn--seta:before,
  .tz-select__gatilho,
  .tz-select__seta {
    transition: none;
  }


  /* ---- Começar/Avançar: A BARRA DO "CLOSE", COM AS CORES DO "CLOSE" ----
     Pedido do Lucca em 08/09/2026, com a captura `kirkland.com-1788895636926`
     na mão. Por algumas horas neste dia o celular teve o losango da faixa de
     cima; ele viu os dois e voltou para a barra — mas agora com as cores da
     referência, e não com o azul do site.

     A regra de lá, copiada valor a valor do bundle:

       .showcase-layout__close-performance {
         background-color: #1c1c1c;
         border-top: 1px solid #e3e3e3;
         bottom: 0; left: 0; width: 100%;
         color: #1ac6ba;
         padding: 15px;
         position: fixed;
         text-transform: uppercase;
         z-index: 25;
       }

     É o "Close" que fecha o painel de últimas notícias — a barra que aparece
     colada na base da tela quando se abre "More News".

     ⚠ A GEOMETRIA É A DE LÁ; A COR, NÃO. Esta barra já teve três pinturas em
     08/09/2026, todas pedidas pelo Lucca: o azul chapado do site, depois as
     cores do "Close" (fundo #1c1c1c, rótulo no turquesa #1ac6ba, fio de
     #e3e3e3 no topo), depois uma fase em que o Começar ficava com as cores do
     Close e só o Avançar era azul. A última palavra é a mais simples:

       Começar e Avançar ..... o azul chapado, #2354e8, com rótulo branco.

     ⚠ E SEM `border-top`. O Close tem um fio #e3e3e3 para se separar do preto
     do painel dele; sobre o azul chapado, contra o cinza do formulário, ele
     não separa nada — só sujaria a borda. Saiu junto com o preto.

     ⚠ O VOLTAR CONTINUA A BARRA BRANCA. Ele não foi mencionado no pedido, e o
     par preto/branco lê como primário/secundário sem precisar de mais nada.

     ⚠ E SEM `display` NENHUM AQUI. `.tz-btn[hidden]` tem a mesma
     especificidade destas regras e vem antes: qualquer `display` escrito aqui
     ganharia dele, e o botão que some quando o limite por IP é atingido
     voltaria a aparecer — como barra fixa, ainda por cima. */
  /* ---- as barras vivem NO FLUXO, logo depois do subtítulo do campo -------
     Pedido do Lucca em 09/09/2026, desfazendo a ancoragem que vigorou de
     02/09 a 08/09 e outra vez no fim de 08/09. Elas voltam a ser conteúdo do
     formulário: rolam com a página e não flutuam sobre nada. O rodapé volta
     junto (o `display: none` dele saiu do bloco acima).

     Com a fixação foram embora as três muletas que só existiam por causa
     dela, e que estavam logo abaixo: a folga de 75/129px no pé do miolo, o
     `scroll-padding-bottom` do `html`, e o `min-height` que dava à página o
     que rolar quando a entrevista era a última coisa dela. Com rodapé, o
     documento é longo por conta própria.

     ⚠ O RESPIRO É `5rem`, E É UMA MEDIDA EMPRESTADA. O Lucca pediu em
     09/09/2026 que a distância acima do Começar fosse a mesma que existe
     acima do texto de abertura ("No Juizado Especial Federal..."), e que essa
     mesma distância separasse o Avançar do subtítulo nas perguntas. Aquela
     distância é o `padding-top: 5rem` que o miolo tem nas telas só de texto
     (a regra fica na faixa de cima, junto com o `veredito` e o `pagamento`),
     e é o mesmo 5rem que ele já tem no pé.

     Era 1.75em (28px) até aqui — o respiro que separa o subtítulo do campo
     seguinte. Passou a 80px, quase três vezes maior: o botão deixa de ser o
     próximo item da lista e passa a ser outra coisa, com ar em volta.

     ⚠ EMPILHADOS, E O AVANÇAR EM CIMA — o azul acima do quase-branco, como as
     duas barras sempre estiveram. No DOM o Voltar vem primeiro, então a ordem
     visual é dita aqui, e não trocando o HTML: o Voltar precisa continuar
     antes no DOM para o leitor de tela e para o Tab.

     ⚠ E O VÃO DE 15px ENTRE ELAS é o mesmo `padding` que cada barra tem por
     dentro: a distância não é número solto, sai do próprio desenho da barra.
     Coladas elas ficavam só quando ancoradas, onde a troca de cor bastava
     para separá-las. */
  /* ⚠ UM VALOR SÓ, COM NOME, porque ele aparece em dois lugares que TÊM de
     andar juntos: o respiro acima do botão, aqui, e a reserva no pé do miolo
     que guarda o lugar dele quando ele sai do fluxo (mais abaixo). Mexer num
     sem o outro faz o texto passar por baixo do botão nas perguntas longas.

     Era `5rem` (80px) — a mesma distância que existe acima do texto de
     abertura. Dobrou para `10rem` em 09/09/2026, a pedido do Lucca, e no
     mesmo dia ganhou mais uma margem lateral no Android: 11.25rem (180px).

     ⚠ QUEM ESCREVE O VALOR É O JS, e por isso não há declaração aqui — só o
     `var()` com o fallback. São dois números por aparelho:

       iPhone .... 10rem     (160px)
       Android ... 11.25rem  (180px)

     A diferença foi pedida olhando o Android; nenhuma razão técnica a
     sustenta, é preferência de tela. O JS já fareja a plataforma para decidir
     quanto rolar (ver `EH_IOS` em restore-interactions.js) e aproveita a mesma
     decisão para escrever este valor no `<html>`, de onde ele desce por
     herança. O fallback de `10rem` vale enquanto o JS não escreveu, e para
     quem chegar sem JS.

     ⚠ E A ABERTURA SEGUE O MESMO NÚMERO. Ela perdeu a simetria que ele tinha
     pedido dois pedidos antes: lá o respiro acima do texto continua 80px e o
     de baixo passa a 160/180. Se ele quiser os dois iguais de novo, é aqui. */
  .tz-navegacao {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: var(--tz-respiro-botao, 10rem);
    padding-top: 0;
  }
  /* ⚠ E O MESMO RESPIRO NAS TELAS DE TEXTAREA, que tinham exceção própria.
     A regra do topo do arquivo (`.tz-form:has(... textarea) .tz-navegacao`)
     encolhe esse respiro para `padding-top: 1.35em` — 27px — e existe para o
     PAINEL de 1000px para cima, onde o textarea é flexível e cresce para
     ocupar o que os botões devolvem. Aqui não há painel nem altura fixa: o
     formulário é documento, o textarea tem a altura que tem, e encolher o
     respiro só desalinhava aquela tela das outras.

     Medido antes: 21,6px entre o subtítulo "Como você contaria a uma
     pessoa..." e o Avançar, contra 80 em todas as outras. O Lucca viu a
     diferença e pediu o mesmo espaço (09/09/2026).

     ⚠ O SELETOR É O MESMO DA REGRA DE LÁ, letra por letra, e é isso que faz
     ele valer: mesma especificidade (0,3,1), e este vem depois no arquivo.
     Escrever só `.tz-navegacao` aqui não bastaria — os (0,1,0) dele perdem
     para os (0,3,1) de lá mesmo dentro do media query. */
  .tz-form:has(.tz-pergunta--ativa textarea, .tz-pergunta--saindo textarea) .tz-navegacao {
    margin-top: var(--tz-respiro-botao, 10rem);
    padding-top: 0;
  }

  /* ---- O VOLTAR VOLTOU, DEBAIXO DO AVANÇAR -----------------------------
     Pedido do Lucca em 09/09/2026, horas depois de ele ter mandado tirá-lo
     desta faixa: volta como segunda barra da coluna, com o mesmo vão de 15px
     que separava os dois botões antes da fixação, e herda os 20px de folga que
     eram do Avançar — quem encosta na borda de baixo agora é ele.

     Com isso volta também O ÚNICO CAMINHO DE VOLTA abaixo de 767, que tinha
     ficado sem nenhum: o Back do canto superior esquerdo saiu desta faixa em
     02/09/2026, e sem este botão quem errasse uma resposta só se corrigia
     recarregando a página e recomeçando a entrevista.

     ⚠ NÃO HÁ REGRA AQUI, e é de propósito: a de cima (`display: none`, que
     durou poucas horas) foi apagada, e o botão volta a obedecer só o
     `voltar.hidden` do JS. Ele é escondido na abertura e nas telas de onde não
     se volta (pagamento, dossiê); em todas as perguntas ele aparece, inclusive
     na primeira — ali leva de volta ao texto de abertura
     (`voltar.hidden = atual === 0 && !intro` em restore-interactions.js, e
     `intro` é o elemento, que no molde do `jef` existe sempre). */

  /* ---- A COLUNA DE BOTÕES PARA NO PÉ DA TELA ---------------------------
     Pedido do Lucca em 09/09/2026: quando a rolagem do Começar termina, os
     botões têm de estar na borda de baixo da visualização, à mesma distância
     da borda que a margem lateral da página — 20px. Era o Avançar sozinho
     encostando ali; desde a volta do Voltar (mesmo dia, ver acima) quem
     encosta é o Voltar, e o Avançar fica uma barra acima. Os 20px são os
     mesmos — o que mudou foi de qual botão eles se medem.

     ⚠ ELA NÃO É FIXA. Fica colada no pé do MIOLO (`position: absolute` dentro
     do `.showcase-copy`, que já é `position: relative`), não da tela: rola com
     a página como qualquer conteúdo, e é o miolo que se estica para que o pé
     dele coincida com o pé da tela no fim da rolagem. Anexada à tela ela
     ficaria por cima do texto ao rolar, que é o desenho que saiu hoje de manhã.

     A conta, em 402x874 no Android:

       miolo começa em .................... 312  (faixa preta)
       miolo mede ......................... tela - 312 + rolagem
       logo o pé dele fica em ............. tela + rolagem
       coluna colada a 20 do pé ........... tela + rolagem - 20
       depois de rolar `rolagem` .......... tela - 20   ← 20px da borda ✓

     A conta não mudou com a volta do Voltar porque quem está colado no pé é a
     COLUNA, e não um botão: ela cresceu 69px para CIMA (54 do botão + 15 do
     vão) e o pé dela ficou onde estava.

     A `--tz-rolagem` é escrita pelo JS antes de rolar (60 no Android, 120 no
     iPhone, por causa da barra de status que cobre a página lá). Sem ela o
     fallback de 60px vale, que é o caso do Android.

     ⚠ A RESERVA NO PÉ GUARDA O LUGAR DELA. Como a coluna saiu do fluxo, sem
     ela o texto de uma pergunta longa passaria por baixo. São os números do
     desenho somados, de baixo para cima: 20 da borda + 54 do Voltar + 15 do
     vão + 54 do Avançar + o respiro (`--tz-respiro-botao`, hoje 160px). Os 69
     do meio entraram com a volta do Voltar; sem eles a última linha de uma
     pergunta longa acabaria debaixo do Avançar. Numa pergunta longa o miolo
     cresce além do mínimo e o respiro fica exatamente nesse valor; numa curta
     o mínimo manda, e o respiro cresce junto com a sobra.

     ⚠ "tela" AQUI É `dvh`, E NÃO `vh` — e a troca é de 09/09/2026, depois de
     o Lucca ver que no celular o botão não parava onde para no computador.

     A causa: `100vh` é a tela COM AS BARRAS DO NAVEGADOR RECOLHIDAS, não a
     área visível. Enquanto a barra de endereço está à mostra, o visível é 60 a
     100px menor — e o miolo, dimensionado pelo número maior, termina abaixo da
     borda visível, levando o botão junto para debaixo da barra. No painel do
     computador não há barra nenhuma, os dois valores coincidem, e por isso o
     defeito não aparecia nas medições daqui.

     `100dvh` é a altura visível AGORA. Eu tinha recusado esse valor antes,
     argumentando que ele muda quando a barra entra e sai; o fato estava certo
     e a conclusão errada — essa mudança é justamente o que mantém a conta de
     pé. Se a barra some e o visível cresce Δ, o miolo cresce Δ, o pé dele
     desce Δ e a borda visível desce Δ junto. O enquadramento se corrige.

     O `calc(100vh ...)` fica como fallback para quem não tem `dvh` (antes de
     Safari 15.4 / Chrome 108); ali o defeito volta, mas nada quebra.

     ⚠ FORA DA ABERTURA, como o resto: lá o botão continua no fluxo, 80px
     abaixo do texto, e o miolo mantém os 80 de sempre no pé. */
  .showcase-copy.tz-com-formulario:not(:has(.tz-form--intro)) {
    min-height: calc(100vh - 312px + var(--tz-rolagem, 60px));
    padding-bottom: calc(20px + 54px + 15px + 54px + var(--tz-respiro-botao, 10rem));
  }
  @supports (height: 100dvh) {
    .showcase-copy.tz-com-formulario:not(:has(.tz-form--intro)) {
      min-height: calc(100dvh - 312px + var(--tz-rolagem, 60px));
    }
  }
  .tz-form:not(.tz-form--intro) .tz-navegacao {
    bottom: 20px;
    left: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 20px;
  }
  .tz-navegacao [data-avancar] { order: 1; }
  .tz-navegacao [data-voltar] { order: 2; }
  /* O separador do flex do desktop não tem função numa coluna. */
  .tz-navegacao > span:empty { display: none; }
  .tz-navegacao [data-avancar],
  .tz-navegacao [data-voltar] {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 15px;
    width: 100%;
  }
  /* O azul do site, chapado, com o rótulo branco — nas duas telas, porque o
     Começar e o Avançar são o mesmo elemento e agora têm a mesma cor.
     (Houve aqui uma regra `.tz-form--intro` que dava outra pintura ao
     Começar; saiu em 08/09/2026, no mesmo dia em que entrou.) */
  .tz-navegacao [data-avancar] { background: #2354e8; color: #fff; }
  /* O Voltar: barra quase branca com o rótulo no preto do site.

     ⚠ `#f6f6f6` É O ÚNICO VALOR DESTE ARQUIVO QUE NÃO VEM DO BUNDLE, e não é
     chute: foi MEDIDO. O Lucca pediu em 09/09/2026 que o fundo fosse a cor da
     faixa de baixo do Android, e mandou uma captura de tela do aparelho. As
     três superfícies do sistema naquele print dão o mesmo valor:

       barra de status (topo) ............ #f6f6f6
       barra do navegador (ícones) ....... #f6f6f6
       barra do sistema (|||  O  <) ...... #f6f6f6

     (Amostragem por média dos pixels de superfície, descartando ícones e
     texto; a captura é JPEG, mas as três áreas deram o número redondo e
     idêntico, o que dá confiança de que é a cor real e não artefato.)

     Eu tinha chutado `#fafafa` antes — o grey 50 do Material. Errou por 4
     níveis, e o Lucca viu a diferença na tela.

     ⚠ O QUE ISSO NÃO É: uma garantia. A faixa é do navegador e do sistema,
     nenhum dos dois informável por API, e o valor muda com o navegador, com a
     versão e com o tema claro ou escuro. Emenda no aparelho medido; noutro,
     o efeito é só um branco levemente quebrado.

     A paleta do bundle não tem quase-branco nenhum: só `#fff` e `#e3e3e3`.

     ⚠ ELE JÁ FOI QUATRO COISAS, todas pedidas: branco com texto azul (02/09 a
     08/09/2026), o próprio #e3e3e3 do miolo com texto preto — para quase sumir
     e sobrar só a palavra VOLTAR sobre o cinza —, branco de novo em 09/09, e
     este quase-branco no mesmo dia.

     ⚠ `#1c1c1c` E NÃO `#000`. É o preto do site, o mesmo dos títulos e do
     cabeçalho; preto puro não aparece em lugar nenhum deste projeto. */
  .tz-navegacao [data-voltar] { background: #f6f6f6; color: #1c1c1c; }
  /* O painel do hover não sobe mais: ele deixa de existir. */
  .tz-navegacao [data-avancar]:before,
  .tz-navegacao [data-voltar]:before { content: none; }
  /* Desabilitado continua se anunciando pela opacidade, como antes.

     ⚠ E AQUI A OPACIDADE VOLTA A SER ANIMADA, contra a regra que abre esta
     faixa — a que mata toda transição de botão no celular. Ela não vale para
     este caso, e a diferença está no que dispara cada coisa: lá o alvo eram
     hover e abertura de lista, gestos em que meio segundo de animação é meio
     segundo de espera entre tocar e ver. Isto aqui não responde a toque nenhum
     — é a resposta do porteiro enquanto a pessoa digita o CEP, e sem transição
     o botão PISCA entre 100% e 40% a cada tecla.

     Pedido do Lucca em 10/09/2026, junto com a trava dos porteiros. Só
     `opacity`: cor, sombra e o painel que sobe continuam sem transição aqui,
     como ele pediu em 02/09/2026. */
  .tz-navegacao [data-avancar],
  .tz-navegacao [data-voltar] { transition: opacity .35s cubic-bezier(.86, 0, .07, 1); }
  .tz-navegacao [data-avancar][disabled],
  .tz-navegacao [data-voltar][disabled] { opacity: .4; }

  /* O recado de falha continua no fluxo, e é o único que ainda precisa de
     respiro — mas só quando tem o que dizer. */
  .tz-recado:not(:empty) { margin-top: 1.5rem; }

  /* (SAÍRAM COM A FIXAÇÃO, em 08/09/2026: o `min-height` que impedia o
     rodapé de subir por baixo das barras e o `scroll-padding-bottom` do
     `html`, que reservava 108px para elas ao rolar até um campo em foco.
     Barra no fluxo não flutua sobre nada, então não há o que compensar.) */
}

/* ---------- o realce azul da abertura ----------
   Pedido do Lucca em 16/09/2026: "leva menos de 5 minutos" em azul, no meio do
   primeiro parágrafo.

   ⚠ FORA DA `@media`, e de propósito: a cor vale nos dois lugares que mostram
   este texto (o painel da capa e a página `/como-funciona`) e em qualquer
   largura. Só a CENTRALIZAÇÃO é do painel largo; a cor não.

   ⚠ E É O AZUL DO LINK, mas não é um link. `#2354e8` é a cor da casa, a mesma
   do `.rte a`; o trecho realçado não leva a lugar nenhum e não tem sublinhado,
   nem muda no hover. A dois parágrafos de distância há um link de verdade
   ("clique aqui para começar"), e o que separa os dois é justamente isso. */
.tz-abertura__realce { color: #2354e8; }

/* ---------- os dois parágrafos da abertura, centrados ----------
   Pedido do Lucca em 15/09/2026: "centralizando-os na tela e o clique aqui para
   começar abaixo, sem que ele conte para essa centralização".

   ⚠ SÃO DUAS COISAS, E A SEGUNDA É A DIFÍCIL. Centrar o bloco é `justify-content`
   num flex de coluna. O que não é óbvio é tirar o convite da conta: com ele no
   fluxo, o centro passa a ser o centro dos TRÊS, e os dois parágrafos sobem.
   Fora do fluxo (`position: absolute`), ele não tem altura para o centro
   dividir, e o `top: 100%` o pendura na base do bloco — logo abaixo do segundo
   parágrafo, onde quer que ele tenha parado.

   ⚠ SÓ NO PAINEL, e é por isso que o seletor pede `.tz-com-formulario`: é a
   marca que a `openDetail` põe quando o detalhe aberto é nosso, e é lá que a
   área da cópia tem altura de painel para centrar dentro. Na página
   `/como-funciona`, que mostra o mesmo texto, a seção tem a altura do que ela
   diz e não há folga nenhuma — centrar ali seria centrar em zero.

   ⚠ E A ALTURA DO `.rte` JÁ VEM DE CIMA (`.showcase-copy__body.tz-com-formulario
   > div > .rte { height: 100% }`, no alto desta folha). Sem ela o flex não teria
   o que dividir, e o `justify-content` não faria nada.

   ⚠ DENTRO DA `@media` DE 62.5em, E ISSO NÃO É ZELO: abaixo dela o painel vira
   documento em fluxo e aquela altura de 100% é desfeita, então não há folga
   para dividir. Tentei primeiro deixar as regras soltas e DESFAZÊ-LAS no bloco
   do celular; o `position: static` de lá pesava (0,1,0) contra os (0,3,0) daqui
   e perdia sem aparecer no console. O convite continuava absoluto, pendurado
   em `top: 100%` de um bloco de 456px — fora da superfície clara, invisível
   sobre o escuro. Visto na tela em 15/09/2026, a 375px. */
@media screen and (min-width: 62.5em) {
  .showcase-copy.tz-com-formulario .rte:has(.tz-abertura) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .showcase-copy.tz-com-formulario .tz-abertura { position: relative; }
  .showcase-copy.tz-com-formulario .tz-abertura__convite {
    left: 0;
    /* ⚠ SEM MARGEM, E O VÃO SAI CERTO ASSIM MESMO. Pedido do Lucca em
       16/09/2026: o convite à mesma distância do parágrafo de cima que um
       parágrafo está do outro. Esse vão é a margem de baixo do parágrafo — 27px
       na medida de hoje —, e ela está DENTRO da caixa que o `top: 100%`
       persegue: a base do bloco já cai exatamente um vão abaixo da última
       linha. Qualquer margem aqui se somaria a ele (eram 1.375em, e o vão
       media 52px contra os 27 entre os parágrafos).

       ⚠ E POR ISSO ELE ACOMPANHA O TEXTO. O número não está escrito em lugar
       nenhum: se a entrelinha ou o corpo mudarem, a margem do parágrafo muda
       junto e o convite vai atrás. */
    margin: 0;
    position: absolute;
    top: 100%;
  }
}


/* ============================================================
   O BOTAO DO AVISO DE COOKIES, NO LUGAR DO "ACCEPT" DA REFERENCIA

   ⚠ POR QUE PRECISA DE REGRA. O CSS do pacote centra o grupo de botoes dentro
   da coluna da direita (`#onetrust-banner-sdk #onetrust-button-group-parent
   { text-align: center }`). Na referencia ha DOIS botoes, entao o par centrado
   coloca o "Accept" na metade direita; com UM botao so, o nosso "Ciente" caia
   no meio da coluna — 83px a esquerda de onde o "Accept" fica.

   ⚠ MEDIDO NOS DOIS, a 1280px de largura:

      referencia .... grupo 846 → 1126 (280px)    "Accept" 988 → 1113
      nosso, antes .. grupo 905 → 1043 (138px)    "Ciente" 905 → 1030

   O grupo passa a ter a largura que teria com dois botoes, e o unico botao
   encosta a direita dele. Assim ele cai exatamente na segunda vaga, que e a do
   "Accept" — sem mexer no HTML e sem botao fantasma para ocupar a primeira.

   ⚠ OS 280px SAO A CONTA DO ORIGINAL, e nao um numero redondo: 125px de botao,
   13px de margem a direita, o espaco entre os dois inline-block e outro botao
   igual. O `text-align: right` faz o resto.

   ⚠ E SO DE 1024px PARA CIMA, que e onde a coluna dos botoes fica larga o
   bastante (`width: 30%`, e 44% a partir de 1280px). Por meia hora a regra
   valeu de 426px, e entre 897px e 1023px ela quebrava: ali a coluna tem 206px,
   os 280px do grupo transbordavam e o botao saia da tela (medido: botao em
   927 → 1052 numa janela de 950).

   ⚠ E ABAIXO DE 1024px NAO HA O QUE CORRIGIR, porque a referencia tambem muda
   de forma: medida a 950px, ela empilha os botoes e o grupo passa a ter a
   largura de um botao so, centrado na coluna estreita — que e exatamente o que
   o nosso faz sozinho, sem regra nenhuma.
   ============================================================ */
@media only screen and (min-width: 1024px) {
  #onetrust-banner-sdk #onetrust-button-group {
    width: 280px;
    text-align: right;
  }
}


/* ---------- a caixa do relato quando ela tem um texto só -------------------
   ⚠ SEM A ALÇA DE REDIMENSIONAR. `textarea.tz-campo__controle` nasce com
   `resize: vertical`, e isso nunca apareceu no relato porque ele vivia dentro
   da moldura `.tz-campo__escrita`, que desenhava a borda e escondia a alça. Com
   `data-so-placeholder` a moldura não existe mais (ver `tituloNoExemplo`, em
   restore-interactions.js) e a alça apareceu no canto — um triângulo cinza que
   não estava lá antes.

   ⚠ E QUEM MANDA NA ALTURA CONTINUA SENDO O SCRIPT: `ajustarTextarea` mede a
   folga do palco e cresce a caixa até ela. Alça e script disputando a mesma
   altura dariam um campo que volta sozinho ao tamanho anterior. */
.tz-campo[data-so-placeholder] textarea.tz-campo__controle {
  resize: none;
}


/* ---------- os cartões de cidade da página de Locais -----------------------
   ⚠ A FOTO NASCIA ANCORADA NO CANTO SUPERIOR ESQUERDO. `.location-card__figure`
   usa `background-size: cover` e nunca declarou `background-position`, então
   valia o padrão do CSS, que é `0% 0%`. As fotos são mais largas que o cartão
   (1600x1066 contra 451x349), e o que sobrava era cortado todo do lado direito:
   em Brasília, o Eixo Monumental saía de quadro e ficava a periferia da foto.

   ⚠ VALE PARA AS TRÊS CIDADES, e é de propósito. São o mesmo componente; com a
   regra em uma só, São Paulo e Rio continuariam ancorados no canto e Brasília
   centralizada, o que se lê como defeito de quem montou a página. */
.location-card__figure {
  background-position: center;
}


/* ---------- o enquadramento da foto de Brasília no carrossel ---------------
   ⚠ O PAN SOZINHO NUNCA CHEGAVA NO CONGRESSO, e a conta explica por quê. Acima
   de 62.5em a imagem ativa recebe `translateX(-15%)` (regra do pacote), e o
   elemento tem `width: 115.5%` com `background-size: cover`. Medido em
   1400x900: o elemento fica com 792px, o fundo é renderizado com 1599px, e o
   fundo é RECORTADO na borda do elemento. Ou seja, o pan revela no máximo até o
   pixel 991 da foto, de 2000. As torres do Congresso estão por volta de 1010,
   logo depois dessa borda: elas nunca entravam em quadro, por mais que a
   imagem rolasse.

   ⚠ POR ISSO QUEM MUDA É O `background-position`, E NÃO A DISTÂNCIA DO PAN.
   Empurrar o fundo para dentro do elemento move a faixa inteira da rolagem para
   a direita, que foi o pedido do Lucca em 29/09/2026: "no fim da rolagem, o
   prédio da foto esteja centralizado". Com 43,6%, a janela do fim da rolagem
   passa a ser o trecho 588 a 1431 da foto, cujo centro é 1010. Conferido na
   tela com uma régua no meio do painel: ela cai entre as duas torres.

   ⚠ E VALE SÓ PARA ESTA FOTO. O seletor é pelo NOME DO ARQUIVO no style inline,
   que é o acoplamento certo: o número 43,6% descreve onde o Congresso está
   DENTRO desta imagem, e não uma preferência de layout. Trocando a foto, a
   regra deixa de casar sozinha, que é melhor do que reenquadrar outra coisa. */
@media screen and (min-width: 62.5em) {
  .showcase-panel__img[style*="brasilia-marquee"] {
    background-position: 43.6% center;
  }
}