/* ============================================================
   NextX Hub — Editorial Premium, skin nextx-dark
   Tokens de identidade/modelos-design/editorial-premium/MODELO.md §2
   Página utilitária: sem camada cinematográfica (§10 desligada).
   Mobile-first — 90% do tráfego de link de bio é celular.
   ============================================================ */

:root {
  --bg: #020408;
  --surface: #070c15;
  --surface-2: #0c1424;
  --border: #16223a;
  --fg: #d9e6f5;
  --muted: #6f819c;
  --brand: #3ea8ff;
  --brand-light: #6fe0ff;
  --brand-deep: #1a6fe0;
  --ink: #04101f;
  --grad: linear-gradient(135deg, #5bd6ff, #3ea8ff 48%, #1c74d6);
  /* cromado da logo: o "next" é metal escovado com uma faixa de luz no meio */
  --metal: linear-gradient(
    177deg,
    #ffffff 0%,
    #dfe8f4 30%,
    #8b9cb4 49%,
    #f2f7ff 58%,
    #a9bacf 78%,
    #7f90a8 100%
  );
  /* bloom do X: azul que estoura, não azul chapado */
  --bloom: 0 0 0 1px rgba(111, 224, 255, 0.22), 0 12px 34px -14px rgba(62, 168, 255, 0.85);

  /* sombra puxada pro azul do fundo — preto puro em fundo navy
     deixa o card "sujo" (auditoria de redesign) */
  --sombra: 0 22px 54px -34px rgba(2, 10, 26, 0.95);
  --sombra-brand: 0 14px 46px -30px rgba(62, 168, 255, 0.42);

  --r-card: 15px;
  --r-aberto: 19px;
  --r-tile: 11px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 550ms;
  --largura: 540px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* display:flex nos blocos vence o atributo hidden — isso conserta */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  /* espaço pro dock fixo do WhatsApp */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* atalho de teclado — aparece só no foco */
.pular {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.85rem;
  text-decoration: none;
}

.pular:focus {
  left: 12px;
}

/* aurora suave atrás do topo */
.aurora {
  position: fixed;
  inset: -20% 0 auto 0;
  height: 560px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 48% at 50% 28%, rgba(62, 168, 255, 0.17), transparent 70%),
    radial-gradient(38% 38% at 82% 8%, rgba(111, 224, 255, 0.08), transparent 70%);
  filter: blur(6px);
}

/* risco de luz — o traço que corta a logo, virando assinatura da página */
.risco {
  position: fixed;
  left: -12%;
  right: -12%;
  top: 96px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  transform: rotate(-3.5deg);
  opacity: 0.6;
  background: linear-gradient(
    90deg,
    transparent 6%,
    rgba(62, 168, 255, 0.25) 26%,
    rgba(111, 224, 255, 0.9) 52%,
    rgba(28, 116, 214, 0.3) 74%,
    transparent 94%
  );
}

.risco::after {
  content: "";
  position: absolute;
  inset: -7px 0;
  background: inherit;
  filter: blur(9px);
  opacity: 0.75;
}

/* grão — quebra a chapadura digital do fundo escuro */
.grao {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 22px 20px 0;
}

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

.topo {
  text-align: center;
  margin-bottom: 18px;
}

.marca {
  display: block;
  width: 146px;
  max-width: 52%;
  height: auto;
  margin: 0 auto 10px;
  /* resto de fundo do PNG some no screen */
  mix-blend-mode: screen;
}

/* a headline repete a lógica da logo: cromado + uma oração azul */
.tagline {
  margin: 0 auto;
  max-width: 20ch;
  font-size: 1.3rem;
  line-height: 1.18;
  letter-spacing: -0.038em;
  font-weight: 700;
  text-wrap: balance;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* a segunda oração é a única coisa azul do cabeçalho (MODELO §3) */
.tagline em {
  display: block;
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.045em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.apoio {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- seletor de trilha ---------- */

.trilhas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.trilha {
  appearance: none;
  min-height: 44px; /* tap target */
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease),
    transform 160ms var(--ease);
}

.trilha:hover {
  color: var(--fg);
  border-color: rgba(62, 168, 255, 0.35);
}

.trilha:active {
  transform: scale(0.97);
}

.trilha[aria-selected="true"] {
  background: var(--grad);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--bloom);
}

.dica {
  margin: 0 0 18px;
  min-height: 2.4em; /* trava o layout: não pula ao trocar de trilha */
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- cards ---------- */

.lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease),
    box-shadow 200ms var(--ease), background 200ms var(--ease);
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(62, 168, 255, 0.35);
  background: var(--surface-2);
  box-shadow: var(--sombra);
}

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

.card__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--brand);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.card:hover .card__ic {
  border-color: rgba(62, 168, 255, 0.35);
  color: var(--brand-light);
}

.card__txt {
  min-width: 0;
  flex: 1;
}

.card__t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.card__s {
  margin-top: 2px;
  font-size: 0.79rem;
  line-height: 1.35;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.card__seta {
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 200ms var(--ease), color 200ms var(--ease);
}

.card:hover .card__seta {
  transform: translateX(3px);
  color: var(--brand);
}

/* etiqueta quadrada, não pílula — pílula é o default de todo mundo */
.badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(62, 168, 255, 0.28);
  background: rgba(62, 168, 255, 0.1);
  color: var(--brand-light);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- card com realce, sem botões ---------- */

.card--realce {
  padding: 18px 18px;
  min-height: 84px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 72%);
  border-color: rgba(62, 168, 255, 0.3);
  box-shadow: var(--sombra), var(--sombra-brand);
}

.card--realce .card__ic,
.card--aberto .card__ic {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--grad);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--sombra-brand);
}

.card--realce .card__t,
.card--aberto .card__t {
  font-size: 1.05rem;
}

.card--realce .card__s,
.card--aberto .card__s {
  font-size: 0.83rem;
}

/* ---------- card aberto: o clique principal da trilha ---------- */

.card--aberto {
  position: relative;
  display: block;
  padding: 20px 18px 18px;
  border-radius: var(--r-aberto);
  border: 1px solid transparent;
  overflow: hidden;
  /* borda em gradiente: o miolo pinta padding-box, a borda border-box */
  background:
    linear-gradient(165deg, #0c1626, #070d18 72%) padding-box,
    linear-gradient(135deg, rgba(91, 214, 255, 0.55), rgba(62, 168, 255, 0.26) 46%, rgba(28, 116, 214, 0.14))
      border-box;
  box-shadow: var(--sombra), var(--sombra-brand);
}

/* luz que segue o cursor */
.card--aberto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    340px 200px at var(--mx, 50%) var(--my, 0%),
    rgba(62, 168, 255, 0.15),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.card--aberto:hover::before {
  opacity: 1;
}

.card__topo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.preco {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 0;
  font-variant-numeric: tabular-nums;
}

.preco__de {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration-color: rgba(62, 168, 255, 0.65);
  text-decoration-thickness: 1.5px;
}

.preco__por {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.preco__per {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: -6px;
}

.nota {
  margin: 10px 0 0;
  font-size: 0.73rem;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}

.acoes {
  margin-top: 16px;
}

/* um botão cheio + um link de texto: menos ruído que dois botões */
.btn--1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--bloom);
  transition: transform 200ms var(--ease), filter 200ms var(--ease), box-shadow 200ms var(--ease);
}

/* varredura de luz da esquerda pra direita (MODELO §7) */
.btn--1::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transition: transform 620ms var(--ease);
}

.btn--1:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(111, 224, 255, 0.3), 0 16px 42px -12px rgba(62, 168, 255, 0.95);
}

.btn--1:hover::after {
  transform: translateX(101%);
}

.btn--1:active {
  transform: translateY(0) scale(0.985);
}

.btn--1 svg {
  position: relative;
  z-index: 1;
}

.btn--2 {
  display: block;
  margin: 12px 0 2px;
  text-align: center;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.btn--2:hover {
  color: var(--brand-light);
}

/* estados */
.card--breve,
.card--esgotado {
  opacity: 0.45;
  pointer-events: none;
}

.card--esgotado .card__t {
  text-decoration: line-through;
}

/* ---------- entrada em cascata (MODELO §7) ---------- */

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

.anima {
  animation: sobe var(--dur) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* ---------- ver todos ---------- */

.vertodos {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 16px 0 0;
  padding: 0 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-card);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.vertodos:hover {
  color: var(--fg);
  border-color: rgba(62, 168, 255, 0.35);
}

.busca {
  width: 100%;
  min-height: 48px;
  margin: 18px 0 14px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
}

.busca::placeholder {
  color: var(--muted);
}

.busca:focus-visible,
.trilha:focus-visible,
.card:focus-visible,
.vertodos:focus-visible,
.zap:focus-visible,
.btn--1:focus-visible,
.btn--2:focus-visible,
.pular:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.grupo {
  margin: 22px 0 10px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.vazio {
  padding: 24px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

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

.rodape {
  margin: 36px 0 0;
  padding: 22px 0 30px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
}

.rodape a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.rodape a:hover {
  color: var(--brand);
}

/* ---------- dock fixo do WhatsApp ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 4, 8, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

.dock__in {
  max-width: var(--largura);
  margin: 0 auto;
}

.zap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.zap:hover {
  transform: translateY(-2px);
  border-color: rgba(62, 168, 255, 0.4);
  color: var(--brand-light);
}

.zap:active {
  transform: translateY(0) scale(0.99);
}

.zap svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

/* ---------- desktop ---------- */

@media (min-width: 810px) {
  :root {
    /* 580 e não 540: com 540 as 4 pílulas de trilha quebram por 18px */
    --largura: 580px;
  }
  .wrap {
    padding-top: 56px;
  }
  .marca {
    width: 196px;
  }
  .tagline {
    font-size: 1.62rem;
  }
  .card--aberto {
    padding: 24px 22px 20px;
  }
}

/* ---------- movimento reduzido (MODELO §7, obrigatório) ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .card:hover,
  .btn--1:hover,
  .zap:hover {
    transform: none;
  }
}