/* ══════════════════════════════════════════════════════════
   LINKTREE — Black Minimalist

   Carregado por último em todas as páginas do site: linktree,
   eventos e os quatro quizzes, incluindo o modal de fila.

   Não reescreve estrutura: redefine os tokens e desliga o que
   não pertence a um sistema preto — gradientes coloridos,
   brilhos, vidro fosco e sombras com matiz. Contraste vem do
   preto contra o branco; hierarquia, da tipografia e do espaço.
   ══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* quiz-premium.css declara os próprios tokens com !important no :root.
     Sem repetir o peso aqui, o azul dele vence os valores desta folha —
     e a página fica preta por fora com texto azulado por dentro. */
  --bg: #000 !important;
  --surface: #0a0a0a !important;
  --surface-strong: #101010 !important;
  --panel: #0a0a0a !important;

  --ink: #fafafa !important;
  --muted: #a3a3a3 !important;
  --soft: #6f6f6f !important;

  --line: rgba(255, 255, 255, 0.12) !important;
  --line-strong: rgba(255, 255, 255, 0.24) !important;

  --accent: #fafafa !important;
  --accent-2: #fafafa !important;
  --accent-soft: rgba(255, 255, 255, 0.08) !important;

  --shadow: none !important;
}

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

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

/* ─── Foto: sem o halo avermelhado ─── */
.expert-photo {
  border-color: var(--line-strong) !important;
  background: #000 !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04) !important;
}

/* ─── Título: o gradiente azul recortado no texto sai ─── */
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;
}

.subtitle, .cabecalho p { color: var(--muted) !important; }

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

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

/* ─── Ícones, setas e o bloco de data ─── */
.icon,
.data {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.arrow {
  background: transparent !important;
  color: var(--soft) !important;
}

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

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

.data__mes { color: var(--muted) !important; }
.hint, .local, .rodape { color: var(--soft) !important; }

.voltar { border-color: var(--line) !important; color: var(--muted) !important; }
.voltar:hover { color: var(--ink) !important; border-color: var(--line-strong) !important; }

:focus-visible { outline-color: #fafafa !important; }

/* ══════════════════════════════════════════════════════════
   DESTAQUE — o card não muda de cor, muda de luz

   Ele fica no mesmo cinza dos outros: o que separa é um flare
   que atravessa a superfície de tempos em tempos, como reflexo
   passando num vidro. Num sistema sem cor, luz é o recurso que
   sobra — e ela chama sem quebrar a paleta.

   Para mover o destaque, troque a classe .option--destaque de
   lugar no HTML; o CSS não muda.
   ══════════════════════════════════════════════════════════ */
.option--destaque {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-strong) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 26px rgba(255, 255, 255, 0.07) !important;
}

.option--destaque:hover,
.option--destaque:focus-visible {
  background: #161616 !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 34px rgba(255, 255, 255, 0.12) !important;
}

/* O flare. Passa rápido e espera vários segundos até voltar —
   um brilho constante viraria pisca-pisca e cansaria a página. */
.option--destaque::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  transform: skewX(-14deg);
  filter: blur(7px);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 35%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.05) 65%,
    transparent 100%
  );
  animation: flare 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes flare {
  0%, 74%   { left: -70%; opacity: 0; }
  78%       { opacity: 1; }
  96%, 100% { left: 125%; opacity: 0; }
}

/* Ícone e seta um pouco mais acesos que os dos outros cards */
.option--destaque .icon {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.option--destaque .icon svg,
.option--destaque .arrow,
.option--destaque .arrow svg { color: #fafafa !important; }

.option--destaque .label { color: #fff !important; }
.option--destaque .hint { color: #b9b9b9 !important; }

@media (prefers-reduced-motion: reduce) {
  /* sem varredura: fica só o brilho parado, atravessado no card */
  .option--destaque::after { animation: none; left: 18%; opacity: 0.75; }
}

/* Aviso de lista vazia, quando todos os eventos já passaram */
.sem-eventos {
  margin: 6px 2px;
  padding: 18px 14px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

}


/* ══════════════════════════════════════════════════════════
   QUIZZES — mesma estética, aplicada ao funil

   As páginas de perguntas herdam o azul de sistema em botões,
   campos, barra de progresso e no modal de fila. Aqui tudo
   isso passa para o mesmo preto e branco do linktree: o
   primário vira branco sólido, o resto vira contorno.
   ══════════════════════════════════════════════════════════ */

/* Cabeçalho do quiz */
.avatar {
  border-color: var(--line-strong) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04) !important;
}

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

.copy { color: var(--muted) !important; }

/* Barra de progresso */
.progress { background: rgba(255, 255, 255, 0.1) !important; }
.bar { background: #fafafa !important; background-image: none !important; }

/* Alternativas */
.choice {
  background: var(--surface-strong) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.choice:hover { background: #161616 !important; border-color: var(--line-strong) !important; }

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

.choice span { color: var(--soft) !important; }

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

input::placeholder { color: var(--soft) !important; }
input:focus { border-color: var(--line-strong) !important; box-shadow: none !important; }
input.error { box-shadow: none !important; }
label { color: var(--muted) !important; }

/* Botões: primário branco sólido, secundário em contorno */
.btn.primary,
.cta,
.offer__cta,
.fila__cta {
  color: #000 !important;
  background: #fafafa !important;
  background-image: none !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;
  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;
}

.note, .summary { color: var(--soft) !important; }
.summary { background: rgba(255, 255, 255, 0.03) !important; border-color: var(--line) !important; }

/* ─── Modal de fila ─── */
.fila__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;
}

.fila__scrim,
.offer__scrim {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

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

.fila__badge,
.fila__urgency,
.offer__badge,
.offer__urgency {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

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

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

.fila__progress-fill,
.offer__progress-fill { background: #fafafa !important; }

.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__list li,
.offer__list li { color: var(--muted) !important; }

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

/* O vermelho do alerta fica: é o único ponto que precisa alarmar */
.fila__alerta,
.offer__alerta {
  border-color: rgba(255, 82, 82, 0.45) !important;
  background: rgba(255, 82, 82, 0.1) !important;
  color: #ff8a8a !important;
}

.fila__alerta svg,
.offer__alerta svg { color: #ff5252 !important; }

.error-msg { color: #ff6b6b !important; }

/* ─── Sobras do tema dos quizzes que resistem ───

   quiz-premium.css pinta html e body com !important e dá ao eyebrow uma
   pílula azul, também com !important. Como esta folha vem depois, basta
   repetir com o mesmo peso — mas precisa ser explícito, inclusive no
   <html>, senão o azul-escuro dele aparece por baixo. */
html { background: #000 !important; }

body {
  background: #000 !important;
  background-image: none !important;
}

.eyebrow {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  background: transparent !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; }
}

/* ─────────────────────────────────────────────────────────────
   PRÓXIMO EVENTO

   Bloco abaixo das opções, com peso visual maior que os cards
   para ser a primeira coisa que o olho pega. O ponto pulsante é
   o único movimento da página — é ele que diz "é agora".
   ───────────────────────────────────────────────────────────── */
.evento {
  display: grid !important;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(48, 209, 88, 0.32) !important;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(48, 209, 88, 0.14), transparent 62%),
    linear-gradient(180deg, #1c1c20 0%, #101013 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 34px rgba(0, 0, 0, 0.42) !important;
  color: #fafafa !important;
  text-decoration: none;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.evento:hover,
.evento:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(48, 209, 88, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.5) !important;
  outline: none;
}

.evento:active { transform: translateY(0) scale(0.995); }

.evento__topo { display: flex; align-items: center; gap: 7px; }

.evento__pulso {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55);
  animation: eventoPulso 2s ease-out infinite;
}

@keyframes eventoPulso {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

.evento__flag {
  color: #30d158 !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.evento__nome {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.evento__quando { color: #b6b6bd !important; font-size: 13px; line-height: 1.3; }

.evento__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff !important;
}

.evento__cta svg { color: #30d158; transition: transform 200ms ease; }
.evento:hover .evento__cta svg { transform: translateX(3px); }

/* Telas curtas: o linktree precisa caber sem rolagem. */
@media (max-height: 720px) {
  .evento { margin-top: 10px; padding: 11px 13px; border-radius: 15px; }
  .evento__nome { font-size: 17px; }
  .evento__quando { font-size: 12px; }
  .evento__cta { margin-top: 6px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .evento, .evento__cta svg { transition: none; }
  .evento:hover, .evento:focus-visible { transform: none; }
  .evento__pulso { animation: none; }
}