/* CMWR V3.0 · mobile · 04-apoiadores */
@media (max-width: 760px){
.sponsors-scene {
    width: 100%;
    aspect-ratio: 1881 / 836;
    border-radius: 18px;
  }
.sponsor-card__desc {
    display: none;
  }
.sponsor-shelf__nav {
    display: none;
  }
}

@media (max-width:900px){
.sponsors-section{
    position:relative !important;
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:0 48px 0 0 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 42% 18%,rgba(212,76,39,.16),transparent 30%),
      linear-gradient(180deg,#2a0908,#120606 58%,#070708) !important;
  }
.sponsors-scene{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:0 !important;
    background:#1a0908 !important;
  }
.sponsors-background{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:54% center !important;
    filter:brightness(.58) saturate(.92) contrast(1.04) !important;
  }
.sponsors-scene::before{
    content:"QUEM TOCA JUNTO";
    position:absolute;
    z-index:22;
    left:6%;
    right:6%;
    top:5.5%;
    color:#f5dfb6;
    font:900 clamp(20px,7vw,34px)/.95 "Arial Black",Arial,sans-serif;
    letter-spacing:-.04em;
    text-transform:uppercase;
    text-align:center;
    text-shadow:
      0 2px 2px rgba(0,0,0,.80),
      0 0 14px rgba(255,111,47,.30);
    pointer-events:none;
  }
.sponsors-scene::after{
    content:"APOIADORES • TOQUE PARA OUVIR";
    position:absolute;
    z-index:22;
    left:8%;
    right:8%;
    top:13%;
    color:rgba(245,223,182,.72);
    font:800 clamp(6px,2vw,9px)/1 Arial,sans-serif;
    letter-spacing:.16em;
    text-align:center;
    pointer-events:none;
  }
/* Para o teste mobile, o foco fica nas quatro capas principais. */
  .s04-shelf-trophy,
  .sponsor-shelf,
  .jukebox-light,
  .lp-flight{
    display:none !important;
  }
.trunk-rack{
    position:absolute !important;
    z-index:24 !important;
    left:7% !important;
    right:7% !important;
    top:22% !important;
    bottom:20% !important;
    inset-block-end:20% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    pointer-events:none !important;
  }
.trunk-card{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    border-radius:9px !important;
    overflow:hidden !important;
    border:1px solid rgba(247,214,158,.28) !important;
    background:rgba(18,8,7,.74) !important;
    box-shadow:
      0 10px 22px rgba(0,0,0,.34),
      inset 0 0 0 1px rgba(255,255,255,.025) !important;
    transform:none !important;
  }
.sponsor-card__cover{
    object-fit:cover !important;
    border-radius:8px !important;
  }
.sponsor-card__veil{
    gap:4px !important;
    padding:8px !important;
    background:linear-gradient(180deg,rgba(5,5,5,.03),rgba(5,5,5,.82)) !important;
    opacity:.16 !important;
  }
.sponsor-card:hover .sponsor-card__veil,
  .sponsor-card:focus-visible .sponsor-card__veil,
  .sponsor-card.is-playing .sponsor-card__veil{
    opacity:1 !important;
  }
.sponsor-card__play{
    width:34px !important;
    font-size:15px !important;
  }
.sponsor-card__name{
    font-size:clamp(8px,2.7vw,12px) !important;
  }
.sponsor-card__desc{
    font-size:clamp(6px,1.9vw,8px) !important;
  }
.sponsor-ad{
    position:absolute !important;
    z-index:25 !important;
    left:18% !important;
    right:18% !important;
    bottom:9% !important;
    width:auto !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:21px !important;
    border:1px solid rgba(239,188,88,.62) !important;
    background:linear-gradient(180deg,rgba(77,27,18,.94),rgba(31,12,10,.96)) !important;
    color:#ffe3a8 !important;
    text-decoration:none !important;
    box-shadow:0 6px 18px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06) !important;
    transform:none !important;
  }
.sponsor-ad span{
    transform:none !important;
    font:900 clamp(9px,2.8vw,13px)/1 Arial,sans-serif !important;
    letter-spacing:.10em !important;
  }
.jingle-stop{
    left:auto !important;
    right:5% !important;
    top:auto !important;
    bottom:8.6% !important;
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
  }
.jukebox-status{
    left:8% !important;
    right:8% !important;
    top:auto !important;
    bottom:15.5% !important;
    width:auto !important;
    min-height:18px !important;
    margin:0 !important;
    text-align:center !important;
    font-size:8px !important;
    color:rgba(245,223,182,.76) !important;
    background:rgba(15,7,6,.54) !important;
    border-radius:9px !important;
    padding:4px 7px !important;
  }
}

@media (max-width: 900px){
.sponsors-section {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 48px 0 0 !important; /* reserva o DIAL global */
    overflow: hidden !important;
    background: #1a0c08 !important;
  }
.sponsors-scene {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #1a0c08 !important;
  }
.sponsors-background--desktop {
    display: none !important;
  }
.sponsors-background--mobile {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    /*
      A versão mobile prioriza caber exatamente na janela.
      O cenário foi composto para esta orientação, por isso usamos fill.
    */
    object-fit: fill !important;
    object-position: center !important;

    filter: none !important;
    opacity: 1 !important;
    user-select: none !important;
    pointer-events: none !important;
  }
/* O título já pertence fisicamente ao quadro da imagem travada. */
  .sponsors-scene::before,
  .sponsors-scene::after {
    content: none !important;
    display: none !important;
  }
/* Elementos do cenário desktop não participam da composição mobile. */
  .s04-shelf-trophy,
  .trunk-rack,
  .sponsor-shelf,
  .sponsor-ad,
  .jukebox-light,
  .lp-flight {
    display: none !important;
  }
.mobile-tv-ui {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: block;
    pointer-events: none;
  }
/* -----------------------------------------------------
     TELA DA TV
     Coordenadas relativas à arte travada 1024 x 1536.
     ----------------------------------------------------- */
  .mobile-tv-screen {
    position: absolute;
    left: 18.7%;
    top: 34.15%;
    width: 51%;
    height: 25.35%;

    overflow: hidden;
    border-radius: 17% / 12%;

    background:
      radial-gradient(circle at 50% 42%, rgba(32,53,57,.54), rgba(5,13,16,.96) 70%),
      #091114;

    color: #f2e2bb;

    box-shadow:
      inset 0 0 22px rgba(0,0,0,.84),
      inset 0 0 7px rgba(105,187,181,.08);

    pointer-events: auto;
    isolation: isolate;
  }
/* Chuvisco propositalmente mais forte nas laterais do tubo. */
  .mobile-tv-screen::before {
    content: "";
    position: absolute;
    z-index: 8;
    inset: -8%;
    pointer-events: none;

    opacity: .24;

    background:
      radial-gradient(circle, rgba(235,245,240,.72) 0 1px, transparent 1.35px) 0 0 / 4px 3px,
      radial-gradient(circle, rgba(97,197,191,.46) 0 1px, transparent 1.4px) 2px 1px / 5px 4px,
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.08) 0 1px,
        transparent 1px 3px
      );

    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0 14%,
      rgba(0,0,0,.55) 21%,
      transparent 34% 66%,
      rgba(0,0,0,.55) 79%,
      #000 86% 100%
    );

    mask-image: linear-gradient(
      90deg,
      #000 0 14%,
      rgba(0,0,0,.55) 21%,
      transparent 34% 66%,
      rgba(0,0,0,.55) 79%,
      #000 86% 100%
    );

    animation: tv-edge-noise .32s steps(2, end) infinite;
  }
/* Scanlines muito discretas. */
  .mobile-tv-screen::after {
    content: "";
    position: absolute;
    z-index: 9;
    inset: 0;
    pointer-events: none;

    opacity: .16;

    background:
      repeating-linear-gradient(
        180deg,
        transparent 0 3px,
        rgba(0,0,0,.33) 3px 4px
      );

    mix-blend-mode: multiply;
  }
.mobile-tv-screen.is-tuning::before {
    opacity: .76;
    animation-duration: .10s;
  }
.mobile-tv-screen.is-tuning .mobile-tv-content {
    opacity: .14;
    filter: blur(1.3px) contrast(1.35);
    transform: scale(1.025);
  }
@keyframes tv-edge-noise {
    0% {
      transform: translate3d(-1%,0,0);
      background-position: 0 0, 2px 1px, 0 0;
    }
    50% {
      transform: translate3d(1%,.5%,0);
      background-position: 3px 2px, 0 3px, 0 1px;
    }
    100% {
      transform: translate3d(0,-.5%,0);
      background-position: 1px 4px, 4px 0, 0 2px;
    }
  }
.mobile-tv-channel {
    position: absolute;
    z-index: 6;
    left: 7%;
    top: 7%;

    display: grid;
    line-height: .84;
    text-shadow: 0 1px 2px #000;

    pointer-events: none;
  }
.mobile-tv-channel small {
    color: #e5d7b5;
    font: 800 clamp(6px,1.8vw,9px)/1 Arial,sans-serif;
    letter-spacing: .08em;
  }
.mobile-tv-channel strong {
    color: #efe2bd;
    font: 900 clamp(18px,6vw,34px)/.9 "Arial Black",Arial,sans-serif;
  }
.mobile-tv-content {
    position: absolute;
    z-index: 4;
    inset: 0;

    display: grid;
    place-items: center;
    padding: 8% 8% 6%;

    transition:
      opacity .14s ease,
      filter .14s ease,
      transform .14s ease;
  }
/* -----------------------------------------------------
     CANAL 01 — ANUNCIE / COLABORE
     ----------------------------------------------------- */
  .tv-ad-channel {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: minmax(0,1fr) 34%;
    gap: 5%;
    align-items: center;

    padding-top: 9%;

    color: inherit;
    text-decoration: none;
  }
.tv-ad-copy {
    align-self: center;
    text-align: left;
  }
.tv-ad-copy strong {
    display: block;
    color: #f0d5a4;

    font: 900 clamp(15px,5.2vw,29px)/.88 "Arial Black",Arial,sans-serif;
    letter-spacing: -.04em;

    text-shadow: 0 2px 2px #000;
  }
.tv-ad-copy span {
    display: block;
    margin-top: 7px;

    color: rgba(239,226,198,.82);

    font: 800 clamp(7px,2vw,10px)/1.12 Arial,sans-serif;
    text-transform: uppercase;
  }
.tv-ad-qr {
    display: grid;
    place-items: center;

    padding: 5%;

    border: 1px solid rgba(239,211,163,.44);
    border-radius: 7px;

    background: rgba(235,224,199,.94);

    box-shadow: 0 3px 10px rgba(0,0,0,.30);
  }
.tv-ad-qr img {
    display: block;
    width: 100%;
    height: auto;
  }
/* -----------------------------------------------------
     CANAIS 02–05 — APOIADORES
     ----------------------------------------------------- */
  .tv-sponsor-channel {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 47% minmax(0,1fr);
    gap: 7%;
    align-items: center;

    padding: 14% 2% 2%;

    border: 0;
    background: transparent;
    color: inherit;

    cursor: pointer;
  }
.tv-sponsor-channel img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;

    border: 1px solid rgba(238,211,161,.42);
    border-radius: 6px;

    box-shadow: 0 4px 12px rgba(0,0,0,.38);
  }
.tv-sponsor-copy {
    min-width: 0;
    text-align: left;
  }
.tv-sponsor-copy strong {
    display: block;

    color: #f1dfb5;

    font: 900 clamp(10px,3.2vw,16px)/1.02 Arial,sans-serif;

    text-shadow: 0 1px 2px #000;
  }
.tv-sponsor-copy span {
    display: block;
    margin-top: 5px;

    color: rgba(235,222,195,.76);

    font: 700 clamp(7px,1.9vw,9px)/1.18 Arial,sans-serif;
  }
.tv-sponsor-copy em {
    width: 28px;
    aspect-ratio: 1;

    display: inline-grid;
    place-items: center;

    margin-top: 8px;

    border: 1px solid rgba(242,221,181,.46);
    border-radius: 50%;

    background: rgba(0,0,0,.28);

    color: #f4dfb5;

    font: normal 10px/1 Arial,sans-serif;
  }
/* Marca aplicada por código na moldura da TV. */
  .mobile-tv-brand {
    position: absolute;
    z-index: 21;

    left: 35%;
    top: 61.15%;
    width: 27%;

    color: rgba(218,178,119,.78);

    text-align: center;

    font: 900 clamp(6px,1.8vw,9px)/1 Arial,sans-serif;
    letter-spacing: .12em;

    text-shadow: 0 1px 1px rgba(0,0,0,.85);

    pointer-events: none;
  }
/* -----------------------------------------------------
     SELETOR ANALÓGICO
     A imagem física é o próprio botão visível.
     ----------------------------------------------------- */
  .mobile-tv-dial {
    position: absolute;
    z-index: 30;

    left: 73.3%;
    top: 35.5%;
    width: 11.4%;
    height: 9.7%;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
  }
.mobile-tv-dial:active,
  .mobile-tv-dial:focus-visible {
    outline: none;

    border-color: rgba(238,189,86,.64);

    box-shadow:
      0 0 12px rgba(235,157,57,.34),
      inset 0 0 8px rgba(255,217,127,.15);
  }
/* -----------------------------------------------------
     CINCO NICHOS = SUGESTÕES DE CANAL
     ----------------------------------------------------- */
  .mobile-tv-channels {
    position: absolute;
    z-index: 24;

    left: 9.9%;
    top: 64.6%;
    width: 85.7%;
    height: 8.15%;

    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 1.45%;

    pointer-events: auto;
  }
.mobile-tv-channel-button {
    position: relative;

    min-width: 0;
    overflow: hidden;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 5px;

    background: transparent;
    color: #ead7af;

    cursor: pointer;

    opacity: .62;

    transition:
      opacity .15s ease,
      filter .15s ease,
      transform .15s ease,
      border-color .15s ease;
  }
.mobile-tv-channel-button img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position:center;
    border-radius: 2px;
  }
.mobile-tv-channel-button.is-ad {
    display: grid;
    place-items: center;

    background: rgba(19,12,10,.50);
  }
.mobile-tv-channel-button.is-ad span {
    color: #ecd4a5;

    text-align: center;

    font: 900 clamp(6px,1.6vw,8px)/1.02 Arial,sans-serif;

    text-shadow: 0 1px 2px #000;
  }
.mobile-tv-channel-button::after {
    content: attr(data-channel);

    position: absolute;
    left: 3px;
    top: 3px;

    min-width: 14px;
    height: 14px;
    padding: 0 2px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: rgba(5,7,8,.80);
    color: #efd89e;

    font: 900 6px/1 Arial,sans-serif;
  }
.mobile-tv-channel-button.is-active {
    opacity: 1;

    filter: brightness(1.08) saturate(1.06);
    transform: translateY(-1px);

    border-color: rgba(238,190,91,.72);

    box-shadow: 0 0 8px rgba(226,155,58,.22);
  }
.mobile-tv-channel-button.is-playing {
    opacity: 1;

    border-color: rgba(99,215,205,.78);

    box-shadow:
      0 0 8px rgba(99,215,205,.28),
      inset 0 0 8px rgba(99,215,205,.08);
  }
.mobile-tv-channel-button:focus-visible {
    outline: none;
    border-color: #e6b953;
    opacity: 1;
  }
/*
    STOP fica sobre um dos controles físicos da televisão.
    Só aparece enquanto uma vinheta está tocando.
  */
  .jingle-stop {
    z-index: 31 !important;

    left: 82.1% !important;
    right: auto !important;
    top: 58.35% !important;
    bottom: auto !important;

    width: 7.8% !important;
    height: auto !important;
    aspect-ratio: 1 !important;

    border-color: rgba(233,188,109,.56) !important;

    background: rgba(34,16,10,.64) !important;
    color: #e8c98f !important;

    font-size: 8px !important;
  }
.jukebox-status {
    display: none !important;
  }
}

@media (max-width:900px) and (prefers-reduced-motion: reduce){
.mobile-tv-screen::before {
    animation: none !important;
  }
.mobile-tv-screen.is-tuning .mobile-tv-content {
    filter: none !important;
    transform: none !important;
  }
}