/* O Próximo Passo — folha principal
   Direção: "A frase é o layout" (seed 419279960)
   Tipo: Archivo, uma família variável (largura 62–125, peso 400–800)
   Cor: papel frio e tinta, vermelho só na leitura */

:root {
  /* paleta da direção */
  --bg: #e8eae7;
  --surface: #d6dbd7;
  --ink: #131613;
  --muted: #4e534e;
  /* A LEITURA. Marca o traço na régua, o polegar do trilho e o número medido.
     Nunca pinta campo cheio, botão, faixa nem rodapé — ver IDENTIDADE §4. */
  --accent: #e02718;
  --accent-ink: #ffffff;
  /* A AÇÃO é tinta. Botão vermelho num produto que mostra erro em vermelho
     faz o leitor ler "perigo" onde está escrito "baixar". */
  --acao: #131613;
  --acao-ink: #ffffff;

  /* A escada escura: degraus acima do fundo tinta, para painel e borda. */
  --tinta-800: #1b1f1b;
  --tinta-700: #252a25;
  --tinta-borda: #2f352f;
  --mudo-escuro: #9aa19b;
  /* A segunda voz da manchete. Só em tipo grande: dá 4,03:1 sobre o papel. */
  --voz2: #6c736d;

  /* UMA família, três larguras. A largura é um eixo medido, como a régua. */
  --f: Archivo, system-ui, "Segoe UI", sans-serif;
  --larg-titulo: 92%;   /* manchete em caixa mista */
  --larg-rotulo: 75%;   /* rótulo em versalete */
  --larg-cifra: 62%;    /* cifra e manchete de peça: a largura que a condensada antiga tinha */

  /* cinco degraus de tipo, nenhum a mais */
  --t-small: 15px;
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --t-state: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --t-sub: clamp(2.125rem, 1rem + 4.2vw, 3.5rem);
  --t-head: clamp(3rem, 1rem + 9vw, 8.5rem);

  --margem: clamp(16px, 2.2vw, 32px);
  /* Era clamp(120px, 14vw, 240px) de recuo DENTRO de cada seção: o link do
     menu parava no começo da seção e o leitor via 240 px de nada antes do
     conteúdo, que então saía cortado embaixo. Agora é margem ENTRE seções, e
     menor (13/11/2026). */
  --secao: clamp(80px, 7.5vw, 144px);
  --raio: 12px;      /* painéis, campos de cor, fotos */
  --raio-ctl: 8px;   /* botões e controles */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

::selection { background: var(--ink); color: var(--bg); }

/* O anel de foco e ACAO, nao leitura (IDENTIDADE 4). Era vermelho, que e a
   cor da medida. Tinta sobre papel da 17:1; nas secoes escuras ele se
   inverte, porque tinta sobre tinta nao se ve - e anel de foco invisivel e
   um site que nao da para usar pelo teclado. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.fecho :focus-visible,
.rodape :focus-visible { outline-color: var(--bg); }

h1, h2, h3 {
  /* Manchete em CAIXA MISTA desde 11/11/2026. A caixa alta condensada ficou
     para rótulo, cifra e peça de Instagram — e lá continua valendo a
     entrelinha de 1,06, por causa da cedilha e da vírgula. Identidade §5. */
  font-family: var(--f);
  font-stretch: var(--larg-titulo);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

/* A segunda voz: a manchete afirma em tinta e completa em cinza. */
.voz2 { color: var(--voz2); }
.fecho .voz2, .rodape .voz2 { color: var(--mudo-escuro); }
/* Título pequeno não aguenta o aperto da manchete: as letras encostam. */
h3 { letter-spacing: -0.02em; }

p { margin: 0; }
a { color: inherit; }

.quadro {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--margem);
}

.oculto {
  position: absolute; width: 1px; height: 1px; /* taste-skill-ignore: so para leitor de tela */
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- navegação */

.topo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
}

/* A assinatura horizontal. O SVG é recortado no desenho, então o pé dele é o
   pé da linha de base da régua, e o nome assenta nessa mesma linha. Aqui o
   símbolo tem 24 unidades = 24 px: cada traço cai em pixel inteiro. */
.marca {
  font-family: var(--f);
  font-stretch: 68%;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.marca svg { flex: 0 0 auto; }

.topo nav { display: flex; gap: clamp(14px, 2vw, 34px); align-items: center; }

.topo nav a { font-size: var(--t-small); text-decoration: none; color: var(--muted); }
.topo nav a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .topo nav a:not(.so-movel) { display: none; }
}
@media (min-width: 761px) { .so-movel { display: none; } }

/* --------------------------------------------------------------------- botão */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  background: var(--acao);
  color: var(--acao-ink);
  border: 0;
  border-radius: var(--raio-ctl);
  font-family: var(--f);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}
.botao:hover { filter: brightness(1.15); }
.botao:active { transform: translateY(1px); }

.elo { font-size: var(--t-small); color: var(--muted); text-underline-offset: 4px; }
.elo:hover { color: var(--ink); }
/* No rodapé o chão é tinta: --muted ali dava 2,32:1 e "Voltar ao site" sumia. */
.rodape .elo { color: var(--mudo-escuro); }
.rodape .elo:hover { color: var(--bg); }

/* --------------------------------------------------------------------- herói */

.heroi {
  min-height: clamp(540px, 76svh, 740px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(36px, 5vw, 84px) clamp(28px, 3.5vw, 48px);
}

.frase {
  font-size: var(--t-head);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.22em;
}

/* o fragmento da interface ocupa o lugar de uma palavra, alinhado à linha */
.encaixe {
  display: inline-block;
  vertical-align: baseline;
  width: 3.2em;
  height: 0.84em;
  flex: 0 0 auto;
}

.heroi-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(38px, 5vw, 76px);
}

.heroi-pe p { max-width: 42ch; color: var(--ink); font-size: var(--t-lead); line-height: 1.38; }

.heroi-acoes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .frase { gap: 0 0.18em; }
  .encaixe { width: 100%; height: auto; min-height: 118px; margin-block: 0.16em; }
}

/* ------------------------------------------------------------------- seções */

/* Margem, não recuo: o link do menu leva ao começo do CONTEÚDO. O main.js
   ainda centraliza na tela a seção que cabe nela; sem script, vale a folga
   de 24 px abaixo. */
.secao { margin-top: var(--secao); scroll-margin-top: 24px; }

/* A abertura de seção: o título de um lado, a frase do outro, para a metade
   direita não ficar vazia. */
.abertura { display: grid; gap: clamp(18px, 2.2vw, 32px); }
.abertura .declaracao { margin-top: 0; }
@media (min-width: 960px) {
  .abertura {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  /* o título dos programas é curto e o parágrafo, longo: mais largura para ele
     fechar em três linhas também a 1440 px */
  #programas .abertura { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* 1 — parágrafo com palavras-imagem */

.paragrafo-figuras {
  font-size: var(--t-state);
  line-height: 1.38;
  font-weight: 500;
  max-width: 46ch;
  margin: 0;
}

.paragrafo-figuras .lacuna {
  display: inline-block;
  vertical-align: -0.32em;
  width: 4.3em;
  margin-inline: 0.1em;
}

.programas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 3vw, 54px);
  margin-top: clamp(48px, 6vw, 92px);
}

.programa h3 { font-size: var(--t-state); margin-bottom: 10px; }
.programa p { color: var(--ink); font-size: var(--t-body); max-width: 34ch; }
.programa .peca { margin-top: 22px; }

/* 2 — arraste pelos estágios */

.estagios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* a altura vem do conteudo: 70svh deixava um vao no pe da secao, e o
     minimo de 580 px ainda deixava (13/11/2026) */
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--surface);
}

.estagios-texto {
  padding: clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.estagios-texto h2 { font-size: var(--t-sub); }
.estagios-texto .nota { color: var(--muted); font-size: var(--t-body); max-width: 36ch; }

/* O palco tinha a cor da página e ia até a borda do painel: a metade direita
   sumia no fundo e o painel parecia cortado ao meio. Agora ele fica DENTRO do
   painel, com folga e cantos, como uma tela sobre a mesa. */
.estagios-palco {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(10px, 1vw, 16px);
  border-radius: calc(var(--raio) - 4px);
  padding: clamp(24px, 3.4vw, 64px);
}
.trilho { display: flex; flex-direction: column; gap: 14px; }

.trilho input[type="range"] {
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.trilho input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: #9aa19b; }
.trilho input[type="range"]::-moz-range-track { height: 8px; background: #9aa19b; }
.trilho input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -12px;
  /* Tinta, nao a leitura: isto e um CONTROLE que a pessoa agarra, e controle
     e acao. Era um quadrado vermelho de 32px - o maior campo cheio de
     vermelho da pagina inteira, justamente o que a identidade proibe. */
  background: var(--ink); border: 0; border-radius: 2px;
}
.trilho input[type="range"]::-moz-range-thumb {
  width: 32px; height: 32px; background: var(--ink); border: 0; border-radius: 2px;
}

.trilho-nomes { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-small); color: var(--muted); }
.trilho-nomes span.ativo { color: var(--ink); font-weight: 500; }

@media (max-width: 880px) {
  .estagios { grid-template-columns: 1fr; }
  .estagios-palco { order: -1; padding-block: 32px; }
}

/* 3 — título que se digita */

.experimento { display: grid; gap: clamp(30px, 3.4vw, 48px); align-content: center; }

/* No desktop a conta ocupa a largura toda: a frase que se digita de um lado,
   a resposta do app do outro — não sobra meia tela vazia. */
@media (min-width: 960px) {
  .experimento {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: center;
  }
  .experimento > .linha-digitavel { grid-column: 1; grid-row: 1; align-self: end; }
  .experimento > .exemplos        { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
  .experimento > .resposta        { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin-top: 0; }
  /* A lista caía só na coluna da esquerda e a direita ficava vazia embaixo
     do cartão. Ela ocupa a largura toda. */
  .experimento > .o-que-conta     { grid-column: 1 / -1; }
}

.linha-digitavel {
  /* É uma CIFRA, não uma manchete: condensada e em caixa alta. */
  font-family: var(--f);
  font-stretch: var(--larg-cifra);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 0.9rem + 3.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.24em;
  margin: 0;
}

.campo-inline {
  /* Os dois campos são o que a pessoa DIGITA, não o que o programa mediu.
     Em vermelho eles disputavam com o R$ 28,31, que é a única leitura da
     tela. Tinta aqui, e o olho vai direto para a resposta. (IDENTIDADE §4) */
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.07em solid var(--ink);
  padding: 0 0.04em;
  width: 3.4em;
  text-align: center;
  border-radius: 0;
  -moz-appearance: textfield;
}
.campo-inline::-webkit-outer-spin-button,
.campo-inline::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-inline:focus { outline: none; background: var(--surface); }

.exemplos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.exemplos button {
  font-family: inherit;
  font-size: var(--t-small);
  min-height: 44px;
  padding: 0 16px;
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-radius: var(--raio-ctl);
  cursor: pointer;
}
.exemplos button:hover { background: #c7cdc8; }

.resposta { margin-top: clamp(34px, 4vw, 56px); max-width: 580px; }

/* 4 — preço */

.preco-campo {
  background: var(--surface);
  padding: clamp(40px, 5vw, 88px) clamp(24px, 4vw, 72px);
  border-radius: var(--raio);
}

.preco-frase {
  font-size: var(--t-head);
  line-height: 1.06;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.2em;
}

.cifra {
  background: var(--acao); color: var(--acao-ink); padding: 0 0.14em; display: inline-block;
  font-stretch: var(--larg-cifra); font-weight: 800; letter-spacing: -0.01em;
  border-radius: var(--raio-ctl);
}

.preco-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  margin-top: clamp(40px, 5vw, 64px);
}
.preco-pe p { color: var(--ink); max-width: 42ch; }
.preco-pe .acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* A escada de preço é a marca virada em tabela: as parcelas em cima, a linha
   de total, e os conjuntos embaixo. O último preço é o único em teal, porque
   é o resultado — a mesma regra do símbolo. */

.escada { margin-top: clamp(48px, 6vw, 78px); }

.escada-titulo {
  font-family: var(--f); font-stretch: var(--larg-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--t-small);
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

.escada-lista { list-style: none; margin: 0; padding: 0; }

.escada-linha {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "nome preco botao" "nota preco botao";
  align-items: center;
  column-gap: clamp(16px, 2.5vw, 34px);
  /* Sem régua fina entre as parcelas: o espaço separa. Só as linhas de
     total são desenhadas, em grafite cheio, que é o que a marca faz. */
  padding: 22px 0;
}

.escada-nome {
  grid-area: nome;
  font-weight: 600;
  font-size: var(--t-lead);
  line-height: 1.2;
}
.escada-nota {
  grid-area: nota;
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 54ch;
  margin-top: 4px;
}
.escada-preco {
  grid-area: preco;
  font-size: var(--t-lead);
  font-weight: 600;
  white-space: nowrap;
}
.escada-botao {
  grid-area: botao;
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: var(--raio-ctl);
  color: var(--ink);
}
.escada-botao:hover { background: var(--ink); color: var(--bg); }

/* A régua de total, grafite cheia, como no símbolo: entra uma vez só, acima
   do primeiro conjunto. É `:not(.escada-total)` e não `:first-of-type`
   porque :first-of-type olha o tipo do elemento (li), não a classe — com ele
   a régua ia parar na primeira linha da lista. */
.escada-soma:not(.escada-total) {
  border-top: 2px solid var(--ink);
  margin-top: 16px;
  padding-top: 26px;
}

.escada-total .escada-preco {
  background: var(--acao);
  color: var(--acao-ink);
  padding: 2px 0.3em;
}
.escada-total .escada-botao {
  background: var(--acao);
  border-color: var(--acao);
  color: var(--acao-ink);
}
.escada-total .escada-botao:hover { filter: brightness(1.35); background: var(--acao); color: var(--acao-ink); }

@media (max-width: 620px) {
  .escada-linha {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nome preco" "nota nota" "botao botao";
    row-gap: 6px;
  }
  .escada-botao { justify-self: start; margin-top: 12px; }
}

/* 5 — perguntas */

.perguntas h2 { font-size: var(--t-sub); max-width: 15ch; }
.perguntas .lista { margin-top: clamp(50px, 6vw, 80px); }

@media (min-width: 900px) {
  .perguntas .lista { margin-left: 0; }
  .perguntas-grade {
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 110px);
    align-items: start;
  }
  /* O sticky saiu: ele existia porque a coluna estava quase vazia e o
     recado de contato sumia cedo. Com a ficha técnica embaixo, o elemento
     grudado DESLIZAVA POR CIMA dela ao rolar. Coluna cheia não precisa
     seguir o scroll. */
}

.perguntas-aparte { margin-top: clamp(28px, 3vw, 44px); }
.perguntas-aparte p { color: var(--muted); font-size: var(--t-small); max-width: 30ch; line-height: 1.55; }
.perguntas-aparte a { color: var(--ink); }

.perguntas details { padding-block: 16px; }
.perguntas summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--t-lead);
  min-height: 44px;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-4px);
  transition: transform .18s ease;
}
.perguntas details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.perguntas details[open] {
  background: var(--surface);
  padding-inline: 20px;
  margin-inline: -20px;
  border-radius: var(--raio);
  max-width: calc(100% + 40px);
}
.perguntas details p { margin-top: 12px; color: var(--ink); max-width: 52ch; font-size: var(--t-body); }

/* 6 — fecho invertido */

.fecho {
  background: var(--ink);
  color: var(--bg);
  /* era 72svh: meia tela preta além do que o fecho carrega */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(34px, 4vw, 58px);
  padding-block: clamp(70px, 8vw, 120px);
  margin-top: var(--secao);
}
/* "Compre uma vez." numa linha só também no telefone (quebrava em três a 390 px) */
.fecho h2 { font-size: min(var(--t-head), 11.5vw); }
/* cada voz na sua linha: a primeira prepara, a segunda fecha */
.fecho h2 .voz2 { display: block; }
/* No fundo tinta o botão se inverte (papel com texto tinta, 15:1). Com a cor
   de ação padrão ele era tinta sobre tinta: um botão que não se via. */
.fecho .botao { background: var(--bg); color: var(--ink); }
.fecho .fecho-pe {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: clamp(24px, 3vw, 48px);
}
.fecho-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fecho-lista li { font-size: var(--t-small); color: #c7cdc8; }
.fecho p { color: #c7cdc8; max-width: 38ch; font-size: var(--t-lead); }

/* 7 — rodapé */

.rodape {
  background: var(--acao);
  color: var(--acao-ink);
  /* era min-height 68svh com space-between: o vão aparecia entre as faixas */
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  padding-block: 40px;
  /* fecho e rodapé são os dois tinta: o degrau de borda da escada escura
     separa um do outro sem inventar um terceiro tom de fundo */
  border-top: 1px solid var(--tinta-borda);
}
/* A pagina de obrigado nao e a landing page: ali o rodape so fecha o assunto.
   Com os 68svh herdados ele virava um vao preto de meia tela embaixo de tres
   linhas de texto - o mesmo tipo de buraco que a landing page tinha. */
.rodape-curto { min-height: 0; padding-block: 32px; }

.rodape-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; font-size: var(--t-small); }
.rodape-topo div { max-width: 44ch; }
.rodape-contato {
  font-family: var(--f); font-stretch: var(--larg-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: var(--t-head);
  text-decoration: none;
  display: block;
  word-break: break-word;
}
.rodape-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: var(--t-small); }

/* ------------------------------------------------------------------ entrada */

/* O esconder depende do JS EXISTIR. Antes era incondicional: se o script não
   carregasse — rede ruim, extensão, erro —, tudo abaixo da dobra ficava
   invisível para sempre, e o comentário do main.js dizia justamente que sem
   script tudo apareceria. Não aparecia. A classe `js` é posta por um script
   inline no <head>, antes de qualquer pintura. */
.js [data-entra] { opacity: 0; transform: translateY(22px); }
.js [data-entra].dentro {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--atraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-entra] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ para quem é */

.titulo-secao { font-size: var(--t-sub); max-width: 17ch; }

.declaracao {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height: 1.34;
  font-weight: 500;
  max-width: 42ch;
  margin-top: clamp(22px, 2.4vw, 36px);
}

.retratos {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(44px, 5vw, 76px);
}
.retratos figure { margin: 0; }
.retratos img {
  width: 100%;
  height: clamp(300px, 40vw, 540px);
  object-fit: cover;
  border-radius: var(--raio);
}
.retratos figcaption {
  margin-top: 10px;
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 46ch;
}

@media (max-width: 760px) {
  .retratos { grid-template-columns: 1fr; }
  .retratos img { height: clamp(240px, 58vw, 380px); }
}

/* resposta ao toque: tudo que é clicável se mexe */
.exemplos button { transition: transform .14s ease, background-color .14s ease; }
.exemplos button:hover { transform: translateY(-2px); }
.exemplos button:active { transform: translateY(0); }

.perguntas summary { transition: transform .16s ease; }
.perguntas summary:hover { transform: translateX(3px); }

.topo nav a, .elo, .marca { transition: transform .16s ease, color .16s ease; }
.topo nav a:hover, .elo:hover { transform: translateY(-1px); }
.marca:hover { transform: translateX(2px); }

.rodape-email { transition: border-color .2s ease; }

.retratos img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.retratos figure:hover img { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .exemplos button, .perguntas summary, .topo nav a, .elo, .marca,
  .rodape-contato, .retratos img { transition: none; }
  .exemplos button:hover, .perguntas summary:hover, .topo nav a:hover,
  .elo:hover, .marca:hover, .rodape-contato:hover,
  .retratos figure:hover img { transform: none; }
}

/* ------------------------------------------------- página de agradecimento */

/* Alto o bastante para a lista de arquivos caber sem salto, e nao mais:
   esta pagina tem no maximo tres linhas e tres arquivos. */
.recebido { min-height: 46svh; }
.recebido .frase { font-size: var(--t-sub); display: block; }
.recebido .declaracao { margin-top: 18px; max-width: 48ch; }

.arquivos { margin-top: clamp(36px, 4vw, 56px); max-width: 620px; }

.arquivo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #c7cdc8; /* taste-skill-ignore: regua da lista de arquivos */
  color: var(--ink);
  text-decoration: none;
}
.arquivo:first-child { border-top: 1px solid #c7cdc8; } /* taste-skill-ignore: regua da lista de arquivos */
/* O nome do arquivo não tem espaço onde quebrar; sem isto o mais comprido
   (GerenciadorDeEscala_Setup_1.0.0.exe) empurrava o "Baixar" para fora da
   margem a 390 px e criava rolagem lateral a 360. */
.arquivo-nome { font-size: var(--t-body); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
/* Link é link: já tem sublinhado, não precisa da cor da medida. */
.arquivo-acao { font-size: var(--t-small); color: var(--ink); text-decoration: underline; flex: 0 0 auto; }
.arquivo:hover .arquivo-acao { color: var(--ink); }

.rodape-nota { margin-top: 28px; font-size: var(--t-small); color: var(--muted); max-width: 48ch; }

/* ------------------------------------------------- selo e preço de oferta */

/* O preço cheio fica pequeno e riscado ao lado, nunca do mesmo tamanho:
   quem decide a leitura é o preço que se paga hoje. */
.preco-cheio {
  font-family: var(--f);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--t-lead);
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 0.4em;
  align-self: center;
}

/* ===================================================== conteúdo que faltava
   Cinco seções terminavam em campo vazio e a página lia como obra parada.
   Nada aqui é enchimento: são fatos que já existiam no projeto e não estavam
   escritos em lugar nenhum da página. */

/* --- a tira de fatos, no pé do herói --- */
.tira-fatos {
  list-style: none;
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.tira-fatos li {
  padding: 18px 0 20px;
}
.tira-fatos b { display: block; font-size: var(--t-body); font-weight: 600; }
.tira-fatos span { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted); }
@media (min-width: 720px) {
  .tira-fatos { grid-template-columns: repeat(4, 1fr); }
  .tira-fatos li { padding-right: 28px; }
}

/* --- os três casos reais, na seção "para quem" --- */
.casos {
  list-style: none;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 3vw, 44px);
}
@media (min-width: 860px) { .casos { grid-template-columns: repeat(3, 1fr); } }
.casos li { border-top: 2px solid var(--ink); padding-top: 18px; }
.caso-quem {
  display: block;
  font-family: var(--f); font-stretch: var(--larg-rotulo);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--t-body);
}
.casos p { margin-top: 10px; font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
.casos p b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.caso-prog {
  display: inline-block; margin-top: 16px;
  font-size: var(--t-small); color: var(--muted);
}

/* --- o que entra e o que não entra, ao lado do preço --- */
.inclui {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}
@media (min-width: 760px) { .inclui { grid-template-columns: 1fr 1fr; } }
.inclui h3 {
  font-family: var(--f); font-stretch: var(--larg-rotulo);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--t-body); margin-bottom: 10px;
}
.inclui ul { list-style: none; margin: 0; padding: 0; }
.inclui li {
  font-size: var(--t-body); line-height: 1.45;
  padding: 7px 0 7px 22px; position: relative;
}
.inclui li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 11px; height: 2px; background: var(--ink);
}
.inclui div:last-child li { color: var(--muted); }
.inclui div:last-child li::before { background: var(--muted); }

/* --- a ficha técnica, na coluna vazia do FAQ --- */
.ficha {
  margin: clamp(30px, 4vw, 48px) 0 0;
  border-top: 2px solid var(--ink);
}
.ficha dt {
  font-family: var(--f); font-stretch: var(--larg-rotulo);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--t-small); color: var(--muted);
  padding-top: 14px;
}
.ficha dd {
  margin: 2px 0 12px; padding-bottom: 0;
  font-size: var(--t-small); line-height: 1.5;
}
.ficha code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em; background: var(--surface); padding: 0 4px;
}

/* --- o rodapé: o tipo grande volta a ser o nome da casa --- */
/* A ASSINATURA GRANDE (logotipo B): o nome está NA régua. A linha de base
   continua sob ele e o último traço da graduação fecha a escala depois dele.
   Tudo em em, na proporção da grade de 24: 1 unidade = 1/13,6 em.
   Só de 36 px de símbolo para cima — abaixo disso o traço final lê como
   vírgula, e vale a assinatura horizontal do cabeçalho.
   O tamanho é a largura disponível dividida pela largura da assinatura em em,
   para ela nunca quebrar nem vazar no telefone. */
.assinatura-b {
  display: inline-flex;
  align-items: flex-end;
  max-width: 100%;
  margin: 0;
  font-family: var(--f);
  font-stretch: 68%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  font-size: min(var(--t-head), calc((100vw - 2 * var(--margem)) / 10.75));
  border-bottom: 0.147em solid currentColor;
}
.assinatura-b svg { width: 1.324em; height: 1.176em; flex: 0 0 auto; }
.assinatura-b .nome { margin: 0 0.265em -0.044em 0.368em; }
.assinatura-b .fim { width: 0.147em; height: 0.294em; background: currentColor; flex: 0 0 auto; }
.rodape-fala {
  margin-top: clamp(26px, 3vw, 40px);
  display: grid; gap: 8px; max-width: 52ch;
}
.rodape-fala p { font-size: var(--t-small); color: #b8bdb8; margin: 0; }
.rodape-email {
  /* e-mail não se escreve em caixa alta: é para ser copiado como está */
  font-family: var(--f);
  font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--t-lead); color: var(--acao-ink);
  text-decoration: none; border-bottom: 2px solid var(--acao-ink);
  justify-self: start; line-height: 1.2;
}
.rodape-email:hover { border-bottom-color: transparent; }
.rodape-fala-nota { max-width: 44ch; }

/* --- o que conta como custo do mês, ao lado da conta ao vivo --- */
.o-que-conta {
  margin-top: clamp(44px, 5vw, 76px);
  display: grid; gap: clamp(26px, 3vw, 52px);
  border-top: 2px solid var(--ink); padding-top: 22px;
}
@media (min-width: 820px) { .o-que-conta { grid-template-columns: 1fr 1fr; } }
.o-que-conta h3 {
  font-family: var(--f); font-stretch: var(--larg-rotulo);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--t-body); margin-bottom: 10px;
}
.o-que-conta ul { list-style: none; margin: 0; padding: 0; }
.o-que-conta li {
  font-size: var(--t-body); line-height: 1.45;
  padding: 7px 0 7px 22px; position: relative;
}
.o-que-conta li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 11px; height: 2px; background: var(--ink);
}
.o-que-conta div:last-child li { color: var(--muted); }
.o-que-conta div:last-child li::before { background: var(--muted); }
.o-que-conta-pe {
  margin-top: 16px; font-size: var(--t-small); line-height: 1.55;
  color: var(--muted); max-width: 46ch;
}
.o-que-conta-pe b { color: var(--ink); font-weight: 600; }

/* --- o que sobra no fim do passo a passo --- */
.estagios-fim {
  margin-top: clamp(18px, 2vw, 28px);
  font-size: var(--t-small); line-height: 1.55; color: var(--muted);
  max-width: 44ch;
}

/* O recorte de programa é um bloco DENTRO da manchete, e seu tamanho é dado em
   em da manchete (3,2 x 0,84). Em tela grande a caixa comporta as três linhas
   do recorte; abaixo de ~1100px a manchete encolhe, a caixa encolhe junto e o
   conteúdo VAZAVA para fora — o "R$ 4.530,00 em custos" sumia e o resto
   escrevia por cima do cartão. Aí ele deixa de ser caixa de tamanho fixo e
   passa a ter a altura do que carrega. */
@media (max-width: 1100px) {
  .encaixe {
    margin-top: 0.3em;
    width: min(440px, 100%);
    height: auto;
  }
  .frag-heroi { height: auto; }
}

/* No telefone, as alturas mínimas do fecho e do rodapé viram buraco: a tela é
   estreita e alta, o conteúdo empilha curto e o `justify-content` espalha o
   resto como vazio. Em tela pequena os dois passam a ter a altura do que
   carregam. */
@media (max-width: 720px) {
  .fecho { min-height: 0; }
  .rodape { min-height: 0; justify-content: flex-start; gap: 44px; }
}

/* ---------------------------------------------------------------------------
   Dois pedacinhos que estavam soltos em style inline: a cor do aviso de falha
   do checkout (era um #7d1d1a digitado dentro do main.js) e o "voltar ao topo"
   do rodape (era um style="color:inherit" no HTML).
   --------------------------------------------------------------------------- */
.aviso-falha {
  margin-top: 14px;
  font-size: 15px;
  max-width: 46ch;
  color: #7d1d1a;   /* "abaixo" da tabela de estados, IDENTIDADE 4 */
}

.elo-topo { color: inherit; }

/* O arroba no rodape: mesmo tamanho da nota ao lado, mas e um link, entao
   sublinha. Nao vira tipo grande - tipo grande no rodape e o nome da casa. */
.rodape-arroba { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rodape-arroba:hover { color: var(--bg); }