/* ===================================================================
   Stories na Prática — Design system
   Todos os tokens vêm de 01-identidade-visual/Direção Visual - Stories na Prática.md
   Não inventar cor, fonte ou espaço aqui: só traduzir o que já foi decidido.
   =================================================================== */

:root {
  /* Paleta (Direção Visual, seção Paleta) */
  --cor-fundo: #0B0B0C;
  --cor-superficie: #17171A;
  --cor-cartao: #17171A; /* versão opaca da superfície: cartões que se sobrepõem não podem ser transparentes */
  --cor-texto: #F1F1EE;
  --cor-texto-2: #A8A8AC;
  --cor-marca: #C9C9CE;
  --cor-destaque: #FFFFFF;
  --cor-sobre-destaque: #0B0B0C;
  --cor-borda: #2A2A2E;

  /* Estado de hover/foco — derivado logicamente da cor de destaque (mais escura), conferido com o script de contraste */
  --cor-destaque-hover: #D9D9D9;

  /* Tipografia (Direção Visual, seção Tipografia) */
  --fonte-titulo: "Oswald", Impact, "Arial Narrow", sans-serif;
  --fonte-texto: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --peso-titulo: 700;
  --caixa-titulo: uppercase;
  --letras-titulo: -0.01em;

  --h1-celular: 40px;   --h1-computador: 72px;
  --h2-celular: 28px;   --h2-computador: 40px;
  --h3: 22px;
  --texto-celular: 16px; --texto-computador: 18px;
  --pequeno: 14px;
  --entrelinha-titulo: 1.08;
  --entrelinha-subtitulo: 1.25;
  --entrelinha-texto: 1.6;
  --entrelinha-legenda: 1.5;

  /* Espaço — escala de base 8 (Direção Visual, Espaço e ritmo) */
  --esp-4: 4px; --esp-8: 8px; --esp-12: 12px; --esp-16: 16px; --esp-24: 24px;
  --esp-32: 32px; --esp-48: 48px; --esp-64: 64px; --esp-96: 96px;
  --secao-espaco-celular: 48px;
  --secao-espaco-computador: 96px;

  /* Formas (Direção Visual, Formas e detalhes) */
  --raio: 6px;
  /* Botões "Garantir minha vaga" / "Falar no WhatsApp": mais arredondados que o
     resto. 12px é o raio que a prancha de estilo usa nas suas amostras maiores
     (a regra geral da Direção Visual continua sendo 6px, pros demais elementos). */
  --raio-botao: 12px;
}

/* ===================== Reset mínimo ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-celular);
  line-height: var(--entrelinha-texto);
}
@media (min-width: 900px) {
  body { font-size: var(--texto-computador); }
}

/* respeita quem desativou animação (Direção Visual, Movimento) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js-revelar-palavras { opacity: 1; }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--esp-24);
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  text-transform: var(--caixa-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: var(--entrelinha-titulo);
}
h1 { font-size: var(--h1-celular); }
h2 { font-size: var(--h2-celular); }
h3 { font-size: var(--h3); line-height: var(--entrelinha-subtitulo); }
@media (min-width: 900px) {
  h1 { font-size: var(--h1-computador); }
  h2 { font-size: var(--h2-computador); }
}

.sobretitulo {
  font-size: var(--pequeno);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-2);
  margin-bottom: var(--esp-16);
  font-weight: 600;
}

.legenda { font-size: var(--pequeno); line-height: var(--entrelinha-legenda); color: var(--cor-texto-2); }

section {
  padding-block: var(--secao-espaco-celular);
}
@media (min-width: 900px) {
  section { padding-block: var(--secao-espaco-computador); }
}

/* ===================== Fundos das seções (alternando preto e branco) ===================== */
/* Ordem: Topo preto, Método branco, Depoimentos preto, Preço branco, Dúvidas preto.
   Imagens oficiais de 01-identidade-visual/Plano de fundo (7.png = preto,
   8.png = branco), copiadas pra images/.

   Dois modos:
   - FUNDO VIVO (html.fundo-vivo, ligado pelo JS quando o aparelho aceita
     movimento): o fundo é uma camada fixa que muda de cor junto com a rolagem
     (ver efeitos-movimento.js). O tema (escuro/claro) vem de html[data-tema].
   - FIXO (sem JS, ou "reduzir movimento"): cada seção mostra a sua cor final,
     sem transição. */

/* ---- tokens do tema claro: seção branca (modo fixo) ou tema claro (modo vivo) ---- */
html:not(.fundo-vivo) section.fundo-branco,
html.fundo-vivo[data-tema="claro"] {
  --cor-texto: #26262A;
  --cor-texto-2: #3A3A3F;
  --cor-marca: #26262A;
  --cor-destaque: #0B0B0C;
  --cor-sobre-destaque: #FFFFFF;
  --cor-destaque-hover: #26262A;
  --cor-superficie: rgba(255, 255, 255, 0.55);
  --cor-cartao: #EDEDED;
  --cor-borda: rgba(11, 11, 12, 0.25);
  --preencher-rgb: 11, 11, 12;
  --preencher-base: 0.32;
  color: var(--cor-texto);
}
/* sombra dos cartões que empilham: mais leve em fundo claro */
html:not(.fundo-vivo) section.fundo-branco .js-pilha .folha,
html.fundo-vivo[data-tema="claro"] .js-pilha .folha { box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16); }
html:not(.fundo-vivo) section.fundo-branco h1,
html:not(.fundo-vivo) section.fundo-branco h2,
html:not(.fundo-vivo) section.fundo-branco h3 { color: #0B0B0C; }

/* ---- modo fixo: imagem de fundo em cada seção ---- */
html:not(.fundo-vivo) section.fundo-preto {
  background: url("images/fundo-preto.png") center / 100% 100% no-repeat, #0B0B0B;
}
html:not(.fundo-vivo) section.fundo-branco {
  background: url("images/fundo-branco.png") center / 100% 100% no-repeat, #C0C0C0;
}

/* ---- modo vivo: camada fixa atrás de tudo, três camadas empilhadas ----
   cor lisa (--fundo-cor, no html) + imagem preta e imagem branca, cada uma
   com a sua opacidade (--fundo-op-preto / --fundo-op-branco) ---- */
html.fundo-vivo { background-color: var(--fundo-cor, #0B0B0B); }
html.fundo-vivo body { background: transparent; }
html.fundo-vivo body::before,
html.fundo-vivo body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
html.fundo-vivo body::before {
  background-image: url("images/fundo-preto.png");
  opacity: var(--fundo-op-preto, 1);
}
html.fundo-vivo body::after {
  background-image: url("images/fundo-branco.png");
  opacity: var(--fundo-op-branco, 0);
}

/* o cabeçalho tem fundo escuro próprio, então mantém as cores claras em
   qualquer tema */
.cabecalho {
  --cor-texto: #F1F1EE;
  --cor-texto-2: #A8A8AC;
  --cor-borda: #2A2A2E;
}

/* ===================== Botões ===================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  min-height: 48px;
  padding: 0 var(--esp-24);
  border-radius: var(--raio-botao);
  font: 600 16px/1 var(--fonte-texto);
  border: 1.5px solid transparent;
  white-space: nowrap;
  /* sem transição de cor de fundo/texto: quando o tema muda (preto <-> branco) na
     rolagem, uma transição faria o botão passar por cinza sobre cinza */
  transition: border-color 0.15s ease;
}
.botao--principal {
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
}
.botao--principal:hover,
.botao--principal:focus-visible {
  background: var(--cor-destaque-hover);
}
.botao--secundario {
  border-color: var(--cor-borda);
  color: var(--cor-texto);
  background: transparent;
}
.botao--secundario:hover,
.botao--secundario:focus-visible {
  border-color: var(--cor-texto);
}
.botao:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }
.botao--pequeno { min-height: 40px; padding: 0 var(--esp-16); font-size: 14px; }

.etiqueta {
  display: inline-block;
  font-size: var(--pequeno);
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--raio);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}

/* ===================== Header ===================== */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cor-borda);
}
.cabecalho__linha {
  display: flex;
  align-items: center;
  gap: var(--esp-16);
  padding-block: var(--esp-32);
  position: relative;
}
.cabecalho__menu {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: var(--esp-24);
  font-size: 16px;
}
.cabecalho__menu a { color: var(--cor-texto-2); transition: color 0.15s ease; }
.cabecalho__menu a:hover { color: var(--cor-texto); }
.cabecalho__acoes { display: flex; align-items: center; gap: var(--esp-16); margin-left: auto; }
.menu-icone {
  display: block;
  width: 24px; height: 18px;
  position: relative;
  border: none;
  background: none;
}
.menu-icone span {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--cor-texto);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-icone span:nth-child(1) { top: 0; }
.menu-icone span:nth-child(2) { top: 8px; }
.menu-icone span:nth-child(3) { top: 16px; }
.menu-icone[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-icone[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-icone[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-mobile {
  display: none;
  flex-direction: column;
  gap: var(--esp-8);
  padding: var(--esp-16) 0 var(--esp-24);
  border-top: 1px solid var(--cor-borda);
}
.menu-mobile.aberto { display: flex; }
.menu-mobile a {
  padding: var(--esp-12) 0;
  color: var(--cor-texto);
  font-size: 17px;
  border-bottom: 1px solid var(--cor-borda);
}

@media (min-width: 760px) {
  .cabecalho__menu { display: flex; }
  .menu-icone { display: none; }
  .menu-mobile { display: none !important; }
}

/* ===================== Hero (Topo) ===================== */
.hero {
  padding-top: var(--esp-32);
  padding-bottom: var(--secao-espaco-celular);
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) { .hero { padding-top: var(--esp-48); padding-bottom: var(--secao-espaco-computador); } }


.hero__conteudo { max-width: 760px; margin: 0 auto; text-align: center; }

/* Partículas conectadas (ver efeitos-movimento.js): decoração do fundo escuro.
   Adaptado de 02-referencias/movimentos/particulas-conectadas.js. O canvas é
   uma camada fixa atrás de todo o conteúdo e aparece junto com o degradê preto:
   a opacidade é a mesma da imagem preta do fundo vivo (--fundo-op-preto), então
   entra na tela toda vez que o fundo escurece e some quando ele clareia. Não
   recebe clique e é mais apagado no meio (máscara), pra não atrapalhar a leitura. */
.js-teia {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--fundo-op-preto, 1);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(0, 0, 0, 0.12) 0%, #000 100%);
  mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(0, 0, 0, 0.12) 0%, #000 100%);
}

.hero__logo {
  display: block;
  margin: 0 auto var(--esp-24);
  width: 64px;
  height: 64px;
}
@media (min-width: 900px) {
  .hero__logo { width: 84px; height: 84px; }
}

.hero__conteudo .sobretitulo { margin-bottom: var(--esp-24); }

.hero__titulo { margin-bottom: var(--esp-16); }

.hero__subtitulo-forte {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  text-transform: var(--caixa-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: var(--entrelinha-titulo);
  font-size: var(--h2-celular);
  color: var(--cor-texto);
  margin-bottom: var(--esp-24);
}
@media (min-width: 900px) {
  .hero__subtitulo-forte { font-size: var(--h2-computador); }
}

.hero__subtitulo {
  font-size: clamp(var(--texto-celular), 2vw, var(--texto-computador));
  color: var(--cor-texto-2);
  margin-bottom: var(--esp-48);
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Espaço entre botões pensado pro botão elástico: a mola faz o botão passar de
     1,00 pra 1,18 (pico) antes de assentar em 1,14. Numa largura de ~200px isso
     é ~18px de cada lado. O mouse só está em um botão por vez: simulando a mola,
     o pior momento (mouse saindo de um botão e entrando no outro) soma ~18,5px
     entre os dois. 28px deixa ~9px de sobra nesse pior caso e com um botão sozinho
     no pico (18px). Na vertical (botões empilhados) o pico é ~4px por lado, mais
     8px do flutuar no pior caso; no toque o elástico só encolhe. 20px sobram. */
  column-gap: 28px;
  row-gap: 20px;
}

/* ===================== Método ===================== */
.pilares {
  display: grid;
  gap: var(--esp-24);
  margin-top: var(--esp-48);
}
@media (min-width: 760px) {
  .pilares { grid-template-columns: repeat(3, 1fr); }
}
/* Base (sem movimento, ou "reduzir movimento"): um card só, com as duas faces
   empilhadas — número + nome, e o texto explicativo logo abaixo, como sempre foi. */
.pilar {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-24);
  display: grid;
  gap: var(--esp-12);
}
.pilar .faces { display: grid; gap: var(--esp-12); }
.pilar .face { display: grid; gap: var(--esp-12); align-content: start; }
.pilar__numero {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 32px;
  color: var(--cor-marca);
}
.pilar p { color: var(--cor-texto-2); }

/* Card que vira (adaptado de 02-referencias/movimentos/card-que-vira.js): duas
   faces no mesmo espaço, o verso já girado 180°. A frente mostra número + nome;
   o verso, o texto explicativo. Vira ao passar o mouse (computador), ao tocar
   (celular; a classe .virado vem do JS) ou ao focar pelo teclado. As duas
   faces ocupam a mesma célula da grade, então o card tem a altura da maior. */
@media (prefers-reduced-motion: no-preference) {
  .pilar.fx-vira {
    perspective: 1000px;
    background: none;
    border: 0;
    padding: 0;
    min-height: 200px;
    cursor: default;
  }
  .pilar.fx-vira .faces {
    gap: 0;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pilar.fx-vira .face {
    grid-area: 1 / 1;
    align-content: center;
    padding: var(--esp-24);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .pilar.fx-vira .frente { background: var(--cor-superficie); }
  /* verso invertido (claro no tema escuro, escuro no tema claro), como no arquivo de referência */
  .pilar.fx-vira .verso {
    transform: rotateY(180deg);
    background: var(--cor-destaque);
    border-color: var(--cor-destaque);
  }
  .pilar.fx-vira .verso p { color: var(--cor-sobre-destaque); }
  .pilar.fx-vira.virado .faces,
  .pilar.fx-vira:focus-visible .faces { transform: rotateY(180deg); }
  .pilar.fx-vira:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 4px; }
}
/* só com mouse de verdade o hover vira; no celular, quem vira é o toque */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pilar.fx-vira:hover .faces { transform: rotateY(180deg); }
}

/* Inclinar em 3D no cartão de preço (adaptado de 02-referencias/movimentos/inclinar-3d.js):
   o JS só mede o mouse e escreve o transform; o CSS suaviza. */
.js-inclinar {
  transition: transform 0.18s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Flutuar nas etiquetas do Preço (adaptado de 02-referencias/movimentos/flutuar.js):
   amplitude bem pequena (4px, o arquivo usa 9px) e ciclo longo (5 s, o arquivo usa 4 s). */
/* usa a propriedade `translate` (e não `transform`) pra poder conviver com o botão
   elástico, que mexe no `transform` do mesmo botão: os dois efeitos se somam */
@keyframes flutuar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
.fx-flutua { animation: flutuar 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fx-flutua { animation: none; }
}

.metodo__rodape {
  margin-top: var(--esp-48);
  text-align: center;
  color: var(--cor-texto-2);
  max-width: 640px;
  margin-inline: auto;
}

/* ===================== Clientes: faixa de logos em loop ===================== */
/* Só CSS. A trilha tem 2 grupos idênticos lado a lado e anda metade da própria
   largura (-50%) antes de recomeçar: como o 2º grupo é igual ao 1º, o
   recomeço não aparece. O espaço entre logos é margin-right em cada item
   (não "gap"), pra o último item de cada grupo também ter o mesmo espaço e a
   metade da trilha fechar exata. Todas as logos ficam numa caixa do mesmo
   tamanho, com a imagem contida dentro dela (mesmo tamanho visual). */
.faixa {
  margin-top: var(--esp-48);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.faixa__trilha {
  display: flex;
  width: max-content;
  animation: faixa-rolar 32s linear infinite; /* computador: ~64px por segundo */
}
.faixa__grupo { display: flex; flex-shrink: 0; }
.faixa__grupo li {
  flex: 0 0 auto;
  width: 140px;
  height: 72px;
  margin-right: var(--esp-64);
}
.faixa__grupo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* a imagem cabe inteira dentro da caixa, sem distorcer */
}
@keyframes faixa-rolar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* celular: caixas menores e mais devagar (~32px por segundo) */
@media (max-width: 759px) {
  .faixa__trilha { animation-duration: 48s; }
  .faixa__grupo li { width: 108px; height: 56px; margin-right: var(--esp-48); }
}
/* Com JavaScript (efeitos-movimento.js) a faixa vira arrastável: o JS move a
   trilha (some a animação de CSS acima, que fica só de reserva pra quem está
   sem JS) e o gesto horizontal é da faixa, mas o vertical continua rolando a
   página (touch-action: pan-y). Ao arrastar não seleciona texto nem imagem. */
.faixa--js { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.faixa--js .faixa__trilha { animation: none; will-change: transform; }
.faixa--js img { -webkit-user-drag: none; pointer-events: none; }
/* reserva sem JS: o mouse em cima pausa a faixa */
@media (hover: hover) and (pointer: fine) {
  .faixa:not(.faixa--js):hover .faixa__trilha { animation-play-state: paused; }
}
/* quem desativa animações: fileira parada e centralizada, só com as 5 logos */
@media (prefers-reduced-motion: reduce) {
  .faixa { -webkit-mask-image: none; mask-image: none; }
  .faixa__trilha { animation: none; width: auto; justify-content: center; }
  .faixa__repetida { display: none; }
  .faixa__grupo { flex-wrap: wrap; justify-content: center; row-gap: var(--esp-24); padding-inline: var(--esp-24); }
}

/* ===================== Prova social: cartões que empilham ===================== */
/* Adaptado de 02-referencias/movimentos/cartoes-que-empilham.js. Cada .folha
   gruda no topo (position: sticky) e a seguinte sobe por cima. O JS só escurece
   e encolhe levemente as de baixo (ver efeitos-movimento.js). O JS iguala a
   altura mínima de todas pra que a de cima cubra a de baixo por completo. */
.js-pilha {
  margin-top: var(--esp-48);
}
.js-pilha .folha {
  position: sticky;
  top: var(--esp-96);
  margin-bottom: var(--esp-16);
  background: var(--cor-cartao);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.js-pilha .folha:last-child { margin-bottom: 0; }

/* quem desativa animações não empilha nada: os 4 depoimentos viram uma lista simples */
@media (prefers-reduced-motion: reduce) {
  .js-pilha {
    display: grid;
    gap: var(--esp-24);
  }
  .js-pilha .folha {
    position: static;
    min-height: 0;
    margin-bottom: 0;
    box-shadow: none;
    transform: none !important;
    filter: none !important;
  }
}

.depoimento {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-24);
  display: grid;
  gap: var(--esp-16);
  align-content: start;
}
.depoimento__estrelas { color: var(--cor-destaque); letter-spacing: 2px; font-size: 16px; }
.depoimento__texto { font-size: var(--texto-celular); }
.depoimento__rodape { display: flex; align-items: center; gap: var(--esp-12); }
.depoimento__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  display: grid;
  place-items: center;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14px;
  color: var(--cor-marca);
  flex-shrink: 0;
}
.depoimento__nome { font-weight: 600; font-size: var(--pequeno); }

.caso-real {
  margin-top: var(--esp-24);
  padding: var(--esp-24);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto-2);
  font-size: var(--texto-celular);
}
.caso-real strong { color: var(--cor-texto); }

/* ===================== Preço ===================== */
.preco {
  max-width: 560px;
  margin: var(--esp-48) auto 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-48) var(--esp-32);
  text-align: center;
}
.preco__valor {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(56px, 10vw, 88px);
  line-height: 1;
  color: var(--cor-destaque);
  margin-block: var(--esp-16);
}
.preco__valor small { font-size: 0.35em; vertical-align: super; }
.preco__lista {
  display: grid;
  gap: var(--esp-12);
  margin: var(--esp-24) 0;
  text-align: left;
}
.preco__item { display: flex; gap: var(--esp-12); align-items: start; color: var(--cor-texto-2); }
.preco__item svg { flex-shrink: 0; margin-top: 3px; color: var(--cor-destaque); }
.preco__etiquetas { display: flex; flex-wrap: wrap; gap: var(--esp-8); justify-content: center; margin-bottom: var(--esp-24); }
.preco .botao { width: 100%; }

/* ===================== FAQ ===================== */
.faq { margin-top: var(--esp-48); max-width: 760px; margin-inline: auto; display: grid; gap: var(--esp-12); }
.faq__item {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-superficie);
}
.faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-16);
  padding: var(--esp-16) var(--esp-24);
  text-align: left;
  font-weight: 600;
  font-size: var(--texto-celular);
}
.faq__icone { flex-shrink: 0; transition: transform 0.2s ease; color: var(--cor-texto-2); }
.faq__item[data-aberto="true"] .faq__icone { transform: rotate(45deg); }
.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.faq__item[data-aberto="true"] .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta-interna { overflow: hidden; }
.faq__resposta p { padding: 0 var(--esp-24) var(--esp-16); color: var(--cor-texto-2); }

/* ===================== CTA final ===================== */
.cta-final { text-align: center; }
.cta-final .container { max-width: 640px; }
.cta-final .botao { margin-top: var(--esp-24); }

/* ===================== WhatsApp flutuante ===================== */
.whatsapp-flutuante {
  position: fixed;
  right: var(--esp-16);
  bottom: var(--esp-16);
  z-index: 30;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  /* anel claro fino: quando o tema é claro o botão fica preto, e sem o anel ele sumiria em cima do rodapé preto */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s ease;
}
.whatsapp-flutuante:hover { transform: scale(1.06); }

/* ===================== Placeholder de mídia pendente ===================== */
.placeholder-midia {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  border: 1px dashed var(--cor-borda);
  background: var(--cor-superficie);
  display: grid;
  place-items: center;
  padding: var(--esp-16);
  text-align: center;
}
.placeholder-midia span {
  font-size: var(--pequeno);
  color: var(--cor-texto-2);
}

/* ===================== Rodapé ===================== */
.rodape {
  /* o rodapé é sempre preto (a logo é branca), independente da cor do fundo da página */
  background: #0B0B0C;
  --cor-texto: #F1F1EE;
  --cor-texto-2: #A8A8AC;
  --cor-borda: #2A2A2E;
  color: var(--cor-texto);
  border-top: 1px solid var(--cor-borda);
  padding-block: var(--esp-48);
}
/* Celular: as 3 colunas empilhadas e centralizadas, na ordem esquerda, centro,
   direita. Computador: 3 colunas na mesma altura (alinhadas pelo meio):
   nome do curso à esquerda, logo da JR Studio sozinha no centro exato,
   ícones + texto à direita. */
/* celular: espaço extra embaixo pro botão flutuante do WhatsApp (56px + 16px de
   margem) não cobrir o texto quando a página está no fim */
@media (max-width: 759px) {
  .rodape { padding-bottom: calc(var(--esp-48) + 72px); }
}
.rodape .container {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: var(--esp-32);
  text-align: center;
}
@media (min-width: 760px) {
  .rodape .container { grid-template-columns: 1fr auto 1fr; gap: var(--esp-24); }
  .rodape__nome { justify-self: start; }
  .rodape__contato { justify-self: end; }
}
.rodape__coluna { display: grid; justify-items: center; }

/* coluna esquerda: "MÉTODO" (maior) em cima e "STORIES NA PRÁTICA" embaixo, mesma
   fonte. O tamanho do MÉTODO é ajustado por script.js pra ter a mesma largura
   da linha de baixo; o valor abaixo é só o ponto de partida. */
.rodape__nome { gap: var(--esp-4); width: max-content; }
.rodape__metodo,
.rodape__marca {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  text-transform: var(--caixa-titulo);
  letter-spacing: var(--letras-titulo);
  line-height: 1;
  white-space: nowrap;
}
.rodape__marca { font-size: 16px; }
.rodape__metodo { font-size: 31px; }

/* logo vertical da JR Studio (Logos e suas variações/5.png, recortada nas
   bordas vazias): sozinha no centro */
.rodape__centro img { width: 88px; height: auto; }

/* coluna direita: ícones lado a lado e, logo abaixo, o texto centralizado */
.rodape__contato { gap: var(--esp-12); }
.rodape__texto { color: var(--cor-texto-2); font-size: var(--pequeno); }
.rodape__links { display: flex; gap: var(--esp-24); }
.rodape__links a { display: grid; place-items: center; color: var(--cor-texto-2); transition: color 0.15s ease; }
.rodape__links a:hover,
.rodape__links a:focus-visible { color: var(--cor-texto); }

/* ===================== Utilitários ===================== */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===================== Entrada com fade-in desfocado ===================== */
/* Cabeçalho e Topo: começam invisíveis e embaçados e terminam nítidos, sem
   mudar de lugar. O atraso de cada elemento vem de --atraso (no HTML). */
@keyframes entra-desfocado {
  from { opacity: 0; filter: blur(12px); }
  to { opacity: 1; filter: blur(0); }
}
.entra-desfocado {
  animation: entra-desfocado 0.8s ease-out var(--atraso, 0s) both;
}
@media (prefers-reduced-motion: reduce) {
  .entra-desfocado { animation: none; }
}

/* ===================== Cascata (ver efeitos-movimento.js) ===================== */
/* Adaptado de 02-referencias/movimentos/cascata.js. Cada elemento marcado com
   .cascata começa invisível e 20px mais baixo e, quando entra na tela, sobe e
   aparece; o atraso (--atraso-cascata) vem do JS, 90ms por item que entra junto.
   Usa a propriedade `translate` (não `transform`) pra não brigar com o flutuar,
   o elástico, a inclinação 3D e a rolagem dos depoimentos, que usam `transform`.
   Tudo isso só vale se o JS ligou a cascata (html.cascata-ativa) e o aparelho
   aceita movimento: sem JS, ou com "reduzir movimento", tudo aparece direto. */
@media (prefers-reduced-motion: no-preference) {
  html.cascata-ativa .cascata:not(.cascata--feito) {
    opacity: 0;
    translate: 0 20px;
  }
  html.cascata-ativa .cascata.cascata--entra:not(.cascata--feito) {
    animation: cascata-sobe 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--atraso-cascata, 0ms);
  }
}
@keyframes cascata-sobe {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}
/* fim da entrada: o JS troca a animação por este estado normal, sem deixar
   nenhum resto de translate/opacity no elemento */
.cascata--feito { opacity: 1; translate: none; animation: none; }

/* ===================== Movimento (ver efeitos-movimento.js) ===================== */
.js-elastico { will-change: transform; }

/* Área de clique estável do botão elástico (só com mouse): ao clicar, a mola
   encolhe o botão até ~83% e as bordas correm pra dentro; um mouse perto da
   borda ficaria "fora" do botão no meio do clique (o botão perderia o hover e o
   clique). O elemento invisível abaixo é filho do botão — conta como o próprio
   botão pra hover e clique — e ao encolher ainda cobre quase toda a área original.
   14px de folga nas laterais cabe dentro dos 48px entre botões vizinhos. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .botao.js-elastico { position: relative; }
  .botao.js-elastico::after {
    content: "";
    position: absolute;
    inset: -6px -14px;
  }
}
/* fica invisível até o JS envolver as palavras e assumir o controle da revelação */
.js-revelar-palavras { opacity: 0; }

.js-palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.js-palavra--visivel {
  opacity: 1;
  transform: translateY(0);
}

/* (sem transição: a cor já é atualizada a cada quadro, e uma transição faria a
   palavra passar por cinza quando o tema muda) */
.js-preencher-palavra { }

/* ===================== Dica de "toque pra virar" (cards do Método) ===================== */
/* Selinho circular com setinha de virar, no canto da frente. Só existe quando o
   card realmente vira (sem "reduzir movimento"). No celular fica maior e mais
   claro, porque lá não há hover pra dar a pista. */
.pilar__dica { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pilar.fx-vira .frente { position: relative; }
  .pilar.fx-vira .pilar__dica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--esp-12);
    right: var(--esp-12);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cor-destaque);
    color: var(--cor-sobre-destaque);
    background: var(--cor-destaque);
    pointer-events: none;
    transition: transform 0.4s ease, border-color 0.2s ease;
  }
  .pilar.fx-vira .pilar__dica svg { width: 18px; height: 18px; }
}
/* computador com mouse: mais discreto; gira um pouco ao passar o mouse */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pilar.fx-vira .pilar__dica { width: 28px; height: 28px; border-color: var(--cor-marca); color: var(--cor-marca); background: transparent; }
  .pilar.fx-vira .pilar__dica svg { width: 14px; height: 14px; }
  .pilar.fx-vira:hover .pilar__dica { transform: rotate(180deg); }
}

/* ===================== Depoimentos: cartão em duas colunas ===================== */
/* Computador/tablet: coluna lateral à esquerda (foto, estrelas e nome) e o texto
   na coluna maior ao lado. Celular: foto + estrelas/nome lado a lado em cima e o
   texto embaixo. A altura mínima é igualada pelo JS (ver efeitos-movimento.js) ao
   cartão mais alto, pra o de cima sempre cobrir o de baixo por inteiro. */
.js-pilha { margin-top: var(--esp-48); }
.js-pilha .folha { margin-bottom: var(--esp-16); }
.js-pilha .folha:last-child { margin-bottom: 0; }

.js-pilha .depoimento {
  --raio-cartao: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "foto quem" "texto texto";
  align-content: center;
  align-items: center;
  gap: var(--esp-12) var(--esp-16);
  padding: var(--esp-16);
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--raio-cartao);
  background:
    linear-gradient(var(--cor-cartao), var(--cor-cartao)) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.2)) border-box;
}
@media (min-width: 640px) {
  .js-pilha .depoimento {
    grid-template-columns: 170px 1fr;
    grid-template-areas: "foto texto" "quem texto";
    gap: var(--esp-8) var(--esp-32);
    padding: var(--esp-24) var(--esp-32);
    align-content: center;
  }
  .js-pilha .depoimento .depoimento__avatar { justify-self: center; align-self: end; }
  .js-pilha .depoimento .depoimento__rodape { align-items: center; align-self: start; text-align: center; }
}

.depoimento .depoimento__avatar {
  grid-area: foto;
  position: relative;
  width: 56px; height: 56px;
  overflow: hidden;
  border: 1.5px solid var(--cor-marca);
  background: var(--cor-superficie);
  box-shadow: 0 0 0 3px var(--cor-cartao), 0 0 18px rgba(255, 255, 255, 0.22);
}
@media (min-width: 640px) {
  .depoimento .depoimento__avatar { width: 72px; height: 72px; }
}
.depoimento__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
/* as fotos de Pedro e Perla já vêm recortadas em círculo com borda escura: aproxima pra cortar a borda */
.depoimento__avatar img[src*="pedro"],
.depoimento__avatar img[src*="perla"] { scale: 1.14; object-position: 50% 50%; }
.depoimento__avatar img[src*="cauan"] { object-position: 45% 18%; }
/* silhueta: o desenho (cabeça + ombros) tem o meio em y=13 e o viewBox foi
   deslocado pra "0 0.76 24 24" pra esse meio cair no centro do círculo */
.depoimento__avatar--sem-foto { color: var(--cor-texto-2); }
.depoimento__avatar--sem-foto svg { width: 76%; height: 76%; display: block; }

.depoimento .depoimento__rodape {
  grid-area: quem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
}
.depoimento__estrelas {
  color: var(--cor-destaque);
  font-size: 20px;
  letter-spacing: 4px;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
.depoimento__nome { font-size: 15px; letter-spacing: 0.02em; }
.depoimento .depoimento__texto { grid-area: texto; }

/* Celular e tablet em pé (abaixo de 900px): sem pilha. Lista simples, cada
   cartão com a altura do próprio texto, sem igualar com os outros. */
@media (max-width: 899px) {
  .js-pilha {
    display: grid;
    gap: var(--esp-16);
  }
  .js-pilha .folha {
    position: static;
    min-height: 0 !important;
    margin-bottom: 0;
    box-shadow: none;
    transform: none !important;
    filter: none !important;
    will-change: auto;
  }
}

/* link pequeno da política de garantia no rodapé */
.rodape__politica { text-decoration: underline; text-underline-offset: 3px; font-size: 13px; transition: color 0.15s ease; }
.rodape__politica:hover,
.rodape__politica:focus-visible { color: var(--cor-texto); }