/* Darpana app: Trilha do seu signo (prefixo .trilha-) */
.trilha-topo { text-align: center; }
.trilha-h1 { font-family: var(--display); font-size: clamp(28px, 7.5vw, 38px); line-height: 1.1; margin: 4px 0 8px; }
.trilha-h3 { font-family: var(--display); font-size: 24px; margin: 6px 0 8px; }
.trilha-signos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 18px 0; }
.trilha-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; transition: border-color .25s, background .25s, transform .2s; font: inherit; }
.trilha-chip span { font-size: 20px; line-height: 1; color: var(--gold-soft); }
.trilha-chip small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.trilha-chip:hover { transform: translateY(-2px); }
.trilha-chip.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(216,181,106,.18), rgba(216,181,106,.04)); box-shadow: 0 0 14px rgba(216,181,106,.25); }
.trilha-chip.on span { color: var(--gold); }

.trilha-palco { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; margin: 6px 0 14px; }
.trilha-vinil { width: 132px; height: 132px; border-radius: 50%; position: relative; display: grid; place-items: center;
  background: radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.04) 31%, transparent 32%),
    repeating-radial-gradient(circle, #0b0918 0 2px, #26223f 2px 3px),
    conic-gradient(from 30deg, rgba(255,255,255,.0), rgba(216,181,106,.14), rgba(255,255,255,0) 20%, rgba(155,132,242,.12) 55%, rgba(255,255,255,0) 70%);
  background-blend-mode: normal, normal, screen; box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(216,181,106,.25); }
.trilha-vinil::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 40%, transparent 60%, rgba(255,255,255,.07)); pointer-events: none; }
.trilha-rotulo { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0d79a, var(--gold) 60%, #a8833e); display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(15,12,34,.6); position: relative; }
.trilha-rotulo::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #0f0c22; }
.trilha-rotulo-simb { font-size: 18px; color: #2a2140; margin-top: -14px; }
@media (prefers-reduced-motion: no-preference) {
  .trilha-vinil { animation: trilha-gira 6s linear infinite; }
  .trilha-vinil.trilha-troca { animation: trilha-entra .7s cubic-bezier(.2,.8,.3,1), trilha-gira 6s linear .7s infinite; }
}
@keyframes trilha-gira { to { transform: rotate(360deg); } }
@keyframes trilha-entra { from { transform: translateX(-30px) rotate(-120deg); opacity: .2; } to { transform: none; opacity: 1; } }
.trilha-capa .eyebrow { display: block; }
.trilha-titulo { font-family: var(--display); font-size: 30px; margin: 4px 0 6px; color: var(--gold); }
.trilha-tag { margin: 0; }
@media (max-width: 360px) { .trilha-palco { grid-template-columns: 104px 1fr; } .trilha-vinil { width: 104px; height: 104px; } .trilha-titulo { font-size: 24px; } }

.trilha-faixas { list-style: none; padding: 0; margin: 0; }
.trilha-faixa { display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; padding: 12px; margin-bottom: 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.trilha-hoje { border-color: rgba(216,181,106,.6); background: linear-gradient(180deg, rgba(216,181,106,.10), transparent), var(--surface); box-shadow: 0 0 18px rgba(216,181,106,.14); }
@media (prefers-reduced-motion: no-preference) {
  .trilha-cascata .trilha-faixa { opacity: 0; animation: trilha-cai .5s ease forwards; animation-delay: calc(var(--i) * 80ms + 120ms); }
}
@keyframes trilha-cai { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.trilha-dia { grid-row: span 2; align-self: start; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-soft); border: 1px solid rgba(216,181,106,.35); }
.trilha-hoje .trilha-dia { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.trilha-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trilha-musica { font-size: 16px; }
.trilha-artista { color: var(--muted); font-size: 14px; }
.trilha-motivo { color: var(--violet-soft, var(--violet)); margin-top: 3px; }
.trilha-badge { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: var(--bg); margin-left: 4px; }
.trilha-links { grid-column: 2; display: flex; gap: 8px; margin-top: 6px; }
.trilha-link { font-size: 13px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color .2s, color .2s; }
.trilha-sp:hover { border-color: #1db954; color: #1db954; }
.trilha-yt:hover { border-color: #ff4e45; color: #ff4e45; }

.trilha-acoes { text-align: center; margin: 16px 0 6px; }
.trilha-nota { text-align: center; }
.trilha-mapa, .trilha-mail { margin-top: 22px; }