:root {
  --preto: #0b0a09;
  --painel: #17140f;
  --painel-alto: #1e1a13;
  --linha: #322c22;
  --branco: #f3ede0;
  --cinza-texto: #a89b85;
  --cinza-escuro: #6b6154;
  --ambar: #e3b34a;
  --ambar-forte: #f0c869;
  --ambar-escuro: #8a6423;
  --input-bg: #0e0c09;
  --input-placeholder: #5c5346;
  --erro: #e07a5f;
  --sucesso: #7ec66d;
}

body {
  background: var(--preto);
  color: var(--branco);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  position: relative;
}

/* textura: grao fino (SVG turbulence) + vinheta + brilho de palco no topo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(227, 179, 74, 0.14), transparent 60%),
    radial-gradient(ellipse 1200px 900px at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------- */
/* Cabecalho / logo oficial                                                */
/* ---------------------------------------------------------------------- */
.cabecalho-banda {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-banda {
  width: 220px;
  max-width: 70%;
  filter: drop-shadow(0 0 26px rgba(227, 179, 74, 0.25));
}

.tagline-banda {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cinza-texto);
}

.tagline-banda span {
  color: var(--ambar);
}

/* ---------------------------------------------------------------------- */
/* Cartao                                                                   */
/* ---------------------------------------------------------------------- */
.card-cadastro {
  background: linear-gradient(165deg, var(--painel-alto), var(--painel) 55%);
  border: 1px solid var(--linha);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--branco);
  overflow: hidden;
}

.ribbon-topo {
  background: var(--painel-alto);
  border-bottom: 2px solid var(--ambar);
  color: var(--ambar-forte);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.15rem;
  padding: 0.9rem 1rem;
}

.selo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar);
  border: 1px solid var(--ambar-escuro);
  border-radius: 999px;
  padding: 5px 14px;
}

.selo-pill .fa-star {
  font-size: 10px;
}

.titulo-form {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  color: var(--branco);
  font-size: 1.7rem;
}

.texto-intro {
  color: var(--cinza-texto);
  font-weight: 300;
  line-height: 1.6;
}

.divisor-fino {
  border: none;
  border-top: 1px solid var(--linha);
  margin: 1.25rem 0;
}

/* ---------------------------------------------------------------------- */
/* Formulario                                                               */
/* ---------------------------------------------------------------------- */
.card-cadastro .form-label {
  color: var(--cinza-texto);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.opcional-nota {
  color: var(--cinza-escuro);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95em;
}

.card-cadastro .input-group-text {
  background: var(--input-bg);
  color: var(--ambar-escuro);
  border: 1px solid var(--linha);
}

.card-cadastro .form-control {
  background: var(--input-bg);
  border: 1px solid var(--linha);
  color: var(--branco);
  font-family: 'Oswald', sans-serif;
}

.card-cadastro .form-control:focus {
  background: var(--input-bg);
  color: var(--branco);
  border-color: var(--ambar);
  box-shadow: 0 0 0 0.2rem rgba(227, 179, 74, 0.16);
}

.card-cadastro .form-control::placeholder {
  color: var(--input-placeholder);
}

.card-cadastro .form-control.is-invalid {
  border-color: var(--erro);
}

.invalid-feedback {
  color: var(--erro);
  font-weight: 500;
  font-size: 0.85rem;
}

.card-cadastro .alert-danger {
  background: rgba(224, 122, 95, 0.12);
  border: 1px solid rgba(224, 122, 95, 0.4);
  color: #f0a58e;
}

.card-cadastro .alert-success {
  background: rgba(126, 198, 109, 0.12);
  border: 1px solid rgba(126, 198, 109, 0.4);
  color: var(--sucesso);
}

/* ---------------------------------------------------------------------- */
/* Botoes                                                                    */
/* ---------------------------------------------------------------------- */
.btn-selo {
  background: linear-gradient(180deg, var(--ambar-forte), var(--ambar));
  border: none;
  color: #1a1305;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(227, 179, 74, 0.22);
}

.btn-selo:hover,
.btn-selo:focus {
  background: linear-gradient(180deg, #f5d27e, var(--ambar-forte));
  color: #1a1305;
}

.btn-selo:disabled {
  opacity: 0.7;
}

.btn-outline-claro {
  border: 1px solid var(--linha);
  color: var(--cinza-texto);
  background: transparent;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
}

.btn-outline-claro:hover {
  border-color: var(--ambar);
  color: var(--ambar);
  background: transparent;
}

/* ---------------------------------------------------------------------- */
/* Rodape                                                                    */
/* ---------------------------------------------------------------------- */
.rodape-nota {
  color: var(--cinza-escuro);
  font-family: 'Oswald', sans-serif;
  font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Pagina de compra de ingresso (promo.html)                                */
/* ---------------------------------------------------------------------- */
.promo-imagem-evento {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--linha);
}

.promo-data {
  color: var(--cinza-texto);
}

.promo-total {
  font-size: 1.15rem;
  color: var(--branco);
}

/* ---------------------------------------------------------------------- */
/* Previa do ingresso (PDF)                                                 */
/* ---------------------------------------------------------------------- */
.ingresso-preview-caixa {
  width: 100%;
  aspect-ratio: 210 / 148.5;
  border: 1px solid var(--linha);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.ingresso-preview {
  width: 100%;
  height: 100%;
  border: none;
}