/* ============================================================
   FIT EXPRESS 15 — FOLHA DE ESTILOS
   Arquivo: style.css
   Organização:
     1. Variáveis de design (cores, fontes, medidas)
     2. Reset e base
     3. Utilitários (container, botões, rótulos)
     4. Cabeçalho e barra de progresso
     5. Hero em tela cheia (vídeo de fundo) e letreiro rolante
     6. Seções genéricas
     7. Dores / Linha do tempo / Bento grid / Episódios / Bônus
     8. Depoimentos / Quiz / Oferta / FAQ
     9. Rodapé, barra fixa do celular e voltar ao topo
    10. Animações e responsividade
   ============================================================ */

/* ========== 1. VARIÁVEIS DE DESIGN ==========
   EDITAR: mude as cores aqui e o site inteiro se atualiza.
   Dica: para o rosa da referência, troque --cor-destaque por #FF2E7E,
   --cor-destaque-hover por #FF5C9C e ajuste as sombras esverdeadas. */
:root {
  --cor-fundo:        #0E100F;  /* grafite quase preto (fundo principal) */
  --cor-fundo-alt:    #141715;  /* grafite um pouco mais claro (seções alternadas) */
  --cor-cartao:       #1B1F1C;  /* fundo dos cards */
  --cor-borda:        #2A2F2B;  /* bordas discretas */
  --cor-texto:        #F4F7F4;  /* branco suave (títulos e textos principais) */
  --cor-texto-suave:  #AEB6AF;  /* cinza (textos secundários) */
  --cor-destaque:     #C6F53F;  /* verde-limão (destaques e botões) */
  --cor-destaque-hover:#D6FF55; /* verde-limão mais claro no hover */
  --cor-texto-botao:  #10130D;  /* texto escuro sobre o botão verde */
  --cor-alerta:       #FF7A6B;  /* usado nos "x" das dores e avisos do quiz */

  --fonte-titulo:    'Archivo', 'Segoe UI', Arial, sans-serif;
  --fonte-texto:     'Inter', 'Segoe UI', Arial, sans-serif;
  --fonte-condensada:'Anton', 'Arial Narrow', sans-serif; /* título gigante do hero e números */
  --fonte-manuscrita:'Caveat', cursive;                   /* linhas de "mão" do hero */

  --raio-medio: 14px;   /* bordas arredondadas dos cards */
  --raio-grande: 22px;  /* destaques maiores (oferta, resultado do quiz) */
  --sombra-suave: 0 18px 40px rgba(0, 0, 0, 0.35);
  --sombra-destaque: 0 10px 30px rgba(198, 245, 63, 0.22);
}

/* ========== 2. RESET E BASE ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* rolagem suave nos links âncora */
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
  max-width: 100%;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
}

fieldset {
  border: none; /* remove a borda padrão dos fieldsets do quiz */
}

/* Foco visível para navegação por teclado (acessibilidade) */
:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Link "pular para o conteúdo": escondido até receber foco via teclado */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cor-destaque);
  color: var(--cor-texto-botao);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 100;
}
.pular-para-conteudo:focus {
  left: 0;
}

/* Texto visível apenas para leitores de tela (usado no título do hero) */
.so-leitura {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ========== 3. UTILITÁRIOS ========== */
.container {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

/* Versão estreita (usada no quiz e no FAQ) */
.container--estreito {
  width: min(820px, 100% - 2.5rem);
}

/* Botão principal (verde-limão) */
.botao {
  display: inline-block;
  background-color: var(--cor-destaque);
  color: var(--cor-texto-botao);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.75rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--sombra-destaque);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.botao:hover {
  background-color: var(--cor-destaque-hover);
  transform: translateY(-2px);
}

/* Variações de tamanho */
.botao--pequeno { padding: 0.55rem 1.2rem; font-size: 0.9rem; }
.botao--grande  { padding: 1.05rem 2.4rem; font-size: 1.1rem; }
.botao--cheio   { width: 100%; }

/* Botão secundário com contorno (usado no hero, sobre o vídeo) */
.botao--contorno {
  display: inline-block;
  padding: 1rem 2.2rem;
  border: 1px solid rgba(244, 247, 244, 0.45);
  border-radius: 999px;
  background-color: rgba(14, 16, 15, 0.35);
  backdrop-filter: blur(6px);
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.botao--contorno:hover {
  border-color: var(--cor-destaque);
  color: var(--cor-destaque);
  transform: translateY(-2px);
}

/* Rótulo pequeno acima dos títulos de seção */
.rotulo {
  color: var(--cor-destaque);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.75rem;
}

/* Texto em verde-limão dentro de títulos e logo */
.destaque-lima,
.texto-destaque {
  color: var(--cor-destaque);
}

/* ========== 4. CABEÇALHO E BARRA DE PROGRESSO ==========
   O cabeçalho é fixo e começa transparente sobre o vídeo do hero.
   A classe "cabecalho--solido" (adicionada pelo script.js ao rolar)
   aplica o fundo escuro com desfoque. */
.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.cabecalho--solido {
  background-color: rgba(14, 16, 15, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--cor-borda);
}
.cabecalho__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.cabecalho__logo {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.25rem;
  text-decoration: none;
}
.cabecalho__nav {
  display: none; /* aparece só no desktop (ver responsividade no final) */
  gap: 1.75rem;
}
.cabecalho__link {
  position: relative;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.cabecalho__link:hover {
  color: var(--cor-texto);
}
/* Sublinhado animado do link ativo (scrollspy — classe adicionada pelo script.js) */
.cabecalho__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--cor-destaque);
  transition: width 0.25s ease;
}
.cabecalho__link.ativo {
  color: var(--cor-texto);
}
.cabecalho__link.ativo::after {
  width: 100%;
}

/* Barra de progresso de leitura (largura controlada pelo script.js) */
.barra-progresso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70; /* acima do cabeçalho */
  height: 3px;
  width: 0;
  background-color: var(--cor-destaque);
  transition: width 0.1s linear;
}

/* ========== 5. HERO EM TELA CHEIA E LETREIRO ========== */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback para navegadores antigos */
  min-height: 100svh;  /* altura real da tela no celular (desconta a barra do navegador) */
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem; /* espaço superior para não ficar sob o cabeçalho fixo */
  overflow: hidden;
  background-color: var(--cor-fundo); /* fallback enquanto o vídeo carrega */
}

/* Vídeo de fundo: cobre a seção inteira, atrás de tudo */
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Camada escura sobre o vídeo (garante contraste do texto).
   EDITAR: aumente os valores de opacidade se o texto ficar difícil de ler. */
.hero__sobreposicao {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(14, 16, 15, 0.95) 0%, rgba(14, 16, 15, 0.40) 45%, rgba(14, 16, 15, 0.35) 100%),
    linear-gradient(to right, rgba(14, 16, 15, 0.65) 0%, transparent 65%);
}

/* Conteúdo do hero acima do vídeo e da sobreposição */
.hero__conteudo {
  position: relative;
  z-index: 2;
  max-width: 44rem;
}

/* Selo estilo "lançamento": quadradinho colorido + texto espaçado */
.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cor-texto);
  margin-bottom: 1.25rem;
}
.hero__selo-marca {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: var(--cor-destaque);
}

/* Título em 3 linhas com fontes diferentes */
.hero__titulo {
  margin-bottom: 1.5rem;
}
.hero__linha-script {
  display: block;
  font-family: var(--fonte-manuscrita);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.hero__linha-forte {
  display: block;
  font-family: var(--fonte-condensada);
  font-weight: 400; /* a Anton só tem um peso, naturalmente pesado */
  font-size: clamp(3rem, 10vw, 6.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0.3rem 0 0.4rem;
}

/* Palavra rotativa: a classe "trocando" (adicionada pelo script.js)
   faz a palavra sair suavemente antes da nova entrar */
.js-palavra-rotativa {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.js-palavra-rotativa.trocando {
  opacity: 0;
  transform: translateY(8px);
}

/* Linha de informações rápidas separadas por bolinhas */
.hero__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-bottom: 1.9rem;
  color: var(--cor-texto-suave);
  font-weight: 600;
  font-size: 0.92rem;
}
.hero__meta li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero__meta li + li::before {
  content: "•";
  color: var(--cor-destaque);
}

/* Botões do hero lado a lado (quebram linha no celular) */
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.hero__observacao {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin-top: 0.9rem;
}

/* --- Letreiro rolante (marquee) ---
   A trilha tem o dobro da largura (2 listas iguais) e desliza -50%:
   quando a primeira lista sai, a segunda ocupa o lugar — loop perfeito. */
.letreiro {
  overflow: hidden;
  border-block: 1px solid var(--cor-borda);
  padding-block: 1.35rem;
  background-color: var(--cor-fundo);
}
.letreiro__trilha {
  display: flex;
  width: max-content;
  animation: deslizar 26s linear infinite;
}
/* Pausa o movimento quando o mouse está em cima (desktop) */
.letreiro:hover .letreiro__trilha {
  animation-play-state: paused;
}
.letreiro__lista {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem; /* espaçamento entre o fim de uma lista e o início da cópia */
  list-style: none;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* Losango verde separando cada item (gira um quadradinho 45°) */
.letreiro__lista li::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 1.5rem;
  background-color: var(--cor-destaque);
  transform: rotate(45deg);
}
@keyframes deslizar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ========== 6. SEÇÕES GENÉRICAS ========== */
.secao {
  padding-block: 4.5rem;
  scroll-margin-top: 5rem; /* evita que o cabeçalho cubra o título ao rolar */
}
.secao--alternada {
  background-color: var(--cor-fundo-alt);
}
.secao__cabecalho {
  max-width: 46rem;
  margin-bottom: 2.75rem;
}
.secao__titulo {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.secao__descricao {
  color: var(--cor-texto-suave);
}

/* ========== 7. DORES / LINHA DO TEMPO / BENTO / EPISÓDIOS / BÔNUS ========== */

/* Efeito "spotlight": brilho que segue o mouse sobre os cards.
   As variáveis --mouse-x e --mouse-y são atualizadas pelo script.js
   (função inicializarSpotlight). */
.cartao,
.cartao-dor,
.episodio {
  position: relative;
  overflow: hidden;
}
.cartao::after,
.cartao-dor::after,
.episodio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    240px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(198, 245, 63, 0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* não atrapalha cliques nem seleção de texto */
}
.cartao:hover::after,
.cartao-dor:hover::after,
.episodio:hover::after {
  opacity: 1;
}

/* --- Dores --- */
.grade-dores {
  display: grid;
  gap: 1.25rem;
}
.cartao-dor {
  background-color: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 1.5rem;
  box-shadow: var(--sombra-suave);
}
.cartao-dor h3 {
  font-size: 1.1rem;
  margin: 0.75rem 0 0.5rem;
}
.cartao-dor p {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}
.icone-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(255, 122, 107, 0.12);
  color: var(--cor-alerta);
  font-weight: 800;
}

/* --- Linha do tempo ("um dia na vida") ---
   A linha cinza é fixa (::before); a linha verde (::after) cresce com a rolagem
   — a altura vem da variável --progresso, atualizada pelo script.js. */
.linha-do-tempo {
  position: relative;
  list-style: none;
  max-width: 640px;
  margin-inline: auto;
  padding-left: 2.75rem;
}
.linha-do-tempo::before,
.linha-do-tempo::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
}
.linha-do-tempo::before {
  background-color: var(--cor-borda); /* trilho cinza */
}
.linha-do-tempo::after {
  background-color: var(--cor-destaque); /* progresso verde */
  height: var(--progresso, 0);
  bottom: auto;
}

/* Cada momento: apagado por padrão, acende quando a linha chega nele
   (classe "ativo" adicionada pelo script.js) */
.momento {
  position: relative;
  padding: 0 0 2.25rem 0.75rem;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.momento.ativo {
  opacity: 1;
}
/* Bolinha sobre a linha */
.momento::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--cor-borda);
  border: 2px solid var(--cor-fundo);
  transition: background-color 0.4s ease;
}
.momento.ativo::before {
  background-color: var(--cor-destaque);
}
.momento__hora {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--cor-texto-suave);
  margin-bottom: 0.2rem;
}
.momento p {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

/* Momento em destaque (o treino do dia) */
.momento--destaque::before {
  width: 18px;
  height: 18px;
  left: -2.69rem;
  background-color: var(--cor-destaque);
  box-shadow: 0 0 20px rgba(198, 245, 63, 0.5);
}
.momento--destaque .momento__hora {
  color: var(--cor-destaque);
}
.momento__cartao {
  background-color: var(--cor-cartao);
  border: 2px solid var(--cor-destaque);
  border-radius: var(--raio-medio);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sombra-suave), 0 0 40px rgba(198, 245, 63, 0.10);
}
.momento__cartao h3 {
  font-size: 1.25rem;
  margin: 0.6rem 0 0.45rem;
}
.momento__etiqueta {
  display: inline-block;
  background-color: var(--cor-destaque);
  color: var(--cor-texto-botao);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* Nota de fechamento abaixo da linha do tempo */
.linha-do-tempo__nota {
  max-width: 40rem;
  margin: 0.5rem auto 0;
  text-align: center;
  color: var(--cor-texto-suave);
}

/* --- Bento grid de benefícios --- */
.grade-bento {
  display: grid;
  gap: 1.25rem;
}
.cartao {
  background-color: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 1.75rem;
  box-shadow: var(--sombra-suave);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.cartao:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 245, 63, 0.35);
}
/* Palavra-chave no topo de cada card (substitui os antigos emojis) */
.cartao__kicker {
  display: block;
  color: var(--cor-destaque);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.6rem;
}
.cartao__titulo {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.cartao p {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

/* Card grande: texto em cima, timer embaixo */
.cartao--grande {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
}
.cartao--grande .cartao__titulo {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

/* Timer desenhado em CSS: o anel verde marca 25% do círculo,
   ou seja, 15 minutos de uma hora. */
.cartao__timer {
  position: relative;
  align-self: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--cor-destaque) 0 25%, var(--cor-borda) 25% 100%);
}
.cartao__timer::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background-color: var(--cor-cartao);
}
.cartao__timer span {
  position: relative;
  font-family: var(--fonte-condensada);
  font-size: 3rem;
  line-height: 1;
  color: var(--cor-texto);
  text-align: center;
}
.cartao__timer small {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  color: var(--cor-destaque);
}

/* --- Episódios (módulos estilo streaming) --- */
.lista-episodios {
  display: grid;
  gap: 1rem;
}
.episodio {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background-color: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--sombra-suave);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.episodio:hover {
  border-color: rgba(198, 245, 63, 0.35);
  transform: translateY(-3px);
}
/* Número grande do episódio */
.episodio__numero {
  flex-shrink: 0;
  font-family: var(--fonte-condensada);
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1;
  color: var(--cor-texto-suave);
  opacity: 0.55;
}
/* Thumbnail placeholder (gradiente + play). Troque por <img> real. */

.nivel1 {
  background-image: url(imagens/1.webp);
  background-size: cover;
}

.nivel2 {
  background-image: url(imagens/2.webp);
  background-size: cover;

}

.nivel3 {
  background-image: url(imagens/3.webp);
  background-size: cover;
}

.nivel4 {
  background-image: url(imagens/4.webp);
  background-size: cover;
}

.episodio__thumb {
  position: relative;
  flex-shrink: 0;
  width: clamp(110px, 20vw, 190px);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  display: grid;
  place-items: center;
  /* background:
    radial-gradient(80% 100% at 50% 0%, rgba(198, 245, 63, 0.14), transparent 70%),
    linear-gradient(135deg, #232823, #12140F); */
  border: 1px solid var(--cor-borda);
  transition: border-color 0.25s ease;
}
.episodio:hover .episodio__thumb {
  border-color: var(--cor-destaque);
}
.episodio__thumb-play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(14, 16, 15, 0.7);
  border: 1px solid rgba(244, 247, 244, 0.35);
  color: var(--cor-destaque);
  font-size: 0.8rem;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.episodio:hover .episodio__thumb-play {
  transform: scale(1.12);
  background-color: var(--cor-destaque);
  color: var(--cor-texto-botao);
}
.episodio__info {
  min-width: 0; /* permite o texto encolher sem estourar o flex */
}
.episodio__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.episodio__topo h3 {
  font-size: 1.1rem;
}
.episodio__duracao {
  flex-shrink: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-weight: 600;
}
.episodio__info > p {
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
  margin-top: 0.35rem;
}
.episodio__meta {
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Etiqueta dos cards de bônus */
.cartao-bonus {
  position: relative;
}
.bonus__etiqueta {
  display: inline-block;
  background-color: rgba(198, 245, 63, 0.12);
  color: var(--cor-destaque);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 0.9rem;
}

/* Grade simples usada nos bônus */
.grade-cartoes {
  display: grid;
  gap: 1.25rem;
}

/* ========== 8. DEPOIMENTOS / QUIZ / OFERTA / FAQ ========== */

/* --- Depoimentos --- */
.grade-depoimentos {
  display: grid;
  gap: 1.25rem;
}
.cartao-depoimento {
  background-color: var(--cor-cartao);
  border: 1px dashed var(--cor-borda); /* tracejado reforça que é placeholder */
  border-radius: var(--raio-medio);
  padding: 1.75rem;
  box-shadow: var(--sombra-suave);
}
.etiqueta-placeholder {
  display: inline-block;
  background-color: rgba(174, 182, 175, 0.15);
  color: var(--cor-texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 1rem;
}
.depoimento__estrelas {
  color: var(--cor-destaque);
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.depoimento__texto {
  font-style: italic;
  margin-bottom: 1rem;
}
.depoimento__autor {
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  font-weight: 600;
}
.aviso-placeholder {
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  margin-top: 1.5rem;
  text-align: center;
}

/* --- Quiz interativo --- */
.quiz__pergunta {
  margin-bottom: 1.75rem;
}
.quiz__titulo-pergunta {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
.quiz__opcoes {
  display: grid;
  gap: 0.75rem;
}

/* Cada opção é um <label> clicável com o radio escondido dentro.
   O radio continua acessível (teclado/leitores de tela), só não aparece. */
.quiz__opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.quiz__opcao:hover {
  border-color: rgba(198, 245, 63, 0.35);
}
.quiz__opcao input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
/* Bolinha customizada do radio */
.quiz__marca {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cor-texto-suave);
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* Estado selecionado (":has" estiliza o label quando o radio está marcado) */
.quiz__opcao:has(input:checked) {
  border-color: var(--cor-destaque);
  background-color: rgba(198, 245, 63, 0.08);
}
.quiz__opcao:has(input:checked) .quiz__marca {
  border-color: var(--cor-destaque);
  background: radial-gradient(circle, var(--cor-destaque) 45%, transparent 50%);
}
/* Foco de teclado visível na opção */
.quiz__opcao:has(input:focus-visible) {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 3px;
}

/* Mensagem de erro (preenchida pelo script.js se faltar resposta) */
.quiz__aviso {
  min-height: 1.5rem; /* reserva o espaço para a página não "pular" */
  color: var(--cor-alerta);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Caixa de resultado: começa escondida e aparece com animação */
.quiz__resultado {
  display: none;
  margin-top: 2rem;
  background-color: var(--cor-cartao);
  border: 2px solid var(--cor-destaque);
  border-radius: var(--raio-grande);
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: var(--sombra-suave), 0 0 60px rgba(198, 245, 63, 0.10);
}
.quiz__resultado.visivel {
  display: block;
  animation: surgir 0.5s ease both;
}
.quiz__resultado p {
  color: var(--cor-texto-suave);
  margin-bottom: 1rem;
}
.quiz__resultado .botao {
  margin-top: 0.5rem;
}
.quiz__perfil {
  font-size: 1.6rem;
  color: var(--cor-destaque);
  margin-bottom: 0.75rem;
}

/* Animação de entrada do resultado do quiz */
@keyframes surgir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Oferta --- */
.cartao-oferta {
  max-width: 720px;
  margin-inline: auto;
  background-color: var(--cor-cartao);
  border: 2px solid var(--cor-destaque);
  border-radius: var(--raio-grande);
  padding: 2.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--sombra-suave), 0 0 70px rgba(198, 245, 63, 0.12);
}
.oferta__lista {
  list-style: none;
  display: inline-grid;
  gap: 0.55rem;
  text-align: left;
  margin-bottom: 2rem;
}
.oferta__lista li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.oferta__lista li::before {
  content: "✓";
  color: var(--cor-destaque);
  font-weight: 900;
}
.oferta__preco-caixa {
  margin-bottom: 1.75rem;
}
.oferta__preco-rotulo {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}
.oferta__preco {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 4rem);
  color: var(--cor-destaque);
  line-height: 1.1;
}
.oferta__observacao,
.oferta__seguranca {
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  margin-top: 0.9rem;
}

/* Bloco opcional de garantia (descomentado no HTML, se aplicável) */
.oferta__garantia {
  margin-top: 1.75rem;
  border-top: 1px solid var(--cor-borda);
  padding-top: 1.5rem;
}

/* --- FAQ --- */
.faq {
  display: grid;
  gap: 0.9rem;
}
.faq__item {
  background-color: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  overflow: hidden;
}
.faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
}
.faq__icone {
  flex-shrink: 0;
  color: var(--cor-destaque);
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform 0.25s ease;
}
/* Quando o item está aberto, o "+" gira virando "x" */
.faq__item.aberto .faq__icone {
  transform: rotate(45deg);
}
.faq__resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq__resposta-interna {
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  padding: 0 1.35rem 1.25rem;
}

/* ========== 9. RODAPÉ, BARRA FIXA E VOLTAR AO TOPO ========== */
.rodape {
  border-top: 1px solid var(--cor-borda);
  padding-block: 3rem 2rem;
  background-color: var(--cor-fundo-alt);
}
.rodape__grade {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.rodape__logo {
  margin-bottom: 0.75rem;
}
.rodape__descricao,
.rodape__aviso {
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  max-width: 26rem;
}
.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.rodape__lista {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.rodape__lista a {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.rodape__lista a:hover {
  color: var(--cor-destaque);
}
.rodape__base {
  border-top: 1px solid var(--cor-borda);
  padding-top: 1.5rem;
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  text-align: center;
}

/* Botão "voltar ao topo": escondido até a classe "visivel" ser
   adicionada pelo script.js (após rolar 600px) */
.voltar-topo {
  position: fixed;
  right: 1rem;
  bottom: 6.5rem; /* fica acima da barra fixa do celular */
  z-index: 65;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--cor-cartao);
  color: var(--cor-destaque);
  border: 1px solid var(--cor-borda);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.voltar-topo.visivel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.voltar-topo:hover {
  border-color: var(--cor-destaque);
}

/* Barra fixa inferior — visível apenas no celular */
.barra-fixa-celular {
  /* position: fixed; */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.75rem 1rem;
  background-color: rgba(14, 16, 15, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--cor-borda);
  transition: transform 0.3s ease;
}
/* Estado oculto (quando a oferta está na tela) — controlado pelo script.js */
.barra-fixa-celular--oculta {
  transform: translateY(110%);
}

/* ========== 10. ANIMAÇÕES E RESPONSIVIDADE ========== */

/* Animação discreta ao rolar: os elementos com classe "animar"
   começam invisíveis e sobem suavemente quando entram na tela.
   A classe "visivel" é adicionada pelo script.js. */
.animar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animar.visivel {
  opacity: 1;
  transform: translateY(0);
}

/* Respeita usuários que preferem menos movimento (acessibilidade).
   O script.js também pausa o vídeo de fundo nesse caso. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .letreiro__trilha {
    animation: none; /* letreiro parado */
  }
  .momento {
    opacity: 1;
    transition: none;
  }
  .botao,
  .botao--contorno,
  .cartao,
  .episodio,
  .faq__icone,
  .faq__resposta,
  .js-palavra-rotativa,
  .quiz__resultado.visivel {
    transition: none;
    animation: none;
  }
}

/* Ajuste para Celular abaixo de 500px*/

@media (max-width: 500px) {
  .episodio {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .episodio__thumb {
    width: 80%;
  }
  body {
    text-align: center;
  }
  .animar.visivel {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .episodio__topo {
    display: block;
  }
  .hero__selo-marca {
    display: none;
  }
} 

/* --- Tablet e acima (≥ 640px) --- */
@media (min-width: 640px) {
  .grade-dores,
  .grade-cartoes,
  .grade-depoimentos {
    grid-template-columns: repeat(2, 1fr);
  }
  .grade-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .cartao--grande {
    grid-column: span 2; /* card grande ocupa a linha inteira */
  }
  .rodape__grade {
    grid-template-columns: 1.2fr 0.8fr 1fr;
  }
}

/* --- Desktop (≥ 900px) --- */
@media (min-width: 900px) {
  .cabecalho__nav {
    display: flex;
  }
  /* Bento definitivo: 3 colunas com o card grande ocupando 2x2.
     Distribuição:  [GRANDE GRANDE | Lugar]
                    [GRANDE GRANDE | Progressão]
                    [Hábito | Acesso | Intensidade]  */
  .grade-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(170px, auto);
  }
  .cartao--grande {
    grid-column: span 2;
    grid-row: span 2;
  }
  .grade-cartoes {
    grid-template-columns: repeat(3, 1fr);
  }
  .grade-depoimentos {
    grid-template-columns: repeat(3, 1fr);
  }
  .grade-dores {
    grid-template-columns: repeat(4, 1fr);
  }
  /* No desktop o botão voltar ao topo desce até o canto */
  .voltar-topo {
    bottom: 1.5rem;
    right: 1.5rem;
  }
  /* Esconde a barra fixa no desktop */
  .barra-fixa-celular {
    display: none;
  }
}

/* Espaço extra no fim da página no celular,
   para a barra fixa não cobrir o rodapé */
@media (max-width: 899px) {
  body {
    padding-bottom: 84px;
  }
}