/* === DuoSync v11 — Dark + Purple com hero via CSS (sem texto na imagem) === */
:root{ --bg:#0a0a0a; --panel:#0f0f12; --line:#212128; --text:#ffffff; --muted:#bdbdd2; --purple:#7c3aed; --purple-600:#6d28d9; }
html,body{height:100%}
body{margin:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text)}
a{color:#fff; text-decoration:none}
header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; max-width:1180px; margin:0 auto}
header .brand{display:flex; align-items:center; gap:12px}
header img.logo{height:44px}
header .name{font-weight:800; letter-spacing:.25em}
main{max-width:1180px; margin:0 auto; padding:24px 20px}

.hero{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); min-height:52vh; display:flex; align-items:center; justify-content:center; text-align:center}
.hero::before{content:""; position:absolute; inset:0; background:url('assets/img/hero-dj.png') center/cover no-repeat center/cover no-repeat; filter:brightness(.6) saturate(1.05)}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% 10%, rgba(124,58,237,.35), transparent 60%), linear-gradient(0deg, rgba(16,16,20,.35), rgba(16,16,20,.35)); pointer-events:none}
.hero .inner{position:relative; padding:32px 20px; max-width:900px}
.hero h1{font-size:44px; letter-spacing:.06em; margin:0 0 10px}
.hero p.lead{opacity:.92; max-width:720px; margin:0 auto}

.cta{margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{padding:12px 18px; border-radius:999px; border:1px solid #3a3a46; background:rgba(16,16,20,.6); backdrop-filter:blur(6px); color:#fff; display:inline-block; transition:all .2s ease; cursor:pointer}
.btn:hover{transform:translateY(-1px); border-color:#4a4a56}
.btn--primary{background:linear-gradient(135deg,var(--purple),var(--purple-600)); border-color:transparent}

.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px}
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.gallery img{width:100%; border-radius:12px; border:1px solid var(--line)}
.event-list{display:grid; gap:12px}
.event-list .item{display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:12px; background:#0f0f12}
.event-list .item img{width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.event-list .meta{opacity:.8}

footer{max-width:1180px; margin:28px auto 60px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:#bdbdd2}

/* Responsivo */
@media (max-width:1024px){ .hero h1{font-size:36px} header{flex-direction:column; text-align:center} .cta{flex-direction:column; align-items:center} .btn{width:100%; max-width:340px} }
@media (max-width:768px){ main{padding:16px} .hero{min-height:56vh} .hero h1{font-size:30px} .gallery{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .event-list .item{flex-direction:column; align-items:flex-start} .event-list .item img{width:100%; height:auto} .hero::before{background-attachment:scroll} }
@media (max-width:480px){ .hero h1{font-size:26px} p, label, input, textarea, button { font-size:0.95rem } footer{flex-direction:column; gap:8px; text-align:center} }