/* ============================================================================
   Baixo — tema "Grave & Groove" + hero das cordas graves.
   Complementa cursos.css (base estrutural compartilhada) — nada é redefinido.
   ============================================================================ */

.t-baixo {
  --c-bg: #0a0f1a;
  --c-bg2: #101828;
  --c-bg3: #070b12;
  --c-ink: #e9edf6;
  --c-muted: #a3adc2;
  --c-acc: #5f9ee8;
  --c-acc-strong: #8fc1f7;
  --c-line: rgba(233, 237, 246, 0.14);
  --c-soft: rgba(95, 158, 232, 0.12);
}

/* ---- hero: luz elétrica baixa, palco antes do show ---- */
.t-baixo .c-hero {
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 58% 46% at 70% 60%, rgba(95, 158, 232, 0.08), transparent 70%),
    radial-gradient(ellipse 38% 30% at 20% 26%, rgba(143, 193, 247, 0.05), transparent 70%);
}

/* ---- fallback estático (prefers-reduced-motion / sem WebGL) ----
   Quatro cordas graves: espessura crescente do G (topo) ao E (base). */
.t-baixo .c-strings-fallback i { left: -4%; right: -4%; }
.t-baixo .c-strings-fallback i:nth-child(1) { height: 2.5px; background: rgba(95, 158, 232, 0.20); }
.t-baixo .c-strings-fallback i:nth-child(2) { height: 3.2px; background: rgba(95, 158, 232, 0.24); }
.t-baixo .c-strings-fallback i:nth-child(3) { height: 4px; background: rgba(95, 158, 232, 0.28); }
.t-baixo .c-strings-fallback i:nth-child(4) { height: 5px; background: rgba(95, 158, 232, 0.33); }

/* ---- mobile ---- */
@media (max-width: 820px) {
  .t-baixo .c-hero {
    background: radial-gradient(ellipse 72% 32% at 50% 26%, rgba(95, 158, 232, 0.08), transparent 72%);
  }
}