/* ══════════════════════════════════════════════════════════
   KAUAN MENDES — 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; }

/* ══════════════════════════════════════════════════════════
   MOVIMENTO

   Três regras que valem para tudo aqui:

   1. Uma curva só. cubic-bezier(0.16, 1, 0.3, 1) sai rápido e
      desacelera longo — é o que dá a sensação de peso e material
      em vez de "coisa aparecendo".
   2. Nada em loop. O movimento acontece na chegada e na resposta
      ao toque; o resto fica parado. Animação eterna vira ruído.
   3. Curto. Nenhuma passagem acima de 620ms — acima disso o
      usuário espera a interface em vez de usá-la.

   Tudo desliga em prefers-reduced-motion, sem deixar nada
   invisível.
   ══════════════════════════════════════════════════════════ */

:root {
  --mov: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes surgirFoto {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes revelarPainel {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

/* ─── Chegada ─── */
.panel { animation: revelarPainel 620ms var(--mov) both; }

.expert-photo,
.avatar { animation: surgirFoto 620ms var(--mov) both; animation-delay: 90ms; }

.brand h1 { animation: surgir 560ms var(--mov) both; animation-delay: 150ms; }
.brand .subtitle { animation: surgir 560ms var(--mov) both; animation-delay: 210ms; }

/* Escalonamento dos cards: 55ms entre um e outro. Menos que isso
   parece simultâneo; mais que isso a lista demora a assentar. */
.links .option { animation: surgir 560ms var(--mov) both; }
.links .option:nth-child(1) { animation-delay: 260ms; }
.links .option:nth-child(2) { animation-delay: 315ms; }
.links .option:nth-child(3) { animation-delay: 370ms; }
.links .option:nth-child(4) { animation-delay: 425ms; }
.links .option:nth-child(5) { animation-delay: 480ms; }
.links .option:nth-child(6) { animation-delay: 535ms; }

/* Mesma lógica na página de eventos */
.cabecalho { animation: surgir 560ms var(--mov) both; animation-delay: 80ms; }
.eventos .evento { animation: surgir 560ms var(--mov) both; }
.eventos .evento:nth-child(1) { animation-delay: 180ms; }
.eventos .evento:nth-child(2) { animation-delay: 235ms; }
.eventos .evento:nth-child(3) { animation-delay: 290ms; }
.eventos .evento:nth-child(4) { animation-delay: 345ms; }
.voltar { animation: surgir 480ms var(--mov) both; }

/* ─── Resposta ao toque ─── */

/* A seta acompanha o card em vez de saltar sozinha */
.option .arrow,
.evento .ir {
  transition: transform 320ms var(--mov), color 220ms ease;
}

.option:hover .arrow,
.option:focus-visible .arrow,
.evento:hover .ir { transform: translateX(3px); }

.option,
.evento {
  transition:
    transform 320ms var(--mov),
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 320ms var(--mov);
}

.option:hover,
.evento:hover { transform: translateY(-2px); }

/* Pressionar afunda um pouco e volta rápido — resposta física */
.option:active,
.evento:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms;
}

/* O ícone reage junto, num grau menor que o card */
.option .icon { transition: border-color 260ms ease, background 260ms ease, transform 320ms var(--mov); }
.option:hover .icon { transform: scale(1.05); }

/* ─── Movimento reduzido ───
   Tudo aparece no lugar final, sem deslocamento. O importante é
   que nada fique invisível quando a animação é desligada. */
@media (prefers-reduced-motion: reduce) {
  .panel,
  .expert-photo,
  .avatar,
  .brand h1,
  .brand .subtitle,
  .links .option,
  .cabecalho,
  .eventos .evento,
  .voltar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .option:hover,
  .evento:hover,
  .option:active,
  .evento:active,
  .option:hover .icon { transform: none !important; }
}