/* =============================================================================
   Palhadini TV — folha de estilo da tela de loja
   -----------------------------------------------------------------------------
   Escrita para navegador de Smart TV (Tizen / webOS / Android TV / Chrome em
   modo quiosque). Nada de nesting, :has(), container queries ou @layer — só
   CSS que roda em Chromium antigo. Onde há recurso moderno (backdrop-filter,
   background-clip:text) existe fallback via @supports.

   Escala: quase tudo é dimensionado em `vmin`, então a interface acompanha
   telas de 1080p a 4K sem ajuste. `--escala` (config.layout.escala) multiplica
   tudo de uma vez para quem quiser aumentar em telas grandes.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Reset e casca
--------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;                 /* TV não rola: tudo cabe na tela */
  background: var(--brown-900);
}

body {
  font-family: var(--font-body);
  color: var(--vanilla-100);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --escala: 1;

  /* Unidade base da interface. Todo tamanho relevante deriva daqui. */
  --u: calc(1vmin * var(--escala));

  /* Alturas das faixas fixas */
  --ticker-h: calc(9 * var(--u));
  --hud-h: calc(11 * var(--u));

  /* Coluna de informações no modo horizontal */
  --painel-w: calc(34 * var(--u));
}

/* Cursor escondido quando a página marca inatividade (js/fullscreen.js) */
body.ptv-sem-cursor,
body.ptv-sem-cursor * { cursor: none !important; }

#ptv-app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--grad-cacau);
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   2. Palco de vídeo
   ---------------------------------------------------------------------------
   `.ptv-stage` é a área onde o vídeo vive. No modo vertical ela ocupa a tela
   inteira; no horizontal, divide espaço com a coluna de informações.

   Dois <video> empilhados (A e B) permitem cross-fade: enquanto um toca, o
   próximo já está pré-carregado no outro. Sem corte preto entre clipes.
--------------------------------------------------------------------------- */

.ptv-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--ticker-h);
  overflow: hidden;
  background: var(--grad-cacau);
}

/* Moldura 9:16 usada no modo horizontal para não esticar vídeo de celular.
   No vertical ela simplesmente ocupa tudo. */
.ptv-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* O slot é a unidade que aparece e some. Fazer o cross-fade no contêiner, e não
   no <video>, evita o quadro preto que aparece quando o elemento de vídeo troca
   de `src` no meio da transição. */
.ptv-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-suave);
  will-change: opacity;
}

.ptv-slot.is-ativo { opacity: 1; }

.ptv-video,
.ptv-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* vertical: preenche sem barras */
  background: transparent;
  display: block;
}

/* Véu inferior: garante leitura da legenda sobre qualquer vídeo.
   Sem isso, um clipe de fundo claro engole o texto branco. */
.ptv-veu-inferior {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(36, 16, 9, .82) 0%,
    rgba(36, 16, 9, .55) 34%,
    rgba(36, 16, 9, 0) 100%
  );
  z-index: 10;
}

.ptv-veu-superior {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(36, 16, 9, .62) 0%,
    rgba(36, 16, 9, 0) 100%
  );
  z-index: 10;
}

/* ---------------------------------------------------------------------------
   3. Receita de vidro
   ---------------------------------------------------------------------------
   Assinatura da marca. Só é aplicada quando há algo atrás para desfocar — por
   isso vive sobre o vídeo, nunca sobre fundo liso. Onde backdrop-filter não
   existe, o @supports troca por um marrom sólido em vez de deixar um cinza sujo.
--------------------------------------------------------------------------- */

.ptv-vidro {
  background: rgba(98, 56, 43, .52);
  border: 1px solid var(--glass-dark-border);
  box-shadow: var(--shadow-glass);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ptv-vidro {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  .ptv-vidro-forte {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    backdrop-filter: blur(var(--glass-blur-strong));
  }
}

/* ---------------------------------------------------------------------------
   4. HUD superior — marca, relógio, previsão
--------------------------------------------------------------------------- */

.ptv-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  padding: calc(2.6 * var(--u)) calc(3 * var(--u));
  pointer-events: none;
}

/* --- Lockup da marca --- */

.ptv-marca {
  display: flex;
  align-items: center;
  gap: calc(1.4 * var(--u));
}

.ptv-marca-simbolo {
  width: calc(5.4 * var(--u));
  height: calc(5.4 * var(--u));
  flex: none;
  color: var(--vanilla-300);
  opacity: .95;
}

.ptv-marca-simbolo svg { width: 100%; height: 100%; display: block; }

.ptv-marca-nome {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: calc(3.6 * var(--u));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--vanilla-050);
  margin: 0;
}

.ptv-marca-slogan {
  font-family: var(--font-body);
  font-size: calc(1.05 * var(--u));
  letter-spacing: var(--ls-slogan);
  text-transform: lowercase;
  color: var(--vanilla-300);
  margin-top: calc(.3 * var(--u));
  opacity: .9;
}

/* --- Relógio + tempo --- */

.ptv-hud-direita {
  display: flex;
  align-items: stretch;
  gap: calc(1.4 * var(--u));
}

.ptv-relogio,
.ptv-tempo {
  border-radius: var(--radius-lg);
  padding: calc(1.3 * var(--u)) calc(2.1 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ptv-relogio-hora {
  font-family: var(--font-display);
  font-size: calc(5 * var(--u));
  font-weight: var(--fw-light);
  /* Cormorant Upright tem algarismos de alturas desiguais (o 3, o 4 e o 9
     descem abaixo da linha de base). Com line-height apertado eles encostavam
     no dia da semana logo abaixo — daí a folga aqui e a margem na data. */
  line-height: 1.02;
  letter-spacing: .04em;
  color: var(--vanilla-050);
  font-variant-numeric: tabular-nums;
}

.ptv-relogio-hora .ptv-seg {
  font-size: .5em;
  color: var(--dourado);
  margin-left: .12em;
  letter-spacing: 0;
}

.ptv-relogio-data {
  font-size: calc(1.15 * var(--u));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vanilla-300);
  margin-top: calc(1.2 * var(--u));
  white-space: nowrap;
}

/* --- Card de tempo: hoje + 3 dias --------------------------------------- */

.ptv-tempo {
  flex-direction: column;
  gap: calc(1.2 * var(--u));
  align-items: stretch;
}

.ptv-tempo[hidden] { display: none; }

.ptv-tempo-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(.9 * var(--u));
  flex-wrap: wrap;
}

.ptv-tempo-cidade {
  font-size: calc(1.05 * var(--u));
  color: var(--dourado);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.ptv-tempo-desc {
  font-size: calc(1.05 * var(--u));
  color: var(--vanilla-300);
  letter-spacing: .04em;
}

/* Os quatro dias dividem a largura do card por igual */
.ptv-tempo-dias {
  display: flex;
  align-items: stretch;
  gap: calc(.6 * var(--u));
}

/* Em retrato o card vive no HUD e não tem uma coluna para preencher — precisa
   de uma largura mínima para as quatro colunas não se espremerem. Em paisagem
   ele já ocupa a largura inteira do painel. */
.ptv-modo-vertical .ptv-tempo { min-width: calc(31 * var(--u)); }

.ptv-dia {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(.5 * var(--u));
  padding: calc(.8 * var(--u)) calc(.3 * var(--u));
  border-radius: var(--radius-md);
  text-align: center;
}

/* "Hoje" se distingue só pela cor do rótulo — sem caixa de fundo, que numa
   coluna de quatro cards já cheia de informação vira ruído. */

.ptv-dia-rotulo {
  font-size: calc(1 * var(--u));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vanilla-300);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.ptv-dia.is-hoje .ptv-dia-rotulo { color: var(--dourado); }

.ptv-dia-icone {
  width: calc(5.2 * var(--u));
  height: calc(5.2 * var(--u));
}

.ptv-dia-icone svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ptv-dia-temps {
  display: flex;
  align-items: baseline;
  gap: calc(.5 * var(--u));
  font-variant-numeric: tabular-nums;
}

.ptv-dia-max {
  font-family: var(--font-display);
  font-size: calc(2.2 * var(--u));
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--vanilla-050);
}

.ptv-dia-min {
  font-size: calc(1.15 * var(--u));
  color: var(--brown-200);
}

/* =============================================================================
   Ícones de tempo animados
   -----------------------------------------------------------------------------
   SVG inline em vez de GIF: fundo transparente e laço infinito iguais, mas
   nítidos em 4K, herdando as cores da marca e sem arquivo extra para hospedar.
   `transform-box: fill-box` faz a rotação girar no centro da própria forma —
   sem isso o eixo é o canto do viewBox e o sol sai orbitando.
   ============================================================================= */

.ptv-i-nuvem  { fill: var(--vanilla-200); }
.ptv-i-nuvem2 { fill: var(--vanilla-300); opacity: .75; }
.ptv-i-sol    { fill: var(--dourado); }
.ptv-i-raios  { stroke: var(--dourado); }
.ptv-i-gota    { fill: var(--vanilla-300); }
.ptv-i-floco   { stroke: var(--vanilla-050); }
.ptv-i-luz     { fill: var(--dourado); }
.ptv-i-linha   { stroke: var(--vanilla-200); }
.ptv-i-cristal { stroke: var(--vanilla-050); }

.ptv-i-raios,
.ptv-i-sol,
.ptv-i-nuvem,
.ptv-i-nuvem2,
.ptv-i-gota,
.ptv-i-floco,
.ptv-i-luz,
.ptv-i-linha,
.ptv-i-cristal {
  transform-box: fill-box;
  transform-origin: center;
}

/* Amplitudes generosas de propósito: este ícone tem ~5vmin e é lido a metros de
   distância. Movimento discreto demais simplesmente não chega ao cliente. */
.ptv-i-raios   { animation: ptv-i-girar 8s linear infinite; }
.ptv-i-sol     { animation: ptv-i-pulsar 2.4s var(--ease-suave) infinite; }
.ptv-i-nuvem   { animation: ptv-i-derivar 4s var(--ease-suave) infinite; }
.ptv-i-nuvem2  { animation: ptv-i-derivar 5.5s var(--ease-suave) infinite reverse; }
.ptv-i-gota    { animation: ptv-i-cair 1.3s linear infinite; }
.ptv-i-floco   { animation: ptv-i-flocar 2.6s linear infinite; }
.ptv-i-luz     { animation: ptv-i-relampago 2.2s steps(1, end) infinite; }
.ptv-i-linha   { animation: ptv-i-nevoa 3.6s var(--ease-suave) infinite; }
.ptv-i-cristal { animation: ptv-i-girar 12s linear infinite; }

/* Escalonamento: gotas e flocos caem em tempos diferentes, senão viram uma
   cortina só descendo em bloco. */
.ptv-i-atraso-1 { animation-delay: .00s; }
.ptv-i-atraso-2 { animation-delay: .45s; }
.ptv-i-atraso-3 { animation-delay: .90s; }

@keyframes ptv-i-girar {
  to { transform: rotate(360deg); }
}

/* Os valores estão em unidades do viewBox (0 0 64), não em pixels de tela:
   transform em filho de SVG opera no sistema de coordenadas do próprio SVG.
   4 unidades = 6% da largura do ícone. */
@keyframes ptv-i-pulsar {
  0%, 100% { transform: scale(.92); }
  50%      { transform: scale(1.08); }
}

@keyframes ptv-i-derivar {
  0%, 100% { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
}

@keyframes ptv-i-cair {
  0%   { transform: translateY(-6px); opacity: 0; }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

@keyframes ptv-i-flocar {
  0%   { transform: translateY(-6px) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(16px) rotate(240deg); opacity: 0; }
}

@keyframes ptv-i-relampago {
  0%, 70%  { opacity: .2; }
  74%      { opacity: 1; }
  78%      { opacity: .25; }
  82%      { opacity: 1; }
  88%, 100%{ opacity: .2; }
}

@keyframes ptv-i-nevoa {
  0%, 100% { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
}

/* ---------------------------------------------------------------------------
   5. Coluna de interação (TikTok)
--------------------------------------------------------------------------- */

.ptv-rail {
  position: absolute;
  right: calc(2.4 * var(--u));
  bottom: calc(4 * var(--u));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2.4 * var(--u));
  pointer-events: none;
}

.ptv-rail[hidden] { display: none; }

/* Avatar com anel dourado, como o perfil do TikTok */
.ptv-rail-avatar {
  position: relative;
  width: calc(6.4 * var(--u));
  height: calc(6.4 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--grad-baunilha);
  border: 2px solid var(--vanilla-050);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-600);
  margin-bottom: calc(1 * var(--u));
}

.ptv-rail-avatar svg {
  width: 62%;
  height: 62%;
  display: block;
}

/* Selo "+" abaixo do avatar */
.ptv-rail-avatar::after {
  content: "+";
  position: absolute;
  bottom: calc(-1.1 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(2.4 * var(--u));
  height: calc(2.4 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--cereja);
  color: var(--vanilla-050);
  font-size: calc(1.6 * var(--u));
  font-weight: var(--fw-medium);
  line-height: calc(2.2 * var(--u));
  text-align: center;
  border: 1px solid rgba(253, 250, 247, .5);
}

.ptv-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(.6 * var(--u));
}

.ptv-acao-bolha {
  width: calc(5.6 * var(--u));
  height: calc(5.6 * var(--u));
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vanilla-050);
  /* Sombra projetada no ícone: legibilidade sobre vídeo claro */
  filter: drop-shadow(0 calc(.2 * var(--u)) calc(.6 * var(--u)) rgba(36, 16, 9, .55));
}

.ptv-acao-bolha svg {
  width: calc(3.4 * var(--u));
  height: calc(3.4 * var(--u));
  display: block;
}

.ptv-acao--curtir .ptv-acao-bolha { color: var(--cereja); }

.ptv-acao-num {
  font-size: calc(1.4 * var(--u));
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: var(--vanilla-050);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px calc(.4 * var(--u)) rgba(36, 16, 9, .7);
}

/* Disco de música girando, no pé da coluna */
.ptv-rail-disco {
  width: calc(5.6 * var(--u));
  height: calc(5.6 * var(--u));
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 50% 50%,
      var(--brown-800) 0 22%,
      var(--brown-600) 22% 100%);
  border: 1px solid var(--glass-dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vanilla-200);
  animation: ptv-girar 6s linear infinite;
  margin-top: calc(.6 * var(--u));
}

.ptv-rail-disco svg {
  width: calc(2.6 * var(--u));
  height: calc(2.6 * var(--u));
}

@keyframes ptv-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   6. Legenda inferior (TikTok)
--------------------------------------------------------------------------- */

.ptv-legenda {
  position: absolute;
  left: calc(3 * var(--u));
  bottom: calc(3 * var(--u));
  z-index: 42;
  max-width: 62%;
  display: flex;
  flex-direction: column;
  gap: calc(.9 * var(--u));
  pointer-events: none;
}

.ptv-legenda-autor {
  font-size: calc(1.9 * var(--u));
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--vanilla-050);
  text-shadow: 0 1px calc(.5 * var(--u)) rgba(36, 16, 9, .8);
}

.ptv-legenda-texto {
  font-size: calc(1.65 * var(--u));
  line-height: 1.45;
  color: var(--vanilla-100);
  text-shadow: 0 1px calc(.5 * var(--u)) rgba(36, 16, 9, .8);
  /* No máximo três linhas: legenda longa não pode empurrar o layout */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ptv-legenda-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.8 * var(--u));
}

.ptv-tag {
  font-size: calc(1.4 * var(--u));
  font-weight: var(--fw-medium);
  color: var(--dourado);
  text-shadow: 0 1px calc(.4 * var(--u)) rgba(36, 16, 9, .8);
}

.ptv-legenda-musica {
  display: flex;
  align-items: center;
  gap: calc(.8 * var(--u));
  font-size: calc(1.35 * var(--u));
  color: var(--vanilla-200);
  text-shadow: 0 1px calc(.4 * var(--u)) rgba(36, 16, 9, .8);
  margin-top: calc(.3 * var(--u));
}

.ptv-legenda-musica svg {
  width: calc(1.8 * var(--u));
  height: calc(1.8 * var(--u));
  flex: none;
}

.ptv-legenda-musica-nome {
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(34 * var(--u));
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   7. Cartão de próximos eventos
--------------------------------------------------------------------------- */

.ptv-eventos {
  border-radius: var(--radius-lg);
  padding: calc(2.2 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(1.4 * var(--u));
}

.ptv-eventos[hidden] { display: none; }

.ptv-eventos-titulo {
  font-size: calc(1.15 * var(--u));
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--dourado);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.ptv-eventos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1.3 * var(--u));
}

.ptv-evento {
  display: flex;
  align-items: flex-start;
  gap: calc(1.4 * var(--u));
  padding-bottom: calc(1.3 * var(--u));
  border-bottom: 1px solid rgba(226, 205, 186, .16);
}

.ptv-evento:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Bloco de data à esquerda — dia grande, mês em versalete */
.ptv-evento-data {
  flex: none;
  width: calc(6.4 * var(--u));
  border-radius: var(--radius-md);
  background: rgba(253, 250, 247, .1);
  border: 1px solid rgba(226, 205, 186, .22);
  text-align: center;
  padding: calc(.7 * var(--u)) 0 calc(.8 * var(--u));
}

.ptv-evento-dia {
  font-family: var(--font-display);
  font-size: calc(3 * var(--u));
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--vanilla-050);
  display: block;
}

.ptv-evento-mes {
  font-size: calc(.95 * var(--u));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vanilla-300);
  display: block;
  margin-top: calc(.3 * var(--u));
}

.ptv-evento-corpo { min-width: 0; flex: 1; }

.ptv-evento-nome {
  font-family: var(--font-display);
  font-size: calc(2.1 * var(--u));
  font-weight: var(--fw-regular);
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--vanilla-050);
  margin: 0;
}

.ptv-evento-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(.5 * var(--u)) calc(1.1 * var(--u));
  font-size: calc(1.2 * var(--u));
  color: var(--vanilla-300);
  margin-top: calc(.5 * var(--u));
}

.ptv-evento-desc {
  font-size: calc(1.2 * var(--u));
  line-height: 1.4;
  color: var(--brown-200);
  margin-top: calc(.5 * var(--u));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* O horário é a informação que a loja mais consulta — ganha peso sobre o local */
.ptv-evento-horario {
  color: var(--vanilla-100);
  font-weight: var(--fw-medium);
}

/* Acento de cor do evento, na base do bloco de data */
.ptv-evento-data--cereja   { border-bottom: 2px solid var(--cereja); }
.ptv-evento-data--dourado  { border-bottom: 2px solid var(--dourado); }
.ptv-evento-data--pistache { border-bottom: 2px solid var(--pistache); }

/* ---------------------------------------------------------------------------
   8. Círculo de progresso do download
--------------------------------------------------------------------------- */

/* Vive dentro do aviso, centralizado logo abaixo da mensagem. Não flutua sobre
   o vídeo: quando há o que exibir, o aviso sai de cena e o anel sai junto. */
.ptv-progresso {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(1.5 * var(--u));
  transition: opacity var(--dur-slow) var(--ease-suave);
}

.ptv-progresso.is-oculto {
  opacity: 0;
  pointer-events: none;
}

.ptv-anel {
  position: relative;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  flex: none;
}

.ptv-anel svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);        /* começa no topo */
}

.ptv-anel-trilho {
  fill: none;
  stroke: rgba(226, 205, 186, .22);
}

.ptv-anel-arco {
  fill: none;
  stroke: var(--dourado);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-base) var(--ease-suave);
}

/* Só o percentual, no miolo do anel */
.ptv-anel-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: calc(3.6 * var(--u));
  font-weight: var(--fw-light);
  letter-spacing: .02em;
  color: var(--vanilla-050);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   9. Faixa de texto rolante (ticker)
--------------------------------------------------------------------------- */

.ptv-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ticker-h);
  z-index: 70;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--glass-dark-border);
}

.ptv-ticker[hidden] { display: none; }

/* Padrão da casa: marrom Palhadini chapado. Sem degradê, sem vidro, sem blur —
   é uma faixa de notícia, tem de ser um bloco de cor só. */
.ptv-ticker--marrom {
  background: #62382B;
  background-image: none;
}

.ptv-ticker--vidro-escuro { background: rgba(36, 16, 9, .72); }
.ptv-ticker--vidro-claro  { background: rgba(253, 250, 247, .82); }
.ptv-ticker--cacau        { background: var(--grad-cacau); }
.ptv-ticker--baunilha     { background: var(--vanilla-300); }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ptv-ticker--vidro-escuro {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    backdrop-filter: blur(var(--glass-blur-strong));
  }
  .ptv-ticker--vidro-claro {
    background: var(--glass-light-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    backdrop-filter: blur(var(--glass-blur-strong));
  }
}

/* A trilha guarda duas cópias idênticas do conteúdo. Deslocar -50% e reiniciar
   dá um laço perfeito, sem salto visível e sem recalcular nada por quadro. */
/* A animação (nome + duração) é aplicada inline por js/ticker.js, que calcula a
   duração a partir da largura medida do conteúdo para a velocidade em px/s sair
   constante em qualquer tamanho de tela. Aqui ficam só os keyframes. */
.ptv-ticker-trilha {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.ptv-ticker--pausado .ptv-ticker-trilha { animation-play-state: paused; }

/* Direita → esquerda (padrão, como nas faixas de telejornal) */
@keyframes ptv-rolar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Esquerda → direita */
@keyframes ptv-rolar-inverso {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.ptv-ticker-copia {
  display: flex;
  align-items: center;
  flex: none;
}

.ptv-seg {
  display: inline-block;
  padding: 0 calc(1.2 * var(--u));
  line-height: 1.1;
}

.ptv-seg-sep {
  color: var(--dourado);
  opacity: .55;
  padding: 0 calc(.6 * var(--u));
  font-size: calc(1.6 * var(--u));
}

/* Segmento com gradiente: o texto recorta o degradê.
   `color` fica definido antes como reserva — se background-clip:text não pegar,
   o texto aparece sólido em vez de invisível. */
.ptv-seg--gradiente {
  background-clip: text;
  -webkit-background-clip: text;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ptv-seg--gradiente {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
}

.ptv-seg--piscar { animation: ptv-piscar 1.6s var(--ease-suave) infinite; }

@keyframes ptv-piscar {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ---------------------------------------------------------------------------
   10. Elementos fixos vindos da API (overlays)
--------------------------------------------------------------------------- */

.ptv-overlays {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  overflow: hidden;
}

.ptv-overlay {
  position: absolute;
  display: block;
  max-width: 100%;
}

.ptv-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

/* Estilo pronto para overlay de texto: selo em vidro */
.ptv-overlay--selo-vidro {
  padding: calc(.9 * var(--u)) calc(1.8 * var(--u));
  border-radius: var(--radius-pill);
  background: rgba(98, 56, 43, .5);
  border: 1px solid var(--glass-dark-border);
  color: var(--vanilla-100);
  font-size: calc(1.15 * var(--u));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ptv-overlay--selo-vidro {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

.ptv-overlay--selo-dourado {
  padding: calc(.9 * var(--u)) calc(1.8 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--dourado);
  color: var(--brown-900);
  font-size: calc(1.15 * var(--u));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.ptv-overlay--display {
  font-family: var(--font-display);
  font-size: calc(3.4 * var(--u));
  letter-spacing: var(--ls-display);
  color: var(--vanilla-050);
  text-shadow: 0 calc(.2 * var(--u)) calc(.8 * var(--u)) rgba(36, 16, 9, .7);
}

/* ---------------------------------------------------------------------------
   11. Coluna lateral (só no modo horizontal)
--------------------------------------------------------------------------- */

.ptv-painel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--ticker-h);
  width: var(--painel-w);
  z-index: 38;
  display: none;                    /* ligado pelo modo horizontal */
  flex-direction: column;
  gap: calc(1.6 * var(--u));
  padding: calc(2.4 * var(--u));
  overflow: hidden;
  background: linear-gradient(
    200deg,
    rgba(62, 32, 24, .92) 0%,
    rgba(36, 16, 9, .96) 100%
  );
  border-left: 1px solid var(--glass-dark-border);
}

/* Marca d'água do ornamento no pé do painel — 6–8% como manda o guia */
.ptv-painel::after {
  content: "";
  position: absolute;
  right: calc(-6 * var(--u));
  bottom: calc(-6 * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  background-image: url("../assets/logo-mark.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .07;
  pointer-events: none;
}

.ptv-painel > * { position: relative; z-index: 1; }

.ptv-painel-topo {
  display: flex;
  flex-direction: column;
  gap: calc(1.4 * var(--u));
}

/* =============================================================================
   12. MODO VERTICAL (retrato) — TV girada, vídeo em tela cheia
   ============================================================================= */

.ptv-modo-vertical .ptv-stage {
  left: 0;
  right: 0;
}

.ptv-modo-vertical .ptv-painel { display: none; }

/* O cartão de eventos flutua sobre o vídeo, em vidro, logo abaixo do HUD */
.ptv-modo-vertical .ptv-eventos {
  position: absolute;
  z-index: 39;
  left: calc(3 * var(--u));
  top: calc(var(--hud-h) + 4 * var(--u));
  width: calc(46 * var(--u));
  max-width: 62%;
  background: rgba(98, 56, 43, .5);
  border: 1px solid var(--glass-dark-border);
  box-shadow: var(--shadow-glass);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ptv-modo-vertical .ptv-eventos {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

/* Em retrato o cartão flutua sobre o vídeo e divide espaço com a legenda: sem
   a descrição, os três eventos cabem sem competir com ela. */
.ptv-modo-vertical .ptv-evento-desc { display: none; }

/* =============================================================================
   13. MODO HORIZONTAL (paisagem) — vídeo 9:16 centralizado + coluna de infos
   ============================================================================= */

.ptv-modo-horizontal .ptv-stage {
  right: var(--painel-w);
}

.ptv-modo-horizontal .ptv-painel { display: flex; }

/* Fundo do palco: cacau, para o vídeo vertical não flutuar sobre preto */
.ptv-modo-horizontal .ptv-frame {
  left: 50%;
  right: auto;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  /* Moldura 9:16: altura cheia, largura derivada. `aspect-ratio` tem fallback
     logo abaixo para TVs que não suportam. */
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  border-radius: 0;
  box-shadow: 0 0 calc(10 * var(--u)) rgba(36, 16, 9, .6);
}

/* Fallback: sem aspect-ratio, a moldura vira uma faixa central de largura fixa
   proporcional à altura da tela (56.25vh ≈ 9/16). */
@supports not (aspect-ratio: 9 / 16) {
  .ptv-modo-horizontal .ptv-frame {
    width: 56.25vh;
  }
}

.ptv-modo-horizontal .ptv-video { object-fit: cover; }

/* HUD só ocupa a faixa do palco, não invade o painel */
.ptv-modo-horizontal .ptv-hud { right: var(--painel-w); }

/* A coluna de interação encosta na borda direita do palco */
.ptv-modo-horizontal .ptv-rail { right: calc(2 * var(--u)); }

.ptv-modo-horizontal .ptv-legenda {
  left: calc(2.4 * var(--u));
  max-width: calc(100% - 12 * var(--u));
}

/* No horizontal o relógio ganha destaque dentro do painel, não no HUD */
.ptv-modo-horizontal .ptv-hud-direita { display: none; }

.ptv-modo-horizontal .ptv-painel .ptv-hud-direita {
  display: flex;
  flex-direction: column;
  gap: calc(1.4 * var(--u));
}

.ptv-modo-horizontal .ptv-painel .ptv-relogio,
.ptv-modo-horizontal .ptv-painel .ptv-tempo {
  background: rgba(253, 250, 247, .07);
  border: 1px solid rgba(226, 205, 186, .18);
  box-shadow: none;
}

/* Na coluna lateral o relógio é o bloco principal: hora e data centralizadas
   dentro do próprio subcard, e não encostadas à esquerda. */
.ptv-modo-horizontal .ptv-painel .ptv-relogio {
  align-items: center;
  text-align: center;
  padding: calc(1.8 * var(--u)) calc(1.6 * var(--u));
}

.ptv-modo-horizontal .ptv-painel .ptv-relogio-hora {
  font-size: calc(7 * var(--u));
}

/* Hora maior no painel pede folga proporcionalmente maior antes da data */
.ptv-modo-horizontal .ptv-painel .ptv-relogio-data {
  text-align: center;
  margin-top: calc(1.7 * var(--u));
}

.ptv-modo-horizontal .ptv-painel .ptv-eventos {
  position: static;
  width: auto;
  max-width: none;
  flex: 1;
  min-height: 0;
  background: rgba(253, 250, 247, .07);
  border: 1px solid rgba(226, 205, 186, .18);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Os três eventos se distribuem pela altura inteira da coluna, em vez de
   empilharem no topo deixando um vão embaixo. */
.ptv-modo-horizontal .ptv-painel .ptv-eventos-lista {
  flex: 1;
  min-height: 0;
  justify-content: space-between;
}

/* Com a coluna inteira disponível, a descrição pode respirar mais */
.ptv-modo-horizontal .ptv-painel .ptv-evento-desc {
  -webkit-line-clamp: 3;
}

/* =============================================================================
   14. Portão de entrada — tela cheia + autoplay
   =============================================================================
   Navegador nenhum entra em tela cheia sem um gesto. Quando o pedido automático
   é recusado, este convite aparece; qualquer tecla, clique ou toque resolve as
   duas coisas de uma vez (tela cheia + liberar áudio). Enquanto ele está no ar,
   o vídeo já está tocando mudo atrás — a TV nunca fica parada.
   ============================================================================= */

.ptv-portao {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  background: rgba(36, 16, 9, .55);
  cursor: pointer;
  transition: opacity var(--dur-slow) var(--ease-suave);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ptv-portao {
    background: rgba(36, 16, 9, .38);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

.ptv-portao[hidden] { display: none; }

.ptv-portao.is-saindo { opacity: 0; pointer-events: none; }

.ptv-portao-simbolo {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: var(--vanilla-300);
  animation: ptv-respirar 3.2s var(--ease-suave) infinite;
}

.ptv-portao-simbolo svg { width: 100%; height: 100%; }

@keyframes ptv-respirar {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.ptv-portao-titulo {
  font-family: var(--font-display);
  font-size: calc(5 * var(--u));
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  color: var(--vanilla-050);
  margin: 0;
  text-align: center;
}

.ptv-portao-texto {
  font-size: calc(1.6 * var(--u));
  letter-spacing: .12em;
  color: var(--vanilla-300);
  text-align: center;
  max-width: calc(60 * var(--u));
}

/* =============================================================================
   15. Tela de erro / pasta vazia
   ============================================================================= */

.ptv-aviso {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.6 * var(--u));
  text-align: center;
  padding: calc(6 * var(--u));
  background: var(--grad-cacau);
}

.ptv-aviso[hidden] { display: none; }

.ptv-aviso-simbolo {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  color: var(--brown-400);
  opacity: .7;
}

.ptv-aviso-simbolo svg { width: 100%; height: 100%; }

.ptv-aviso-titulo {
  font-family: var(--font-display);
  font-size: calc(4 * var(--u));
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  color: var(--vanilla-100);
  margin: 0;
}

.ptv-aviso-texto {
  font-size: calc(1.6 * var(--u));
  color: var(--vanilla-300);
  max-width: calc(70 * var(--u));
  line-height: 1.5;
}

.ptv-aviso-dica {
  font-family: var(--font-mono);
  font-size: calc(1.3 * var(--u));
  color: var(--brown-300);
  background: rgba(36, 16, 9, .5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: calc(1 * var(--u)) calc(1.6 * var(--u));
  max-width: calc(80 * var(--u));
  word-break: break-all;
}

/* =============================================================================
   16. Painel de diagnóstico (?debug=1)
   ============================================================================= */

.ptv-debug {
  position: fixed;
  left: calc(2 * var(--u));
  top: calc(2 * var(--u));
  z-index: 95;
  max-width: calc(52 * var(--u));
  max-height: 70vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: calc(1.15 * var(--u));
  line-height: 1.5;
  color: var(--vanilla-100);
  background: rgba(36, 16, 9, .88);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: calc(1.4 * var(--u));
  white-space: pre-wrap;
  word-break: break-word;
}

.ptv-debug[hidden] { display: none; }

.ptv-debug-linha { display: block; }
.ptv-debug-linha--erro  { color: #F0A0A8; }
.ptv-debug-linha--aviso { color: var(--dourado); }
.ptv-debug-linha--ok    { color: #A8C68F; }

/* =============================================================================
   17. Acessibilidade e preferências do sistema
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  /* Só o que é enfeite para de vez. */
  .ptv-rail-disco,
  .ptv-portao-simbolo,
  .ptv-seg--piscar {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* A faixa rolante e os ícones de tempo NÃO param: aqui eles são conteúdo, não
     decoração. A faixa existe para entregar mais texto do que cabe na tela, e o
     ícone animado é como a previsão se lê de longe. Numa TV de loja essa
     preferência quase sempre vem herdada do sistema, não de uma escolha de quem
     está olhando — então desacelera, em vez de congelar. */
  .ptv-ticker-trilha { animation-duration: 240s !important; }

  .ptv-i-raios   { animation-duration: 30s !important; }
  .ptv-i-cristal { animation-duration: 40s !important; }
  .ptv-i-sol,
  .ptv-i-nuvem,
  .ptv-i-nuvem2,
  .ptv-i-linha   { animation-duration: 12s !important; }
  .ptv-i-gota,
  .ptv-i-floco   { animation-duration: 4s !important; }
  .ptv-i-luz     { animation-duration: 6s !important; }
  .ptv-video,
  .ptv-still,
  .ptv-progresso,
  .ptv-portao { transition-duration: .001ms !important; }
}

.ptv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}