/* ============================================================
   ClickParts Brasil — Funil do prestador (VSL + quiz + agenda)
   Versão estática. Mesmo design system da versão Lovable:
   fundo escuro, vermelho da marca, Oswald/Barlow/JetBrains Mono.
   ============================================================ */

:root {
  --bg: #131316;            /* fundo da página */
  --fg: #f7f7f7;            /* texto */
  --brand: #e52529;         /* vermelho ClickParts */
  --brand-fg: #fcfcfc;
  --surface: #1f1f22;       /* cartões */
  --surface-hover: #26262a;
  --muted: #2b2b2f;
  --muted-fg: #b1b1b8;
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.16);
  --destructive: #f0565a;
  --verde: #22c55e;
  --radius: 0.35rem;
  --font-display: "Oswald", system-ui, sans-serif;
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; border-color: var(--border); margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.02;
  text-transform: uppercase;
}

p { line-height: 1.65; }

::selection { background: var(--brand); color: var(--brand-fg); }

a { color: inherit; }

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

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

/* ---------- utilitários do design system ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--brand);
}
.eyebrow.centrado { justify-content: center; }

.mono-num {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hairline-top {
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgba(229, 37, 41, 0.6), transparent);
}

.icone {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-brand { color: var(--brand); }
.t-verde { color: var(--verde); }

/* ---------- topo ---------- */

.topo {
  border-bottom: 1px solid var(--border);
  background: rgba(31, 31, 34, 0.6);
  backdrop-filter: blur(8px);
}
.topo-linha {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.logo { height: 2.75rem; width: auto; margin-left: -0.5rem; }
.filete-marca { height: 2px; width: 100%; background: var(--brand); }

/* ---------- estrutura principal ---------- */

.principal {
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  flex: 1;
}
.principal.largura-cheia { max-width: 72rem; }   /* entrada, com vídeo */
.principal.largura-quiz  { max-width: 42rem; }   /* rota agenda */

.entrada-topo { text-align: center; }
.selo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(229, 37, 41, 0.4);
  background: rgba(229, 37, 41, 0.1);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand);
}
.icone-selo { width: 0.875rem; height: 0.875rem; }
.entrada-topo h1 { margin-top: 0.5rem; font-size: 1.5rem; }
.entrada-topo .sub { margin-top: 0.25rem; font-size: 1rem; color: var(--muted-fg); }
.entrada-topo .sub strong { color: var(--fg); font-weight: 500; }

/* grade entrada: vídeo + quiz */
.grade-entrada {
  margin-top: 0.75rem;
  display: grid;
  align-items: start;
  gap: 0.75rem;
}
/* na rota agenda a grade vira coluna única centrada */
body.modo-agenda .grade-entrada { display: block; max-width: 42rem; margin-left: auto; margin-right: auto; }
body.modo-agenda #entrada-topo,
body.modo-agenda #entrada-extras,
body.modo-agenda #bloco-video { display: none; }
body.modo-agenda #faq[hidden] { display: none; }
body.modo-entrada #faq { display: none; }

/* ---------- vídeo de entrada ---------- */

.moldura-video {
  position: relative;
  margin-top: 0.75rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}
.moldura-video video { width: 100%; height: 100%; }
.btn-som {
  position: absolute;
  bottom: 3.5rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--brand);
  color: var(--brand-fg);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 18px 50px -18px rgba(229, 37, 41, 0.6);
}
.btn-som[hidden] { display: none; }

/* ---------- cartão do quiz ---------- */

.cartao-quiz {
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  scroll-margin-top: 6rem;
}
.cartao-corpo { padding: 1rem; }
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; }
.contador { font-size: 0.75rem; color: rgba(229, 37, 41, 0.7); }
.contador[hidden] { display: none; }

.progresso {
  margin-top: 1rem;
  height: 0.25rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--border);
}
.progresso-fill { height: 100%; background: var(--brand); transition: width 0.3s ease; }

/* perguntas */
.quiz-secao { margin-top: 1.25rem; }
.quiz-secao h3 { font-size: 1.5rem; }
.quiz-secao h3.com-eyebrow { margin-top: 0.5rem; }
.quiz-sub { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-fg); }

.opcoes { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.375rem; }
.opcao {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0.75rem 1rem;
  text-align: left;
  transition: background-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease, border-color 0.25s ease;
}
.opcao:hover {
  transform: translateY(-3px);
  background-color: var(--surface-hover);
  border-color: rgba(229, 37, 41, 0.6);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.opcao .num { font-size: 0.75rem; color: rgba(229, 37, 41, 0.6); }
.opcao .rotulo { display: block; font-size: 0.9375rem; }
.opcao .ajuda { display: block; font-size: 0.75rem; color: var(--muted-fg); }

.btn-voltar {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-fg);
  transition: color 0.2s ease;
}
.btn-voltar:hover { color: var(--fg); }
.btn-voltar .icone { width: 0.875rem; height: 0.875rem; }

/* formulário */
.campos { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.campos input {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  outline: none;
}
.campos input:focus { border-color: var(--brand); }
.campos input::placeholder { color: var(--muted-fg); }
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.erro { margin-top: 0.75rem; font-size: 0.875rem; color: var(--destructive); }

.btn-primario {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.25rem;
  width: 100%;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-fg);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.btn-primario:hover { filter: brightness(1.08); }
.btn-primario:disabled { opacity: 0.6; cursor: default; }
.btn-primario .icone { width: 1.125rem; height: 1.125rem; }

@keyframes girar { to { transform: rotate(360deg); } }
.girando { animation: girar 1s linear infinite; }

/* resultado / agenda */
.linha-agenda {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.calendly-wrap {
  margin-top: 1rem;
  height: 960px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}
/* o widget.js escreve height inline no iframe (às vezes 26px enquanto está
   fora da tela); min-height em CSS vence o inline menor — é o que segura. */
.calendly-wrap iframe { width: 100%; height: 100%; min-height: 960px; border: 0; }

.linha-sem-horario {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.linha-sem-horario a,
.linha-whatsapp a {
  font-weight: 500;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.linha-sem-horario a:hover,
.linha-whatsapp a:hover { color: var(--brand); }

/* painel "Reunião marcada!" */
.painel-marcado {
  margin-top: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(229, 37, 41, 0.4);
  background: var(--bg);
  padding: 1.5rem;
}
.painel-marcado .icone-grande { width: 2rem; height: 2rem; color: var(--brand); }
.painel-marcado h4 { margin-top: 0.75rem; font-size: 1.875rem; }
.painel-marcado .texto { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-fg); }
.painel-marcado .texto .mono-num { color: var(--fg); font-weight: 500; }
.lista-check { margin-top: 1.25rem; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.lista-check li { display: flex; align-items: flex-start; gap: 0.5rem; }
.lista-check .icone { margin-top: 0.125rem; color: var(--brand); }
.aviso-bloqueado { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-fg); }

/* benefícios */
.beneficios { margin-top: 2rem; }
.beneficios ul {
  margin-top: 1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--border);
}
.beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
}
.beneficios .icone { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; color: var(--brand); }

/* ---------- selos + logos + whatsapp (entrada) ---------- */

.entrada-extras {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.selos span { display: inline-flex; align-items: center; gap: 0.5rem; }

.linha-whatsapp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* esteira de logos */
.mt-10 { margin-top: 2.5rem; }
.oficinas { width: 100%; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.oficinas.visivel { opacity: 1; transform: translateY(0); }
.oficinas-titulo { text-align: center; }
.oficinas-titulo p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-fg); }

.logo-marquee {
  margin-top: 1.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: logo-marquee 30s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
/* espaçamento por MARGEM em cada item (com gap, -50% não fecha o ciclo e a
   emenda pula ~20px) */
.logo-marquee-track > div {
  margin: 0 1.25rem;
  display: flex;
  height: 75px;
  width: 150px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.logo-marquee-track img { height: 100%; width: 100%; object-fit: contain; }

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; }
  .logo-marquee-track { animation: none; }
}

/* ---------- FAQ ---------- */

.faq { margin-top: 3.5rem; }
.faq h2 { margin-top: 0.75rem; font-size: 1.875rem; }
.faq dl { margin-top: 1.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-item { display: flex; gap: 1.25rem; padding: 1.25rem 0; }
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-num { padding-top: 0.125rem; font-size: 0.75rem; color: rgba(229, 37, 41, 0.6); }
.faq dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; }
.faq dd { margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-fg); }

/* ---------- rodapé ---------- */

.rodape { border-top: 1px solid var(--border); padding: 1.5rem 0; margin-top: 2rem; }
.rodape-linha {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* ---------- responsivo ---------- */

@media (min-width: 640px) {
  .logo { height: 3.5rem; }
  .principal { padding-top: 2rem; padding-bottom: 2rem; }
  .entrada-topo h1 { margin-top: 1rem; font-size: 1.875rem; }
  .entrada-topo .sub { margin-top: 0.75rem; }
  .grade-entrada { margin-top: 1.5rem; }
  .cartao-corpo { padding: 2rem; }
  .quiz-secao { margin-top: 1.75rem; }
  .quiz-secao h3 { font-size: 1.875rem; }
  .quiz-secao h3.com-eyebrow { margin-top: 0.75rem; }
  .opcoes { margin-top: 1.75rem; gap: 0.75rem; }
  .opcao { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  .calendly-wrap { height: 860px; }
  .calendly-wrap iframe { min-height: 860px; }
  .rodape-linha { flex-direction: row; }
}

@media (min-width: 1024px) {
  .entrada-topo h1 { font-size: 2.25rem; }
  body.modo-entrada .grade-entrada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    gap: 1.5rem;
  }
}