/* M7Radio — a rádio de balcão que toca de verdade (14/11/2026). Usada na home da M7Labs e em radio.m7labs.com.br.
   Herda as cores e letras do kit da casa (/kit/m7kit.css). Tudo que se mexe vai por JS. */
.mr { position: relative; width: 100%; max-width: 460px; padding: 22px; border-radius: 22px;
  background: linear-gradient(165deg, #2a2526, #141112 55%); border: 1px solid var(--linha2);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.mr-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mr-topo b { font: 800 1.3rem/1.1 var(--f-tit); letter-spacing: -.02em; }
.mr-topo b small { display: block; font: 500 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--txt3); margin-top: 4px; }
.mr-vivo { display: inline-flex; align-items: center; gap: 7px; font: 600 .68rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--txt3); white-space: nowrap; }
.mr-vivo i { width: 9px; height: 9px; border-radius: 50%; background: var(--grafite3); }
.mr.on .mr-vivo { color: var(--red-txt); }
.mr.on .mr-vivo i { background: var(--red2); box-shadow: 0 0 0 4px rgba(224, 67, 72, .2); }
.mr-eq { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin: 20px 0 16px; }
.mr-eq i { flex: 1; height: 100%; border-radius: 3px; background: var(--grafite3); transform-origin: 50% 100%; transform: scaleY(.08); }
.mr.on .mr-eq i { background: linear-gradient(to top, var(--red), #F0875E); }
.mr.fala .mr-eq i { background: linear-gradient(to top, #F0575E, #fff); }
.mr-agora { min-height: 64px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--linha); }
.mr-agora small { display: block; font: 500 .64rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--txt3); margin-bottom: 3px; }
.mr.fala .mr-agora { background: rgba(200, 53, 56, .18); border-color: rgba(224, 67, 72, .45); }
.mr.fala .mr-agora small { color: var(--red-txt); }
.mr-agora p { margin: 0; font: 600 1rem/1.35 var(--f-txt); }
.mr-liga { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 14px; border-radius: 999px; background: var(--red); color: #fff;
  font: 700 1.04rem var(--f-tit); letter-spacing: .01em; transition: background .22s, transform .22s var(--ease); }
.mr-liga:hover { background: var(--red2); transform: translateY(-2px); }
.mr-liga:focus-visible, .mr-rec button:focus-visible { outline: 2px solid var(--red-txt); outline-offset: 3px; }
.mr.on .mr-liga { background: rgba(255, 255, 255, .06); border: 1px solid var(--linha2); }
.mr-rec { margin-top: 16px; }
.mr-rec > small { display: block; font: 500 .64rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--txt3); margin-bottom: 8px; }
.mr-rec div { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-rec button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linha2); color: var(--txt2); font: 500 .9rem var(--f-txt); display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .2s, color .2s, background .2s; }
.mr-rec button::before { content: "▸"; color: var(--red-txt); }
.mr-rec button:hover { color: var(--txt); border-color: var(--red-txt); }
.mr-rec button.tocando { background: var(--red); border-color: var(--red); color: #fff; }
.mr-rec button.tocando::before { color: #fff; }
.mr-pe { margin: 14px 0 0; font-size: .8rem; color: var(--txt3); }
@media (max-width: 760px) { .mr { padding: 18px; } .mr-eq { height: 70px; } }