:root {
    --bg: #000000;
    --bg-2: #0a0a0c;
    --bg-3: #131318;
    --surface: #16161c;
    --border: #26262e;
    --text: #f2f2f5;
    --muted: #9a9aa6;
    --accent: #e11d48;       /* vermelho rock */
    --accent-2: #f59e0b;     /* ambar */
    --ok: #22c55e;
    --err: #ef4444;
    --radius: 14px;
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1140px, 92%); margin: 0 auto; }
.container.narrow { width: min(640px, 92%); }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.5rem; letter-spacing: 1px;
    text-transform: uppercase;
}
.brand span { color: var(--accent); }
.nav-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.nav-links a { color: var(--muted); font-size: .92rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-links .staff-link { border: 1px solid var(--border); padding: 6px 12px; border-radius: 8px; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 86vh;
    display: flex; align-items: center;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(225,29,72,.25), transparent 60%),
        radial-gradient(900px 500px at 10% 110%, rgba(245,158,11,.16), transparent 60%),
        var(--bg);
    overflow: hidden;
}
.hero-overlay {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,.012) 40px 80px);
    pointer-events: none;
}
.hero-content { position: relative; text-align: center; padding: 80px 0; }
.eyebrow {
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--accent-2); font-weight: 600; font-size: .82rem; margin: 0 0 14px;
}
.hero h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(3rem, 11vw, 8rem); line-height: .92; margin: 0;
    text-transform: uppercase; letter-spacing: 2px;
}
.hero h1 span { color: var(--accent); }
.lead { font-size: clamp(1rem, 2.4vw, 1.35rem); color: var(--muted); margin: 22px auto 34px; max-width: 640px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px;
    font-weight: 600; font-size: .95rem;
    padding: 13px 26px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: transform .12s, background .2s, opacity .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #f43f5e; }
.btn-primary:disabled { background: #3a2229; color: #8a6a72; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text); }
.btn-block { width: 100%; }

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--border); }
.section-title {
    font-family: var(--font-display); text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3rem); margin: 0; letter-spacing: 1px;
}
.section-title::after { content: ""; display: block; width: 60px; height: 4px; background: var(--accent); margin-top: 14px; border-radius: 2px; }
.section-sub { color: var(--muted); margin: 14px 0 34px; }

/* ---------- Ingressos ---------- */
.ticket-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
.ticket-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ticket-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; cursor: default; transition: border-color .2s;
}
.ticket-card:hover { border-color: #3a3a44; }
.ticket-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.ticket-card h3 { font-family: var(--font-display); margin: 0; text-transform: uppercase; font-size: 1.15rem; }
.ticket-card .price { color: var(--accent-2); font-weight: 700; }
.qty { display: flex; align-items: center; gap: 10px; }
.qty input {
    width: 56px; text-align: center; background: var(--bg-3); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px; padding: 8px 0; font-size: 1rem;
}
.qty-btn {
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-3); color: var(--text); font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }

.checkout-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: sticky; top: 84px; }
.checkout-box h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 8px; }
.hint { color: var(--muted); font-size: .85rem; margin: 0 0 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.field input {
    width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 11px 12px; font-size: .95rem;
}
.field input:focus { outline: none; border-color: var(--accent); }
.field-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.field-inline input { flex: 1; min-width: 200px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 11px 12px; }
.summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); margin: 10px 0 16px; }
.summary strong { font-size: 1.4rem; color: var(--accent-2); font-family: var(--font-display); }
.error-msg { color: var(--err); font-size: .88rem; min-height: 1.2em; margin: 10px 0 0; }

/* ---------- Bandas ---------- */
.band-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.band-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s, border-color .2s; }
.band-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.band-art {
    height: 170px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000));
    font-family: var(--font-display); font-size: 4.5rem; font-weight: 700; color: rgba(255,255,255,.85);
}
.band-info { padding: 16px; }
.band-card.headliner { border-color: var(--accent-2); }
.band-info .tag { display: inline-block; background: var(--accent-2); color: #000; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 8px; border-radius: 6px; margin-bottom: 8px; }
.band-info h3 { font-family: var(--font-display); margin: 0 0 4px; font-size: 1.3rem; text-transform: uppercase; }
.band-info .genre { color: var(--accent-2); font-size: .85rem; margin: 0 0 6px; }
.band-info .schedule { color: var(--muted); font-size: .85rem; margin: 0; }

/* ---------- Votacao ---------- */
.vote-list { display: grid; gap: 10px; }
.vote-item { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; }
.vote-item .song-title { font-weight: 600; }
.vote-item .song-artist { color: var(--muted); font-size: .85rem; }
.vote-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; min-width: 120px; }
.vote-bar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }
.vote-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; min-width: 64px; text-align: right; }

/* ---------- Modal PIX / checkout ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; width: min(460px, 100%); text-align: center; }
.modal-box h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 12px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.modal-actions .btn { flex: 1; }
#pix-qr { display: flex; justify-content: center; margin: 18px auto; background: #fff; padding: 14px; border-radius: 10px; width: max-content; }
.pix-copy { display: flex; gap: 8px; margin-top: 12px; }
.pix-copy input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 10px; font-size: .8rem; }
.pix-status { margin-top: 16px; font-weight: 600; }
.pix-status.waiting { color: var(--accent-2); }
.pix-status.paid { color: var(--ok); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent-2); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.dev-note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }

/* ---------- Tickets page ---------- */
.tickets-list { display: grid; gap: 20px; margin-top: 20px; }
.ticket {
    display: grid; grid-template-columns: 160px 1fr; gap: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.ticket .ticket-qr { background: #fff; padding: 16px; display: flex; align-items: center; justify-content: center; }
.ticket .ticket-body { padding: 20px 22px; }
.ticket .ticket-body h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 4px; font-size: 1.4rem; }
.ticket .ticket-meta { color: var(--muted); font-size: .9rem; margin: 2px 0; }
.ticket .ticket-meta strong { color: var(--text); }
.ticket-badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; padding: 3px 9px; border-radius: 6px; font-weight: 700; }
.ticket-badge.valid { background: rgba(34,197,94,.15); color: var(--ok); }
.ticket-badge.used { background: rgba(239,68,68,.15); color: var(--err); }
.ticket-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ticket-actions .btn { padding: 9px 16px; font-size: .82rem; }

/* ---------- Portaria / scanner ---------- */
.login-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; max-width: 420px; }
.scanner-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.gate-badge { color: var(--muted); font-size: .9rem; }
.qr-reader { width: 100%; max-width: 420px; margin: 20px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.scan-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.scan-result { border-radius: var(--radius); padding: 26px; text-align: center; border: 2px solid var(--border); }
.scan-result[hidden] { display: none; }
.scan-result.ok { border-color: var(--ok); background: rgba(34,197,94,.1); }
.scan-result.deny { border-color: var(--err); background: rgba(239,68,68,.1); }
.scan-result .scan-reason { font-family: var(--font-display); text-transform: uppercase; font-size: 1.8rem; margin: 0 0 10px; }
.scan-result.ok .scan-reason { color: var(--ok); }
.scan-result.deny .scan-reason { color: var(--err); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; text-align: center; background: var(--bg-2); }
.site-footer .brand { font-size: 1.4rem; margin-bottom: 8px; }
.site-footer p { margin: 4px 0; color: var(--muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
    .ticket-grid { grid-template-columns: 1fr; }
    .checkout-box { position: static; }
}
@media (max-width: 540px) {
    .ticket-cards { grid-template-columns: 1fr; }
    .ticket { grid-template-columns: 1fr; }
    .ticket .ticket-qr { padding: 24px; }
    .nav-links { gap: 12px; }
}