/* CLUBE FM 87.9 | V6 — mobile fiel, compacto e utilizável.
   Estilos desktop e funções da V5 preservados.
   A imagem composta de capa continua usada no desktop; em telas pequenas,
   as imagens originais compõem um layout responsivo sem texto microscópico.
*/
@media (min-width:701px) and (max-width:900px) {
  .hero-mobile{grid-template-columns:37% 30% 33%!important;grid-template-rows:260px!important;align-items:stretch}
  .hero-mobile .studio-panel,.hero-mobile .hero-identity{height:260px!important;border-radius:0!important}
  .hero-mobile .studio-panel img{object-position:32% center}
  .hero-mobile .hero-identity img{height:auto!important;width:95%!important;max-height:165px!important}
  .hero-mobile .hero-identity p{font-size:18px!important}
  .hero-mobile .hero-app{grid-column:3!important;grid-row:1!important;min-height:0!important;height:260px!important;grid-template-columns:35% 65%!important;overflow:hidden}
  .hero-mobile .hero-app .phone{height:200px!important;max-height:245px!important;transform:rotate(-5deg) translate(-2px,18px)!important}
  .hero-mobile .hero-app-copy{padding:12px 6px 9px 0!important}
  .hero-mobile .hero-app h2{font-size:clamp(15px,2.2vw,20px)!important;line-height:1.06}
  .hero-mobile .hero-app-copy p{font-size:10px!important;line-height:1.23;margin-bottom:9px!important}
  .hero-mobile .store-buttons{gap:4px}
  .hero-mobile .store-buttons a{min-height:27px!important;padding:3px 5px!important}
  .hero-mobile .store-buttons b{font-size:9px!important}
  .hero-mobile .store-buttons small{font-size:7px!important}
}
@media (max-width:700px) {
  body{font-size:14px}
  .wrap{width:calc(100% - 24px)}
  .site-header{box-shadow:0 1px 10px rgba(19,31,49,.035)}
  .header-inner{min-height:74px!important;height:auto;gap:7px!important;padding:3px 0!important;flex-wrap:nowrap!important;justify-content:space-between}
  .brand{flex:1 1 auto;min-width:0;gap:5px!important;margin-right:2px}
  .brand>img{width:86px!important;height:70px!important;object-fit:contain;transform:none!important}
  .brand-slogan{font-size:12px!important;padding-left:7px!important;line-height:1.04;white-space:nowrap}
  .brand-slogan strong{font-size:18px!important;letter-spacing:-.5px}
  .heart-emoji{font-size:27px;top:-14px;right:-7px}
  .mobile-toggle{height:36px!important;padding:5px 8px!important;flex:0 0 auto;gap:4px!important;font-size:12px!important}
  .search-toggle{width:35px!important;height:35px!important}
  .main-nav.open{position:absolute;top:100%;left:0;right:0;width:100%;padding:9px 12px 13px;background:#fff;box-shadow:0 9px 17px #0e1a2f1a;z-index:40;grid-template-columns:repeat(4,minmax(0,1fr))}
  .main-nav.open a{min-width:0;min-height:51px}
  .hero{margin-top:8px!important;aspect-ratio:auto!important;height:auto!important;min-height:0!important;overflow:hidden!important;border-radius:17px!important;background:#ba0018}
  .hero-mobile{display:grid!important;grid-template-columns:47% 53%!important;grid-template-rows:154px 121px!important;min-height:0!important;overflow:hidden!important;border-radius:17px!important;background:linear-gradient(105deg,#950011,#e40020 45%,#980011)!important}
  .hero-mobile .studio-panel{grid-column:1;grid-row:1;height:154px!important;min-height:0!important;overflow:hidden;border-radius:0!important}
  .hero-mobile .studio-panel img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:35% center!important}
  .hero-mobile .studio-panel:after{background:linear-gradient(90deg,transparent 65%,rgba(177,0,22,.4))!important}
  .hero-mobile .hero-identity{grid-column:2;grid-row:1;display:flex!important;height:154px!important;min-height:0!important;justify-content:center!important;padding:6px 5px!important;background:radial-gradient(ellipse at 40% 50%,#f41536,#af0018 90%)!important}
  .hero-mobile .hero-identity img{display:block;width:auto!important;height:112px!important;max-width:98%!important;max-height:112px!important;object-fit:contain!important}
  .hero-mobile .hero-identity p{font-size:clamp(11px,3.65vw,15px)!important;line-height:1.06!important;white-space:nowrap!important;font-weight:850!important;text-align:center;letter-spacing:-.3px;margin:0!important}
  .hero-mobile .hero-identity .hero-swoosh{display:block!important;margin-top:4px!important;height:5px;width:45%;border-top:2px solid #ff394c}
  .hero-mobile .hero-app{grid-column:1/-1!important;grid-row:2!important;grid-template-columns:30% 70%!important;display:grid!important;min-height:0!important;height:121px!important;overflow:hidden!important;background:linear-gradient(110deg,#bc001d,#870016 92%)!important;border-top:1px solid #ffffff26}
  .hero-mobile .hero-app .phone{display:block!important;width:auto!important;height:133px!important;max-width:none!important;max-height:none!important;align-self:center!important;justify-self:center!important;transform:rotate(-5deg) translate(2px,6px)!important;filter:drop-shadow(0 4px 8px #3f001588)!important}
  .hero-mobile .hero-app-copy{align-self:center;min-width:0;padding:5px 8px 5px 0!important}
  .hero-mobile .hero-app h2{font-size:clamp(15px,4.3vw,19px)!important;line-height:1.06!important;letter-spacing:-.15px;margin:0 0 4px!important;font-weight:900}
  .hero-mobile .hero-app h2 br{display:none}
  .hero-mobile .hero-app h2 strong{display:inline;color:#ffda26;white-space:normal}
  .hero-mobile .hero-app-copy p{font-size:10px!important;line-height:1.21!important;margin:0 0 6px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-mobile .store-buttons{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;align-items:center!important}
  .hero-mobile .store-buttons a{min-height:29px!important;min-width:0!important;padding:3px 6px!important;gap:4px!important;border-radius:6px!important;flex:0 1 auto}
  .hero-mobile .store-buttons .store-symbol{font-size:15px!important}
  .hero-mobile .store-buttons b{font-size:9px!important}
  .hero-mobile .store-buttons small{font-size:7px!important}
  /* Reprodutor em uma faixa, como o modelo de desktop, com ações reais. */
  .main-player{display:flex!important;align-items:center!important;gap:5px!important;min-height:67px!important;background:white;border-radius:15px;box-shadow:var(--shadow);margin-top:9px!important;padding:6px 8px!important}
  .main-player .player-heading,.main-player .player-controls,.main-player .join-link{box-shadow:none!important;background:transparent!important;border-radius:0!important;min-width:0;min-height:0!important}
  .main-player .player-heading{flex:0 0 113px!important;display:flex;flex-direction:column;align-items:flex-start!important;gap:3px!important;padding:0 2px!important}
  .main-player .player-heading .live-pill{display:inline-block!important;border-radius:6px!important;padding:3px 6px!important;font-size:10px!important;line-height:1.1}
  .main-player .player-heading .live-icon{font-size:11px!important}
  .main-player .player-heading strong{font-size:11.5px!important;white-space:nowrap!important;line-height:1.1!important;font-weight:800}
  .main-player .player-heading div>span{display:none!important}
  .main-player .player-controls{flex:1 1 auto!important;display:flex!important;align-items:center;gap:6px!important;padding:0!important}
  .main-player .round-play{width:40px!important;height:40px!important;box-shadow:none!important}
  .main-player .round-play svg{width:18px;height:18px}
  .main-player .waveform{min-width:20px!important;height:30px!important;gap:1px!important;flex:1 1 auto!important}
  .main-player .waveform i{flex:0 0 2px;width:2px}
  .main-player .mute{padding:0!important}
  .main-player .mute svg{width:21px!important;height:21px!important}
  .main-player #volume{display:none!important}
  .main-player .join-link{flex:0 0 32px!important;width:32px!important;height:37px!important;display:grid!important;place-items:center!important;padding:0!important;gap:0!important}
  .main-player .join-link .join-symbol{width:31px!important;height:31px!important;font-size:23px!important}
  .main-player .join-link span:nth-child(2){display:none!important}
  .stream-status{font-size:10px!important;line-height:1.2!important;margin:5px 2px 3px!important;min-height:0!important}
  /* Acessos continuam na MESMA ordem do modelo em carrossel horizontal, sem grade gigante. */
  .quick-links{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;gap:7px!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:4px 2px 8px!important;margin:6px 0 12px!important}
  .quick-links::-webkit-scrollbar{display:none}
  .quick-links .quick{flex:0 0 auto!important;scroll-snap-align:start;min-height:44px!important;white-space:nowrap!important;padding:8px 12px!important;font-size:12px!important;gap:7px!important;border-radius:11px!important}
  .quick-links .quick .ui-icon{width:21px;height:21px}
  .content-columns{gap:12px!important}
  .section-heading{margin-bottom:9px!important}
  .section-heading h2{font-size:22px!important}
  .news-list{gap:9px!important}
  .news-card>a{min-height:124px!important}
  .news-photo{min-height:124px!important}
  .news-copy{padding:9px!important}
  .news-copy h3{font-size:14px!important;margin:5px 0!important}
  .news-summary{margin:0 0 5px!important}
  .floating-player{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:360px){
 .wrap{width:calc(100% - 20px)}
 .brand>img{width:74px!important;height:64px!important}
 .brand-slogan{font-size:10.5px!important}
 .brand-slogan strong{font-size:16px!important}
 .header-inner{gap:4px!important}
 .mobile-toggle{font-size:11px!important;padding:4px 6px!important}
 .search-toggle{width:33px!important;height:33px!important}
 .hero-mobile{grid-template-rows:143px 117px!important}
 .hero-mobile .studio-panel,.hero-mobile .hero-identity{height:143px!important}
 .hero-mobile .hero-identity img{height:104px!important}
 .hero-mobile .hero-app{height:117px!important}
 .hero-mobile .hero-app .phone{height:128px!important}
 .hero-mobile .hero-app-copy p{font-size:9.5px!important}
 .hero-mobile .store-buttons{gap:3px!important}
 .hero-mobile .store-buttons a{padding:3px 4px!important}
 .hero-mobile .store-buttons b{font-size:8px!important}
 .main-player .player-heading{flex-basis:100px!important}
 .main-player .player-heading strong{font-size:10px!important}
 .main-player .round-play{width:36px!important;height:36px!important}
 .main-player .waveform i:nth-child(2n){display:none}
}

/* Último polimento: imagens inteiras e tipografia sem cortes no player. */
@media(max-width:700px){
  .hero-mobile .hero-app .phone{height:118px!important;transform:rotate(-4deg) translate(0,0)!important}
  .main-player .player-heading{flex-basis:102px!important}
  .main-player .player-heading strong{font-size:0!important;overflow:visible;white-space:nowrap}
  .main-player .player-heading strong:after{content:"Clube FM 87,9";font-size:11px;display:block;line-height:1.1}
}
@media(max-width:360px){
  .hero-mobile .hero-app .phone{height:113px!important}
  .main-player .player-heading{flex-basis:96px!important}
  .section-heading{gap:4px!important}
  .section-heading h2{font-size:18px!important;white-space:nowrap}
  .section-heading h2:before{height:20px;width:4px;margin-right:7px}
  .section-heading>a{font-size:10px!important}
}