/* Canal das touradas: the always-on player in the hero's frame. It lies over the tile panel, which stays as its poster, so the
   page does not move when it loads. Flat, no shadows. */
.canal { position: absolute; inset: var(--moldura, 0px); z-index: 1; overflow: hidden; background: transparent; }
.canal:empty { display: none; }
.canal-tela { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease, ease); background: #000; }
.canal.on .canal-tela { opacity: 1; }
.canal-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.canal-barra { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; background: var(--navy, #0E2250); color: var(--paper, #F8F9FB); opacity: 0; transition: opacity .6s var(--ease, ease); }
.canal.on .canal-barra { opacity: 1; }
.canal-nome { margin: 0; font-size: var(--t-small, 18px); line-height: 1.3; min-width: 0; flex: 1 1 240px; }
.canal-nome b { font-weight: 600; }
.canal-nome span { display: block; color: var(--soft, #C9D3EA); }
.canal-act { display: flex; flex-wrap: wrap; gap: 8px; }
.canal-b { min-height: 48px; padding: 0 16px; border: 0; background: var(--paper, #F8F9FB); color: var(--ink, #10285C); font: 600 var(--t-small, 18px)/1 var(--f, serif); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.canal-b[aria-pressed="true"] { background: var(--gold, #E3A92B); }
.canal-b:focus-visible, .canal-ligar:focus-visible { outline: 3px solid var(--gold, #E3A92B); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .canal-b:hover { background: var(--tone, #D9E1EF); } }
.canal-ligar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 60px; padding: 0 24px; border: 0; background: var(--navy, #0E2250); color: var(--paper, #F8F9FB); font: 600 var(--t-body, 20px)/1 var(--f, serif); cursor: pointer; }
.canal-ligar[hidden] { display: none; }
/* on a phone the frame is small: the bar becomes a flat scrim over the foot of the picture, one line of name, one of buttons */
@media (max-width: 560px) {
  .canal-barra { padding: 6px 8px; gap: 6px; background: rgba(14, 34, 80, .8); }
  .canal-nome { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .canal-nome span { display: none; }
  .canal-b { min-height: 44px; padding: 0 12px; }
}