/* ==========================================================================
   ANOVA — "Como se associar": o passo a passo de quem ainda nao e associado.
   --------------------------------------------------------------------------
   (03/09) Arquivo NOVO, so da ANOVA. Nao e camada de tema: e uma secao que so
   existe nesta loja, entregue pelo bloco <!-- MARCA:como-se-associar -->. Na
   Zeleno o bloco e vazio e nada disto e baixado.

   DEPENDE de css/tema-anova.css: todos os tokens --anova-* sao declarados la.
   Este arquivo carrega DEPOIS dele.

   Regra de exibicao: a secao e para quem ainda nao tem acesso. Quem esta logado
   nao a ve. O `usuario-logado` no body ja e mantido pelo js/app.js desde antes
   desta secao existir — nao inventamos estado novo, so lemos o que ja havia.
   ========================================================================== */

/* A SECAO NASCE ESCONDIDA. Nao e detalhe: o js/app.js e script BLOQUEANTE de
   ~700 KB no fim do body, e a secao esta ~700 linhas ACIMA dele. Se ela nascesse
   visivel, todo associado logado veria o bloco inteiro pintado ("Como se
   associar", que e a mensagem errada para quem ja e associado) e, quando o
   app.js finalmente rodasse, ela sumiria e a pagina inteira pularia.

   Esconder por padrao e revelar e a convencao que o proprio repositorio ja usa
   para bloco grande que depende de login — ver css/app.css, .featured-showcase-
   section e #openClientButton.

   O js/anova-onboarding.js poe `esta-visivel` SEM CONDICAO. Quem decide se a
   secao aparece continua sendo a regra de baixo, que le o `usuario-logado` posto
   pelo app.js. Assim continua REATIVO: se a sessao cair depois do boot, ou se a
   pessoa sair da conta, a secao volta sozinha — coisa que uma revelacao
   condicional de uma vez so nao daria. */
.anova-onb {
  display: none;

  /* Mesma largura e mesmo respiro lateral do .store-main-layout, que e a coluna
     de conteudo da loja: assim a caixa nasce alinhada com a vitrine e com o
     banner, em vez de ter uma largura propria que so combina numa tela. O
     `--container` e da loja; o 1280px e reserva, para a regra nao morrer inteira
     se um dia essa variavel sumir. */
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 26px 22px 6px;

  /* O sumico na rolagem anima a LINHA DA GRADE (1fr -> 0fr), e nao uma altura.
     `height: auto` nao e animavel, e um `max-height` chutado deixaria a duracao
     errada — a transicao gastaria metade do tempo percorrendo espaco vazio. Com
     a linha da grade a caixa encolhe ate a altura real dela, seja qual for: vale
     inclusive quando trocar de painel muda a altura. */
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--anova-transicao),
    padding var(--anova-transicao),
    opacity 0.32s ease;
}

.anova-onb.esta-visivel { display: grid; }

/* Sumiu na rolagem. A opacidade zera junto com a altura, e nao so por elegancia:
   no fim do encolhimento sobra o filete de 1px da borda da caixa, e sem o
   desvanecer ele ficaria como um risco solto abaixo do cabecalho. */
.anova-onb.esta-oculta {
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* DEPOIS da regra acima de proposito: as duas tem a mesma especificidade (0,2,0)
   e o desempate e a ordem. Esta precisa vencer. */
body.usuario-logado .anova-onb { display: none; }

.anova-onb-caixa {
  /* Duas funcoes, as duas ligadas ao sumico na rolagem: deixa a caixa encolher
     abaixo da altura do conteudo (item de grade nasce com altura minima
     automatica, que travaria o 0fr) e corta o que sobra durante o encolhimento.
     Nada focavel encosta na borda da caixa, entao nao corta anel de foco. */
  overflow: hidden;

  /* Ancora do "x", que e absoluto. Sem isto ele se posicionaria pela secao, e
     numa tela larga acabaria fora da caixa cinza. */
  position: relative;

  /* `width: 100%` e NAO `margin: 0 auto`. Item de grade com margem automatica
     encolhe ate o conteudo em vez de esticar — foi o que aconteceu quando a
     secao virou grade para animar o sumico, e a caixa apareceu estreita no meio
     da tela. Quem centraliza agora e o `margin: 0 auto` da propria secao. */
  width: 100%;
  /* (04/09) Respiro reduzido a pedido da dona. A secao e o primeiro bloco da
     pagina e estava empurrando o banner e a vitrine para baixo da dobra. */
  padding: 26px 26px 22px;
  background: var(--anova-neutro);
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-g);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Cabecalho da secao
   -------------------------------------------------------------------------- */

/* Os tracos laterais sao decoracao: ficam no ::before/::after para nao virarem
   texto que o leitor de tela anuncia. */
/* (04/09) Virou <h2> e passou a ser o unico titulo da secao. Cresceu um ponto
   por isso — antes era rotulo acima de um titulo maior; agora e o titulo. */
.anova-onb-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: 'Montserrat', system-ui, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Ouro ESCURECIDO: o #b98f41 da marca da 2,8:1 sobre o fundo da caixa e
     reprova no minimo de texto. Este da 6,3:1 e continua lendo como o
     marrom-ouro. O ouro oficial fica nos tracos laterais, que sao grafismo. */
  color: #7a5b1f;
}

.anova-onb-kicker::before,
.anova-onb-kicker::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--anova-ouro);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   O botao de fechar
   --------------------------------------------------------------------------
   Fecha a secao inteira, ao contrario do "Recolher", que so esconde a trilha e o
   painel. Circulo de contorno, como o "x" do modal de produto e o do carrinho —
   e o mesmo gesto nas tres telas.
   -------------------------------------------------------------------------- */

.anova-onb-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--anova-linha-n);
  border-radius: 50%;
  background: var(--anova-branco);
  color: var(--anova-tinta-2);
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), color var(--anova-transicao-r);
}

.anova-onb-fechar svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.anova-onb-fechar:hover {
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-800);
}

.anova-onb-fechar:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  /* O tema tem `button:focus-visible { border-radius: 6px }`, que e (0,1,1) e
     venceria o (0,1,0) da regra base. Este seletor e (0,2,0) e devolve o
     circulo. */
  border-radius: 50%;
}

/* (04/09) A regra `.anova-onb.esta-dispensada { display: none; }` saiu daqui
   junto com a dispensa permanente no JS. O "x" agora recolhe, e recolher ja tem
   estilo proprio — deixar a regra orfa faria a proxima pessoa procurar quem
   aplica a classe e nao achar ninguem. */

/* --------------------------------------------------------------------------
   A trilha das etapas
   -------------------------------------------------------------------------- */

/* COLUNAS AUTOMATICAS, e nao um numero fixo.

   Estava `repeat(5, 1fr)`. Quando a trilha passou de cinco para quatro etapas
   (04/09) a quinta coluna continuou existindo, VAZIA, e as quatro etapas ficaram
   encostadas a esquerda com um buraco a direita — parecia desalinhamento, era
   coluna sobrando.

   Com `grid-auto-flow: column` o grid cria uma coluna por etapa, seja qual for o
   numero. O mesmo erro nao volta se alguem acrescentar ou tirar uma. */
.anova-onb-passos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;

  /* A trilha para antes da largura total da caixa. Com quatro etapas em 1300px,
     cada uma ficaria com mais de 300px e o fio entre elas viraria um vao enorme:
     a leitura perde a sensacao de sequencia.

     (09/09) De 820 para 1040px a pedido da dona, com os numeros na mesa: cada
     etapa passa de ~205px para ~260px, e o fio entre os circulos de ~100px para
     ~150px.

     (10/09) De 1040 para 1180px, tambem a pedido dela: cada etapa vai a ~295px.

     ⚠️ O LIMITE JA NAO E O DA REFERENCIA. A `.jornada` dela nao tem max-width
     nenhum (componentes.css:729-732) — ocupa a caixa inteira, com cinco etapas.
     O teto aqui e uma cautela NOSSA, escrita quando eram quatro etapas em 1300px
     e cada uma passaria de 320px. A 1180 ainda estamos abaixo disso, mas a
     margem encolheu: o proximo aumento cai na largura cheia, e ai vale tirar o
     limite de vez em vez de empurra-lo mais uma vez. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.anova-onb-passo {
  position: relative;
  padding: 0 10px;
  text-align: center;
}

/* As quatro primeiras etapas sao <button>. Reset total para o botao nao trazer
   nada de aparencia propria: quem desenha a etapa continua sendo o resto deste
   arquivo, e o botao entra so pelo comportamento — clique, foco e teclado de
   graca, sem clique pendurado em <li>, que o teclado nunca alcancaria. */
.anova-onb-passo-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.anova-onb-passo-btn:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 4px;
  border-radius: var(--anova-raio-p);
}

/* Dentro do botao so cabe conteudo de frase, entao o corpo e os rotulos sao
   <span> e precisam ser mandados a empilhar. */
.anova-onb-passo-corpo,
.anova-onb-passo-titulo { display: block; }

/* O fio que liga as bolinhas. Fica no ::before de cada etapa MENOS a primeira e
   para na metade do circulo (24px de raio), por isso o `calc`. Cor pela classe
   da propria etapa: verde do inicio ate a atual, neutro depois dela. */
.anova-onb-passo + .anova-onb-passo::before {
  content: '';
  position: absolute;
  /* `top` e a METADE da altura do circulo, e a margem e o RAIO dele: o fio tem
     de nascer no centro vertical e parar na borda. Mexeu no tamanho do circulo,
     mexe nos dois — hoje 40px, entao 20 e 20. */
  top: 20px;
  right: 50%;
  left: -50%;
  margin: 0 20px;
  height: 1.5px;
  background: var(--anova-linha-forte);
}

.anova-onb-passo.is-feito::before,
.anova-onb-passo.is-atual::before {
  background: var(--anova-verde-700);
}

.anova-onb-marca {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--anova-branco);
  border: 1.5px solid var(--anova-linha-forte);
  /* Unico lugar do --anova-tinta-3, e e grafismo: o traco do icone. O icone e
     aria-hidden e o rotulo ao lado diz a mesma coisa em palavras, entao ninguem
     depende so dele para entender a etapa. */
  color: var(--anova-tinta-3);
}

.anova-onb-marca svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Etapa vencida: contorno verde e cheio branco. Diferente da atual de proposito
   — "ja passou" nao pode competir por atencao com "e aqui que voce esta". */
.anova-onb-passo.is-feito .anova-onb-marca {
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-700);
}

/* Etapa atual: a unica solida da trilha. E o unico ponto de peso visual da
   secao inteira, e e por isso que o olho cai nela sem precisar de seta. */
.anova-onb-passo.is-atual .anova-onb-marca {
  background: var(--anova-verde-800);
  border-color: var(--anova-verde-800);
  color: var(--anova-branco);
}

/* Os titulos das etapas ficam TODOS escuros; so o da etapa atual e verde. Nao
   apagamos o titulo das etapas futuras de proposito: sao 16.5px, e texto de
   verdade, e cinza claro em texto reprova no contraste. O que diz "voce ainda
   nao chegou aqui" e o circulo, que e grafismo e pode ser mais leve. */
.anova-onb-passo-titulo {
  /* (10/09) A SERIFA VOLTA, e isto REVERTE uma decisao anterior deste arquivo.

     A familia era forcada para Montserrat contra o `h1, h2, h3 { serif }` do
     tema, com o argumento de que dar nome a um item seria papel da fonte de
     interface e a serifa deveria ficar reservada a titulo de secao. O texto
     original esta no historico do git, no commit que trouxe esta regra.

     O argumento e defensavel, mas a REFERENCIA faz o contrario: o
     `.jornada-titulo` dela usa `var(--fonte-titulo)`, a serifa, em 16,5px e peso
     500 (componentes.css:819-822). Nao era divergencia da referencia — era
     divergencia NOSSA em relacao a ela. Pedido da dona, com o arquivo dela na
     mesa.

     A familia continua declarada aqui, e nao herdada do seletor de tag do tema:
     `h3` cobre a pagina inteira e um dia pode mudar por outro motivo. Declarada,
     esta escolha nao depende daquela.

     16,5px continua ABAIXO dos 18px, entao a regua de contraste do comentario
     acima nao muda — o limite so afrouxa para 3:1 acima disso. */
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--anova-tinta);
}

.anova-onb-passo.is-atual .anova-onb-passo-titulo { color: var(--anova-verde-800); }

/* "OPCIONAL" na consulta. E informacao de compliance, nao enfeite: existe gente
   que ja chega com receita na mao e nao precisa marcar consulta nenhuma. */
/* (04/09) A regra `.anova-onb-opcional` saiu junto com o rótulo no HTML. Ela era
   `--anova-ouro` a 9,5px — 2,77:1 de contraste contra o mínimo de 4,5:1. Quem
   avisa que a consulta pode ser pulada agora é a caixa "Já tem receita?" dentro
   do painel da etapa, em corpo de texto. */

/* O bloco "voce faz agora", so na etapa atual.
   O filete dourado do topo nao atravessa a coluna inteira na referencia: e um
   traco curto e centrado. Por isso ele e um ::before com largura fixa, e nao um
   `border-top`, que ocuparia a largura toda. */
.anova-onb-agora {
  display: none;
  position: relative;
  margin: 14px 0 0;
  padding: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Cada etapa carrega o proprio "voce faz agora", e so a atual mostra o dela.
   Como a etapa atual muda conforme a pessoa navega, um texto unico no painel
   nao serviria: a instrucao e diferente em cada ponto da trilha. */
.anova-onb-passo.is-atual .anova-onb-agora { display: block; }

.anova-onb-agora::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  background: var(--anova-ouro);
}

.anova-onb-agora-kicker {
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anova-ouro);
}

.anova-onb-agora-texto {
  display: block;
  font-weight: 600;
  color: var(--anova-tinta);
}

/* --------------------------------------------------------------------------
   Recolher
   -------------------------------------------------------------------------- */

.anova-onb-recolher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 9px 18px;
  border-radius: var(--anova-raio-pilula);
  border: 1px solid var(--anova-linha-n);
  background: var(--anova-branco);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--anova-tinta-2);
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), color var(--anova-transicao-r);
}

.anova-onb-recolher:hover {
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-800);
}

/* Foco de teclado. `:focus-visible` e nao `:focus` de proposito: com `:focus` o
   anel apareceria tambem no clique de mouse, e a primeira reacao de quem ve isso
   e pedir para tirar o anel — que e como paginas acabam sem foco nenhum. */
.anova-onb-recolher:focus-visible {
  /* Sem este border-radius o botao PERDE a forma de pilula ao receber foco de
     teclado: o tema tem `button:focus-visible { border-radius: 6px }`, que e
     (0,1,1) e vence o (0,1,0) da regra base — ordem na cascata nao resolve,
     porque o desempate e por especificidade. Este seletor e (0,2,0) e ganha sem
     precisar de !important. O botao mudava de forma a cada Tab, e so para quem
     navega por teclado. */
  border-radius: var(--anova-raio-pilula);
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-800);
}

.anova-onb-recolher svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--anova-transicao-r);
}

/* (09/09) O RECOLHIDO ESCONDE O PAINEL. A TRILHA FICA.

   Ele escondia a trilha E o painel, e a secao nascia recolhida: quem chegava via
   so o titulo e tinha de clicar para ver qualquer coisa.

   O pedido de 03/09 que criou aquilo era sobre o conteudo do painel ocupando a
   primeira tela — "quem chega na loja quer ver produto". A TRILHA nao era o
   barulho: ela e o que explica, em uma olhada e sem custo de leitura, o que a
   pessoa tem pela frente. Escondida, o convite virava uma caixa muda.

   Entao a trilha saiu do recolhimento e o painel continua nele. Pedido da dona
   (09/09), confirmado no mesmo dia depois de ver a primeira tentativa: eu tinha
   recolhido so o `.anova-onb-form`, e o cabecalho do painel ("Comece pelos seus
   dados") continuava na tela sem o formulario que ele anuncia.

   `display: none` aqui vence o `display: block` do painel visivel porque o
   seletor tem duas classes (0,2,0) contra uma (0,1,0). O painel escondido usa o
   atributo `hidden`, que continua valendo por conta propria.

   O texto do botao troca no JS, porque ele precisa dizer a acao que FAZ agora, e
   nao a que acabou de fazer. */
.anova-onb.esta-recolhido .anova-onb-painel {
  display: none;
}

.anova-onb.esta-recolhido .anova-onb-recolher svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   O painel da etapa atual
   --------------------------------------------------------------------------
   Branco sobre o neutro da caixa: e a unica superficie branca da secao, e e por
   isso que ela se le como "o lugar onde voce faz alguma coisa" enquanto a trilha
   acima se le como "onde voce esta". Alinhado a esquerda, ao contrario do
   cabecalho centralizado — formulario centralizado nao tem eixo de leitura.
   -------------------------------------------------------------------------- */

.anova-onb-painel {
  max-width: 620px;
  margin: 22px auto 0;
  padding: 24px 26px 22px;
  background: var(--anova-branco);
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio);
  text-align: left;
}

/* Este AQUI e serifa, e de proposito: abre bloco, entao e titulo de secao pela
   doutrina do tema. Hoje ele ja herdaria a serifa do seletor `h3` do tema, mas
   declaramos assim mesmo — a diferenca entre este titulo e o das etapas passa a
   estar ESCRITA, em vez de depender de quem cala e quem fala num seletor de tag
   de outro arquivo. */
.anova-onb-painel-titulo {
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 500;
  color: var(--anova-tinta);
}

.anova-onb-painel-texto {
  margin: 0 0 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--anova-tinta-2);
}

/* Tres campos lado a lado no desktop. `minmax(0, 1fr)` e nao `1fr`: a largura
   minima automatica de um item de grid e o conteudo dele, e um placeholder longo
   esticaria a coluna para fora da caixa. */
.anova-onb-campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.anova-onb-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.anova-onb-rotulo {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anova-tinta-2);
}

/* `appearance: none` porque o Safari do iPhone impoe sombra interna e cantos
   proprios em input, e sem isto o campo fica com forma diferente da do desktop.
   `font-size: 16px` no mobile mais abaixo: abaixo disso o iPhone da zoom sozinho
   ao focar o campo, e a pagina inteira desalinha. */
.anova-onb-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-branco);
  font-family: inherit;
  font-size: 13px;
  color: var(--anova-tinta);
  transition: border-color var(--anova-transicao-r), box-shadow var(--anova-transicao-r);
}

.anova-onb-input::placeholder {
  color: var(--anova-tinta-3);
}

.anova-onb-input:focus {
  outline: none;
  border-color: var(--anova-verde-600);
  box-shadow: 0 0 0 3px rgba(15, 50, 38, 0.08);
}

.anova-onb-cta {
  padding: 13px 26px;
  border: 1px solid var(--anova-verde-800);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-verde-800);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--anova-branco);
  cursor: pointer;
  transition: background var(--anova-transicao-r), border-color var(--anova-transicao-r);
}

.anova-onb-cta:hover {
  background: var(--anova-verde-700);
  border-color: var(--anova-verde-700);
}

.anova-onb-cta:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 3px;
}

.anova-onb-painel-nota {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--anova-linha-n);
  font-size: 12px;
  color: var(--anova-tinta-2);
}

/* --------------------------------------------------------------------------
   O aviso "Ja tem receita?" — etapa da consulta
   --------------------------------------------------------------------------
   Dourado, e nao verde: e a unica caixa da secao que INTERROMPE o caminho em vez
   de empurrar por ele. Quem ja tem receita nao deveria seguir para o
   agendamento, e o contraste de cor e o que faz essa saida ser notada antes do
   botao grande logo abaixo.
   -------------------------------------------------------------------------- */

.anova-onb-aviso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  padding: 15px 17px;
  border: 1px solid var(--anova-ouro-claro);
  border-radius: var(--anova-raio-p);
  background: rgba(185, 143, 65, 0.07);
}

/* `flex: 1 1 240px` e nao `flex: 1`: abaixo de 240px o texto e o botao passam a
   ocupar linhas proprias em vez de espremer os dois. */
.anova-onb-aviso-texto {
  flex: 1 1 240px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--anova-tinta-2);
}

.anova-onb-aviso-texto strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--anova-tinta);
}

/* (04/09) O botao "Ja tenho receita" saiu junto com a etapa da receita: as duas
   agora moram no mesmo painel e nao ha para onde mandar a pessoa. A caixa
   continua, como AVISO — ela e o que evita consulta paga a toa. */

/* --------------------------------------------------------------------------
   A area de anexar — etapas da receita e do termo
   --------------------------------------------------------------------------
   Tracejada porque e a convencao ja estabelecida para "solte um arquivo aqui".
   E <button> e nao <div> com clique: leva a pessoa ao lugar onde o envio
   acontece, entao e acao.
   -------------------------------------------------------------------------- */

.anova-onb-solta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 28px 18px;
  border: 1.5px dashed var(--anova-linha-forte);
  border-radius: var(--anova-raio-p);
  background: var(--anova-neutro);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), background var(--anova-transicao-r);
}

.anova-onb-solta:hover {
  border-color: var(--anova-verde-600);
  background: var(--anova-branco);
}

.anova-onb-solta:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  border-color: var(--anova-verde-600);
}

.anova-onb-solta svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--anova-verde-700);
}

.anova-onb-solta-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--anova-verde-800);
}

.anova-onb-solta-nota {
  font-size: 11px;
  color: var(--anova-tinta-2);
}

/* O "ou" entre anexar e assinar. Os tracos sao decoracao e por isso ficam em
   pseudo-elementos, fora do que o leitor de tela anuncia. */
.anova-onb-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anova-tinta-2);
}

.anova-onb-ou::before,
.anova-onb-ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--anova-linha-n);
}

/* "Entrar" abre o login, que e acao e nao navegacao — por isso e <button> e nao
   <a>. O estilo de link e so aparencia; a semantica continua a de um botao. */
.anova-onb-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--anova-verde-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.anova-onb-link:hover { color: var(--anova-verde-800); }

.anova-onb-link:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A etapa atual leva ao painel quando clicada, entao ela avisa isso no cursor.
   As outras quatro nao sao clicaveis: ninguem anexa receita antes de ter conta. */
.anova-onb-passo.is-atual { cursor: pointer; }

/* --------------------------------------------------------------------------
   Quem pediu menos movimento
   --------------------------------------------------------------------------
   `prefers-reduced-motion` nao e preferencia estetica: e ajuste de acessibilidade
   de quem tem enxaqueca vestibular ou sensibilidade a movimento. Zeramos a
   duracao em vez de escrever `transition: none` para o estado final continuar
   sendo aplicado — so deixa de ser animado.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .anova-onb,
  .anova-onb-recolher,
  .anova-onb-recolher svg,
  .anova-onb-input,
  .anova-onb-cta {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   Telas estreitas: a trilha vira lista vertical.
   Cinco colunas em 360px de largura dariam 60px por etapa — ilegivel. Empilhado,
   o fio passa a ser vertical e a leitura continua sendo "de cima para baixo".
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .anova-onb { padding: 16px 12px 4px; }

  .anova-onb-caixa {
    padding: 30px 18px 24px;
    border-radius: var(--anova-raio);
  }

  .anova-onb-kicker {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .anova-onb-fechar {
    top: 10px;
    right: 10px;
  }

  /* `grid-auto-flow: row` desfaz o `column` do desktop. Sem isto as etapas
     continuariam lado a lado no celular, cada uma com um quarto da tela. */
  .anova-onb-passos {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    max-width: none;
    gap: 18px;
    text-align: left;
  }

  .anova-onb-passo {
    padding: 0;
    text-align: left;
  }

  /* Duas celulas so: circulo e corpo. Os textos vao agrupados no corpo desde a
     marcacao, entao nao ha posicionamento automatico espalhando cada um numa
     linha propria — que era o que jogava o "Opcional" para a linha do circulo e
     empurrava o titulo da etapa 2 para baixo dele.

     A grade fica em quem REALMENTE contem o circulo e o corpo: o botao, nas
     quatro primeiras etapas, e o proprio item na ultima, que nao e botao. */
  .anova-onb-passo-btn,
  .anova-onb-passo-fim {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
  }

  /* `align-self: start` para o circulo nao esticar junto com o corpo, que e mais
     alto que ele em toda etapa. */
  .anova-onb-marca {
    margin: 0;
    align-self: start;
  }

  .anova-onb-agora::before { left: 0; transform: none; }

  /* O FIO, NO EMPILHADO.
     A regra de desktop nao serve aqui e precisa ser desligada: ela ancora o fio
     na etapa DE BAIXO com altura fixa, e a altura de um item nao e a altura do
     circulo dele — o texto e sempre mais alto. O resultado era um traco de 16px
     boiando no vazio, sem encostar em circulo nenhum.

     Aqui o fio passa a sair da PROPRIA etapa, logo abaixo do circulo dela, com
     `top` e `bottom` fixados e `height: auto`: assim ele estica sozinho, seja
     qual for a altura do texto. `height: auto` e obrigatorio, senao os 16px da
     regra de desktop continuariam vencendo o `bottom`. */
  .anova-onb-passo + .anova-onb-passo::before { content: none; }

  .anova-onb-passo:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 46px;      /* 40 do circulo + 6 de respiro */
    bottom: -12px;  /* os 18 de gap menos 6 de respiro antes do proximo circulo */
    left: 19px;     /* centro do circulo de 40px, menos meia espessura do fio */
    right: auto;
    margin: 0;
    width: 1.5px;
    height: auto;
    background: var(--anova-linha-forte);
  }

  /* O fio agora pertence a etapa de onde SAI, e nao aquela onde chega. Por isso
     a cor inverte: quem pinta o trecho de verde e a etapa ja vencida, ligando na
     seguinte. A etapa atual nao pinta o proprio trecho — o caminho a frente dela
     ainda nao foi percorrido. */
  .anova-onb-passo.is-atual::before { background: var(--anova-linha-forte); }
  .anova-onb-passo.is-feito::before { background: var(--anova-verde-700); }

  .anova-onb-painel { padding: 22px 18px 20px; }

  /* Um campo por linha. Tres colunas em tela de celular dariam campos onde nao
     cabe um nome. */
  .anova-onb-campos { grid-template-columns: 1fr; }

  /* 16px e o limite: com fonte menor que isso, o Safari do iPhone da zoom ao
     focar o campo e a pagina inteira sai do lugar. */
  .anova-onb-input { font-size: 16px; }

  .anova-onb-cta { width: 100%; }
}