/* Abertura como sala de controle.
   Um monitor principal (o que está no ar) e seis fontes ao lado, uma por frente da Brasa.
   O visitante escolhe a fonte e a seta faz o corte. Usa os tokens de style.css. */

.sala { padding: clamp(104px, 13vh, 132px) 0 clamp(56px, 7vw, 96px); }
.sala__top {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--col-gap); row-gap: 24px;
  align-items: end; margin-bottom: clamp(28px, 4vh, 44px);
}
/* Título em duas linhas na largura do monitor principal (colunas 1–8) */
.sala__title { grid-column: 1 / 9; font-size: clamp(30px, 4.8vw, 70px); line-height: 1.02; }
@media (min-width: 861px) { .sala__title { white-space: nowrap; } }
.sala__side { grid-column: 9 / 13; display: grid; gap: 20px; justify-items: start; }
.sala__lead { font-size: var(--t-body); color: var(--off); max-width: 40ch; }
/* No computador o "Fale com a Brasa" fica só no cabeçalho; o botão da abertura aparece só no celular, onde o cabeçalho não o tem (decisão de 2026-10-24) */
@media (min-width: 861px) { .sala__side .btn { display: none; } }

/* ---------- Parede de monitores ---------- */
.mv { display: grid; grid-template-columns: var(--cols); column-gap: var(--col-gap); row-gap: 16px; align-items: start; }

/* Monitor principal: colunas 1–8 */
.mv__pgm {
  grid-column: 1 / 9; position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
  background: #0d0d0d; outline: 4px solid var(--brasa); outline-offset: -4px; isolation: isolate;
  border-radius: var(--radius-media);
}
.mv__media { position: absolute; inset: 0; z-index: -1; }
.mv__media img, .mv__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv__media img { animation: drift 14s ease-in-out infinite alternate; }
.mv__media video { opacity: 0; transition: opacity .4s; }
.mv__media.has-video video { opacity: 1; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -1%); } }

.mv__live {
  position: absolute; top: 5%; left: 4%;
  background: var(--brasa); color: var(--carvao);
  font: 500 var(--t-small)/1 var(--f-titulo); letter-spacing: 1.5px; padding: 8px 12px 7px;
}
.mv__clock {
  position: absolute; top: 5%; right: 4%; padding: 7px 12px;
  background: rgba(20, 20, 20, .9); color: var(--off);
  font: 500 var(--t-small)/1.2 var(--f-titulo); font-variant-numeric: tabular-nums;
}
/* Lower third no padrão do manual: carvão 90% com faixa brasa de 8px */
.mv__lt {
  position: absolute; left: 4%; bottom: 7%; max-width: min(78%, 620px);
  background: rgba(20, 20, 20, .9); border-left: 8px solid var(--brasa);
  padding: 14px 22px 14px 18px; display: grid; gap: 4px;
}
.mv__lt strong { font: 500 var(--t-h3)/1.15 var(--f-titulo); letter-spacing: -0.01em; color: var(--off); }
.mv__lt span { font-size: var(--t-body); color: var(--texto-suave); }
.mv__lt.is-in { animation: lt-in .7s var(--ease-in-out) both; }
@keyframes lt-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* Corte: painel carvão conduzido pela seta cruza o monitor */
.mv__wipe {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--carvao); transform: translateX(calc(-100% - 12vh));
}
.mv__wipe svg { position: absolute; top: 50%; right: -5vh; height: 34%; width: auto; fill: var(--brasa); transform: translateY(-50%); }
.mv__wipe.is-in { transform: none; transition: transform .32s var(--ease-in-out); }
.mv__wipe.is-out { transform: translateX(calc(100% + 12vh)); transition: transform .38s var(--ease-in-out); }

/* ---------- Vinheta: a sala liga (primeira visita da sessão) ----------
   O monitor principal começa em carvão com a seta acendendo como "play"; aos 0,75 s o carvão corta para a direita
   e o programa aparece. As fontes entram uma a uma, como monitores ligando. Tudo assenta em 1,2 s. */
.mv__boot { display: none; }
.boot .mv__boot {
  /* inset de 4px: a moldura brasa do monitor continua visível com a tela apagada */
  display: grid; place-items: center; position: absolute; inset: 4px; z-index: 3; background: #0b0b0b; border-radius: 4px;
  animation: boot-out .45s var(--ease-in-out) .75s both;
}
.boot .mv__boot svg { height: 30%; width: auto; fill: var(--brasa); transform-origin: 30% 50%; animation: boot-play .45s var(--ease) both; }
@keyframes boot-play { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes boot-out { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
.boot .mv__src { animation: boot-src .45s var(--ease) both; }
.boot .mv__grid li:nth-child(1) .mv__src { animation-delay: .15s; }
.boot .mv__grid li:nth-child(2) .mv__src { animation-delay: .25s; }
.boot .mv__grid li:nth-child(3) .mv__src { animation-delay: .35s; }
.boot .mv__grid li:nth-child(4) .mv__src { animation-delay: .45s; }
.boot .mv__grid li:nth-child(5) .mv__src { animation-delay: .55s; }
@keyframes boot-src { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.boot .sala__title, .boot .sala__side, .boot .mv__head { animation: boot-rise .6s var(--ease) both; }
.boot .sala__side { animation-delay: .1s; }
.boot .mv__head { animation-delay: .1s; }
@keyframes boot-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- Fontes: colunas 9–12, duas por linha ---------- */
.mv__side { grid-column: 9 / 13; }
.mv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mv__hint { font: 500 var(--t-lead)/1.3 var(--f-titulo); }

/* Som opcional: botão discreto; ligado, a onda aparece e o nome fica em brasa */
.mv__sound {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; margin-right: -10px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--texto-suave);
  font: 400 var(--t-small)/1 var(--f-texto); cursor: pointer; transition: color .25s, background-color .25s;
}
.mv__sound:hover { color: var(--off); background: var(--carvao-2); }
.mv__sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mv__sound-body { fill: currentColor; stroke: none; }
.mv__sound-wave { display: none; }
.mv__sound[aria-pressed="true"] { color: var(--brasa); }
.mv__sound[aria-pressed="true"] .mv__sound-wave { display: block; }
.mv__sound[aria-pressed="true"] .mv__sound-off { display: none; }
.mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.mv__src {
  display: grid; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--off);
  font: inherit; text-align: left; cursor: pointer;
}
.mv__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--carvao-2);
  outline: 4px solid transparent; outline-offset: -4px; transition: outline-color .25s;
  border-radius: var(--radius-media);
}
.mv__thumb img, .mv__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; }
.mv__thumb video { opacity: 0; }
.mv__thumb.has-video video { opacity: 1; }
.mv__name { font-size: var(--t-small); color: var(--texto-suave); transition: color .25s; }
.mv__src:hover .mv__thumb img, .mv__src:hover .mv__thumb video { transform: scale(1.06); }
.mv__src:hover .mv__name { color: var(--off); }
/* No ar: moldura brasa cheia e nome em destaque */
.mv__src[aria-pressed="true"] .mv__thumb { outline-color: var(--brasa); }
.mv__src[aria-pressed="true"] .mv__name { color: var(--brasa); }
.mv__src:active .mv__thumb { transform: scale(.98); }

/* Com número ímpar de fontes, a última ocupa a linha inteira, como um monitor largo */
.mv__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mv__grid li:last-child:nth-child(odd) .mv__thumb { aspect-ratio: 32 / 9; }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .sala__title { grid-column: 1 / -1; }
  .sala__side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: end; }
  .mv__pgm, .mv__side { grid-column: 1 / -1; }
  /* Tablet: as cinco fontes numa linha só, abaixo do monitor principal */
  .mv__grid { grid-template-columns: repeat(5, 1fr); }
  .mv__grid li:last-child:nth-child(odd) { grid-column: auto; }
  .mv__grid li:last-child:nth-child(odd) .mv__thumb { aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .sala { padding-top: 96px; }
  .sala__title { font-size: clamp(30px, 8.4vw, 40px); }
  .sala__side { grid-template-columns: 1fr; }
  /* No celular o lower third sai de cima da imagem e fica logo abaixo do monitor, com a descrição inteira:
     a sala é a seção de serviços, então a descrição não pode sumir */
  /* Moldura por fora: no celular a imagem é um bloco no fluxo e cobriria a moldura interna */
  .mv__pgm { overflow: visible; aspect-ratio: auto; display: grid; outline-offset: 0; }
  .mv__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; z-index: 0; border-radius: var(--radius-media) var(--radius-media) 0 0; }
  .mv__wipe { bottom: auto; aspect-ratio: 16 / 9; overflow: hidden; }
  .mv__lt { position: static; max-width: 100%; padding: 12px 14px 12px 12px; border-left-width: 6px; border-radius: 0 0 var(--radius-media) var(--radius-media); }
  .mv__lt strong { font-size: var(--t-lead); }
  .mv__clock { display: none; }
  .mv__grid { gap: 12px 8px; }
  .mv__name { font-size: 13px; line-height: 1.25; }
}
@media (max-width: 600px) {
  /* Celular: duas por linha, a última larga */
  .mv__grid { grid-template-columns: 1fr 1fr; }
  .mv__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mv__grid li:last-child:nth-child(odd) .mv__thumb { aspect-ratio: 32 / 9; }
  .mv__name { font-size: var(--t-small); }
}

@media (prefers-reduced-motion: reduce) {
  .mv__media img { animation: none; }
  .mv__wipe, .mv__boot { display: none; }
}

/* ---------- Alavanca de corte (T-bar) ----------
   Faixa abaixo do monitor principal. A seta da marca é a alavanca: arrastada da esquerda para a direita,
   o painel do corte atravessa o monitor junto; solta depois da metade, a próxima fonte vai ao ar. */
.mv__pgm { grid-row: 1; }
.mv__side { grid-row: 1 / span 2; }
.tbar { grid-column: 1 / 9; grid-row: 2; display: grid; gap: 10px; }
.tbar__label { font-size: var(--t-small); color: var(--texto-suave); }
.tbar__label strong { color: var(--off); font-weight: 500; }
.tbar__track {
  position: relative; height: 52px; border-radius: var(--radius-media); background: var(--carvao-2);
  cursor: grab; touch-action: none; overflow: hidden;
}
.tbar__track:active { cursor: grabbing; }
.tbar__track:focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; }
.tbar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--t, 0) * 100%); background: #34322f; }
.tbar__handle {
  position: absolute; top: 6px; bottom: 6px; left: calc(8px + var(--t, 0) * (100% - 40px)); width: 24px;
  background: var(--brasa); -webkit-mask: var(--seta) center / contain no-repeat; mask: var(--seta) center / contain no-repeat;
}
.tbar.is-settling .tbar__fill, .tbar.is-settling .tbar__handle { transition: width .35s var(--ease), left .35s var(--ease); }
.tbar__keys { font-size: var(--t-small); color: var(--texto-sutil); }
.tbar__keys kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: var(--radius-sm); text-align: center;
  background: var(--carvao-2); color: var(--off); font: 500 var(--t-small)/1.4 var(--f-texto);
}
@media (hover: none) { .tbar__keys { display: none; } }

/* Gravação (atalho R): selo REC com o tempo, ao lado do AO VIVO */
.mv__rec {
  position: absolute; top: 5%; left: calc(4% + 116px); padding: 8px 12px 7px;
  background: rgba(20, 20, 20, .9); color: var(--off); font: 500 var(--t-small)/1 var(--f-titulo); letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.mv__rec::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brasa); vertical-align: 1px; }
.mv__rec[hidden] { display: none; }

@media (max-width: 1024px) {
  .mv__pgm, .tbar, .mv__side { grid-row: auto; }
  .tbar { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .tbar { display: none; }
}