/* =========================================================
   WebRádio — tema "Ultimate-like" (implementação original)
   Tokens extraídos por medição do layout de referência
   ========================================================= */

:root{
  --accent:#9968EB;
  --accent-dark:#7f4fd6;
  --accent-soft:#efe7fd;
  --ink:#121212;
  --ink-2:#363636;
  --muted:#6b6b6b;
  --faint:#9a9a9a;
  --line:#ececf2;
  --soft:#f6f6f6;
  --white:#fff;
  --radius:4px;
  --player-h:100px;
  --container:1100px;
  --font-ui:"Open Sans",Verdana,Geneva,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-title:"Bebas Neue",Arial,Helvetica,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-top:var(--player-h);
  background:var(--white);
  color:var(--ink);
  font:14px/1.55 var(--font-body);
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 18px}

/* ---------- barra do player (fixa) ---------- */
.playerbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--player-h);
  background:var(--white);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  overflow:hidden;
}
.playerbar__rings{
  position:absolute;left:50%;top:50%;
  width:340px;height:340px;transform:translate(-50%,-50%);
  pointer-events:none;opacity:.9;
}
.playerbar__rings span{
  position:absolute;inset:0;border:1px solid rgba(153,104,235,.28);border-radius:50%;
}
.playerbar__rings span:nth-child(1){inset:0}
.playerbar__rings span:nth-child(2){inset:34px;border-color:rgba(153,104,235,.20)}
.playerbar__rings span:nth-child(3){inset:74px;border-color:rgba(153,104,235,.14)}
.playerbar__rings.is-live span{animation:ripple 3.6s ease-out infinite}
.playerbar__rings.is-live span:nth-child(2){animation-delay:.6s}
.playerbar__rings.is-live span:nth-child(3){animation-delay:1.2s}
@keyframes ripple{
  0%{transform:scale(.94);opacity:.85}
  100%{transform:scale(1.12);opacity:0}
}

.playerbar__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container);margin:0 auto;padding:0 18px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}

/* tocando agora */
.now{display:flex;align-items:center;gap:14px;min-width:0}
.now__cover{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-soft) center/cover no-repeat;
  border:1px solid var(--line);
  position:relative;
}
.now__cover::after{
  content:"";position:absolute;inset:50% auto auto 50%;width:10px;height:10px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--white);
  box-shadow:0 0 0 2px rgba(153,104,235,.35);
}
.now__txt{min-width:0}
.now__label{
  display:block;font:600 10px/1 var(--font-ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px;
}
.now__track{
  display:block;font:400 13px/1.3 var(--font-body);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;
}

/* controles */
.controls{display:flex;align-items:center;gap:14px}
.ctrl{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--accent);
  transition:background .18s,color .18s;
}
.ctrl:hover{background:var(--accent-soft)}
.ctrl svg{width:20px;height:20px;fill:currentColor}
.ctrl--main{
  width:56px;height:56px;border-radius:6px;
  background:var(--accent);color:var(--white);
  box-shadow:0 6px 18px rgba(153,104,235,.35);
}
.ctrl--main:hover{background:var(--accent-dark);color:#fff}
.ctrl--main svg{width:22px;height:22px}

/* volume */
.vol{display:flex;align-items:center;gap:8px}
.vol input[type=range]{
  -webkit-appearance:none;appearance:none;width:74px;height:4px;border-radius:2px;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat #e7e2f5;
  background-size:70% 100%;outline:none;
}
.vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--accent);cursor:pointer;
}

/* lojas */
.stores{display:flex;justify-content:flex-end;gap:6px}
.stores a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#4a4a4a;transition:.2s;
}
.stores a:hover{color:var(--accent);background:var(--accent-soft)}
.stores svg{width:19px;height:19px;fill:currentColor}

/* ---------- header / logo / nav ---------- */
.sitehead{background:var(--white)}
.headrow{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 18px 14px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:62px;width:auto}
.brand__img{height:62px;width:auto}

/* cartão "no comando" */
.onair{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:6px;
  background:var(--white);
  box-shadow:0 8px 22px rgba(20,20,40,.07);
  padding:8px 8px 8px 10px;min-width:262px;
}
.onair__cover{
  width:46px;height:46px;border-radius:4px;flex:0 0 auto;
  background:var(--accent) center/cover no-repeat;
}
.onair__body{flex:1;min-width:0}
.onair__label{
  display:block;font:600 9px/1 var(--font-ui);letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px;
}
.onair__show{
  display:block;font:600 13px/1.2 var(--font-body);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.onair__time{
  display:block;font:400 10px/1.4 var(--font-ui);color:var(--muted);margin-top:2px;
}
.onair__go{
  width:34px;height:52px;border-radius:4px;flex:0 0 auto;
  background:var(--accent);color:#fff;display:grid;place-items:center;
}
.onair__go:hover{background:var(--accent-dark);color:#fff}
.onair__go svg{width:14px;height:14px;fill:currentColor}

/* nav */
.mainnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mainnav ul{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:26px;padding:13px 18px;
}
.mainnav a{
  font:400 12.5px/1 var(--font-ui);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.mainnav a:hover{color:var(--accent)}
.menubtn{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:#e9e4f7;overflow:hidden}
.hero__slide{display:none}
.hero__slide.is-active{display:block}
.hero img{
  width:100%;height:auto;aspect-ratio:1920/530;object-fit:cover;
  max-height:530px;
}
.hero__nav{
  position:absolute;top:0;bottom:0;width:76px;display:grid;place-items:center;
  color:#fff;opacity:.85;transition:.2s;font-size:44px;line-height:1;
}
.hero__nav:hover{opacity:1;background:rgba(0,0,0,.04)}
.hero__nav--prev{left:0}
.hero__nav--next{right:0}

/* ---------- faixa de publicidade ---------- */
.adstrip{padding:26px 0}
.adstrip__box{
  border:1px dashed #dcdce6;background:#fcfcfe;border-radius:4px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 22px;
}
.adstrip__title{
  font-family:var(--font-title);font-size:32px;line-height:1;
  text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px;
}
.adstrip__title em{font-style:normal;color:var(--accent)}
.adstrip__hint{font:400 12px/1.5 var(--font-ui);color:var(--muted);max-width:420px}
.adstrip__arrows{display:flex;gap:14px;color:var(--accent);font-size:18px}

/* ---------- títulos de seção ---------- */
.sectitle{
  margin:0 0 8px;text-align:center;
  font-family:var(--font-title);font-weight:500;
  font-size:38px;line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:#363636;
}
.sectitle::after{
  content:"";display:block;width:62px;height:3px;background:var(--accent);
  margin:12px auto 0;
}
.sectitle--left{text-align:left}
.sectitle--left::after{margin:10px 0 0}

/* ---------- últimas notícias (4 cards) ---------- */
.newsblock{padding:28px 0 34px}
.news4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;
}
.ncard{display:block}
.ncard__img{
  position:relative;overflow:hidden;border-radius:3px;background:var(--soft);
  aspect-ratio:4/3;
}
.ncard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ncard:hover .ncard__img img{transform:scale(1.04)}
.ncard__title{
  margin:10px 0 6px;font-family:var(--font-title);font-weight:500;
  font-size:20px;line-height:1.12;text-transform:uppercase;color:var(--ink-2);
}
.ncard:hover .ncard__title{color:var(--accent)}
.ncard__meta{font:400 10.5px/1 var(--font-ui);color:var(--faint)}
.newsfoot{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:26px;position:relative;
}
.newsfoot__all{
  font:400 12px/1 var(--font-ui);color:var(--muted);
  border-bottom:1px solid var(--accent);padding-bottom:4px;
}
.newsfoot__all:hover{color:var(--accent)}
.newsfoot__arrows{
  position:absolute;right:0;display:flex;
}
.newsfoot__arrows a{
  width:38px;height:30px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:16px;
}
.newsfoot__arrows a:first-child{background:#c3aef2}
.newsfoot__arrows a:hover{background:var(--accent-dark);color:#fff}

/* ---------- colunas ---------- */
.cols3{
  display:grid;grid-template-columns:250px minmax(0,1fr) 250px;
  gap:30px;padding:14px 0 40px;align-items:start;
}
.widget{margin-bottom:34px}
.wtitle{
  margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--ink);
  font-family:var(--font-title);font-weight:500;font-size:22px;line-height:1;
  text-transform:uppercase;color:var(--ink-2);
}

/* widget facebook */
.fbcard{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.fbcard img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fbcard__btn{
  position:relative;margin:10px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border-radius:3px;
  font:600 11px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
  padding:11px 12px;
}
.fbcard__btn:hover{background:var(--accent-dark);color:#fff}
.fbcard__btn svg{width:13px;height:13px;fill:currentColor}

/* mural */
.mural__item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.mural__av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--soft)}
.mural__body{min-width:0}
.mural__name{font:700 12px/1.2 var(--font-ui);color:var(--accent)}
.mural__date{font:400 9.5px/1.4 var(--font-ui);color:var(--faint)}
.mural__msg{font:400 11px/1.45 var(--font-body);color:var(--ink-2);margin:3px 0}
.mural__msg a{color:var(--accent);word-break:break-word}
.mural__pager{display:flex;gap:8px;justify-content:center;padding:12px 0 14px;font:400 11px/1 var(--font-ui);color:var(--faint)}
.mural__pager a{color:var(--faint)}
.mural__pager a.is-active{color:var(--accent);font-weight:700}

/* galeria lateral */
.minigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.minigrid img{width:100%;aspect-ratio:1;object-fit:cover}

/* botão */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border-radius:3px;
  font:600 11px/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;
  padding:12px 20px;transition:.2s;
}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn--full{display:flex;width:100%}
.btn svg{width:13px;height:13px;fill:currentColor}

/* vídeo */
.videobox{
  position:relative;background:#0d0d12;border-radius:4px;overflow:hidden;
  aspect-ratio:16/10;
}
.videobox img{width:100%;height:100%;object-fit:cover;opacity:.85}
.videobox__play{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(153,104,235,.95);
  display:grid;place-items:center;color:#fff;
}
.videobox__play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}

/* notícias (2x3) */
.newsgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 24px}
.newsgrid .ncard__img{aspect-ratio:16/10}

/* blog */
.bloglist{margin-top:6px}
.bitem{padding:16px 0;border-bottom:1px solid var(--line)}
.bitem:first-child{padding-top:0}
.bitem__img{border-radius:3px;overflow:hidden;margin-bottom:10px}
.bitem__img img{width:100%;aspect-ratio:16/7;object-fit:cover}
.bitem__title{
  margin:0 0 6px;font-family:var(--font-title);font-weight:500;
  font-size:21px;line-height:1.1;text-transform:uppercase;color:var(--ink-2);
}
.bitem:hover .bitem__title{color:var(--accent)}
.bitem__excerpt{font:400 11.5px/1.6 var(--font-body);color:var(--muted);margin:0 0 6px}

/* top 10 */
.top10__item{display:flex;align-items:center;gap:10px;padding:7px 0}
.top10__rank{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font:700 11px/1 var(--font-ui);
}
.top10__cover{width:42px;height:42px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--soft)}
.top10__body{min-width:0}
.top10__name{
  display:block;font:700 11.5px/1.2 var(--font-ui);text-transform:uppercase;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top10__artist{
  display:block;font:400 10px/1.3 var(--font-ui);color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* enquete */
.poll__q{font:600 12px/1.4 var(--font-body);color:var(--ink);margin:0 0 12px}
.poll label{
  display:flex;align-items:center;gap:9px;padding:7px 0;
  font:400 11.5px/1.3 var(--font-body);color:var(--ink-2);cursor:pointer;
}
.poll input[type=radio]{
  appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  border:2px solid #cfc9e0;flex:0 0 auto;position:relative;
}
.poll input[type=radio]:checked{border-color:var(--accent)}
.poll input[type=radio]:checked::after{
  content:"";position:absolute;inset:2px;border-radius:50%;background:var(--accent);
}
.poll__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.poll__res{font:400 10.5px/1 var(--font-ui);color:var(--muted);border-bottom:1px solid var(--accent);padding-bottom:2px}

/* eventos */
.eventcard{position:relative;border-radius:4px;overflow:hidden}
.eventcard img{width:100%;aspect-ratio:4/5;object-fit:cover}
.eventcard__txt{
  position:absolute;inset:auto 0 0 0;padding:18px 16px;
  background:linear-gradient(transparent,rgba(154,20,40,.92) 45%);
  color:#fff;
}
.eventcard__title{
  margin:0;font-family:var(--font-title);font-weight:500;font-size:30px;line-height:.95;
  text-transform:uppercase;
}
.eventcard__sub{margin:6px 0 0;font:600 9.5px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}

/* banner widget */
.bannerbox{border-radius:4px;overflow:hidden}
.bannerbox img{width:100%;aspect-ratio:1;object-fit:cover}

/* whatsapp */
.wapp{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#1fa855;color:#fff;border-radius:3px;padding:13px;
  font:600 13px/1 var(--font-ui);
}
.wapp:hover{background:#188f47;color:#fff}
.wapp svg{width:20px;height:20px;fill:currentColor}

/* ---------- galeria masonry ---------- */
.galleryblock{padding:26px 0 10px}
.masonry{
  columns:8;column-gap:4px;margin-top:26px;
}
.masonry img{
  width:100%;margin:0 0 4px;border-radius:2px;break-inside:avoid;
}
.masonry img:nth-child(3n){aspect-ratio:3/4;object-fit:cover}
.masonry img:nth-child(4n){aspect-ratio:1;object-fit:cover}
.masonry img:nth-child(5n){aspect-ratio:4/3;object-fit:cover}

/* ---------- app banner ---------- */
.appbanner{
  margin:34px 0 0;background:#faf8ff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.appbanner__inner{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:22px 18px;max-width:var(--container);margin:0 auto;
}
.appbanner__title{
  margin:0 0 6px;font-family:var(--font-title);font-weight:500;font-size:44px;line-height:.95;
  text-transform:uppercase;color:var(--ink-2);
}
.appbanner__title em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c69bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.appbanner__txt{font:400 11.5px/1.6 var(--font-ui);color:var(--muted);max-width:420px;margin:0}
.appbanner__art{display:flex;gap:8px;align-items:center}
.appbanner__art img{width:104px;border-radius:10px;box-shadow:0 10px 26px rgba(120,80,200,.22)}

/* ---------- rodapé ---------- */
.sitefoot{background:var(--white);padding-top:34px}
.footgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  padding-bottom:30px;
}
.footgrid .wtitle{font-size:20px}
.footmenu li{margin-bottom:9px}
.footmenu a{font:400 12px/1 var(--font-ui);color:var(--ink-2)}
.footmenu a:hover{color:var(--accent)}
.social{display:flex;gap:14px}
.social a{color:#3a3a3a}
.social a:hover{color:var(--accent)}
.social svg{width:22px;height:22px;fill:currentColor}
.pedido .btn{padding:15px 18px}
.foottext{font:400 11px/1.75 var(--font-body);color:var(--muted);margin:0}
.copyright{
  background:var(--soft);border-top:1px solid var(--line);
  padding:14px 18px;
}
.copyright__inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:400 11px/1 var(--font-ui);color:var(--ink-2);
}
.copyright__mark{color:var(--accent);font-size:22px;line-height:1}

/* ---------- responsivo ---------- */
@media (max-width:1000px){
  .cols3{grid-template-columns:1fr}
  .news4{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:4}
  .now__track{max-width:180px}
  .stores{display:none}
}

@media (max-width:760px){
  :root{--player-h:88px}
  .playerbar__inner{grid-template-columns:1fr auto;gap:8px}
  .now__track{max-width:150px}
  .vol{display:none}
  .playerbar__rings{width:320px;height:320px}
  .ctrl--main{width:48px;height:48px}
  .headrow{padding:12px 18px;flex-wrap:wrap}
  .brand img,.brand__img{height:46px}
  .onair{min-width:0;width:100%;order:3}
  .mainnav{display:none}
  .mainnav.is-open{display:block}
  .mainnav.is-open ul{flex-direction:column;gap:0;padding:6px 18px 12px}
  .mainnav.is-open li{border-bottom:1px solid var(--line);padding:10px 0}
  .menubtn{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--line);border-radius:4px;padding:9px 12px;
    font:600 10.5px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  }
  .hero img{height:210px;aspect-ratio:auto}
  .hero__nav{width:42px;font-size:30px}
  .adstrip__box{flex-direction:column;align-items:flex-start;gap:8px}
  .adstrip__title{font-size:24px}
  .sectitle{font-size:30px}
  .news4{grid-template-columns:1fr}
  .newsgrid{grid-template-columns:1fr}
  .masonry{columns:3}
  .appbanner__inner{flex-direction:column;align-items:flex-start}
  .appbanner__title{font-size:32px}
  .footgrid{grid-template-columns:1fr;gap:24px}
  .newsfoot__arrows{position:static}
}

.ctrl.is-muted{opacity:.45}