/* ═══════════════════════════════════════════════════════════════════
   ASTRO 360 v2 — bands.css
   BANDAS ALTERNADAS — 15 seções com void ↔ rich + transições suaves
   ═══════════════════════════════════════════════════════════════════
   Estratégia:
   - Cada section recebe `data-band="dark"` ou `data-band="light"`
   - Bandas escuras: background = --lilas-void
   - Bandas claras: background = --lilas-rich (mais elevado)
   - Transição: gradiente nas bordas top/bottom de cada banda
   - Cards glass continuam funcionando porque o blur lê o fundo
   ═══════════════════════════════════════════════════════════════════ */

/* Reset: zera os backgrounds antigos que poderiam conflitar */
section[data-band] { background: transparent !important; }
section[data-band].comparacao,
section[data-band].vozes,
section[data-band].capitulos,
section[data-band].unico,
section[data-band].paraquem,
section[data-band].yaz,
section[data-band].aruanda,
section[data-band].planos,
section[data-band].autopromo,
section[data-band].diferencial { background: transparent !important; }

/* ─── BANDA ESCURA (void) ─────────────────────────────── */
section[data-band="dark"] {
  position: relative;
}
section[data-band="dark"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      var(--lilas-void) 14%,
      var(--lilas-void) 86%,
      transparent 100%
    );
  pointer-events: none;
}

/* ─── BANDA MÉDIA (rich) ──────────────────────────────── */
section[data-band="light"] {
  position: relative;
}
section[data-band="light"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      var(--lilas-rich) 14%,
      var(--lilas-rich) 86%,
      transparent 100%
    );
  pointer-events: none;
}

/* ─── GLOW LATERAL ÚNICO POR BANDA CLARA ──────────────── */
/* Adiciona variação sutil de cor — cada banda clara tem um glow diferente */
section[data-band="light"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}

/* Glows posicionados diferente em cada banda clara — alterna lados */
section[data-band="light"]:nth-of-type(odd)::after {
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(167, 139, 250, 0.18),
    transparent 55%
  );
}
section[data-band="light"]:nth-of-type(even)::after {
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(232, 198, 104, 0.12),
    transparent 55%
  );
}

/* ─── GLOW NAS BANDAS ESCURAS (mais sutil) ────────────── */
section[data-band="dark"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
}
section[data-band="dark"]:nth-of-type(odd)::after {
  background: radial-gradient(
    ellipse at 70% 30%,
    rgba(54, 32, 90, 0.4),
    transparent 60%
  );
}
section[data-band="dark"]:nth-of-type(even)::after {
  background: radial-gradient(
    ellipse at 30% 70%,
    rgba(54, 32, 90, 0.35),
    transparent 60%
  );
}

/* ─── HERO E FINAL CTA mantém background próprio ──────── */
/* Hero não recebe data-band (mantém o cosmos das estrelas/SVGs originais) */
.final-cta {
  background: radial-gradient(ellipse at center, rgba(54, 32, 90, 0.6) 0%, transparent 70%) !important;
}
.final-cta::before, .final-cta::after { display: none !important; }

/* Footer mantém */
footer { background: rgba(10, 4, 25, 0.7) !important; }

/* ─── DIVISOR ORNAMENTAL ENTRE BANDAS (linha luminosa) ── */
section[data-band] + section[data-band]::before {
  /* Mantém o background mas adiciona uma linha de transição */
}

/* Linha luminosa fina entre cada seção (decorativa, sutil) */
section[data-band]::marker { display: none; }

/* ─── AJUSTES FINOS DE LEGIBILIDADE ────────────────────── */
/* Garante que cards glass tenham contraste mínimo em qualquer banda */
section[data-band="dark"] .dif-card,
section[data-band="dark"] .voz-card,
section[data-band="dark"] .promo-card,
section[data-band="dark"] .cap-item,
section[data-band="dark"] .tech-card,
section[data-band="dark"] .faq-item,
section[data-band="dark"] .plano-card,
section[data-band="dark"] .paraquem-col {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 198, 104, 0.15);
}

section[data-band="light"] .dif-card,
section[data-band="light"] .voz-card,
section[data-band="light"] .promo-card,
section[data-band="light"] .cap-item,
section[data-band="light"] .tech-card,
section[data-band="light"] .faq-item,
section[data-band="light"] .plano-card,
section[data-band="light"] .paraquem-col {
  background: rgba(10, 4, 25, 0.35);
  border-color: rgba(232, 198, 104, 0.22);
}

section[data-band="light"] .dif-card:hover,
section[data-band="light"] .voz-card:hover,
section[data-band="light"] .promo-card:hover,
section[data-band="light"] .cap-item:hover,
section[data-band="light"] .tech-card:hover,
section[data-band="light"] .faq-item:hover,
section[data-band="light"] .plano-card:hover {
  border-color: rgba(232, 198, 104, 0.4);
  background: rgba(10, 4, 25, 0.5);
}

/* Compara-table em banda clara */
section[data-band="light"] .compara-table-wrap {
  background: rgba(10, 4, 25, 0.35);
  border-color: rgba(232, 198, 104, 0.22);
}

/* Amostra-card em banda clara */
section[data-band="light"] .amostra-card {
  background: rgba(10, 4, 25, 0.4);
  border-color: rgba(232, 198, 104, 0.3);
}

/* ─── COSMOS GRID mais visível nas bandas claras ──────── */
/* A grade fica mais sutil nas claras (efeito tech editorial) */
section[data-band="light"] {
  background-image:
    linear-gradient(rgba(232, 198, 104, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 198, 104, 0.018) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
}