/* Navegador antigo (2026-10-29): o Chrome 72 que vem de fabrica na TV Box SmartPro PROSB3000 (e
   nao atualiza pela Play Store da TV) ignora min(), clamp(), aspect-ratio e inset -- as margens
   sumiam, os titulos perdiam o tamanho e o video sumia. Este bloco so' vale para navegador SEM
   min() (Chrome < 79): os atuais pulam tudo. O espacamento de linhas flexiveis (gap) fica em
   /assets/legado.js. Usado pelo site e pelas paginas com /assets/site-conteudo.css. */
@supports not (width: min(1px, 2px)) {
  /* "html " na frente de cada seletor: vence as regras do site que vem depois na pagina (mesmo
     seletor + 1), sem !important. */
  /* width: min(1120px, calc(100% - 40px)) */
  html .wrap, html #planos .wrap.narrow { width: calc(100% - 40px); max-width: 1120px; }

  /* clamp(): o maior valor a partir de 860 px (a TV Box usa 1280, como o app); o menor abaixo. */
  html .hero-copy h1 { font-size: 32px; }
  html .hero-sub { font-size: 20px; }
  html .lead { font-size: 17px; }
  html .hero-video-quadro p { font-size: 22px; }
  html .section h2 { font-size: 42px; }
  html .pagina h1 { font-size: 44px; }
  @media (max-width: 859px) {
    html .hero-copy h1 { font-size: 26px; }
    html .hero-sub { font-size: 17px; }
    html .lead { font-size: 15px; }
    html .hero-video-quadro p { font-size: 16px; }
    html .section h2 { font-size: 28px; }
    html .pagina h1 { font-size: 30px; }
  }

  /* aspect-ratio: 16 / 9 -> altura pela largura (padding-top 56,25%) e conteudo por cima. */
  html .hero-video-quadro { height: 0; padding-top: 56.25%; }
  html .hero-video-quadro > * { position: absolute; left: 24px; right: 24px; }
  html .hero-video-quadro > :first-child { top: 22px; }
  html .hero-video-quadro > :last-child { bottom: 22px; }
  html .hero-video-quadro.com-player { height: auto; padding: 0; }
  html .hero-video-quadro.com-player > * { position: static; }
  /* O iframe do video unico (site e Portal) nao aceita a altura por padding: /assets/legado.js da' a
     altura pela largura (16:9). */
  html .vh-palco { height: 0; padding-top: 56.25%; }
  html .vh-palco > .vh-trilho { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  html .vd-quadro { height: 0; padding-top: 56.25%; }

  /* Rodape em cartao: padding max(32px, calc((100% - 48px - 1120px) / 2)). */
  @media (min-width: 860px) {
    html footer.rodape-portal { padding: 24px 32px; }
  }
  @media (min-width: 1232px) {
    html footer.rodape-portal { padding-left: calc((100% - 1168px) / 2); padding-right: calc((100% - 1168px) / 2); }
  }

  /* Tutoriais, um video so' no grupo (no site: .vd-lista:has(> .vd-card:only-child), sem :has()
     aqui): o cartao ocupa as duas colunas, ate' 678 px -- o mesmo tamanho. */
  @media (min-width: 860px) {
    html .vd-lista > .vd-card:only-child { grid-column: 1 / -1; max-width: 678px; }
  }

  /* inset: 0 */
  html .hero-video-quadro iframe, html .vh-palco iframe, html .vd-quadro iframe, html .vd-capa { top: 0; right: 0; bottom: 0; left: 0; }

  /* --- Portal do Cliente (2026-10-29): mesmos casos, seletores do Portal --------------------------- */
  html.verificando #tela-carregando { top: 0; right: 0; bottom: 0; left: 0; }
  /* clamp(): o maior valor a partir de 860 px (a TV Box usa 1280); o menor abaixo. */
  html .portal-planos-titulo { font-size: 28px; }
  html body .home-cliente .portal-planos-titulo { font-size: 42px; }
  html body main .dl-titulo { font-size: 44px; }
  @media (max-width: 859px) {
    html .portal-planos-titulo { font-size: 22px; }
    html body .home-cliente .portal-planos-titulo { font-size: 28px; }
    html body main .dl-titulo { font-size: 30px; }
  }
  /* Rodape em cartao do Portal: padding 22px max(32px, calc((100% - 48px - 1120px) / 2)). */
  @media (min-width: 860px) {
    html .rodape-home.rodape-fora { padding: 22px 32px; }
  }
  @media (min-width: 1232px) {
    html .rodape-home.rodape-fora { padding-left: calc((100% - 1168px) / 2); padding-right: calc((100% - 1168px) / 2); }
  }
}