/* ===========================================================================
   ONLY15 — o funil de vendas, as 9 telas
   ---------------------------------------------------------------------------
   Esta folha COMPLEMENTA `../estilo.css`, não a substitui. De lá vêm as oito
   fontes (`@font-face`), os tokens da superfície escura, `.btn`, `.sr` e a
   regra global de `prefers-reduced-motion`. Aqui mora só o que é do funil.

   A polaridade é a do site, não a do painel: fundo #141210, texto #F4F0E9, e
   o laranja LIBERADO como tipografia (6,55:1 sobre a tinta). Ver
   docs/identidade-visual.md §1, §2.1 e §9.

   O desenho conversa com `painel/entrar.html`, que é a peça mais recente da
   casa: tela dividida, metade escura com os fios a 114°, o brilho atrás e o
   anel de cronômetro em 25%. Duas diferenças de propósito:

     · do lado direito não há formulário, há o palco das nove perguntas;
     · o anel aparece SÓ na tela 1. Ele é a figura de abertura e repeti-lo o
       gastaria (identidade-visual.md §4.3). A barra de progresso NÃO é o anel
       travado em 25%: são nove marcas retas, e são outra coisa.

   ⚠️ Isso tudo é o DESKTOP, e vive no bloco de 960px lá embaixo.

   No celular a tela dividida não cabe, e a primeira dobra é o único espaço
   garantido de um funil: ela é da pergunta. Então o trilho não é metade de
   nada — é uma moldura. Uma faixa fina no alto com o logotipo encolhido e a
   barra de progresso; na tela 1, uma segunda faixa no pé com os números do
   produto. Nas nove telas a pergunta nasce no mesmo lugar, a 128px do topo.
   Não há frase de marca, não há anel: no celular a marca assina, não anuncia.

   Celular primeiro: o que está fora de media query é a moldura do celular.
   =========================================================================== */

:root {
  /* O respiro lateral do funil é menor que o do site: aqui a linha é curta e
     a tela é de uso, não de leitura. */
  --gutter-funil: clamp(20px, 4vw, 44px);
  /* Duração da montagem da tela 8. Entre 8 e 12 segundos, por especificação
     (funil-de-vendas.md §4.10). O JS lê este valor daqui — mude num lugar só. */
  --duracao-calculo: 9600ms;

  /* As duas faixas do trilho no celular. No celular o trilho não é uma metade
     ilustrada: é uma moldura fina, e o palco fica entre as duas faixas por
     margem. Estes dois valores TÊM de bater com a altura real das faixas —
     por isso a conta está escrita ao lado de cada um.
     A de baixo só existe na tela 1, que é a única que mostra os números. */
  --faixa-marca: 44px;      /* 12 + 20 do logotipo + 12 */
  --faixa-assinatura: 44px; /* 12 + 20 do número no tamanho máximo + 12 */
}

.corpo-funil {
  overflow-x: hidden;
}

/* O funil liga e desliga peças pelo atributo `hidden`, e várias delas têm
   `display` declarado por classe — que vence o `display:none` da folha do
   navegador. Sem esta linha, "escondido" vira "visível" em metade das telas. */
.corpo-funil [hidden] {
  display: none !important;
}

.funil {
  min-height: 100vh;
  min-height: 100dvh; /* a barra do Safari no iPhone come os 100vh */
  display: grid;
  grid-template-rows: auto 1fr;
}

/* =========================================================================
   O TRILHO
   ========================================================================= */

.trilho {
  position: relative;
  overflow: hidden; /* acima de 960px o anel é maior que o trilho e é cortado por ele */
  min-width: 0;
  background: var(--fundo);
  padding: 12px var(--gutter-funil);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Camadas de fundo: o brilho laranja atrás do anel e o campo de fios a 114°,
   que é a inclinação do próprio logotipo. Mesma receita da tela de entrar,
   com o passo dos fios um pouco mais largo porque aqui a caixa é menor. */
.trilho::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(88% 68% at 86% 96%, rgba(255, 107, 0, 0.18), transparent 58%),
    radial-gradient(70% 50% at 0% 0%, rgba(244, 240, 233, 0.05), transparent 62%),
    repeating-linear-gradient(114deg, rgba(244, 240, 233, 0.05) 0 1px, transparent 1px 92px);
}

.trilho__marca,
.trilho__fala,
.trilho__numeros,
.progresso {
  position: relative; /* por cima das camadas de fundo */
  margin: 0;
}

.trilho__logotipo {
  display: block;
  width: auto;
  height: 20px;
}

/* ------------------------------------------------------ o anel de 25% ---
   Quinze dos sessenta minutos de um mostrador: quem reparar, repara. Vive só
   na tela 1 e só acima de 960px — o desenho dele está no bloco de telas
   largas, junto com o resto da composição em coluna.
   `--volta` é registrada para poder ser interpolada; onde @property não
   existe, o anel nasce parado nos 25% corretos — degrada, não quebra. */
@property --volta {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* O ponteiro corre uma vez, na chegada. É um cronômetro partindo, que é o que
   o produto faz. Uma vez só, e nunca mais. */
@keyframes ponteiro {
  from { --volta: 0%; }
  to   { --volta: 25%; }
}

/* --------------------------------------------------- barra de progresso ---
   Nove marcas e o número escrito por extenso. Com 9 telas, mostrar o fim é
   vantagem — é o oposto do funil que nomeia seções para esconder o tamanho.
   As marcas são decorativas: o dado vive no texto ao lado, então quem não
   distingue laranja de cinza continua sabendo em que passo está. */
.progresso {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.progresso__texto {
  margin: 0;
  flex: none;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apoio);
  font-variant-numeric: tabular-nums;
}
.progresso__texto span {
  color: var(--texto);
}

.progresso__marcas {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progresso__marcas li {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(244, 240, 233, 0.12);
  transition: background-color 0.15s ease;
}
.progresso__marcas li.feita {
  background: var(--acao);
}
.progresso__marcas li.atual {
  background: var(--acao);
}

/* ------------------------------------------------------- a assinatura ---
   A frase do produto, a mesma da landing e da tela de entrar. No celular ela
   NÃO aparece em tela nenhuma, nem na primeira: a primeira dobra do celular é
   o único espaço garantido de um funil, e ela pertence à pergunta, não ao
   cartaz. A frase volta acima de 960px, onde a coluna tem altura sobrando
   para segurá-la sem tirar nada do lugar de ninguém. */
.trilho__fala {
  display: none;
}

.trilho__titulo {
  margin: 0;
  font: 900 clamp(30px, 8vw, 44px) / 0.92 var(--sans);
  letter-spacing: -0.035em;
  /* Caixa-alta pelo CSS: escrito em maiúscula no markup, o leitor de tela
     soletra "A-P-E-N-A-S". */
  text-transform: uppercase;
}
.trilho__titulo span {
  display: block;
}
.trilho__linha {
  margin: 12px 0 0;
  font: 400 14px/1.45 var(--sans);
  color: var(--apoio);
}

/* Os números do produto. Assinatura, não argumento de venda: o argumento é a
   conta da tela 5. Ficam fora do caminho do anel (o anel começa nos 56%). */
.trilho__numeros {
  display: none;
  flex-wrap: wrap;
  gap: 12px 26px;
  max-width: 56%;
}
.trilho__numeros div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.trilho__numeros dt {
  font: 900 22px/1 var(--sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--acao); /* 6,55:1 sobre #141210 */
}
.trilho__numeros dd {
  margin: 0;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apoio);
}

/* =========================================================================
   A TELA 1 NO CELULAR — a pergunta na primeira dobra
   =========================================================================
   O defeito que este bloco corrige: a tela 1 abria com o bloco de marca
   (logotipo grande, "APENAS 15 MINUTOS.", a frase e o anel) ocupando 244px
   dos 812 da primeira dobra. A pergunta caía para os 334px e as opções para
   os 482px. Num funil a primeira dobra é o único espaço garantido: ela tem de
   trazer a ação, não o cartaz.

   A composição agora é uma moldura. O trilho deixa de ser uma metade
   ilustrada e passa a ocupar a MESMA célula do palco, atrás dele, esticado de
   ponta a ponta: o logotipo encostado no alto, os números encostados no pé.
   O palco é opaco e entra por cima com margem em cima e embaixo, e são essas
   duas margens que abrem as duas faixas. Por isso `--faixa-marca` e
   `--faixa-assinatura` precisam bater com a altura real de cada faixa — e por
   isso a linha dos números é `nowrap`, para a faixa de baixo ter sempre uma
   linha e uma altura só.

   ⚠️ A ordem do DOM não muda. O <dl> dos números continua dentro do trilho
   porque é lá que a coluna do desktop precisa dele, então o leitor de tela o
   anuncia junto do logotipo, como cabeçalho, e não no pé. Não há nada focável
   dentro dele: a ordem do Tab continua sendo logotipo → pergunta → opções,
   idêntica à ordem visual. */
.funil[data-tela="1"] {
  grid-template-rows: 1fr;
}
.funil[data-tela="1"] .trilho,
.funil[data-tela="1"] .palco {
  grid-area: 1 / 1;
}
.funil[data-tela="1"] .trilho {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter-funil) max(12px, env(safe-area-inset-bottom));
}
.funil[data-tela="1"] .palco {
  /* O trilho é posicionado; sem isto ele pintaria por cima do palco. */
  position: relative;
  margin-top: var(--faixa-marca);
  margin-bottom: calc(var(--faixa-assinatura) + env(safe-area-inset-bottom));
  border-bottom: 1px solid var(--borda);
}
/* A tela 1 é a única sem botão de voltar, e a linha dele encolhe a zero. Sem
   esta margem a pergunta nasceria 44px mais alto aqui do que nas outras oito,
   e o título pularia no primeiro toque. O lugar do "Voltar" fica guardado. */
.funil[data-tela="1"] .tela {
  margin-top: 44px;
}

/* Os números descem para o pé: continuam sendo a assinatura do produto, mas
   embaixo, que é onde uma assinatura fica. Espalhados de ponta a ponta, numa
   linha só, com o número um pouco menor que no desktop. O rótulo em mono
   segue nos 11px que a identidade fixa para o funil (§9.4). */
.funil[data-tela="1"] .trilho__numeros {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  max-width: none;
}
.funil[data-tela="1"] .trilho__numeros dt {
  font-size: clamp(15px, 4.6vw, 20px);
}
.funil[data-tela="1"] .trilho__numeros dd {
  letter-spacing: 0.1em;
}

/* =========================================================================
   O PALCO
   ========================================================================= */

.palco {
  background: var(--fundo-alt);
  border-top: 1px solid var(--borda);
  padding: 14px var(--gutter-funil) 0;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

/* As duas linhas do palco são declaradas: sem isso, na tela 1 — a única sem
   botão de voltar — a pergunta sobe para a primeira linha do grid e fica
   colada no topo, em vez de ocupar a linha que cresce. */
.voltar {
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px 0 0;
  background: none;
  border: 0;
  color: var(--apoio);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  transition: color 0.15s ease;
}
.voltar:hover {
  color: var(--texto);
}
.voltar__seta {
  font-size: 17px;
  line-height: 1;
}

/* Uma tela por vez. `:not([hidden])` em vez de `display:flex` solto: sem
   isso o atributo `hidden` do HTML perde para a classe e todas as nove
   aparecem empilhadas se o JS falhar. */
.tela {
  display: none;
  grid-row: 2;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 8px;
  /* Colada no topo, sempre. A pergunta é a primeira coisa da tela e nas nove
     ela nasce na mesma altura — o olho não precisa procurar onde ela está a
     cada passo. As telas que centravam eram a 1, a 2 e a 3, as únicas sem
     rodapé; centrar empurrava a pergunta 130px para baixo em troca de encher
     um vazio que, no fim de um funil de nove passos, ninguém repara.
     Onde há rodapé ou assinatura, a margem automática deles continua puxando
     a peça para o pé da tela. */
  justify-content: flex-start;
}
.tela:not([hidden]) {
  display: flex;
}

.tela__rotulo {
  margin: 0 0 14px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao);
}

.tela__pergunta {
  margin: 0;
  font: 900 clamp(32px, 5vw, 56px) / 0.98 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 18ch;
}
.tela__pergunta:focus-visible {
  outline-offset: 6px;
}

.tela__ajuda {
  margin: 14px 0 0;
  max-width: 42ch;
  font: 400 15px/1.5 var(--sans);
  color: var(--apoio);
}

.tela__nota {
  margin: 16px 0 0;
  max-width: 52ch;
  font: 400 13px/1.5 var(--sans);
  color: var(--apoio);
}

.tela__legal {
  margin: 22px 0 0;
  max-width: 46ch;
  font: 400 12px/1.5 var(--sans);
  color: var(--esmaecido);
}
.tela__legal a {
  color: var(--apoio);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tela__legal a:hover {
  color: var(--texto);
}

/* O rodapé de ação. `margin-top:auto` o empurra para o fim da tela quando
   sobra espaço; `sticky` o mantém ao alcance do polegar quando falta. O
   degradê existe para o conteúdo não encostar duro embaixo do botão. */
.tela__rodape {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 18px 0 max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--fundo-alt) 30%);
}

/* =========================================================================
   OPÇÕES
   ========================================================================= */

.opcoes {
  margin-top: 26px;
  display: grid;
  gap: 10px;
}
.opcoes--grade,
.opcoes--metas {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 15px 18px;
  border: 1px solid var(--borda-forte);
  border-radius: 16px; /* o raio de cartão do lado escuro da casa */
  background: var(--superficie);
  color: var(--texto);
  font: 600 16px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Sem sombra. O sistema é chapado: profundidade vem de superfície e borda. */
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.opcao:hover {
  border-color: var(--texto);
}
.opcao[aria-pressed="true"],
.opcao.escolhida {
  border-color: var(--acao);
  background: var(--acao-tenue);
}

.opcao__texto {
  min-width: 0;
}

/* O cartão de faixa etária e o de meta: número grande em Archivo Black com
   tabular-nums, rótulo em mono embaixo. É o mesmo par do sistema. */
.opcao--faixa,
.opcao--meta {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
}
.opcao__numero {
  font: 900 clamp(26px, 6.6vw, 34px) / 1 var(--sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.opcao__pct {
  color: var(--apoio);
}
.opcao__nota {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apoio);
}
.opcao--faixa.escolhida .opcao__numero,
.opcao--meta.escolhida .opcao__numero,
.opcao--faixa.escolhida .opcao__nota,
.opcao--meta.escolhida .opcao__nota {
  color: var(--acao);
}
.opcao--meta-larga {
  grid-column: 1 / -1;
  min-height: 60px;
  flex-direction: row;
  align-items: center;
}

/* A marca de seleção múltipla. Quadrado arredondado que preenche em laranja,
   com o "certo" desenhado por borda — sem ícone, sem requisição. */
.opcao__marca {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--borda-forte);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.opcao[aria-pressed="true"] .opcao__marca {
  background: var(--acao);
  border-color: var(--acao);
}
.opcao[aria-pressed="true"] .opcao__marca::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2px solid var(--fundo);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

/* ------------------------------------------- pontos preparados para imagem
   O funil está publicável sem uma única imagem: quem segura as telas é a
   tipografia, como na tela de entrar do painel. Mas a imagem ilustrativa vai
   entrar depois, e o lugar dela já está pronto.

   Para ligar uma imagem, basta acrescentar UM elemento no cartão. Nada em
   volta muda: nem a grade, nem o alvo de toque, nem o estado de seleção.
   Enquanto não houver `<img>`, nenhuma destas regras pinta coisa alguma.

   Os cinco pontos estão comentados um a um no index.html.

   ⚠️ A CSP do site permite `img-src 'self' data:` — a imagem tem de ser
   servida do próprio domínio. Nada de banco de imagens por URL. E `alt=""`
   em ilustração decorativa, para o leitor de tela não descrever moldura. */
.opcao__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  background: var(--superficie-baixa);
}
/* Miniatura para as opções em lista (telas 2 e 6): entra antes do texto e o
   cartão continua com a mesma altura mínima. */
.opcao__mini {
  order: -1;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--superficie-baixa);
}
/* Retrato do Carlos ao lado da assinatura (telas 8 e 9). */
.assinatura__retrato {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--superficie-baixa);
}

/* =========================================================================
   TELA 5 — o ritmo e a aritmética ao vivo
   ========================================================================= */

.dias {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dia {
  aspect-ratio: 1;
  min-height: 64px;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto);
  font: 900 clamp(24px, 7vw, 32px) / 1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dia:hover {
  border-color: var(--texto);
}
.dia[aria-pressed="true"] {
  background: var(--acao);
  border-color: var(--acao);
  color: var(--fundo); /* tinta sobre laranja: 6,55:1 */
}

/* A conta. É o coração do funil: o custo semanal e o calendário dos 50
   treinos, atualizados na hora em que a pessoa escolhe o ritmo. O argumento
   de venda inteiro do ONLY15 chega como consequência da resposta dela, e não
   como slogan da marca. */
.conta {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--acao-borda);
  border-radius: 16px;
  background: var(--acao-tenue);
}
.conta__espera {
  margin: 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--apoio);
}
.conta__soma {
  margin: 0;
  font: 900 clamp(21px, 4.8vw, 28px) / 1.15 var(--sans);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.conta__soma b {
  color: var(--acao);
  font-weight: 900;
}
.conta__calendario {
  margin: 12px 0 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--texto-suave);
}
.conta__calendario b {
  color: var(--texto);
  font-weight: 700;
}
.conta__total {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--acao-borda);
  font: 600 11px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao);
}

/* =========================================================================
   TELA 8 — a montagem
   ========================================================================= */

.tela--calculo .tela__pergunta {
  max-width: 14ch;
}
/* Nesta tela quem fica no rodapé é a assinatura do Carlos, não o botão: o
   botão só existe na revisita e entra logo abaixo da pergunta binária. */
.tela--calculo .tela__rodape {
  margin-top: 26px;
}

.barra {
  margin-top: 28px;
  height: 4px;
  border-radius: 99px;
  background: rgba(244, 240, 233, 0.12);
  overflow: hidden;
}
.barra__preenchimento {
  display: block;
  height: 100%;
  background: var(--acao);
  transform: scaleX(0);
  transform-origin: left center;
}
/* A montagem já concluída numa passagem anterior: cheia, sem correr. */
.barra__preenchimento.cheia {
  transform: scaleX(1);
}
/* Anima `transform`, nunca a largura: largura é layout. */
.barra__preenchimento.correndo {
  animation: enche var(--duracao-calculo) linear forwards;
}
@keyframes enche {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.etapas {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.etapa {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 11px/1.35 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esmaecido);
  transition: color 0.15s ease;
}
.etapa__ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.etapa.acesa {
  color: var(--texto);
}
.etapa.acesa .etapa__ponto,
.etapa.pronta .etapa__ponto {
  background: var(--acao);
}
.etapa.pronta {
  color: var(--apoio);
}

/* A pergunta binária no meio da espera. Converte tempo morto em dado útil:
   define o horário do lembrete, e é usada de verdade. */
.binaria {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--borda);
}
.binaria__pergunta {
  margin: 0;
  font: 700 18px/1.35 var(--sans);
  letter-spacing: -0.01em;
}
.binaria__opcoes {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.opcao--binaria {
  justify-content: center;
  text-align: center;
}
.binaria__nota {
  margin: 12px 0 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--apoio);
}

.tela__estado {
  margin: 20px 0 0;
  min-height: 20px;
  font: 400 14px/1.5 var(--sans);
  color: var(--apoio);
}

/* A assinatura de quem monta o plano. É a única prova social que o ONLY15
   tem e não precisa inventar. */
.assinatura {
  margin: auto 0 0;
  padding-top: 26px;
  display: grid;
  gap: 4px;
}
.assinatura__nome {
  font: 900 17px/1.1 var(--sans);
  letter-spacing: -0.02em;
}
.assinatura__papel {
  font: 600 11px/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apoio);
}
.assinatura__fala {
  margin-top: 12px;
  max-width: 46ch;
  font: 400 15px/1.55 var(--sans);
  color: var(--texto-suave);
}
.assinatura--plano {
  margin-top: 30px;
  border-top: 1px solid var(--borda);
}

/* =========================================================================
   TELA 9 — o plano e a oferta
   =========================================================================
   Não é uma pilha de cartões iguais. São dois blocos com moldura, e só dois:
   o calendário (que devolve a promessa da tela 5) e o preço. O resto é
   tipografia separada por fio, que é como esta casa faz hierarquia. */

.tela--plano .tela__pergunta {
  max-width: 12ch;
}

.eco {
  margin: 20px 0 0;
  font: 900 clamp(21px, 4.6vw, 27px) / 1.2 var(--sans);
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.eco b {
  color: var(--acao);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.eco__nota {
  margin: 10px 0 0;
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apoio);
}

/* Os nomes de arquivo e de constante que só interessam a quem vai preencher o
   preço. Ficam legíveis sem virar bloco de código. */
code {
  font: 500 0.92em/1 var(--mono);
  color: var(--texto-suave);
}

.bloco {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--borda);
}
.bloco__rotulo {
  margin: 0 0 12px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao);
}
.bloco__linha {
  margin: 0;
  font: 700 19px/1.35 var(--sans);
  letter-spacing: -0.015em;
}
.bloco__linha--menor {
  font: 400 15px/1.55 var(--sans);
  color: var(--texto-suave);
  letter-spacing: 0;
}
.bloco__nota {
  margin: 12px 0 0;
  max-width: 52ch;
  font: 400 13px/1.5 var(--sans);
  color: var(--apoio);
}

/* O calendário ganha moldura porque é o eco da tela 5: a mesma caixa laranja,
   de propósito, para a promessa e a entrega terem a mesma forma. */
.bloco--calendario {
  border: 1px solid var(--acao-borda);
  border-radius: 16px;
  padding: 20px;
  background: var(--acao-tenue);
}
.bloco--calendario .bloco__linha {
  font: 900 clamp(21px, 4.8vw, 28px) / 1.2 var(--sans);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.bloco--calendario .bloco__linha b {
  color: var(--acao);
  font-weight: 900;
}

/* Os métodos, nomeados. É vocabulário de treinador, e é o que separa o ONLY15
   de "mais um app de exercícios". Um destaque laranja, o resto em neutro. */
.metodos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.metodos li {
  padding: 9px 13px;
  border: 1px solid var(--borda);
  border-radius: 99px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apoio);
}
.metodos li.no-plano {
  border-color: var(--acao-borda);
  background: var(--acao-tenue);
  color: var(--acao);
}

.inclusos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.inclusos li {
  position: relative;
  padding-left: 20px;
  font: 400 15px/1.5 var(--sans);
  color: var(--texto-suave);
}
.inclusos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acao);
}
.inclusos b {
  color: var(--texto);
  font-weight: 700;
}

/* A resposta às objeções, nome por nome. O nome que ELA marcou vem em mono
   caixa-alta; a resposta vem em corpo. */
.objecoes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}
.objecoes li {
  display: grid;
  gap: 6px;
}
.objecoes dt,
.objecoes .objecao__nome {
  font: 600 11px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
}
.objecoes .objecao__resposta {
  font: 400 15px/1.55 var(--sans);
  color: var(--texto-suave);
}
/* A frase das restrições fecha o bloco, e precisa de folga para não ser lida
   como continuação da última resposta. */
#restricoes-nota {
  margin-top: 20px;
}

/* --------------------------------------------------------------- preço ---
   Enquanto pendente, moldura tracejada: o padrão da casa para "isto ainda não
   foi preenchido", que é diferente de erro (identidade-visual.md §5). */
.preco {
  margin-top: 28px;
  padding: 22px 20px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
}
.preco--pendente {
  border: 1px dashed var(--borda-forte);
  background: var(--superficie-baixa);
}
.preco__rotulo {
  margin: 0 0 10px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao);
}
.preco__valor {
  margin: 0;
  font: 900 clamp(28px, 7vw, 40px) / 1 var(--sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.preco__pendente {
  margin: 0;
  font: 900 clamp(22px, 5.4vw, 30px) / 1.15 var(--sans);
  letter-spacing: -0.03em;
  color: var(--apoio);
}
.preco__nota {
  margin: 12px 0 0;
  max-width: 48ch;
  font: 400 13px/1.5 var(--sans);
  color: var(--apoio);
}
.preco .btn {
  margin-top: 18px;
  width: 100%;
}
.preco__aviso {
  margin: 12px 0 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--texto-suave);
}
.preco__aviso[hidden] {
  display: none;
}

.recomecar {
  margin: 26px 0 0;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.link {
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  color: var(--apoio);
  font: 400 13px/1.5 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link:hover {
  color: var(--texto);
}

/* =========================================================================
   BOTÕES
   =========================================================================
   `.btn` vem de ../estilo.css. O que falta lá é o alvo de toque de 44px
   (identidade-visual.md §8.7) — declarado aqui, junto com o que um <button>
   não herda de um <a>. */
.btn {
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Caixa-alta pelo CSS, como no resto da casa: escrito em maiúscula no
     markup, o leitor de tela soletra "C-O-N-T-I-N-U-A-R". */
  text-transform: uppercase;
}
.btn--largo {
  width: 100%;
  min-height: 54px;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn[disabled]:hover {
  background: var(--acao);
}

/* =========================================================================
   TELAS LARGAS — 960px
   =========================================================================
   O mesmo corte da tela de entrar do painel: é onde o trilho passa a ter
   largura para a frase grande sem espremer as perguntas. */
@media (min-width: 960px) {
  .funil {
    grid-template-rows: 1fr;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr);
  }

  .trilho {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(32px, 4vw, 60px);
    min-height: 100dvh;
  }
  .trilho__logotipo,
  .funil[data-tela="1"] .trilho__logotipo {
    height: 34px;
  }
  /* Aqui a moldura do celular se desfaz: o trilho e o palco saem da mesma
     célula e voltam a ser as duas metades da tela dividida. */
  .funil[data-tela="1"] .trilho,
  .funil[data-tela="1"] .palco {
    grid-area: auto;
  }
  .funil[data-tela="1"] .palco {
    margin: 0;
    border-bottom: 0;
  }
  .funil[data-tela="1"] .tela {
    margin-top: 0;
  }
  /* A tela 1 é a única sem barra de progresso: sem ela a coluna não tem o que
     distribuir, então se apoia embaixo, e o logotipo encolhe para o seu
     tamanho em vez de esticar. */
  .funil[data-tela="1"] .trilho {
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    min-height: 100dvh;
    padding: clamp(32px, 4vw, 60px);
  }

  /* Em coluna a barra de progresso desempilha: o texto em cima, as nove
     marcas embaixo, ocupando a largura toda. */
  .progresso {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 34px;
  }
  .progresso__marcas {
    width: 100%;
  }
  .progresso__marcas li {
    height: 4px;
  }

  /* A frase aparece em todas as telas, e não só na primeira: aqui há espaço,
     e é ela que segura a coluna. */
  .trilho__fala {
    display: block;
    margin-top: auto;
    max-width: 62%; /* o anel da tela 1 começa nos 64% */
  }
  .trilho__titulo {
    font: 900 clamp(40px, 4.6vw, 68px) / 0.92 var(--sans);
  }
  .trilho__linha {
    font-size: clamp(15px, 1.2vw, 18px);
    max-width: 26ch;
  }
  .trilho__numeros,
  .funil[data-tela="1"] .trilho__numeros {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 64%; /* mesmo teto do anel: a linha quebra, mas não invade a curva */
    gap: 10px 22px;
  }
  .funil[data-tela="1"] .trilho__numeros dt {
    font-size: 22px;
  }
  .funil[data-tela="1"] .trilho__numeros dd {
    letter-spacing: 0.14em;
  }

  /* ------------------------------------------------------ o anel de 25% ---
     Só na tela 1, e só aqui. No celular não há altura para uma figura que
     precisa ser grande e cortada pelas bordas, e um anel miúdo gastaria a
     única figura da marca (identidade-visual.md §4.3): lá a abertura é o
     logotipo em cima e os números no pé.
     A borda esquerda do anel fica presa em 64% da caixa e o texto é limitado
     a 62% (ver `.trilho__fala`). Com as duas medidas em porcentagem da mesma
     caixa, a curva nunca alcança a frase, em nenhuma largura. */
  .funil[data-tela="1"] .trilho::after {
    content: "";
    --volta: 25%;
    position: absolute;
    left: 64%;
    bottom: -42%;
    width: min(96%, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
      from -90deg,
      var(--acao) 0 var(--volta),
      rgba(244, 240, 233, 0.1) var(--volta) 100%
    );
    -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 20px), #000 calc(100% - 19px));
    mask: radial-gradient(closest-side, #0000 calc(100% - 20px), #000 calc(100% - 19px));
    animation: ponteiro 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .palco {
    border-top: 0;
    border-left: 1px solid var(--borda);
    padding: clamp(24px, 2.6vw, 40px) clamp(32px, 3.4vw, 64px) 0;
    max-height: 100dvh;
    overflow-y: auto;
  }
  .tela {
    align-self: center;
    width: 100%;
    max-width: 560px;
    padding-bottom: 28px;
  }
  /* Com a tela centrada na coluna, o rodapé não precisa mais colar embaixo. */
  .tela__rodape {
    position: static;
    padding-bottom: 0;
    background: none;
  }
  .btn--largo {
    width: auto;
    min-width: 220px;
  }
  .tela--plano,
  .tela--calculo {
    align-self: start;
  }
}

/* =========================================================================
   MOVIMENTO REDUZIDO
   =========================================================================
   ../estilo.css já derruba animações e transições para 0.01ms quando a
   preferência está ligada. O que sobra é garantir que o resultado FINAL
   esteja certo: o anel parado nos 25% e a barra da tela 8 cheia em vez de
   presa no zero. A tela 8 continua acendendo as três etapas no mesmo tempo —
   é mudança de estado, não movimento. */
@media (prefers-reduced-motion: reduce) {
  .funil[data-tela="1"] .trilho::after {
    animation: none;
  }
  .barra__preenchimento.correndo {
    animation: none;
    transform: scaleX(var(--avanco, 0));
  }
}