/* =========================================================================
   Sua TV Online · Dashboard (tv.html)
   Auto-ajuste: a tela escala com vw E vh (min) -> cabe em qualquer TV.
   ========================================================================= */
:root {
  --brand1: #0066CC; --brand2: #2b8cff; --brand3: #6C3EF4;
  --bg: #0b1020; --bg2: #131a2e; --card: rgba(255,255,255,.075); --card-bd: rgba(255,255,255,.14);
  --ink: #f8fafc; --sub: #9fb2d4; --up: #34d399; --down: #f87171;
}
.tv.dia {
  --bg: #eef3fb; --bg2: #dde6f3; --card: rgba(255,255,255,.9); --card-bd: rgba(15,23,42,.08);
  --ink: #0f172a; --sub: #51607a;
}
/* ----- presets de cor de fundo (escolhidos pelo cliente) ----- */
.tv.fundo-azul    { background: linear-gradient(160deg, #00356e, #001627) !important; }
.tv.fundo-roxo    { background: linear-gradient(160deg, #3a1a73, #150927) !important; }
.tv.fundo-verde   { background: linear-gradient(160deg, #0a6b46, #042316) !important; }
.tv.fundo-laranja { background: linear-gradient(160deg, #c25e00, #341700) !important; }
.tv.fundo-copa    { background: linear-gradient(135deg, #0a7a42 0%, #0a7a42 40%, #d96b00 100%) !important; }
.tv.fundo-escuro  { background: #000 !important; }
.tv.fundo-custom  { background: linear-gradient(160deg, var(--fc1, #0066CC), var(--fc2, #6C3EF4)) !important; }
.tv.fundo-claro {
  background: linear-gradient(160deg, #f3f7fd, #e2e9f4) !important;
  --card: rgba(255,255,255,.92); --card-bd: rgba(15,23,42,.08); --ink: #0f172a; --sub: #51607a;
}
.tv.fundo-claro .tv-ticker { background: rgba(15,23,42,.06); }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* auto-fit: fonte escala com a MENOR dimensão relativa -> nunca estoura */
html { font-size: clamp(11px, min(1.04vw, 1.85vh), 30px); }
body.tv {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  background: radial-gradient(1200px 800px at 82% -10%, rgba(0,102,204,.28), transparent 60%),
              radial-gradient(900px 700px at -10% 110%, rgba(108,62,244,.22), transparent 60%),
              linear-gradient(160deg, var(--bg), var(--bg2));
  color: var(--ink); width: 100vw; height: 100vh; overflow: hidden; transition: background .8s, color .4s;
}

.tv-wrap { display: grid; grid-template-rows: auto 1fr auto; width: 100vw; height: 100vh; gap: .55rem; padding: .6rem .8rem; }

/* cabeçalho FIXO (barra no topo: logo do cliente + nome do estabelecimento) */
.tv-head { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border: 1px solid var(--card-bd); border-radius: 1rem;
  padding: .45rem 1.2rem; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 .5rem 1.6rem rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.24); }
.tv.dia .tv-head, .tv.fundo-claro .tv-head { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
  box-shadow: 0 .5rem 1.6rem rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.9); }
/* coluna fixa p/ cada região: mesmo quando o bloco da Copa some (:empty → display:none),
   o cluster da direita (rádio + ao vivo + Sair) continua colado na coluna 3 (extrema direita) */
.tv-head > .head-rel { grid-column: 1; justify-self: start; }
.tv-head > .head-jogo { grid-column: 2; justify-self: center; }     /* bloco da Copa SEMPRE centralizado na barra */
.tv-head > .tv-head-right { grid-column: 3; justify-self: end; }
.tv-head-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.tv-head-right { display: flex; align-items: center; gap: .9rem; white-space: nowrap; }
.tv-sair { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--card-bd); border-radius: .6rem;
  padding: .45rem .9rem; font-size: .9rem; font-weight: 700; font-family: inherit; }
.tv-sair:hover { background: var(--down); color: #fff; border-color: transparent; }
.tv-head .marca { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.tv-head .marca img { height: 2.8rem; max-width: 16rem; object-fit: contain; }
.tv-head .marca img + .nome { padding-left: .85rem; border-left: 2px solid var(--card-bd); }
.tv-head .marca .nome { font-size: 1.7rem; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-radio { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 700; color: var(--sub); white-space: nowrap; max-width: 16rem; overflow: hidden; }
.head-radio i { color: var(--brand2); }
.head-radio .rad-nome { overflow: hidden; text-overflow: ellipsis; }
.head-radio .rad-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .9rem; }
.head-radio .rad-eq span { width: 3px; background: var(--brand2); border-radius: 2px; animation: radEq .9s ease-in-out infinite; }
.head-radio .rad-eq span:nth-child(2){ animation-delay:.2s } .head-radio .rad-eq span:nth-child(3){ animation-delay:.4s }
@keyframes radEq { 0%,100%{ height:30% } 50%{ height:100% } }
.tv-head .badge-live { font-size: .85rem; color: var(--sub); display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.tv-head .badge-live .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--up); box-shadow: 0 0 .6rem var(--up); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
/* relógio + data (esquerda) */
.head-rel { display: flex; align-items: center; gap: .8rem; }
.head-hora { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.head-data { display: flex; flex-direction: column; line-height: 1.15; }
.head-agora { font-size: .7rem; font-weight: 800; letter-spacing: .5px; color: var(--sub); }
.head-data > span:last-child { font-size: 1rem; font-weight: 600; }
/* próximo jogo (centro) */
.head-jogo { display: flex; align-items: center; gap: 1.4rem; }
.head-jogo:empty { display: none; }
.hj-cup { display: flex; align-items: center; gap: .5rem; padding-right: 1.2rem; border-right: 1px solid rgba(255,255,255,.18); }
.hj-cup > i { color: #fbbf24; font-size: 1.7rem; }
.hj-cup > span { display: flex; flex-direction: column; line-height: 1.05; font-size: 1rem; font-weight: 700; }
.hj-cup b { color: var(--brand2); font-size: 1.25rem; font-weight: 800; }
.hj-match { display: flex; align-items: center; gap: 1.1rem; }
.hj-team { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.hj-team .hj-fl { font-size: 2rem; line-height: 1; }
.hj-team img { height: 1.9rem; width: 2.6rem; object-fit: contain; }
.hj-team small { font-size: .8rem; font-weight: 700; }
.hj-info { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 0 .3rem; }
.hj-info small { font-size: .68rem; font-weight: 800; letter-spacing: .6px; color: var(--sub); }
.hj-info b { font-size: 1.35rem; font-weight: 800; }
.hj-info.live small { color: #ff5468; }
.hj-info.live b { color: #fff; }
/* marca d'água do cliente + etiqueta sobre a propaganda */
/* marca: container transparente (sem máscara em volta do nome) */
.palco-marca { position: absolute; top: 1rem; left: 1.1rem; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .5rem; max-width: 42%; }
/* logo do cliente SEM caixa: apenas a imagem, com sombra p/ destacar em qualquer fundo */
.palco-marca-logo { position: relative; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.palco-marca-logo img { position: relative; z-index: 1; display: block; height: 6rem; max-width: 17rem; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(0,0,0,.7)) drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
/* nome: texto puro, SEM máscara em volta */
.palco-marca span { font-size: 1.6rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.6); text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* modo embed (dashboard ao vivo dentro do site): sem botão Sair */
body.embed #btnSairTV { display: none; }
.palco-tag { position: absolute; top: .9rem; right: 1rem; z-index: 4; font-size: .8rem; font-weight: 800; letter-spacing: .5px; color: #fff; background: rgba(0,0,0,.4); padding: .25rem .7rem; border-radius: .5rem; text-transform: uppercase; }

/* área central */
.tv-body { display: grid; gap: .6rem; min-height: 0; min-width: 0; }
.col-widgets, .col-widgets-2 { display: grid; grid-auto-rows: 1fr; gap: .55rem; min-height: 0; min-width: 0; }
.tv-body > * { min-height: 0; min-width: 0; }

/* tamanho do widget (P/M/G/GG) — controlado pelo cliente no painel (Widgets → Tamanho) */
.card.tam-p { grid-row: span 1; }
.card.tam-m { grid-row: span 2; }
.card.tam-g { grid-row: span 3; }
.card.tam-gg { grid-row: span 4; }

/* Layout 1 · PRINCIPAL: widgets à esquerda + palco grande à direita (igual referência) */
.tv-body.layout-1 { grid-template-columns: minmax(13rem, 1fr) 3fr; }
.tv-body.layout-1 .col-widgets { order: 1; } .tv-body.layout-1 .palco { order: 2; }
/* Layout 2 · palco grande à esquerda + widgets à direita */
.tv-body.layout-2 { grid-template-columns: 3fr minmax(13rem, 1fr); }
.tv-body.layout-2 .palco { order: 1; } .tv-body.layout-2 .col-widgets { order: 2; }
/* Layout 3 · palco em cima + faixa de widgets embaixo */
.tv-body.layout-3 { grid-template-rows: 2.1fr 1fr; }
.tv-body.layout-3 .palco { order: 1; } .tv-body.layout-3 .col-widgets { order: 2; grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: auto; }
/* Layout 4 · palco central + 2 colunas de widgets */
.tv-body.layout-4 { grid-template-columns: minmax(12rem,1fr) 2.4fr minmax(12rem,1fr); }
.tv-body.layout-4 .col-widgets { order: 1; } .tv-body.layout-4 .palco { order: 2; } .tv-body.layout-4 .col-widgets-2 { order: 3; }
/* Layout 6 · palco grande à esquerda + 2 colunas de widgets à direita */
.tv-body.layout-6 { grid-template-columns: 2.7fr minmax(9rem,.62fr) minmax(9rem,.62fr); }
.tv-body.layout-6 .palco { order: 1; } .tv-body.layout-6 .col-widgets { order: 2; } .tv-body.layout-6 .col-widgets-2 { order: 3; }

/* ===== MODO COPA: durante a janela de exibição do jogo, tema com as cores do time
   em vantagem no placar (--copa-cor1/--copa-cor2, definidas via JS em tv.html).
   Sem vantagem definida (empate/não iniciado), cai no verde-amarelo padrão. ===== */
body.tv.modo-copa {
  background: linear-gradient(160deg, var(--copa-cor1, #009c3b) 0%, var(--copa-cor2, #f7d000) 100%) !important;
  --brand2: var(--copa-cor2, #ffe14d);
}
body.tv.modo-copa .tv-head, body.tv.modo-copa .card { border-color: var(--copa-cor2, #ffe14d); border-color: color-mix(in srgb, var(--copa-cor2, #ffe14d) 55%, transparent); }
body.tv.modo-copa .hj-cup > i { color: var(--copa-cor2, #ffe14d); }
/* comemoração de gol (overlay em tela cheia) — cores do time que marcou, via --gc1/--gc2 inline */
.gol-copa { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, var(--gc1, #009c3b), rgba(0,0,0,.92) 140%); animation: golFade .35s ease both; }
.gol-copa .gtxt { font-size: clamp(3rem, 11vw, 11rem); font-weight: 900; color: var(--gc2, #ffdf00); letter-spacing: 2px; line-height: 1; text-shadow: 0 .4rem 2rem rgba(0,0,0,.55); animation: golPop .6s cubic-bezier(.2,1.5,.4,1) both; }
.gol-copa .gsub { font-size: clamp(1.4rem, 4vw, 3rem); font-weight: 800; color: #fff; letter-spacing: 1px; }
.gol-copa .gplacar { font-size: clamp(1.2rem, 3.2vw, 2.4rem); font-weight: 900; color: #fff; background: rgba(0,0,0,.28); padding: .3rem 1.4rem; border-radius: 1rem; letter-spacing: 2px; }
.gol-confete { position: absolute; inset: 0; pointer-events: none; }
.gol-confete span { position: absolute; top: -12%; animation-name: golCai; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes golFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes golPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes golCai { to { transform: translateY(118vh) rotate(560deg); } }
/* Layout 5 · DUAS TELAS: Propaganda + YouTube trocam de posição (grande<->pequena) */
.tv-body.layout-5 { grid-template-columns: minmax(13rem, 1fr) 3fr; }
.duo { display: grid; grid-template-rows: 2.5fr 1fr; gap: .6rem; min-height: 0; min-width: 0; }
.duo-big, .duo-small { position: relative; min-height: 0; min-width: 0; }
.duo-big > .palco, .duo-small > .palco { width: 100%; height: 100%; }
.yt-fixo { background: #000; }
.yt-fixo iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-vazio { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--sub); font-weight: 600; }
/* propaganda em tela cheia (overlay) */
.prop-full { position: fixed; inset: 0; z-index: 90; display: none; padding: .7rem; background: linear-gradient(160deg, var(--bg), var(--bg2)); }
.prop-full.ativo { display: block; }
.prop-full > .palco { width: 100%; height: 100%; }

/* ----- palco de propaganda (moldura de vidro: aro de luz + sombra profunda) ----- */
.palco { position: relative; border-radius: 1.2rem; overflow: hidden; background: #000; min-height: 0;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.palco .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; display: flex; align-items: center; justify-content: center; }
.palco .slide.ativo { opacity: 1; }
.palco .slide img, .palco .slide video { width: 100%; height: 100%; object-fit: cover; }
.palco .slide.cor { flex-direction: column; gap: 1rem; }
.palco .slide .ad-titulo { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.6rem;
  font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.palco .slide.cor .ad-titulo { position: static; background: none; text-align: center; font-size: 2.6rem; }
.palco .progresso { position: absolute; bottom: 0; left: 0; height: .3rem; background: linear-gradient(90deg, var(--brand1), var(--brand3)); width: 0; }
.palco .slide.yt { background: #000; }
.palco .slide.yt iframe { width: 100%; height: 100%; border: 0; }
/* efeitos de entrada/transição das propagandas (imagem, vídeo, banner) */
@keyframes pZoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes pFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pLeft { from { transform: translateX(9%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pUp { from { transform: translateY(11%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pFlip { from { transform: perspective(1000px) rotateY(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
.palco .slide.ef-zoom.ativo img { animation: pZoom 14s ease-out both; }
.palco .slide.ef-zoom.cor.ativo, .palco .slide.ef-fade.ativo { animation: pFade 1.1s both; }
.palco .slide.ef-slidel.ativo { animation: pLeft .9s cubic-bezier(.2,.7,.2,1) both; }
.palco .slide.ef-slideu.ativo { animation: pUp .9s cubic-bezier(.2,.7,.2,1) both; }
.palco .slide.ef-flip.ativo { animation: pFlip 1s ease both; }

/* ----- cards (vidro líquido: blur+saturação atrás, aresta de luz no topo, brilho especular) ----- */
.card { position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045) 45%, rgba(255,255,255,.06));
  border: 1px solid var(--card-bd); border-radius: 1.1rem;
  padding: .7rem .8rem; backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  display: flex; flex-direction: column; gap: .35rem; min-height: 0; overflow: hidden;
  box-shadow: 0 .7rem 1.8rem rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12); }
/* reflexo especular no topo do vidro (estático — barato p/ GPU de TV Box) */
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent); border-radius: 1.1rem 1.1rem 0 0; }
.tv.dia .card, .tv.fundo-claro .card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  box-shadow: 0 .7rem 1.8rem rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.9); }
.tv.dia .card::before, .tv.fundo-claro .card::before { background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); }
.w-titulo { font-size: .8rem; font-weight: 800; color: var(--brand2); text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: .45rem; padding-bottom: .3rem; border-bottom: 1px solid var(--card-bd); margin-bottom: .15rem; }
/* wrapper de auto-ajuste: o conteúdo do widget é escalado p/ caber no card */
.card > .cardfit { transform-origin: center center; width: 100%; display: flex; flex-direction: column; gap: inherit; min-height: 0; }
/* conteúdo centralizado na caixa (preenche o espaço em vez de encostar no topo) */
.card:not(.pula-center) { justify-content: center; }
.tv.dia .w-titulo { color: var(--brand1); }
.match-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7em; }
.w-grande { font-size: 2.3rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.w-sub { font-size: .92rem; color: var(--sub); }
.w-sub.up { color: var(--up); } .w-sub.down { color: var(--down); }
.w-extra { font-size: .82rem; color: var(--sub); }
.w-relogio { font-size: 2.7rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.w-data { font-size: 1rem; color: var(--sub); text-transform: capitalize; }

/* ----- clima (com previsão por hora) ----- */
.card-clima { gap: .3rem; }
.wx-top { display: flex; align-items: center; justify-content: space-between; }
.wx-loc { font-size: 1.05rem; font-weight: 700; }
.wx-loc i { font-size: .8rem; color: var(--sub); transform: rotate(45deg); }
.wx-ic { font-size: 1.9rem; line-height: 1; }
.wx-mid { display: flex; align-items: baseline; gap: .6rem; }
.wx-temp { font-size: 2.7rem; font-weight: 800; line-height: 1; }
.wx-cond { font-size: 1rem; color: var(--sub); font-weight: 600; }
.wx-chuva { font-size: .9rem; color: var(--brand2); font-weight: 600; }
.wx-hours { display: flex; justify-content: space-between; gap: .25rem; margin-top: auto; padding-top: .45rem; border-top: 1px solid var(--card-bd); }
.wx-h { display: flex; flex-direction: column; align-items: center; gap: .12rem; flex: 1; }
.wx-hh { font-size: .68rem; color: var(--sub); }
.wx-hi { font-size: 1.05rem; }
.wx-ht { font-size: .82rem; font-weight: 700; }
/* clima no tamanho P: enxuto e alinhado à ESQUERDA, no mesmo padrão do widget "Agora"
   (rótulo pequeno em cima + valor grande embaixo). Previsão/condição/chuva só em M/G/GG. */
.card-clima.tam-p { justify-content: center; align-items: flex-start; text-align: left; gap: .1rem; }
.card-clima.tam-p .wx-ic,
.card-clima.tam-p .wx-cond,
.card-clima.tam-p .wx-chuva,
.card-clima.tam-p .wx-hours { display: none; }
.card-clima.tam-p .wx-top { justify-content: flex-start; width: 100%; }
.card-clima.tam-p .wx-loc { font-size: .8rem; font-weight: 800; color: var(--brand2); text-transform: uppercase; letter-spacing: .6px; }
.tv.dia .card-clima.tam-p .wx-loc, .tv.fundo-claro .card-clima.tam-p .wx-loc { color: var(--brand1); }
.card-clima.tam-p .wx-loc i { display: none; }
.card-clima.tam-p .wx-mid { justify-content: flex-start; }
.card-clima.tam-p .wx-temp { font-size: 3.4rem; }

/* ----- Em Cartaz (pôster de cinema) ----- */
/* tamanho controlado pelo seletor "Tamanho do widget" (padrão: Médio, p/ caber o pôster retrato) */
.card-cartaz .cartaz-box { display: flex; flex: 1; min-height: 0; }
.cartaz-card { display: flex; flex-direction: column; gap: .5rem; width: 100%; min-height: 0; flex: 1; }
/* contain = pôster aparece COMPLETO (sem cortar) */
.cartaz-poster { flex: 1; min-height: 9rem; border-radius: .7rem; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.cartaz-info { text-align: center; }
.cartaz-t { font-weight: 800; font-size: 1.05rem; line-height: 1.15; }
.cartaz-d { color: var(--brand2); font-size: .8rem; margin-top: .12rem; }

/* ----- Comercial (tela do anúncio, mesmo render do palco) ----- */
.card-comercial { overflow: hidden; }
.comercial-palco { position: relative; flex: 1; min-height: 8.5rem; border-radius: .7rem; overflow: hidden; background: #000; }
.comercial-palco .slide { position: absolute; inset: 0; opacity: 1; display: flex; align-items: center; justify-content: center; }
.comercial-palco .slide img, .comercial-palco .slide video, .comercial-palco .slide iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.comercial-palco .slide.animado { flex-direction: column; }
.comercial-palco .ad-anim { padding: .5rem .8rem; max-width: 96%; }
.comercial-palco .ad-t { font-size: 1.05rem; line-height: 1.1; }
.comercial-palco .ad-sub { font-size: .72rem; }
.comercial-palco .ad-precos { margin-top: .2rem; }
.comercial-palco .ad-preco { font-size: 1.3rem; }
.comercial-palco .ad-de { font-size: .7rem; }
.comercial-palco .ad-selo { font-size: .55rem; padding: .05rem .5rem; }
.comercial-palco .ad-titulo { font-size: 1rem; padding: .6rem; }
.comercial-palco .ad-fonte-t { font-size: 1.1rem; } .comercial-palco .ad-fonte-sub { font-size: .75rem; }

/* ----- Trânsito (mapa de tráfego do Google) ----- */
.card-transito .transito-map { flex: 1; min-height: 9rem; border-radius: .7rem; overflow: hidden; background: rgba(127,127,127,.08); display: flex; align-items: center; justify-content: center; text-align: center; }

/* ----- jogos / copa (card NA SEQUÊNCIA) ----- */
.card-jogos { background: transparent; border: 0; padding: 0; backdrop-filter: none; }
.jogos-box { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.match { background: linear-gradient(135deg, #0a3a86, var(--brand1)); border-radius: .9rem; padding: .6rem .8rem;
  color: #fff; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .3rem; box-shadow: 0 .5rem 1.4rem rgba(0,40,90,.35); min-height: 0; }
.match.live { background: linear-gradient(135deg, #7f1020, #c81e2e); }
.match.fim { background: linear-gradient(135deg, #1e293b, #334155); }
.match-hd { font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .92; }
/* trio centralizado (escudo — X — escudo) com os times encostados no X p/ leitura refinada */
.match-row { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.match-team { display: flex; align-items: center; gap: .4rem; font-size: 1.5rem; font-weight: 800; flex: 0 0 auto; }
.match-fl { font-size: 1.4rem; line-height: 1; }
.match-logo { height: 1.5rem; width: 1.5rem; object-fit: contain; vertical-align: middle; }
.match-x { color: rgba(255,255,255,.7); font-weight: 700; font-size: 1.2rem; }
.match-placar { font-weight: 800; font-size: 1.5rem; }
.match-placar i { opacity: .6; font-style: normal; font-size: 1rem; }
.match-time-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.match-fl-grande { font-size: 2.8rem; line-height: 1; }
.match-logo-grande { height: 2.8rem; width: 2.8rem; object-fit: contain; }
.match-abbr { font-size: .85rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* ----- Fórmula 1 (próximo GP) — só nome + bandeira + horário da corrida ----- */
.card-f1 { justify-content: center; gap: .6rem; }
.f1-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.f1-bandeira { font-size: 2.4rem; line-height: 1; flex: none; }
.f1-nome { font-weight: 800; font-size: 1.15rem; line-height: 1.15; min-width: 0; }
.f1-corrida { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .6rem; padding-top: .5rem; border-top: 1px solid var(--card-bd); }
.f1-corrida span { color: var(--sub); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.f1-corrida b { color: var(--brand2); font-weight: 800; font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ----- janela do YouTube (quadrado no widget da coluna) ----- */
.card-youtube { padding: 0; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.card-youtube .yt-frame { width: 100%; aspect-ratio: 1 / 1; height: auto; max-height: 100%; border: 0; display: block; }
.yt-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ----- rádio ----- */
.w-radio-nome { font-size: 1.25rem; font-weight: 700; }
.w-radio-ctrl { display: flex; align-items: center; gap: .8rem; }
.w-radio-btn { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--brand1), var(--brand3)); color: #fff; font-size: 1.1rem; }
.w-radio-eq { display: flex; gap: .25rem; align-items: flex-end; height: 1.6rem; opacity: .3; }
.w-radio-eq span { width: .3rem; background: var(--brand2); height: 30%; border-radius: 2px; }
.card.tocando .w-radio-eq { opacity: 1; }
.card.tocando .w-radio-eq span { animation: eq .9s ease-in-out infinite; }
.card.tocando .w-radio-eq span:nth-child(2){animation-delay:.2s}.card.tocando .w-radio-eq span:nth-child(3){animation-delay:.4s}.card.tocando .w-radio-eq span:nth-child(4){animation-delay:.1s}
@keyframes eq { 0%,100%{height:25%} 50%{height:100%} }

/* ----- ofertas (adaptável à largura do card) ----- */
.card-ofertas { grid-column: 1 / -1; }
.w-ofertas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; overflow: hidden; }
.w-oferta { background: rgba(255,255,255,.05); border: 1px solid var(--card-bd); border-radius: .7rem; padding: .5rem; text-align: center; display: flex; flex-direction: column; gap: .2rem; }
.w-oferta img { width: 100%; height: 3.8rem; object-fit: cover; border-radius: .5rem; }
.w-of-emoji { font-size: 2.4rem; }
.w-of-nome { font-size: .8rem; font-weight: 600; line-height: 1.1; min-height: 2.1em; }
.w-of-precos { display: flex; flex-direction: column; }
.w-of-de { font-size: .7rem; color: var(--sub); text-decoration: line-through; }
.w-of-preco { font-size: 1.05rem; font-weight: 800; color: var(--up); }

/* ----- propaganda ANIMADA (preenchida pelo cliente) ----- */
.slide.animado { flex-direction: column; gap: 1rem; background: linear-gradient(135deg, var(--c1, #0066CC), var(--c2, #6C3EF4)); overflow: hidden; }
.slide.animado.bg-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.2)); z-index: 1; }
.ad-anim { text-align: center; color: #fff; padding: 2rem 3rem; position: relative; z-index: 2; max-width: 92%; }
/* posição do texto na propaganda animada (vale p/ o palco .slide.animado e p/ a prévia .anim-prev) */
.slide.animado { padding: 4vh 4vw; }
.slide.animado.adpos-topo, .anim-prev.adpos-topo { justify-content: flex-start !important; }
.slide.animado.adpos-rodape, .anim-prev.adpos-rodape { justify-content: flex-end !important; }
.slide.animado.adpos-esq, .anim-prev.adpos-esq { align-items: flex-start !important; }
.slide.animado.adpos-dir, .anim-prev.adpos-dir { align-items: flex-end !important; }
.adpos-esq .ad-anim, .anim-prev.adpos-esq { text-align: left; }
.adpos-dir .ad-anim, .anim-prev.adpos-dir { text-align: right; }
.ad-selo { display: inline-block; background: rgba(255,255,255,.18); border: 2px solid #fff; border-radius: 999px; padding: .3rem 1.4rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 1.1rem; font-size: 1.3rem; }
.ad-t { font-size: 3.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -1px; text-shadow: 0 4px 22px rgba(0,0,0,.3); }
.ad-sub { font-size: 1.5rem; opacity: .94; margin-top: .5rem; }
.ad-precos { margin-top: 1.3rem; display: flex; gap: .9rem; align-items: baseline; justify-content: center; }
.ad-de { font-size: 1.7rem; text-decoration: line-through; opacity: .7; }
.ad-preco { font-size: 4.4rem; font-weight: 800; line-height: 1; }
/* brilho passando */
.slide.animado::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); pointer-events: none; }
.slide.animado.ativo::after { animation: shine 3s ease-in-out infinite; }
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 150%; } }
/* entradas · disparam toda vez que o slide fica ativo */
.slide.animado .ad-selo, .slide.animado .ad-t, .slide.animado .ad-sub, .slide.animado .ad-precos { opacity: 0; }
.slide.animado.ativo .ad-selo { animation: popIn .6s .1s both; }
.slide.animado.ativo .ad-t { animation: upIn .7s .3s both; }
.slide.animado.ativo .ad-sub { animation: upIn .7s .5s both; }
.slide.animado.ativo .ad-precos { animation: popIn .7s .75s both; }
.slide.animado.ativo .ad-preco { animation: none; }
.slide.animado.ativo .ad-precos { animation: popIn .7s .75s both; }
@keyframes upIn { from { opacity: 0; transform: translateY(45px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse2 { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes leftIn { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes rightIn { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
/* template: deslizar */
.tpl-slide.ativo .ad-t { animation: leftIn .7s .2s both; }
.tpl-slide.ativo .ad-sub { animation: rightIn .7s .45s both; }
/* template: flash de preço */
.tpl-flash.ativo .ad-preco { animation: flash .5s .9s 3; }
/* template: promo (pulso contínuo no preço) */
.tpl-promo.ativo .ad-precos { animation: popIn .6s .7s both, pulse2 1.8s 1.6s infinite; }

/* ===== modelos de animação extras ===== */
/* fundo em VÍDEO/YouTube do anúncio animado */
.ad-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.slide.animado.bg-img .ad-bg-video { z-index: 0; }
.ad-bg-yt { pointer-events: none; border: 0; }
/* ----- Tipo FONTE: propaganda só com texto animado ----- */
.slide.fonte { flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c1,#0a0a23), var(--c2,#1a0b3a)); }
.ad-fonte-wrap { text-align: center; padding: 2.5rem; z-index: 2; position: relative; }
.ad-fonte-t { font-size: 3.8rem; font-weight: 900; line-height: 1.1; letter-spacing: -2px; }
.ad-fonte-sub { font-size: 2rem; font-weight: 600; margin-top: .6rem; opacity: .85; }
.ef-fonte-glow .ad-fonte-t { animation: fonteGlow 2s ease-in-out infinite alternate; }
@keyframes fonteGlow { from { text-shadow: 0 0 20px rgba(255,255,255,.4),0 0 40px rgba(255,255,255,.2); } to { text-shadow: 0 0 40px rgba(255,255,255,.9),0 0 80px rgba(255,200,100,.7); } }
.ef-fonte-neon .ad-fonte-t { text-shadow: 0 0 10px #4cc9ff,0 0 30px #4cc9ff; animation: neonFonte 1.5s ease-in-out infinite; }
@keyframes neonFonte { 0%,100% { text-shadow: 0 0 6px #4cc9ff,0 0 18px #4cc9ff; } 50% { text-shadow: 0 0 18px #4cc9ff,0 0 48px #4cc9ff,0 0 80px #2b6cff; } }
.ef-fonte-rainbow .ad-fonte-t { animation: rainbow 3s linear infinite; }
@keyframes rainbow { 0%{color:#ff4444}20%{color:#ffdd00}40%{color:#44ff44}60%{color:#44ddff}80%{color:#8844ff}100%{color:#ff4444} }
.slide.fonte.ativo .ef-fonte-slide .ad-fonte-t { animation: upIn .8s .1s both; }
.slide.fonte.ativo .ef-fonte-slide .ad-fonte-sub { animation: upIn .8s .35s both; }
.ef-fonte-pulse .ad-fonte-t { animation: fontePulse 1.8s ease-in-out infinite; }
@keyframes fontePulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.08)} }
.ef-fonte-typewrite .ad-fonte-t { overflow: hidden; white-space: nowrap; border-right: .1em solid currentColor; max-width: max-content; margin: 0 auto; animation: typewrite 3.5s steps(20,end) .3s both, blink .75s step-end infinite; }
@keyframes typewrite { from{width:0}to{width:100%} }
@keyframes blink { from,to{border-color:transparent}50%{border-color:currentColor} }
/* botões de dia da semana no agendamento */
.ag-dia { transition: background .15s, border-color .15s, color .15s; }
.ag-dia.on { background: var(--brand1, #6366f1) !important; border-color: var(--brand1, #6366f1) !important; color: #fff !important; }

/* zoom: o conteúdo todo entra ampliando */
.tpl-zoom.ativo .ad-anim { animation: zoomIn .9s cubic-bezier(.2,.8,.3,1) both; }
@keyframes zoomIn { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
/* flip: vira em 3D */
.tpl-flip .ad-anim { transform-style: preserve-3d; }
.tpl-flip.ativo .ad-anim { animation: flipIn 1s both; }
@keyframes flipIn { from { opacity: 0; transform: perspective(900px) rotateX(85deg); } to { opacity: 1; transform: perspective(900px) rotateX(0); } }
/* bounce: salta */
.tpl-bounce.ativo .ad-t { animation: bounceIn 1.1s both; }
.tpl-bounce.ativo .ad-precos { animation: bounceIn 1.1s .3s both; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(.3) translateY(-40px); } 55% { opacity: 1; transform: scale(1.12) translateY(0); } 72% { transform: scale(.94); } 88% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* neon: brilho pulsante */
.tpl-neon { background: linear-gradient(135deg, #0a0a23, #1a0b3a) !important; }
.tpl-neon .ad-t { color: #fff; }
.tpl-neon.ativo .ad-t { animation: upIn .7s .3s both, neonPulse 1.6s 1s infinite; }
.tpl-neon.ativo .ad-preco { color: #39ff14; text-shadow: 0 0 8px #39ff14, 0 0 22px #39ff14; }
.tpl-neon .ad-selo { border-color: #ff2bd6; color: #ff86ec; box-shadow: 0 0 10px #ff2bd6; }
@keyframes neonPulse { 0%,100% { text-shadow: 0 0 6px #4cc9ff, 0 0 18px #4cc9ff; } 50% { text-shadow: 0 0 14px #4cc9ff, 0 0 38px #4cc9ff, 0 0 60px #2b6cff; } }
/* onda: gradiente em movimento */
.tpl-onda { background-size: 250% 250% !important; animation: gradMove 7s ease infinite; }
@keyframes gradMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* efeitos de chuva de emojis (festa/coração/like/doces/aniversário/brinde/natal/pet/limpeza): conteúdo saltando */
.tpl-festa.ativo .ad-t, .tpl-coracao.ativo .ad-t, .tpl-like.ativo .ad-t, .tpl-doces.ativo .ad-t, .tpl-aniversario.ativo .ad-t, .tpl-brinde.ativo .ad-t, .tpl-natal.ativo .ad-t, .tpl-pet.ativo .ad-t, .tpl-limpeza.ativo .ad-t { animation: bounceIn 1s both; }
.tpl-festa.ativo .ad-precos, .tpl-coracao.ativo .ad-precos, .tpl-like.ativo .ad-precos, .tpl-doces.ativo .ad-precos, .tpl-aniversario.ativo .ad-precos, .tpl-brinde.ativo .ad-precos, .tpl-natal.ativo .ad-precos, .tpl-pet.ativo .ad-precos, .tpl-limpeza.ativo .ad-precos { animation: popIn .7s .6s both, pulse2 1.8s 1.4s infinite; }
.ad-confete { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ad-confete span { position: absolute; top: -12%; font-size: 2rem; animation: cair linear infinite; opacity: .9; }
.ad-confete span:nth-child(1){left:4%;animation-duration:5.2s;animation-delay:0s}
.ad-confete span:nth-child(2){left:12%;animation-duration:6.1s;animation-delay:.7s}
.ad-confete span:nth-child(3){left:20%;animation-duration:4.6s;animation-delay:1.4s}
.ad-confete span:nth-child(4){left:28%;animation-duration:5.8s;animation-delay:.3s}
.ad-confete span:nth-child(5){left:36%;animation-duration:6.4s;animation-delay:2s}
.ad-confete span:nth-child(6){left:44%;animation-duration:4.9s;animation-delay:1s}
.ad-confete span:nth-child(7){left:52%;animation-duration:5.5s;animation-delay:.2s}
.ad-confete span:nth-child(8){left:60%;animation-duration:6.2s;animation-delay:1.7s}
.ad-confete span:nth-child(9){left:68%;animation-duration:4.7s;animation-delay:.9s}
.ad-confete span:nth-child(10){left:76%;animation-duration:5.9s;animation-delay:2.3s}
.ad-confete span:nth-child(11){left:84%;animation-duration:6.3s;animation-delay:.5s}
.ad-confete span:nth-child(12){left:92%;animation-duration:5.1s;animation-delay:1.2s}
.ad-confete span:nth-child(13){left:16%;animation-duration:5.6s;animation-delay:2.6s}
.ad-confete span:nth-child(14){left:80%;animation-duration:4.8s;animation-delay:3s}
@keyframes cair { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(115vh) rotate(540deg); } }

/* ----- widgets extras (horóscopo, datas, frases, feeds) ----- */
.card-feed .feed-list { display: flex; flex-direction: column; gap: .3rem; overflow: hidden; margin-top: .2rem; }
.feed-item { font-size: .95rem; line-height: 1.2; color: var(--ink); border-top: 1px solid var(--card-bd); padding-top: .3rem; }
.feed-item:first-child { border-top: 0; padding-top: 0; }
.horo { display: flex; align-items: center; gap: .7rem; }
.horo-sym { font-size: 2.4rem; line-height: 1; }
.horo-nome { font-size: 1.5rem; font-weight: 800; }
.horo-msg { font-size: 1.05rem; margin-top: .45rem; color: var(--ink); }
.data-hoje { font-size: 1.05rem; margin: .2rem 0 .35rem; }
.data-item { font-size: .95rem; display: flex; gap: .5rem; padding: .15rem 0; }
.data-d { color: var(--brand2); font-weight: 700; min-width: 3.2em; }
.card-frase .frase-t { font-size: 1.25rem; font-weight: 700; line-height: 1.25; font-style: italic; }
.card-frase .frase-a { font-size: .9rem; color: var(--sub); margin-top: .5rem; }

/* ----- barra de notícias (vidro fosco claro — texto escuro mantém contraste alto) ----- */
.tv-ticker { position: relative; background: linear-gradient(180deg, rgba(236,240,247,.94), rgba(203,211,224,.9));
  border: 1px solid rgba(255,255,255,.35); border-radius: .9rem; display: flex; align-items: center; overflow: hidden; height: 3.6rem;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7); }
.ticker-tag { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; background: linear-gradient(135deg, var(--brand1), var(--brand3)); color: #fff; font-weight: 800; font-size: 1rem; padding: 0 1.3rem; display: flex; align-items: center; gap: .5rem; white-space: nowrap; box-shadow: .7rem 0 1.2rem rgba(0,0,0,.35); }
.ticker-track { position: relative; z-index: 1; display: inline-flex; white-space: nowrap; padding-left: 100%; animation: ticker 120s linear infinite; }
.tk-item { padding: 0 1.5rem; font-size: 1.3rem; font-weight: 700; color: #000; }
.tk-fonte { color: #062b73; font-weight: 800; }
.tk-sep { color: rgba(0,0,0,.45); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----- overlay de conexão ----- */
.tv-overlay { position: fixed; inset: 0; background: linear-gradient(160deg, #0b1020, #131a2e); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 2rem; overflow: hidden; isolation: isolate; }
/* fundo ambiente com glow pulsante (mesma linguagem de motion da landing/painéis) */
.tv-overlay::before, .tv-overlay::after, .tv-overlay .blob-3 { content: ''; position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; z-index: -1; animation: tvBlobFloat 15s ease-in-out infinite; }
.tv-overlay::before { width: 460px; height: 460px; top: -12%; left: -8%; background: radial-gradient(circle, var(--brand1), transparent 70%); }
.tv-overlay::after { width: 400px; height: 400px; bottom: -14%; right: -6%; background: radial-gradient(circle, var(--brand3), transparent 70%); animation-delay: -5s; animation-duration: 17s; }
@keyframes tvBlobFloat { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,-5%) scale(1.1); } }
.tv-card { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.18); border-radius: 1.4rem; padding: 2.5rem; width: min(420px, 92vw); text-align: center;
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  animation: tvCardIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes tvCardIn { from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tv-card img { height: 3rem; margin-bottom: 1.4rem; animation: tvLogoFloat 5s ease-in-out infinite; }
@keyframes tvLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tv-card h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.tv-card p { color: var(--sub); margin-bottom: 1.4rem; font-size: .95rem; }
.tv-card input { width: 100%; padding: .9rem 1rem; margin-bottom: .7rem; border-radius: .7rem; border: 1px solid var(--card-bd); background: rgba(255,255,255,.06); color: var(--ink); font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.tv-card input:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(43,140,255,.25); }
.tv-card button { position: relative; overflow: hidden; width: 100%; padding: .9rem; border: 0; border-radius: .7rem; cursor: pointer; font-size: 1rem; font-weight: 700; background: linear-gradient(135deg, var(--brand1), var(--brand3)); color: #fff; transition: filter .15s, transform .12s; }
.tv-card button:hover { filter: brightness(1.06); }
.tv-card button:active { transform: translateY(1px); }
.tv-card button::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg); animation: tvBtnShine 3.2s ease-in-out infinite; }
@keyframes tvBtnShine { 0% { left: -60%; } 55%, 100% { left: 150%; } }
.tv-erro { color: var(--down); font-size: .85rem; min-height: 1.2em; margin-bottom: .5rem; }
.tv-pausado { color: #fbbf24; font-size: 1rem; }

/* ===== acessibilidade: respeitar "Reduzir movimento" do sistema =====
   As trocas de propaganda/rotação são via JS (setTimeout) e continuam funcionando;
   aqui só neutralizamos as animações CSS decorativas (entradas, pulsos, confete, equalizer). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .gol-confete, .head-radio .rad-eq { display: none !important; }
}