/* =====================================================================
   ESTILO DO SITE - DJ Fabio M Santorini + Rádio Pirata Neon
   Para mudar as cores, altere apenas os valores em  :root  abaixo.
   ===================================================================== */

:root{
  /* Cores principais (troque os códigos hexadecimais se quiser) */
  --bg:            #06060f;
  --bg-2:          #0b0a1c;
  --bg-3:          #100d26;
  --surface:       rgba(255,255,255,.045);
  --surface-2:     rgba(255,255,255,.075);
  --border:        rgba(255,255,255,.12);

  --text:          #f3f1ff;
  --muted:         #b3aed0;

  --neon-cyan:     #00e5ff;
  --neon-violet:   #a855ff;
  --neon-pink:     #ff2bd6;
  --neon-amber:    #ffc857;

  --grad-neon: linear-gradient(100deg, var(--neon-cyan), var(--neon-violet) 48%, var(--neon-pink));

  --radius:        18px;
  --radius-lg:     26px;
  --shadow:        0 18px 50px rgba(0,0,0,.55);
  --wrap:          1180px;
  --player-h:      82px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  padding-bottom:var(--player-h);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:"Bebas Neue","Outfit", Impact, sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.03;
  margin:0 0 .5em;
}

h1{ font-size:clamp(2.9rem, 8vw, 6rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.2rem); }
h3{ font-size:clamp(1.5rem, 3vw, 2.1rem); }
p{ margin:0 0 1em; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.kicker{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--neon-cyan);
  margin-bottom:.7rem;
}

.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.section-alt{ background:
  radial-gradient(900px 320px at 10% 0%, rgba(168,85,255,.10), transparent 60%),
  radial-gradient(900px 320px at 90% 100%, rgba(0,229,255,.09), transparent 60%),
  var(--bg-2);
  border-block:1px solid rgba(255,255,255,.05);
}

.section-head{ max-width:760px; margin-bottom:clamp(32px,5vw,54px); }
.section-sub{ color:var(--muted); font-size:1.05rem; }

/* ---------- Botões ---------- */
.btn{
  --btn-bg:var(--surface-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text);
  font:inherit; font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.3); }
.btn-lg{ padding:1rem 1.9rem; font-size:1.05rem; }

.btn-neon{
  border:0; color:#08010f;
  background:var(--grad-neon);
  box-shadow:0 10px 30px rgba(168,85,255,.35), 0 0 0 0 rgba(0,229,255,.5);
}
.btn-neon:hover{ box-shadow:0 14px 40px rgba(255,43,214,.42); }

.btn-ghost{ background:transparent; }

.dot-live{
  width:.6em; height:.6em; border-radius:50%;
  background:#ff3355; box-shadow:0 0 0 0 rgba(255,51,85,.7);
  display:inline-block; animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,51,85,.65); }
  70%{ box-shadow:0 0 0 9px rgba(255,51,85,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,51,85,0); }
}

/* ---------- Cabeçalho ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(6,6,15,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header-inner{ display:flex; align-items:center; gap:1.2rem; min-height:74px; }
.brand{ display:flex; align-items:center; gap:.75rem; flex:none; }
.brand-logo{
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 18px rgba(168,85,255,.45);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-weight:800; letter-spacing:.02em; }
.brand-text small{ color:var(--muted); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }

.nav{ display:flex; gap:.35rem; margin-left:auto; }
.nav a{
  padding:.5rem .8rem; border-radius:999px; color:var(--muted);
  font-size:.95rem; font-weight:500; transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--text); background:var(--surface); }

.btn-ouvir{ margin-left:.4rem; }

.menu-toggle{
  display:none; margin-left:auto;
  width:44px; height:40px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface);
  cursor:pointer; padding:9px 10px;
}
.menu-toggle span{ display:block; height:2px; background:var(--text); border-radius:2px; margin:4px 0; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(52px,8vw,96px) 0 clamp(60px,7vw,90px); }
.glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; pointer-events:none; }
.glow-a{ width:520px; height:520px; top:-160px; left:-120px; background:radial-gradient(circle, rgba(0,229,255,.55), transparent 65%); }
.glow-b{ width:560px; height:560px; bottom:-200px; right:-140px; background:radial-gradient(circle, rgba(255,43,214,.5), transparent 65%); }

.hero-inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1rem; border-radius:999px;
  border:1px solid rgba(0,229,255,.35);
  background:rgba(0,229,255,.08);
  color:#bdf6ff; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:1.2rem;
}

.hero h1{
  background:linear-gradient(180deg,#fff 30%, #c9b8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(168,85,255,.35);
}
.hero-sub{ color:var(--neon-amber); font-size:clamp(1.05rem,2.2vw,1.4rem); font-weight:600; margin-bottom:.9rem; }
.hero-frase{ color:var(--muted); max-width:46ch; font-size:1.05rem; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 1.5rem; }

.hero-nowplaying{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.75rem 1.1rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--border);
  font-size:.95rem; width:fit-content; max-width:100%;
}
.now-label{ color:var(--muted); }
.now-title{ font-weight:600; color:#fff; }

.hero-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1.4rem 0 0; }
.hero-tags li{
  font-size:.82rem; color:#d9d4ff;
  padding:.35rem .85rem; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
}

.hero-art{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.ring{
  position:relative; width:min(360px, 74vw); aspect-ratio:1;
  border-radius:50%; padding:10px;
  background:conic-gradient(from 0deg, var(--neon-cyan), var(--neon-violet), var(--neon-pink), var(--neon-amber), var(--neon-cyan));
  animation:spin 14s linear infinite;
  box-shadow:0 0 70px rgba(168,85,255,.4);
}
.ring img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:6px solid #06060f; animation:spin-rev 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
.hero-art-caption{ text-align:center; display:flex; flex-direction:column; }
.hero-art-caption strong{ font-size:1.1rem; }
.hero-art-caption span{ color:var(--muted); font-size:.92rem; }

/* ---------- Seção Rádio ---------- */
.radio-card{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.radio-cover{ position:relative; min-height:320px; }
.radio-cover img{ width:100%; height:100%; object-fit:cover; }
.radio-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 40%, rgba(6,6,15,.85));
}
.badge-live{
  position:absolute; top:18px; left:18px; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border-radius:999px;
  background:rgba(6,6,15,.75); border:1px solid rgba(255,51,85,.5);
  font-size:.78rem; letter-spacing:.18em; font-weight:600;
}
.radio-info{ padding:clamp(26px,4vw,46px); }
.radio-logo{ width:74px; height:74px; border-radius:16px; object-fit:cover; margin-bottom:1rem; border:1px solid var(--border); }
.radio-info p{ color:var(--muted); }

.radio-now{
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1.1rem; border-radius:14px;
  background:rgba(0,229,255,.07); border:1px solid rgba(0,229,255,.25);
  margin:1.3rem 0;
}
.radio-now small{ display:block; color:var(--muted); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.radio-now strong{ font-size:1.02rem; }
.radio-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.radio-hint{ font-size:.85rem; color:var(--muted); margin-top:1rem; }

/* ---------- Equalizador ---------- */
.eq{ display:inline-flex; align-items:flex-end; gap:3px; height:18px; }
.eq i{ width:3px; height:6px; background:var(--grad-neon); border-radius:2px; display:block; opacity:.35; }
body[data-audio="on"] .eq i{ opacity:1; animation:eq 1s ease-in-out infinite; }
body[data-audio="on"] .eq i:nth-child(2){ animation-delay:.15s; }
body[data-audio="on"] .eq i:nth-child(3){ animation-delay:.3s; }
body[data-audio="on"] .eq i:nth-child(4){ animation-delay:.45s; }
body[data-audio="on"] .eq i:nth-child(5){ animation-delay:.6s; }
@keyframes eq{ 0%,100%{ height:5px; } 50%{ height:18px; } }
.eq-static i:nth-child(2){ height:12px; }
.eq-static i:nth-child(3){ height:8px; }

/* ---------- Biografia ---------- */
.bio-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:start; }
.bio-photo{
  position:sticky; top:96px;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.bio-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.bio-photo-info{ padding:1rem 1.2rem; background:var(--bg-3); display:flex; flex-direction:column; }
.bio-photo-info strong{ font-size:1.1rem; }
.bio-photo-info span{ color:var(--muted); font-size:.9rem; }
.bio-paragrafos p{ color:#ded9f5; }
.bio-frase{
  margin:1.8rem 0 0; padding:1.1rem 1.4rem;
  border-left:4px solid;
  border-image:var(--grad-neon) 1;
  background:var(--surface); border-radius:0 14px 14px 0;
  font-style:italic; color:#efeaff; font-size:1.08rem;
}

/* ---------- Cards / Estilos ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1.1rem; }
.card{
  padding:1.6rem; border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition:transform .2s, border-color .25s, box-shadow .25s;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(0,229,255,.45); box-shadow:0 16px 40px rgba(0,229,255,.12); }
.card-ico{
  width:54px; height:54px; border-radius:16px; margin-bottom:1rem;
  display:grid; place-items:center;
  background:var(--grad-neon); color:#0a0512;
}
.card-ico svg{ width:26px; height:26px; fill:#0a0512; }
.card h3{ margin-bottom:.35rem; font-size:1.5rem; }
.card p{ color:var(--muted); margin:0; font-size:.98rem; }

/* ---------- Agenda ---------- */
.agenda{ display:flex; flex-direction:column; gap:1rem; }
.agenda-item{
  display:grid; grid-template-columns:130px 1fr auto; gap:1.4rem; align-items:center;
  padding:1.3rem 1.6rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface);
  transition:border-color .25s, transform .2s;
}
.agenda-item:hover{ border-color:rgba(168,85,255,.5); transform:translateX(4px); }
.agenda-data{
  font-family:"Bebas Neue", sans-serif; font-size:1.7rem; line-height:1;
  background:var(--grad-neon); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.agenda-item h3{ font-size:1.4rem; margin:0 0 .2rem; }
.agenda-local{ color:var(--neon-amber); font-size:.9rem; font-weight:600; }
.agenda-item p{ color:var(--muted); margin:.35rem 0 0; font-size:.95rem; }
.agenda-vazio{ color:var(--muted); }

/* ---------- Galeria ---------- */
.galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }
.galeria figure{
  margin:0; position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); cursor:pointer; aspect-ratio:1;
  background:var(--bg-3);
}
.galeria img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .3s; }
.galeria figure:hover img{ transform:scale(1.06); }
.galeria figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.4rem .9rem .8rem;
  background:linear-gradient(transparent, rgba(4,4,12,.92));
  font-size:.9rem; font-weight:600;
}

/* ---------- Vídeos ---------- */
.videos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.2rem; }
.video-card{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
}
.video-frame{ position:relative; aspect-ratio:16/9; background:#000; }
.video-frame iframe, .video-frame video{ width:100%; height:100%; border:0; display:block; }
.video-card figcaption{ padding:.85rem 1rem; font-weight:600; font-size:.95rem; }
.video-vazio{
  grid-column:1/-1; padding:2.4rem; text-align:center;
  border:1px dashed var(--border); border-radius:var(--radius); color:var(--muted);
}

/* ---------- Contato ---------- */
.contato-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.contato-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 1.6rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface);
  font-weight:600; transition:transform .2s, border-color .25s, background .25s;
}
.contato-btn:hover{ transform:translateY(-3px); border-color:rgba(0,229,255,.5); background:var(--surface-2); }
.contato-btn svg{ width:20px; height:20px; fill:var(--neon-cyan); }

/* ---------- Rodapé ---------- */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--bg-3);
  padding:2.6rem 0 calc(2.6rem + var(--player-h));
}
.footer-inner{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; }
.site-footer strong{ font-size:1.05rem; }
.site-footer p{ color:var(--muted); margin:.2rem 0 0; font-size:.9rem; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:.9rem; }
.footer-nav a{ color:var(--muted); font-size:.9rem; }
.footer-nav a:hover{ color:var(--neon-cyan); }
.footer-copy{ width:100%; color:var(--muted); font-size:.82rem; margin:0; }

/* ---------- Mini player ---------- */
.player-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  height:var(--player-h);
  display:flex; align-items:center; gap:1rem;
  padding:0 clamp(14px,3vw,28px);
  background:rgba(8,8,20,.92);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -10px 40px rgba(0,0,0,.6);
}
.player-play{
  width:56px; height:56px; flex:none; border:0; border-radius:50%;
  background:var(--grad-neon); color:#08010f; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 0 24px rgba(168,85,255,.5);
  transition:transform .18s;
}
.player-play:hover{ transform:scale(1.06); }
.player-play svg{ width:26px; height:26px; fill:#08010f; }
.player-bar[data-playing="false"] .ico-pause{ display:none; }
.player-bar[data-playing="true"] .ico-play{ display:none; }

.player-meta{ display:flex; flex-direction:column; min-width:0; flex:1; }
.player-live{ font-size:.7rem; letter-spacing:.2em; color:#ff8095; display:flex; align-items:center; gap:.4rem; }
.player-live .dot-live{ width:.45em; height:.45em; }
.player-title{
  font-weight:600; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player-eq{ height:22px; }

.player-volume{ display:flex; align-items:center; gap:.5rem; }
.volume-btn{ background:none; border:0; cursor:pointer; padding:6px; }
.volume-btn svg{ width:24px; height:24px; fill:var(--muted); }
.volume-btn.mudo svg{ fill:#6b6788; }
#volumeRange{ width:120px; accent-color:var(--neon-violet); cursor:pointer; }
.player-link svg{ width:22px; height:22px; fill:var(--muted); transition:fill .2s; }
.player-link:hover svg{ fill:var(--neon-cyan); }

/* ---------- Overlay autoplay ---------- */
.autoplay-overlay{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  background:rgba(4,4,12,.82); backdrop-filter:blur(8px);
  padding:20px;
}
.autoplay-box{
  max-width:420px; text-align:center;
  padding:2.4rem 2rem; border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(28,20,60,.95), rgba(10,8,24,.98));
  box-shadow:var(--shadow);
}
.autoplay-box img{
  width:112px; height:112px; border-radius:50%; object-fit:cover; margin:0 auto 1.2rem;
  border:2px solid rgba(0,229,255,.4); box-shadow:0 0 40px rgba(168,85,255,.5);
}
.autoplay-box h3{ font-size:1.9rem; margin-bottom:.4rem; }
.autoplay-box p{ color:var(--muted); font-size:.95rem; }
.autoplay-skip{
  display:block; margin:.9rem auto 0; background:none; border:0;
  color:var(--muted); text-decoration:underline; cursor:pointer; font:inherit; font-size:.88rem;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:130;
  display:grid; place-items:center; padding:24px;
  background:rgba(3,3,10,.93); backdrop-filter:blur(6px);
}
.lightbox figure{ margin:0; max-width:min(1000px, 92vw); }
.lightbox img{ max-height:78vh; width:auto; border-radius:14px; box-shadow:var(--shadow); }
.lightbox figcaption{ text-align:center; margin-top:.9rem; color:var(--muted); }
.lightbox-close{
  position:absolute; top:18px; right:22px;
  background:none; border:0; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer;
}

/* ---------- Utilidades ---------- */
[hidden]{ display:none !important; }

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
  .bio-grid{ grid-template-columns:1fr; }
  .bio-photo{ position:static; max-width:420px; }
  .radio-card{ grid-template-columns:1fr; }
  .radio-cover::after{ background:linear-gradient(0deg, rgba(6,6,15,.85), transparent 60%); }
}

@media (max-width:820px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:.2rem;
    padding:1rem 20px 1.4rem;
    background:rgba(8,8,20,.98); border-bottom:1px solid var(--border);
    display:none;
  }
  .nav.aberto{ display:flex; }
  .menu-toggle{ display:block; }
  .btn-ouvir{ display:none; }
  .agenda-item{ grid-template-columns:1fr; gap:.5rem; }
  .player-volume{ display:none; }
  #volumeRange{ width:70px; }
}

@media (max-width:520px){
  .hero-actions .btn, .radio-actions .btn{ width:100%; }
  .player-eq{ display:none; }
  .brand-text small{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}