/* ===== Tema futurista (camada por cima do style.css) ===== */
:root {
  --neon-ciano: #2EE6FF;
  --neon-rosa: #FF4FD8;
  --neon-sol: #FFC145;
  --fundo-0: #070A18;
  --fundo-1: #0D1230;
  --vidro: rgba(255, 255, 255, .055);
  --vidro-borda: rgba(120, 220, 255, .18);
  --texto-claro: #E8ECFF;
  --texto-suave: #A9B2D6;
  --tinta: #E8ECFF;
  --tinta-suave: #A9B2D6;
  --linha: rgba(140, 170, 255, .2);
  --papel: var(--fundo-0);
  --branco: var(--fundo-1);
}

body {
  background: var(--fundo-0);
  color: var(--texto-claro);
}
/* fundo vivo: aurora + grade em perspectiva */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 40vh at 15% 10%, rgba(46, 230, 255, .14), transparent 60%),
    radial-gradient(50vw 45vh at 85% 30%, rgba(255, 79, 216, .12), transparent 60%),
    radial-gradient(70vw 50vh at 50% 100%, rgba(255, 193, 69, .08), transparent 60%),
    var(--fundo-0);
  animation: aurora 18s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; left: -50%; right: -50%; bottom: -10vh; height: 60vh; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 230, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 255, .10) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(62deg);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: grade 6s linear infinite;
}
@keyframes aurora { to { filter: hue-rotate(35deg); transform: scale(1.06); } }
@keyframes grade { to { background-position: 0 60px, 0 0; } }

a { color: var(--neon-ciano); }

/* topo de vidro */
.topo {
  background: rgba(7, 10, 24, .6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--vidro-borda);
}
.menu a { position: relative; }
.menu a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--neon-ciano), var(--neon-rosa));
  transform: scaleX(0); transition: transform .25s;
}
.menu a:hover::after { transform: scaleX(1); }
.menu a:hover { background: rgba(46, 230, 255, .08); }

/* hero */
.hero { isolation: isolate; }
#fxParticulas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero > *:not(#fxParticulas) { position: relative; z-index: 1; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(transparent 0, rgba(46, 230, 255, .06) 50%, transparent 100%);
  background-size: 100% 6px; opacity: .35; mix-blend-mode: screen;
}
.glass-card {
  background: rgba(13, 18, 48, .45) !important;
  border: 1px solid var(--vidro-borda) !important;
  box-shadow: 0 0 0 1px rgba(255, 79, 216, .08), 0 20px 80px rgba(0, 0, 0, .5), inset 0 0 60px rgba(46, 230, 255, .05) !important;
}

/* botão play com anel de equalizador */
.sol-btn-modern { position: relative; background: radial-gradient(circle at 35% 30%, #6ff3ff, #0a7cff 70%); }
.sol-btn-modern::before, .sol-btn-modern::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(46, 230, 255, .55);
  animation: pulsa 2.4s ease-out infinite;
}
.sol-btn-modern::after { animation-delay: 1.2s; border-color: rgba(255, 79, 216, .5); }
@keyframes pulsa { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
#fxAnel { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); pointer-events: none; }
@media (max-width: 768px) { #fxAnel { width: 160px; height: 160px; } }

/* seções viram painéis de vidro */
.secao, .secao-clara { background: transparent; }
.secao > .secao-in {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 28px;
  padding: 36px 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 50px rgba(0, 0, 0, .35);
  max-width: 1120px;
}
@media (max-width: 600px) { .secao > .secao-in { border-radius: 20px; padding: 26px 16px; margin: 0 10px; } }
.secao { padding: 28px 0; }
.secao h2 {
  background: linear-gradient(90deg, #fff 0%, var(--neon-ciano) 45%, var(--neon-rosa) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.secao-sub, .nota { color: var(--texto-suave); }

/* revelar ao rolar */
.fx-revela { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.fx-revela.fx-visivel { opacity: 1; transform: none; }

/* cartões com brilho que segue o mouse e leve inclinação */
.fx-card {
  position: relative; transform-style: preserve-3d;
  transition: transform .15s ease, box-shadow .25s ease;
  --mx: 50%; --my: 50%;
}
.fx-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(46, 230, 255, .18), transparent 60%);
  opacity: 0; transition: opacity .25s;
}
.fx-card:hover::after { opacity: 1; }
.fx-card:hover { box-shadow: 0 0 0 1px rgba(46, 230, 255, .45), 0 0 30px rgba(46, 230, 255, .25); }

/* botões */
.btn-prim {
  background: linear-gradient(90deg, var(--neon-sol), #FF8A3D); border: 0; color: #140b00;
  box-shadow: 0 0 20px rgba(255, 193, 69, .35);
}
.btn-prim:hover { box-shadow: 0 0 34px rgba(255, 193, 69, .7); }
.btn-sec { border-color: rgba(46, 230, 255, .6); color: var(--texto-claro); }
.btn-sec:hover { background: rgba(46, 230, 255, .12); box-shadow: 0 0 18px rgba(46, 230, 255, .35); }

/* campos de formulário */
input, select, textarea {
  background: rgba(255, 255, 255, .06) !important; color: var(--texto-claro) !important;
  border: 1px solid var(--vidro-borda) !important;
}
input::placeholder, textarea::placeholder { color: #7f88b0 !important; }
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 2px rgba(46, 230, 255, .55) !important; }

/* blocos do passatempo e cartões claros ficam escuros */
#forca { background: rgba(255, 255, 255, .04); border-color: var(--vidro-borda); }
#quiz { background: linear-gradient(160deg, #123a58, #1b1f52); }
#gauches { background: linear-gradient(160deg, #FFC145, #FF7F50); }

/* player inferior com visualizador */
.player {
  background: rgba(7, 10, 24, .75) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--vidro-borda);
  box-shadow: 0 -10px 40px rgba(46, 230, 255, .12);
}
#fxBarras { position: absolute; left: 0; right: 0; top: -2px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--neon-ciano), var(--neon-rosa), var(--neon-sol), var(--neon-ciano));
  background-size: 300% 100%; opacity: .5; }
body[data-radio="tocando"] #fxBarras { opacity: 1; animation: faixa 3s linear infinite; }
@keyframes faixa { to { background-position: 300% 0; } }
.fx-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; margin-right: 6px; }
.fx-eq i { width: 4px; height: 4px; border-radius: 2px; background: linear-gradient(var(--neon-rosa), var(--neon-ciano)); transition: height .12s; }

/* luz que segue o cursor (só computador) */
#fxCursor { position: fixed; width: 420px; height: 420px; left: 0; top: 0; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(46, 230, 255, .10), transparent 65%); transform: translate(-50%, -50%); }

/* rodapé */
.rodape { background: rgba(7, 10, 24, .8) !important; border-top: 1px solid var(--vidro-borda); }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .sol-btn-modern::before, .sol-btn-modern::after, #fxBarras { animation: none !important; }
  .fx-revela { opacity: 1; transform: none; transition: none; }
}

/* cartões que eram brancos */
.guia-card, .patro-card, .patro-casa, .signo, .chip, .segmento button, .dia, .noticias > * {
  background: rgba(255, 255, 255, .05) !important; color: var(--texto-claro) !important;
  border-color: var(--vidro-borda) !important;
}
.guia-card span, .patro-card span, .signo .datas { color: var(--texto-suave) !important; }
.guia-card strong { color: #fff; }
.segmento button[aria-pressed="true"], .chip[aria-pressed="true"] {
  background: linear-gradient(90deg, var(--neon-ciano), #6a8bff) !important; color: #06101f !important; border-color: transparent !important;
}
.signo[aria-pressed="true"] { background: linear-gradient(160deg, var(--neon-sol), #ff8a3d) !important; color: #140b00 !important; }
.signo[aria-pressed="true"] .datas { color: #3a2400 !important; }
.quiz-opcoes button { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.06) !important; }
#quiz, #quiz * { color: #fff; }