/* ============================================================================
   A TV do Corpflix tocando — réplica do layout "barra esquerda + inferior"
   (layout-2) do player real (denoww/midia_indoor_player). Referência visual:
   corpflix/play_assets/screenshots/raw/tv_8_*.png.

   ⛔ Só entra aqui o que o player faz de verdade: corte seco entre peças com
   spinner de 900 ms, zoom lento de imagem, card de notícia com QR, rodapé
   trocando a manchete. NÃO existe no player: ticker rolando, fade, tela
   dividida (os mockups do livreto do ERP inventam isso — não copiar).

   Tudo em cqw: a TV inteira escala junto do contêiner, de 1440 a 360 px.
   ========================================================================== */
/* .tvdemo é a moldura (borda preta da TV); .tvd-tela é o painel 16:9. A borda existe
   por um motivo além de parecer TV: com o raio de 26px direto no painel, o canto
   cortava o quadrado da data quando a TV fica pequena (hero de 2 colunas, celular). */
/* Moldura de TV de verdade: borda preta fina com brilho no fio de cima, "queixo" um
   pouco mais alto com o LED, cantos quase retos (TV não tem canto de 26px), sombra
   de TV presa na parede e um halo da cor da marca atrás, como luz ambiente.
   Tudo em cqw do .tvd-bloco: a borda afina junto com a TV e nunca passa do mínimo
   em px — no hero de 2 colunas e no celular cada pixel de moldura sai do conteúdo. */
.tvd-bloco{container-type:inline-size}
.tvd-bloco .tela{padding:0;background:none;border-radius:0}
.tvdemo{
  position:relative;width:100%;isolation:isolate;
  padding:max(5px,1.2cqw) max(5px,1.2cqw) max(8px,2.3cqw);
  border-radius:max(6px,.9cqw);
  background:linear-gradient(165deg,#34343b 0%,#141417 38%,#08080a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 0 1px #000,
    0 2.5cqw 5cqw -1.5cqw rgba(0,0,0,.75),
    0 0 9cqw -1cqw rgba(145,0,255,.38);
}
/* LED de "ligada" no meio do queixo */
.tvdemo::after{
  content:"";position:absolute;left:50%;bottom:max(3px,.95cqw);
  width:max(3px,.38cqw);height:max(3px,.38cqw);margin-left:max(-1.5px,-.19cqw);
  border-radius:50%;background:#dfe6ff;box-shadow:0 0 max(3px,.5cqw) rgba(190,205,255,.9);opacity:.7;
}
.tvd-tela{
  container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;
  border-radius:3px;overflow:hidden;
  display:grid;grid-template-columns:15% 85%;grid-template-rows:85% 15%;
  background:#0b0a10;color:#fff;line-height:1.15;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
.tvdemo *{box-sizing:border-box}

/* ---------- barra lateral ---------- */
.tvd-lado{grid-row:1;display:flex;flex-direction:column;background:#1b1921;overflow:hidden}
.tvd-data{display:flex;align-items:stretch;height:4.4cqw;background:rgba(255,255,255,.08)}
.tvd-dia{width:4.4cqw;background:#fff;color:#1b1921;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:sans-serif}
.tvd-dia b{font-size:1.9cqw;font-weight:900;line-height:1}
.tvd-dia small{font-size:.8cqw;font-weight:700;letter-spacing:.04em}
.tvd-semana{flex:1;display:flex;align-items:center;justify-content:center;font-size:1.25cqw;font-weight:600}
.tvd-hora{height:3.6cqw;display:flex;align-items:center;justify-content:center;font-size:2cqw;font-weight:700;letter-spacing:.18em;background:rgba(0,0,0,.25)}

.tvd-clima{padding:1cqw .9cqw;background:radial-gradient(120% 90% at 30% 0%,#2a7fa6,#154e6a 70%);text-align:center}
.tvd-cidade{font-size:.95cqw;font-weight:600;opacity:.95}
.tvd-temp{display:flex;align-items:center;justify-content:center;gap:.8cqw;margin:.5cqw 0 .3cqw}
.tvd-sol{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#FFC928;box-shadow:0 0 0 .35cqw rgba(255,201,40,.25),0 0 1.2cqw rgba(255,201,40,.7)}
.tvd-temp b{font-size:2.9cqw;font-weight:800;line-height:1}
.tvd-minmax{font-size:.72cqw;opacity:.9}
.tvd-minmax strong{font-weight:800}
.tvd-tempo{font-size:.95cqw;font-weight:700;margin-top:.3cqw}

.tvd-cot{display:flex;align-items:stretch;height:2.95cqw}
.tvd-cot i{width:2.4cqw;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:1.3cqw;background:rgba(0,0,0,.15)}
.tvd-cot span{flex:1;display:flex;align-items:center;padding-left:.7cqw;font-size:.9cqw;font-weight:700;letter-spacing:.04em}
.tvd-cot em{font-style:normal;font-size:.75cqw;margin-left:.4cqw;opacity:.95}
.tvd-cot.dolar{background:#187545}.tvd-cot.euro{background:#146c3b}.tvd-cot.btc{background:#ad670c}
.tvd-cot.ibov{background:#1b5e6e}.tvd-cot.nasdaq{background:#165261}

.tvd-texto{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 .6cqw;font-size:1.45cqw;font-weight:800;letter-spacing:.02em}

/* ---------- área principal: uma peça por vez, corte seco ---------- */
.tvd-main{grid-row:1;grid-column:2;position:relative;overflow:hidden;background:#000}
.tvd-peca{position:absolute;inset:0;visibility:hidden}
.tvd-peca.ativa{visibility:visible}
/* zoom lento de imagem (o player faz 1→1,1 em 30 s; em 8 s isso dá ~1,03) */
.tvd-fundo{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:50% 50%}
.tvd-peca.ativa .tvd-fundo{animation:tvd-zoom 30s linear forwards}
@keyframes tvd-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}

/* peça do cliente */
.tvd-cliente{display:flex;flex-direction:column;justify-content:flex-end;padding:4.2cqw 4.6cqw}
/* peça com foto: degradê escuro no canto do texto, como a arte que o cliente manda pronta */
.tvd-scrim{position:absolute;inset:0;background:linear-gradient(20deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,0) 68%)}
.tvd-cliente .tvd-txt{position:relative;text-shadow:0 .15cqw .8cqw rgba(0,0,0,.45)}
.tvd-cliente .tvd-olho{display:block;font-size:1.7cqw;font-weight:500;opacity:.92;margin-bottom:.8cqw}
.tvd-cliente .tvd-tit{display:block;font-size:4.4cqw;font-weight:700;line-height:1.04;letter-spacing:-.01em;max-width:17ch}

/* card de notícia em tela cheia */
.tvd-noticia .tvd-topo{position:absolute;left:2.2cqw;top:2.2cqw;display:flex;align-items:stretch}
.tvd-fonte{width:4.2cqw;height:3.1cqw;border-radius:.5cqw 0 0 .5cqw;background:#fff;color:#c1121f;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.7cqw}
.tvd-cat{display:flex;align-items:center;padding:0 1.2cqw;font-size:1.5cqw;font-weight:600;background:rgba(0,0,0,.5);border-radius:0 0 1cqw 0}
.tvd-faixa{position:absolute;left:0;right:0;bottom:0;padding:1.6cqw 12cqw 1.6cqw 2.2cqw;background:rgba(0,0,0,.62)}
.tvd-faixa b{display:block;font-size:2.15cqw;font-weight:500;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tvd-faixa small{display:block;margin-top:.5cqw;font-size:.9cqw;opacity:.8}
.tvd-qr{position:absolute;right:1.6cqw;bottom:1.4cqw;width:8cqw;padding:.5cqw;background:#fff;border-radius:.4cqw;color:#111;text-align:center}
.tvd-qr svg{display:block;width:100%;height:auto}
.tvd-qr small{display:block;margin-top:.3cqw;font-size:.62cqw;font-weight:800;letter-spacing:.03em}

/* informativo (recado): cartão sobre fundo, como os modelos prontos do ERP */
.tvd-info{background:#003651;display:flex;align-items:center;justify-content:flex-end;padding:0 4.6cqw}
.tvd-info .tvd-deco{position:absolute;left:5cqw;top:50%;width:20cqw;height:20cqw;margin-top:-10cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FF9A3C,#E86A10)}
.tvd-info .tvd-deco::after{content:"";position:absolute;inset:4.5cqw;border-radius:50%;background:#003651}
.tvd-cartao{position:relative;width:52%;background:#fff;color:#003651;border-radius:1.2cqw;padding:3cqw 3.2cqw}
.tvd-cartao b{display:block;font-size:2.8cqw;font-weight:800;line-height:1.1;margin-bottom:1cqw}
.tvd-cartao span{display:block;font-size:1.75cqw;line-height:1.35;color:#182331}

/* spinner de troca: aparece 900 ms a cada corte, no canto do conteúdo */
.tvd-spin{position:absolute;top:1.3cqw;right:1.3cqw;width:3cqw;height:3cqw;border-radius:50%;background:rgba(0,0,0,.55);z-index:5;opacity:0;transition:opacity .2s}
.tvd-spin::after{content:"";position:absolute;inset:.6cqw;border-radius:50%;border:.3cqw solid rgba(255,255,255,.25);border-top-color:#fff;animation:tvd-gira .8s linear infinite}
.tvd-spin.on{opacity:1}
@keyframes tvd-gira{to{transform:rotate(360deg)}}

/* ---------- rodapé: logo do cliente + manchete trocando no lugar ---------- */
.tvd-rodape{grid-row:2;grid-column:1/-1;display:flex;align-items:center;background:#24212b;overflow:hidden}
.tvd-logo{width:15cqw;height:100%;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.3)}
.tvd-logo span{display:flex;align-items:center;justify-content:center;width:9.5cqw;height:5.6cqw;border-radius:.5cqw;background:#fff;color:#24212b;font-size:1.05cqw;font-weight:900;letter-spacing:.03em;text-align:center;line-height:1.05}
.tvd-msg{flex:1;min-width:0;display:flex;align-items:center;gap:1.4cqw;padding:0 2cqw}
.tvd-msg .tvd-fonte{flex:none;border-radius:.5cqw;width:5.4cqw;height:4.2cqw;font-size:2cqw}
.tvd-msg div{min-width:0}
.tvd-msg small{display:block;font-size:1.1cqw;opacity:.9}
.tvd-msg b{display:block;font-size:1.95cqw;font-weight:800;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* pausado (fora da tela ou aba escondida): congela zoom e spinner */
.tvdemo.pausado *,.tvdemo.pausado *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .tvd-peca.ativa .tvd-fundo,.tvd-spin::after{animation:none}
  .tvd-spin{display:none}
}

/* legenda e CTA logo abaixo da TV */
.tvd-legenda{margin:14px 2px 0;font-size:13px;line-height:1.45;color:var(--claro-2,#a1a1a6)}
.tvd-cta{margin:10px 2px 0;font-size:17px}
.tvd-cta a{color:var(--lilas,#C9A7FF);text-decoration:none}
.tvd-cta a::after{content:" ›"}
.tvd-cta a:hover{text-decoration:underline}