/* ============================================================
   Repertório Certo — camada de tema
   Carrega DEPOIS do <style> de cada página, então manda no visual.
   Mexer só aqui pra mudar a cara do sistema inteiro.
   ============================================================ */

:root {
  --rc1: #E8392A;
  --rc2: #F4823A;
  --grad: linear-gradient(135deg, #E8392A 0%, #F4823A 100%);
  --marca: #F4823A;

  --bg: #100c0b;
  --card: rgba(255, 255, 255, .035);
  --card2: rgba(255, 255, 255, .055);
  --borda: rgba(255, 255, 255, .085);
  --borda-forte: rgba(255, 255, 255, .16);
  --texto: #f6f1ee;
  --sub: #a2938c;

  --verde: #34c07d;
  --verm: #f0574d;
  --azul: #6aa6f5;

  --r: 14px;
  --r-sm: 10px;
  --sombra: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.8);
  --glow: 0 6px 20px -6px rgba(232, 57, 42, .55);
}

/* ——— base ——— */

body {
  /* brilho ambiente da marca no topo — tira o ar de "página chapada".
     Feito no próprio background do body (não em ::before) pra não criar
     contexto de empilhamento e não atrapalhar modais/barras fixas. */
  background-color: var(--bg);
  background-image:
    radial-gradient(52% 38% at 22% 0%, rgba(232, 57, 42, .17), transparent 72%),
    radial-gradient(48% 34% at 82% 2%, rgba(244, 130, 58, .14), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--texto);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}

::selection { background: rgba(244, 130, 58, .3); }

* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 9px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ——— cabeçalho de vidro ——— */

header {
  background: rgba(16, 12, 11, .72) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--borda);
  padding: 13px 18px;
}
header h1 {
  font-weight: 650;
  letter-spacing: -.02em;
}
.selo {
  filter: drop-shadow(0 3px 10px rgba(232, 57, 42, .5));
}

/* ——— navegação: indicador em gradiente ——— */

nav {
  background: rgba(16, 12, 11, .72) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--borda);
}
nav button {
  position: relative;
  border-bottom: none !important;
  transition: color .18s ease;
  font-weight: 500;
}
nav button:hover { color: var(--texto); }
nav button::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--grad);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
nav button.ativa {
  color: var(--texto);
  font-weight: 650;
}
nav button.ativa::after { transform: scaleX(1); }

/* ——— sub-navegação (abas dentro de uma aba) ——— */

.subnav {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.subnav button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  /* Inativo tem superfície própria: precisa ler como botão clicável,
     não como aba apagada. O ativo se distingue pelo gradiente. */
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--borda-forte);
  color: var(--texto);
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.subnav button:hover:not(.ativa) {
  background: rgba(244, 130, 58, .14);
  border-color: rgba(244, 130, 58, .55);
  color: var(--marca);
  transform: translateY(-1px);
}
.subnav button.ativa {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow);
}
.subtela { display: none; }
.subtela.ativa { display: block; }

/* ——— banner fixo (Camping RC) ——— */

.banner {
  position: relative;
  border-radius: var(--r);
  margin-bottom: 16px;
  overflow: hidden;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px -18px rgba(232,57,42,.55);
  color: #fff;
}
.banner-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Véu em gradiente da marca: a foto respira à direita e o texto fica legível
   à esquerda, sem depender da sorte de onde o céu está claro. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(232,57,42,.94) 0%, rgba(232,57,42,.80) 34%, rgba(244,130,58,.42) 60%, rgba(244,130,58,.06) 100%),
    linear-gradient(0deg, rgba(0,0,0,.35) 0%, transparent 45%);
}
.banner-conteudo {
  position: relative;
  z-index: 1;
  padding: 18px 22px;
  max-width: 74%;
}
.banner-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  margin-bottom: 8px;
}
.banner-titulo {
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.banner-data {
  font-size: 1rem;
  font-weight: 600;
  opacity: .95;
  margin-top: 2px;
}
.banner-preco {
  margin-top: 8px;
  font-size: .95rem;
  white-space: nowrap;
}
.banner-preco b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.banner-preco span { opacity: .88; font-size: .85rem; }

@media (max-width: 560px) {
  .banner-conteudo { max-width: 100%; padding: 15px 17px; }
  .banner-titulo { font-size: 1.35rem; }
  .banner::after {
    background:
      linear-gradient(180deg, rgba(232,57,42,.55) 0%, rgba(232,57,42,.9) 55%, rgba(232,57,42,.96) 100%);
  }
}

/* ——— painel do membro: cartões de número ——— */

.gridNum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.caixaNum {
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  text-align: center;
}
.caixaNum .num {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.caixaNum .rot {
  font-size: .72rem;
  color: var(--sub);
  margin-top: 3px;
  line-height: 1.3;
}

/* ——— termo de consentimento e caixas de marcar ——— */

.termo {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  margin-top: 14px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--sub);
  max-height: 160px;
  overflow-y: auto;
}
.chk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 11px;
  font-size: .9rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--texto);
}
.chk input { width: 20px; height: 20px; flex: none; accent-color: var(--rc1); }

/* ——— cartões com profundidade ——— */

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 15px;
  transition: border-color .18s ease, transform .18s ease;
  animation: surge .18s ease both;
}
.card:hover { border-color: var(--borda-forte); }

@keyframes surge {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

.modal .caixa {
  background: #1a1413;
  border: 1px solid var(--borda-forte);
  border-radius: 18px;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.9);
}
.modal { backdrop-filter: blur(6px); background: rgba(0,0,0,.6) !important; }

dialog {
  background: #1a1413 !important;
  border: 1px solid var(--borda-forte) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.9);
}
dialog::backdrop { backdrop-filter: blur(6px); background: rgba(0,0,0,.6); }

/* ——— botões ——— */

.btn, .linha-botoes button, .btnFechar button {
  border-radius: var(--r-sm);
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.btn {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--glow);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(0); filter: brightness(.95); }
.btn:disabled { box-shadow: none; }

.btn.cinza {
  background: var(--card2);
  color: var(--texto);
  border: 1px solid var(--borda);
  box-shadow: none;
  font-weight: 550;
}
.btn.cinza:hover { border-color: var(--borda-forte); background: rgba(255,255,255,.08); }

.btn.verm {
  background: rgba(240, 87, 77, .14);
  color: var(--verm);
  border: 1px solid rgba(240, 87, 77, .4);
  box-shadow: none;
}
.btn.verm:hover { background: rgba(240, 87, 77, .22); }

.btnP {
  border-radius: 9px;
  transition: border-color .18s ease, background .18s ease;
  font-weight: 550;
}
.btnP:hover { border-color: var(--borda-forte); background: rgba(255,255,255,.07); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ——— campos ——— */

input, select, textarea {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  color: var(--texto);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder, textarea::placeholder { color: rgba(162, 147, 140, .65); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marca);
  background: rgba(0, 0, 0, .38);
  box-shadow: 0 0 0 3.5px rgba(244, 130, 58, .16);
}
label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sub);
}
/* Consentimento (termo, aceites): é texto pra LER e concordar, não rótulo de
   campo — caixa alta e cinza atrapalham justamente onde a clareza importa. */
label.consent, label.consent * {
  text-transform: none;
  letter-spacing: normal;
  font-size: .88rem;
  font-weight: 400;
  color: var(--texto);
  line-height: 1.5;
}

/* ——— chips e filtros ——— */

#chipsFiltro button, .filtros button, .chips button {
  border-radius: 999px;
  transition: all .16s ease;
  font-weight: 550;
}
#chipsFiltro button:hover, .filtros button:hover, .chips button:hover {
  color: var(--texto);
  border-color: var(--borda-forte);
}
#chipsFiltro button.on, .filtros button.on, .chips button.on {
  background: rgba(244, 130, 58, .13);
  border-color: rgba(244, 130, 58, .5) !important;
  color: var(--marca) !important;
}
.chipsel {
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--borda);
}

/* ——— lista de músicas ——— */

.musica { transition: transform .16s ease; }
.musica .titulo { font-weight: 650; letter-spacing: -.015em; }
.musica .play {
  background: var(--card2);
  border: 1px solid var(--borda);
  color: var(--marca);
  transition: all .18s ease;
}
.musica .play:hover {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--glow);
  transform: scale(1.06);
}

.estrela { transition: transform .16s ease; }
.estrela:hover { transform: scale(1.18); }
.estrela.on { filter: drop-shadow(0 0 8px rgba(244, 130, 58, .7)); }

/* ——— títulos, tabelas, selos ——— */

.titulo-secao {
  color: var(--texto);
  font-weight: 680;
  font-size: .95rem;
  letter-spacing: -.015em;
}
.compositor { font-weight: 680; letter-spacing: -.015em; }

table { font-variant-numeric: tabular-nums; }
th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .68rem;
}
td, th { border-bottom: 1px solid var(--borda); }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgba(255,255,255,.035); }

.badge, .tag, .notaBadge, .fixa {
  border-radius: 999px;
  padding: 3px 9px;
  letter-spacing: .02em;
}

.valor {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.03em;
}

.linkbox {
  border-radius: var(--r-sm);
  transition: border-color .16s ease, background .16s ease;
}
.linkbox:hover { border-color: var(--marca); background: rgba(244, 130, 58, .07); }

/* ——— barras fixas ——— */

#barraSel, .btnFechar {
  background: rgba(16, 12, 11, .82) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--borda) !important;
  box-shadow: 0 -12px 32px -18px rgba(0,0,0,.9);
}

progress { border-radius: 999px; overflow: hidden; }

audio { border-radius: var(--r-sm); }

/* ——— quem prefere menos movimento ——— */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ———————————————————————————————————————————————————————————
   CELULAR — a maioria dos compositores usa o sistema pelo telefone.
   Regras globais (valem pras 5 telas que carregam este tema).
   ——————————————————————————————————————————————————————————— */

/* Nada pode empurrar a largura da página pros lados. */
html, body { max-width: 100%; overflow-x: hidden; }
/* Mídia nunca estoura o container. */
img, audio, video, iframe { max-width: 100%; }

@media (max-width: 560px) {
  main { padding: 12px 10px; }
  .card { padding: 12px; }

  /* Formulários de duas colunas viram uma só — dois campos lado a lado
     ficam apertados demais num celular. */
  .linha2 { grid-template-columns: 1fr !important; }

  /* Tabelas largas (mensalidades, ranking) rolam DENTRO da própria caixa
     em vez de estourar a tela. As estreitas (menu de pontos) só quebram
     linha normalmente e nem mostram a barra. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Abas: cada uma com a largura natural e a barra rola no dedo — melhor
     alvo de toque do que várias abas espremidas. */
  nav { scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button { flex: 0 0 auto !important; padding-left: 15px; padding-right: 15px; }

  /* Botões pequenos com alvo de toque maior e sem colar um no outro. */
  .btn.mini { padding: 8px 12px; margin: 5px 5px 0 0; }

  /* Cabeçalho compacto: em tela de celular ele gastava 3 linhas de altura
     antes do conteúdo começar. */
  header { padding: 9px 11px; gap: 8px; }
  header h1 { font-size: .95rem; line-height: 1.15; }
  header .muted, header span { font-size: .72rem; }
  header a { font-size: .78rem; }
  .selo { width: 24px; height: 24px; }

  /* Cartões de número: 2 por linha no celular (3 estouravam a largura e o
     terceiro cortava na borda). */
  .gridNum { grid-template-columns: repeat(2, 1fr); }
}

/* Telas bem estreitas (≤360px): aperta um pouco o número pra caber folgado. */
@media (max-width: 360px) {
  .caixaNum .num { font-size: 1.4rem; }
}