/* =========================================================
   Synapps-TV — página de entrada
   Mesma paleta do app (tirada da logomarca).
   ========================================================= */
:root {
  --marca: #f97316;
  --marca-clara: #ffb03a;
  --marca-escura: #d9550f;
  --acento: #7c3aed;
  --acento-escuro: #3b1d8f;
  --vivo: #e8351c;
  --fundo: #0a0a0c;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--fundo); color: #fff; overflow-x: hidden; }
.font-display { font-family: 'Instrument Serif', serif; }
::-webkit-scrollbar { width: 0; height: 0; }
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* ---------- marca ---------- */
.marca-simbolo { width: 38px; height: 38px; flex: 0 0 auto; }
.marca-texto { font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.marca-texto .tv {
  background: linear-gradient(100deg, var(--marca-clara), var(--marca) 45%, var(--vivo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca-brilho { filter: drop-shadow(0 0 16px rgba(249,115,22,.4)); }

/* ---------- botões ---------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 8px; cursor: pointer; font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.bt-marca {
  background: linear-gradient(115deg, var(--marca-clara), var(--marca) 45%, var(--vivo));
  color: #fff; box-shadow: 0 14px 34px -14px rgba(249,115,22,.85);
}
.bt-marca:hover { transform: translateY(-1px); box-shadow: 0 20px 44px -16px rgba(249,115,22,1); }
.bt-vidro {
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.bt-vidro:hover { background: rgba(255,255,255,.2); }

/* ---------- mural de capas do hero ---------- */
.mural {
  position: absolute; inset: -6% -4% -10%; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  transform: perspective(1400px) rotateX(16deg) scale(1.18);
  transform-origin: top center; opacity: .55;
}
.mural-coluna { display: flex; flex-direction: column; gap: 10px; animation: desliza 70s linear infinite; }
.mural-coluna:nth-child(even) { animation-direction: reverse; animation-duration: 90s; }
.mural-coluna img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
@keyframes desliza { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .mural-coluna { animation: none; } }

.veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124,58,237,.35) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 20%, rgba(249,115,22,.28) 0%, transparent 60%),
    linear-gradient(0deg, var(--fundo) 6%, rgba(10,10,12,.82) 45%, rgba(10,10,12,.55) 100%);
}

/* ---------- blocos de recurso ---------- */
.bloco { border-top: 8px solid #1b1b20; }
.moldura-tv {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px -40px rgba(124,58,237,.7);
}
.brilho-marca { position: absolute; inset: -20% ; border-radius: 999px; filter: blur(90px); opacity: .5; z-index: -1; }

/* ---------- fileira de capas ---------- */
.trilho { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 8px; }
.capa {
  flex: 0 0 auto; width: clamp(120px, 14vw, 170px); aspect-ratio: 2/3; border-radius: 8px;
  overflow: hidden; background: #17171b; position: relative;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.capa:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 24px 50px -22px rgba(0,0,0,.95); }
.capa img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- perguntas ---------- */
.pergunta { background: #1b1b20; margin-bottom: 8px; }
.pergunta summary {
  list-style: none; cursor: pointer; padding: 22px 24px; font-size: clamp(16px, 2.1vw, 22px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: background .2s ease;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { background: #26262c; }
.pergunta[open] summary .sinal { transform: rotate(45deg); }
.sinal { transition: transform .3s ease; flex: 0 0 auto; }
.pergunta .resposta { padding: 4px 24px 24px; font-size: clamp(15px, 1.9vw, 19px); color: #d4d4d4; line-height: 1.6; border-top: 1px solid #0a0a0c; padding-top: 22px; }

/* ---------- animação de entrada ---------- */
.surge { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.surge.visivel { opacity: 1; transform: none; }

.recorte-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 999px; background: var(--vivo); box-shadow: 0 0 0 0 rgba(232,53,28,.7); animation: pulsar 1.8s infinite; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(232,53,28,.7); } 70% { box-shadow: 0 0 0 8px rgba(232,53,28,0); } 100% { box-shadow: 0 0 0 0 rgba(232,53,28,0); } }