:root{
  --bg:#0b0f1a; --text:#e5e7eb; --muted:#9ca3af; --accent:#39ff14; --btn:rgba(255,255,255,.08); --top:#0b0f1a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;min-height:100%}
a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:16px}
.header{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--top);border-radius:12px;padding:8px 12px;border:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px}
.brand .title{font-weight:800;font-size:18px}
.badge{font-size:11px;color:var(--muted)}
.actions{display:flex;gap:8px}
.btn{border:1px solid var(--accent);padding:8px 12px;border-radius:999px;background:transparent;color:var(--accent);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.logo-top{display:flex;align-items:center;justify-content:center;margin:12px 0 10px 0}
.logo-top img{height:76px;width:76px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:#111;box-shadow:0 0 20px rgba(57,255,20,.25)}
.banner{margin:10px 0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--btn);position:relative}
.slider {
  position: relative;
  width: 100%;               /* ocupa toda a largura disponível */
  max-width: 300px;          /* limite máximo */
  aspect-ratio: 300 / 130;   /* mantém proporção correta */
  margin: 0 auto;            /* centraliza no app */
  overflow: hidden;
  border-radius: 10px;       /* cantos arredondados (opcional) */
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* cobre sem distorcer */
  border-radius: 10px;
}

/* 🔹 Responsivo: ocupa a tela toda no celular mantendo a proporção */
@media (max-width: 600px) {
  .slider {
    width: 100%;
    max-width: none;          /* ignora limite de 300px */
    aspect-ratio: 300 / 130;
  }
}


.arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:none;border-radius:12px;padding:6px 10px;cursor:pointer;z-index:2}
.arrow.left{left:8px}.arrow.right{right:8px}

.player-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));margin-top:8px}
.controls{display:flex;align-items:center;gap:12px}
.play{width:66px;height:66px;border-radius:16px;border:none;background:var(--accent);color:#0b0f1a;font-weight:900;font-size:18px;cursor:pointer;box-shadow:0 0 16px rgba(57,255,20,.35)}
.meta{display:flex;flex-direction:column;gap:4px}
.meta .now{font-weight:800}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.social-btn{display:flex;align-items:center;gap:8px;padding:12px;border-radius:14px;background:var(--btn);border:1px solid rgba(255,255,255,.08);cursor:pointer}
.social-btn i{font-size:18px; filter: drop-shadow(0 0 4px rgba(255,255,255,.12));}
.cta,.tv-cta{margin-top:12px}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#111827;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);display:none}
audio{width:100%;display:none}
footer{opacity:.8;font-size:12px;margin:20px 0}
video{width:100%;max-width:980px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#000}
.back{display:inline-block;margin:10px 0;border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:10px}

/* Popup image */
#popupOverlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:50}
#popupOverlay .box{background:#000;border:1px solid rgba(255,255,255,.15);padding:4px;border-radius:12px;max-width:min(92vw,620px)}
#popupOverlay img{max-width:100%;height:auto;display:block;border-radius:10px}
#popupClose{display:block;margin:8px auto 0 auto;border:1px solid rgba(255,255,255,.2);background:#111;color:#eee;padding:8px 12px;border-radius:10px;cursor:pointer}

/* Slide social icon badge */
.slide-badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);padding:6px 8px;border-radius:10px;display:flex;align-items:center;gap:6px}
.slide-badge i{font-size:16px;filter: drop-shadow(0 0 4px rgba(255,255,255,.2));}
.ads-vertical{
  margin: 10px auto 20px;
  width: 100%;
  max-width: 360px;
  height: 220px;
  overflow: hidden;
  border-radius: 14px;
  background: #0b0f1a;
  box-shadow: 0 0 15px rgba(0,0,0,.6);
}

./* =======================
   CARROSSEL DE ANÚNCIOS (SITE)
   ======================= */
.ads-vertical {
    width: 100%;
    max-width: 360px;
    height: 260px;
    margin: 12px auto 20px;
    overflow: hidden;
    border-radius: 14px;
    background: #0b0f1a;
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    position: relative;
}

.ads-track {
    display: flex;
    flex-direction: row;
    transition: transform .6s ease-in-out;
    will-change: transform;
}

.ads-item {
    min-width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 5;
}

.ads-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 12px;
    pointer-events: none;
}
.programacao-box{
  display:flex;
  align-items:center;
  gap:10px;
}

.programacao-box img{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
}

.prog-meta{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.prog-programa{
  font-weight:600;
  font-size:14px;
}

.prog-locutor{
  font-size:12px;
  opacity:.8;
}