/* ══════════════════════════════════════════════════════════
   JOÃO PEDRO JUCÁ — Black Minimalist

   Camada de acabamento, carregada por último em todas as
   páginas. Não reescreve a estrutura herdada: redefine os
   tokens e desliga o que não pertence a um sistema preto —
   gradientes coloridos, brilhos, vidro fosco e sombras com
   matiz. O contraste vem do preto puro contra o branco, e a
   hierarquia vem da tipografia e do espaço, não de cor.
   ══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* superfície — preto puro, elevação por linha, não por sombra */
  --bg: #000;
  --surface: #0a0a0a;
  --surface-strong: #101010;
  --panel: #0a0a0a;

  /* tinta */
  --ink: #fafafa;
  --muted: #a3a3a3;
  --soft: #6f6f6f;

  /* linhas — a única forma de separar planos aqui */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --line-2: rgba(255, 255, 255, 0.06);

  /* ação — branco. sem cor de sistema, sem azul */
  --accent: #fafafa;
  --accent-2: #fafafa;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --signal: #fafafa;
  --signal-2: #ffffff;
  --signal-dim: rgba(255, 255, 255, 0.07);

  --shadow: none;
}

/* ─── Fundo: preto liso, sem aurora ─── */
body {
  background: var(--bg) !important;
  color: var(--ink);
}

body::before { display: none !important; }

/* ─── Painéis: linha em vez de vidro ─── */
.panel,
.offer__panel {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ─── Cartões clicáveis: chapados, reagem por borda ─── */
.option,
.evento,
.choice {
  background: var(--surface-strong) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.option:hover,
.option:focus-visible,
.evento:hover,
.evento:focus-visible,
.choice:hover {
  background: #161616 !important;
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

.choice.selected {
  border-color: #fafafa !important;
  box-shadow: inset 0 0 0 1px #fafafa !important;
}

/* ─── Ícones e selos: contorno, sem preenchimento colorido ─── */
.icon,
.data,
.offer__badge,
.offer__urgency,
.fila__badge,
.fila__urgency {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.offer__badge-dot,
.fila__badge-dot,
.badge__dot { background: #fafafa !important; }

.eyebrow,
.kicker,
.data__mes,
.cd__l { color: var(--muted) !important; }

/* ─── Botões: o primário é branco sólido, o resto é contorno ─── */
.btn.primary,
.cta,
.offer__cta,
.fila__cta {
  color: #000 !important;
  background: #fafafa !important;
  border: 0 !important;
  box-shadow: none !important;
}

.btn.primary:hover,
.cta:hover,
.offer__cta:hover,
.fila__cta:hover {
  background: #fff !important;
  filter: none !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.btn.secondary,
.offer__alt,
.fila__alt {
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
}

.btn.secondary:hover,
.offer__alt:hover,
.fila__alt:hover {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--line-strong) !important;
}

/* O ícone do WhatsApp carrega o significado; o verde brigaria com o preto */
.offer__alt-icon,
.fila__alt-icon,
.cta__icon { color: currentColor !important; }

/* ─── Barra de progresso e réguas ─── */
.bar,
.offer__progress-fill,
.fila__progress-fill { background: #fafafa !important; }

.progress,
.offer__progress,
.fila__progress { background: rgba(255, 255, 255, 0.1) !important; }

.offer__panel::before,
.fila__panel::before {
  background: linear-gradient(to right, transparent, var(--line-strong), transparent) !important;
  opacity: 1 !important;
}

/* ─── Monograma no lugar da foto ─── */
.mono {
  display: grid !important;
  place-items: center;
  border: 1px solid var(--line-strong) !important;
  border-radius: 50%;
  background: #000 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.mono span {
  font-size: 0.34em;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ink);
}

.expert-photo.mono { font-size: 92px; }
.avatar.mono { font-size: 48px; }

@media (max-width: 390px) {
  .expert-photo.mono { font-size: 68px; }
}

@media (max-width: 390px) and (max-height: 740px) {
  .expert-photo.mono { font-size: 58px; }
}

/* ─── Campos ─── */
input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

input:focus {
  border-color: var(--line-strong) !important;
  box-shadow: none !important;
}

input.error,
.error-msg,
.offer__alerta,
.fila__alerta {
  /* o vermelho fica: é o único ponto onde a cor precisa alarmar */
  border-color: rgba(255, 82, 82, 0.45) !important;
}

input.error { box-shadow: none !important; }

/* ─── Estados do vídeo e do scrim ─── */
.offer__scrim,
.fila__scrim {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ─── Countdown e página do assessor ─── */
.bg-photo__img { filter: saturate(0) contrast(1.05) brightness(0.42) !important; }

.bg-photo__overlay {
  background:
    linear-gradient(to top,
      #000 0%, rgba(0,0,0,0.96) 18%, rgba(0,0,0,0.84) 32%,
      rgba(0,0,0,0.5) 46%, rgba(0,0,0,0.16) 60%, transparent 76%),
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 24%, transparent 76%, rgba(0,0,0,0.55) 100%) !important;
}

.screen::after { opacity: 0.5; }

.announcement-bar {
  background: #000 !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--soft) !important;
}

.subtitle__highlight {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45) !important;
}

.badge { background: rgba(0, 0, 0, 0.7) !important; border-color: var(--line) !important; }

/* ─── Foco visível, em branco ─── */
:focus-visible { outline-color: #fafafa !important; }

/* ─── Últimos resquícios de cor herdados ─── */

/* O h1 vinha com gradiente azul recortado no texto. Num sistema preto
   isso é justamente o tipo de brilho que tira a sobriedade. */
h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
}

.arrow,
.arrow svg,
.ir,
.ir svg,
.icon svg,
.info-item svg,
.local svg { color: var(--soft) !important; }

.option:hover .arrow,
.evento:hover .ir { color: var(--ink) !important; }

/* Gradientes de botão que sobraram nos estilos embutidos dos quizzes */
.btn.primary,
.primary { background-image: none !important; }

/* ─── Ícones dentro do modal de fila ─── */
.fila__list svg,
.offer__list svg,
.fila__urgency svg,
.offer__urgency svg,
.fila__gate-msg svg,
.offer__gate-msg svg,
.fila__trust svg,
.offer__trust svg,
.trust svg { color: var(--soft) !important; }

.fila__cta-arrow,
.offer__cta-arrow { color: currentColor !important; }

/* O alerta da VSL continua vermelho — é o único alarme do sistema */
.fila__alerta,
.fila__alerta svg,
.offer__alerta,
.offer__alerta svg { color: #ff6b6b !important; }