/* ============================================================================
   CLUBE DE NEGÓCIOS JURÍDICOS RENATO SARAIVA
   Folha de estilo principal

   COMO ESTE ARQUIVO ESTÁ ORGANIZADO
   01. Tokens (cores, tipografia, espaçamentos)  — mexa aqui para ajustar a marca
   02. Reset e base
   03. Tipografia e utilitários reaproveitados em vários blocos
   04. Botões
   05. Cabeçalho fixo
   06. Bloco 1  — Hero
   07. Marquee
   08. Bloco 2  — O espelho
   09. Bloco 3  — A virada (anel / elemento-assinatura)
   10. Bloco 4  — Diagnóstico
   11. Bloco 5  — Quem está por trás
   12. Bloco 6  — O acesso (carrossel)
   13. Bloco 7  — O que é o Clube
   14. Bloco 8  — Como fazer (passos)
   15. Bloco 9  — Filtro
   16. Bloco 10 — Depoimentos
   17. Bloco 11 — FAQ
   18. Bloco 12 — CTA final
   19. Bloco 13 — Rodapé
   20. Botão de WhatsApp
   21. Modal do formulário
   22. Banner de cookies
   23. Breakpoints (768 / 1024 / 1440)
   24. Acessibilidade: movimento reduzido

   O CSS é MOBILE FIRST: as regras base valem para celular e vão sendo
   ampliadas dentro dos @media (min-width) no final do arquivo.
   ============================================================================ */


/* ============================================================================
   01. TOKENS
   ============================================================================ */
:root {
  /* --- Cores da marca --- */
  --preto:          #07070A;   /* preto profundo: fundo principal */
  --grafite:        #101015;   /* superfície elevada nível 1 */
  --grafite-2:      #191920;   /* superfície elevada nível 2 */
  --linha:          #2A2A33;   /* traço/hairline padrão */
  --marinho:        #0C1A30;   /* azul marinho escuro (painel do Bloco 4) */
  --petroleo:       #0A1A1E;   /* petróleo escuro (superfície alternativa) */

  --dourado:        #FFB95C;   /* dourado oficial da marca — não alterar */
  --dourado-fundo:  #B8802F;   /* dourado profundo, usado só em degradês vetoriais */

  --osso:           #ECE8E1;   /* texto principal sobre fundo escuro */
  --cinza:          #94949F;   /* texto secundário */
  --cinza-fraco:    #6B6B78;   /* texto terciário / legendas */

  /* --- Tipografia --- */
  --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte-corpo:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Ritmo vertical das seções --- */
  --espaco-secao: clamp(4.5rem, 11vw, 9rem);

  /* --- Larguras --- */
  --largura-container: 1180px;
  --largura-estreita: 780px;

  /* --- Degradê dourado vetorial (chapado, sem brilho ambiente) --- */
  --degrade-ouro: linear-gradient(135deg, var(--dourado-fundo) 0%, var(--dourado) 45%, #FFD9A0 60%, var(--dourado) 78%, var(--dourado-fundo) 100%);
}


/* ============================================================================
   02. RESET E BASE
   ============================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--preto);
  color: var(--osso);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* trava rolagem horizontal causada pelo marquee */
}

/* Trava a rolagem do fundo enquanto o modal está aberto */
body.travado { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

/* Foco visível em todos os elementos interativos (acessibilidade por teclado) */
:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================================
   03. TIPOGRAFIA E UTILITÁRIOS
   ============================================================================ */

/* Caixa central que limita a largura do conteúdo */
.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: 1.375rem;
}
.container--estreito { max-width: var(--largura-estreita); }

/* Espaçamento vertical padrão de todas as seções */
.secao {
  position: relative;
  padding-block: var(--espaco-secao);
  /* Impede que o cabeçalho fixo cubra o topo da seção ao usar links âncora */
  scroll-margin-top: 5rem;
}

/* --------------------------------------------------------------------------
   SOBRETÍTULO (eyebrow)
   O pequeno arco dourado antes do rótulo repete a geometria do monograma
   da logo (as circunferências concêntricas do "CNJ").
   -------------------------------------------------------------------------- */
.sobretitulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: 1.5rem;
}
.sobretitulo::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--dourado);
  border-radius: 50%;
  /* Deixa só dois quadrantes visíveis = arco, não círculo fechado */
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}

/* Título de seção — voz editorial (serifada) */
.titulo-secao {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 5.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 400;
  max-width: 22ch;
  margin-bottom: 2rem;
  text-wrap: balance;
}
.titulo-secao--centro {
  margin-inline: auto;
  text-align: center;
  max-width: 20ch;
}

.subtitulo-secao {
  font-size: 1.0625rem;
  color: var(--cinza);
  margin-bottom: 2.5rem;
}

/* Parágrafo padrão */
.texto-corrido {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--cinza);
  max-width: 62ch;
}
.texto-corrido--largo { max-width: 70ch; }
.texto-corrido--centro { margin-inline: auto; text-align: center; max-width: 58ch; }

/* Frase de fechamento de bloco — mais peso que um parágrafo comum */
.fechamento {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  line-height: 1.45;
  color: var(--osso);
  max-width: 34ch;
  margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   LEITMOTIV "MESA"
   Elemento-assinatura tipográfico da página: toda vez que a palavra "mesa"
   aparece na copy ela recebe este tratamento. É o fio condutor do argumento,
   do Hero até o Bloco 7.
   -------------------------------------------------------------------------- */
.mesa {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 400;
  color: var(--dourado);
}

/* --------------------------------------------------------------------------
   REVELAÇÃO NO SCROLL
   A classe .visivel é adicionada pelo Intersection Observer em js/main.js
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.revelar.visivel {
  opacity: 1;
  transform: none;
}


/* ============================================================================
   04. BOTÕES
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 1.125rem 1.75rem;
  border-radius: 2px;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, background-color .2s ease, color .2s ease;
}

/* Botão principal: dourado chapado com degradê vetorial */
.btn--ouro {
  background: var(--degrade-ouro);
  color: #1A1206;
}
.btn--ouro:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn--ouro:active { transform: translateY(0); }

.btn--grande {
  width: 100%;
  padding: 1.25rem 2rem;
  font-size: .875rem;
}
.btn--pequeno {
  padding: .75rem 1.125rem;
  font-size: .6875rem;
  letter-spacing: .08em;
}


/* ============================================================================
   05. CABEÇALHO FIXO
   Só aparece depois que o usuário passa do Hero (classe adicionada no JS)
   ============================================================================ */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  background: rgba(7, 7, 10, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.cabecalho--visivel { transform: none; }

.cabecalho__interno {
  max-width: var(--largura-container);
  margin-inline: auto;
  padding: .75rem 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cabecalho__logo img { width: 132px; height: auto; }
/* O botão do cabeçalho não pode quebrar em duas linhas no celular */
.cabecalho .btn { white-space: nowrap; font-size: .625rem; padding-inline: 1rem; }
/* O botão do cabeçalho não pode quebrar em duas linhas no celular */
.cabecalho .btn { white-space: nowrap; font-size: .625rem; padding-inline: 1rem; }


/* ============================================================================
   06. BLOCO 1 — HERO
   O fundo troca entre a versão mobile (cidade na vertical) e a versão desktop
   (com o Renato à direita) por media query, no bloco 23 deste arquivo.
   ============================================================================ */
.hero {
  position: relative;
  display: flex;
  /* Conteúdo centralizado na vertical: deixa a cidade aparecer em cima e
     mantém o CTA longe do banner de cookies embaixo. */
  align-items: center;
  min-height: 100svh;
  /* Padding curto no celular para o CTA caber na primeira tela mesmo com o
     banner de cookies aberto na parte de baixo. */
  padding-block: 17px 1.0rem;
  /* Enquanto o banner de cookies estiver aberto, o Hero reserva a altura dele
     embaixo para o CTA nunca ficar escondido atrás do banner. */
  padding-bottom: calc(2.5rem + var(--altura-cookies, 0px));
  background-color: var(--preto);
  background-image: url("../assets/imagens/hero-bg-mobile.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Véu escuro para garantir leitura do texto sobre a imagem */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(7,7,10,.72) 0%,
              rgba(7,7,10,.40) 30%,
              rgba(7,7,10,.86) 72%,
              var(--preto) 100%);
  pointer-events: none;
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: 1.375rem;
}

/* Logo dentro do hero — sempre visível, antes do scroll */
.hero__logo { display: flex; margin-bottom: 1.5rem; }
.hero__logo img { width: 200px; height: auto; }

@media (max-width: 767px) {
  .hero__logo { justify-content: center; margin-bottom: 1.25rem; }
  .hero__logo img { width: 110px; }

  /* Centraliza todos os textos e elementos do hero no mobile */
  .tarja { justify-content: center; text-align: center; }
  .hero__titulo { text-align: center; max-width: 100%; margin-inline: auto; }
  .hero__subtitulo { text-align: center; margin-inline: auto; }
  .hero__acoes { display: flex; flex-direction: column; align-items: center; }
}

/* Tarja de contexto acima do título */
.tarja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: 1.75rem;
}
.tarja__divisor {
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.hero__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.125rem, 8.4vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 300;
  color: var(--cinza);
  max-width: 15ch;
  text-wrap: balance;
}
/* A segunda frase do título é a que carrega a tese da página */
.hero__titulo-forte {
  display: block;
  color: var(--osso);
  font-weight: 400;
  margin-top: .2em;
}

.hero__subtitulo {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--cinza);
  max-width: 54ch;
  margin-top: 1.5rem;
}

.hero__acoes { margin-top: 2.25rem; }

.hero__apoio {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza-fraco);
  margin-top: 1rem;
  text-align: center;
}


/* ============================================================================
   07. MARQUEE
   Duas trilhas correndo em sentidos opostos. O grupo de palavras está
   duplicado no HTML, e a animação desloca -50% para o loop não ter emenda.
   ============================================================================ */
.marquee {
  position: relative;
  z-index: 2;
  border-block: 1px solid var(--linha);
  background: var(--preto);
  padding-block: .5rem;
  overflow: hidden;
}
.marquee__linha { overflow: hidden; }
.marquee__linha--secundaria { border-top: 1px solid var(--linha); margin-top: .5rem; padding-top: .5rem; }

.marquee__trilha {
  display: flex;
  width: max-content;
}
.marquee__trilha--esquerda { animation: correr-esquerda 46s linear infinite; }
.marquee__trilha--direita  { animation: correr-direita  52s linear infinite; }

.marquee__grupo {
  display: flex;
  flex: none;
  align-items: center;
}
.marquee__grupo > span {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinza-fraco);
  padding-inline: 1.25rem;
  white-space: nowrap;
}
/* Ponto dourado separando as palavras */
.marquee__grupo > span::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dourado);
  margin-left: 1.25rem;
  opacity: .8;
}
/* A trilha secundária recebe as palavras em dourado suave, criando hierarquia */
.marquee__linha--secundaria .marquee__grupo > span { color: rgba(255,185,92,.45); }
.marquee__linha--secundaria .marquee__grupo > span::after { background: var(--cinza-fraco); }

@keyframes correr-esquerda {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes correr-direita {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


/* ============================================================================
   08. BLOCO 2 — O ESPELHO
   ============================================================================ */
.travas {
  display: grid;
  gap: 1px;                      /* o gap de 1px + fundo cria as hairlines da grade */
  background: var(--linha);
  border-block: 1px solid var(--linha);
  margin-top: .5rem;
}
.trava {
  background: var(--preto);
  padding: 1.75rem 1.5rem;
  transition: background-color .3s ease;
}
.trava:hover { background: var(--grafite); }

.trava__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--osso);
  margin-bottom: .4rem;
}
.trava__texto {
  font-size: .9375rem;
  color: var(--cinza);
  line-height: 1.6;
}


/* ============================================================================
   09. BLOCO 3 — A VIRADA  (elemento-assinatura)
   Arcos concêntricos com uma abertura no topo: a cadeira vazia da mesa.
   Traçado fino e vetorial, sem brilho ambiente.
   ============================================================================ */
.secao--virada {
  background: linear-gradient(180deg, var(--preto) 0%, var(--grafite) 50%, var(--preto) 100%);
}

.anel {
  position: relative;
  width: min(88vw, 540px);
  aspect-ratio: 1;
  margin: clamp(2.5rem, 7vw, 4rem) auto;
  display: grid;
  place-items: center;
}
.anel__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* A largura fica ABAIXO do diâmetro do anel interno (63% do container),
   senão o texto atravessa os arcos. Por isso 56% no celular. */
.anel__citacao {
  position: relative;
  z-index: 1;
  width: 52%;
  text-align: center;
}
.anel__citacao p {
  font-family: var(--fonte-titulo);
  font-size: clamp(.9375rem, 3.4vw, 1.5rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--osso);
}
/* Dentro da citação a palavra "mesa" fica em itálico dourado, como no resto da página */
.anel__autor {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--fonte-corpo);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dourado);
}


/* ============================================================================
   10. BLOCO 4 — DIAGNÓSTICO
   Bloco crítico da página: ganha painel azul-marinho e moldura dourada
   para se destacar de todos os outros.
   ============================================================================ */
.painel {
  position: relative;
  background: linear-gradient(165deg, var(--marinho) 0%, #071120 100%);
  border: 1px solid rgba(255,185,92,.28);
  border-radius: 3px;
  padding: clamp(1.75rem, 6vw, 4rem);
  overflow: hidden;
}
/* Fio dourado no topo do painel, chapado (sem brilho) */
.painel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--degrade-ouro);
}

.painel__titulo { max-width: 16ch; margin-bottom: .75rem; }
.painel__subtitulo {
  font-size: clamp(1.0625rem, 3vw, 1.375rem);
  color: var(--dourado);
  font-weight: 500;
  margin-bottom: 2rem;
}

.entregas {
  display: grid;
  gap: 1.5rem;
  margin-block: 2.5rem;
}
.entrega {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255,185,92,.35);
}
.entrega__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--osso);
  margin-bottom: .3rem;
}
.entrega__texto {
  font-size: .9375rem;
  color: var(--cinza);
  line-height: 1.6;
}

.fechamento--painel {
  margin-top: 0;
  margin-bottom: 2.25rem;
  max-width: 30ch;
}


/* ============================================================================
   11. BLOCO 5 — QUEM ESTÁ POR TRÁS
   ============================================================================ */
.secao--autoridade { background: var(--preto); }

/* Frase-ponte que apresenta o bloco */
.ponte {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.125rem, 3.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--cinza);
  max-width: 46ch;
  margin-bottom: clamp(3rem, 8vw, 5rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  border-bottom: 1px solid var(--linha);
}

.autoridade { display: grid; gap: 2.5rem; }

/* A coluna da foto tem largura máxima própria e a imagem ocupa 100% dela.
   Isso faz a foto e o arco compartilharem a MESMA caixa de referência — sem
   isso os dois usariam larguras diferentes e o corte não bateria com o círculo.
   --anel  = diâmetro do arco dourado (em % da largura da foto)
   --corte = diâmetro do círculo que corta a foto; 1% menor que o arco, para o
             fio dourado continuar visível por fora da imagem recortada. */
.autoridade__midia {
  --anel: 104%;
  --corte: 103%;
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Arco dourado atrás da foto — mesma família gráfica do monograma da logo.
   Fica centralizado na foto (e não no fundo da coluna), por isso usa top 50%. */
.autoridade__arco {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--anel);
  aspect-ratio: 1;
  border: 1px solid rgba(255,185,92,.45);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(12,26,48,.92) 0%, rgba(7,7,10,0) 72%);
}

/* --------------------------------------------------------------------------
   RECORTE DA FOTO NO CÍRCULO
   A máscara soma duas camadas:
   1) um retângulo cobrindo a METADE DE CIMA da foto  -> cabeça e ombros ficam
      livres e continuam "saindo" para fora do círculo;
   2) um círculo do tamanho do arco -> da metade para baixo a imagem é cortada
      acompanhando a curva, e o paletó termina em cima da linha dourada.
   As duas camadas se somam (mask-composite: add é o padrão), então a área
   visível é a união das duas.
   Navegador sem suporte a máscara simplesmente mostra a foto inteira.
   -------------------------------------------------------------------------- */
.autoridade__foto {
  position: relative;
  width: 100%;
  height: auto;

  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%);
  -webkit-mask-size: 100% 50%, var(--corte) var(--corte);
  -webkit-mask-position: center top, center center;
  -webkit-mask-repeat: no-repeat, no-repeat;

  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%);
  mask-size: 100% 50%, var(--corte) var(--corte);
  mask-position: center top, center center;
  mask-repeat: no-repeat, no-repeat;
}

.autoridade__nome {
  font-size: clamp(2rem, 6vw, 3.25rem);
  margin-bottom: .5rem;
  max-width: none;
}
.autoridade__cargo {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dourado);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.facetas { display: grid; gap: 1.75rem; margin-top: 2.5rem; }
.faceta {
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}
.faceta__rotulo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: .625rem;
}
.faceta__texto {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--cinza);
}

/* Citação de fechamento do bloco */
.citacao-final {
  margin-top: 2.5rem;
  padding: 1.75rem 0 0 1.5rem;
  border-left: 2px solid var(--dourado);
}
.citacao-final p {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(1.125rem, 3.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--osso);
}


/* ============================================================================
   12. BLOCO 6 — O ACESSO (carrossel)
   ============================================================================ */
.secao--acesso { background: var(--grafite); }

.carrossel-clube {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding-bottom: 2.75rem;   /* espaço para a paginação */
}
.carrossel-clube .swiper-slide { height: auto; }

/* Placeholder visual — SUBSTITUIR pelas fotos reais dos encontros do Clube */
.placeholder-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(255,185,92,.5);
  border-radius: 3px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,185,92,.035) 0 12px,
      transparent 12px 24px),
    var(--grafite-2);
  text-align: center;
  padding: 1rem;
}
.placeholder-foto__selo {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #1A1206;
  background: var(--dourado);
  padding: .25rem .625rem;
  border-radius: 2px;
}
.placeholder-foto__texto {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  color: var(--osso);
}
.placeholder-foto__meta {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cinza-fraco);
}

/* Paginação do Swiper com as cores da marca */
.swiper-pagination-bullet {
  background: var(--cinza-fraco);
  opacity: .5;
}
.swiper-pagination-bullet-active {
  background: var(--dourado);
  opacity: 1;
}


/* ============================================================================
   13. BLOCO 7 — O QUE É O CLUBE
   ============================================================================ */
.beneficios {
  display: grid;
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
  margin-bottom: 3rem;
}
.beneficio {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: var(--preto);
  padding: 1.25rem 1.25rem;
  font-size: 1rem;
  color: var(--osso);
  transition: background-color .3s ease;
}
.beneficio:hover { background: var(--grafite); }
/* Marcador em arco, repetindo a geometria da logo */
.beneficio::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--dourado);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}

/* Caixa de destaque da comissão por indicação */
.destaque {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  background: var(--petroleo);
  border: 1px solid var(--linha);
  border-left: 2px solid var(--dourado);
  border-radius: 3px;
}
.destaque__texto {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cinza);
  max-width: 62ch;
}
.destaque__texto strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.125rem, 3vw, 1.375rem);
  font-weight: 400;
  color: var(--osso);
  margin-bottom: .5rem;
}


/* ============================================================================
   14. BLOCO 8 — COMO FAZER (passos)
   A numeração é legítima aqui: existe uma ordem real de execução.
   ============================================================================ */
.secao--passos { background: var(--grafite); }

.passos {
  display: grid;
  gap: 0;
  margin-top: 1rem;
}
.passo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--linha);
}
.passo:last-child { border-bottom: 1px solid var(--linha); }

.passo__numero {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,185,92,.45);
  border-radius: 50%;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  color: var(--dourado);
  line-height: 1;
}
.passo__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--osso);
  margin-bottom: .3rem;
}
.passo__texto {
  font-size: .9375rem;
  color: var(--cinza);
  line-height: 1.65;
}

.passos__acao { margin-top: 2.75rem; }


/* ============================================================================
   15. BLOCO 9 — FILTRO
   Duas colunas contrastantes. A coluna clara é a que qualifica e chama o olho.
   ============================================================================ */
.filtro {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}
.filtro__coluna {
  padding: clamp(1.75rem, 6vw, 2.75rem);
  border-radius: 3px;
}
.filtro__coluna--clara {
  background: var(--osso);
  color: var(--preto);
}
.filtro__coluna--escura {
  background: var(--grafite);
  color: var(--osso);
  border: 1px solid var(--linha);
}

.filtro__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.filtro__coluna--clara .filtro__titulo { color: var(--preto); }

.filtro__lista { display: grid; gap: .875rem; }
.filtro__lista li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
}
/* Coluna clara: marcador de arco em dourado profundo (contraste sobre fundo claro) */
.filtro__coluna--clara .filtro__lista li { color: #3A3A42; }
.filtro__coluna--clara .filtro__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 10px;
  height: 10px;
  border: 1px solid var(--dourado-fundo);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
/* Coluna escura: marcador neutro, propositalmente sem dourado */
.filtro__coluna--escura .filtro__lista li { color: var(--cinza); }
.filtro__coluna--escura .filtro__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 11px;
  height: 1px;
  background: var(--cinza-fraco);
}


/* ============================================================================
   16. BLOCO 10 — DEPOIMENTOS
   ============================================================================ */
.carrossel-depoimentos {
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  padding-bottom: 2.75rem;
}
.carrossel-depoimentos .swiper-slide { height: auto; }

.depoimento {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  height: 100%;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: 3px;
}
.depoimento__texto {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--cinza);
}
.depoimento__rodape {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.depoimento__nome {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--osso);
}

/* Placeholders de depoimento — SUBSTITUIR pelo conteúdo real */
.placeholder-inline {
  display: table;              /* ocupa só a largura do próprio texto */
  white-space: nowrap;         /* impede o selo de quebrar em duas linhas */
  font-family: var(--fonte-corpo);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #1A1206;
  background: var(--dourado);
  padding: .25rem .5rem;
  border-radius: 2px;
  margin-bottom: .875rem;
}
.placeholder-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px dashed rgba(255,185,92,.5);
  background: var(--grafite-2);
}


/* ============================================================================
   17. BLOCO 11 — FAQ (acordeão)
   A altura da resposta é calculada no JS (scrollHeight) para animar suave.
   ============================================================================ */
.secao--faq { background: var(--grafite); }

.faq { border-top: 1px solid var(--linha); margin-top: 1rem; }
.faq__item { border-bottom: 1px solid var(--linha); }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--osso);
  transition: color .25s ease;
}
.faq__pergunta:hover { color: var(--dourado); }

/* Ícone de + que vira − quando aberto */
.faq__icone {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.faq__icone::before,
.faq__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--dourado);
  transition: transform .3s ease;
}
.faq__icone::after { transform: rotate(90deg); }
.faq__pergunta[aria-expanded="true"] .faq__icone::after { transform: rotate(0deg); }

.faq__resposta {
  overflow: hidden;
  height: 0;
  transition: height .35s cubic-bezier(.22,.61,.36,1);
}
.faq__resposta p {
  padding-bottom: 1.5rem;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--cinza);
  max-width: 62ch;
}


/* ============================================================================
   18. BLOCO 12 — CTA FINAL
   ============================================================================ */
.secao--cta-final {
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(12,26,48,.85) 0%, rgba(7,7,10,0) 70%),
    var(--preto);
  border-top: 1px solid var(--linha);
}
.cta-final__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.875rem, 6vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--osso);
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cta-final__acao { margin-top: 2.5rem; }


/* ============================================================================
   19. BLOCO 13 — RODAPÉ
   ============================================================================ */
.rodape {
  background: var(--preto);
  border-top: 1px solid var(--linha);
  padding-block: 3.5rem 2.5rem;
}
.rodape__topo {
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linha);
}
.rodape__logo img { width: 128px; height: auto; }

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
}
.rodape__links a {
  font-size: .8125rem;
  color: var(--cinza);
  text-decoration: none;
  transition: color .25s ease;
}
.rodape__links a:hover { color: var(--dourado); }

.rodape__base {
  display: grid;
  gap: 1rem;
  padding-top: 2.5rem;
  text-align: center;
}
.rodape__copy {
  font-size: .8125rem;
  color: var(--cinza-fraco);
}
/* Disclaimer obrigatório — fonte menor, conforme exigência */
.rodape__disclaimer {
  font-size: .6875rem;
  line-height: 1.65;
  color: var(--cinza-fraco);
  max-width: 74ch;
  margin-inline: auto;
  opacity: .85;
}


/* ============================================================================
   20. BOTÃO FIXO DE WHATSAPP
   ============================================================================ */
.whatsapp {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 880;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1FAF52;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: transform .25s ease, background-color .25s ease,
              opacity .3s ease, visibility .3s ease;
}
.whatsapp:hover { transform: scale(1.07); background: #23C55E; }

/* Enquanto o banner de cookies está aberto, o botão de WhatsApp sai de cena.
   Evita dois elementos flutuantes disputando o mesmo canto da tela e impede
   que ele cubra o texto de apoio do Hero no celular.
   Assim que o usuário aceita os cookies, o botão volta com transição suave. */
.cookies-visivel .whatsapp {
  opacity: 0;
  visibility: hidden;
  transform: scale(.85);
}


/* ============================================================================
   21. MODAL DO FORMULÁRIO
   ============================================================================ */
/* O próprio overlay é quem rola, caso o formulário fique mais alto que a tela.
   O padding do topo abre espaço para o botão de fechar, que fica acima do card. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  overflow-y: auto;
  padding: 4rem 1rem 1.5rem;
  opacity: 0;
  transition: opacity .3s ease;
}
/* Precisa vir depois de .modal para o atributo hidden funcionar */
.modal[hidden] { display: none; }
.modal--aberto { opacity: 1; }

/* Fixo (e não absoluto) para continuar cobrindo a tela inteira durante a rolagem */
.modal__fundo {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 5, .84);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   CARD DO MODAL
   Sem fundo, sem borda e sem padding de propósito: o popup mostra apenas o
   formulário do Datalitics, que já tem visual próprio. Como o iframe é um
   bloco de largura total, a ALTURA do card passa a ser exatamente a altura
   que o script do Datalitics calcula — o popup se adapta sozinho.
   O "margin: auto" (em vez de align-items: center) centraliza sem cortar o
   topo quando o formulário é mais alto que a janela.
   -------------------------------------------------------------------------- */
.modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 0;
  background: none;
  border: 0;
  transform: scale(.96);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.modal--aberto .modal__card { transform: scale(1); }

/* No celular o botão fica preso ao canto da tela, para continuar acessível
   mesmo com o formulário rolando. */
.modal__fechar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  color: var(--osso);
  background: rgba(7,7,10,.72);
  backdrop-filter: blur(4px);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.modal__fechar:hover {
  color: var(--dourado);
  border-color: var(--dourado);
  background: rgba(7,7,10,.9);
}

.modal__carregando {
  font-size: .875rem;
  color: var(--cinza-fraco);
  text-align: center;
  padding-block: 3rem;
}
.modal__carregando[hidden] { display: none; }

/* --------------------------------------------------------------------------
   IFRAME DO FORMULÁRIO DATALITICS
   O script deles troca a <div id="datalitics-form-464eda6e6"> por um <iframe>
   que nasce com height:0 e só recebe a altura real depois de carregar.
   Estas regras garantem largura total e remoção da borda padrão do iframe.
   A altura em si continua sendo controlada pelo script do Datalitics.
   -------------------------------------------------------------------------- */
.datalitics-form {
  display: block;
  width: 100%;
  border: 0;
  color-scheme: light;
}
/* Rede de segurança: se o script não conseguir medir a altura, o JS aplica
   esta classe para o formulário não ficar invisível. */
.datalitics-form.altura-reserva { min-height: 520px; }

/* No mobile o iframe do Datalitics às vezes não reporta a altura correta.
   Força um mínimo de 600px para o formulário completo aparecer sem scroll. */
@media (max-width: 767px) {
  .datalitics-form { min-height: 600px; }
}


/* ============================================================================
   22. BANNER DE COOKIES (LGPD)
   ============================================================================ */
.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 950;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .875rem 1.25rem;
  background: rgba(16, 16, 21, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
}
.cookies[hidden] { display: none; }

.cookies__texto {
  flex: 1 1 220px;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--cinza);
}
.cookies__texto a { color: var(--dourado); text-decoration: underline; text-underline-offset: 2px; }
.cookies .btn { flex: none; }


/* ============================================================================
   23. BREAKPOINTS
   ============================================================================ */

/* ------------------------- 600px: telas grandes de celular ---------------- */
@media (min-width: 600px) {
  .btn--grande { width: auto; }
  .hero__apoio { text-align: left; }
  .cta-final__acao .hero__apoio { text-align: center; }

  .travas     { grid-template-columns: repeat(2, 1fr); }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .filtro     { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* ------------------------- 768px: tablet ---------------------------------- */
@media (min-width: 768px) {
  .container { padding-inline: 2.5rem; }
  .hero__conteudo { padding-inline: 2.5rem; }
  .cabecalho__interno { padding-inline: 2.5rem; }

  /* A partir daqui o fundo do Hero passa a ser a versão com o Renato */
  .hero {
    background-image: url("../assets/imagens/hero-bg-desktop.webp");
    background-position: 72% center;
    align-items: center;
    /* Padding enxuto de propósito: o CTA precisa caber na primeira dobra */
    padding-block: 10px 3.5rem;
  }
  .hero::after {
    background: linear-gradient(100deg,
                rgba(7,7,10,.94) 0%,
                rgba(7,7,10,.82) 42%,
                rgba(7,7,10,.35) 68%,
                rgba(7,7,10,.55) 100%);
  }
  /* A largura vira px (e não ch) para controlar o número exato de linhas do título */
  .hero__titulo {
    max-width: 480px;
    font-size: clamp(2rem, 5.4vw, 3.5rem);
  }
  .hero__subtitulo { font-size: .9375rem; max-width: 48ch; margin-top: 1.375rem; }
  .hero__acoes { margin-top: 1.75rem; }

  .entregas { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; }

  .anel__citacao { width: 60%; }
  .cabecalho .btn { font-size: .6875rem; padding-inline: 1.125rem; }

  .autoridade__midia { max-width: 360px; }

  .passo { grid-template-columns: auto 1fr; gap: 1.75rem; padding-block: 2.25rem; }

  .rodape__topo {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    text-align: left;
  }
  /* justify-self empurra o bloco de links para a direita da própria coluna */
  .rodape__links { justify-self: end; justify-content: flex-end; }

  .cookies { padding: 1rem 2.5rem; gap: 1rem; }
  .cookies__texto { font-size: .8125rem; line-height: 1.6; }
  .whatsapp { right: 1.5rem; bottom: 1.5rem; width: 58px; height: 58px; }
}

/* ------------------------- 1024px: desktop -------------------------------- */
@media (min-width: 1024px) {
  .hero { background-position: 62% center; }
  .hero__conteudo { max-width: var(--largura-container); }
  .hero__titulo { max-width: 560px; }

  /* Grade de 3 colunas nos blocos de lista */
  .travas     { grid-template-columns: repeat(3, 1fr); }
  .beneficios { grid-template-columns: repeat(3, 1fr); }
  .trava      { padding: 2.25rem 1.75rem; }

  /* Bloco 5: foto e texto lado a lado */
  .autoridade {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: center;
  }
  /* A coluna da foto acompanha a altura da própria imagem, para o arco
     ficar centralizado nela e não no meio da coluna de texto (bem mais alta). */
  .autoridade__midia { align-self: center; max-width: 420px; }

  .facetas { gap: 2rem; }

  /* Passos lado a lado, com o fio da timeline no topo */
  .passos { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .passo {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-block: 2rem 0;
    border-top: 1px solid var(--linha);
  }
  .passo:last-child { border-bottom: 0; }

  .filtro { gap: 1.25rem; }
  .anel__citacao { width: 64%; }

  /* Em telas maiores o botão de fechar acompanha o card, logo acima dele,
     em vez de ficar preso ao canto da janela. */
  .modal__fechar { position: absolute; top: -3.25rem; right: 0; }
}

/* ------------------------- 1440px: telas largas --------------------------- */
@media (min-width: 1440px) {
  :root { --espaco-secao: 9.5rem; }

  .hero { background-position: 58% center; }
  .hero::after {
    background: linear-gradient(100deg,
                rgba(7,7,10,.93) 0%,
                rgba(7,7,10,.78) 38%,
                rgba(7,7,10,.20) 62%,
                rgba(7,7,10,.45) 100%);
  }
  .hero__titulo { max-width: 640px; font-size: 3.75rem; }

  .titulo-secao { max-width: 24ch; }
  .anel { width: 560px; }
}


/* ============================================================================
   24. ACESSIBILIDADE: MOVIMENTO REDUZIDO
   Respeita a preferência do sistema de quem prefere menos animação.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* Garante que o conteúdo apareça mesmo sem a animação de revelação */
  .revelar { opacity: 1; transform: none; }

  /* Marquee para de correr */
  .marquee__trilha--esquerda,
  .marquee__trilha--direita { animation: none; }
}