/* ============================================================
   Página da Formação de Educador Financeiro (/formacao/)
   Etapa 3 do rebranding. Carregada DEPOIS do base.css: aqui só
   mora o que é desta página. As peças (cartão, botão, faixa, chave,
   halo, grão, cabeçalho e rodapé) vêm do base.css, com a marcação
   copiada da /amostra/.

   Regra do formulário: é o padrão das páginas de captura (/agendar/ e
   /sistema/), com os quatro campos de uma vez. Sem JavaScript ele
   continua inteiro à vista e envia pelo POST do próprio formulário.

   Tamanho dos títulos vem da base. O respiro das seções é MENOR que o
   da .secao (até 80 px, contra 104 na base): pedido do Nícolas em
   21/10, "menos vão entre os blocos". A página não impõe título maior
   que os tetos da revisão de 21/10/2026 (abertura 64, seção 44,
   fechamento 52, cartão 26). O laranja é o destaque: um por bloco (texto, ícone, número
   ou luz), nunca fundo de seção; o botão principal segue laranja cheio.
   Ícone, luz difusa, lista com visto, etiqueta e flutuar são as peças
   da base (.icone, .brilho, .lista-check, .etiqueta, .flutua).
   ============================================================ */

/* listas usadas como grade não herdam marcador nem recuo */
.inclui-grade {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a folha de símbolos (o selo) não ocupa lugar */
.so-simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

/* menos vão entre os blocos (pedido do Nícolas em 21/10): até 80 px em
   cima e embaixo de cada seção, contra os 104 da base. A abertura tem o
   respiro dela, logo abaixo. */
main > .secao:not(.abertura) { padding-block: clamp(48px, 5.6vw, 80px); }

/* o cabeçalho é fixo: âncoras param abaixo dele */
#inclui, #certificado, #perguntas, #sessao-cartao { scroll-margin-top: 84px; }
#sessao { scroll-margin-top: 64px; }

/* link de texto com seta */
.link-seta {
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 245, 247, .25);
  padding-bottom: 2px;
  transition: border-color .2s;
}
.link-seta:hover { border-color: rgba(245, 245, 247, .7); }

/* ---------- 1. Abertura ---------- */
/* o degradê forte da abertura: azul do canto de cima e um calor laranja à direita */
.abertura {
  padding-top: clamp(48px, 6.5vw, 88px);
  padding-bottom: clamp(56px, 7vw, 96px);
  background:
    radial-gradient(ellipse 60% 70% at 85% 35%, rgba(230, 57, 5, .22) 0%, rgba(230, 57, 5, 0) 60%),
    radial-gradient(ellipse 80% 80% at 0% 0%, rgba(39, 56, 191, .45) 0%, rgba(39, 56, 191, 0) 60%),
    var(--fundo);
}
.abertura-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}
.abertura-texto {
  flex: 1 1 620px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  container-type: inline-size;   /* o título mede a largura da coluna (cqi) */
}
/* O título das capturas é longo: no máximo 4 linhas em qualquer tela
   (pedido do Nícolas em 22/10). A letra acompanha a largura da coluna do
   texto (7% dela, medido: com 7,3% já cabe só por um fio), entre 22 e 50 px. */
.abertura-titulo { font-size: clamp(22px, 7cqi, 50px); }
/* o rótulo mora DENTRO do h1, para o título ter "Formação de Educador Financeiro" */
.abertura-rotulo {
  display: block;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--destaque);   /* igual ao .rotulo da base */
}
.abertura-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
/* o botão da abertura mais largo e mais alto, para chamar mais atenção
   (pedido do Nícolas em 21/10); no celular ocupa a largura toda */
.abertura-botao {
  min-width: 340px;
  padding-block: 19px;
  font-size: 17px;
}
.prova {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* rostos de alunos (que autorizaram a imagem), um por cima do outro */
.prova-rostos { display: flex; flex: 0 0 auto; }
.prova-rostos img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0b0d1a;
  margin-left: -11px;
  background: #151824;
}
.prova-rostos img:first-child { margin-left: 0; }
.prova-texto {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245, 245, 247, .55);
}
.prova-texto strong { color: var(--texto); font-weight: 700; }

/* A vitrine: o certificado desenhado (papel creme, um pouco torto, com o
   selo) e, na frente, o notebook do Sistema sem fundo. As etiquetas da
   base flutuam em volta. Tudo em porcentagem da caixa, para encolher junto. */
.vitrine {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1.08 / 1;
}
.vitrine .brilho { top: 52%; }
/* O certificado clássico (opção A do Nícolas, 21/10): papel creme, a
   moldura com as ondas trançadas (o guilhochê dos diplomas), título com
   serifa, o nome sobre a linha, o texto do curso e, no pé, as duas
   assinaturas com o selo e a fita no meio. Tudo em cqi (largura do papel),
   para encolher junto com a caixa. */
.diploma {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 5%;
  width: 88%;
  aspect-ratio: 1.414 / 1;
  border-radius: 3px;
  container-type: inline-size;
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    #faf8f3;
  color: #0a0a12;
  transform: rotate(-3deg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .6) inset;
}
/* a moldura é o símbolo #moldura-certificado (no topo do HTML), com as
   cores no próprio desenho: o mesmo na abertura e na seção do certificado */
.diploma-moldura { position: absolute; inset: 0; width: 100%; height: 100%; }
.diploma-miolo {
  position: absolute;
  inset: 12.5% 11% 9.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* serifa só no certificado: é ela que dá a cara de documento */
.diploma-tipo,
.diploma-nome { font-family: Georgia, "Times New Roman", serif; }
.diploma-tipo {
  padding-left: .18em;   /* o espaço da última letra sobra à direita: compensa */
  font-size: 7.4cqi;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1c229c;
}
.diploma-sub {
  margin-top: 3cqi;
  font-size: 1.9cqi;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(10, 10, 18, .5);
}
.diploma-nome {
  margin-top: 1.6cqi;
  min-width: 50cqi;
  padding: 0 3cqi .8cqi;
  border-bottom: 1px solid rgba(10, 10, 18, .35);
  font-size: 5.4cqi;
  font-style: italic;
  line-height: 1.2;
  color: rgba(10, 10, 18, .72);
}
.diploma-texto {
  margin-top: 2.2cqi;
  max-width: 56cqi;
  font-size: 2.2cqi;
  line-height: 1.45;
  color: rgba(10, 10, 18, .62);
}
.diploma-texto strong { font-weight: 700; color: #0a0a12; }
/* o pé: assinatura, selo com fita, assinatura */
.diploma-pe {
  margin-top: auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 3cqi;
}
.diploma-assina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4cqi;
}
.diploma-rubrica { width: 15cqi; height: auto; aspect-ratio: 3 / 1; }
.diploma-rubrica path { fill: none; stroke: #1c229c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diploma-assina span {
  width: 100%;
  padding-top: .9cqi;
  border-top: 1px solid rgba(10, 10, 18, .35);
  font-size: 1.8cqi;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(10, 10, 18, .55);
}
.diploma-lacre { position: relative; width: 16cqi; margin-bottom: -1.5cqi; }
.diploma-fitas {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 78%;
  height: auto;
  transform: translateX(-50%);
}
.diploma-fitas path { fill: #c43104; }
.diploma-fitas path + path { fill: #e63905; }
.diploma-selo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 3px 6px rgba(230, 57, 5, .35));
}
/* O notebook do Sistema, sem fundo (recortado do quadro final da abertura
   do vídeo), em cima do canto de baixo do certificado: sem caixa em volta
   (pedido do Nícolas em 21/10). A sombra acompanha o desenho do aparelho. */
.vitrine-notebook {
  position: absolute;
  z-index: 2;
  right: -6%;
  bottom: 1%;
  width: 60%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
}
/* O certificado e a tela balançam juntos, devagar, para a direita e para
   a esquerda, girando em perspectiva: o balanço do computador da /sistema/
   (pedido do Nícolas em 21/10). Uma entrada de 3 s leva do reto até a
   ponta, e daí vai de uma ponta à outra, parando de leve em cada uma. As
   etiquetas ficam de fora e continuam flutuando. Fora da tela para (o
   pagina-formacao.js marca a abertura); com menos movimento, fica parado. */
.vitrine-cena {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 55%;
  will-change: transform;
  animation:
    vitrine-entra 3s ease-in-out 1s both,
    vitrine-balanca 11s ease-in-out 4s infinite;
}
@keyframes vitrine-entra {
  from { transform: perspective(1600px) rotateY(0deg); }
  to { transform: perspective(1600px) rotateY(-6deg); }
}
@keyframes vitrine-balanca {
  0%, 100% { transform: perspective(1600px) rotateY(-6deg); }
  50% { transform: perspective(1600px) rotateY(6deg); }
}
.abertura.fora-da-tela .vitrine-cena { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .vitrine-cena { animation: none; }
}
.vitrine-etiqueta { position: absolute; z-index: 3; }
.vitrine-etiqueta-1 { left: -3%; top: 0; }
.vitrine-etiqueta-2 { right: -2%; top: 3%; }
.vitrine-etiqueta-3 { left: -4%; top: 77%; }
.vitrine-etiqueta-4 { left: 18%; bottom: 0; }
.vitrine-etiqueta-5 { right: -3%; bottom: 5%; }   /* colada na tela do Sistema, longe das assinaturas */
@media (max-width: 1100px) {
  .vitrine-etiqueta-1 { left: 0; }
  .vitrine-etiqueta-2 { right: 0; }
  .vitrine-etiqueta-3 { left: 0; }
}
/* a partir de 860 px, texto e vitrine lado a lado: em tablet e notebook
   pequeno o certificado aparece na primeira tela (a vitrine encolhe junto) */
@media (min-width: 860px) {
  .abertura-miolo {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 48px);
  }
  .vitrine { width: 100%; }   /* na grade, a margem automática encolheria a caixa a zero */
}
/* vitrine estreita (ao lado do texto ou empilhada com as 5 etiquetas): Concierge sobe para não encostar em Eventos */
@media (min-width: 561px) and (max-width: 1100px) {
  .vitrine-etiqueta-3 { top: 68%; }
}
/* empilhado: a vitrine mais baixa e mais perto do botão */
@media (max-width: 859px) {
  .abertura-miolo { gap: 28px; }
  .vitrine { flex-basis: 100%; max-width: 460px; }
}
@media (max-width: 760px) {
  .abertura-miolo { gap: 36px; }
  .abertura-acao { gap: 18px; }
  .abertura-acao > .botao { flex: 1 1 100%; min-width: 0; }
  .vitrine { flex-basis: 100%; }
}
/* no celular, três etiquetas e menores, todas dentro da caixa; os rostos
   menores, para o número caber numa linha */
@media (max-width: 560px) {
  .prova { gap: 12px; }
  .prova-rostos img { width: 34px; height: 34px; margin-left: -9px; }
  .prova-texto { font-size: 13px; }
  .vitrine .etiqueta { gap: 8px; padding: 6px 12px 6px 6px; font-size: 13px; }
  .vitrine .etiqueta-icone { width: 24px; height: 24px; }
  .vitrine .etiqueta-icone svg { width: 13px; height: 13px; }
  .vitrine-etiqueta-3, .vitrine-etiqueta-4 { display: none; }
  .vitrine-etiqueta-5 { left: 2%; right: auto; top: auto; bottom: 4%; }
}

/* ---------- 2. A oportunidade ---------- */
/* texto à esquerda, os dois números à direita (empilhados no celular).
   O destaque laranja do bloco são os números. */
.oportunidade-miolo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.oportunidade-topo .apoio { max-width: 540px; }
.dados {
  display: grid;
  gap: 14px;
}
.dado {
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
}
.dado-numero {
  grid-row: span 2;
  font-size: clamp(2.125rem, 2.2vw + 1rem, 2.75rem);   /* 34 a 44 px */
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--destaque);
}
.dado-legenda { font-size: 16px; line-height: 1.4; color: rgba(245, 245, 247, .82); }
.dado-fonte { padding-top: 4px; font-size: 13px; color: var(--texto-rotulo); }
@media (max-width: 900px) {
  .oportunidade-miolo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dado { grid-template-columns: minmax(0, 1fr); }
  .dado-numero { grid-row: auto; padding-bottom: 10px; }
}

/* ---------- 3. Para quem é: abas com cena ----------
   Opção A do Nícolas (22/10). No computador, a lista dos casos à
   esquerda e o cartão do caso à direita, com o desenho (a cena) e o
   texto. A aba ativa tem uma barrinha que enche em 6 s e, no fim, o
   pagina-formacao.js passa para o próximo caso; ele para de trocar
   quando a pessoa escolhe um caso, e pausa com o mouse em cima, com o
   foco dentro ou fora da tela. Sem script (.casos sem .is-pronto), os
   quatro cartões ficam um embaixo do outro. */
.casos { display: flex; flex-direction: column; gap: 16px; }
.casos-paineis { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.casos.is-pronto {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.casos-abas { display: flex; flex-direction: column; gap: 8px; }
.casos-abas[hidden] { display: none; }
.casos-aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--borda-07);
  background: transparent;
  color: rgba(245, 245, 247, .62);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .3s, border-color .3s, color .3s;
}
.casos-aba:hover { color: var(--texto); border-color: var(--borda-16); }
.casos-aba:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.casos-aba.is-ativa {
  color: var(--texto);
  border-color: rgba(254, 121, 89, .45);
  background: linear-gradient(180deg, var(--fundo-cartao-alto) 0%, var(--fundo-cartao-baixo) 100%);
}
.casos-aba-icone {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 245, 247, .55);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--borda-07);
  transition: color .3s, background-color .3s, border-color .3s;
}
.casos-aba-icone svg { width: 20px; height: 20px; }
.casos-aba.is-ativa .casos-aba-icone {
  color: var(--destaque);
  background: linear-gradient(180deg, rgba(254, 121, 89, .16) 0%, rgba(254, 121, 89, .05) 100%);
  border-color: var(--destaque-borda);
}
/* a barrinha do tempo, só enquanto troca sozinho */
.casos-aba-tempo {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  opacity: 0;
}
.casos-aba-tempo > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--laranja);
  transform-origin: left center;
  transform: scaleX(0);
}
.casos.is-auto .casos-aba.is-ativa .casos-aba-tempo { opacity: 1; }
.casos.is-auto .casos-aba.is-ativa .casos-aba-tempo > span { animation: caso-tempo 6s linear forwards; }
/* a pausa precisa ser mais forte que a regra de cima: o "animation" de lá
   devolve o play-state para "running" */
.casos.is-auto.is-parado .casos-aba.is-ativa .casos-aba-tempo > span { animation-play-state: paused; }
@keyframes caso-tempo { to { transform: scaleX(1); } }

/* o cartão do caso: a cena à esquerda e o texto à direita */
.caso {
  padding: 16px clamp(20px, 2.6vw, 32px) 16px 16px;
  border-radius: var(--raio-g);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(ellipse 60% 100% at 100% 100%, rgba(39, 56, 191, .3) 0%, rgba(39, 56, 191, 0) 70%),
    linear-gradient(180deg, var(--fundo-cartao-alto) 0%, var(--fundo-cartao-baixo) 100%);
}
.caso[hidden] { display: none; }
.caso:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.caso-texto { display: flex; flex-direction: column; gap: 12px; }
.caso-titulo {
  font-size: clamp(1.375rem, .8vw + 1.05rem, 1.625rem);   /* 22 a 26 px: teto de título de cartão */
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.caso-desc { font-size: 17px; line-height: 1.6; color: var(--texto-apoio); }
/* a "tela" da cena: a mesma moldura escura das telinhas de "O que você recebe" */
.caso-cena {
  position: relative;
  height: 260px;
  border-radius: calc(var(--raio) - 6px);
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(39, 56, 191, .3) 0%, rgba(39, 56, 191, 0) 70%),
    linear-gradient(180deg, #0d0f16 0%, #08090d 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

/* cena do bancário: do banco para o seu negócio */
.cena-banco { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.cena-ficha {
  flex: 1 1 0;
  max-width: 170px;
  min-width: 0;
  padding: 16px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(245, 245, 247, .55);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.cena-ficha b { font-size: 15px; color: rgba(245, 245, 247, .8); }
.cena-ficha-icone {
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  color: rgba(245, 245, 247, .55);
}
.cena-ficha-icone svg { width: 20px; height: 20px; }
.cena-ficha-acesa {
  background: linear-gradient(180deg, rgba(254, 121, 89, .14) 0%, rgba(254, 121, 89, .04) 100%);
  border-color: rgba(254, 121, 89, .45);
  box-shadow: 0 16px 40px rgba(230, 57, 5, .18);
  color: rgba(245, 245, 247, .75);
}
.cena-ficha-acesa b { color: var(--texto); }
.cena-ficha-acesa .cena-ficha-icone { background: var(--laranja); color: #ffffff; }
.cena-seta { flex: 0 0 auto; width: 26px; color: var(--destaque); }
.cena-seta svg { display: block; width: 26px; height: 26px; }

/* cena do assessor: a rosca do dinheiro inteiro, o investimento é só uma fatia */
.cena-rosca { display: flex; align-items: center; gap: 22px; }
.cena-rosca-grafico {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#2738bf 0 26%, #e63905 26% 50%, #fe7959 50% 76%, #f5f5f7 76% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cena-rosca-grafico > span {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #0b0d14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(245, 245, 247, .6);
}
.cena-rosca-grafico b { font-size: 16px; color: var(--texto); }
.cena-legenda { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 700; color: rgba(245, 245, 247, .8); }
.cena-legenda li { display: flex; align-items: center; gap: 8px; }
.cena-legenda i { width: 10px; height: 10px; border-radius: 3px; }

/* cena do contador: a folha da empresa atrás e a da família na frente */
.cena-contas { position: relative; width: 250px; max-width: 100%; height: 180px; }
.cena-folha {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 190px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #faf8f3;
  color: #0a0a12;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: rotate(3deg);
}
.cena-folha b { font-size: 13px; color: #1c229c; }
.cena-folha-tras { left: 0; right: auto; top: 0; bottom: auto; width: 170px; background: #e9e7e1; transform: rotate(-5deg); }
.cena-linha { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; }
.cena-linha em { font-style: normal; font-size: 11px; font-weight: 700; color: rgba(10, 10, 18, .6); }
.cena-barra { display: block; height: 7px; border-radius: 7px; background: rgba(28, 34, 156, .55); }
.cena-folha-tras .cena-barra { background: rgba(10, 10, 18, .16); }
.cena-barra-laranja { background: var(--laranja); }

/* cena de quem muda de carreira: a lista até o primeiro cliente */
.cena-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cena-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(245, 245, 247, .8);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.cena-lista i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .3);
}
.cena-lista .is-feito i {
  border-color: var(--laranja);
  background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.cena-lista .is-agora {
  color: var(--texto);
  border-color: rgba(254, 121, 89, .45);
  background: linear-gradient(180deg, rgba(254, 121, 89, .14) 0%, rgba(254, 121, 89, .04) 100%);
}
.cena-lista .is-agora i { border-color: var(--laranja); }
.cena-bandeira { width: 18px; height: 18px; margin-left: auto; color: var(--destaque); }

/* celular e tablet: as abas viram uma grade de 2 em cima do cartão, e o
   cartão empilha a cena em cima do texto */
@media (max-width: 860px) {
  .casos.is-pronto { grid-template-columns: minmax(0, 1fr); }
  .casos-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casos-aba { padding: 12px; gap: 10px; font-size: 14px; }
  .casos-aba-icone { width: 32px; height: 32px; border-radius: 10px; }
  .casos-aba-icone svg { width: 17px; height: 17px; }
  .casos-aba-tempo { left: 12px; right: 12px; bottom: 5px; }
  .caso { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 24px; }
  .caso-texto { padding-inline: 8px; }
  .caso-cena { height: 220px; padding: 16px; }
}
@media (max-width: 420px) {
  .cena-rosca { gap: 14px; }
  .cena-rosca-grafico { width: 120px; height: 120px; }
  .cena-rosca-grafico > span { width: 78px; height: 78px; font-size: 10px; }
  .cena-ficha { padding: 12px 10px; }
  .cena-ficha b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .casos-aba, .casos-aba-icone { transition: none; }
}

/* ---------- 4. O caminho ---------- */
/* Degradê no lugar do preto puro, como no "E tem mais" da /sistema/
   (pedido do Nícolas em 21/10): manchas suaves de azul e um toque de
   laranja, que somem antes das bordas de cima e de baixo para a seção
   emendar sem degrau nas vizinhas. */
.caminho {
  background:
    radial-gradient(ellipse 46% 40% at 50% 66%, rgba(39, 56, 191, .22) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 30% 30% at 12% 30%, rgba(39, 56, 191, .13) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 28% 24% at 90% 80%, rgba(230, 57, 5, .1) 0%, rgba(230, 57, 5, 0) 70%),
    var(--fundo);
}
/* A trilha (opção A do Nícolas, 21/10): o título no centro e, embaixo, os
   quatro marcos numa linha. Entre um marco e o seguinte há uma ligação: o
   trilho apagado e, por cima, o pedaço já andado em laranja, que o
   pagina-formacao.js enche (--p, de 0 a 1) conforme a trilha passa pela
   tela; o marco acende quando a linha chega nele. Sem script (ou com menos
   movimento) a trilha fica inteira acesa: --p vale 1 e os marcos só se
   apagam quando o script marca a trilha como viva. No celular fica em pé. */
.trilha {
  --trilha-vao: 24px;
  --trilha-marco: 64px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--trilha-vao);
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.trilha-passo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
/* do centro deste marco até o centro do próximo */
.trilha-ligacao {
  position: absolute;
  left: 50%;
  top: calc(var(--trilha-marco) / 2 - 1.5px);
  width: calc(100% + var(--trilha-vao));
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
}
.trilha-ligacao > span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--laranja) 0%, #fe7959 100%);
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
  transition: transform .18s linear;
}
.trilha-marco {
  position: relative;
  z-index: 1;
  width: var(--trilha-marco);
  height: var(--trilha-marco);
  margin-bottom: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--laranja);
  border: 1.5px solid var(--laranja);
  box-shadow: 0 0 0 6px rgba(230, 57, 5, .14), 0 10px 30px rgba(230, 57, 5, .3);
  transition: background-color .45s, border-color .45s, color .45s, box-shadow .45s;
}
.trilha-marco svg { width: 26px; height: 26px; }
.trilha[data-trilha-viva] .trilha-passo:not(.is-aceso) .trilha-marco {
  color: rgba(245, 245, 247, .5);
  background: #0d0f16;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
}
.trilha-num {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-rotulo);
}
.trilha-nome { font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.trilha-texto { max-width: 230px; font-size: 15px; line-height: 1.55; color: rgba(245, 245, 247, .6); }

/* em pé: o marco à esquerda e o texto ao lado; a ligação desce até o
   centro do próximo marco */
@media (max-width: 760px) {
  .trilha {
    --trilha-vao: 26px;
    --trilha-marco: 52px;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }
  .trilha-passo {
    display: grid;
    grid-template-columns: var(--trilha-marco) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 4px;
    align-items: start;
    text-align: left;
  }
  .trilha-marco { grid-row: 1 / span 3; margin-bottom: 0; }
  .trilha-marco svg { width: 22px; height: 22px; }
  .trilha-num { padding-top: 2px; }
  .trilha-ligacao {
    left: calc(var(--trilha-marco) / 2 - 1.5px);
    top: calc(var(--trilha-marco) / 2);
    width: 3px;
    height: calc(100% + var(--trilha-vao));
  }
  .trilha-ligacao > span {
    background: linear-gradient(180deg, var(--laranja) 0%, #fe7959 100%);
    transform-origin: center top;
    transform: scaleY(var(--p, 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .trilha-ligacao > span, .trilha-marco { transition: none; }
}

/* ---------- 5. O que você recebe ----------
   Seis cartões iguais (3 por linha no computador), cada um com a sua
   telinha em cima (opção A do Nícolas, 21/10), misturando coisa real e
   coisa desenhada (pedido dele em 22/10): o painel do Sistema, o quadro
   de uma aula e a foto do Karppa Experience são imagens; a conversa com
   o concierge, o grupo e os contratos são HTML e CSS. */
.inclui-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.inclui-item {
  padding: 14px 14px clamp(22px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inclui-item > .inclui-nome,
.inclui-item > .inclui-texto { padding-inline: clamp(8px, 1vw, 12px); }
/* o Sistema leva a borda com luz da base, no raio dos outros cartões */
.inclui-sistema {
  --dentro:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(39, 56, 191, .35) 0%, rgba(39, 56, 191, 0) 70%) padding-box,
    linear-gradient(180deg, #10121a 0%, #0a0b10 100%) padding-box;
  border-radius: var(--raio);
}
.inclui-nome { margin-top: 10px; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.inclui-texto { font-size: 15px; line-height: 1.55; color: rgba(245, 245, 247, .6); }

/* a moldura de cada telinha: uma "tela" escura com uma luz azul no canto */
.inclui-tela {
  position: relative;
  height: 172px;
  border-radius: calc(var(--raio) - 8px);
  border: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(39, 56, 191, .28) 0%, rgba(39, 56, 191, 0) 70%),
    linear-gradient(180deg, #0d0f16 0%, #08090d 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.inclui-tela-foto { padding: 0; display: block; }
.inclui-tela-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
/* o Sistema: o notebook do vídeo com o painel financeiro (receitas e
   despesas), recortado da cena 8. O fundo do quadro é o #050608 e some na
   tela (lighten). */
.inclui-tela-notebook img {
  object-position: 50% 15%;   /* o corte da caixa sai de baixo: a folga em cima da tampa fica */
  mix-blend-mode: lighten;
  -webkit-mask-image: none;
  mask-image: none;
}
/* peças comuns das telinhas */
.mini-balao {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(245, 245, 247, .9);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .06);
}

/* aula: o quadro de uma aula de verdade (área do aluno), inteiro, como
   num player, com a barra e os controles à vista */
.inclui-tela-aula { padding: 12px; }
.inclui-tela-aula img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

/* concierge: a pergunta do aluno e a resposta, como numa conversa */
.mini-conversa { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.mini-balao-eu {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: rgba(39, 56, 191, .55);
  border-color: rgba(120, 140, 255, .25);
}
.mini-balao-ela { align-self: flex-start; border-bottom-left-radius: 4px; }
.mini-quem {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--destaque);
}

/* comunidade: o topo do grupo com as pessoas e duas mensagens */
.mini-grupo { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mini-grupo-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(245, 245, 247, .85);
}
/* as pessoas do grupo com foto de verdade (pedido do Nícolas em 21/10) */
.mini-avatares { display: flex; }
.mini-avatares img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0d0f16;
  margin-left: -8px;
  background: #151824;
}
.mini-avatares img:first-child { margin-left: 0; }
.mini-balao-resposta { align-self: flex-end; background: rgba(230, 57, 5, .22); border-color: rgba(254, 121, 89, .25); }

/* eventos: a foto do Karppa Experience, inteira, sem o esmaecido de baixo */
.inclui-tela-evento img {
  object-position: 50% 30%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* modelos: dois documentos, o contrato na frente com a assinatura */
.mini-docs { position: relative; width: 210px; max-width: 100%; height: 132px; }
.mini-doc {
  position: absolute;
  right: 0;
  top: 6px;
  width: 150px;
  height: 120px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #faf8f3;
  color: #0a0a12;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transform: rotate(3deg);
}
.mini-doc b { font-size: 11px; line-height: 1.25; color: #1c229c; }
.mini-doc i { display: block; height: 5px; border-radius: 5px; background: rgba(10, 10, 18, .14); }
.mini-doc i:nth-of-type(2) { width: 86%; }
.mini-doc i:nth-of-type(3) { width: 64%; }
.mini-doc-tras { left: 0; right: auto; top: 0; transform: rotate(-6deg); background: #e9e7e1; }
.mini-rubrica { width: 64px; height: auto; margin-top: auto; align-self: flex-end; }
.mini-rubrica path { fill: none; stroke: #1c229c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 960px) {
  .inclui-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .inclui-grade { grid-template-columns: minmax(0, 1fr); }
  .inclui-tela { height: 164px; }
}

/* ---------- 6. O Sistema Karppa ---------- */
/* o mesmo degradê do caminho, com as manchas atrás da tela */
.sistema {
  background:
    radial-gradient(ellipse 44% 46% at 72% 50%, rgba(39, 56, 191, .2) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 38% 32% at 18% 56%, rgba(39, 56, 191, .14) 0%, rgba(39, 56, 191, 0) 70%),
    radial-gradient(ellipse 28% 22% at 86% 80%, rgba(230, 57, 5, .1) 0%, rgba(230, 57, 5, 0) 70%),
    var(--fundo);
}
.sistema-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}
.sistema-texto { flex: 1 1 460px; min-width: 0; }
/* a caixa inteira clareia por cima do degradê (lighten): assim o #050608
   do vídeo some no fundo da seção e não desenha um retângulo escuro */
.sistema-video { position: relative; flex: 1 1 520px; min-width: 0; max-width: 640px; margin-inline: auto; mix-blend-mode: lighten; }
/* As duas cenas emendadas (os bancos e a IA, depois o plano de ação), uma
   em cima da outra na mesma caixa: a da vez (.is-vez) aparece, e a troca
   é um esmaecer curto. Dentro da caixa, o lighten deixa a luz de trás
   passar. A margem negativa (sobre a largura) recolhe o vazio do vídeo em
   cima e embaixo do computador, como na /sistema/: a cena 10 ocupa de
   10,5% a 89,3% da altura. */
.sistema-telas {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 1510;
  margin: -5% 0 -10%;
}
.sistema-tela {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  opacity: 0;
  /* .3 s: o mesmo TROCA_MS do pagina-formacao.js. Uma cena some inteira e
     só depois a outra aparece, para nunca ficarem uma em cima da outra. */
  transition: opacity .3s ease;
}
.sistema-tela.is-vez { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sistema-tela { transition: none; }
}

/* ---------- 7. Quem ensina ---------- */
.nicolas-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
/* a foto sem moldura, com a luz laranja por trás (.brilho) */
.nicolas-foto {
  position: relative;
  flex: 0 1 380px;
  margin: 0;
}
/* a luz passa da foto pelos lados: mais larga que o teto de 140% da base */
.nicolas-foto .brilho { max-width: 190%; }
.nicolas-foto img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--raio-g);
  border: 1px solid var(--borda-08);
}
.nicolas-texto { flex: 1 1 420px; min-width: 0; gap: 14px; max-width: 680px; }
.nicolas-cargo { font-size: 16px; font-weight: 600; color: var(--texto-rotulo); margin-top: -6px; }
.nicolas-carta { font-size: 17px; line-height: 1.65; color: var(--texto-apoio); }
.nicolas-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--borda-08);
}
.nicolas-numeros dd { margin: 0; }
.nicolas-numero {
  white-space: nowrap;
  font-size: clamp(1.375rem, .6vw + 1.1rem, 1.625rem);   /* 22 a 26 px */
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.nicolas-legenda { padding-top: 6px; font-size: 14px; line-height: 1.4; color: var(--texto-rotulo); }
@media (max-width: 520px) {
  .nicolas-numeros { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nicolas-foto { flex-basis: 100%; max-width: 300px; margin-inline: auto; }
}

/* ---------- 8. O certificado, explicado ---------- */
/* O certificado inteiro (o desenho clássico da abertura) à esquerda, com o
   selo grande e a fita carimbados no canto de baixo, e o texto com os
   dados à direita (pedido do Nícolas em 21/10). Empilhado no celular. */
.certificado-miolo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}
.certificado-vitrine {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 1.3 / 1;
}
.certificado-vitrine .brilho { top: 48%; }
.certificado-diploma {
  left: 0;
  top: 3%;
  width: 92%;
  transform: rotate(-2deg);
}
/* com o selo grande fora do papel, o pé do certificado só tem as assinaturas */
.diploma-pe-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16cqi; padding-inline: 4cqi; }
.certificado-lacre {
  position: absolute;
  z-index: 2;
  right: 1%;
  bottom: 0;
  width: 31%;
  transform: rotate(10deg);
}
.certificado-selo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 30px rgba(230, 57, 5, .35));
}
.certificado-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.certificado-dados { margin: 8px 0 0; width: 100%; display: flex; flex-direction: column; }
/* no computador o selo sai um pouco do papel, para a assinatura da FIEP aparecer */
@media (min-width: 861px) {
  .certificado-lacre { right: -7%; bottom: -2%; }
}
@media (max-width: 860px) {
  .certificado-miolo { grid-template-columns: minmax(0, 1fr); }
}
.certificado-dados > div {
  padding: 14px 0;
  border-top: 1px solid var(--borda-08);
}
.certificado-dados > div:last-child { border-bottom: 1px solid var(--borda-08); }
.certificado-dados dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-rotulo);
}
.certificado-dados dd {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(245, 245, 247, .82);
}

/* ---------- 9. Depoimentos (o único lugar com rosto de aluno) ---------- */
/* o destaque laranja do bloco é o resultado de cada aluno; a foto cresce */
.depoimentos .miolo { margin-bottom: clamp(28px, 3.4vw, 40px); }
.depo-resultado {
  font-size: clamp(1.375rem, .6vw + 1.1rem, 1.625rem);   /* 22 a 26 px: teto de título de cartão */
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--destaque);
}
.depoimentos .depo { gap: 16px; padding: 28px; }
.depoimentos .depo-foto {
  width: 56px;
  height: 56px;
  border: 1px solid var(--borda-16);
}
@media (max-width: 520px) {
  .depoimentos .depo { padding: 24px; }
  .depoimentos .depo-foto { width: 48px; height: 48px; }
}

/* ---------- 11. Sessão Estratégica ---------- */
/* o degradê forte do fechamento: laranja subindo de baixo e azul de cima */
.sessao {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 70% at 15% 100%, rgba(230, 57, 5, .22) 0%, rgba(230, 57, 5, 0) 65%),
    radial-gradient(ellipse 60% 70% at 85% 0%, rgba(39, 56, 191, .45) 0%, rgba(39, 56, 191, 0) 70%),
    var(--fundo);
}
.sessao-miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(36px, 4.5vw, 56px);
  max-width: calc(1200px + 2 * max(20px, 5vw));
}
.sessao-texto {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* o visto laranja é o da .lista-check da base */
.sessao-lista {
  gap: 12px;
  font-size: 17px;
  color: rgba(245, 245, 247, .78);
}
.sessao-nota { font-size: 15px; line-height: 1.55; color: var(--texto-rotulo); max-width: 520px; }

.sessao-cartao {
  flex: 1 1 440px;
  min-width: 0;
  padding: clamp(26px, 4vw, 44px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.captura { display: flex; flex-direction: column; gap: 22px; flex: 1; }
.form-titulo { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }

/* o formulário padrão das páginas de captura: os quatro campos de uma vez */
.form { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo-rotulo {
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(245, 245, 247, .62);
}
.campo-entrada {
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;   /* 16 px: o iPhone não dá zoom ao focar */
  line-height: 1.3;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.campo-entrada::placeholder { color: rgba(245, 245, 247, .35); }
.campo-entrada:focus {
  border-color: rgba(245, 245, 247, .5);
  box-shadow: 0 0 0 4px rgba(39, 56, 191, .35);
}
.campo-entrada[aria-invalid="true"] { border-color: #ff8a6b; }
/* a experiência: o select do padrão, com a seta desenhada e a lista aberta
   no escuro (color-scheme). Enquanto está em "Selecione…", fica apagado
   como um placeholder. */
.campo-escolha {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  cursor: pointer;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
}
.campo-escolha:invalid { color: rgba(245, 245, 247, .35); }
.campo-escolha option { color: var(--texto); background: #0f1117; }
.campo-erro {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #ff9b80;
}
.campo-erro:empty { display: none; }
.campo-dica {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(245, 245, 247, .8);
}
.campo-dica:empty { display: none; }
.campo-dica-botao {
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.form-enviar { width: 100%; margin-top: 6px; }
.form-enviar[disabled] { opacity: .7; cursor: progress; }
.form-erro {
  font-size: 14px;
  line-height: 1.5;
  color: #ff9b80;
}
.form-erro a { color: var(--texto); }
.form-aviso { font-size: 12px; line-height: 1.5; color: rgba(245, 245, 247, .4); text-align: center; }
.form-aviso a { color: rgba(245, 245, 247, .7); }

/* honeypot: fora da tela para gente e leitor de tela (mesma regra do styles.css) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formacao-quiz:focus { outline: none; }
/* o quiz é o mesmo da página inicial (quiz.css); aqui só troca as variáveis
   do tema para combinar com o cartão escuro do formulário */
.formacao-quiz .qz {
  --qz-accent: var(--texto);
  --qz-text: var(--texto);
  --qz-text-soft: var(--texto-apoio);
  --qz-line: rgba(255, 255, 255, .16);
  --qz-opt-accent: var(--azul-vivo);
}
.form-ok {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.form-ok:focus { outline: none; }
.form-ok-icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--texto);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-ok-icone svg { width: 28px; height: 28px; }
.form-ok-titulo { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.form-ok-texto { font-size: 16px; line-height: 1.6; color: var(--texto-apoio); max-width: 340px; }

@media (max-width: 520px) {
  .sessao-miolo { gap: 36px; }
  .sessao-cartao { min-height: 0; }
  .form-titulo { font-size: 20px; }
}

/* ---------- 12. Perguntas frequentes ---------- */
.perguntas-miolo {
  display: flex;
  flex-direction: column;
  max-width: calc(860px + 2 * max(20px, 5vw));
}
.perguntas-titulo { margin-bottom: 20px; }
.pergunta { border-top: 1px solid var(--borda-08); }
.pergunta:last-child { border-bottom: 1px solid var(--borda-08); }
.pergunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 4px; }
/* o sinal de mais vira menos: dois fios desenhados, sem caractere */
.pergunta-sinal {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.pergunta-sinal::before,
.pergunta-sinal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--destaque);
  transition: transform .25s var(--curva);
}
.pergunta-sinal::after { transform: rotate(90deg); }
.pergunta[open] .pergunta-sinal::after { transform: rotate(0deg); }
.pergunta p {
  margin: -8px 0 0;
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-apoio);
}

/* ---------- Barra fixa do celular ---------- */
.barra-fixa { display: none; }
@media (max-width: 760px) {
  .barra-fixa:not([hidden]) {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    transition: transform .35s var(--curva), opacity .25s, visibility 0s linear 0s;
  }
  .barra-fixa .botao { flex: 1; padding: 15px 18px; font-size: 15px; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 40px rgba(0, 0, 0, .55); }
  /* fora: desce e some do Tab e do leitor de tela */
  .barra-fixa.barra-fixa--fora {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    visibility: hidden;
    transition: transform .35s var(--curva), opacity .25s, visibility 0s linear .35s;
  }
}

/* ---------- Menos movimento: tudo parado ---------- */
@media (prefers-reduced-motion: reduce) {
  .link-seta, .campo-entrada, .pergunta-sinal::before, .pergunta-sinal::after { transition: none; }
  .barra-fixa:not([hidden]), .barra-fixa.barra-fixa--fora { transition: none; }
}