/* ============================================================================
   Bateria — tema "Pulso & Impacto" + hero do kit pulsante.
   Complementa cursos.css (base estrutural compartilhada) — nada é redefinido.
   ============================================================================ */

.t-bateria {
  --c-bg: #160c0a;
  --c-bg2: #1d100d;
  --c-bg3: #100807;
  --c-ink: #f6e9e4;
  --c-muted: #c9a99e;
  --c-acc: #f05a3c;
  --c-acc-strong: #ffaa3c;
  --c-line: rgba(246, 233, 228, 0.14);
  --c-soft: rgba(240, 90, 60, 0.12);
}

/* ---- hero: calor difuso atrás do kit ---- */
.t-bateria .c-hero {
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 46% 52% at 73% 44%, rgba(240, 90, 60, 0.10), transparent 70%),
    radial-gradient(ellipse 30% 34% at 87% 46%, rgba(255, 170, 60, 0.07), transparent 70%);
}

/* ---- fallback estático do kit (prefers-reduced-motion / sem canvas) ----
   Cinco peças vistas de cima: bumbo, caixa, dois tons e prato. */
.c-kit-fallback { position: absolute; inset: 0; display: none; pointer-events: none; }
.c-hero.static .c-kit-fallback { display: block; }
.c-kit-fallback i {
  position: absolute; transform: translate(-50%, -50%);
  border: 1px solid var(--c-line); border-radius: 50%;
  background: radial-gradient(circle, var(--c-soft), transparent 72%);
}
.c-kit-fallback i:nth-child(1) { left: 72%; top: 60%; width: 31vmin; height: 31vmin; box-shadow: inset 0 0 0 9px rgba(246, 233, 228, 0.04); }
.c-kit-fallback i:nth-child(2) { left: 58.5%; top: 43.5%; width: 17vmin; height: 17vmin; }
.c-kit-fallback i:nth-child(3) { left: 67.5%; top: 34.5%; width: 14.5vmin; height: 14.5vmin; }
.c-kit-fallback i:nth-child(4) { left: 77.5%; top: 33.5%; width: 16vmin; height: 16vmin; }
.c-kit-fallback i:nth-child(5) {
  left: 87.5%; top: 46%; width: 23.5vmin; height: 23.5vmin;
  border-color: rgba(255, 170, 60, 0.3);
  background: radial-gradient(circle, rgba(255, 170, 60, 0.1), transparent 72%);
  box-shadow: inset 0 0 0 14px rgba(255, 170, 60, 0.05);
}

/* ---- mobile: kit sobe para a área livre acima do texto ---- */
@media (max-width: 820px) {
  .t-bateria .c-hero {
    background: radial-gradient(ellipse 64% 30% at 50% 25%, rgba(240, 90, 60, 0.1), transparent 72%);
  }
  .c-kit-fallback i:nth-child(1) { left: 50%; top: 34.5%; width: 33vw; height: 33vw; }
  .c-kit-fallback i:nth-child(2) { left: 26%; top: 21.5%; width: 19vw; height: 19vw; }
  .c-kit-fallback i:nth-child(3) { left: 42%; top: 12.5%; width: 16vw; height: 16vw; }
  .c-kit-fallback i:nth-child(4) { left: 61.5%; top: 12%; width: 17.5vw; height: 17.5vw; }
  .c-kit-fallback i:nth-child(5) { left: 80%; top: 22.5%; width: 25vw; height: 25vw; }
}