/* css/app.css */
/* GERADO por tools/build-css.js a partir de app.src.css. Não edite aqui. */
/* Tela fixa de 1920x1080, ampliada ou reduzida para caber na janela. Margens de 96px (área segura).
   ARQUIVO-FONTE: edite este e gere css/app.css com tools/build-css.js. O app.css gerado não usa variáveis,
   grid, gap nem inset, porque as TVs Samsung de 2016 a 2021 não entendem esses recursos.
   Aqui também não use grid, gap nem inset: espaçamento entre itens é margem nos filhos. */
:root{
  --bg: #070e1c; --surf: #131A2B; --surf2: #1B2338; --ink: #EEF0F7; --mut: #8A92AC; --acc: #3d8bff; --danger: #EF4444;
  --display: "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; --body: "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;
  --safe-x: 96px;
  --lv-bg: #0C1120; --lv-card: #161D30; --lv-acc: #3d8bff; --lv-amber: #1e60f2;
}
*{ box-sizing: border-box; }
html, body{ margin: 0; height: 100%; background: #000; overflow: hidden; }
#stage{ position: absolute; width: 1920px; height: 1080px; -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #070e1c; color: #EEF0F7;
  font: 500 28px/1.35 "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; overflow: hidden; }
[hidden]{ display: none !important; }
button{ font: inherit; color: inherit; border: 0; background: none; }
h1, h2{ font-family: "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; margin: 0; }
.muted{ color: #8A92AC; } .small{ font-size: 22px; } .accent{ color: #3d8bff; font-weight: 700; }
.err{ color: #FCA5A5; }
.eyebrow{ margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3d8bff; }

/* Foco (Luma Play): anel âmbar + halo, igual em todo o app; dá para ver de longe, no sofá */
[data-f]{ outline: none; transition: box-shadow .12s ease, background .12s ease, -webkit-transform .12s ease; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, -webkit-transform .12s ease; }
.focused{ box-shadow: 0 0 0 4px #3d8bff, 0 0 0 10px rgba(61,139,255,.2), 0 18px 40px rgba(0,0,0,.45) !important; }

/* Barra superior (Início): menu em pílula flutuando sobre o destaque; data, hora e Conta à direita.
   Sem desfoque (backdrop-filter): nas TVs de 2016 a 2018 ele pesa; a pílula usa cor quase sólida. */
#topbar{ position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 190px; padding: 44px 96px 0;
  display: -webkit-flex;
  display: flex; -webkit-align-items: flex-start; align-items: flex-start; background: linear-gradient(rgba(10,14,25,.82), rgba(10,14,25,0)); }
#topbar.solid{ background: linear-gradient(#070e1c 72%, rgba(10,14,25,0)); }
.tb-pill{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 92px; padding: 0 12px 0 22px; border-radius: 46px; background: rgba(20,20,23,.88); border: 2px solid rgba(255,255,255,.1); }
.brand > * + *{ margin-left: 14px; }
.brand{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font: 700 30px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; white-space: nowrap; }
.brand-mark{ width: 64px; height: 64px; border-radius: 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: linear-gradient(135deg, #3d8bff, #C97A16);
  font: 700 36px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #fff; }
.tb-pill .brand-mark{ width: 54px; height: 54px; border-radius: 14px; font-size: 30px; }
.tb-pill .brand-logo.top{ max-height: 54px; max-width: 260px; }
.brand-mark.big{ width: 110px; height: 110px; font-size: 64px; border-radius: 24px; }
.tb-sep{ width: 2px; height: 44px; background: rgba(255,255,255,.18); margin: 0 14px 0 26px; }
#menu{ display: -webkit-flex; display: flex; }
.menu-item + .menu-item{ margin-left: 6px; }
.menu-item{ height: 68px; padding: 0 30px; border-radius: 34px; color: rgba(245,245,245,.82); font-size: 28px; font-weight: 600; }
.menu-item.on{ background: #3d8bff; color: #1A1205; font-weight: 700; box-shadow: 0 8px 26px rgba(61,139,255,.45); }
.menu-item.focused{ background: rgba(255,255,255,.16); color: #EEF0F7; box-shadow: 0 0 0 4px #3d8bff !important; }
.menu-item.on.focused{ background: #3d8bff; color: #1A1205; box-shadow: 0 0 0 4px #3d8bff, 0 8px 26px rgba(61,139,255,.55) !important; }
.tb-right{ margin-left: auto !important; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 92px; }
.tb-date{ font-size: 28px; color: rgba(245,245,245,.9); white-space: nowrap; }
.clock{ color: #EEF0F7; font-size: 28px; font-weight: 700; margin-left: 18px; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.tb-ic{ width: 76px; height: 76px; margin-left: 30px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(20,20,23,.88); border: 2px solid rgba(255,255,255,.2); color: #EEF0F7; }
.tb-ic.focused{ background: #3d8bff; border-color: #3d8bff; box-shadow: 0 0 0 4px #3d8bff !important; }

#screen{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.page{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 150px 0 60px; }
.center{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.center.col{ -webkit-flex-direction: column; flex-direction: column; }
.center.col > * + *{ margin-top: 24px; }
.spinner{ width: 72px; height: 72px; border-radius: 50%; border: 6px solid #1B2338; border-top-color: #3d8bff; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Botões */
.btn{ padding: 0 34px; height: 72px; border-radius: 36px; background: rgba(255,255,255,.14); font-weight: 600; white-space: nowrap; }
.btn.primary{ background: #EEF0F7; color: #070e1c; font-weight: 700; }
.btn.danger{ background: rgba(239,68,68,.25); }
.actions{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: -20px; }
.actions > *{ margin: 0 20px 20px 0; }

/* Destaque */
.hero{ position: relative; margin: 0 96px 40px; height: 480px; border-radius: 24px; overflow: hidden; background: #131A2B; }
.hero-bg, .detail-bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; }
.hero-bg.blur, .detail-bg.blur{ -webkit-filter: blur(36px) brightness(.55) saturate(1.2); filter: blur(36px) brightness(.55) saturate(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
.hero-shade{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(10,14,25,.94) 0%, rgba(10,14,25,.6) 55%, rgba(10,14,25,.15) 85%); }
.hero-poster{ position: absolute; right: 64px; top: 60px; width: 240px; height: 360px; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.hero-body{ position: relative; padding: 48px 64px; max-width: 1150px; }
/* Pontinhos dos destaques (passam sozinhos) */
.hero-dots{ position: absolute; right: 64px; top: 22px; }
.hero-dots i{ display: inline-block; width: 12px; height: 12px; margin-left: 10px; border-radius: 6px; background: rgba(255,255,255,.4); transition: width .3s; }
.hero-dots i.on{ width: 34px; background: #fff; }
/* Logo do revendedor */
.brand-logo{ display: block; width: auto; height: auto; }
.brand-logo.top{ max-height: 100px; max-width: 480px; } /* Meza 28/10: logo pequena em algumas telas */
.brand-logo.sm{ max-height: 40px; max-width: 200px; }
.hero h1{ font-size: 64px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta{ color: #8A92AC; margin: 12px 0; }
.plot{ margin: 0 0 28px; max-width: 900px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Fileiras e capas */
.row{ margin-bottom: 36px; }
.row h2{ font-size: 34px; font-weight: 600; margin: 0 96px 18px; }
.row-items{ display: -webkit-flex; display: flex; overflow: hidden; padding: 14px 96px 20px; }
.row-items > * + *{ margin-left: 32px; }
.poster{ -webkit-flex: none; flex: none; width: 220px; border-radius: 14px; }
.poster .art{ position: relative; height: 330px; border-radius: 14px; background-size: cover; background-position: center; overflow: hidden; }
.poster.wide{ width: 400px; } .poster.wide .art{ height: 225px; }
.poster.focused{ -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: none !important; }
.poster.focused .art{ box-shadow: 0 0 0 5px #3d8bff, 0 0 28px 6px rgba(61,139,255,.55); }
.art-title{ position: absolute; left: 16px; right: 16px; bottom: 22px; font: 700 26px/1.15 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.poster .fav{ position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.6); color: #FACC15; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 24px; }
.bar{ position: absolute; left: 14px; right: 14px; bottom: 12px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.bar i{ display: block; height: 100%; background: #3d8bff; border-radius: 4px; }
.bar.big{ position: relative; left: 0; right: 0; bottom: 0; height: 10px; margin: 20px 0; max-width: 700px; }
.cap{ margin-top: 14px; font-weight: 600; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub{ color: #8A92AC; font-size: 22px; }

/* Grade */
.grid-screen{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 170px 96px 0; display: -webkit-flex; display: flex; }
.grid-screen > .cats{ -webkit-flex: none; flex: none; width: 380px; }
.grid-screen > .grid-main{ -webkit-flex: 1; flex: 1; margin-left: 56px; }
.cats{ overflow: hidden; padding: 6px 8px 40px; height: 860px; }
.cat{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 14px 22px; border-radius: 12px; color: #8A92AC; margin-bottom: 6px; }
.cat.on{ background: #1B2338; color: #EEF0F7; font-weight: 700; box-shadow: inset 6px 0 0 #3d8bff; }
.cat .n{ -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; -webkit-flex: none; flex: none; margin-left: 12px; }
/* Nome de categoria longo: uma linha só, cortado com reticências */
.cats .cat > .cat-name, .cat .cat-name{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cat-ic{ -webkit-flex: none; flex: none; }
.grid-main{ min-width: 0; }
.grid-head{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; margin-bottom: 18px; }
.grid-head > * + *{ margin-left: 20px; }
.grid-head h1{ font-size: 48px; }
/* 5 capas por linha: 5 x 220 + 4 x 34 */
.grid{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: flex-start; align-content: flex-start; width: 1264px; height: 780px; overflow: hidden; padding: 14px 14px 40px; box-sizing: content-box; }
.grid > .poster{ margin: 0 34px 36px 0; }
.grid > .poster:nth-child(5n){ margin-right: 0; }
.empty{ margin-top: 40px; max-width: 800px; }

.hint{ color: #8A92AC; font-size: 24px; margin-top: 18px; }
.key{ display: inline-block; min-width: 44px; padding: 2px 10px; margin-right: 6px; border-radius: 8px; background: rgba(255,255,255,.16); color: #EEF0F7; font-weight: 700; font-size: 20px; text-align: center; }

/* Detalhe */
.detail{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.detail-shade{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #070e1c 0%, rgba(10,14,25,.92) 45%, rgba(10,14,25,.45) 85%), linear-gradient(0deg, #070e1c 5%, transparent 55%); }
.detail-body{ padding-top: 120px; }
.detail-top > * + *{ margin-left: 56px; }
.detail-top{ display: -webkit-flex; display: flex; margin: 0 192px 48px; -webkit-align-items: flex-start; align-items: flex-start; }
.detail-poster{ position: relative; -webkit-flex: none; flex: none; width: 300px; height: 450px; border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; }
.detail-text{ min-width: 0; max-width: 1150px; }
.detail-text h1{ font-size: 68px; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail-text .plot{ -webkit-line-clamp: 4; }
.credits{ font-size: 22px; margin: -12px 0 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.credits:empty{ display: none; }
.ep-plot{ margin: 0 192px 24px; height: 98px; font-size: 24px; max-width: 1400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.detail-body .row h2, .detail-body .row-items{ padding-left: 192px; margin-left: 0; }
.detail-body .row-items{ padding-top: 22px; }
.badge{ display: inline-block; border: 2px solid rgba(255,255,255,.5); border-radius: 6px; padding: 0 10px; margin-left: 8px; font-weight: 700; color: #EEF0F7; }

/* Ativação: QR Code para o teste grátis + MAC e chave para o revendedor */
.act{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 64px 128px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  background: linear-gradient(115deg, rgba(61,139,255,.16) 0%, transparent 38%), linear-gradient(295deg, rgba(80,110,255,.14) 0%, transparent 45%), #070e1c; }
.act-top{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; height: 72px; }
.act-clock{ font: 700 40px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #8A92AC; }
.act-panel{ -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.act-qr{ -webkit-flex: none; flex: none; text-align: center; margin-right: 110px; }
.qr-frame{ display: inline-block; padding: 30px; border-radius: 36px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 10px rgba(61,139,255,.18); }
.qr-img{ display: block; image-rendering: pixelated; }
.act-qr p{ margin: 30px 0 0; font-size: 26px; font-weight: 600; color: #8A92AC; }
.act-info{ -webkit-flex: none; flex: none; width: 1000px; }
.act-info h1{ font-size: 76px; line-height: 1.05; margin-bottom: 40px; }
.act-steps{ list-style: none; margin: 0 0 48px; padding: 0; }
.act-steps li{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 32px; }
.act-steps li + li{ margin-top: 22px; }
.act-steps i{ -webkit-flex: none; flex: none; width: 54px; height: 54px; line-height: 48px; margin-right: 24px; border-radius: 50%; text-align: center; font: 700 26px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-style: normal;
  color: #3d8bff; border: 3px solid rgba(61,139,255,.55); }
.act-ids{ display: -webkit-flex; display: flex; }
.act-id{ padding: 20px 30px; border-radius: 20px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1); }
.act-id + .act-id{ margin-left: 22px; }
.act-id span{ display: block; font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A92AC; }
.act-id b{ display: block; margin-top: 6px; white-space: nowrap; font: 700 46px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: .03em; }
.act-id.key b{ color: #3d8bff; letter-spacing: .1em; }
.act-status{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 36px 0 0; font-size: 26px; color: #8A92AC; }
.act-status .pulse{ -webkit-flex: none; flex: none; width: 16px; height: 16px; margin-right: 16px; border-radius: 50%; background: #3d8bff; -webkit-animation: pulse 1.6s ease-in-out infinite; animation: pulse 1.6s ease-in-out infinite; }
.act-status.err{ color: #FCA5A5; }
.act-status.err .pulse{ background: #EF4444; -webkit-animation: none; animation: none; }
@-webkit-keyframes pulse { 0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: .35; -webkit-transform: scale(.7); transform: scale(.7); } }
@keyframes pulse { 0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: .35; -webkit-transform: scale(.7); transform: scale(.7); } }
.act.over .act-steps, .act.over .act-qr{ display: none; }
.act.over .eyebrow{ color: #EF4444; }
.act-foot{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; font-size: 22px; color: #8A92AC; }
.act-foot b{ color: #EEF0F7; }
/* Carregando: logo (com o ✓ de acesso liberado na primeira vez), círculo e texto */
.boot{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(61,139,255,.16), transparent 50%), #070e1c; }
.boot > * + *{ margin-top: 34px; }
.boot h1{ font-size: 64px; }
.boot p{ margin-top: 26px; font-size: 28px; }
.boot-check{ display: inline-block; vertical-align: middle; margin-right: 22px; }
.boot-check svg{ display: block; width: 72px; height: 72px; fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.boot-check circle{ stroke: #34D399; stroke-dasharray: 150; stroke-dashoffset: 150; -webkit-animation: draw .6s ease-out forwards; animation: draw .6s ease-out forwards; }
.boot-check path{ stroke: #34D399; stroke-dasharray: 40; stroke-dashoffset: 40; -webkit-animation: draw .4s .5s ease-out forwards; animation: draw .4s .5s ease-out forwards; }
.boot-ok{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 56px; }
.brand-logo.boot-logo{ max-height: 170px; max-width: 560px; -webkit-animation: bootIn .5s ease-out both; animation: bootIn .5s ease-out both; }
@-webkit-keyframes bootIn { from { opacity: 0; -webkit-transform: scale(.92); transform: scale(.92); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes bootIn { from { opacity: 0; -webkit-transform: scale(.92); transform: scale(.92); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.device{ position: absolute; left: 192px; bottom: 80px; }

/* Diálogo e aviso */
#dialog{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; background: rgba(0,0,0,.7); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.dialog-box{ width: 820px; background: #131A2B; border-radius: 28px; padding: 56px; }
.dialog-box > * + *{ margin-top: 24px; }
.dialog-box h2{ font-size: 44px; }
.dialog-box label{ display: block; color: #8A92AC; }
.dialog-box input{ font: inherit; color: #EEF0F7; background: #1B2338; border: 0; border-radius: 14px; padding: 18px 22px; outline: none; display: block; width: 100%; margin-top: 10px; }
#toast{ position: absolute; z-index: 30; left: 50%; bottom: 80px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #EEF0F7; color: #070e1c; padding: 18px 36px; border-radius: 36px; font-weight: 700; }

/* Vídeo: camada embaixo da interface */
#media{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
#media video{ background: #000; object-fit: contain; }
#screen{ z-index: 1; }
body.media-on, body.media-on #stage{ background: transparent; }
html.media-on{ background: transparent; }
body.media-full #screen, body.media-full #topbar{ visibility: hidden; }

/* Player */
#player{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: transparent; }
.osd{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between; padding: 72px 96px 56px;
  background: linear-gradient(rgba(0,0,0,.75), transparent 28%, transparent 55%, rgba(0,0,0,.85)); opacity: 0; transition: opacity .3s; }
.osd.show{ opacity: 1; }
.osd h1{ font-size: 56px; max-width: 1500px; }
.osd-bottom{ margin-top: auto; }
.live-bottom{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.live-bottom > * + *{ margin-left: 48px; }
.live-bottom .hint{ margin: 0 0 0 48px; }
.seek-wrap{ margin: 0 8px; }
.seek{ position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,.25); }
.seek i{ position: absolute; left: 0; top: 0; bottom: 0; background: #3d8bff; border-radius: 5px; }
.seek b{ position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.balloon{ position: absolute; bottom: 34px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #EEF0F7; color: #070e1c; font-weight: 700; padding: 8px 18px; border-radius: 12px; white-space: nowrap; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.times{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 16px; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: #8A92AC; }
.ctrls{ display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-top: 8px; }
.ctrl + .ctrl{ margin-left: 56px; }
.ctrl{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; cursor: pointer; }
.ctrl .lb{ margin-top: 8px; }
.ctrl .ic{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 36px; }
.ctrl.main .ic{ width: 112px; height: 112px; background: #EEF0F7; color: #070e1c; font-size: 40px; }
.ctrl .lb{ font-size: 22px; font-weight: 600; }
.ctrl.focused{ box-shadow: none !important; }
.ctrl.focused .ic{ box-shadow: 0 0 0 5px #3d8bff, 0 0 28px 6px rgba(61,139,255,.55); -webkit-transform: scale(1.08); transform: scale(1.08); }
.ctrl.focused .lb{ color: #fff; }
.ctrl-hint{ text-align: center; margin: 18px 0 0; }
/* Áudio e legenda (porta do Max Pro 0.7.13): lista de faixas no lugar dos controles; legenda do arquivo desenhada pelo app (Samsung). */
.trk{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
.trk-row{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-top: 12px; }
.trk-h{ font-size: 22px; font-weight: 700; color: #8A92AC; margin-right: 18px; min-width: 110px; text-align: right; }
.trk-row .btn{ margin: 6px; }
.trk-o.on{ color: #fff; border-color: #3d8bff; }
.trk-none{ font-size: 26px; margin: 8px 0 4px; }
.vsub{ position: absolute; left: 10%; right: 10%; bottom: 70px; text-align: center; font-size: 46px; line-height: 1.25; font-weight: 600; color: #fff;
  text-shadow: 0 0 6px #000, 0 2px 4px #000, 0 0 2px #000; white-space: pre-line; pointer-events: none; }
/* Próximo episódio: cartão no canto de baixo, faltando 30 s para acabar. Com os controles abertos, sobe para cima deles. */
.nxe{ position: absolute; right: 96px; bottom: 72px; z-index: 3; width: 600px; padding: 20px; border-radius: 20px; background: rgba(14,14,16,.94);
  box-shadow: 0 16px 48px rgba(0,0,0,.6); transition: bottom .3s; }
.osd.show ~ .nxe{ bottom: 400px; }
.nxe-pic{ float: left; position: relative; width: 176px; height: 99px; border-radius: 12px; background-size: cover; background-position: center; background-color: #222; }
.nxe-pic span{ position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 7px; background: rgba(0,0,0,.75); font-size: 17px; font-weight: 700; }
.nxe-tx{ margin-left: 196px; min-height: 99px; }
.nxe-tx .eyebrow{ margin: 2px 0 4px; font-size: 17px; }
.nxe-tx h3{ font-size: 27px; line-height: 1.15; margin: 0; max-height: 62px; overflow: hidden; }
.nxe-tx .muted{ margin: 6px 0 0; font-size: 19px; }
.nxe-btns{ clear: both; display: -webkit-flex; display: flex; padding-top: 16px; }
.nxe-btns .btn{ -webkit-flex: 1; flex: 1; font-size: 20px; height: 56px; padding: 0 18px; }
.nxe-btns .btn + .btn{ margin-left: 12px; -webkit-flex: none; flex: none; }
.btn.nxe-go{ position: relative; overflow: hidden; }
.nxe-sec{ opacity: .7; margin-left: 6px; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Menu do OK no ao vivo em tela cheia: fileira de botões, lista de canais e programação do lado, zoom. */
.osd.okm{ background: linear-gradient(rgba(0,0,0,.8), transparent 26%, transparent 40%, rgba(0,0,0,.92)); }
.okbar{ display: -webkit-flex; display: flex; margin: 6px 0 4px; }
.okb{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; width: 176px; text-align: center; cursor: pointer; }
.okb + .okb{ margin-left: 10px; }
.okb .ic{ width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.14); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }
.okb .ic svg, .okz svg, .ctrl .ic svg{ width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.okb .lb{ margin-top: 12px; font-size: 22px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.okb .sub{ font-size: 18px; color: #8A92AC; margin-top: 2px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okb.focused{ box-shadow: none !important; }
.okb.focused .ic{ background: #3d8bff; box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 0 30px 8px rgba(61,139,255,.6); -webkit-transform: scale(1.1); transform: scale(1.1); }
.okb.focused .ic svg{ stroke: #070e1c; }
.okb.on .ic svg{ fill: #1e60f2; stroke: #1e60f2; }
.okb.focused.on .ic svg{ fill: #C98A12; stroke: #C98A12; }
.okd{ position: absolute; top: 0; right: 0; bottom: 0; width: 660px; background: rgba(12,12,15,.95); padding: 56px 36px 40px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; box-shadow: -40px 0 80px rgba(0,0,0,.55); }
.okd-head{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 22px; }
.okd-head .eyebrow{ margin: 0; }
.okd-cat{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-family: "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-size: 34px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.okd-cat .arr{ color: #8A92AC; font-size: 26px; margin: 0 14px; cursor: pointer; }
.okd-cat .arr:first-child{ margin-left: 0; }
.okd-count{ -webkit-flex: none; flex: none; color: #8A92AC; font-size: 20px; margin-left: 16px; }
/* Folga em volta da lista: o contorno e o brilho da linha em foco não são cortados nas bordas. */
.okd-list{ -webkit-flex: 1; flex: 1; overflow: hidden; padding: 16px 20px; margin: -16px -20px 0; }
.okd-empty{ color: #8A92AC; font-size: 24px; margin: 24px 4px; }
.okc{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 104px; padding: 0 18px; border-radius: 16px; margin-bottom: 8px; cursor: pointer; }
.okc > * + *{ margin-left: 18px; }
.okc .num{ width: 54px; -webkit-flex: none; flex: none; color: #8A92AC; font-size: 22px; }
.okc .ch-logo{ width: 72px; height: 72px; border-radius: 14px; background-color: #202941; }
.okc .txt{ -webkit-flex: 1; flex: 1; min-width: 0; }
.okc .nm{ font-size: 26px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okc .pr{ font-size: 20px; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.okc .pb{ height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); margin-top: 8px; overflow: hidden; }
.okc .pb i{ display: block; height: 100%; background: #3d8bff; }
.okc .now{ -webkit-flex: none; flex: none; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #3d8bff; padding: 4px 10px; border-radius: 8px; }
.okc.cur{ background: rgba(61,139,255,.12); }
.okc.focused{ background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px #3d8bff, 0 0 16px 3px rgba(61,139,255,.5) !important; }
.okc.focused .pr{ color: #D6D6DC; }
.okd-hint{ color: #8A92AC; font-size: 20px; margin: 18px 0 0; }
.okd-hint .key{ font-size: 16px; min-width: 36px; }
.okp{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 76px; padding: 0 18px; border-radius: 14px; margin-bottom: 6px; }
.okp > * + *{ margin-left: 22px; }
.okp .tm{ width: 96px; -webkit-flex: none; flex: none; }
.okp .tm b{ display: block; font-size: 24px; }
.okp .tm span{ font-size: 18px; color: #8A92AC; }
.okp .tt{ -webkit-flex: 1; flex: 1; min-width: 0; font-size: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okp .tt .live-badge{ margin-right: 12px; }
.okp.past{ opacity: .5; }
.okp.past.focused{ opacity: 1; }
.okp.on{ box-shadow: inset 0 0 0 2px #3d8bff; background: rgba(61,139,255,.1); }
.okp.on .tm b{ color: #3d8bff; }
.okp.focused{ background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px #3d8bff, 0 0 16px 3px rgba(61,139,255,.5) !important; }
.okdays{ display: -webkit-flex; display: flex; margin: 0 0 18px; }
.okdays span{ padding: 8px 18px; border-radius: 999px; font-size: 20px; font-weight: 600; color: #8A92AC; background: rgba(255,255,255,.08); }
.okdays span + span{ margin-left: 10px; }
.okdays span.on{ background: #fff; color: #070e1c; }
.okz{ position: absolute; width: 440px; background: rgba(20,20,24,.97); border-radius: 20px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.okz h4{ margin: 0 0 14px; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: #3d8bff; }
.okz-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.okz-btn{ width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.14); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 40px; font-weight: 700; cursor: pointer; }
.okz-btn.off{ opacity: .3; }
.okz-val{ font-family: "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-size: 44px; font-weight: 700; }
.okz p{ margin: 14px 0 0; font-size: 20px; color: #8A92AC; }
.live-dot{ color: #F87171; font-weight: 700; }
.player-msg{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(0,0,0,.75); padding: 24px 40px; border-radius: 18px; max-width: 1100px; text-align: center; }

/* Ao vivo: trilho | (grupos) | canais | prévia + programação | dias */
.live{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #0C1120; }
/* Colunas com posição fixa (sem grid): trilho 96 | canais 600 | prévia | dias 76, 24px entre elas.
   Com os grupos abertos: grupos 400 | canais 450 | prévia | dias. */
.live > *{ position: absolute; z-index: 1; top: 112px; bottom: 40px; min-width: 0; }
.live > .lv-top{ top: 36px; bottom: auto; left: 48px; right: 64px; height: 76px; }
.live > .lv-rail{ left: 48px; width: 96px; }
.live > .lv-groups{ left: 48px; width: 400px; }
.live > .lv-list{ left: 168px; width: 600px; }
.live > .lv-main{ left: 792px; right: 164px; }
.live > .lv-days{ right: 64px; width: 76px; }
.live.groups-open > .lv-list{ left: 472px; width: 450px; }
.live.groups-open > .lv-main{ left: 946px; }
/* O painel da prévia fica embaixo dos outros: a sombra que pinta o fundo em volta do vídeo não cobre a lista */
.live > .lv-main{ z-index: 0; }
body.media-on .live{ background: transparent; }
.lv-top{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 30px; }
.lv-top > * + *{ margin-left: 18px; }
.lv-top svg, .lv-head svg{ width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.brand-mark.sm{ width: 40px; height: 40px; border-radius: 10px; font-size: 22px; }
.lv-crumb b{ font-weight: 600; }
.lv-clock{ margin-left: auto; font: 700 44px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.rail-btn + .rail-btn{ margin-top: 14px; }
.lv-rail{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; padding: 18px 0; border-radius: 22px; background: rgba(255,255,255,.04); overflow: hidden; }
.live.groups-open .lv-rail{ display: none; }
.rail-btn{ -webkit-flex: none; flex: none; width: 64px; height: 64px; border-radius: 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #8A92AC; }
.rail-btn svg{ width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn.on{ background: rgba(61,139,255,.22); color: #EEF0F7; }
.rail-btn.menu{ margin-top: auto; }
.lv-groups{ display: none; overflow: hidden; padding: 16px 12px 40px; border-radius: 22px; background: #202941; }
.live.groups-open .lv-groups{ display: block; }
.lv-head{ margin: 4px 10px 14px; font-size: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-groups .cat > * + *{ margin-left: 14px; }
.lv-groups .cat{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 12px 18px; border-radius: 14px; margin-bottom: 6px; color: #EEF0F7; border: 2px solid transparent; }
.lv-groups .cat.fixed{ color: #EEF0F7; font-weight: 600; }
.lv-groups .cat.on{ background: rgba(61,139,255,.25); border-color: #3d8bff; box-shadow: none; }
.cat-ic svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: middle; }
.cat-name{ -webkit-flex: 1; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-groups .cat .n{ color: #8A92AC; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ch-list{ overflow: hidden; height: 870px; padding: 4px; }
.ch-row{ display: -webkit-flex; display: flex; margin-bottom: 8px; }
.ch-row > .ch-star{ margin-left: 10px; }
.ch > * + *{ margin-left: 16px; }
.ch{ -webkit-flex: 1; flex: 1; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 64px; padding: 0 16px; border-radius: 14px; background: #161D30; border: 2px solid transparent; }
.ch .num{ width: 58px; -webkit-flex: none; flex: none; color: #8A92AC; font-size: 24px; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ch-logo{ -webkit-flex: none; flex: none; width: 46px; height: 46px; border-radius: 8px; background: rgba(255,255,255,.06) center / contain no-repeat; }
.ch-logo.none{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 700 22px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #8A92AC; }
.ch-name{ -webkit-flex: 1; flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch.on{ box-shadow: inset 5px 0 0 #3d8bff; }
.ch.on .ch-name{ color: #FFD08A; }
.ch-star{ -webkit-flex: none; flex: none; width: 64px; height: 64px; border-radius: 14px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: #161D30; color: #8A92AC; font-size: 30px; border: 2px solid transparent; }
.ch-star.on{ color: #1e60f2; }
.lv-empty{ padding: 20px 12px; }
/* Foco na tela de canais: borda azul clara e fundo um pouco mais claro */
.live .focused{ box-shadow: none !important; border-color: #FF6B6F !important; background: #2C2C31 !important; }
.live .rail-btn.focused{ border: 2px solid #FF6B6F; }

.ch-preview{ position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 470px; border-radius: 20px; background: #000; overflow: hidden; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.ch-preview.idle .pv-logo .ch-logo{ width: 200px; height: 150px; background-color: transparent; }
.ch-preview.idle .pv-logo .ch-logo.none{ font-size: 90px; }
.pv-hint{ position: absolute; right: 24px; bottom: 18px; margin: 0; color: #8A92AC; font-size: 22px; }
/* Prévia tocando: a caixa fica transparente (o vídeo está embaixo) e a sombra pinta o resto da tela */
.ch-preview.playing{ background: transparent; box-shadow: 0 0 0 4000px #0C1120; }
.ch-preview.playing.loading{ background: rgba(0,0,0,.55); }
.pv-tag{ position: absolute; left: 22px; bottom: 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 8px 16px 8px 8px; border-radius: 12px; background: rgba(0,0,0,.6); max-width: 70%; }
.pv-tag > * + *{ margin-left: 14px; }
.pv-tag .ch-logo{ width: 40px; height: 40px; }
.pv-tag b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 26px; }
.pv-msg{ font: 600 26px "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; background: rgba(0,0,0,.7); padding: 16px 24px; border-radius: 14px; margin: 0 40px; text-align: center; }
.pg-card{ position: absolute; z-index: 1; top: 492px; left: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 20px; background: #161D30; padding: 22px 26px; }
.pg-head{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 14px; }
.pg-head h3{ margin: 0; font: 600 30px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.pg-date{ color: #3d8bff; font-weight: 700; }
.pg-empty{ margin: 30px 0; text-align: center; }
/* Lista de programas: rola dentro do cartão; ▲▼ andam pelos horários */
.pg-list{ position: absolute; top: 78px; left: 26px; right: 26px; bottom: 14px; overflow: hidden; }
.pg-row.past{ opacity: .55; }
.pg-desc{ max-height: 420px; overflow: hidden; line-height: 1.45; }
.pg-row > * + *{ margin-left: 20px; }
.pg-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 66px; padding: 0 14px; margin-bottom: 8px; border-radius: 14px; border: 2px solid transparent; }
.pg-row.on{ border-color: #3d8bff; background: rgba(61,139,255,.1); }
.pg-time{ -webkit-flex: none; flex: none; width: 92px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; line-height: 1.1; }
.pg-time b{ font-size: 26px; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.pg-time span{ font-size: 18px; color: #8A92AC; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.pg-row.on .pg-time b{ color: #3d8bff; }
.pg-title{ -webkit-flex: 1; flex: 1; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.pg-title > * + *{ margin-left: 14px; }
.pg-title span:last-child{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-badge{ -webkit-flex: none; flex: none; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: #1e60f2; background: rgba(30,96,242,.14); border: 1px solid rgba(30,96,242,.5); padding: 3px 10px; border-radius: 8px; }
.lv-days{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; justify-content: space-around; padding: 14px 0; border-radius: 22px; background: #161D30; }
.day{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; color: #8A92AC; line-height: 1.15; margin: 0 8px; padding: 8px 0; border-radius: 14px; border: 2px solid transparent; }
.day b{ font-size: 26px; } .day span{ font-size: 17px; }
.day.on{ color: #EEF0F7; background: rgba(61,139,255,.22); } .day.on b{ font-weight: 800; }

/* Carregamento: 8 pontinhos girando e a velocidade embaixo */
.loader{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
.loader > * + *{ margin-top: 18px; }
.dots{ position: relative; width: 76px; height: 76px; -webkit-animation: spin 1s steps(8) infinite; animation: spin 1s steps(8) infinite; }
.dots i{ position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; -webkit-transform-origin: 7px 38px; transform-origin: 7px 38px; background: #3d8bff; }
.dots i:nth-child(1){ -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
.dots i:nth-child(2){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: .85; background: #3D86E4; }
.dots i:nth-child(3){ -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: .7; background: #5A8FCB; }
.dots i:nth-child(4){ -webkit-transform: rotate(-135deg); transform: rotate(-135deg); opacity: .58; background: #6C93B5; }
.dots i:nth-child(5){ -webkit-transform: rotate(-180deg); transform: rotate(-180deg); opacity: .46; background: #7D97A3; }
.dots i:nth-child(6){ -webkit-transform: rotate(-225deg); transform: rotate(-225deg); opacity: .36; background: #8A99A0; }
.dots i:nth-child(7){ -webkit-transform: rotate(-270deg); transform: rotate(-270deg); opacity: .28; background: #9099A0; }
.dots i:nth-child(8){ -webkit-transform: rotate(-315deg); transform: rotate(-315deg); opacity: .2; background: #9599A0; }
.speed{ min-height: 24px; font-size: 20px; font-weight: 600; letter-spacing: .04em; color: #C5CFDD; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Programação na tela cheia */
.epg{ margin: 6px 0 18px; }
.epg-now, .epg-next{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 8px; }
.epg-now > *, .epg-next > *{ margin-right: 14px; }
.epg-now b{ font-size: 30px; }
.epg-tag{ font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3d8bff; }
.epg-bar{ height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); margin: 4px 0 12px; overflow: hidden; }
.epg-bar i{ display: block; height: 100%; background: #3d8bff; }
.osd-epg{ max-width: 1100px; margin-bottom: 24px; }
.osd-epg .epg{ margin: 0; }
.poster .art.still{ background-size: cover; background-position: center; }

/* Diagnóstico do player */
.diag{ position: absolute; z-index: 3; top: 60px; right: 60px; width: 620px; padding: 26px 30px; border-radius: 20px; background: rgba(8,8,10,.88); border: 1px solid rgba(255,255,255,.12); font-size: 24px; }
/* Conta → Informações técnicas: mesma tabela do diagnóstico, dentro da janela. */
.diag.tech{ position: static; width: auto; margin: 14px 0; padding: 18px 22px; }
.diag h3{ margin: 0 0 12px; font: 700 28px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #3d8bff; }
.diag-row{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.diag-row span{ color: #8A92AC; }
.diag-row b{ font-weight: 600; text-align: right; margin-left: 20px; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.diag-hint{ margin: 12px 0 0; color: #FCD34D; font-size: 22px; }
.diag-hint:empty{ display: none; }

/* Temporadas da série */
.seasons{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 8px 192px -8px; }
.seasons > *{ margin: 0 14px 14px 0; }
.season{ padding: 12px 30px; border-radius: 32px; background: #1B2338; color: #8A92AC; font-weight: 600; font-size: 26px; }
.season.on{ background: #EEF0F7; color: #070e1c; }
.ep-section{ margin-bottom: 8px; }
/* Série: topo mais compacto para temporadas, episódios e sinopse caberem na tela sem rolar */
.detail.series .detail-body{ padding-top: 64px; }
.detail.series .detail-top{ margin-bottom: 24px; }
/* v0.6.32: detalhe da série cabe na tela sem rolar; sinopse em 3 linhas (a do episódio focado usa o mesmo lugar). */
.detail.series .detail-text .plot{ -webkit-line-clamp: 3; min-height: 3em; }
.detail.series .detail-poster{ width: 260px; height: 390px; }
/* Grupos do Ao vivo: ícone fixo à esquerda e o nome logo depois, igual aos outros grupos */
.lv-groups .cat > .cat-ic{ -webkit-flex: none; flex: none; width: 26px; }
.lv-groups .cat > .cat-name{ -webkit-flex: 1 1 auto; flex: 1 1 auto; text-align: left; }

/* Filmes e Séries: "Continuar assistindo" e "Pesquisar" no topo das categorias */
.cats .cat{ -webkit-align-items: center; align-items: center; }
.cats .cat > .cat-ic{ -webkit-flex: none; flex: none; width: 26px; margin-right: 14px; }
.cats .cat > .cat-name{ -webkit-flex: 1 1 auto; flex: 1 1 auto; text-align: left; }
.cats .cat.fixed{ color: #EEF0F7; font-weight: 600; }

/* Filmes, Séries e Favoritos em tela própria, no molde dos Canais: cabeçalho | categorias 400 | grade */
.vod{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #0C1120; }
.vod > *{ position: absolute; z-index: 1; top: 112px; bottom: 40px; min-width: 0; }
.vod > .lv-top{ top: 36px; bottom: auto; left: 48px; right: 64px; height: 76px; }
.vod > .lv-groups{ display: block; left: 48px; width: 400px; height: auto; }
.vod > .vod-main{ left: 496px; right: 64px; padding-top: 6px; }
.vod .lv-groups .cat > .cat-ic{ margin-right: 0; }
.vod .lv-groups .cat.on{ color: #EEF0F7; font-weight: 700; }
.vod .lv-groups .cat.focused{ box-shadow: none !important; border-color: #FFD08A; background: #2C2C31; }
.vod .grid{ height: 800px; }

/* Teclado na tela da pesquisa */
.kb-q{ height: 72px; line-height: 72px; padding: 0 22px; margin-bottom: 16px; border-radius: 14px; background: #202941; font-size: 34px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 2px solid #3d8bff; }
.kb-q.empty{ color: #8A92AC; font-weight: 400; border-color: transparent; }
.kb-row{ display: -webkit-flex; display: flex; }
.kb-key{ -webkit-flex: 1 1 0; flex: 1 1 0; height: 68px; line-height: 68px; margin: 0 8px 8px 0; text-align: center; border-radius: 12px; background: #161D30; color: #EEF0F7; font-size: 30px; font-weight: 600; border: 2px solid transparent; }
.kb-key.wide{ font-size: 24px; }
.kb-key:last-child{ margin-right: 0; }
.kb-key.focused{ box-shadow: none !important; border-color: #FFD08A; background: #3d8bff; color: #1A1205; }
.kb-n{ min-height: 34px; margin: 10px 0 0; }
.vod-main.search{ display: -webkit-flex; display: flex; }
.vod-main.search .kb-box{ -webkit-flex: none; flex: none; width: 520px; }
/* Teclado estreito da pesquisa: as teclas de baixo (Espaço, áç&, Apagar, Limpar) do tamanho do texto, sem quebrar linha. */
.vod-main.search .kb-key.wide{ -webkit-flex: 1 1 auto; flex: 1 1 auto; padding: 0 8px; white-space: nowrap; font-size: 22px; }
.vod-results{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-left: 40px; }
.vod-main.search .grid-head h1{ font-size: 36px; }
.vod-main.search .empty{ margin-top: 10px; }
.grid.narrow{ width: 728px; height: 780px; }
.grid.narrow > .poster{ margin-right: 34px; }
.grid.narrow > .poster:nth-child(3n){ margin-right: 0; }

/* Painel do título em foco (Filmes e Séries) e grade com 6 colunas */
.vod-main{ overflow: hidden; }
/* Fundo da grade numa camada própria (Meza 11/10, ▲▼ lento na TV Samsung): sem ela, o fundo desfocado (blur 20px) era
   pintado de novo junto com a grade a cada quadro da rolagem suave. Nada muda no que aparece na tela. */
.vod-bg{ position: absolute; z-index: 0; top: -112px; right: -64px; width: 1100px; height: 560px; background-size: cover; background-position: center top; opacity: .45; will-change: transform; }
.vod-bg.blur{ -webkit-filter: blur(20px); filter: blur(20px); opacity: .25; }
.vod-bg:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #0C1120 0%, rgba(14,14,17,.6) 45%, rgba(14,14,17,0) 100%), linear-gradient(0deg, #0C1120 0%, rgba(14,14,17,0) 60%); }
.vod-info{ position: relative; z-index: 1; height: 222px; padding-right: 300px; }
.vod-info h1{ font-size: 46px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vod-info .meta{ margin: 8px 0; font-size: 24px; }
.vi-plot{ margin: 0; max-width: 900px; font-size: 22px; color: #8A92AC; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sort-btn{ position: absolute; top: 14px; right: 34px; font-size: 22px; padding: 10px 22px; }
.grid.vod-grid{ position: relative; z-index: 1; width: 1326px; height: 690px; padding: 12px 14px 30px; }
.grid.vod-grid > .poster{ width: 190px; margin: 0 32px 30px 0; }
.grid.vod-grid > .poster:nth-child(5n){ margin-right: 32px; }
.grid.vod-grid > .poster:nth-child(6n){ margin-right: 0; }
.grid.vod-grid > .poster .art{ height: 285px; }
.grid.vod-grid > .poster .cap{ font-size: 22px; }
.pb-year{ position: absolute; left: 10px; top: 10px; padding: 2px 10px; border-radius: 8px; background: rgba(0,0,0,.65); font-size: 18px; font-weight: 700; color: #fff; }
.pb-new{ position: absolute; left: 10px; top: 10px; padding: 2px 10px; border-radius: 8px; background: #3d8bff; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: #1A1205; }
/* Buscas recentes embaixo do teclado */
.kb-recent{ margin-top: 14px; }
.kb-recent-t{ margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.chip{ display: inline-block; margin: 0 10px 10px 0; padding: 8px 18px; border-radius: 999px; background: #161D30; color: #EEF0F7; font-size: 22px; border: 2px solid transparent; }
.chip.focused{ box-shadow: none !important; border-color: #FFD08A; background: #3d8bff; color: #1A1205; }
.dialog-box .kb-recent{ margin-top: 16px; }

/* Futebol: cartões de jogo (Início e tela Futebol) */
.fb-card{ -webkit-flex: none; flex: none; width: 520px; padding: 18px 22px; border-radius: 18px; background: #161D30; border: 2px solid transparent; box-sizing: border-box; }
.fb-card.wide{ width: 640px; display: inline-block; vertical-align: top; margin: 0 24px 24px 0; }
.fb-card.wide:nth-child(2n){ margin-right: 0; }
.fb-card.focused{ box-shadow: none !important; border-color: #FFD08A; background: #2C2C31; }
.fb-card.is-live{ border-color: rgba(255,94,72,.55); }
.fb-card.is-live.focused{ border-color: #FF6B6F; }
.fb-top{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 20px; color: #8A92AC; }
.fb-top > * + *{ margin-left: 10px; }
.fb-league{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-live{ -webkit-flex: none; flex: none; padding: 2px 10px; border-radius: 8px; background: #FF5E48; color: #fff; font-weight: 800; font-size: 18px; }
.fb-end, .fb-day{ -webkit-flex: none; flex: none; font-weight: 700; color: #8A92AC; }
.fb-teams{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 16px 0 12px; }
.fb-team{ -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 26px; font-weight: 700; }
.fb-team span:not(.crest){ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-team > * + *{ margin-left: 12px; }
.fb-team.away{ -webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; }
.crest{ -webkit-flex: none; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff center / 80% no-repeat; display: inline-block; }
.crest.sm{ width: 28px; height: 28px; background-size: 85%; }
.crest.txt{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: #2B3D5E; color: #fff; font-size: 24px; }
.score, .ko{ -webkit-flex: none; flex: none; margin: 0 16px; font: 800 36px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.ko{ color: #3d8bff; }
.fb-ch{ font-size: 20px; color: #EEF0F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-list{ height: 830px; overflow: hidden; padding: 6px 4px 30px; }
.lv-head.fb-sub{ margin-top: 22px; }
.fb-pick{ margin: 18px 0; }
.fb-pick .btn{ margin: 0 12px 12px 0; }
.fb-card{ width: 460px; }
.fb-rows{ position: relative; margin: 14px 0 10px; }
.fb-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 56px; font-size: 26px; font-weight: 700; }
.fb-row > * + *{ margin-left: 12px; }
.fb-row .crest{ width: 42px; height: 42px; }
.fb-row span:not(.crest){ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-row b{ -webkit-flex: none; flex: none; font: 800 32px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; margin-right: 6px; }
.fb-rows .ko.side{ position: absolute; right: 0; top: 50%; margin: -24px 0 0; font-size: 36px; }
.fb-rows.sched .fb-row{ padding-right: 120px; }
/* Escolha do canal de um jogo: grade simples, 2 colunas */
.fb-grid{ max-height: 560px; overflow: hidden; margin: 18px 0 8px; padding: 4px; }
.fb-tile{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; vertical-align: top; width: 336px; height: 72px; margin: 0 12px 12px 0; padding: 0 16px; box-sizing: border-box; border-radius: 14px; background: #161D30; border: 2px solid transparent; overflow: hidden; }
.fb-tile:nth-child(2n){ margin-right: 0; }
.fb-tile .ch-logo{ margin-right: 14px; }
.fb-tile .ch-name{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; font-weight: 600; }
.fb-tile.focused{ box-shadow: none !important; border-color: #FFD08A; background: #3d8bff; color: #1A1205; }

/* ---------- v0.6.19: Conta em tela cheia ---------- */
.vod > .acc-main{ left: 48px; right: 64px; top: 140px; overflow: hidden; }
.acc-row{ display: -webkit-flex; display: flex; margin-bottom: 28px; }
.acc-row > .acc-card + .acc-card{ margin-left: 28px; }
.acc-card{ -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; background: #161D30; border: 2px solid rgba(255,255,255,.06); border-radius: 22px; padding: 30px 34px; }
.acc-card.ok{ border-color: rgba(52,199,123,.35); }
.acc-card.bad{ border-color: rgba(255,92,92,.5); }
.acc-card.warn{ border-color: rgba(30,96,242,.5); }
.acc-h{ margin: 0 0 14px; font-size: 24px; color: #8A92AC; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.acc-h svg{ width: 30px; height: 30px; margin-right: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acc-state{ margin: 0 0 16px; font-size: 46px; font-weight: 800; line-height: 1.1; }
.acc-card.ok .acc-state{ color: #34C77B; }
.acc-card.bad .acc-state{ color: #FF6B6B; }
.acc-card.warn .acc-state{ color: #1e60f2; }
.acc-card.dev .acc-state{ font-size: 38px; letter-spacing: 1px; font-family: monospace; }
.acc-line{ margin: 0 0 10px; font-size: 25px; line-height: 1.35; }
.acc-line .small{ font-size: 20px; }
.acc-tag{ display: inline-block; padding: 4px 14px; border-radius: 99px; background: rgba(61,139,255,.22); color: #FFD08A; font-size: 21px; font-weight: 700; }
.acc-warn{ color: #1e60f2; font-weight: 700; }
.acc-bad{ color: #FF6B6B; font-weight: 700; }
.acc-actions{ -webkit-flex: 0 0 520px; flex: 0 0 520px; }
.acc-actions .btn{ display: block; width: 100%; margin: 0 0 16px; text-align: left; font-size: 26px; }

/* ---------- v0.6.66: Conta enxuta: um cartão de assinatura à esquerda e as opções em quatro grupos ---------- */
.acc2{ display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; }
.acc2 .acc-sum{ -webkit-flex: 0 0 640px; flex: 0 0 640px; padding: 34px 38px; }
.acc-sum .acc-state{ font-size: 54px; }
.acc-kvs{ margin-top: 22px; padding-top: 18px; border-top: 2px solid rgba(255,255,255,.07); }
.acc-kv{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; font-size: 24px; line-height: 1.35; margin-bottom: 10px; }
.acc-kv > span{ -webkit-flex: 0 0 200px; flex: 0 0 200px; color: #8A92AC; }
.acc-kv > b{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; font-weight: 700; }
.acc-kv .mono{ font-family: monospace; font-size: 26px; letter-spacing: 1px; }
.acc-opts{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-left: 44px; }
.acc-g{ margin-bottom: 26px; }
.acc-gh{ margin: 0 0 12px 6px; font-size: 21px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7C7C85; }
.acc-gr{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.acc-opt{ -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 48.9%; height: 104px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; text-align: left; padding: 0 26px; margin-right: 2.2%; border-radius: 20px;
  background: #161D30; border: 2px solid rgba(255,255,255,.06); color: #EEF0F7; font: inherit; }
.acc-opt:last-child, .acc-opt:nth-child(2n){ margin-right: 0; }
.acc-opt:nth-child(n+3){ margin-top: 14px; }
.ao-ic{ -webkit-flex: none; flex: none; width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.08); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 22px; }
.ao-ic svg{ width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ao-t{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.ao-t b{ display: block; font-size: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ao-t small{ display: block; font-size: 21px; color: #8A92AC; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-opt.danger .ao-ic{ background: rgba(239,68,68,.2); color: #FCA5A5; }
.acc-opt.danger b{ color: #FCA5A5; }
.acc-opt.focused{ background: #3d8bff; color: #1A1205; border-color: #3d8bff; box-shadow: 0 0 28px 6px rgba(61,139,255,.5) !important; }
.acc-opt.focused small{ color: #55555C; }
.acc-opt.focused .ao-ic{ background: #3d8bff; color: #1A1205; }
.acc-opt.danger.focused b{ color: #B91C1C; }
/* Janela "Player e buffer": uma linha por opção, o valor à direita; OK troca o valor. */
.pset{ margin-top: 18px; }
.pset-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; min-height: 100px; padding: 14px 28px; margin-bottom: 12px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.06); color: #EEF0F7; font: inherit; }
.ps-t{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.ps-t b{ display: block; font-size: 29px; }
.ps-t small{ display: block; font-size: 21px; color: #8A92AC; margin-top: 4px; line-height: 1.3; }
.ps-v{ -webkit-flex: none; flex: none; margin-left: 24px; padding: 8px 20px; border-radius: 99px; background: rgba(61,139,255,.22); color: #FFD08A; font-size: 25px; font-weight: 800; }
.ps-v:after{ content: " ›"; }
.pset-row.focused{ background: #3d8bff; color: #1A1205; box-shadow: 0 0 28px 6px rgba(61,139,255,.5) !important; }
.pset-row.focused small{ color: #55555C; }
.pset-row.focused .ps-v{ background: #3d8bff; color: #1A1205; }

/* ---------- v0.6.19: continuar ou começar de novo ---------- */
.resume{ text-align: left; }
.resume h2{ font-size: 46px; margin: 4px 0 6px; }
.resume .eyebrow{ margin: 0; }
.resume-ep{ margin: 0 0 18px; font-size: 26px; color: #8A92AC; }
.resume-bar{ height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; margin: 18px 0 10px; }
.resume-bar i{ display: block; height: 100%; background: #3d8bff; }
.resume .actions{ margin-top: 28px; }
.btn.resume-go{ position: relative; overflow: hidden; }
.resume-fill{ position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: rgba(61,139,255,.45); }
.resume-lbl{ position: relative; }
.btn-sub{ font-weight: 500; opacity: .75; margin-left: 6px; }
.dialog-box.wide{ width: 1040px; }

/* Início: destaque em tela cheia (imagem larga do TMDB), etiquetas, título grande e botões em pílula.
   As fileiras sobem por cima da parte de baixo do destaque, que se apaga no fundo. */
.page.home{ padding-top: 0; }
.home .hero{ margin: 0; height: 820px; border-radius: 0; background: #070e1c; }
.home .hero-bg{ background-position: center top; }
.home .hero-shade{ background: linear-gradient(90deg, rgba(10,14,25,.96) 0%, rgba(10,14,25,.78) 30%, rgba(10,14,25,.2) 62%, rgba(10,14,25,0) 100%),
  linear-gradient(0deg, #070e1c 0%, rgba(10,14,25,.75) 24%, rgba(10,14,25,0) 52%); }
.home .hero-poster{ right: 96px; top: 210px; width: 300px; height: 450px; border-radius: 18px; }
.home .hero-body{ padding: 200px 96px 0; max-width: 1240px; }
.hero-tags{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.tg{ margin: 0 12px 10px 0; padding: 4px 14px; border: 2px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(255,255,255,.06); font-size: 21px; font-weight: 700; color: #EEF2F8; white-space: nowrap; }
.tg.top{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; text-transform: uppercase; letter-spacing: .05em; }
.tg.star{ color: #FFD24A; }
.home .hero h1{ margin: 12px 0 0; font-size: 96px; line-height: 1.02; letter-spacing: -2px; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.home .hero h1.t-md{ font-size: 76px; letter-spacing: -1px; }
.home .hero h1.t-sm{ font-size: 62px; letter-spacing: -1px; }
.home .hero .plot{ margin: 20px 0 34px; max-width: 1000px; font-size: 28px; line-height: 1.42; color: rgba(245,245,245,.88);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .hero .actions{ -webkit-align-items: center; align-items: center; }
.home .hero .btn{ height: 76px; padding: 0 38px; border-radius: 38px; border: 2px solid rgba(255,255,255,.26); background: rgba(20,20,23,.7); font-size: 28px; font-weight: 700; }
.home .hero .btn.primary{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.home .hero .btn.icon{ width: 76px; padding: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.home .hero .btn.icon svg{ width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.home .hero .btn.focused{ -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 0 0 5px #3d8bff, 0 10px 34px rgba(61,139,255,.6) !important; }
.home .hero-dots{ position: static; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 20px 14px; }
.home-rows{ position: relative; z-index: 1; margin-top: -200px; }
.home-rows.no-hero{ margin-top: 0; padding-top: 190px; }
.home .row h2{ font-size: 36px; font-weight: 700; }
.home .poster.focused .art{ box-shadow: 0 0 0 5px #3d8bff, 0 14px 40px rgba(61,139,255,.55); }

/* ===== v0.6.22: perfis, pesquisa no topo e o visual novo em Canais, Filmes, Séries, Futebol e Conta ===== */
/* Destaque do Início: altura fixa pensada para o pior caso (título e resumo em 2 linhas), assim as fileiras
   nunca sobem por cima dos botões e também não pulam quando o destaque troca de título. */
.home .hero{ height: 890px; }
.home .hero h1.t-md{ font-size: 80px; }

/* Barra de cima: lupa, engrenagem e o avatar do perfil. */
.tb-ic{ margin-left: 22px; }
.tb-right .tb-ic:first-of-type{ margin-left: 34px; }
.tb-ic.on{ background: rgba(61,139,255,.3); border-color: #3d8bff; }
.tb-av{ width: 76px; height: 76px; margin-left: 22px; padding: 0; border-radius: 22px; overflow: hidden; border: 3px solid rgba(255,255,255,.25); }
.tb-av .av{ width: 100%; height: 100%; border-radius: 0; }
.tb-av.focused{ border-color: #3d8bff; box-shadow: 0 0 0 4px #3d8bff !important; -webkit-transform: scale(1.06); transform: scale(1.06); }

/* Avatar: rostinho no quadrado colorido. */
.av{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  width: 100px; height: 100px; border-radius: 22%; overflow: hidden; vertical-align: middle; }
.av svg{ width: 72%; height: 72%; }
/* Rostinhos (v0.6.31): o desenho ocupa o quadrado inteiro, a cor de fundo vem do próprio avatar. */
.av.av-face svg{ width: 100%; height: 100%; }
.av.av-face{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.av.av-img{ background: #0B1528; overflow: hidden; }
.av.av-img img{ display: block; width: 100%; height: 100%; }
.av.add{ background: rgba(255,255,255,.06); border: 4px dashed rgba(255,255,255,.3); }
.av.add svg{ fill: none; stroke: #8A92AC; stroke-width: 2; stroke-linecap: round; width: 46%; height: 46%; }

/* "Quem está assistindo?" */
.profiles{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(61,139,255,.22), rgba(10,14,25,0) 60%), #070e1c; }
.pf-brand{ position: absolute; top: 56px; left: 96px; }
.profiles h1{ font-size: 72px; letter-spacing: -1px; margin-bottom: 64px; }
.pf-row{ display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.pf{ position: relative; width: 250px; margin: 0 26px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; border-radius: 24px; }
.pf .av{ width: 230px; height: 230px; border-radius: 28px; border: 5px solid transparent; transition: border-color .12s ease, -webkit-transform .12s ease; transition: transform .12s ease, border-color .12s ease; transition: transform .12s ease, border-color .12s ease, -webkit-transform .12s ease; }
.pf b{ margin-top: 22px; font-size: 32px; font-weight: 600; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.pf.focused{ box-shadow: none !important; }
.pf.focused .av{ border-color: #3d8bff; -webkit-transform: scale(1.07); transform: scale(1.07); box-shadow: 0 16px 46px rgba(61,139,255,.5); }
.pf.focused b{ color: #EEF0F7; font-weight: 700; }
.pf-pen{ position: absolute; top: 0; left: 10px; width: 230px; height: 230px; border-radius: 28px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(0,0,0,.45); }
.pf-pen svg{ width: 76px; height: 76px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-note{ margin: 44px 0 0; font-size: 24px; }
.pf-actions{ margin-top: 40px; display: -webkit-flex; display: flex; }
.pf-actions .btn{ margin-right: 20px; border: 2px solid rgba(255,255,255,.26); background: transparent; }
.pf-actions .btn:last-child{ margin-right: 0; }
.pf-actions .btn.primary{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.pf-actions .btn.danger{ border-color: rgba(239,68,68,.6); color: #FCA5A5; }

/* Novo perfil / editar perfil */
.pf-edit{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 80px 96px 0; background: radial-gradient(ellipse at 50% 0%, rgba(61,139,255,.18), rgba(10,14,25,0) 60%), #070e1c; }
.pf-edit h1{ font-size: 60px; margin-bottom: 44px; }
.pf-cols{ display: -webkit-flex; display: flex; }
.pf-left{ -webkit-flex: none; flex: none; width: 760px; }
.pf-big{ margin-bottom: 26px; }
.pf-big .av{ width: 180px; height: 180px; border-radius: 26px; }
.pf-right{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin-left: 90px; }
.pf-right .lv-head{ margin: 0 0 18px; }
.pf-icons{ width: 720px; }
.pf-ic{ display: inline-block; margin: 0 22px 22px 0; border-radius: 26px; border: 5px solid transparent; }
.pf-ic:nth-child(4n){ margin-right: 0; }
.pf-ic .av{ width: 150px; height: 150px; border-radius: 20px; }
.pf-ic.on{ border-color: #3d8bff; }
.pf-ic.focused{ box-shadow: none !important; border-color: #3d8bff; -webkit-transform: scale(1.06); transform: scale(1.06); }
.pf-right .pf-actions{ margin-top: 26px; }

/* Pesquisar (lupa no topo): teclado à esquerda, resultados em fileiras à direita. */
.gsearch{ position: absolute; top: 172px; right: 0; bottom: 0; left: 96px; display: -webkit-flex; display: flex; }
.gs-kb{ -webkit-flex: none; flex: none; width: 600px; padding-top: 6px; }
.gs-res{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; height: 868px; margin-left: 50px; overflow: hidden; }
.gs-res .row h2{ margin-left: 0; font-size: 32px; }
.gs-res .row h2 .n{ margin-left: 10px; font-size: 24px; color: #8A92AC; font-weight: 500; }
.gs-res .row-items{ padding-left: 4px; }
.gs-empty{ margin-top: 140px; text-align: center; padding-right: 96px; }
.gs-empty h2{ font-size: 44px; margin: 18px 0 10px; }
.gs-ic svg{ width: 110px; height: 110px; fill: none; stroke: #3d8bff; stroke-width: 1.6; stroke-linecap: round; }
.gs-ch{ -webkit-flex: none; flex: none; width: 300px; height: 190px; margin-right: 24px; border-radius: 18px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.08);
  display: -webkit-flex;
  display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.gs-ch .ch-logo{ width: 120px; height: 80px; background-color: transparent; }
.gs-ch b{ margin-top: 14px; max-width: 260px; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ch.focused{ box-shadow: 0 0 0 5px #3d8bff, 0 12px 34px rgba(61,139,255,.5) !important; -webkit-transform: scale(1.05); transform: scale(1.05); }

/* Telas internas com a mesma cara do Início: a barra em pílula fica em cima, painéis "de vidro", azul nos selecionados. */
.btn.primary{ background: #3d8bff; color: #1A1205; }
.lv-top{ display: none !important; }
.vod, .live{ background: radial-gradient(ellipse at 75% -20%, rgba(255,94,72,.2), rgba(10,14,25,0) 55%), #070e1c; }
.vod > *, .live > *{ top: 172px; }
.vod > .vod-main{ left: 500px; right: 96px; }
.vod > .lv-groups, .live > .lv-groups, .live > .lv-rail{ left: 96px; }
.live > .lv-list{ left: 216px; width: 580px; }
.live > .lv-main{ left: 820px; right: 196px; }
.live > .lv-days{ right: 96px; }
.live.groups-open > .lv-list{ left: 520px; width: 440px; }
.live.groups-open > .lv-main{ left: 984px; }
.lv-groups, .lv-rail, .lv-days{ background: rgba(255,255,255,.045); border: 2px solid rgba(255,255,255,.08); border-radius: 28px; }
.lv-groups .cat{ border-radius: 999px; padding: 12px 22px; }
.lv-groups .cat.on, .vod .lv-groups .cat.on{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; font-weight: 700; }
.lv-groups .cat.on .n{ color: rgba(255,255,255,.85); }
.lv-groups .cat.focused, .vod .lv-groups .cat.focused, .live .lv-groups .cat.focused{ border-color: #3d8bff !important; background: rgba(255,94,72,.45) !important; color: #fff; }
.lv-head{ letter-spacing: .14em; }
.ch-list{ height: 800px; }
.ch, .ch-star{ background: rgba(255,255,255,.05); border-radius: 16px; }
.live .ch.focused, .live .ch-star.focused{ border-color: #3d8bff !important; background: rgba(255,94,72,.35) !important; }
.ch.on{ box-shadow: inset 6px 0 0 #3d8bff; }
/* Caixa da prévia em 16:9 (904x508), o formato do vídeo: o canal enche a caixa sem faixas pretas nem esticar. */
.ch-preview{ height: 508px; border-radius: 26px; }
.pg-card{ top: 530px; border-radius: 26px; background: rgba(255,255,255,.045); border: 2px solid rgba(255,255,255,.08); }
.day.on{ background: #3d8bff; color: #1A1205; }
.live .day.focused{ border-color: #3d8bff !important; background: rgba(255,94,72,.45) !important; }
.vod-info{ height: 236px; overflow: hidden; margin-bottom: 10px; padding-top: 16px; padding-left: 24px; }
.vod-info .eyebrow{ margin-bottom: 10px; }
.vod-info .vi-plot{ -webkit-line-clamp: 2; }
.vod-info h1{ font-size: 54px; letter-spacing: -1px; }
.vod .grid{ height: 640px; }
.sort-btn{ border: 2px solid rgba(255,255,255,.22); background: rgba(20,20,23,.7); }
.poster .art{ border-radius: 18px; }
.poster.focused .art{ box-shadow: 0 0 0 5px #3d8bff, 0 14px 40px rgba(61,139,255,.55); }
.pb-new{ background: #3d8bff !important; }
.fb-list{ height: 760px; }
.vod > .acc-main{ left: 96px; right: 96px; top: 172px; }
.acc-card{ background: rgba(255,255,255,.045); border-radius: 28px; }

/* Detalhe: título grande, botões em pílula azul e temporadas em pílula. */
.detail-text h1{ font-size: 80px; letter-spacing: -1.5px; }
.detail .btn{ height: 76px; padding: 0 38px; border: 2px solid rgba(255,255,255,.26); background: rgba(20,20,23,.7); font-size: 28px; font-weight: 700; }
.detail .btn.primary{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.detail .btn.focused{ -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 0 0 5px #3d8bff, 0 10px 34px rgba(61,139,255,.6) !important; }
.season{ border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.season.on{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.season.focused{ box-shadow: 0 0 0 4px #3d8bff !important; }
.detail-poster{ border-radius: 22px; }
/* Com a lupa e o avatar à direita, o menu fica um pouco mais justo para a data caber. */
.menu-item{ padding: 0 24px; }
.tb-sep{ margin: 0 10px 0 22px; }
.tb-right{ padding-left: 28px; }
.tb-date{ font-size: 26px; }
.clock{ font-size: 26px; }
.tb-ic{ margin-left: 18px; }
.tb-right .tb-ic:first-of-type{ margin-left: 30px; }
.tb-av{ margin-left: 18px; }
/* v0.6.23: 30 ícones de perfil em 6 colunas. */
.pf-icons{ width: 790px; font-size: 0; }
.pf-ic{ margin: 0 12px 12px 0; border-width: 4px; border-radius: 22px; vertical-align: top; }
.pf-ic:nth-child(4n){ margin-right: 12px; }
.pf-ic:nth-child(6n){ margin-right: 0; }
.pf-ic .av{ width: 110px; height: 110px; border-radius: 18px; }
.pf-edit h1{ margin-bottom: 30px; }
.pf-busy{ margin-top: 8px; font-size: 22px; color: #ffb74d; }
/* v0.6.24: folga em cima e dos lados para a borda e o zoom da capa focada não serem cortados. */
.vod .grid{ padding: 26px 20px 40px; height: 628px; }

/* v0.6.31: ativação em duas metades. Esquerda: Provedor + Usuário + Senha. Direita: QR Code (teste grátis) e MAC. */
.act-panel{ -webkit-align-items: center; align-items: center; }
.act-login{ -webkit-flex: none; flex: none; width: 720px; padding: 52px 56px; border-radius: 36px; background: rgba(19,26,43,.86); border: 2px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.act-login h1{ font-size: 64px; line-height: 1.05; margin: 0 0 14px; }
.act-lead{ margin: 0 0 30px; font-size: 26px; color: #8A92AC; }
.lg-field{ display: block; height: 104px; padding: 16px 28px; margin-bottom: 18px; border-radius: 20px; background: #1B2338; border: 3px solid transparent; }
.lg-field span{ display: block; font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
.lg-field b{ display: block; margin-top: 4px; font: 700 38px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-field b em{ font: 400 32px "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-style: normal; color: #6B6B74; }
.lg-field.focused{ border-color: #3d8bff; background: #232C45; box-shadow: 0 0 0 6px rgba(61,139,255,.22) !important; }
.lg-field.focused span{ color: #FFD08A; }
#lg-provider b{ letter-spacing: .14em; }
#lg-provider b em{ letter-spacing: 0; }
.lg-go{ display: block; width: 100%; margin-top: 10px; height: 84px; font-size: 32px; background: #3d8bff; color: #1A1205; }
.lg-go.busy{ opacity: .6; }
.lg-msg{ min-height: 36px; margin: 18px 0 0; font-size: 24px; color: #8A92AC; }
.lg-msg.err{ color: #FCA5A5; }
.lg-msg.wait{ color: #EEF0F7; }
.act-or{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; width: 140px; height: 560px; }
.act-or i{ display: block; -webkit-flex: 1; flex: 1; width: 2px; background: rgba(255,255,255,.12); }
.act-or span{ margin: 18px 0; font: 700 26px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #8A92AC; text-transform: uppercase; letter-spacing: .1em; }
.act-side{ -webkit-flex: none; flex: none; width: 760px; }
.act-side h2{ font-size: 52px; line-height: 1.08; margin: 0 0 30px; }
.act-side-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 30px; }
.act-side .act-qr{ margin-right: 44px; }
.act-side .qr-frame{ padding: 22px; border-radius: 28px; }
.act-side .act-steps{ margin: 0; }
.act-side .act-steps li{ font-size: 28px; }
.act-side .act-steps i{ width: 48px; height: 48px; line-height: 42px; font-size: 24px; margin-right: 18px; }
.act-side .act-id b{ font-size: 42px; }
.act-side .act-status{ margin-top: 26px; }
.act.over .act-side-row{ display: none; }

/* Teclado de login (letras, números e símbolos) e teclado só de números do Provedor. */
.lg-edit{ width: auto; }
.lg-edit h2{ margin: 0 0 18px; }
.kb-full .kb-key{ font-size: 28px; text-transform: none; }
.kb-key.on{ background: #3A3A40; border-color: #FFD08A; }
.kb-num{ width: 520px; margin: 0 auto; }
.kb-num .kb-key{ height: 84px; line-height: 84px; font-size: 36px; }

/* Termo de uso: contrato para aceitar na primeira abertura. */
.terms{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 56px 128px 48px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  background: linear-gradient(115deg, rgba(61,139,255,.14) 0%, transparent 38%), #070e1c; }
.terms-doc{ -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 1360px; margin: 24px auto 0; min-height: 0; }
.terms-doc h1{ font-size: 58px; margin: 0 0 8px; }
.terms-meta{ margin: 0 0 22px; font-size: 24px; color: #8A92AC; }
.terms-meta b{ color: #EEF0F7; letter-spacing: .03em; }
.terms-text{ -webkit-flex: 1; flex: 1; min-height: 0; overflow: hidden; padding: 26px 40px; border-radius: 24px; background: #F4F4F5; color: #18181B; }
.terms-p{ padding: 6px 18px; margin: 0 -18px 10px; border-left: 6px solid transparent; border-radius: 8px; }
.terms-p p{ margin: 0; font-size: 27px; line-height: 1.5; }
.terms-p ul{ margin: 0; padding-left: 36px; font-size: 27px; line-height: 1.55; }
.terms-p.focused{ border-left-color: #3d8bff; background: rgba(61,139,255,.07); box-shadow: none !important; }
.terms-sign{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 24px; }
.terms-check{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 76px; padding: 0 26px 0 18px; border-radius: 18px; background: #1B2338; border: 3px solid transparent; font-size: 27px; font-weight: 600; }
.terms-check i{ -webkit-flex: none; flex: none; width: 40px; height: 40px; margin-right: 16px; border-radius: 10px; border: 3px solid #A3A3AB; position: relative; }
.terms-check.on i{ background: #3d8bff; border-color: #3d8bff; }
.terms-check.on i:after{ content: ""; position: absolute; left: 11px; top: 3px; width: 10px; height: 20px; border: solid #fff; border-width: 0 5px 5px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.terms-check.focused{ border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.22) !important; }
.terms-line{ margin: 18px 0 0; padding: 0 4px 10px;  border-bottom: 2px dashed rgba(255,255,255,.25); font-size: 22px; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terms-line b{ color: #EEF0F7; }
.terms-sign .actions{ margin: 0 0 -20px auto; }
.terms-sign .btn.primary{ background: #3d8bff; color: #1A1205; }
.terms-sign .btn[disabled]{ opacity: .45; }

/* ---------- v0.6.34: Minhas listas (Conta) ---------- */
.acc-card.ml{ max-width: 1240px; margin: 0 auto; }
.ml-lead{ margin: 0 0 22px; font-size: 25px; line-height: 1.35; }
.ml-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 104px; padding: 0 28px; margin-bottom: 14px; border-radius: 20px; background: #1B2338; border: 3px solid transparent; }
.ml-row.on{ border-color: rgba(61,139,255,.55); }
.ml-n{ -webkit-flex: none; flex: none; width: 52px; height: 52px; margin-right: 24px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 24px; font-weight: 800; line-height: 52px; text-align: center; }
.ml-row.on .ml-n{ background: #3d8bff; }
.ml-t{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.ml-t b, .ml-t small{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ml-t b{ font-size: 30px; }
.ml-t small{ margin-top: 4px; font-size: 21px; color: #8A92AC; }
.ml-tag, .ml-use{ -webkit-flex: none; flex: none; margin-left: 20px; }
.ml-use{ font-size: 21px; opacity: 0; }
.ml-row.focused .ml-use{ opacity: 1; }
.ml-foot{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 22px; }
.ml-foot .btn{ margin-right: 26px; font-size: 26px; }
.ml-foot .muted{ font-size: 23px; }
.ml-add-main{ text-align: center; }
.ml-add-main .act-login{ display: inline-block; text-align: left; }
/* Opções da Conta em duas colunas: com Minhas listas e Sair desta lista, a coluna única passava da tela. */
.acc-actions{ -webkit-flex: 0 0 900px; flex: 0 0 900px; }
.acc-actions .btn{ display: inline-block; vertical-align: top; width: 49%; margin: 0 0 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 25px; }
.acc-actions .btn:nth-of-type(odd){ margin-right: 2%; }

/* ---------- v0.6.35: nome do episódio em até duas linhas ---------- */
.poster[data-ep] .cap{ white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; font-size: 24px; }
/* Filme: mesma página compacta da série, para "Mais em" caber sem rolar (título nunca é cortado). */
.detail:not(.series) .detail-body{ padding-top: 64px; }
.detail:not(.series) .detail-top{ margin-bottom: 20px; }
.detail:not(.series) .detail-poster{ width: 260px; height: 390px; }
.detail:not(.series) .detail-text .plot{ -webkit-line-clamp: 3; }
.detail:not(.series) .credits{ -webkit-line-clamp: 1; margin-bottom: 22px; }
.detail:not(.series) .row h2{ margin-top: 0; margin-bottom: 0; }

/* v0.6.36: Filmes e Séries mostram 2 fileiras inteiras (capa e nome). Cabeçalho mais baixo, capas um pouco menores. */
.vod-info{ height: 186px; margin-bottom: 0; padding-top: 8px; }
.vod-info .eyebrow{ margin-bottom: 4px; }
.vod-info h1{ font-size: 44px; line-height: 1.15; }
.vod-info .meta{ margin: 4px 0 6px; }
.vod .grid.vod-grid{ padding: 22px 20px 26px; height: 620px; }
.grid.vod-grid > .poster{ width: 172px; margin: 0 52px 24px 0; }
.grid.vod-grid > .poster:nth-child(5n){ margin-right: 52px; }
.grid.vod-grid > .poster:nth-child(6n){ margin-right: 0; }
.grid.vod-grid > .poster .art{ height: 258px; }
.grid.vod-grid > .poster .cap{ margin-top: 12px; }

/* v0.6.36: Início com 2 fileiras inteiras (capa e nome). Na abertura, o nome dos Lançamentos já aparece abaixo do destaque. */
.home .hero{ height: 830px; }
.home .hero-body{ padding-top: 176px; }
.home .hero h1{ font-size: 86px; }
.home .hero h1.t-md{ font-size: 70px; }
.home .hero h1.t-sm{ font-size: 58px; }
.home .hero .plot{ margin: 16px 0 28px; font-size: 27px; }
.home .row{ margin-bottom: 28px; }
.home .row h2{ margin-bottom: 10px; }
.home .row-items > .poster{ width: 190px; }
.home .row-items > .poster .art{ height: 285px; }
.home .row-items > .poster.wide{ width: 360px; }
.home .row-items > .poster.wide .art{ height: 203px; }
.home .row-items > .poster .cap{ font-size: 24px; margin-top: 12px; }
.home .hero-poster{ top: 190px; width: 260px; height: 390px; }

/* v0.6.36: a bolinha da barra do vídeo recebe o foco (▲ dos botões). Focada, cresce e ganha o anel vermelho. */
.seek{ cursor: pointer; }
.seek.focused{ box-shadow: none !important; outline: none; -webkit-transform: none; transform: none; background: rgba(255,255,255,.35); }
.seek.focused b{ width: 46px; height: 46px; border: 6px solid #fff; background: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.45), 0 4px 18px rgba(0,0,0,.6); }
.seek.focused i{ background: #3d8bff; }
.seek-wrap{ padding-top: 18px; }

.seasons{ margin: 6px 192px 0; }
/* Filmes e Séries: sem a linha da categoria em cima, a sinopse aparece inteira. */
.vod-info{ padding-top: 14px; }
.vod-info .vi-plot{ line-height: 1.35; }
/* v0.6.37: temporadas num botão "Temporada N ▾" que abre a lista ao lado. */
.season-pick{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; height: 64px; padding: 0 30px; border-radius: 32px; border: 2px solid rgba(255,255,255,.22); background: rgba(20,20,23,.7); color: #EEF0F7; font-size: 26px; }
.season-pick b{ font-weight: 700; }
.season-pick .sp-n{ margin-left: 16px; color: #8A92AC; font-size: 22px; }
.season-pick .sp-ar{ margin-left: 16px; font-size: 22px; }
.season-pick.focused{ background: #3d8bff; border-color: #3d8bff; box-shadow: 0 0 0 4px #3d8bff !important; }
.season-pick.focused .sp-n{ color: rgba(255,255,255,.85); }
.season-pick.one{ border-color: transparent; background: none; padding-left: 0; }
#dialog .dialog-box.side{ position: absolute; top: 0; right: 0; bottom: 0; width: 600px; border-radius: 0; padding: 64px 56px; }
.season-list h2{ margin: 0; }
.season-list .muted{ margin: 6px 0 24px; }
.sl-items{ height: 820px; overflow: hidden; padding: 6px; }
.sl-item{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; height: 76px; padding: 0 26px; margin-bottom: 12px; border-radius: 18px; background: rgba(255,255,255,.05); color: #EEF0F7; font-size: 28px; text-align: left; }
.sl-item b{ -webkit-flex: 1; flex: 1; font-weight: 600; }
.sl-item span{ color: #8A92AC; font-size: 22px; }
.sl-item .sl-ck{ margin-left: 18px; font-style: normal; color: #3d8bff; font-weight: 700; }
.sl-item.on{ background: rgba(61,139,255,.18); }
.sl-item.focused{ background: #3d8bff; box-shadow: 0 0 0 4px #3d8bff !important; }
.sl-item.focused span, .sl-item.focused .sl-ck{ color: #fff; }

/* v0.6.56: Limpar histórico (Conta). Abas à esquerda; à direita os botões e as linhas com caixa de marcar, capa, nome e lixeira. */
.hs-main .grid-head{ margin-bottom: 4px; }
.hs-lead{ margin: 0 0 22px; font-size: 24px; line-height: 1.35; }
.hs-lead b{ color: #EEF0F7; }
.hs-main .empty{ margin: 10px 0 26px; font-size: 26px; }
.hs-acts{ padding: 6px; white-space: nowrap; }
.hs-acts .btn{ margin-right: 18px; height: 64px; padding: 0 30px; font-size: 25px; }
.hs-acts .btn.off{ opacity: .45; }
.hs-list{ position: absolute; top: 232px; bottom: 0; left: 0; right: 0; overflow: hidden; padding: 8px 8px 40px; }
.hs-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 14px; }
.hs-pick{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 104px; padding: 0 26px; border-radius: 20px; background: #1B2338; border: 3px solid transparent; }
.hs-row.on .hs-pick{ border-color: rgba(61,139,255,.6); background: #2A1A1C; }
.hs-box{ -webkit-flex: none; flex: none; width: 42px; height: 42px; margin-right: 24px; border-radius: 10px; border: 3px solid rgba(255,255,255,.45); color: #fff; font-size: 26px; font-weight: 800; line-height: 36px; text-align: center; }
.hs-row.on .hs-box{ background: #3d8bff; border-color: #3d8bff; }
.hs-art{ -webkit-flex: none; flex: none; width: 52px; height: 78px; margin-right: 24px; border-radius: 8px; background-size: cover; background-position: center; }
.hs-art.q{ height: 52px; padding-top: 11px; background: rgba(255,255,255,.08); color: #8A92AC; text-align: center; }
.hs-art.q svg{ width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hs-pick .ch-logo{ width: 64px; height: 64px; margin-right: 24px; }
.hs-t{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.hs-t b, .hs-t small{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs-t b{ font-size: 29px; }
.hs-t small{ margin-top: 5px; font-size: 21px; color: #8A92AC; }
.hs-del{ -webkit-flex: none; flex: none; width: 80px; height: 80px; margin-left: 16px; border-radius: 50%; background: rgba(255,255,255,.08); color: #8A92AC; }
.hs-del svg{ width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hs-del.focused{ background: #3d8bff; color: #1A1205; box-shadow: 0 0 0 4px #3d8bff !important; }
.hs-hint{ display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 22px; }
.acc-actions.many .acc-h{ margin-bottom: 10px; }
.acc-actions.many .btn{ height: 60px; margin-bottom: 12px; font-size: 24px; }
/* O botão do próximo episódio começa vermelho escuro e vai enchendo de vermelho até abrir. */
.nxe .btn.nxe-go{ background: #5C0A0F; color: #fff; }
.nxe .btn.nxe-go .resume-fill{ background: #3d8bff; }

/* Correção 4 na TV: ficha do título. Topo com frase, classificação, gêneros e equipe; embaixo elenco com foto e "Sobre". */
.d-tag{ font-size: 28px; font-style: italic; color: #C9C9D1; margin: -2px 0 12px; }
.d-tag:empty{ display: none; }
.cert{ display: inline-block; min-width: 40px; padding: 2px 8px; border-radius: 7px; font-size: 22px; font-weight: 800; text-align: center; color: #fff; vertical-align: 2px; margin-left: 6px; }
.cert.cL{ background: #0A9B48; } .cert.c10{ background: #0F7DC2; } .cert.c12{ background: #E8B400; color: #111; }
.cert.c14{ background: #E06A0E; } .cert.c16{ background: #D21F26; } .cert.c18{ background: #111; border: 2px solid #fff; }
.d-gen{ color: #8A92AC; margin-left: 10px; }
.d-crew{ font-size: 22px; margin: -12px 0 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-crew:empty{ display: none; }
.d-prog{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 18px; width: 520px; font-size: 20px; color: #8A92AC; }
.d-prog-bar{ -webkit-flex: 1; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); margin-right: 16px; overflow: hidden; }
.d-prog-bar i{ display: block; height: 100%; background: #3d8bff; }
.d-cast{ margin: 0 192px 30px; }
.d-cast:empty{ display: none; }
.d-cast h2, .d-about h2{ font-size: 32px; margin: 0 0 18px; }
.pp-row{ display: -webkit-flex; display: flex; }
.pp{ -webkit-flex: none; flex: none; width: 150px; margin-right: 22px; text-align: center; }
.pp i{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 124px; height: 124px; margin: 0 auto 12px; border-radius: 50%; font-style: normal; font-size: 40px; font-weight: 700; color: #fff;
  background-size: cover; background-position: center 20%; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.pp b{ display: block; font-size: 20px; line-height: 1.2; font-weight: 600; }
.pp span{ display: block; margin-top: 4px; font-size: 17px; line-height: 1.2; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-about{ margin: 18px 192px 90px; padding: 30px 36px 18px; border-radius: 24px; background: rgba(22,22,26,.8); }
.d-about:empty{ display: none; }
.d-about.focused{ box-shadow: 0 0 0 4px rgba(255,255,255,.55) !important; }
.ab-grid{ overflow: hidden; }
.ab{ float: left; width: 25%; padding: 0 28px 22px 0; }
.ab span{ display: block; font-size: 19px; color: #8A92AC; margin-bottom: 4px; }
.ab b{ display: block; font-size: 23px; font-weight: 600; line-height: 1.3; }
.stars{ position: relative; display: inline-block; letter-spacing: 3px; color: rgba(255,255,255,.2); }
.stars:before{ content: "★★★★★"; }
.stars i{ position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #FACC15; }
.stars i:before{ content: "★★★★★"; }

/* Limpar histórico (0.6.70): cartão no padrão da Conta (Minhas listas e Player e buffer). */
.hs-card{ max-height: 860px; overflow: hidden; }
.hs-card .ps-v.zero{ background: rgba(255,255,255,.08); color: #8A92AC; }
.hs-card .pset-row.focused .ps-v.zero{ background: #2A2A30; color: #fff; }
.hs-item{ min-height: 104px; }
.hs-item .hs-art, .hs-item .ch-logo{ -webkit-flex: none; flex: none; margin-right: 24px; }
.hs-item .ch-logo{ width: 64px; height: 64px; }
.hs-item .ps-t b, .hs-item .ps-t small{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs-trash{ -webkit-flex: none; flex: none; margin-left: 24px; padding: 8px 20px; border-radius: 99px; color: #8A92AC; font-size: 23px; font-weight: 800; opacity: .55; }
.hs-trash svg{ width: 28px; height: 28px; margin-right: 8px; vertical-align: -6px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hs-item.focused .hs-trash{ background: #3d8bff; color: #1A1205; opacity: 1; }
.hs-card .btn.off{ opacity: .45; }

/* Sair do app (Voltar no Início): logo em cima, pergunta e botões centralizados, no tema do app. */
.exit-box{ text-align: center; }
.exit-box .exit-logo{ height: 84px; width: auto; display: block; margin: 0 auto; }
.exit-box h2{ margin-top: 28px; }
.exit-box .actions{ -webkit-justify-content: center; justify-content: center; margin-top: 40px; }
.exit-box .actions > *{ margin: 0 12px 20px; }
.exit-box .actions .btn{ min-width: 220px; }

/* Elenco na ficha (TV): o cursor anda pelos artistas; a fileira rola para o lado quando passa da tela. */
.d-cast .pp-row{ position: relative; overflow: hidden; padding: 8px 8px 6px; }
.d-cast .pp i{ transition: box-shadow .15s; }
.d-cast .pp.focused{ box-shadow: none !important; }
.d-cast .pp.focused i{ box-shadow: 0 0 0 5px #3d8bff, 0 0 24px 4px rgba(61,139,255,.55); }
.d-cast .pp.focused b{ color: #fff; }

/* ===== 0.6.75: seta de voltar na tela (Meza) =====
   Só nas telas sem a barra de cima (detalhe, perfis): bolinha no canto de cima. Player: bolinha no alto, à esquerda do título.
   Nas telas com o menu em cima não tem seta (Meza). */
.scr-back[hidden]{ display: none !important; }
.scr-back svg{ width: 40px; height: 40px; }
.scr-back{ position: absolute; z-index: 6; top: 52px; left: 96px; margin: 0 !important; background: rgba(20,20,23,.78); border-color: rgba(255,255,255,.3); }
.scr-back.focused{ -webkit-transform: scale(1.08); transform: scale(1.08); }
body.media-full .scr-back{ visibility: hidden; }
.osd-top{ position: relative; padding-left: 116px; min-height: 84px; }
.osd-back{ position: absolute; left: 0; top: 0; width: 84px; height: 84px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center; background: rgba(20,20,23,.72); border: 3px solid rgba(255,255,255,.4); color: #fff; padding: 0; }
.osd-back svg{ width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.osd-back.focused{ background: #3d8bff; border-color: #3d8bff; box-shadow: 0 0 0 5px #3d8bff !important; -webkit-transform: scale(1.08); transform: scale(1.08); }
/* Celular: as telas de toque já têm o voltar delas (mobile.css). */


/* Perfis com a seta no canto: o logo e o título andam para a direita. */
html:not(.mobile) .scr-back-on .pf-brand{ left: 206px; }
html:not(.mobile) .scr-back-on .pf-edit h1{ padding-left: 110px; }

/* v0.6.78: na Pesquisa, as 2 fileiras de resultados aparecem inteiras, com o nome embaixo (antes a de baixo saía cortada).
   Mesmo tamanho de capa das grades de Filmes e Séries; o espaço entre as fileiras esconde a ponta da 3ª. */
.grid.narrow > .poster{ width: 172px; margin: 0 52px 40px 0; }
.grid.narrow > .poster:nth-child(5n){ margin-right: 52px; }
.grid.narrow > .poster:nth-child(3n){ margin-right: 0; }
.grid.narrow > .poster .art{ height: 258px; }
.grid.narrow > .poster .cap{ font-size: 22px; margin-top: 12px; }

/* v0.6.78: senha do conteúdo adulto. Categoria adulta com cadeado no lugar do número; teclado de números no meio da tela. */
.cat.lock .n svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: middle; }
.pin{ text-align: center; }
.pin-ic svg{ width: 60px; height: 60px; fill: none; stroke: #3d8bff; stroke-width: 2; }
.pin .eyebrow{ margin: 10px 0 4px; }
.pin h2{ margin: 0; }
.pin-lead{ margin: 12px auto 0; max-width: 620px; font-size: 24px; }
.pin-dots{ display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-top: 30px; }
.pin-dots i{ width: 30px; height: 30px; margin: 0 14px; border-radius: 50%; border: 3px solid rgba(255,255,255,.45); }
.pin-dots i.on{ background: #fff; border-color: #fff; }
.pin-msg{ min-height: 32px; margin: 14px 0 10px; font-size: 24px; color: #8A92AC; }
.pin-msg.err{ color: #FF4D57; font-weight: 600; }
.pin-pad{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 480px; margin: 0 auto; }
.pin-k{ width: 144px; height: 80px; margin: 0 24px 20px 0; padding: 0; border-radius: 20px; font-size: 36px; font-weight: 700; }
.pin-k:nth-child(3n){ margin-right: 0; }
.pin-k.pin-x{ font-size: 24px; font-weight: 600; }

/* ---------- Redesenho 2026-10 (Meza escolheu: perfis B, canais A, menu B) ---------- */
/* Menu do topo no estilo Netflix: só texto, a aba atual sublinhada em vermelho; o cursor ganha um fundo claro suave. */
#topbar{ background: linear-gradient(rgba(10,14,25,.8), rgba(10,14,25,.45) 60%, rgba(10,14,25,0)); }
.tb-pill{ background: none; border: 0; padding: 0; }
.tb-sep{ display: none; }
.menu-item{ position: relative; height: 66px; padding: 0 22px; border-radius: 14px; color: rgba(245,245,245,.62); font-size: 31px; font-weight: 600; background: none; box-shadow: none; white-space: nowrap; -webkit-flex: none; flex: none; }
.menu-item + .menu-item{ margin-left: 18px; }
#menu .menu-item:first-child{ margin-left: 40px; }
.menu-item.on{ background: none; color: #fff; font-weight: 700; box-shadow: none; }
.menu-item.on:after, .tb-ic.on:after{ content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 5px; border-radius: 3px; background: #3d8bff; }
.menu-item.focused, .menu-item.on.focused{ background: rgba(255,255,255,.16); color: #fff; box-shadow: none !important; }
.tb-ic{ position: relative; background: none; border-color: transparent; }
.tb-ic.on{ background: none; border-color: transparent; }
.tb-ic.focused{ background: rgba(255,255,255,.16); border-color: transparent; box-shadow: none !important; }
.tb-date{ color: rgba(245,245,245,.6); }
/* Menu sem quebra de linha (Meza 11/10: "Ao vivo" em duas linhas na TV com a data de domingo): os itens não encolhem;
   faltando espaço, só a data encolhe e termina em "…" (ícones e relógio ficam do tamanho de sempre). */
.tb-right{ min-width: 0; }
.tb-right > *{ -webkit-flex: none; flex: none; }
.tb-right > .tb-date{ -webkit-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Ao vivo: categorias, canais e prévia sempre na tela (nada recolhe). A coluna de dias saiu: o dia muda com ◀ ▶
   no cabeçalho da Programação. Embaixo, uma linha com as teclas do controle. */
.live.fixed > .lv-rail, .live.fixed > .lv-days{ display: none; }
.live.fixed > .lv-groups{ display: block; left: 96px; width: 400px; bottom: 96px; }
.live.fixed > .lv-list{ left: 516px; width: 640px; bottom: 96px; }
.live.fixed > .lv-main{ left: 1180px; right: 96px; bottom: 96px; }
.live.fixed .lv-groups .cat{ padding: 13px 22px; font-size: 29px; }
.live.fixed .lv-groups .cat > .cat-name{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live.fixed .ch-list{ height: 740px; }
.live.fixed .ch, .live.fixed .ch-star{ height: 68px; }
.live.fixed .ch-star{ width: 60px; }
.live.fixed .ch-name{ font-size: 29px; }
/* Prévia em 16:9 na largura da coluna (644x362). */
.live.fixed .ch-preview{ height: 362px; }
.live.fixed .pg-card{ top: 382px; }
.pg-days{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.pg-days .pg-date{ margin: 0 6px; }
.pg-step{ width: 52px; height: 52px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #8A92AC; font-size: 24px; border: 2px solid transparent; }
.pg-step.off{ opacity: .25; }
.live .pg-step.focused{ border-color: #3d8bff !important; background: rgba(255,94,72,.45) !important; color: #fff; }
.live > .lv-hint{ top: auto; bottom: 30px; left: 96px; right: 96px; height: 44px; margin: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #8A92AC; font-size: 24px; }
.lv-hint span{ margin: 0 30px; }
.lv-hint i{ font-style: normal; color: #fff; font-weight: 700; background: rgba(255,255,255,.1); border-radius: 8px; padding: 2px 10px; margin-right: 8px; }

/* Primeiro acesso (ainda sem perfil): usar o Principal ou criar o seu, em dois cartões grandes. */
.profiles.first h1{ margin-bottom: 0; }
.pf-sub{ margin: 18px 0 56px; font-size: 30px; }
.pf-opt{ width: 640px; margin: 0 22px; padding: 44px 40px; border-radius: 32px; background: rgba(255,255,255,.05); border: 4px solid rgba(255,255,255,.1); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; }
.pf-opt .av{ width: 200px; height: 200px; border-radius: 28px; }
.pf-opt h2{ margin: 30px 0 12px; font-size: 44px; }
.pf-opt p{ margin: 0; font-size: 27px; color: #8A92AC; line-height: 1.4; }
.pf-btn{ margin-top: 30px; height: 72px; padding: 0 44px; border-radius: 36px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 28px; font-weight: 700; border: 2px solid rgba(255,255,255,.3); }
.pf-opt.focused{ border-color: #3d8bff; background: rgba(61,139,255,.22); box-shadow: 0 18px 50px rgba(61,139,255,.4) !important; -webkit-transform: scale(1.04); transform: scale(1.04); }
.pf-opt.focused .pf-btn{ background: #3d8bff; border-color: #3d8bff; }

/* Ao vivo, lista limpa: sem caixa em cada canal; um destaque só (faixa branca no cursor); a categoria ativa ganha
   só o tracinho vermelho; a estrela aparece apagada e fica amarela nos favoritos. */
.live.fixed > .lv-groups{ background: none; border: 0; padding-left: 0; padding-right: 10px; }
.live.fixed .lv-groups .cat{ border-radius: 12px; color: rgba(245,245,245,.72); }
.live.fixed .lv-groups .cat.on{ background: rgba(255,255,255,.06); border-color: transparent; color: #fff; font-weight: 700; box-shadow: inset 6px 0 0 #FF5E48; }
.live.fixed .lv-groups .cat.on .n{ color: #8A92AC; }
.live.fixed .lv-groups .cat.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; }
.live.fixed .lv-groups .cat.focused .n{ color: #555; }
.live.fixed > .lv-list{ border-left: 2px solid rgba(255,255,255,.07); padding-left: 14px; }
.live.fixed .ch, .live.fixed .ch-star{ background: none; border-radius: 14px; }
.live.fixed .ch{ height: 76px; }
.live.fixed .ch-star{ height: 76px; width: 56px; color: rgba(255,255,255,.3); }
.live.fixed .ch-star.on{ color: #1e60f2; }
.live.fixed .ch-row{ margin-bottom: 4px; }
.live.fixed .ch-name{ -webkit-flex: 0 1 auto; flex: 0 1 auto; font-size: 30px; }
.ch-q{ -webkit-flex: none; flex: none; margin-left: 12px; font-style: normal; font-size: 16px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; border: 2px solid rgba(255,255,255,.3); color: rgba(255,255,255,.75); }
.live.fixed .ch.on{ box-shadow: inset 6px 0 0 #3d8bff; }
.live.fixed .ch.focused, .live.fixed .ch-star.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205; }
.live.fixed .ch.focused .ch-name{ color: #1A1205; }
.live.fixed .ch.focused .num{ color: #555; }
.live.fixed .ch.focused .ch-q{ color: #333; border-color: #999; }
.live.fixed .ch-star.focused{ color: #1A1205; }
.live.fixed .ch-star.on.focused{ color: #C98A00; }
.live.fixed > .lv-main .pg-card{ background: none; border: 0; border-top: 2px solid rgba(255,255,255,.07); border-radius: 0; padding-left: 4px; padding-right: 4px; }
/* Filmes, Séries e Futebol: a coluna de categorias no mesmo jeito limpo do Ao vivo. */
.vod > .lv-groups{ background: none; border: 0; padding-left: 0; padding-right: 10px; }
.vod .lv-groups .cat{ border-radius: 12px; color: rgba(245,245,245,.72); }
.vod .lv-groups .cat.on{ background: rgba(255,255,255,.06); border-color: transparent; color: #fff; font-weight: 700; box-shadow: inset 6px 0 0 #3d8bff; }
.vod .lv-groups .cat.on .n{ color: #8A92AC; }
.vod .lv-groups .cat.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; }
.vod .lv-groups .cat.focused .n{ color: #555; }

/* ---------- Revisão geral 08/10 (itens 1 e 2): um jeito só de mostrar a seleção; vermelho só no essencial ----------
   Objetos (capas, perfis, botões, cartões): contorno branco e um leve aumento, com sombra escura (sem brilho vermelho).
   Linhas (listas, teclado, temporadas, Configurações): fundo branco com texto escuro, como no Ao vivo. */
.focused{ box-shadow: 0 0 0 5px #3d8bff, 0 12px 30px rgba(0,0,0,.55) !important; }
.poster.focused .art, .home .poster.focused .art{ box-shadow: 0 0 0 5px #3d8bff, 0 14px 34px rgba(0,0,0,.6); }
.home .hero .btn.focused, .detail .btn.focused{ box-shadow: 0 0 0 5px #3d8bff, 0 10px 30px rgba(0,0,0,.5) !important; }
.ctrl.focused .ic{ box-shadow: 0 0 0 5px #3d8bff, 0 8px 24px rgba(0,0,0,.5); }
.okb.focused .ic{ box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.5); }
.okc.focused, .okp.focused{ box-shadow: 0 0 0 4px #3d8bff !important; }
.gs-ch.focused{ box-shadow: 0 0 0 5px #3d8bff, 0 12px 30px rgba(0,0,0,.5) !important; }
.d-cast .pp.focused i{ box-shadow: 0 0 0 5px #3d8bff, 0 10px 24px rgba(0,0,0,.5); }
.pf.focused .av{ box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.tb-av.focused{ box-shadow: 0 0 0 4px #3d8bff !important; }
.pf-opt.focused{ background: rgba(255,255,255,.1); box-shadow: 0 18px 46px rgba(0,0,0,.55) !important; }
.pf-opt.focused .pf-btn{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.acc-opt.focused, .pset-row.focused{ box-shadow: 0 12px 30px rgba(0,0,0,.45) !important; }
.acc-opt.focused .ao-ic, .pset-row.focused .ps-v{ background: #18203A; color: #fff; }
.kb-key.focused, .chip.focused, .fb-tile.focused{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.fb-card.focused, .fb-card.is-live.focused{ border-color: #3d8bff; }
.season-pick.focused, .sl-item.focused, .hs-del.focused, .hs-item.focused .hs-trash{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; box-shadow: none !important; }
.season-pick.focused .sp-n{ color: #555; }
.sl-item.focused span, .sl-item.focused .sl-ck{ color: #1A1205; }
.osd-back.focused{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; box-shadow: 0 0 0 5px rgba(255,255,255,.3) !important; }
.live .pg-row.focused{ background: #3d8bff !important; border-color: #3d8bff !important; }
.live .pg-row.focused, .live .pg-row.focused span, .live .pg-row.focused b{ color: #1A1205; }
.live .pg-row.focused .live-badge{ color: #fff; }
.live .pg-step.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205; }
.lg-field.focused{ border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(255,255,255,.14) !important; }
.lg-field.focused span{ color: #fff; }
.terms-p.focused{ border-left-color: #fff; background: rgba(255,255,255,.06); }
.terms-check.focused{ border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(255,255,255,.14) !important; }
/* Vermelho fica no Assistir, no AO VIVO / TOCANDO, no sublinhado do menu e na barra do que você já assistiu.
   Selos, títulos pequenos, a data da programação, o tracinho da categoria e as barrinhas dos canais viram branco. */
.eyebrow{ color: rgba(245,245,245,.62); }
.tg.top{ background: #F5F5F5; border-color: #F5F5F5; color: #111; }
.pg-date{ color: #fff; }
.live.fixed .lv-groups .cat.on, .vod .lv-groups .cat.on{ box-shadow: inset 6px 0 0 #fff; }

/* Item 3: destaque do Início sem imagem larga: a capa (ou o degradê dela) desfocada no fundo, em vez do bloco preto. */
.home .hero-bg.soft{ -webkit-filter: blur(40px) brightness(.5) saturate(1.2); filter: blur(40px) brightness(.5) saturate(1.2); -webkit-transform: scale(1.25); transform: scale(1.25); }
.lite .home .hero-bg.soft{ -webkit-filter: brightness(.35); filter: brightness(.35); -webkit-transform: none; transform: none; }

/* ---------- Ao vivo profissional (Meza escolheu a B, 08/10) ----------
   Categorias (300) | lista de canais (700) | prévia 16:9 com o programa de agora, sinopse, próximos e botões.
   Logos num quadro escuro igual para todos; sem logo, as iniciais coloridas. O canal da prévia mostra barrinhas
   vermelhas no lugar do número. Sem a coluna da estrela: favoritar é o botão do painel da direita. */
.live.fixed > .lv-groups{ left: 96px; width: 312px; top: 176px; bottom: 40px; padding: 0 12px 0 0; }
.live.fixed .lv-groups .lv-head{ margin: 0 0 14px 20px; font-size: 19px; letter-spacing: .16em; color: rgba(245,245,247,.42); }
.live.fixed .lv-groups .cat{ height: 60px; padding: 0 20px; margin-bottom: 2px; font-size: 27px; font-weight: 600; color: rgba(245,245,247,.7); }
.live.fixed .lv-groups .cat .n{ font-size: 21px; color: rgba(245,245,247,.38); }
.live.fixed .lv-groups .cat.on{ background: rgba(255,255,255,.08); color: #fff; font-weight: 700; box-shadow: none; }
.live.fixed .lv-groups .cat.on .n{ color: rgba(245,245,247,.6); }
.live.fixed .lv-groups .cat.focused, .live.fixed .lv-groups .cat.on.focused{ background: #3d8bff !important; color: #1A1205 !important; }
.live.fixed .lv-groups .cat.focused .n{ color: #666; }
.live.fixed > .lv-list{ left: 424px; width: 732px; top: 176px; bottom: 0; padding-left: 32px; border-left: 2px solid rgba(255,255,255,.06); }
.live.fixed .lv-list > .lv-head{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; height: 56px; margin: 0 0 12px 12px; padding: 0; letter-spacing: 0; text-transform: none; font-size: 24px; font-weight: 600; color: rgba(245,245,247,.45); }
.live.fixed .lv-list > .lv-head b{ font: 700 38px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #fff; margin-right: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live.fixed .lv-list > .lv-head span{ white-space: nowrap; }
.live.fixed .ch-list{ height: 836px; }
.live.fixed .ch-row{ margin-bottom: 6px; }
.live.fixed .ch{ height: 96px; padding: 0 20px 0 8px; border-radius: 14px; background: none; }
.live.fixed .ch > * + *{ margin-left: 0; }
.live.fixed .ch .num{ width: 58px; text-align: center; font-size: 22px; font-weight: 600; color: rgba(245,245,247,.45); }
.live.fixed .ch .num .eq{ display: none; }
.live.fixed .ch.on .num .eq{ display: -webkit-inline-flex; display: inline-flex; }
.live.fixed .ch.on .num span{ display: none; }
.live.fixed .ch.on{ box-shadow: none; }
.eq{ -webkit-align-items: flex-end; align-items: flex-end; height: 22px; vertical-align: middle; }
.eq b{ display: block; width: 4px; margin: 0 1.5px; border-radius: 1px; background: #FF5E48; }
.eq b:nth-child(1){ height: 11px; } .eq b:nth-child(2){ height: 22px; } .eq b:nth-child(3){ height: 15px; }
.ch-tile{ -webkit-flex: none; flex: none; width: 104px; height: 64px; border-radius: 10px; background: #1A2236; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 26px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: .02em; }
.ch-tile.img{ background: #1A2236 center / contain no-repeat; background-origin: content-box; padding: 8px 10px; box-sizing: border-box; }
.live.fixed .ch-tx{ -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 20px; }
.ch-l1{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.live.fixed .ch-l1 .ch-name{ -webkit-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; font-size: 28px; font-weight: 600; color: #F5F5F7; }
.ch-fav{ display: none; -webkit-flex: none; flex: none; margin-left: 10px; font-style: normal; font-size: 22px; color: #1e60f2; }
.ch-row.fav .ch-fav{ display: inline-block; }
.ch-nl{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; margin-top: 2px; font-size: 22px; color: rgba(245,245,247,.6); }
.ch-nl span{ -webkit-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-nl em{ -webkit-flex: none; flex: none; margin-left: 14px; font-style: normal; font-size: 20px; color: rgba(245,245,247,.38); }
.ch-bar{ height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.ch-bar b{ display: block; height: 100%; background: rgba(255,255,255,.55); }
.live.fixed .ch.focused{ background: #3d8bff !important; border-color: #3d8bff !important; }
.live.fixed .ch.focused .ch-name{ color: #1A1205; }
.live.fixed .ch.focused .num{ color: #666; }
.live.fixed .ch.focused .ch-nl{ color: #444; }
.live.fixed .ch.focused .ch-nl em{ color: #777; }
.live.fixed .ch.focused .ch-bar{ background: rgba(0,0,0,.12); }
.live.fixed .ch.focused .ch-bar b{ background: #1A1205; }
.live.fixed .ch.focused .ch-fav{ color: #C98A00; }
/* Painel da direita. */
.live.fixed > .lv-main{ left: 1196px; right: 96px; top: 176px; bottom: 30px; }
.live.fixed .ch-preview{ height: 354px; border-radius: 16px; }
.ch-preview.idle .pv-logo .ch-tile{ width: 240px; height: 150px; border-radius: 20px; font-size: 72px; background-color: #1A2236; }
.ch-preview.idle .pv-logo .ch-tile.img{ padding: 20px 26px; }
.pv-tag{ left: 20px; bottom: 16px; padding: 0; background: none; max-width: 62%; }
.pv-tag .ch-tile{ width: 72px; height: 44px; border-radius: 8px; font-size: 18px; background-color: rgba(0,0,0,.6); }
.pv-tag .ch-tile.img{ padding: 4px 6px; }
.pv-tag b{ font-size: 24px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.ch-preview.playing:after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7)); }
.ch-preview.playing.loading:after{ display: none; }
.pv-tag, .pv-live, .pv-ok{ z-index: 1; }
.pv-live{ position: absolute; left: 18px; top: 18px; padding: 5px 12px; border-radius: 8px; background: #FF5E48; font-size: 17px; font-weight: 800; letter-spacing: .08em; color: #fff; }
.pv-ok{ position: absolute; right: 20px; bottom: 22px; font-size: 20px; font-weight: 600; color: rgba(255,255,255,.85); }
.pv-ok b{ display: inline-block; padding: 1px 9px; margin-right: 6px; border-radius: 6px; background: rgba(255,255,255,.22); font-size: 17px; }
.live.fixed > .lv-main .pg-card{ top: 384px; bottom: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.live.fixed > .lv-main .pg-card:not(.info){ padding-top: 6px; border-top: 2px solid rgba(255,255,255,.07); }
.live.fixed .pg-card:not(.info) .pg-list{ left: 0; right: 0; }
.lv-ag{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .14em; color: rgba(245,245,247,.5); }
.lv-ag i{ width: 10px; height: 10px; margin-right: 10px; border-radius: 5px; background: #FF5E48; }
.lv-ag .ch-q{ margin-left: 14px; letter-spacing: .05em; }
.lv-ttl{ margin: 10px 0 0; font: 700 38px/1.15 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -.3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-pr{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 16px 0 14px; }
.lv-pr .ch-bar{ -webkit-flex: 1; flex: 1; height: 6px; margin: 0; background: rgba(255,255,255,.14); }
.lv-pr .ch-bar b{ background: #3d8bff; }
.lv-pr span{ margin-left: 16px; font-size: 21px; color: rgba(245,245,247,.55); white-space: nowrap; }
.lv-syn{ margin: 10px 0 0; font-size: 23px; line-height: 1.45; color: rgba(245,245,247,.72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-nx{ margin-top: 18px; padding-top: 14px; border-top: 2px solid rgba(255,255,255,.07); }
.lv-nx p{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; margin: 0; height: 40px; font-size: 24px; color: rgba(245,245,247,.75); }
.lv-nx b{ -webkit-flex: none; flex: none; width: 104px; font-size: 22px; color: rgba(245,245,247,.45); }
.lv-nx span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-acts{ display: -webkit-flex; display: flex; margin-top: 28px; }
.lv-bt{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 62px; padding: 0 28px; margin-right: 16px; border-radius: 31px; border: 2px solid rgba(255,255,255,.22); font-size: 24px; font-weight: 700; white-space: nowrap; }
.live .lv-bt.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205; }
.live .pg-row.focused .live-badge{ background: #FF5E48; border-color: #FF5E48; color: #fff; }

/* ---------- Telas profissionais (desenhos 7, 08/10): Início, Filmes e Séries, detalhe e Configurações ----------
   Mesmo padrão do Ao vivo B: margens de 96px, títulos de cartaz (Bebas Neue) no destaque e no detalhe, dados em texto
   corrido separados por pontinhos, selos brancos e o vermelho só no Assistir e na barra do que já assistiu. */
:root{ --poster-font: "Bebas Neue", var(--display); }

/* Início: destaque com o selo branco, dados em linha, título de cartaz e a primeira fileira aparecendo embaixo. */
.home .hero-shade{ background: linear-gradient(90deg, rgba(11,11,14,.96) 0%, rgba(11,11,14,.75) 32%, rgba(11,11,14,.1) 62%, rgba(11,11,14,0) 80%),
  linear-gradient(0deg, #0A0F1B 22%, rgba(11,11,14,.85) 34%, rgba(11,11,14,0) 55%); }
.home .hero-body{ padding-top: 190px; max-width: 1240px; }
.home .tg{ margin: 0; padding: 0; border: 0; background: none; font-size: 24px; font-weight: 600; color: rgba(245,245,247,.75); }
.home .tg + .tg:before{ content: "·"; margin: 0 12px; color: rgba(245,245,247,.35); }
.home .tg.top{ margin-right: 18px; padding: 5px 14px; border-radius: 8px; background: #F5F5F7; color: #111; font-size: 19px; font-weight: 800; letter-spacing: .06em; }
.home .tg.top + .tg:before{ content: none; }
.home .tg.star{ color: #1e60f2; }
.home .hero h1{ margin: 18px 0 0; font: 400 150px/.92 "Bebas Neue", "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.home .hero h1.t-md{ font-size: 108px; letter-spacing: 4px; }
.home .hero h1.t-sm{ font-size: 86px; letter-spacing: 3px; }
.home .hero .plot{ margin: 18px 0 34px; max-width: 880px; font-size: 28px; line-height: 1.45; color: rgba(245,245,247,.85); }
.home .hero-dots{ margin: 0 0 20px 6px; }
.home .hero-dots i{ width: 10px; height: 10px; margin-left: 9px; border-radius: 5px; background: rgba(255,255,255,.35); }
.home .hero-dots i.on{ width: 30px; background: #fff; }
.home-rows{ margin-top: -140px; }
.home .row h2{ font: 700 32px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; margin-bottom: 8px; }
.home .row-items > .poster.wide{ width: 404px; }
.home .row-items > .poster.wide .art{ height: 227px; }
.home .row-items > .poster.wide .cap{ font-size: 24px; }
.home .row-items > .poster .sub{ margin-top: 2px; font-size: 20px; color: rgba(245,245,247,.45); }
/* Barra do que já assistiu: fina, vermelha, por cima de um degradê no pé da imagem. */
.poster .bar{ z-index: 1; height: 5px; border-radius: 3px; }
.poster .bar i{ background: #3d8bff; border-radius: 3px; }
.poster.wide .art:after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.65)); }
.poster.wide .bar{ left: 16px; right: 16px; bottom: 14px; }

/* Filmes e Séries: categorias iguais às do Ao vivo, linha separando, e a grade com 6 capas, nome e "ano · duração". */
.vod > .lv-groups{ left: 96px; width: 328px; top: 176px; bottom: 40px; padding: 0 16px 0 0; border-right: 2px solid rgba(255,255,255,.06); border-radius: 0; }
.vod .lv-groups .lv-head{ margin: 0 0 14px 20px; font-size: 19px; letter-spacing: .16em; color: rgba(245,245,247,.42); }
.vod .lv-groups .cat{ height: 60px; padding: 0 20px; margin-bottom: 2px; font-size: 27px; font-weight: 600; color: rgba(245,245,247,.7); }
.vod .lv-groups .cat .n{ font-size: 21px; color: rgba(245,245,247,.38); }
.vod .lv-groups .cat.on{ background: rgba(255,255,255,.08); color: #fff; font-weight: 700; box-shadow: none; }
.vod .lv-groups .cat.on .n{ color: rgba(245,245,247,.6); }
.vod .lv-groups .cat.focused, .vod .lv-groups .cat.on.focused{ background: #3d8bff !important; color: #1A1205 !important; }
.vod .lv-groups .cat.focused .n{ color: #666; }
.vod > .vod-main{ left: 456px; right: 96px; top: 176px; }
.vod-info{ height: 150px; padding: 0 300px 0 0; }
.vod-info h1{ font: 700 40px/1.2 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -.5px; }
.vod-info .meta{ margin: 6px 0 4px; font-size: 22px; color: rgba(245,245,247,.55); }
.vod-info .vi-plot{ font-size: 22px; line-height: 1.35; color: rgba(245,245,247,.68); }
.vod-info.is-cat h1{ display: inline; font-size: 38px; }
.vod-info.is-cat .meta{ display: inline; margin: 0 0 0 16px; font-size: 24px; font-weight: 600; color: rgba(245,245,247,.45); }
.vod-info .sort-btn{ top: 0; right: 0; height: 52px; padding: 0 22px; border-radius: 26px; border: 2px solid rgba(255,255,255,.2); background: none; font-size: 22px; font-weight: 700; color: rgba(245,245,247,.85); }
.vod .grid.vod-grid{ width: auto; height: 754px; margin-left: -16px; padding: 18px 16px 30px; }
.grid.vod-grid > .poster, .grid.vod-grid > .poster:nth-child(5n){ width: 180px; margin: 0 51px 26px 0; }
.grid.vod-grid > .poster:nth-child(6n){ margin-right: 0; }
.grid.vod-grid > .poster .art{ height: 270px; border-radius: 12px; }
.grid.vod-grid > .poster .cap{ margin-top: 14px; font-size: 23px; }
.grid.vod-grid > .poster .sub{ margin-top: 2px; font-size: 19px; color: rgba(245,245,247,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.vod-grid > .poster.focused{ -webkit-transform: none; transform: none; }
.grid.vod-grid > .poster.focused .art{ -webkit-transform: scale(1.04); transform: scale(1.04); box-shadow: 0 0 0 5px #3d8bff, 0 10px 26px rgba(0,0,0,.5); }
.pb-new, .pb-added{ background: #F5F5F7 !important; color: #111; font-size: 15px; font-weight: 800; letter-spacing: .06em; border-radius: 6px; padding: 3px 9px; }

/* Detalhe do filme e da série: imagem do título na tela inteira, escurecida à esquerda; sem a capa pequena. */
.detail-shade{ background: linear-gradient(90deg, rgba(11,11,14,.97) 0%, rgba(11,11,14,.88) 24%, rgba(11,11,14,.55) 44%, rgba(11,11,14,.1) 68%, rgba(11,11,14,0) 84%),
  linear-gradient(0deg, #0A0F1B 22%, rgba(11,11,14,.8) 40%, rgba(11,11,14,0) 62%); }
.detail .detail-body, .detail.series .detail-body, .detail:not(.series) .detail-body{ padding-top: 148px; }
.detail .detail-top, .detail.series .detail-top, .detail:not(.series) .detail-top{ margin: 0 96px 34px; }
.detail .detail-poster{ display: none; }
.detail .detail-top > .detail-text{ margin-left: 0; max-width: 1180px; }
.d-line{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0; font-size: 24px; font-weight: 600; color: rgba(245,245,247,.75); }
.d-kind{ margin-right: 18px; padding: 5px 14px; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dl + .dl:before{ content: "·"; margin: 0 12px; color: rgba(245,245,247,.35); }
.dl.star{ color: #1e60f2; }
.dl .cert{ margin-left: 0; font-size: 19px; vertical-align: 1px; }
.detail-text h1, .detail.series .detail-text h1{ margin: 14px 0 0; font: 400 140px/.95 "Bebas Neue", "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.detail-text h1.t-md{ font-size: 104px; letter-spacing: 4px; }
.detail-text h1.t-sm{ font-size: 84px; letter-spacing: 3px; }
.detail .d-tag{ margin: 8px 0 0; font-size: 27px; color: rgba(245,245,247,.9); }
.detail .detail-text .plot, .detail.series .detail-text .plot{ margin: 14px 0 0; max-width: 900px; min-height: 0; font-size: 26px; line-height: 1.45; color: rgba(245,245,247,.78); -webkit-line-clamp: 3; max-height: 4.35em; }
.detail .d-crew{ margin: 12px 0 0; font-size: 22px; color: rgba(245,245,247,.8); }
.detail .d-crew .muted{ color: rgba(245,245,247,.5); }
.detail .detail-text .actions{ margin-top: 30px; }
.detail .btn .btn-sub{ margin-left: 14px; font-size: 21px; font-weight: 600; opacity: .8; }
.detail .d-prog{ margin-top: 18px; }
.detail .seasons{ margin: 0 96px; }
.detail .season-pick{ height: 52px; padding: 0 22px; border-radius: 26px; font: 700 26px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.detail .season-pick .sp-n{ font: 600 22px "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.detail-body .row h2, .detail-body .row-items{ padding-left: 96px; }
.ep-plot{ margin-left: 96px; margin-right: 96px; }
.d-cast, .d-about{ margin-left: 96px; margin-right: 96px; }
/* Episódios em 16:9 com o número grande, selo de Continuar ou Assistido e a barra no pé da imagem. */
.detail .poster[data-ep]{ width: 384px; }
.detail .poster[data-ep] .art{ height: 216px; border-radius: 12px; }
.detail .poster[data-ep] .art:after{ height: 55%; }
.ep-n{ position: absolute; z-index: 1; left: 16px; bottom: 18px; font: 400 56px/1 "Bebas Neue", "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ep-chip{ position: absolute; z-index: 1; right: 12px; top: 12px; padding: 3px 10px; border-radius: 6px; background: #F5F5F7; color: #111; font-size: 16px; font-weight: 800; letter-spacing: .06em; }
.ep-chip.done{ background: rgba(0,0,0,.6); color: #fff; }
.detail .poster[data-ep] .bar{ left: 0; right: 0; bottom: 0; height: 6px; border-radius: 0; background: rgba(255,255,255,.22); }
.detail .poster[data-ep] .bar i{ border-radius: 0; }
.detail .poster[data-ep] .cap{ display: block; margin-top: 12px; font-size: 24px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail .poster[data-ep] .sub{ margin-top: 2px; font-size: 20px; color: rgba(245,245,247,.45); }
/* Seta de voltar: bolinha clara no canto, como no desenho. */
.scr-back.tb-ic{ width: 64px; height: 64px; top: 56px; padding: 0; border: 0; background: rgba(38,38,44,.92); }
.scr-back.tb-ic svg{ width: 30px; height: 30px; }
.scr-back.tb-ic.focused{ background: #3d8bff; color: #1A1205; }

/* Configurações: título, cartão da assinatura (estado com bolinha, barra da validade, dados em linhas) e opções em pares. */
.vod > .acc-title{ top: 176px; bottom: auto; left: 96px; margin: 0; font: 700 44px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.acc-title span{ margin-left: 16px; font: 600 26px "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: rgba(245,245,247,.45); }
.vod > .acc-main.acc2{ top: 262px; left: 96px; right: 96px; }
.acc2 .acc-sum{ -webkit-flex: 0 0 560px; flex: 0 0 560px; padding: 36px 40px; border: 0; border-radius: 20px; background: #121929; }
.acc-sum .acc-h{ margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,245,247,.45); }
.acc-sum .acc-h svg{ width: 26px; height: 26px; }
.acc-sum .acc-state, .acc-card.ok .acc-state, .acc-card.bad .acc-state, .acc-card.warn .acc-state{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 22px 0 6px; font: 700 52px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #fff; }
.acc-dot{ -webkit-flex: none; flex: none; width: 16px; height: 16px; margin-right: 18px; border-radius: 8px; background: #8A8A93; box-shadow: 0 0 0 6px rgba(138,138,147,.18); }
.acc-card.ok .acc-dot{ background: #3FB950; box-shadow: 0 0 0 6px rgba(63,185,80,.18); }
.acc-card.warn .acc-dot{ background: #1e60f2; box-shadow: 0 0 0 6px rgba(30,96,242,.18); }
.acc-card.bad .acc-dot{ background: #FF5C5C; box-shadow: 0 0 0 6px rgba(255,92,92,.18); }
.acc-sum .acc-line{ margin: 10px 0 0; font-size: 25px; line-height: 1.4; }
.acc-meter{ height: 8px; margin: 18px 0 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.acc-meter b{ display: block; height: 100%; border-radius: 4px; background: #F5F5F7; }
.acc-meter.low b{ background: #1e60f2; }
.acc-sum .acc-kvs{ margin-top: 26px; padding-top: 0; border-top: 2px solid rgba(255,255,255,.07); }
.acc-sum .acc-kvs.acc-dev{ margin-top: 0; border-top: 0; }
.acc-sum .acc-kv{ -webkit-justify-content: space-between; justify-content: space-between; margin: 0; padding: 13px 0; border-bottom: 2px solid rgba(255,255,255,.07); font-size: 23px; }
.acc-sum .acc-kv > span{ -webkit-flex: none; flex: none; color: rgba(245,245,247,.5); font-weight: 600; }
.acc-sum .acc-kv > b{ margin-left: 24px; text-align: right; font-weight: 600; }
.acc-sum .acc-kv .mono{ font-size: 22px; }
.acc2 .acc-opts{ margin-left: 48px; }
.acc-g{ margin-bottom: 24px; }
.acc-gh{ margin: 0 0 12px 4px; font-size: 19px; font-weight: 700; letter-spacing: .16em; color: rgba(245,245,247,.42); }
.acc-opt{ width: 49%; margin-right: 2%; border: 0; border-radius: 16px; background: #121929; }
.acc-opt.wide{ width: 100%; margin-right: 0; }
.ao-ic{ width: 56px; height: 56px; border-radius: 14px; }
.ao-ic svg{ width: 28px; height: 28px; }
.ao-chev{ -webkit-flex: none; flex: none; margin-left: 16px; font-size: 32px; line-height: 1; color: rgba(245,245,247,.3); }
.acc-opt.danger .ao-ic{ background: rgba(61,139,255,.14); color: #FF6B6B; }
.acc-opt.danger b{ color: inherit; }
.acc-opt.focused{ -webkit-transform: scale(1.02); transform: scale(1.02); }
.acc-opt.focused .ao-chev{ color: #1A1205; }
.acc-opt.danger.focused .ao-ic{ background: #18203A; color: #FF6B6B; }
.vod > .vod-main{ bottom: 0; }
.detail .season-pick.one{ padding-left: 0; border-color: transparent; background: none; }
.acc-opt.focused{ -webkit-transform: none; transform: none; }
.acc-dot{ margin-left: 6px; }
/* Grade sem capa: ícone discreto no meio (o nome já aparece embaixo da capa). */
.poster .art-ph{ position: absolute; left: 0; right: 0; top: 50%; margin-top: -32px; text-align: center; }
.poster .art-ph svg{ width: 64px; height: 64px; fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Tela do título rolada: faixa escura no alto atrás da seta de voltar (o título passa por baixo dela). */
.detail:after{ content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(#070e1c 50%, rgba(10,14,25,0)); opacity: 0; pointer-events: none; transition: opacity .2s; }
.detail.scrolled:after{ opacity: 1; }

/* ---------- Acabamento (Meza 08/10): nada cortado e nenhum nome com "…" ----------
   Fileiras: só capas inteiras entre as margens de 96 px. O recorte da fileira fica 14 px para fora da margem,
   folga do tamanho da moldura branca da capa em foco; a fileira anda de capa em capa (data-scroll-x = 14). */
.row-items{ position: relative; margin: 0 82px; padding: 14px 14px 20px; }
.row-items > .poster, .home .row-items > .poster{ width: 188px; }
.row-items > .poster .art, .home .row-items > .poster .art{ height: 282px; }
.row-items > .poster.wide, .home .row-items > .poster.wide{ width: 408px; }
.row-items > .poster.wide .art, .home .row-items > .poster.wide .art{ height: 230px; }
.row-items > .poster.focused{ -webkit-transform: none; transform: none; }
.row-items > .poster.focused .art{ -webkit-transform: scale(1.04); transform: scale(1.04); }
.detail-body .row-items{ margin: 0 82px; padding-left: 14px; padding-right: 14px; }
.detail .poster[data-ep]{ width: 408px; }
.detail .poster[data-ep] .art{ height: 230px; }
.home .row-items > .fb-card{ width: 554px; }
/* Nome embaixo da capa: sempre inteiro, quebrando linha; todos no mesmo tamanho de letra. */
.cap, .grid.vod-grid > .poster .cap, .home .row-items > .poster .cap, .detail .poster[data-ep] .cap, .poster[data-ep] .cap{ display: block; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: none; line-height: 1.2; }
.grid.vod-grid > .poster .cap{ font-size: 21px; line-height: 1.22; }
.row-items > .poster .cap, .home .row-items > .poster .cap{ font-size: 22px; }
.home .row-items > .poster.wide .cap, .detail .poster[data-ep] .cap{ font-size: 24px; }
/* Filmes e Séries: coluna de categorias um pouco mais larga e nome que não cabe quebra em 2 linhas. A grade ganha
   16 px de folga à esquerda dentro da área visível, para a moldura da primeira capa em foco não ser cortada. */
.vod > .lv-groups{ width: 344px; }
.vod > .vod-main{ left: 456px; padding: 6px 0 0 16px; }
.lv-groups .cat .cat-name, .vod .lv-groups .cat .cat-name, .live.fixed .lv-groups .cat > .cat-name{ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
.vod .lv-groups .cat, .live.fixed .lv-groups .cat{ height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }
/* Busca: a área de resultados termina na margem e cada fileira mostra 5 capas (ou 3 canais) inteiras. */
.gsearch{ right: 82px; }
.gs-res{ margin-left: 36px; }
.gs-res .row h2{ margin-left: 14px; }
.gs-res .row-items{ margin: 0; padding: 14px 14px 20px; }
.gs-res .row-items > .poster{ width: 190px; }
.gs-res .row-items > .poster .art{ height: 285px; }
.gs-res .row-items > .gs-ch{ width: 338px; margin-right: 0; }
/* A sombra da capa em foco não escurece o nome embaixo dela. */
.poster > .cap, .poster > .sub{ position: relative; z-index: 1; }

/* ---------- Duas fileiras inteiras (Meza 08/10 14:30): Filmes, Séries e a busca mostram sempre duas fileiras
   completas de capas, com nome e ano, sem nada cortado embaixo. Cada capa tem altura fixa (nome em até 3 linhas),
   a área visível tem a altura exata de duas fileiras e a grade rola de fileira em fileira. ---------- */
/* Grade: 7 capas de 160 x 240 por fileira. Fileira = 345 px de capa + 14 de espaço; 14 px de folga em cima para a moldura. */
.vod .grid.vod-grid{ height: 718px; padding: 14px 16px 0; }
.grid.vod-grid > .poster, .grid.vod-grid > .poster:nth-child(5n), .grid.vod-grid > .poster:nth-child(6n){ width: 160px; height: 345px; margin: 0 35px 14px 0; }
.grid.vod-grid > .poster:nth-child(7n){ margin-right: 0; }
.grid.vod-grid > .poster .art{ height: 240px; }
.grid.vod-grid > .poster .cap{ margin-top: 12px; font-size: 20px; line-height: 1.15; max-height: 69px; overflow: hidden; }
.grid.vod-grid > .poster .sub{ font-size: 17px; white-space: nowrap; overflow: visible; text-overflow: clip; }
/* Pesquisar dentro de Filmes/Séries: as mesmas capas da grade, 4 por fileira ao lado do teclado, duas fileiras inteiras. */
.grid.narrow{ width: 745px; height: 718px; margin-left: -14px; padding: 14px 14px 0; }
.grid.narrow > .poster, .grid.narrow > .poster:nth-child(3n), .grid.narrow > .poster:nth-child(5n){ width: 160px; height: 345px; margin: 0 35px 14px 0; }
.grid.narrow > .poster:nth-child(4n){ margin-right: 0; }
.grid.narrow > .poster .art{ height: 240px; border-radius: 12px; }
.grid.narrow > .poster .cap{ margin-top: 12px; font-size: 20px; line-height: 1.15; max-height: 69px; overflow: hidden; }
.grid.narrow > .poster .sub{ margin-top: 2px; font-size: 17px; color: rgba(245,245,247,.42); white-space: nowrap; }
.grid.narrow > .poster.focused{ -webkit-transform: none; transform: none; }
.grid.narrow > .poster.focused .art{ -webkit-transform: scale(1.04); transform: scale(1.04); box-shadow: 0 0 0 5px #3d8bff, 0 10px 26px rgba(0,0,0,.5); }
/* Nome comprido: a letra diminui até caber nas 3 linhas (fitCaps no screens.js), em vez de cortar ou pôr "…". */
.grid.vod-grid > .poster .cap.cap-s, .grid.narrow > .poster .cap.cap-s, .gs-res .row-items > .poster .cap.cap-s{ font-size: 17px; line-height: 1.15; }
.grid.vod-grid > .poster .cap.cap-xs, .grid.narrow > .poster .cap.cap-xs, .gs-res .row-items > .poster .cap.cap-xs{ font-size: 15px; line-height: 1.15; }
.grid.vod-grid > .poster.cap-long .cap, .grid.narrow > .poster.cap-long .cap{ max-height: 94px; }
.grid.vod-grid > .poster.cap-long .sub, .grid.narrow > .poster.cap-long .sub{ display: none; }
/* Título no alto da grade: nome comprido diminui a letra (fitTitle no screens.js) em vez de terminar em "…". */
.vod-info h1.fit1{ font-size: 32px; line-height: 48px; }
.vod-info h1.fit2{ font-size: 26px; line-height: 48px; }
.vod-info h1.fit3{ font-size: 22px; line-height: 24px; white-space: normal; }
/* Busca: 6 capas de 156 x 234 por fileira; a área de resultados mostra exatamente duas fileiras (Filmes e Séries). */
.gs-res{ height: 836px; }
.gs-res .row{ margin-bottom: 24px; }
.gs-res .row h2{ margin-bottom: 10px; }
.gs-res .row-items{ padding: 14px; }
.gs-res .row-items > .poster{ width: 156px; height: 313px; }
.gs-res .row-items > .poster + .poster{ margin-left: 28px; }
/* Espaço vazio depois da última fileira: ao descer até ela, ela sobe inteira para o alto (a de cima some inteira). */
.gs-res:after{ content: ""; display: block; height: 600px; }
.gs-res .row-items > .poster .art{ height: 234px; }
.gs-res .row-items > .poster .cap{ margin-top: 10px; font-size: 20px; line-height: 1.15; max-height: 69px; overflow: hidden; }
/* Categorias de Filmes, Séries e Ao vivo: a que não cabe inteira em cima ou embaixo some (d-off, clipCats no screens.js),
   no lugar do degradê de antes, que na tela cheia cortava a categoria do cursor. A categoria com o cursor nunca some.
   O espaço no fim deixa a última categoria subir com a mesma folga de 40 px das outras. */
.vod > .lv-groups:after{ content: ""; display: block; height: 40px; }
.lv-groups > .d-off:not(.focused){ visibility: hidden; }

/* ---------- Futebol "Placar" (desenho 8A, 08/10): abas e campeonatos no alto, ao vivo em cartões grandes,
   os outros jogos em linhas largas com horário, times e canal. Nome de time nunca cortado (quebra linha). ---------- */
.fx{ position: absolute; top: 150px; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; color: #F5F5F7; }
.fx-head{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 16px 96px 0; }
.fx-head h1{ margin: 0 40px 0 0; font: 700 44px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.fx-tabs{ display: -webkit-flex; display: flex; }
.fx-tab{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 56px; padding: 0 26px; margin-right: 14px; border-radius: 28px; background: rgba(255,255,255,.07); font-size: 24px; font-weight: 700; color: rgba(245,245,247,.75); }
.fx-tab b{ margin-left: 12px; font-size: 20px; opacity: .6; }
.fx-tab i{ display: block; width: 12px; height: 12px; margin-right: 12px; border-radius: 6px; background: #3d8bff; box-shadow: 0 0 0 5px rgba(61,139,255,.25); }
.fx-tab.on{ background: rgba(255,255,255,.16); color: #fff; }
.fx-tab.focused{ background: #3d8bff; color: #1A1205; }
.fx-pills{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 22px 96px 0; }
.fx-pill{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 46px; padding: 0 20px; margin: 0 12px 10px 0; border-radius: 23px; border: 2px solid rgba(255,255,255,.14); font-size: 21px; font-weight: 600; color: rgba(245,245,247,.7); white-space: nowrap; }
.fx-pill.on{ border-color: rgba(255,255,255,.55); color: #fff; }
.fx-pill.focused{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.fx-lg{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-width: 0; }
.fx-lg .crest.sm{ width: 26px; height: 26px; margin-right: 10px; }
.fx-dot{ display: block; -webkit-flex: none; flex: none; width: 12px; height: 12px; margin-right: 10px; border-radius: 6px; background: rgba(245,245,247,.45); }
.fx .crest:not(.txt){ background-color: transparent; border-radius: 0; background-size: contain; }
.fx-list{ position: relative; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 6px 82px 0; padding: 0 14px 40px; }
.fx-sec{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 20px 0 16px; font-size: 20px; font-weight: 800; letter-spacing: .16em; color: rgba(245,245,247,.55); }
.fx-sec i{ display: block; width: 12px; height: 12px; margin-right: 12px; border-radius: 6px; background: #3d8bff; }
.fx-sec em{ font-style: normal; margin-left: 14px; letter-spacing: 0; font-weight: 600; color: rgba(245,245,247,.38); }
.fx-cards{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.fx-card{ position: relative; width: 554px; margin: 0 32px 28px 0; padding: 22px 26px 26px; border-radius: 20px; background: #15151A; box-sizing: border-box; overflow: hidden; }
.fx-card:nth-child(3n){ margin-right: 0; }
.fx-card.focused{ box-shadow: 0 0 0 5px #3d8bff, 0 16px 40px rgba(0,0,0,.6); -webkit-transform: scale(1.03); transform: scale(1.03); }
.fx-top{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 20px; font-weight: 600; color: rgba(245,245,247,.6); }
.fx-on{ -webkit-flex: none; flex: none; margin-left: auto; padding: 4px 12px; border-radius: 8px; background: #3d8bff; color: #1A1205; font-size: 18px; font-weight: 800; letter-spacing: .06em; }
.fx-teams{ display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; margin-top: 16px; }
.fx-team{ -webkit-flex: 1 1 0; flex: 1 1 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; min-width: 0; text-align: center; }
.fx-team .crest{ width: 88px; height: 88px; }
.fx-team .crest.txt{ font-size: 40px; }
.fx-team span{ margin-top: 10px; font-size: 25px; font-weight: 700; line-height: 1.15; }
.fx-score{ -webkit-flex: none; flex: none; width: 170px; padding-top: 2px; text-align: center; font: 400 104px/1 "Bebas Neue", "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: 4px; }
.fx-score small{ display: block; margin-top: 4px; font-family: "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; color: rgba(245,245,247,.5); }
.fx-card .fx-where{ margin-top: 18px; font-size: 21px; }
.fx-pr{ position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.08); }
.fx-pr i{ display: block; height: 100%; background: #3d8bff; }
.fx-row{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 92px; padding: 10px 28px; margin-bottom: 12px; border-radius: 16px; background: #121929; box-sizing: border-box; }
.fx-row.focused{ background: #192136; box-shadow: 0 0 0 5px #3d8bff; }
.fx-hr{ -webkit-flex: none; flex: none; width: 130px; font: 400 50px/1 "Bebas Neue", "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: 2px; }
.fx-row > .fx-lg{ -webkit-flex: none; flex: none; width: 260px; padding-right: 16px; box-sizing: border-box; font-size: 21px; font-weight: 600; line-height: 1.15; color: rgba(245,245,247,.55); }
.fx-h, .fx-a{ -webkit-flex: 1 1 0; flex: 1 1 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-width: 0; font-size: 27px; font-weight: 700; line-height: 1.12; }
.fx-h{ -webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; }
.fx-h .crest{ margin-left: 16px; }
.fx-a .crest{ margin-right: 16px; }
.fx-row .crest{ width: 52px; height: 52px; }
.fx-x{ -webkit-flex: none; flex: none; width: 90px; text-align: center; font-size: 24px; color: rgba(245,245,247,.35); }
.fx-row.fin .fx-x{ font: 400 40px/1 "Bebas Neue", "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: 2px; color: #fff; }
.fx-row.fin{ opacity: .72; }
.fx-row.fin.focused{ opacity: 1; }
.fx-row .fx-where{ -webkit-flex: none; flex: none; width: 440px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; font-size: 21px; }
.fx-where b{ font-weight: 600; color: rgba(245,245,247,.88); }
.fx-where em{ font-style: normal; margin-left: 8px; color: rgba(245,245,247,.42); }
.fx-where em.no{ margin-left: 0; }
.fx-soon{ margin-right: 14px; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; font-weight: 800; }
.fx-empty{ margin: 40px 96px; font-size: 28px; }
.fx-list.scrolled{ -webkit-mask-image: linear-gradient(rgba(0,0,0,0), #000 90px); mask-image: linear-gradient(rgba(0,0,0,0), #000 90px); }
/* Escolha do canal do jogo: nome do canal inteiro (quebra em 2 linhas), cartão um pouco mais alto. */
.fb-tile{ height: auto; min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.fb-tile .ch-name{ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
/* Fim da lista de jogos: some num degradê suave (a lista rola para baixo). */
.fx:after{ content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(10,14,25,0), #070e1c 85%); pointer-events: none; }
.fx-pill.focused .fx-dot{ background: #8A8A90; }

/* ---------- Perfil (criar/editar), pedido do Meza 08/10: o ícone escolhido fica ao lado do nome, e Salvar/Cancelar/Excluir
   ficam embaixo do teclado. À direita, todos os ícones em fileiras inteiras (6 por fileira, 5 fileiras à vista), rolando
   de fileira em fileira; o total de opções aparece no título. ---------- */
.pf-edit{ padding-top: 76px; }
.pf-edit h1{ margin: 0 0 24px; font: 700 52px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.pf-name{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 22px; }
.pf-name .pf-big{ -webkit-flex: none; flex: none; margin: 0 22px 0 0; }
.pf-name .pf-big .av{ width: 112px; height: 112px; border-radius: 22px; }
.pf-name .kb-q{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; margin: 0; }
.pf-left .pf-actions{ margin-top: 22px; }
.pf-left .pf-actions .btn{ height: 68px; padding: 0 36px; font-size: 26px; }
.pf-right .lv-head{ margin: 0 0 14px; }
.pf-right .lv-head .pf-n{ margin-left: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: rgba(245,245,247,.38); }
.pf-icons{ box-sizing: content-box; width: 838px; height: 706px; margin-left: -10px; padding: 10px 10px 0; overflow: hidden; }
.pf-ic, .pf-ic:nth-child(4n){ margin: 0 14px 14px 0; }
.pf-ic:nth-child(6n){ margin-right: 0; }
.pf-ic .av{ width: 120px; height: 120px; border-radius: 20px; }

/* ---------- Página do título sem cortes (Meza 08/10) ----------
   O nome grande fica numa linha só: a letra diminui conforme o tamanho (detailFit no screens.js). Na série, se os
   episódios (no filme, o elenco) não couberem inteiros na primeira tela, a sinopse fica em 2 linhas (fit-a) e some a
   linha da equipe (fit-b).
   Ao rolar, o bloco que ficaria pela metade some (d-off) e volta inteiro quando a página para nele. */
.detail-text h1, .detail.series .detail-text h1{ white-space: nowrap; }
.detail-text h1.t-md, .detail.series .detail-text h1.t-md{ font-size: 104px; letter-spacing: 4px; }
.detail-text h1.t-sm, .detail.series .detail-text h1.t-sm{ font-size: 84px; letter-spacing: 3px; }
.detail-text h1.t-xs, .detail.series .detail-text h1.t-xs{ font-size: 68px; letter-spacing: 2px; }
.detail-text h1.t-xxs, .detail.series .detail-text h1.t-xxs{ font-size: 56px; letter-spacing: 1.5px; }
.detail-text h1.t-wrap, .detail.series .detail-text h1.t-wrap{ white-space: normal; }
.detail.fit-a .detail-text .plot{ -webkit-line-clamp: 2; max-height: 2.9em; }
.detail.fit-a .detail-text .actions{ margin-top: 22px; }
.detail.fit-b .d-crew, .detail.fit-b .d-tag{ display: none; }
.detail-body > *, .home > .hero, .home-rows > .row{ transition: opacity .18s, visibility .18s; }
.detail-body > .d-off, .home > .hero.d-off, .home-rows > .row.d-off{ opacity: 0; visibility: hidden; }
/* Início: o destaque tem sempre a mesma altura (título numa linha só, que diminui se for longo, e sinopse com lugar
   para 2 linhas). Assim os botões ficam sempre no mesmo lugar e a primeira fileira cabe inteira na primeira tela. */
.home .hero-body{ padding-top: 176px; }
.home .hero h1{ white-space: nowrap; display: block; overflow: visible; }
.home .hero h1.t-xs{ font-size: 68px; letter-spacing: 2px; }
.home .hero h1.t-xxs{ font-size: 56px; letter-spacing: 1.5px; }
.home .hero h1.t-wrap{ white-space: normal; }
.home .hero .plot{ height: 2.9em; margin: 14px 0 28px; }
.home-rows{ margin-top: -232px; }
/* Fileiras de capas (Início e "Mais em" do título): nome em até 2 linhas. Nome longo diminui a letra (fitCaps) e, se
   ainda assim não couber, ganha a 3ª linha. Antes um nome enorme fora da tela esticava a fileira toda e abria um buraco. */
.home .row-items > .poster:not(.wide) .cap, .detail-body .row:not(.ep-section) .row-items > .poster .cap{ max-height: 2.45em; overflow: hidden; }
.home .row-items > .poster .cap.cap-s, .detail-body .row:not(.ep-section) .row-items > .poster .cap.cap-s{ font-size: 20px; }
.home .row-items > .poster .cap.cap-xs, .detail-body .row:not(.ep-section) .row-items > .poster .cap.cap-xs{ font-size: 17px; }
.home .row-items > .poster.cap-long .cap, .detail-body .row:not(.ep-section) .row-items > .poster.cap-long .cap{ max-height: 3.65em; }
.home .row-items, .detail-body .row-items{ -webkit-align-items: flex-start; align-items: flex-start; }

/* ---------- Ao vivo em tela cheia (teste, Meza 08/10) ----------
   Sem o menu de cima: a logo vai para o alto da coluna de categorias, a data e a hora para o alto à direita.
   Ganho: 9 canais inteiros (eram 8 e o 9º cortado), prévia maior e mais categorias à vista.
   ▲ no topo das listas mostra o menu por cima da tela (#topbar.fs.peek); VOLTAR volta ao Início. */
#topbar.fs{ -webkit-transform: translateY(-110%); transform: translateY(-110%); opacity: 0; transition: opacity .2s, -webkit-transform .2s; transition: transform .2s, opacity .2s; transition: transform .2s, opacity .2s, -webkit-transform .2s; }
#topbar.fs.peek{ -webkit-transform: none; transform: none; opacity: 1; height: 150px; background: #0A0F1B; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.lv-fs-brand, .lv-fs-top{ position: absolute; z-index: 3; }
.lv-fs-brand{ left: 112px; top: 46px; height: 52px; }
.lv-fs-brand img{ display: block; width: auto; height: 52px; }
.lv-fs-top{ right: 96px; top: 50px; height: 48px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 24px; color: rgba(245,245,247,.55); white-space: nowrap; }
.lv-fs-top .clk{ margin-left: 14px; font-size: 28px; font-weight: 700; color: #F5F5F7; }
.lv-fs-top .key{ margin-right: 34px; font-size: 20px; font-weight: 600; color: rgba(245,245,247,.5); }
.lv-fs-top .key b{ display: inline-block; padding: 2px 10px; margin-right: 8px; border-radius: 6px; background: rgba(255,255,255,.14); font-size: 17px; letter-spacing: .06em; color: #F5F5F7; }
.live.fixed > .lv-groups{ top: 128px; }
.live.fixed .lv-groups > .lv-head{ display: none; }
.live.fixed > .lv-list{ top: 44px; width: 664px; }
/* Lista de canais sempre com 9 canais inteiros: altura = 6 + 9 canais de 102 - 6 + 6 e rolagem de um canal por vez
   (data-scroll-min com folga 6), então nunca fica canal pela metade em cima ou embaixo. */
.live.fixed .ch-list{ box-sizing: border-box; height: 924px; padding: 6px 4px; }
.live.fixed > .lv-main{ top: 112px; bottom: 24px; left: 1124px; }
.live.fixed .ch-preview{ height: 394px; }
.live.fixed > .lv-main .pg-card{ top: 426px; }
/* Painel do Ao vivo (EPG melhorado, Meza 08/10): Agora + quanto falta, barra com início e fim, sinopse em 2 linhas
   e "A seguir" em linha do tempo (bolinha + traço), com até 3 programas. */
.lv-ag .lv-left{ margin-left: auto; font-size: 21px; font-weight: 600; letter-spacing: 0; color: rgba(245,245,247,.62); }
.lv-pr2{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 16px 0 0; }
.lv-pr2 > b{ -webkit-flex: none; flex: none; font-size: 20px; font-weight: 600; color: rgba(245,245,247,.55); }
.lv-pr2 .ch-bar{ -webkit-flex: 1; flex: 1; height: 6px; margin: 0 16px; border-radius: 3px; background: rgba(255,255,255,.14); }
.lv-pr2 .ch-bar b{ background: #3d8bff; border-radius: 3px; }
.live.fixed .lv-main .lv-syn{ margin-top: 14px; -webkit-line-clamp: 2; }
.lv-up{ margin-top: 20px; padding-top: 16px; border-top: 2px solid rgba(255,255,255,.07); }
.lv-uph{ margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: .14em; color: rgba(245,245,247,.45); }
.lv-ur{ position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 46px; padding: 4px 0 4px 28px; box-sizing: border-box; }
.lv-ur:before{ content: ""; position: absolute; left: 3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 5px; background: rgba(245,245,247,.3); }
.lv-ur:after{ content: ""; position: absolute; left: 7px; top: 50%; height: 100%; width: 2px; margin-top: 8px; background: rgba(255,255,255,.1); }
.lv-ur:last-child:after{ display: none; }
.lv-ur.first:before{ background: #F5F5F7; }
.lv-ur b{ -webkit-flex: none; flex: none; width: 82px; font-size: 22px; font-weight: 700; color: rgba(245,245,247,.9); }
.lv-ur span{ -webkit-flex: 1; flex: 1; min-width: 0; font-size: 24px; line-height: 1.2; color: rgba(245,245,247,.8); }
.lv-ur em{ -webkit-flex: none; flex: none; margin-left: 14px; font-style: normal; font-size: 19px; font-weight: 600; color: rgba(245,245,247,.42); }
.lv-ur.first span{ color: #F5F5F7; }
.lv-ur.first em{ padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.12); color: #F5F5F7; }
.live.fixed .lv-main .lv-acts{ margin-top: 22px; }


/* ---------- Filmes, Séries e Futebol em tela cheia (teste, Meza 08/10) ----------
   Iguais ao Ao vivo: sem o menu de cima (App.isFs), logo no alto à esquerda, data e hora no alto à direita.
   Filmes e Séries: capas maiores, 6 por fileira (eram 7 menores) e sempre 2 fileiras inteiras:
   grade = 14 + 2 x (capa 410 + 14) = 862 de altura, rolando uma fileira por vez (data-scroll-min com folga 14). */
.vod.fs > .lv-groups{ top: 128px; }
.vod.fs .lv-groups > .lv-head{ display: none; }
.vod.fs > .vod-main{ top: 44px; }
.vod.fs .vod-info{ height: 150px; padding-top: 0; padding-right: 440px; }
.vod.fs .vod-info .sort-btn{ top: 76px; }
.vod.fs .grid.vod-grid{ height: 848px; }
.vod.fs .grid.vod-grid > .poster, .vod.fs .grid.vod-grid > .poster:nth-child(5n), .vod.fs .grid.vod-grid > .poster:nth-child(7n){ width: 200px; height: 410px; margin: 0 27px 14px 0; }
.vod.fs .grid.vod-grid > .poster:nth-child(6n){ width: 200px; height: 410px; margin: 0 0 14px 0; }
.vod.fs .grid.vod-grid > .poster .art{ height: 300px; }
.vod.fs .grid.vod-grid > .poster .cap{ font-size: 22px; max-height: 76px; }
.vod.fs .grid.vod-grid > .poster .cap.cap-s{ font-size: 19px; }
.vod.fs .grid.vod-grid > .poster .cap.cap-xs{ font-size: 17px; }
.vod.fs .grid.vod-grid > .poster.cap-long .cap{ max-height: 100px; }
/* Pesquisar: o teclado e os resultados ficam na altura das categorias, abaixo da data e da hora. */
.vod.fs > .vod-main.search{ top: 128px; }
/* Futebol: a tela sobe e a logo fica ao lado do título; cabe uma fileira de jogo a mais. */
.fx.fs{ top: 30px; }
.fx.fs .fx-head h1{ margin-left: 290px; }
.fx.fs > .lv-fs-brand{ left: 96px; top: 18px; }
.fx.fs > .lv-fs-top{ top: 22px; }
/* Lista de jogos: a rolagem para no começo de um bloco (sem degradê em cima) e o que ficaria cortado no pé some;
   o espaço no fim deixa a última seção subir até o alto da lista. */
.fx-list > .d-off, .fx-cards > .d-off{ opacity: 0; visibility: hidden; }
.fx-list:after{ content: ""; display: block; height: 420px; }
/* Configurações: Atualizar lista girando o ícone enquanto a lista baixa de novo. */
.acc-opt.busy .ao-ic svg{ -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }
/* Muitas opções (aparelho de toque com "Modo da tela"): botões mais baixos e grupos mais juntos, tudo cabe na tela. */
.acc-opts.tight .acc-opt{ height: 88px; }
.acc-opts.tight .acc-g{ margin-bottom: 14px; }

/* ---------- Ajustes da 0.6.85 (Meza 08/10) ----------
   Grade de Filmes e Séries: o nome embaixo da capa ocupa sempre a altura de 2 linhas, então a linha
   "ano · temporadas" (ou "ano · duração") fica na mesma altura em todas as capas. Nome que não cabe em 2 linhas
   diminui a letra (fitCaps); se nem assim couber, ganha o lugar da linha de baixo (cap-long, o ano aparece no alto). */
.grid.vod-grid > .poster .cap, .grid.narrow > .poster .cap{ height: 46px; max-height: none; }
.vod.fs .grid.vod-grid > .poster .cap{ height: 51px; max-height: none; }
.grid.vod-grid > .poster.cap-long .cap, .grid.narrow > .poster.cap-long .cap, .vod.fs .grid.vod-grid > .poster.cap-long .cap{ height: auto; }
/* Botão "Ordem da lista": um pouco para dentro, para o contorno branco de seleção não ficar cortado na borda. */
.vod .vod-info .sort-btn{ right: 16px; }
/* Ao vivo: Favoritar e Guia do dia centralizados embaixo do painel, com o pé dos botões na mesma linha do pé do último
   canal da lista (lista termina em 112 + 924 - 6 = 1030; painel em 1080 - 24 = 1056, então 26 px do fundo). O texto
   de cima que não couber perde os últimos programas do "A seguir" (fitInfo). Meza 08/10. */
.live.fixed .lv-main .lv-acts{ position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; -webkit-justify-content: center; justify-content: center; }
.live.fixed .lv-main .lv-acts .lv-bt{ margin: 0 8px; }

/* Pessoa do elenco: foto, nome e os filmes e séries dela que estão na lista (Meza 10/10). */
.page.person{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding: 150px 0 0; }
.ps-head{ -webkit-flex: none; flex: none; }
.ps-rows{ -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ps-head{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 96px 40px; }
.ps-face i{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 200px; height: 200px; margin-right: 44px; border-radius: 50%; font-style: normal; font-size: 64px; font-weight: 700; color: #fff; background-size: cover; background-position: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.ps-k{ margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3d8bff; }
.ps-head h1{ margin: 0; font-size: 64px; line-height: 1.1; }
.ps-sub{ margin: 12px 0 0; font-size: 28px; }
.ps-wait{ height: 420px; }
/* Espaço depois da última fileira: ela também pode subir até o alto da área (nada fica cortado em cima). */
.ps-end{ height: 300px; }

/* ===== Luma Play: menu lateral (TV, PC e web). Celular tem o próprio layout (mobile.css). =====
   A barra de cima vira um trilho de 150px à esquerda: símbolo, ícone + nome de cada seção.
   Data, hora, lupa, engrenagem e perfil continuam no canto de cima à direita.
   Telas em tela cheia (Ao vivo, Filmes, Séries, Futebol): o trilho fica escondido e entra pela esquerda com ▲/◀. */
html:not(.mobile) #topbar{ top: 0; bottom: 0; left: 0; right: 0; height: auto; padding: 0; background: none; pointer-events: none; }
html:not(.mobile) #topbar > *{ pointer-events: auto; }
html:not(.mobile) .tb-pill{ position: absolute; left: 0; top: 0; bottom: 0; width: 150px; height: auto; padding: 44px 0 0; border: 0; border-radius: 0;
  -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center;
  background: linear-gradient(90deg, rgba(6,9,17,.97) 0%, rgba(6,9,17,.9) 70%, rgba(6,9,17,0) 100%); }
html:not(.mobile) .tb-pill .tb-sep{ display: none; }
html:not(.mobile) .tb-pill .brand{ margin: 0 0 54px; }
.rail-mark{ display: block; width: 64px; height: 64px; }
html:not(.mobile) #menu{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
html:not(.mobile) #menu .menu-item, html:not(.mobile) #menu .menu-item:first-child{ width: 112px; height: auto; margin: 0 0 14px; padding: 16px 0 12px; border-radius: 22px;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center;
  font-size: 19px; font-weight: 600; color: rgba(238,240,247,.6); background: none; box-shadow: none; }
html:not(.mobile) #menu .menu-item + .menu-item{ margin-left: 0; }
html:not(.mobile) #menu .menu-item .mi-ic{ display: block; margin-bottom: 8px; }
html:not(.mobile) #menu .menu-item.on{ color: #3d8bff; background: rgba(61,139,255,.13); box-shadow: none; }
html:not(.mobile) #menu .menu-item.on:after{ display: none; }
html:not(.mobile) #menu .menu-item.focused, html:not(.mobile) #menu .menu-item.on.focused{ color: #1A1205; background: #3d8bff;
  box-shadow: 0 0 0 4px rgba(61,139,255,.35), 0 10px 30px rgba(0,0,0,.5) !important; -webkit-transform: scale(1.06); transform: scale(1.06); }
html:not(.mobile) .tb-right{ position: absolute; top: 44px; right: 96px; }
/* Conteúdo das telas com o trilho fixo começa depois dele. */
html:not(.mobile) #stage.rail #screen{ left: 150px; }
html:not(.mobile) #stage.rail .home .hero-body{ padding-left: 60px; padding-right: 60px; }
/* Telas em tela cheia (Ao vivo, Filmes, Séries, Futebol): o trilho continua fixo; data e hora ficam no cabeçalho da própria tela. */
html:not(.mobile) #topbar.fs, html:not(.mobile) #topbar.fs.peek{ -webkit-transform: none; transform: none; opacity: 1; height: auto; background: none; box-shadow: none; }
html:not(.mobile) #topbar.fs .tb-right{ display: none; }
/* Filmes e Séries com o trilho: a tela tem 150px a menos; categorias e grade chegam mais para a esquerda e a grade
   continua com os 1336px úteis da TV (6 capas por fileira). */
html:not(.mobile) #stage.rail .vod > .lv-groups{ left: 24px; }
html:not(.mobile) #stage.rail .vod > .vod-main{ left: 384px; right: 18px; }
html:not(.mobile) #stage.rail .vod > .lv-top{ left: 24px; right: 40px; }
html:not(.mobile) #stage.rail .lv-top .brand-logo{ display: none; }

/* Títulos grandes (destaque do Início, detalhe, número do episódio): Bricolage Grotesque no lugar da Bebas Neue. */
.home .hero h1{ font: 800 118px/.95 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -3px; text-transform: none; }
.detail-text h1, .detail.series .detail-text h1{ font: 800 110px/.95 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -3px; text-transform: none; }
.ep-n{ font: 800 52px/1 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
html:not(.mobile) #stage.rail .lv-fs-brand{ display: none; }
/* Foco preenchido (teclas, fichas, categorias): âmbar com texto escuro no lugar do branco do Max Pro.
   Categoria escolhida (sem foco): fundo elevado, número em âmbar e um traço âmbar à esquerda. */
.kb-key.focused, .chip.focused, .fb-tile.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; }
.lv-groups .cat.on, .vod .lv-groups .cat.on, .live.fixed .lv-groups .cat.on{ background: #1B2338 !important; border-color: #1B2338 !important; color: #EEF0F7 !important; box-shadow: inset 4px 0 0 #3d8bff; }
.lv-groups .cat.on .n, .vod .lv-groups .cat.on .n, .live.fixed .lv-groups .cat.on .n{ color: #3d8bff !important; }
.lv-groups .cat.focused, .vod .lv-groups .cat.focused, .vod .lv-groups .cat.on.focused, .live.fixed .lv-groups .cat.focused, .live.fixed .lv-groups .cat.on.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
.lv-groups .cat.focused .n, .vod .lv-groups .cat.focused .n, .live.fixed .lv-groups .cat.focused .n{ color: rgba(26,18,5,.7) !important; }
/* Futebol com o trilho: sem a logo no alto, o título começa na margem da tela. */
html:not(.mobile) #stage.rail .fx.fs .fx-head{ margin-left: 96px; }
html:not(.mobile) #stage.rail .fx.fs .fx-head h1{ margin-left: 0; }
/* Pé do menu lateral: lupa, configurações e perfil empilhados embaixo. Canto direito fica só com data e hora. */
html:not(.mobile) .tb-pill{ padding-bottom: 36px; }
html:not(.mobile) .tb-pill .rail-sp{ display: block; -webkit-flex: 1; flex: 1; }
html:not(.mobile) .rail-foot{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
html:not(.mobile) .rail-foot .tb-ic, html:not(.mobile) .rail-foot .tb-ic:first-of-type{ width: 72px; height: 72px; margin: 0 0 12px; border-radius: 20px; color: rgba(238,240,247,.6); background: none; border: 0; }
html:not(.mobile) .rail-foot .tb-ic.on{ color: #3d8bff; background: rgba(61,139,255,.13); }
html:not(.mobile) .rail-foot .tb-ic.focused{ color: #1A1205; background: #3d8bff; box-shadow: 0 0 0 4px rgba(61,139,255,.35) !important; }
html:not(.mobile) .rail-foot .tb-ic.on:after{ display: none; }
html:not(.mobile) .rail-foot .tb-av{ width: 68px; height: 68px; margin: 6px 0 0; border-radius: 50%; border: 3px solid rgba(238,240,247,.18); }
html:not(.mobile) .rail-foot .tb-av .av{ border-radius: 50%; }
html:not(.mobile) .rail-foot .tb-av.focused{ border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.25) !important; }
html:not(.mobile) .tb-right{ top: 40px; right: 72px; height: auto; }
html:not(.mobile) .tb-right .tb-date{ font-size: 24px; color: #8A92AC; margin-right: 18px; }
html:not(.mobile) .tb-right .clock{ font-size: 30px; font-weight: 700; }

/* ===== Luma Play: tela de entrada =====
   Convite à esquerda (título grande, passos numerados, situação) e um cartão à direita com duas faces:
   QR code + código do aparelho, ou usuário e senha do provedor. Luz âmbar no canto e azul embaixo. */
.act.lx{ padding: 56px 120px 48px; background: radial-gradient(60% 70% at 88% 18%, rgba(61,139,255,.16), rgba(61,139,255,0) 60%), radial-gradient(50% 60% at 6% 100%, rgba(80,110,255,.14), rgba(80,110,255,0) 70%), #070e1c; }
.act.lx .act-top .brand-logo.top{ max-height: 70px; max-width: 420px; }
.act.lx .act-panel{ -webkit-justify-content: space-between; justify-content: space-between; }
.lx-intro{ -webkit-flex: none; flex: none; width: 820px; }
.lx-intro .eyebrow{ color: #3d8bff; font-size: 22px; }
.lx-h{ margin: 6px 0 22px; font: 800 96px/.98 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -3px; }
.lx-intro h2{ margin: 0 0 40px; font: 600 34px "Manrope", "Manrope",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #8A92AC; }
.act.lx .act-steps{ margin: 0; }
.act.lx .act-steps li{ font-size: 30px; }
.act.lx .act-steps li + li{ margin-top: 20px; }
.act.lx .act-steps i{ width: 52px; height: 52px; line-height: 48px; margin-right: 22px; border-radius: 14px; background: #1B2338; border: 2px solid #262F48; color: #EEF0F7; }
.act.lx .act-steps li:first-child i{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.act.lx .act-status{ margin-top: 44px; }
.act.lx .act-status .pulse{ background: #3d8bff; }
.lx-card{ -webkit-flex: none; flex: none; width: 700px; padding: 46px 52px; border-radius: 32px; background: #131A2B; border: 2px solid #262F48; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.lx-face{ width: auto; }
.act.lx .lx-form-face{ display: none; width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.act.lx.lx-form .lx-form-face{ display: block; }
.act.lx.lx-form .lx-qr-face{ display: none; }
.lx-qr-face{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; }
.act.lx .act-qr{ margin: 0 0 30px; }
.act.lx .qr-frame{ padding: 22px; border-radius: 24px; box-shadow: 0 0 0 8px rgba(61,139,255,.18); }
.lx-demo-ic{ width: 220px; height: 220px; margin: 0 0 30px; border-radius: 28px; background: #1B2338; color: #3d8bff; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.lx-demo-ic svg{ width: 110px; height: 110px; }
.act.lx .act-ids{ -webkit-justify-content: center; justify-content: center; }
.act.lx .act-id{ padding: 0; background: none; border: 0; text-align: center; }
.act.lx .act-id span{ font-size: 18px; }
.act.lx .act-id b{ font: 700 50px "JetBrains Mono", Consolas, monospace; letter-spacing: .06em; color: #3d8bff; }
.lx-btns{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 100%; margin-top: 34px; }
.lx-btns .btn{ width: 100%; height: 76px; margin: 0 0 14px; -webkit-justify-content: center; justify-content: center; font-size: 26px; }
.lx-form-h{ margin: 4px 0 28px; font: 800 48px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; }
.act.lx .lg-field{ height: 96px; border-radius: 16px; margin-bottom: 14px; }
.act.lx .lg-go{ height: 80px; border-radius: 16px; }
.act.lx .lx-flip{ display: block; width: 100%; height: 72px; margin-top: 14px; border-radius: 16px; font-size: 24px; background: none; border: 2px solid #262F48; color: #EEF0F7; }
.act.lx .lx-btns .lx-flip{ margin-top: 0; }
.act.lx .lx-flip.focused{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.act.lx .act-foot{ font-size: 20px; }
.act.lx.over .lx-qr-face .act-qr{ display: none; }
/* Luma Play (Meza 27/10): login com o formulário do provedor já aberto, como no Max Pro, no visual âmbar do Luma.
   À esquerda o cartão do provedor, no meio o "ou", à direita QR + passos + MAC. */
.act.lx2 .act-top .brand-logo.top{ max-height: 84px; max-width: 360px; }
.act.lx2 .act-panel{ -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }
.act.lx2 .act-login{ width: 700px; padding: 44px 52px 40px; border-radius: 32px; background: #131A2B; border: 2px solid #262F48; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 -1px 0 rgba(61,139,255,.35) inset; }
.act.lx2 .act-login .eyebrow, .act.lx2 .act-side .eyebrow{ color: #3d8bff; font-size: 22px; }
.act.lx2 .act-login h1{ margin: 6px 0 12px; font: 800 52px/1.05 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; }
.act.lx2 .act-lead{ margin: 0 0 26px; font-size: 24px; color: #8A92AC; }
.act.lx2 .lg-field{ height: 96px; border-radius: 16px; margin-bottom: 14px; }
.act.lx2 .lg-go{ width: 100%; height: 80px; margin-top: 6px; border-radius: 16px; }
.act.lx2 .act-or{ width: 120px; height: 520px; }
.act.lx2 .act-or span{ margin: 16px 0; padding: 8px 18px; border-radius: 999px; background: #131A2B; border: 2px solid #262F48; color: #3d8bff; font-size: 22px; }
.act.lx2 .act-side{ width: 820px; }
.act.lx2 .act-side h2{ margin: 6px 0 30px; font: 800 60px/1.02 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -2px; }
.act.lx2 .act-side .act-qr{ margin-right: 46px; }
.act.lx2 .act-side .qr-frame{ padding: 20px; border-radius: 24px; box-shadow: 0 0 0 8px rgba(61,139,255,.18); }
.act.lx2 .act-side .act-steps li{ font-size: 28px; }
.act.lx2 .act-side .act-steps li + li{ margin-top: 18px; }
.act.lx2 .act-ids{ -webkit-justify-content: flex-start; justify-content: flex-start; }
.act.lx2 .act-id{ padding: 0; background: none; border: 0; text-align: left; }
.act.lx2 .act-id span{ font-size: 18px; }
.act.lx2 .act-id b{ font: 700 46px "JetBrains Mono", Consolas, monospace; letter-spacing: .06em; color: #3d8bff; }
.act.lx2 .act-status{ margin-top: 22px; }
.act.lx2 .lx-demo-ic{ margin: 0 46px 0 0; }

/* ===== Luma Play: formas =====
   Botões retangulares de canto 16px (o Max Pro usa pílulas). Primário âmbar com texto escuro. */
.btn, .home .hero .btn, .detail .btn, .pf-actions .btn, .terms-sign .btn, .acc-actions .btn{ border-radius: 16px !important; }
.btn.primary, .home .hero .btn.primary, .detail .btn.primary, .pf-actions .btn.primary, .terms-sign .btn.primary{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.btn.icon{ border-radius: 16px !important; }

/* ===== Luma Play: perfis =====
   Avatares redondos (o Max Pro usa quadrados), anel âmbar no escolhido, luz suave atrás do título.
   Primeira vez: dois cartões deitados, avatar à esquerda e texto à direita. */
.av, .av-face, .tb-av .av, .pf .av, .pf-opt .av, .pf-ic .av, .pf-big .av{ border-radius: 50% !important; }
.profiles{ background: radial-gradient(50% 45% at 50% 38%, rgba(61,139,255,.12), rgba(61,139,255,0) 70%), #070e1c; }
.profiles h1{ font: 800 76px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -2px; margin-bottom: 70px; }
.pf .av{ width: 210px; height: 210px; border: 0; box-shadow: 0 0 0 6px rgba(238,240,247,.06); }
.pf.focused .av{ -webkit-transform: none; transform: none; box-shadow: 0 0 0 6px #3d8bff, 0 0 0 16px rgba(61,139,255,.2), 0 20px 50px rgba(0,0,0,.5) !important; }
.pf b{ margin-top: 30px; font-size: 30px; }
.pf .av.add{ background: none !important; border: 4px dashed #262F48; box-shadow: none; }
/* Lápis do Gerenciar perfis no mesmo círculo do avatar (Meza 28/10: "quadrado com redondo?"). */
.pf-pen{ left: 50%; margin-left: -105px; width: 210px; height: 210px; border-radius: 50%; }
.pf-note{ margin-top: 40px; font-size: 24px; }
.profiles.first .pf-row{ -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; margin-top: 56px; }
.pf-opt{ width: 1080px; margin: 0 0 26px; padding: 34px 44px; border-radius: 26px; background: #131A2B; border: 3px solid #262F48;
  -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; text-align: left; position: relative; }
.pf-opt .av{ -webkit-flex: none; flex: none; width: 150px; height: 150px; margin-right: 40px; }
.pf-opt h2{ margin: 0 0 8px; font: 800 40px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.pf-opt p{ font-size: 24px; }
.pf-opt .pf-btn{ position: absolute; right: 44px; top: 50%; margin-top: -32px; }
.pf-opt.focused, .pf-opt.focused:focus{ border-color: #3d8bff; background: #1B2338; -webkit-transform: none; transform: none; box-shadow: 0 0 0 8px rgba(61,139,255,.18) !important; }
.pf-opt .av.add{ background: #1B2338 !important; border: 3px dashed #3A4566; }
.pf-opt .pf-txt{ -webkit-flex: 1; flex: 1; min-width: 0; padding-right: 300px; }
.pf-opt .pf-btn{ margin-top: -36px; border-radius: 16px; }

/* ===== Luma Play: menu lateral recolhido =====
   Fechado: 104px, só os ícones. Com o foco (ou o mouse) nele: abre para 320px por cima da tela, com os nomes. */
html:not(.mobile) .tb-pill{ width: 104px; -webkit-align-items: flex-start; align-items: flex-start; padding-left: 16px; overflow: hidden; transition: width .18s ease, box-shadow .18s ease; background: #070A13; }
html:not(.mobile) #topbar.open .tb-pill, html:not(.mobile) .tb-pill:hover{ width: 320px; box-shadow: 30px 0 80px rgba(0,0,0,.65); }
html:not(.mobile) .tb-pill .brand{ margin: 0 0 50px 4px; }
html:not(.mobile) #menu{ -webkit-align-items: flex-start; align-items: flex-start; }
html:not(.mobile) #menu .menu-item, html:not(.mobile) #menu .menu-item:first-child{ width: 72px; height: 72px; padding: 0 0 0 16px; margin: 0 0 12px;
  -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; border-radius: 20px; font-size: 26px; white-space: nowrap; overflow: hidden; }
html:not(.mobile) #menu .menu-item .mi-ic{ margin: 0; -webkit-flex: none; flex: none; }
html:not(.mobile) #menu .menu-item .mi-t{ display: none; margin-left: 22px; }
html:not(.mobile) #topbar.open #menu .menu-item, html:not(.mobile) .tb-pill:hover #menu .menu-item{ width: 288px; }
html:not(.mobile) #topbar.open #menu .mi-t, html:not(.mobile) .tb-pill:hover #menu .mi-t{ display: block; }
html:not(.mobile) #menu .menu-item.focused, html:not(.mobile) #menu .menu-item.on.focused{ -webkit-transform: none; transform: none; }
html:not(.mobile) .rail-foot{ -webkit-align-items: flex-start; align-items: flex-start; }
html:not(.mobile) .rail-foot .tb-ic, html:not(.mobile) .rail-foot .tb-ic:first-of-type{ width: 72px; -webkit-justify-content: flex-start; justify-content: flex-start; padding-left: 19px; white-space: nowrap; overflow: hidden; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
html:not(.mobile) .rail-foot .tb-ic svg{ -webkit-flex: none; flex: none; }
html:not(.mobile) #topbar.open .rail-foot .tb-ic, html:not(.mobile) .tb-pill:hover .rail-foot .tb-ic{ width: 288px; }
html:not(.mobile) #topbar.open .rail-foot .tb-ic:after, html:not(.mobile) .tb-pill:hover .rail-foot .tb-ic:after{ content: attr(aria-label); position: static; display: block; margin-left: 22px; height: auto; background: none; font-size: 26px; font-weight: 600; }
html:not(.mobile) .rail-foot .tb-av{ margin-left: 2px; }
/* A tela começa depois do trilho fechado. */
html:not(.mobile) #stage.rail #screen{ left: 104px; }
html:not(.mobile) #stage.rail .vod > .lv-groups{ left: 40px; }
html:not(.mobile) #stage.rail .vod > .vod-main{ left: 400px; right: 48px; }
html:not(.mobile) #stage.rail .vod > .lv-top{ left: 40px; right: 56px; }

/* ===== Luma Play: Início =====
   O destaque é um cartão com cantos arredondados (o Max Pro usa a imagem de ponta a ponta); a capa do título fica
   dentro dele, à direita. Embaixo: fileiras com título em Bricolage e uma fileira de canais em fichas. */
.page.home{ padding-top: 112px; }
.home .hero, html:not(.mobile) #stage.rail .home .hero{ position: relative; height: 600px; margin: 0 56px 40px 40px; border-radius: 30px; overflow: hidden; background: #131A2B; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.home .hero-shade{ background: linear-gradient(90deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.82) 34%, rgba(10,14,25,.25) 66%, rgba(10,14,25,.05) 100%) !important; }
.home .hero-body, html:not(.mobile) #stage.rail .home .hero-body{ padding: 70px 64px 0; max-width: 1180px; }
.home .hero-poster{ top: 60px; right: 64px; width: 300px; height: 450px; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.home .hero h1{ font-size: 100px; margin-top: 14px; }
.home .hero h1.t-md{ font-size: 82px; letter-spacing: -2px; }
.home .hero h1.t-sm, .home .hero h1.t-xs{ font-size: 66px; letter-spacing: -1px; }
.home .hero h1.t-xxs{ font-size: 54px; letter-spacing: -1px; }
.home .tg.top{ background: rgba(61,139,255,.16); color: #3d8bff; border-radius: 10px; }
.home .hero .btn{ background: rgba(27,35,56,.9); border: 2px solid #2E3858; }
.home .hero .btn.primary{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.home .hero-dots i{ width: 34px; height: 5px; margin-left: 8px; border-radius: 3px; background: rgba(238,240,247,.22); }
.home .hero-dots i.on{ width: 34px; background: #3d8bff; }
.home-rows{ padding-left: 40px; }
.home .row h2{ font: 800 34px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -.5px; margin-bottom: 14px; }
.row-items > .poster .art, .grid.vod-grid > .poster .art, .grid > .poster .art{ border-radius: 14px; }
.lx-ch{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 96px; margin-right: 18px; padding: 0 28px 0 14px;
  border-radius: 18px; background: #131A2B; border: 2px solid #262F48; }
.lx-ch .ch-logo{ width: 68px; height: 68px; margin: 0 18px 0 0; border-radius: 14px; background-color: #1B2338; background-size: contain; background-position: center; background-repeat: no-repeat; }
.lx-ch .ch-logo.none{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 30px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #3d8bff; }
.lx-ch-t b{ display: block; font-size: 24px; font-weight: 700; white-space: nowrap; }
.lx-ch-t small{ display: block; font-size: 18px; color: #8A92AC; white-space: nowrap; }
.lx-ch.focused{ border-color: #3d8bff; background: #1B2338; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
.lx-demo-ic img{ width: 150px; height: 150px; }
.act.lx .lx-flip.focused{ background: #1B2338; border-color: #3d8bff; color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
.home-rows, .home .home-rows{ margin-top: 0 !important; }
/* Destaque + primeira fileira inteiros na tela de 1080. */
.page.home{ padding-top: 96px; }
.home .hero, html:not(.mobile) #stage.rail .home .hero{ height: 520px; margin-bottom: 30px; }
.home .hero-body, html:not(.mobile) #stage.rail .home .hero-body{ padding-top: 56px; }
.home .hero-poster{ top: 50px; width: 280px; height: 420px; }
.home .hero h1{ font-size: 92px; }

/* ===== Luma Play: Ao vivo =====
   Grupos num painel próprio; cada canal é um cartão; o canal em foco ganha anel âmbar (sem preencher a linha);
   o canal tocando tem um traço âmbar à esquerda. Prévia e "Agora" em cartões com canto 22px. */
html:not(.mobile) #stage.rail .fs-menu{ display: none !important; }
.live.fixed > .lv-groups{ background: #131A2B !important; border: 2px solid #262F48 !important; border-radius: 24px !important; padding: 18px 14px !important; }
.live.fixed .ch{ background: rgba(19,26,43,.7); border: 2px solid transparent; border-radius: 16px; }
.live.fixed .ch-row + .ch-row .ch{ margin-top: 0; }
.live.fixed .ch.on{ box-shadow: inset 5px 0 0 #3d8bff; }
.live.fixed .ch.focused, .live.fixed .ch.on.focused{ background: #1B2338 !important; border-color: #3d8bff !important; box-shadow: 0 0 0 6px rgba(61,139,255,.18) !important; }
.live.fixed .ch.focused .ch-name{ color: #EEF0F7 !important; }
.live.fixed .ch.focused .num, .live.fixed .ch.focused .ch-nl, .live.fixed .ch.focused .ch-nl em{ color: #8A92AC !important; }
.live.fixed .ch.focused .ch-bar{ background: rgba(255,255,255,.12) !important; }
.live.fixed .ch.focused .ch-bar b{ background: #3d8bff !important; }
.live.fixed .ch-tile{ border-radius: 12px; }
.live .ch-preview{ border-radius: 22px !important; outline: 2px solid #262F48; }
.live .pg-card.info{ background: #131A2B !important; border: 2px solid #262F48 !important; border-radius: 22px !important; padding: 22px 26px !important; }
.live .lv-ag{ color: #3d8bff !important; letter-spacing: .12em; }
.live .lv-ag i{ background: #FF5E48 !important; }
.live .lv-ttl{ font-family: "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif !important; font-weight: 800 !important; }
.live .lv-bt{ border-radius: 14px !important; }
.live .lv-bt.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; }
.live .lv-head b, .vod .lv-head b{ font-family: "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-weight: 800; }

/* ===== Luma Play: Filmes e Séries ===== categorias num painel, como no Ao vivo. */
.vod > .lv-groups, html:not(.mobile) #stage.rail .vod > .lv-groups{ background: #131A2B !important; border: 2px solid #262F48 !important; border-radius: 24px !important; padding: 18px 14px !important; bottom: 40px; }
.vod .vod-info h1{ font-family: "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-weight: 800; letter-spacing: -1px; }

/* ===== Luma Play: detalhe =====
   Capa do título à esquerda (o Max Pro esconde a capa), texto à direita; temporadas em abas sublinhadas. */
.detail .detail-poster{ display: block; width: 320px; height: 480px; margin-right: 64px; border-radius: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 2px rgba(238,240,247,.08); }
.detail.series .detail-poster, .detail:not(.series) .detail-poster{ width: 280px; height: 420px; }
.detail .detail-top > .detail-text{ max-width: 1100px; }
.detail .d-kind{ background: rgba(61,139,255,.16) !important; color: #3d8bff !important; border-radius: 10px !important; }
.detail-shade{ background: linear-gradient(90deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.85) 45%, rgba(10,14,25,.45) 100%), linear-gradient(0deg, #070e1c 0%, rgba(10,14,25,0) 50%) !important; }
.season, .detail .season{ padding: 10px 6px 14px !important; margin-right: 34px !important; border: 0 !important; border-radius: 10px !important; background: none !important; color: #8A92AC !important; box-shadow: inset 0 -4px 0 transparent; }
.season.on, .detail .season.on{ color: #EEF0F7 !important; font-weight: 800 !important; box-shadow: inset 0 -4px 0 #3d8bff; }
.season.focused, .detail .season.focused{ color: #1A1205 !important; background: #3d8bff !important; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; padding: 10px 18px 14px !important; }

/* ===== Luma Play: Conta =====
   Opções numa lista de uma coluna (o Max Pro usa grade de duas), resumo da assinatura num cartão à esquerda. */
.acc-opt, .acc-opt:nth-child(n+3){ width: 100% !important; height: 84px !important; margin: 0 0 10px !important; border-radius: 16px !important; background: #131A2B; border: 2px solid #262F48; }
.acc-opt.focused{ background: #1B2338 !important; border-color: #3d8bff !important; color: #EEF0F7 !important; box-shadow: 0 0 0 6px rgba(61,139,255,.18) !important; }
.acc-opt.focused .ao-ic{ background: #3d8bff !important; color: #1A1205 !important; }
.acc-gh{ color: #3d8bff !important; font-size: 18px !important; }
.acc2 .acc-sum{ border-radius: 26px; background: #131A2B; border: 2px solid #262F48; }
.acc-state{ font-family: "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
/* Busca: campo com borda âmbar, teclas de canto 12px. */
.kb-key{ border-radius: 12px !important; }
.gsearch .kb-q, .vod-main.search .kb-q, .kb-q{ border-radius: 16px !important; border: 2px solid #3d8bff !important; background: #131A2B !important; }
.gs-empty h2{ font-family: "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-weight: 800; }

/* ===== Luma Play: termo de uso ===== documento escuro com texto claro (o Max Pro usa a folha branca). */
.terms{ background: radial-gradient(50% 50% at 90% 0%, rgba(61,139,255,.12), rgba(61,139,255,0) 70%), #070e1c; }
.terms-doc h1{ font: 800 60px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1.5px; }
.terms-text{ background: #131A2B; color: #DDE1EC; border: 2px solid #262F48; border-radius: 26px; }
.terms-check{ border-radius: 16px; }
.terms-check.focused{ border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
.terms-check.on i{ background: #3d8bff !important; border-color: #3d8bff !important; }
.terms-p.focused{ border-left-color: #3d8bff !important; background: rgba(61,139,255,.08) !important; }

/* ===== Luma Play: Ao vivo em formato de guia (TV, PC e web) =====
   Em cima: prévia 16:9 (640x360) e o cartão "Agora / A seguir". Embaixo: grupos sempre à vista à esquerda e a lista de
   canais, cada um com a faixa de programas de 2h30; régua de horários e linha âmbar do "agora" por cima da lista. */
html:not(.mobile) #stage.rail .live.fixed > .lv-main{ top: 88px !important; left: 40px !important; right: 48px !important; bottom: auto !important; height: 360px; }
html:not(.mobile) #stage.rail .live.fixed .ch-preview{ top: 0; left: 0; right: auto; width: 640px; height: 360px !important; }
html:not(.mobile) #stage.rail .live.fixed > .lv-main .pg-card{ top: 0 !important; left: 672px; right: 0; bottom: 0 !important; height: auto; padding: 22px 28px !important; }
html:not(.mobile) #stage.rail .live.fixed > .lv-groups{ top: 476px !important; left: 40px !important; width: 300px !important; bottom: 32px !important; }
html:not(.mobile) #stage.rail .live.fixed > .lv-list{ top: 476px !important; left: 364px !important; right: 48px !important; width: auto !important; bottom: 32px !important; padding: 0 !important; border: 0 !important; }
html:not(.mobile) #stage.rail .live.fixed > .lv-list .lv-head{ margin: 0 0 4px 8px; }
html:not(.mobile) #stage.rail .live.fixed .ch-list{ height: 486px !important; padding: 4px 4px !important; }
html:not(.mobile) #stage.rail .live.fixed .ch{ position: relative; height: 72px !important; }
html:not(.mobile) #stage.rail .live.fixed .ch-tx{ -webkit-flex: none; flex: none; width: 300px; }
html:not(.mobile) #stage.rail .live.fixed .ch-now{ display: none; }
html:not(.mobile) #stage.rail .lv-fs-top .lv-fs-brand{ display: none; }
.ch-tl{ display: none; }
html:not(.mobile) #stage.rail .live.fixed .ch-tl{ display: block; position: absolute; left: 470px; right: 10px; top: 8px; bottom: 8px; }
.ch-tl .gp{ position: absolute; top: 0; bottom: 0; box-sizing: border-box; padding: 6px 12px; border-left: 3px solid #0C1120; border-radius: 10px; background: #131A2B; overflow: hidden; white-space: nowrap; }
.ch-tl .gp b{ display: block; font-size: 20px; font-weight: 600; color: #8A92AC; overflow: hidden; text-overflow: ellipsis; }
.ch-tl .gp span{ display: block; font: 500 16px "JetBrains Mono", Consolas, monospace; color: #5E6784; }
.ch-tl .gp.now{ background: #1B2338; }
.ch-tl .gp.now b{ color: #EEF0F7; }
.ch-tl .gp.past b{ color: #5E6784; }
.live.fixed .ch.focused .ch-tl .gp.now{ background: #26304A; }
.lxg-times{ display: none; }
html:not(.mobile) #stage.rail .live.fixed .lxg-times{ display: block; position: absolute; left: 0; right: 0; top: 6px; height: 30px; }
.lxg-times span{ position: absolute; top: 0; font: 500 18px "JetBrains Mono", Consolas, monospace; color: #8A92AC; }
.lxg-now{ display: none; }
html:not(.mobile) #stage.rail .live.fixed .lxg-now{ display: block; position: absolute; z-index: 4; top: 36px; bottom: 0; width: 3px; margin-left: -1px; background: #3d8bff; box-shadow: 0 0 12px rgba(61,139,255,.6); pointer-events: none; }

/* ===== Luma Play: Filmes e Séries com painel lateral =====
   Categorias: coluna fina de 72px (nome da categoria na vertical) enquanto o foco está nas capas; com o foco nelas,
   abrem para 360px por cima da grade. Grade com 4 capas por fileira; painel do título à direita (480px). */
html:not(.mobile) #stage.rail .vod > .lv-groups{ left: 40px !important; top: 40px !important; bottom: 40px !important; width: 360px !important; z-index: 6;
  box-shadow: 30px 0 60px rgba(0,0,0,.55); }
html:not(.mobile) #stage.rail .vod.cats-min > .lv-groups{ -webkit-transform: translateX(-328px); transform: translateX(-328px); box-shadow: none; }
html:not(.mobile) #stage.rail .vod.cats-min > .lv-groups:after{ content: "◀"; display: block; position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; left: auto; width: 72px; height: auto; padding-top: 26px; box-sizing: border-box;
  text-align: center; font-size: 22px; color: #3d8bff; background: #131A2B; border-radius: 0 22px 22px 0; }
html:not(.mobile) #stage.rail .vod.cats-min > .lv-groups:before{ content: attr(data-cur); position: absolute; z-index: 4; right: 22px; top: 74px; white-space: nowrap;
  -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font: 700 24px "Manrope",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: .04em; color: #EEF0F7; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid{ margin-left: 0 !important; left: 0 !important; }
html:not(.mobile) #stage.rail .vod > .lv-top, html:not(.mobile) #stage.rail .vod .lv-fs-top{ display: none !important; }
html:not(.mobile) #stage.rail .vod > .vod-main{ left: 136px !important; right: 40px !important; top: 40px !important; bottom: 0 !important; padding: 0 !important; }
.vg-head{ display: none; }
html:not(.mobile) #stage.rail .vod .vg-head{ display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; height: 76px; width: 1120px; }
html:not(.mobile) #stage.rail .vod .vg-head b{ font: 800 46px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; margin-right: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 700px; }
html:not(.mobile) #stage.rail .vod .vg-head span{ font-size: 24px; }
html:not(.mobile) #stage.rail .vod .vg-head .sort-btn{ position: static !important; margin-left: auto; height: 56px; font-size: 22px; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid{ width: 1140px !important; height: 940px !important; padding: 10px 10px 30px !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster, html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster:nth-child(n){ width: 255px !important; height: auto !important; margin: 0 26px 26px 0 !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster:nth-child(4n){ margin-right: 0 !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster .art{ height: 382px !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster .cap{ font-size: 22px !important; }
/* Painel do título em foco */
html:not(.mobile) #stage.rail .vod .vod-bg{ position: absolute !important; left: auto !important; right: 0 !important; top: 0 !important; width: 480px !important; height: 300px !important; bottom: auto !important;
  border-radius: 26px 26px 0 0; z-index: 1; -webkit-filter: none !important; filter: none !important; -webkit-transform: none !important; transform: none !important; opacity: 1 !important; background-color: #1B2338; }
html:not(.mobile) #stage.rail .vod .vod-bg:after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(rgba(19,26,43,0), #131A2B); }
html:not(.mobile) #stage.rail .vod .vod-info{ position: absolute !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: 40px !important; width: 480px !important; height: auto !important;
  padding: 250px 34px 30px !important; box-sizing: border-box; border-radius: 26px; background: #131A2B; border: 2px solid #262F48; overflow: visible; z-index: auto !important; }
html:not(.mobile) #stage.rail .vod .vod-info > *{ position: relative; z-index: 2; }
html:not(.mobile) #stage.rail .vod .vod-info h1{ font: 800 44px/1.02 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif !important; letter-spacing: -1px; white-space: normal !important; margin: 0 0 12px; }
html:not(.mobile) #stage.rail .vod .vod-info .meta{ font-size: 22px; margin: 0 0 16px; color: #8A92AC; white-space: normal; }
html:not(.mobile) #stage.rail .vod .vod-info .vi-plot{ font-size: 22px; line-height: 1.5; color: #C9CDDC; max-height: 9em; overflow: hidden; display: block; -webkit-line-clamp: none; }
html:not(.mobile) #stage.rail .vod .vod-info.is-cat{ padding-top: 40px !important; }
.vi-acts{ display: none; }
html:not(.mobile) #stage.rail .vod .vi-acts{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: absolute !important; left: 34px; right: 34px; bottom: 30px; }
html:not(.mobile) #stage.rail .vod .vi-acts[hidden]{ display: none; }
html:not(.mobile) #stage.rail .vod .vi-acts .btn{ height: 68px; margin: 12px 0 0; width: 100%; font-size: 24px; }

/* ===== Luma Play: página da série =====
   Esquerda (96–800px): capa, dados e botões; embaixo deles as temporadas numa coluna vertical.
   Direita (860px até a margem): episódios em lista vertical com imagem, nome, duração e resumo. */
html:not(.mobile) .detail.series .detail-body{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0 !important; overflow: hidden; }
html:not(.mobile) .detail.series .detail-top{ position: absolute; left: 96px; top: 120px; width: 720px; margin: 0 !important; }
html:not(.mobile) .detail.series .detail-poster{ width: 200px !important; height: 300px !important; margin-right: 36px; }
html:not(.mobile) .detail.series .detail-text h1{ font-size: 64px !important; letter-spacing: -2px; white-space: normal !important; }
html:not(.mobile) .detail.series .detail-text .d-plot, html:not(.mobile) .detail.series #d-plot{ font-size: 22px; max-height: 4.4em; overflow: hidden; }
html:not(.mobile) .detail.series #d-cast, html:not(.mobile) .detail.series .detail-body .row:not(.ep-section){ display: none !important; }
.lxs-h{ margin: 0 0 14px 4px; font-size: 20px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #3d8bff; }
html:not(.mobile) .detail.series .lx-seasons{ position: absolute; left: 96px; top: 520px; bottom: 40px; width: 720px; margin: 0 !important; overflow: hidden; display: block; }
.lxs-season{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; height: 76px; margin: 0 0 10px; padding: 0 24px; box-sizing: border-box; border-radius: 16px;
  background: rgba(19,26,43,.85); border: 2px solid #262F48; color: #EEF0F7; text-align: left; font-size: 26px; }
.lxs-season b{ -webkit-flex: 1; flex: 1; font-weight: 700; }
.lxs-season span{ font-size: 20px; color: #8A92AC; }
.lxs-season.on{ box-shadow: inset 6px 0 0 #3d8bff; border-color: #3A4566; }
.lxs-season.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
.lxs-season.focused span{ color: rgba(26,18,5,.7); }
html:not(.mobile) .detail.series .ep-section{ position: absolute; left: 860px; right: 80px; top: 120px; bottom: 30px; margin: 0 !important; padding: 0 !important; }
html:not(.mobile) .detail.series #ep-row{ display: block !important; height: 870px; overflow: hidden; padding: 6px 8px 30px !important; white-space: normal; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep]{ position: relative; display: block; width: auto !important; height: 168px; margin: 0 0 14px !important; padding: 16px 20px 0 300px; box-sizing: border-box;
  border-radius: 18px; background: rgba(19,26,43,.85); border: 2px solid #262F48; -webkit-transform: none !important; transform: none !important; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep] .art{ position: absolute; left: 14px; top: 14px; width: 266px !important; height: 136px !important; margin: 0; border-radius: 12px; -webkit-transform: none !important; transform: none !important; box-shadow: none !important; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep] .ep-n{ font-size: 40px; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep] .cap{ margin: 0; font-size: 26px !important; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: none; height: auto; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep] .sub{ margin: 2px 0 6px; font: 500 19px "JetBrains Mono", Consolas, monospace; color: #8A92AC; }
.ep-plot{ display: none; }
html:not(.mobile) .detail.series .ep-plot{ display: block; font-size: 20px; line-height: 1.4; color: #A9B0C5; max-height: 2.8em; overflow: hidden; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep].focused{ background: #1B2338; border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
html:not(.mobile) .detail.series #d-about{ display: none !important; }
html:not(.mobile) .detail.series #ep-row{ margin-left: 0 !important; padding-left: 4px !important; padding-right: 4px !important; }

/* Ao vivo: os botões do cartão "Agora" ficam embaixo à direita, e o "A seguir" ocupa só o lado esquerdo (não passam por cima). */
html:not(.mobile) #stage.rail .live.fixed .lv-main .lv-acts{ left: auto !important; right: 28px !important; bottom: 22px !important; -webkit-justify-content: flex-end; justify-content: flex-end; }
html:not(.mobile) #stage.rail .live.fixed .lv-main .lv-acts .lv-bt{ margin: 0 0 0 12px; }
html:not(.mobile) #stage.rail .live.fixed .lv-main .lv-up{ margin-right: 460px; }
/* Painel de Filmes e Séries: imagem limpa em cima (sem a sombra lateral herdada) e o título começa embaixo dela. */
html:not(.mobile) #stage.rail .vod .vod-bg:after{ top: auto !important; height: 90px !important; background: linear-gradient(rgba(19,26,43,0), #131A2B) !important; }
html:not(.mobile) #stage.rail .vod .vod-bg:before{ display: none !important; }
html:not(.mobile) #stage.rail .vod .vod-info{ padding-top: 322px !important; }
/* Página da série: coluna da esquerda em fluxo (capa e dados, botões, temporadas um embaixo do outro), sem sobrepor. */
html:not(.mobile) .detail.series .detail-top{ position: relative !important; left: auto; top: auto; margin: 110px 0 0 96px !important; width: 720px; }
html:not(.mobile) .detail.series .lx-seasons{ position: relative !important; left: auto; top: auto; bottom: auto; margin: 34px 0 0 96px !important; max-height: 400px; }
html:not(.mobile) .detail.series .detail-text{ min-width: 0; }
html:not(.mobile) .detail.series .detail-text .actions{ -webkit-flex-wrap: wrap; flex-wrap: wrap; }
html:not(.mobile) .detail.series .detail-text .actions .btn{ height: 64px !important; padding: 0 26px !important; font-size: 24px !important; margin: 0 14px 12px 0 !important; }
html:not(.mobile) .detail.series #ep-row > .poster[data-ep] .cap, html:not(.mobile) .detail.series #ep-row > .poster[data-ep] .sub, html:not(.mobile) .detail.series .ep-plot{
  display: block !important; float: none !important; position: static !important; margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; text-align: left !important; width: auto !important; }
html:not(.mobile) .detail.series .ep-plot{ max-width: none !important; }
html:not(.mobile) #stage.rail .vod > .vod-main{ left: 100px !important; }

/* ===== Luma Play: Início em painel =====
   Topo com dois blocos: destaque (cartão, à esquerda) e "Ao vivo agora" (à direita, 560px) com os canais vistos por
   último, o programa no ar e a barrinha. Embaixo, as fileiras. */
.lx-top{ display: -webkit-flex; display: flex; height: 520px; margin: 0 56px 34px 40px; }
.lx-top > .hero, html:not(.mobile) #stage.rail .home .lx-top > .hero{ -webkit-flex: 1; flex: 1; min-width: 0; height: 520px; margin: 0 !important; }
.lx-top .hero-poster{ display: none !important; }
.lx-top .hero-body, html:not(.mobile) #stage.rail .home .lx-top .hero-body{ max-width: none; padding-right: 56px; }
.lx-top .hero h1{ font-size: 84px; }
.lx-live{ -webkit-flex: none; flex: none; width: 560px; margin-left: 24px; padding: 26px 24px 20px; box-sizing: border-box; border-radius: 30px; background: #131A2B; border: 2px solid #262F48;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.lx-top.solo .lx-live{ width: 100%; margin-left: 0; }
.lx-live-h{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 14px 4px; font: 800 30px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -.5px; }
.lx-live-h i{ width: 12px; height: 12px; margin-right: 12px; border-radius: 50%; background: #FF5E48; box-shadow: 0 0 0 5px rgba(255,94,72,.2); }
.lx-lv{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 70px; margin: 0 0 6px; padding: 0 14px 0 8px; border-radius: 16px; border: 2px solid transparent; }
.lx-lv .ch-tile{ -webkit-flex: none; flex: none; width: 60px; height: 50px; margin-right: 16px; border-radius: 12px; }
.lx-lv-t{ -webkit-flex: 1; flex: 1; min-width: 0; }
.lx-lv-t > b{ display: block; font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-lv-now{ display: block; font-size: 18px; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-lv .ch-bar{ height: 4px; margin-top: 5px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.lx-lv .ch-bar b{ display: block; height: 100%; background: #3d8bff; }
.lx-lv.focused{ background: #1B2338; border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.18) !important; }
.lx-live-all{ margin-top: auto; height: 58px; border-radius: 14px; border: 2px solid #262F48; color: #EEF0F7; font-size: 22px; font-weight: 700; }
.lx-live-all.focused{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
html:not(.mobile) .tb-right{ padding: 8px 18px; border-radius: 14px; background: rgba(7,10,19,.88); }

/* ===== Luma Play: Início estilo Netflix (TV, PC e web) =====
   O destaque é um outdoor na tela toda; as fileiras ficam na metade de baixo (a partir de 600px). Com o foco nas
   fileiras (classe rowmode) o outdoor mostra o título em foco, os botões somem e as fileiras sobem para 470px; a
   fileira em foco fica sempre no alto dessa área. Top 10 com o número grande vazado atrás de cada capa. */
html:not(.mobile) .page.home.nf{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0 !important; overflow: hidden; }
html:not(.mobile) .home.nf .hero, html:not(.mobile) #stage.rail .home.nf .hero{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; margin: 0 !important; border-radius: 0; box-shadow: none; overflow: hidden; background: #070e1c; }
html:not(.mobile) .home.nf .hero-shade{ background: linear-gradient(90deg, #070e1c 0%, rgba(10,14,25,.88) 28%, rgba(10,14,25,.3) 62%, rgba(10,14,25,0) 82%), linear-gradient(0deg, #070e1c 0%, rgba(10,14,25,.92) 40%, rgba(10,14,25,0) 68%) !important; }
html:not(.mobile) .home.nf .hero-poster{ display: none !important; }
html:not(.mobile) .home.nf .hero-body, html:not(.mobile) #stage.rail .home.nf .hero-body{ padding: 110px 60px 0; max-width: 1150px; }
html:not(.mobile) .home.nf .hero h1{ font-size: 100px; margin-top: 16px; }
html:not(.mobile) .home.nf .hero .plot{ max-width: 860px; height: auto; max-height: 2.9em; overflow: hidden; }
html:not(.mobile) .home.nf .hero .actions{ margin-top: 6px; }
html:not(.mobile) .home.nf .hero-dots{ margin-left: 20px; }
html:not(.mobile) .home.nf.rowmode .hero .actions, html:not(.mobile) .home.nf.rowmode .hero-dots{ opacity: 0; pointer-events: none; }
html:not(.mobile) .home.nf.rowmode .hero-body{ padding-top: 90px; }
.nf-prog{ display: none; }
html:not(.mobile) .home.nf .nf-prog{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 10px; font-size: 22px; color: #C9CDDC; }
html:not(.mobile) .home.nf .nf-prog:empty{ display: none; }
html:not(.mobile) .home.nf .nf-prog .ch-bar{ width: 420px; height: 6px; margin-right: 18px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
html:not(.mobile) .home.nf .nf-prog .ch-bar b{ display: block; height: 100%; background: #3d8bff; }
.home .tg.top.live{ background: #FF5E48 !important; color: #fff !important; }
html:not(.mobile) .home.nf .nf-rows{ position: absolute; left: 0; right: 0; top: 640px; bottom: 0; overflow: hidden; padding: 0 0 0 60px; transition: top .2s ease; }
html:not(.mobile) .home.nf.rowmode .nf-rows{ top: 470px; }
html:not(.mobile) .home.nf .nf-rows > .row{ margin: 0 0 34px; }
html:not(.mobile) .home.nf .nf-rows > .row h2{ margin: 0 0 14px; font: 800 32px "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -.5px; }
/* Top 10 */
.nf-tw{ display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-align-items: flex-end; align-items: flex-end; -webkit-flex: none; flex: none; margin-right: 22px; }
.nf-tw > .poster{ position: relative; z-index: 1; width: 188px !important; margin: 0 !important; }
.nf-tw > .poster .art{ height: 282px !important; }
.nf-tw > .poster .cap{ display: none !important; }
.nf-num{ position: relative; z-index: 0; margin-right: -30px; font: 800 250px/.74 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -16px; color: #070e1c; -webkit-text-stroke: 3px #5E6784; }
.nf-tw > .poster.focused + .nf-num{ -webkit-text-stroke-color: #3d8bff; color: rgba(61,139,255,.12); }
/* Seus canais */
.nf-ch{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 430px; height: 112px; margin-right: 18px; padding: 0 22px; box-sizing: border-box;
  border-radius: 18px; background: #131A2B; border: 2px solid #262F48; }
.nf-ch .ch-tile{ width: 96px; height: 64px; margin-right: 18px; border-radius: 12px; }
.nf-ch .lx-lv-t > b{ font-size: 24px; }
.nf-ch .lx-lv-now{ font-size: 19px; }
.nf-ch.focused{ background: #1B2338; border-color: #3d8bff; box-shadow: 0 0 0 6px rgba(61,139,255,.18) !important; }
html:not(.mobile) .home.nf .nf-top .row-items{ padding-left: 24px; }

/* Início Netflix: título e capas da fileira alinhados na mesma margem (60px) e com o título do outdoor. */
html:not(.mobile) .home.nf .nf-rows > .row h2{ margin-left: 0 !important; margin-right: 0 !important; }
html:not(.mobile) .home.nf .nf-rows .row-items{ margin: 0 !important; padding: 14px 14px 20px 4px !important; }
html:not(.mobile) .home.nf .nf-top .row-items{ padding-left: 28px !important; }
html:not(.mobile) .home.nf .nf-rows{ padding-left: 60px; }
html:not(.mobile) .home.nf .hero-dots{ display: none !important; }

/* Filmes e Séries: a grade ocupa toda a largura até o painel, com 5 capas por fileira (sem sobra de espaço). */
html:not(.mobile) #stage.rail .vod .grid.vod-grid{ width: calc(100% - 504px) !important; box-sizing: border-box; }
html:not(.mobile) #stage.rail .vod .vg-head{ width: calc(100% - 504px) !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster, html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster:nth-child(n){ width: 18.2% !important; margin: 0 2.25% 24px 0 !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster:nth-child(4n){ margin-right: 2.25% !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster:nth-child(5n){ margin-right: 0 !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster .art{ height: 318px !important; }
html:not(.mobile) #stage.rail .vod .grid.vod-grid > .poster .cap{ font-size: 20px !important; }
/* Folga no fim da fileira: o cartão em foco sempre para alinhado na margem (nenhum cartão cortado pela metade). */
html:not(.mobile) .home.nf .nf-rows .row-items:after{ content: ""; display: block; -webkit-flex: none; flex: none; width: 1800px; height: 1px; }

/* Início Netflix: o título fica numa linha só e diminui em degraus quando é comprido (fitLine); sinopse em 2 linhas.
   Assim o bloco de cima nunca invade as fileiras. */
html:not(.mobile) .home.nf .hero h1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1500px; }
html:not(.mobile) .home.nf .hero h1.t-md{ font-size: 80px; letter-spacing: -2px; }
html:not(.mobile) .home.nf .hero h1.t-sm{ font-size: 66px; letter-spacing: -1.5px; }
html:not(.mobile) .home.nf .hero h1.t-xs{ font-size: 56px; letter-spacing: -1px; }
html:not(.mobile) .home.nf .hero h1.t-xxs{ font-size: 48px; letter-spacing: -1px; }
html:not(.mobile) .home.nf .hero h1.t-wrap{ white-space: nowrap; }
html:not(.mobile) .home.nf .hero .plot{ margin: 12px 0 18px; max-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html:not(.mobile) .home.nf .hero h1.t-xxs.t-wrap{ font-size: 60px; line-height: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; max-width: 1100px; }
/* Fileiras do Início: 30px de folga à esquerda (o cartão em foco cresce e ganha o anel âmbar sem ser cortado);
   a margem negativa mantém os cartões alinhados com o título da fileira. */
html:not(.mobile) .home.nf .nf-rows .row-items{ margin-left: -30px !important; padding: 18px 14px 22px 30px !important; }
/* Top 10: cada número ocupa uma caixa fixa de 150px, alinhado à direita, encostando na capa (o 1 não some atrás dela). */
html:not(.mobile) .home.nf .nf-top .row-items{ padding-left: 30px !important; }
.nf-num{ width: 150px; text-align: right; margin-right: -22px; letter-spacing: -10px; }
/* Uma fileira por vez com o foco nas fileiras (Meza 14/10): a área de baixo começa em 580px e cada fileira ocupa a
   altura toda dela, então a de baixo não aparece cortada; ▼ traz a próxima inteira. No outdoor, a primeira aparece
   pela metade embaixo, como convite para descer. */
html:not(.mobile) .home.nf.rowmode .nf-rows{ top: 580px; }
html:not(.mobile) .home.nf .nf-rows > .row{ min-height: 500px; box-sizing: border-box; }
.nf-num{ width: auto; min-width: 150px; padding-right: 14px; margin-right: -20px; letter-spacing: -12px; box-sizing: border-box; }
.nf-num{ width: 150px; min-width: 0; padding-right: 0; margin-right: -8px; letter-spacing: 0; text-align: right; }
.nf-num.two{ font-size: 170px; letter-spacing: -10px; padding-right: 10px; }
.nf-num{ margin-right: 6px; }

/* Início: duas fileiras inteiras com o foco nas fileiras (Meza 14/10). Cada fileira tem 360px de altura e a área de
   baixo começa em 360px, então a atual e a de baixo aparecem inteiras e a terceira fica fora. Capas menores no
   Início (150x225; cartões largos 320x180) e o outdoor um pouco mais alto, para tudo caber. */
html:not(.mobile) .home.nf.rowmode .nf-rows{ top: 360px; }
html:not(.mobile) .home.nf .nf-rows > .row{ height: 360px; min-height: 0; margin: 0 !important; }
html:not(.mobile) .home.nf .nf-rows > .row h2{ font-size: 28px; margin-bottom: 4px; }
html:not(.mobile) .home.nf .nf-rows .row-items{ padding-top: 16px !important; padding-bottom: 16px !important; }
html:not(.mobile) .home.nf .row-items > .poster{ width: 150px !important; margin-right: 22px !important; }
html:not(.mobile) .home.nf .row-items > .poster .art{ height: 225px !important; }
html:not(.mobile) .home.nf .row-items > .poster.wide{ width: 320px !important; }
html:not(.mobile) .home.nf .row-items > .poster.wide .art{ height: 180px !important; }
html:not(.mobile) .home.nf .row-items > .poster .cap{ font-size: 19px !important; margin-top: 8px; }
html:not(.mobile) .home.nf .row-items > .poster .sub{ font-size: 16px !important; }
html:not(.mobile) .home.nf .nf-tw > .poster{ width: 150px !important; }
html:not(.mobile) .home.nf .nf-tw > .poster .art{ height: 225px !important; }
html:not(.mobile) .home.nf .nf-num{ width: 120px; font-size: 200px; }
html:not(.mobile) .home.nf .nf-num.two{ font-size: 136px; }
html:not(.mobile) .home.nf.rowmode .hero-body{ padding-top: 64px; }
html:not(.mobile) .home.nf.rowmode .hero h1{ font-size: 84px; }
html:not(.mobile) .home.nf.rowmode .hero h1.t-md{ font-size: 70px; }
html:not(.mobile) .home.nf.rowmode .hero h1.t-sm{ font-size: 60px; }
html:not(.mobile) .home.nf.rowmode .hero h1.t-xs, html:not(.mobile) .home.nf.rowmode .hero h1.t-xxs{ font-size: 50px; }
html:not(.mobile) .home.nf.rowmode .hero .plot{ margin: 8px 0 12px; }
html:not(.mobile) .home.nf.rowmode .nf-rows{ top: auto; bottom: 0; height: 720px; }

/* ===== Luma Play: troféus (js/trofeus.js, fase 1, parecer DEV SÊNIOR 28/10) =====
   Taças em PNG pré-desenhados (img/trof). Na TV e no MSX (html.ai-tv): sem animação e sem sombra grande. */
.tb-trof .trf-n{ position: absolute; left: 44px; top: 6px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; background: #2A3350; color: #EEF0F7;
  font: 800 17px/28px "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; text-align: center; }
.tb-trof.novo .trf-n{ background: #3d8bff; color: #1A1205; box-shadow: 0 0 0 3px #070A13; }
.tb-trof.focused .trf-n{ box-shadow: 0 0 0 3px #3d8bff; }
.trf{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.trf-h{ position: absolute; left: 40px; top: 70px; width: 440px; }
.trf-h h1{ font: 800 76px/1 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; }
.trf-sum{ position: absolute; left: 40px; top: 214px; width: 440px; padding: 30px 32px 26px; border-radius: 28px; background: #131A2B; border: 2px solid rgba(255,255,255,.07); }
.trf-pts{ margin: 0 0 14px; font-size: 26px; color: #8A92AC; }
.trf-pts b{ font: 800 64px/1 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; color: #EEF0F7; margin-right: 10px; }
.trf-c{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0; padding: 10px 0; border-top: 2px solid rgba(255,255,255,.06); font-size: 27px; }
.trf-c img{ width: 60px; height: 60px; margin-right: 16px; }
.trf-c b{ margin-left: auto; font: 800 38px "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.trf-ult{ margin: 14px 0 0; font-size: 22px; color: #8A92AC; }
.trf-ult b{ color: #EEF0F7; }
.trf-grid{ position: absolute; left: 520px; right: 40px; top: 118px; bottom: 0; padding: 0 0 60px; overflow: hidden; } /* começa abaixo da data e da hora */
.trf-g{ margin: 6px 0 16px; font-size: 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.trf-ts{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 14px; }
.trf-t{ width: 392px; height: 148px; margin: 0 20px 20px 0; padding: 18px 20px; border-radius: 22px; background: #161D30; border: 2px solid rgba(255,255,255,.07);
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center; }
.trf-t img{ -webkit-flex: none; flex: none; width: 92px; height: 92px; margin-right: 16px; }
.trf-t .tx{ -webkit-flex: 1; flex: 1; min-width: 0; }
.trf-t b{ display: block; font: 700 26px/1.15 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trf-t span{ display: block; margin-top: 4px; font-size: 20px; line-height: 1.25; color: #8A92AC; }
.trf-t.x b{ color: #AEB5C9; }
.trf-t.focused{ border-color: #3d8bff; background: #1B2338; }
.trf-pr{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 10px; }
.trf-pr em{ -webkit-flex: none; flex: none; margin-left: 12px; font: 700 19px "Manrope", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-style: normal; color: #AEB5C9; }
.trf-bar{ display: block; -webkit-flex: 1; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.trf-bar i{ display: block; height: 100%; border-radius: 4px; background: #3d8bff; }
.trf-av{ position: absolute; right: 96px; bottom: 80px; z-index: 60; width: 720px; padding: 24px 30px; border-radius: 26px; background: #161D30;
  border: 2px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.55); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; pointer-events: none; }
html.ai-tv .trf-av{ box-shadow: none; border-color: rgba(255,255,255,.22); }
.trf-av img{ -webkit-flex: none; flex: none; width: 116px; height: 116px; margin-right: 24px; }
.trf-av .tx{ min-width: 0; }
.trf-av .k{ margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.trf-av .k.bronze{ color: #E3A06C; } .trf-av .k.prata{ color: #C7D0DD; } .trf-av .k.ouro{ color: #F4C542; } .trf-av .k.platina{ color: #A9DDF5; }
.trf-av b{ display: block; margin: 4px 0 6px; font: 800 40px/1.1 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.trf-av span{ font-size: 24px; color: #AEB5C9; }
.trf-av.in{ -webkit-animation: trf-in .3s ease-out both; animation: trf-in .3s ease-out both; }
@-webkit-keyframes trf-in { from { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes trf-in { from { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
.trf-sl{ display: block; margin-top: 10px; font-size: 22px; font-weight: 600; color: #AEB5C9; }
.trf-sl img{ width: 40px; height: 40px; margin: -6px 8px 0 0; vertical-align: middle; }
/* Troféus, ajustes do Meza (28/10 18:18): nível escrito no cartão, cartão do troféu (OK) e aviso dentro do vídeo. */
.trf-nv{ font-style: normal; font-weight: 700; text-transform: capitalize; }
.trf-nv.bronze{ color: #E3A06C; } .trf-nv.prata{ color: #C7D0DD; } .trf-nv.ouro{ color: #F4C542; } .trf-nv.platina{ color: #A9DDF5; }
.trf-dlg{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 960px; max-width: 100%; }
.trf-dlg img{ -webkit-flex: none; flex: none; width: 220px; height: 220px; margin-right: 40px; }
.trf-dlg .tx{ -webkit-flex: 1; flex: 1; min-width: 0; }
.trf-dlg .k{ margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.trf-dlg .k.bronze{ color: #E3A06C; } .trf-dlg .k.prata{ color: #C7D0DD; } .trf-dlg .k.ouro{ color: #F4C542; } .trf-dlg .k.platina{ color: #A9DDF5; }
.trf-dlg h2{ margin: 8px 0 14px; font: 800 54px/1.1 "Bricolage Grotesque", "SamsungOne",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.trf-dlg .como{ margin: 0 0 18px; font-size: 28px; line-height: 1.4; color: #C9CEDD; }
.trf-dlg .trf-pr{ margin: 0 0 26px; width: 560px; }
.trf-dlg .actions{ margin-top: 10px; }
.trf-av.pl{ top: 60px; bottom: auto; right: 60px; width: 600px; padding: 18px 24px; z-index: 200; background: rgba(22,29,48,.94); }
.trf-av.pl img{ width: 84px; height: 84px; margin-right: 18px; }
.trf-av.pl b{ font-size: 32px; }
.trf-av.pl span{ font-size: 21px; }
.trf-t{ height: auto; min-height: 148px; }
.trf-t b{ white-space: normal; overflow: visible; text-overflow: clip; } /* nome inteiro, em até 2 linhas (Meza 28/10: "Maratonista len…") */
/* Nome do perfil ao lado do avatar, só com o menu aberto (item 19 da Roku, DEV SÊNIOR 30/10); longo vira reticências. */
.tb-pfn{ display: none; }
html:not(.mobile) #topbar.open .rail-foot .tb-pfn:not(:empty), html:not(.mobile) .tb-pill:hover .rail-foot .tb-pfn:not(:empty){ display: block; position: absolute; left: 96px; bottom: 18px; max-width: 196px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 26px; font-weight: 600; line-height: 34px; color: #EEF0F7; pointer-events: none; }
html:not(.mobile) .rail-foot{ position: relative; }

/* css/web.css */
/* Versão web: só no build web (tools/build-web.sh). */
html.web, html.web body{ overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
html.web [data-f]{ cursor: pointer; }
html.web:not(.touch) [data-f]:hover:not(.focused){ box-shadow: 0 0 0 3px rgba(255,255,255,.35) !important; }
/* Categorias (Filmes, Séries e Ao vivo): a coluna corta o que passa da borda, então a marca do mouse fica por dentro
   da categoria (Meza 08/10: o contorno em volta de "Cinema" aparecia cortado do lado esquerdo). */
html.web:not(.touch) .lv-groups .cat:hover:not(.focused){ box-shadow: inset 0 0 0 2px rgba(255,255,255,.35) !important; }
html.web .lv-back{ cursor: pointer; }
#web-back{ position: fixed; left: 14px; bottom: 14px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(20,20,23,.72); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45); opacity: .75; }
#web-back:hover{ opacity: 1; background: #3d8bff; }
#web-rotate{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background: #070d18; color: #fff; align-items: center; justify-content: center; text-align: center; font: 600 20px Manrope, sans-serif; }
#web-rotate svg{ margin-bottom: 12px; }
@media (orientation: portrait) and (max-width: 900px) { html.touch #web-rotate{ display: flex; } }

/* Modo leve: TV com navegador antigo (Media Station X na Samsung/LG). Ligado no <head> do index.html da web (classe "lite"). */
html.lite *, html.lite *::before, html.lite *::after{ -webkit-transition: none !important; transition: none !important; }
html.lite .hero-bg.blur, html.lite .detail-bg.blur, html.lite .vod-bg.blur{ display: none; }
html.lite #web-back, html.lite #web-rotate{ display: none !important; }
html.lite [data-f]:hover:not(.focused){ box-shadow: none !important; }

/* Ao vivo: ícones da coluna recolhida clicáveis com o mouse (web.js abre as categorias). */
html.web #lv-rail .rail-btn{ cursor: pointer; }
html.web:not(.touch) #lv-rail .rail-btn:hover{ background: rgba(255,255,255,.1); color: #fff; }

/* Celular no navegador, tela cheia: imagem inteira por padrão (Meza 2026-10-08: o "preencher" da 0.6.79 cortava
   demais em celular comprido, ~20% em cima e embaixo). O vídeo continua ocupando a tela toda, até o recorte da câmera
   (viewport-fit=cover). html.m-fill (opção "Preencher", junto com o app Android) volta a cortar para encher a tela.
   Mais específico que a regra de css/mobile.css, que carrega depois. */


/* PC com mouse (0.7.3, teste; classe "pc" do js/web.js): as listas rolam com a rodinha, como num site, sem barra de
   rolagem aparecendo. O cursor do controle continua igual; as setas seguem rolando a lista como na TV. */
html.web.pc [data-scroll-y]{ overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-width: none; }
html.web.pc [data-scroll-x]{ overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; } /* sem "contain": a rodinha em cima de uma fileira rola a página */
html.web.pc [data-scroll-y]::-webkit-scrollbar, html.web.pc [data-scroll-x]::-webkit-scrollbar{ display: none; }

/* Player no PC: mouse parado 3 s some a setinha. */
html.web.pc.web-idle, html.web.pc.web-idle *{ cursor: none !important; }

/* Volume no player do PC (no alto à direita, aparece junto com a barra do player ou ao mudar o volume). */
#web-vol{ position: absolute; top: 72px; right: 72px; z-index: 5; height: 84px; padding: 0 30px 0 22px; border-radius: 42px; background: rgba(20,20,23,.72);
  display: flex; align-items: center; gap: 16px; color: #fff; font: 600 24px Manrope, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s; }
#player .osd.show ~ #web-vol, #web-vol.on, #web-vol:hover{ opacity: 1; pointer-events: auto; }
#web-vol .wv-btn{ width: 56px; height: 56px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#web-vol .wv-btn:hover{ background: rgba(255,255,255,.14); }
#web-vol .wv-n{ min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
#web-vol input{ -webkit-appearance: none; appearance: none; width: 220px; height: 8px; border-radius: 4px; cursor: pointer; outline: none;
  background: linear-gradient(to right, #3d8bff var(--p, 100%), rgba(255,255,255,.28) var(--p, 100%)); }
#web-vol input::-webkit-slider-thumb{ -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; }
#web-vol input::-moz-range-thumb{ width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; }

/* Telas em tela cheia no PC: a dica "Esc menu" vira o botão "Menu" (js/web.js abre a barra de cima). */
html.web.pc .lv-fs-top .fs-menu.pc-btn{ display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; margin-right: 30px; border-radius: 24px;
  background: rgba(255,255,255,.08); color: #F5F5F7; font-size: 21px; font-weight: 600; cursor: pointer; transition: background .15s; }
html.web.pc .lv-fs-top .fs-menu.pc-btn:hover{ background: #3d8bff; }
html.web.pc .lv-fs-top .fs-menu.pc-btn b{ margin: 0 0 0 4px; padding: 2px 8px; font-size: 15px; background: rgba(255,255,255,.16); }

/* css/ai.css */
/* GERADO por tools/build-css.js a partir de ai.src.css. Não edite aqui. */
/* Luma Play · visual novo "com cara de IA" (desenho de 14/10/2026). Telas da TV, PC e web (o celular tem o mobile.css).
   ARQUIVO-FONTE: gere css/ai.css com tools/build-css.js. Mesmas regras do app.src.css para as TVs de 2016 a 2021:
   nada de grid, gap nem inset; espaço entre itens é margem nos filhos; cor hsl/hsla sempre com vírgulas.
   Desfoque (backdrop-filter) e movimento só fora da TV (html.ai-tv desliga). Coordenadas da tela fixa 1920x1080. */
:root{ --ai-tv-deg: 160deg; --ai-tv-from: hsl(35,60%,24%); --ai-tv-stop: 62%; --ai-ink: #070e1c; --ai-panel: #131A2B; --ai-line: #26304A; --ai-text: #EEF0F7; --ai-soft: #C9CDDC; --ai-mute: #8A92AC; --ai-lume: #3d8bff; --ai-lume-ink: #1A1205; --ai-live: #EF4444; }

/* ---------- Luz ambiente (atrás de todas as telas) ---------- */
#ai-amb{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
#ai-amb .amb-l{ position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; opacity: 0; transition: opacity 1.1s ease; }
#ai-amb .amb-l.on{ opacity: 1; }
#ai-amb .amb-v{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 40%, rgba(10,14,25,0) 40%, rgba(10,14,25,.55) 100%); }

@-webkit-keyframes aiDrift { to { -webkit-transform: translate(-3%, 2%) scale(1.06); } }
@keyframes aiDrift { to { -webkit-transform: translate(-3%, 2%) scale(1.06); transform: translate(-3%, 2%) scale(1.06); } }
html.ai-tv #ai-amb .amb-l{ transition: none; }
@media (prefers-reduced-motion: reduce) { html.ai #ai-amb .amb-l{ -webkit-animation: none; animation: none; } }
html.ai #stage{ background: #070e1c; }
/* TV: carregando e perfis com fundo de cor sólida (os degradês radiais de tela cheia pesam nas TVs antigas; Meza 28/10). */
html.ai-tv .boot, html.ai-tv .profiles{ background: #070e1c; }

/* Menu lateral recolhido: mais leve, deixa a luz passar */
html.ai:not(.mobile) .tb-pill{ background: linear-gradient(90deg, rgba(10,14,25,.94) 0, rgba(10,14,25,.7) 100%); }
html.ai:not(.mobile) #topbar.open .tb-pill{ background: rgba(8,11,20,.97); }

/* ---------- Peças comuns ---------- */
.ai-sp{ width: 30px; height: 30px; fill: none; stroke: #3d8bff; stroke-width: 1.8; stroke-linejoin: round; -webkit-flex: none; flex: none; }
.ai-why{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-align-self: flex-start; align-self: flex-start; height: 44px; padding: 0 20px 0 12px; border-radius: 22px;
  background: rgba(61,139,255,.14); border: 2px solid rgba(61,139,255,.38); font: 700 20px var(--body); color: #EEF0F7; white-space: nowrap; }
.ai-why .ai-sp{ width: 22px; height: 22px; margin-right: 10px; }
.ai-why.off{ visibility: hidden; }
.ai-btn{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; height: 68px; padding: 0 32px; margin-right: 16px; border-radius: 16px;
  background: rgba(255,255,255,.14); font: 700 24px var(--body); color: #EEF0F7; }
.ai-btn svg{ width: 24px; height: 24px; margin-right: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-btn.pri{ background: #3d8bff; color: #1A1205; }
.ai-btn.focused{ -webkit-transform: scale(1.04); transform: scale(1.04); }
.ai-pill{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; padding: 5px 14px; border-radius: 999px; font: 800 16px var(--body); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.14); color: #EEF0F7; white-space: nowrap; }
.ai-pill svg{ width: 16px; height: 16px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.ai-pill.on-air{ background: #EF4444; color: #fff; }

/* ---------- Início ---------- */
.ai-home{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
/* Banner na altura toda da tela (16:9, 1920x1080, encostado à direita) e desfeito suavemente à esquerda e embaixo: sem
   a borda reta que cortava os rostos sobre as fileiras (Meza 28/10, testado no Chrome dele). Sem imagem larga (.blur),
   a capa vertical aparece inteira, nítida, na altura da tela, encostada à direita, também desfeita nas bordas. */
.ai-bg{ position: absolute; right: 0; top: 0; bottom: 0; width: 1920px; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 30%, #000 55%), linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 22%, #000 45%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Sem imagem larga: a capa inteira como cartão grande à direita, levemente inclinado, sobre a luz do fundo (opção B,
   Meza 28/10; antes era uma tira dura). Enquanto a ficha não chega (.wait), o fundo fica vazio, sem piscar. */
.ai-bg.blur{ right: 170px; top: 150px; bottom: auto; width: 440px; height: 660px; background-size: cover; background-position: center; border-radius: 26px;
  -webkit-mask-image: none; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
/* TV: o cartão sem a sombra de 90 px e sem girar (pintura cara a cada troca de destaque; parecer DEV SÊNIOR 28/10). */
html.ai-tv .ai-bg.blur, html.ai-tv .ai-ser .ai-sbg.blur{ box-shadow: 0 0 0 2px rgba(255,255,255,.08); -webkit-transform: none; transform: none; }
.ai-bg.wait{ opacity: 0; }

.ai-bg.soft{ opacity: .55; }
.ai-bgs{ position: absolute; left: 0; right: 0; bottom: 0; height: 640px; background: linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.85) 40%, rgba(10,14,25,0) 100%); pointer-events: none; }
html.ai-tv .ai-bg{ -webkit-mask-image: none; }
html.ai-tv .ai-bgs{ height: 1080px; background: linear-gradient(90deg, rgba(10,14,25,.95) 0, rgba(10,14,25,.55) 38%, rgba(10,14,25,0) 62%), linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.85) 26%, rgba(10,14,25,0) 60%); }

.ai-askz{ position: absolute; left: 64px; top: 34px; z-index: 4; }
.ai-ask{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 900px; height: 76px; padding: 0 11px 0 26px; border-radius: 38px; text-align: left;
  background: rgba(19,26,43,.72); border: 2px solid rgba(255,255,255,.16); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.ai-ask .ph{ -webkit-flex: 1; flex: 1; margin-left: 16px; font: 600 25px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-askhint{ height: 54px; line-height: 54px; padding: 0 22px; border-radius: 27px; background: rgba(255,255,255,.08); font: 600 19px var(--body); color: #C9CDDC; white-space: nowrap; }
.ai-ask.focused{ border-color: #3d8bff; }
.ai-ask.focused .ai-askhint{ background: #3d8bff; color: #1A1205; }
@supports (backdrop-filter: blur(2px)) {
  
  
}

.ai-info{ position: absolute; left: 64px; top: 170px; width: 900px; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
/* Título do destaque: uma linha que diminui em degraus (fitTitle no ai.js); muito comprido, duas linhas menores.
   Nunca passa de duas linhas, então o bloco de cima não invade as fileiras. */
.ai-info h1{ margin: 16px 0 0; padding-bottom: 4px; font: 800 88px/1.06 var(--display); letter-spacing: -3px; max-width: 900px; overflow: hidden; white-space: nowrap; }
.ai-info h1.t-md{ font-size: 74px; letter-spacing: -2.5px; }
.ai-info h1.t-sm{ font-size: 62px; letter-spacing: -2px; }
.ai-info h1.t-xs{ font-size: 54px; letter-spacing: -1.5px; }
.ai-info h1.t-wrap{ font-size: 52px; line-height: 1.08; letter-spacing: -1.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.3em; }
.ai-home.rowmode .ai-info{ top: 132px; }
.ai-home.rowmode .ai-info h1{ margin-top: 12px; font-size: 72px; letter-spacing: -2.5px; }
.ai-home.rowmode .ai-info h1.t-md{ font-size: 62px; }
.ai-home.rowmode .ai-info h1.t-sm{ font-size: 54px; letter-spacing: -2px; }
.ai-home.rowmode .ai-info h1.t-xs{ font-size: 48px; letter-spacing: -1.5px; }
.ai-home.rowmode .ai-info h1.t-wrap{ font-size: 44px; letter-spacing: -1px; }
.ai-home.rowmode .ai-meta{ margin-top: 12px; }
.ai-home.rowmode .ai-plot{ margin-top: 8px; -webkit-line-clamp: 1; min-height: 33px; max-height: 33px; }
.ai-home.rowmode .ai-acts{ margin-top: 14px; }
.ai-meta{ margin: 16px 0 0; font: 500 21px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; }
.ai-meta span{ margin-right: 20px; }
.ai-meta .rk{ color: #3d8bff; font-weight: 800; }
.ai-meta .st{ color: #3d8bff; font-weight: 700; }
.ai-plot{ margin: 12px 0 0; max-width: 760px; font: 500 22px/1.5 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 66px; max-height: 3em; }
.ai-prog{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 8px; font: 500 19px var(--body); color: #8A92AC; min-height: 10px; }
.ai-prog .ai-hbar{ width: 300px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); margin-right: 14px; overflow: hidden; }
.ai-prog .ai-hbar i{ display: block; height: 100%; background: #3d8bff; }
.ai-acts{ margin-top: 20px; display: -webkit-flex; display: flex; }

/* Fileiras: uma janela de recorte (ai-rv) que mostra só fileiras inteiras. Cada fileira tem 296px.
   No destaque aparece a primeira inteira; com o foco nas fileiras, a janela sobe e mostra duas inteiras (a atual em
   cima e a de baixo), a terceira fica fora. Nada é cortado pela metade e nada some: a de cima sai pela borda.
   O rvFit (ai.js) nunca abre a janela abaixo de 499: dali para baixo o pôster da 2ª fileira era cortado (Meza 01/11). */
.ai-rv{ position: absolute; left: 22px; right: 0; top: 696px; height: 296px; overflow: hidden; z-index: 3; }
.ai-home.rowmode .ai-rv{ top: 482px; height: 592px; }
.ai-rows{ position: relative; margin-left: 30px; transition: -webkit-transform .35s ease; transition: transform .35s ease; transition: transform .35s ease, -webkit-transform .35s ease; }
html.ai-tv .ai-rows{ transition: none; }
.ai-row{ height: 296px; overflow: hidden; transition: opacity .3s; }
.ai-row.dim{ opacity: .55; }
.ai-row h2{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 36px; margin: 0 0 4px 12px; font: 800 28px var(--display); white-space: nowrap; overflow: hidden; }
.ai-row h2 small{ margin-left: 16px; font: 500 19px var(--body); color: #8A92AC; }
.ai-tag{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; margin-right: 16px; padding: 5px 14px 5px 9px; border-radius: 999px; background: rgba(61,139,255,.12);
  font: 800 16px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #3d8bff; }
.ai-tag .ai-sp{ width: 19px; height: 19px; margin-right: 7px; }
.ai-items{ position: relative; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; overflow: hidden; padding: 14px 40px 18px 12px; white-space: nowrap; }
/* Início: 30px de folga à esquerda para o anel âmbar do cartão em foco (a margem negativa mantém o alinhamento com o
   título da fileira) e um espaço no fim, para o cartão em foco sempre parar na margem (nenhum cartão cortado). */
.ai-rows .ai-items{ height: 256px; box-sizing: border-box; margin-left: -18px; padding: 14px 40px 17px 30px; }
.ai-rows .ai-items:after{ content: ""; display: block; -webkit-flex: none; flex: none; width: 1800px; height: 1px; }

/* Cartões */
.ai-c{ -webkit-flex: none; flex: none; margin-right: 18px; border-radius: 15px; }
.ai-art{ position: relative; overflow: hidden; border-radius: 15px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1B2338; }
.ai-pst .ai-art{ width: 150px; height: 225px; }
.ai-wide .ai-art{ width: 320px; height: 180px; background-position: center 22%; }
.ai-wide .ai-art:after{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(0deg, rgba(5,7,13,.9) 0, rgba(5,7,13,0) 60%), linear-gradient(180deg, rgba(5,7,13,.6) 0, rgba(5,7,13,0) 35%); }
.ai-pt{ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; font: 800 21px/1.06 var(--display); white-space: normal; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ai-wide .ai-pt, .ai-wt{ left: 18px; right: 18px; bottom: 22px; font-size: 25px; }
.ai-wt{ position: absolute; z-index: 2; font: 800 25px/1.06 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ep{ position: absolute; left: 18px; top: 14px; z-index: 2; font: 600 18px var(--body); color: #C9CDDC; }
.ai-pb{ position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.2); z-index: 2; }
.ai-pb i{ display: block; height: 100%; background: #3d8bff; }
.ai-dur{ position: absolute; right: 9px; top: 9px; z-index: 2; padding: 3px 9px; border-radius: 7px; background: rgba(5,7,13,.78); font: 500 16px "JetBrains Mono", monospace; }
.ai-topc{ display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-flex: none; flex: none; margin-right: 26px; border-radius: 15px; }
/* Top 10: cada número numa caixa fixa de 124px, alinhado à direita e encostado na capa, sem ficar atrás dela
   (o 1, fino, aparece inteiro; o 10 é menor para caber na mesma caixa). */
.ai-num{ position: relative; width: 124px; -webkit-flex: none; flex: none; box-sizing: border-box; margin-right: 16px; padding-right: 2px; overflow: visible; text-align: right; font: 800 186px/.78 var(--display); letter-spacing: -4px; color: #070e1c; -webkit-text-stroke: 3px #8A92AC; }
.ai-num.two{ font-size: 118px; letter-spacing: -6px; }
.ai-topc .ai-art{ width: 150px; height: 225px; z-index: 1; }
.ai-topc.focused{ box-shadow: none !important; }
.ai-topc.focused .ai-art{ box-shadow: 0 0 0 4px #3d8bff, 0 0 0 10px rgba(61,139,255,.2), 0 18px 40px rgba(0,0,0,.45); }
.ai-topc.focused .ai-num{ -webkit-text-stroke-color: #3d8bff; }

.ai-game{ -webkit-flex: none; flex: none; width: 450px; height: 203px; margin-right: 18px; padding: 20px 24px; border-radius: 18px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between;
  background: linear-gradient(120deg, hsl(355,62%,28%), hsl(230,45%,17%)); border: 2px solid transparent; white-space: nowrap; } /* borda transparente: o branco a 10% virava um risco claro no lado escuro do degradê (Meza 29/10) */
.ai-rows .ai-game{ width: 400px; height: 180px; padding: 16px 22px; box-sizing: border-box; }
.ai-game.is-live{ background: linear-gradient(120deg, hsl(355,72%,32%), hsl(10,55%,16%)); }
.ag-top{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; font: 500 18px var(--body); color: #C9CDDC; }
.ag-top > span:first-child{ overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
/* Um time por linha: nomes longos (Bayern de Munique, Borussia Dortmund) cabem sem cortar. */
.ag-tm{ font: 800 24px/1.1 var(--display); }
.ag-tm > span{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 3px 0; }
.ag-tm b{ -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-tm em{ margin-left: 12px; font: 800 24px "JetBrains Mono", monospace; font-style: normal; }
.ag-tm .crest{ width: 34px; height: 34px; -webkit-flex: none; flex: none; margin: 0 12px 0 0; border-radius: 50%; background-size: 80%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.1); }
.ag-tm .crest.txt{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 15px var(--body); }
.ag-ch{ font: 500 18px var(--body); color: #C9CDDC; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pedido ---------- */
.ai-askp{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-qbar{ position: absolute; left: 64px; top: 34px; width: 1180px; height: 88px; z-index: 4; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 30px; border-radius: 44px;
  background: rgba(19,26,43,.8); border: 2px solid rgba(61,139,255,.55); box-shadow: 0 0 0 8px rgba(61,139,255,.08), 0 14px 40px rgba(0,0,0,.35); }
.ai-qbar .ai-sp{ width: 34px; height: 34px; margin-right: 18px; }
.ai-qtxt{ font: 600 30px var(--body); white-space: nowrap; overflow: hidden; }
.ai-qtxt .muted{ color: #8A92AC; }
.ai-qtxt .ai-ph{ margin-left: 10px; font-style: italic; font-weight: 500; opacity: .85; } /* dica apagada depois do cursor (busca vazia) */
.ai-caret{ display: inline-block; width: 3px; height: 34px; margin-left: 4px; vertical-align: -6px; background: #3d8bff; }

@-webkit-keyframes aiBlink { 50% { opacity: 0; } }
@keyframes aiBlink { 50% { opacity: 0; } }
.ai-qkb{ position: absolute; left: 64px; top: 160px; width: 560px; z-index: 3; }
.ai-qkb .kb{ width: 560px; }
.ai-ex{ margin-top: 26px; white-space: normal; }
.ai-ex p{ margin: 0 0 12px; font: 700 17px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.ai-chipb{ display: inline-block; margin: 0 10px 12px 0; padding: 10px 20px; border-radius: 999px; border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); font: 600 19px var(--body); color: #C9CDDC; }
.ai-chipb.focused{ background: #3d8bff; color: #1A1205; border-color: #3d8bff; }
.ai-qout{ position: absolute; left: 676px; top: 156px; right: 40px; bottom: 0; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.ai-und{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 6px 0 0 6px; font: 500 20px var(--body); }
.ai-und > *{ margin: 0 10px 10px 0; }
.ai-chip{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; padding: 8px 12px 8px 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); font: 600 20px var(--body); color: #EEF0F7; }
.ai-chip svg{ width: 18px; height: 18px; margin-left: 8px; fill: none; stroke: #8A92AC; stroke-width: 2.4; stroke-linecap: round; }
.ai-chip.fixed{ padding-right: 18px; }
.ai-chip.team{ background: rgba(61,139,255,.16); border-color: rgba(61,139,255,.5); padding-right: 18px; }
.ai-chip.team svg{ margin: 0 8px 0 0; stroke: #3d8bff; }
.ai-chip.focused{ background: #3d8bff; color: #1A1205; border-color: #3d8bff; }
.ai-chip.focused svg{ stroke: #1A1205; }
.ai-say{ margin: 10px 0 0; max-width: 1060px; font: 700 42px/1.16 var(--display); letter-spacing: -.5px; }
.ai-say .hl{ color: #3d8bff; }
.ai-note{ margin: 8px 0 0; font: 500 19px var(--body); color: #8A92AC; }
.ai-res{ position: relative; -webkit-flex: 1; flex: 1; min-height: 0; margin-top: 18px; overflow: hidden; padding: 12px 0 0 12px; white-space: normal; }
.ai-res > *{ display: inline-block; vertical-align: top; margin: 0 24px 28px 0; }
.ai-res .ai-pst .ai-art{ width: 186px; height: 279px; }
.ai-below{ width: 186px; padding-top: 10px; }
.ai-below b{ display: block; font: 700 20px/1.2 var(--body); white-space: normal; }
.ai-below small{ display: block; margin-top: 4px; font: 500 17px var(--body); color: #8A92AC; }
.ai-res .ai-pst .ai-pt{ display: none; }
.ai-res .ai-pst .ai-art:empty:before{ content: ""; }
.ai-chc{ display: -webkit-inline-flex !important; display: inline-flex !important; -webkit-align-items: center; align-items: center; width: 340px; height: 96px; padding: 0 18px; border-radius: 16px; background: rgba(19,26,43,.7); border: 2px solid #26304A; }
.ai-chc b{ margin-left: 16px; font: 700 21px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chc > :first-child{ -webkit-flex: none; flex: none; width: 96px; height: 62px; }
/* Cartão da pessoa na busca (Meza 28/10): rosto redondo, "Pessoa", nome e o que abre. */
.ai-pcard{ width: 440px; }
.ai-pcard > span:first-child, .ai-mpc > span:first-child{ width: 64px; height: 64px; }
.ai-pcard > span:first-child i, .ai-mpc > span:first-child i{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; font: 700 22px var(--body); font-style: normal; color: #fff; }
.ai-pcard > span:first-child b{ display: none; }
.ai-pcard .tx{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-left: 16px; min-width: 0; }
.ai-pcard .tx small{ font: 700 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #3d8bff; }
.ai-pcard .tx b{ margin: 2px 0 0; }
.ai-pcard .tx em{ font: 500 15px var(--body); font-style: normal; color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-pcard.focused .tx small, .ai-pcard.focused .tx em{ color: inherit; }
.ai-more{ width: 340px; -webkit-justify-content: center; justify-content: center; border-style: dashed !important; }
.ai-more .tx{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
.ai-more .tx small{ font: 700 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #3d8bff; }
.ai-more .tx b{ margin: 2px 0 0; }
.ai-more .tx em{ font: 500 15px var(--body); font-style: normal; color: #8A92AC; }
.ai-more.focused .tx small, .ai-more.focused .tx em{ color: inherit; }
.ai-more.m{ display: -webkit-flex !important; display: flex !important; width: auto; margin: 0 0 10px; height: 72px; }
.ai-qempty{ margin-top: 60px; max-width: 820px; }
.ai-qempty .ai-sp{ width: 54px; height: 54px; }
.ai-qempty h2{ margin: 18px 0 10px; font: 800 46px var(--display); }
.ai-qempty p{ margin: 0; font: 500 23px/1.5 var(--body); color: #C9CDDC; }
.ai-askhint{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; line-height: 1; }
.ai-res .ai-c.focused{ box-shadow: none !important; }
.ai-res .ai-c.focused .ai-art{ box-shadow: 0 0 0 4px #3d8bff, 0 0 0 10px rgba(61,139,255,.2), 0 18px 40px rgba(0,0,0,.45); }
.ai-res .ai-c.focused .ai-below b{ color: #3d8bff; }


/* ---------- Telas com coluna de categorias (Filmes, Séries, Ao vivo): layout do desenho ---------- */
html.ai:not(.mobile) #stage #screen #vod, html.ai:not(.mobile) #stage #screen #live{ background: none !important; }
html.ai:not(.mobile) #stage #screen #vod > .lv-top, html.ai:not(.mobile) #stage #screen #live > .lv-top{ left: 40px !important; right: 40px !important; top: 30px !important; bottom: auto !important; height: 76px !important; padding: 0 !important; background: none !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-back, html.ai:not(.mobile) #stage #screen .lv-top .brand-mark, html.ai:not(.mobile) #stage #screen .lv-top .brand-logo, html.ai:not(.mobile) #stage #screen #live > .lv-rail, html.ai:not(.mobile) #stage #screen #live > .lv-hint{ display: none !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-crumb{ margin: 0 !important; font: 600 24px var(--body) !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-crumb .muted{ font: 800 50px var(--display) !important; letter-spacing: -1.5px !important; color: #EEF0F7 !important; margin-right: 6px !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-crumb b{ color: #C9CDDC !important; font-weight: 600 !important; }
/* Coluna de categorias: sempre aberta (nada recolhe), com as do app no alto */
html.ai:not(.mobile) #stage #screen #vod > .lv-groups, html.ai:not(.mobile) #stage #screen #live > .lv-groups{ display: block !important; left: 40px !important; width: 340px !important; top: 128px !important; bottom: 24px !important; height: auto !important; padding: 0 8px 0 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-transform: none !important; transform: none !important; }
html.ai:not(.mobile) #stage #screen #vod.cats-min > .lv-groups:before, html.ai:not(.mobile) #stage #screen #vod.cats-min > .lv-groups:after{ display: none !important; content: none !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .lv-head{ margin: 0 0 10px 18px !important; font: 700 17px var(--body) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat{ display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; height: 58px !important; margin: 0 0 4px !important; padding: 0 18px !important; border: 0 !important; border-radius: 14px !important; background: none !important; font: 600 22px var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .cat-name{ -webkit-flex: 1 !important; flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .n{ margin-left: 10px !important; font: 500 16px "JetBrains Mono", monospace !important; color: #8A92AC !important; background: none !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .cat-ic{ width: 24px !important; height: 24px !important; margin-right: 12px !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .cat-ic svg{ width: 24px !important; height: 24px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.ai{ color: #EEF0F7 !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.ai .cat-ic{ color: #3d8bff !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.ai + .cat:not(.ai){ margin-top: 18px !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.on{ background: rgba(255,255,255,.1) !important; color: #EEF0F7 !important; font-weight: 700 !important; box-shadow: none !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.focused{ background: #3d8bff !important; color: #1A1205 !important; box-shadow: 0 0 0 4px rgba(61,139,255,.25) !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.focused .n, html.ai:not(.mobile) #stage #screen .lv-groups .cat.focused .cat-ic{ color: #1A1205 !important; }

/* Filmes e Séries: grade de 5 capas no meio e painel de vidro à direita */
html.ai:not(.mobile) #stage #screen #vod > .vod-main{ left: 410px !important; right: 40px !important; top: 118px !important; bottom: 0 !important; padding: 0 !important; overflow: visible !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head{ position: absolute !important; left: 14px !important; top: 0 !important; width: 840px !important; height: 56px !important; display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head b{ font: 800 30px var(--display) !important; margin-right: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 520px !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head .muted{ font: 500 19px var(--body) !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head .sort-btn{ margin-left: auto !important; height: 50px !important; padding: 0 20px !important; border-radius: 12px !important; font: 600 19px var(--body) !important; background: rgba(255,255,255,.08) !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid{ position: absolute !important; left: 0 !important; top: 64px !important; width: 870px !important; bottom: 0 !important; height: auto !important; padding: 14px 0 30px 14px !important; overflow: hidden !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster{ width: 150px !important; margin: 0 18px 26px 0 !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .art{ height: 225px !important; border-radius: 14px !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .cap{ margin-top: 10px !important; font: 600 18px/1.25 var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .sub{ display: none !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster.focused{ box-shadow: none !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster.focused .art{ box-shadow: 0 0 0 4px #3d8bff, 0 0 0 10px rgba(61,139,255,.2), 0 18px 40px rgba(0,0,0,.45) !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster.focused .cap{ color: #3d8bff !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-bg{ position: absolute !important; z-index: 1 !important; top: 0 !important; right: 0 !important; left: auto !important; width: 520px !important; height: 292px !important; border-radius: 26px 26px 0 0 !important; opacity: 1 !important; background-color: #1B2338 !important; -webkit-filter: none !important; filter: none !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-bg:after{ background: linear-gradient(0deg, rgba(13,18,32,.95) 0, rgba(13,18,32,0) 55%) !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info{ position: absolute !important; z-index: 2 !important; top: 0 !important; right: 0 !important; width: 520px !important; bottom: 26px !important; height: auto !important; margin: 0 !important; padding: 250px 28px 26px !important; border-radius: 26px !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(13,18,32,0) 0, rgba(13,18,32,0) 230px, rgba(13,18,32,.88) 300px) !important; border: 2px solid rgba(255,255,255,.1) !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info.is-cat{ padding-top: 40px !important; background: rgba(13,18,32,.6) !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info h1{ font: 800 40px/1.05 var(--display) !important; letter-spacing: -1px !important; white-space: normal !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; max-height: 2.1em !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info .meta{ margin: 10px 0 0 !important; font: 500 19px var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info .vi-plot{ margin: 12px 0 0 !important; font: 500 19px/1.45 var(--body) !important; color: #C9CDDC !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; max-height: 5.8em !important; }
html.ai:not(.mobile) #stage #screen #vod .vi-acts{ position: absolute !important; left: 28px !important; right: 28px !important; bottom: 26px !important; display: -webkit-flex !important; display: flex !important; -webkit-flex-direction: column !important; flex-direction: column !important; }
html.ai:not(.mobile) #stage #screen #vod .vi-acts[hidden]{ display: none !important; }
html.ai:not(.mobile) #stage #screen #vod .vi-acts .btn{ width: auto !important; height: 62px !important; margin: 0 0 10px !important; border-radius: 14px !important; font: 700 21px var(--body) !important; }

/* Ao vivo: grupos, lista de canais com o programa de agora e, à direita, a prévia com o que vem depois */
html.ai:not(.mobile) #stage #screen #live > .lv-list{ left: 400px !important; width: 650px !important; top: 120px !important; bottom: 16px !important; padding: 0 !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen #live .lv-list > .lv-head{ display: -webkit-flex !important; display: flex !important; -webkit-align-items: baseline !important; align-items: baseline !important; height: 50px !important; margin: 0 0 6px 14px !important; }
html.ai:not(.mobile) #stage #screen #live .lv-list > .lv-head b{ font: 800 30px var(--display) !important; margin-right: 14px !important; }
html.ai:not(.mobile) #stage #screen #live .lv-list > .lv-head span{ font: 500 19px var(--body) !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .lxg-times, html.ai:not(.mobile) #stage #screen #live .lxg-now, html.ai:not(.mobile) #stage #screen #live .ch-tl{ display: none !important; }
html.ai:not(.mobile) #stage #screen #live .ch-list{ position: absolute !important; left: 0 !important; right: 0 !important; top: 56px !important; bottom: 0 !important; padding: 8px 8px 20px !important; }
html.ai:not(.mobile) #stage #screen #live .ch-row{ width: auto !important; height: auto !important; margin: 0 0 6px !important; border: 0 !important; background: none !important; }
html.ai:not(.mobile) #stage #screen #live .ch{ display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; width: auto !important; height: 96px !important; padding: 0 18px 0 10px !important; border-radius: 16px !important; background: none !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen #live .ch.focused{ background: rgba(255,255,255,.1) !important; box-shadow: inset 0 0 0 3px #3d8bff, 0 0 0 6px rgba(61,139,255,.15) !important; }
html.ai:not(.mobile) #stage #screen #live .ch .num{ width: 58px !important; -webkit-flex: none !important; flex: none !important; text-align: right !important; margin-right: 16px !important; font: 500 18px "JetBrains Mono", monospace !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-tile{ width: 96px !important; height: 62px !important; -webkit-flex: none !important; flex: none !important; margin-right: 18px !important; border-radius: 12px !important; background-color: rgba(255,255,255,.08) !important; font-size: 24px !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-tx{ -webkit-flex: 1 !important; flex: 1 !important; min-width: 0 !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-l1{ font: 700 23px var(--body) !important; color: #EEF0F7 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-nl{ margin-top: 3px !important; font: 500 19px var(--body) !important; color: #C9CDDC !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-nl em{ margin-left: 10px !important; font: 500 15px "JetBrains Mono", monospace !important; font-style: normal !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-bar{ height: 5px !important; margin-top: 8px !important; border-radius: 3px !important; background: rgba(255,255,255,.14) !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-bar b{ display: block !important; height: 100% !important; border-radius: 3px !important; background: #3d8bff !important; }
html.ai:not(.mobile) #stage #screen #live > .lv-main{ left: 1076px !important; right: 40px !important; top: 128px !important; bottom: 24px !important; }
/* Prévia em 16:9 exato e centralizada na coluna: a caixa (o "buraco") e o vídeo têm o mesmo tamanho, então os cantos
   ficam iguais e nada sobra de lado (Meza 27/10: "meio redondo e meio quadrado" e fora do centro). */
html.ai:not(.mobile) #stage #screen #live .ch-preview{ top: 0 !important; left: 50% !important; right: auto !important; width: 683px !important; height: 384px !important; margin-left: -341px !important; border-radius: 22px !important; box-shadow: 0 24px 60px rgba(0,0,0,.45) !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card{ position: absolute !important; left: 0 !important; right: 0 !important; top: 404px !important; bottom: 0 !important; padding: 22px 24px !important; border-radius: 22px !important; background: rgba(13,18,32,.62) !important; border: 2px solid rgba(255,255,255,.1) !important; overflow: hidden !important; }
html.ai:not(.mobile) #stage #screen #live > .lv-main, html.ai:not(.mobile) #stage #screen #live > .lv-list, html.ai:not(.mobile) #stage #screen #live .ch-list, html.ai:not(.mobile) #stage #screen #live .pg-card{ height: auto !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-acts{ position: static !important; display: -webkit-flex !important; display: flex !important; margin-top: 18px !important; width: auto !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-acts .lv-bt{ margin-right: 12px !important; height: 56px !important; padding: 0 22px !important; border-radius: 14px !important; font: 600 20px var(--body) !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-up{ width: auto !important; position: static !important; margin-top: 16px !important; padding: 14px 18px !important; border-radius: 16px !important; background: rgba(255,255,255,.05) !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ttl{ font: 800 34px/1.1 var(--display) !important; margin-top: 6px !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-now{ display: block !important; }
html.ai:not(.mobile) #stage #screen #vod > .lv-top, html.ai:not(.mobile) #stage #screen #live > .lv-top{ display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; z-index: 2 !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-clock{ display: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur{ display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; width: auto !important; margin: 6px 0 0 !important; font-size: 20px !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur b{ width: 76px !important; -webkit-flex: none !important; flex: none !important; font: 500 18px "JetBrains Mono", monospace !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur span{ -webkit-flex: 1 !important; flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur em{ margin-left: 12px !important; position: static !important; font: 500 16px var(--body) !important; font-style: normal !important; color: #8A92AC !important; background: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur:before, html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur:after{ display: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-up{ display: block !important; float: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur span{ display: block !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; }
/* Canal em tela cheia: a tela de trás some (body.media-full); o "visible" acima furava isso e a programação ficava por cima do vídeo (Meza 28/10). */
html.ai:not(.mobile) body.media-full #stage #screen #live .pg-card .lv-ur span{ visibility: hidden !important; }

/* ---------- Página do filme e da série ---------- */
html.ai:not(.mobile) #stage #screen .detail{ background: none !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-bg{ left: auto !important; right: -90px !important; top: -90px !important; width: 1400px !important; height: 860px !important; -webkit-filter: none !important; filter: none !important; opacity: .9 !important; background-size: cover !important; background-position: center 20% !important; -webkit-transform: none !important; transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 34%, #000 60%) !important; }
html.ai-tv:not(.mobile) #stage #screen .detail .detail-bg{ -webkit-mask-image: none !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-shade{ background: linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.82) 42%, rgba(10,14,25,0) 70%) !important; }
html.ai-tv:not(.mobile) #stage #screen .detail .detail-shade{ background: linear-gradient(90deg, rgba(10,14,25,.95) 0, rgba(10,14,25,.5) 40%, rgba(10,14,25,0) 65%), linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.82) 42%, rgba(10,14,25,0) 70%) !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-poster{ display: none !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-top{ position: absolute !important; left: 150px !important; top: 110px !important; width: 1100px !important; height: auto !important; margin: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text{ left: 0 !important; width: 1100px !important; margin: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1{ font: 800 82px/.98 var(--display) !important; letter-spacing: -3px !important; margin: 10px 0 0 !important; white-space: normal !important; }
html.ai:not(.mobile) #stage #screen .detail .d-line{ font: 500 21px var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen .detail .plot{ max-width: 820px !important; font: 500 21px/1.5 var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen .detail .actions .btn{ height: 66px !important; border-radius: 16px !important; font: 700 23px var(--body) !important; }
.ai-pace{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; margin: 18px 0 0; padding: 12px 20px; border-radius: 16px; background: rgba(13,18,32,.62); border: 2px solid rgba(255,255,255,.1); font: 500 20px var(--body); color: #C9CDDC; }
.ai-pace .ai-sp{ width: 24px; height: 24px; margin-right: 12px; }
html.ai:not(.mobile) #stage #screen .detail .seasons{ position: absolute !important; left: 150px !important; top: 520px !important; width: 290px !important; margin: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-season{ width: 290px !important; height: 62px !important; margin: 0 0 6px !important; border-radius: 14px !important; background: none !important; border: 0 !important; font: 600 21px var(--body) !important; }
html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-season.on{ background: rgba(255,255,255,.1) !important; }
html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-season.focused{ background: #3d8bff !important; color: #1A1205 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section{ position: absolute !important; left: 470px !important; top: 520px !important; width: 1350px !important; height: 560px !important; margin: 0 !important; padding: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section #ep-row{ width: 1350px !important; height: 520px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide{ width: 1300px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide{ height: 128px !important; margin: 0 0 8px !important; padding: 10px !important; border-radius: 16px !important; background: none !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide.focused{ background: rgba(255,255,255,.08) !important; box-shadow: inset 0 0 0 3px #3d8bff !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .art{ width: 192px !important; height: 108px !important; border-radius: 10px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .lxs-h, html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-h{ font: 700 17px var(--body) !important; letter-spacing: .1em !important; color: #8A92AC !important; }

/* ---------- Perfis ---------- */
.ai-prof{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.ai-pf-brand{ position: absolute; left: 50%; top: 60px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.ai-prof h1{ margin: 0; font: 800 68px var(--display); letter-spacing: -2px; text-align: center; }
.ai-pf-sub{ margin: 12px 0 0; font: 500 23px var(--body); color: #C9CDDC; }
.ai-pf-row{ display: -webkit-flex; display: flex; margin-top: 58px; }
html.ai .ai-pf{ width: 250px; margin: 0 24px; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; background: none; border: 0; box-shadow: none !important; }
html.ai .ai-pf .av{ width: 210px !important; height: 210px !important; border-radius: 50% !important; /* redondo como no resto do app (Meza 28/10) */ transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }
html.ai .ai-pf .av svg{ width: 62%; height: 62%; }
html.ai .ai-pf .av.add{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(255,255,255,.06) !important; border: 3px dashed rgba(255,255,255,.25); }
html.ai .ai-pf .av.add svg{ width: 64px; height: 64px; fill: none; stroke: #8A92AC; stroke-width: 2; }
html.ai .ai-pf.focused .av{ box-shadow: 0 0 0 6px #3d8bff, 0 0 0 14px rgba(61,139,255,.18), 0 0 90px rgba(61,139,255,.35) !important; -webkit-transform: scale(1.05); transform: scale(1.05); }
html.ai .ai-pf b{ margin-top: 22px; font: 700 28px var(--body); }
html.ai .ai-pf.focused b{ color: #3d8bff; }
/* TV: perfis leves (Meza 28/10, MSX lento ao navegar entre perfis) — foco só com a borda, sem o brilho de 90 px, sem aumentar e
   sem transição. O fundo cobre a luz ambiente com o mesmo degradê linear parado do Início na TV (Amb, ai.js: 160°, cor do
   título a 60%/24% até o --ai-ink em 62%), aqui na cor dos perfis (35°). Uma camada, sem transição; o foco não mexe nele
   (Meza 31/10, DEV SÊNIOR A8). As cores ficam nas variáveis --ai-tv-* do :root. */
html.ai-tv .ai-prof{ background: #070e1c; background: linear-gradient(160deg, hsl(35,60%,24%) 0%, #070e1c 62%); }
html.ai-tv .ai-pf .av{ transition: none; }
html.ai-tv .ai-pf.focused .av{ box-shadow: 0 0 0 6px #3d8bff !important; -webkit-transform: none; transform: none; }
.ai-pfh{ display: block; min-height: 52px; margin-top: 8px; font: 500 19px/1.35 var(--body); color: #8A92AC; }
.ai-pfh .ai-sp{ width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.ai-pf-acts{ margin-top: 40px; }
.ai-pf-acts .btn{ height: 58px; padding: 0 28px; border-radius: 29px; background: none; border: 2px solid rgba(255,255,255,.2); font: 600 21px var(--body); color: #C9CDDC; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide{ position: relative !important; padding: 14px 20px 10px 230px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .art{ position: absolute !important; left: 12px !important; top: 10px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .cap{ font: 700 23px var(--body) !important; color: #EEF0F7 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .sub{ font: 500 17px "JetBrains Mono", monospace !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .ep-plot{ font: 500 18px/1.4 var(--body) !important; color: #C9CDDC !important; max-width: 1000px !important; }

/* ---------- Futebol (28/10): card "Seu time" em cima; abas, campeonatos em pílulas e lista como no Max Pro ---------- */
.ai-fb{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-fbt{ position: absolute; left: 64px; top: 30px; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
.ai-fbt h1{ margin: 0 24px 0 0; font: 800 52px var(--display); letter-spacing: -1.5px; }
.ai-fbt span{ font: 500 21px var(--body); color: #8A92AC; }
.ai-club{ position: absolute; left: 64px; right: 64px; top: 112px; height: 272px; padding: 24px 36px; box-sizing: border-box; border-radius: 28px; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between;
  background: linear-gradient(115deg, hsl(355,70%,32%), hsl(355,60%,16%) 58%, rgba(10,14,25,.6)); border: 2px solid rgba(255,255,255,.12); }
.ai-club.none{ background: linear-gradient(115deg, hsl(150,45%,24%), hsl(200,45%,14%) 60%, rgba(10,14,25,.6)); }
.ai-club:after{ content: ""; position: absolute; right: -90px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(0,0,0,.16); }
.ai-club .r1{ position: relative; z-index: 1; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; font: 600 21px var(--body); color: #C9CDDC; }
.ai-club .r1 .ai-sp{ width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px; }
.ai-club .vs{ position: relative; z-index: 1; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font: 800 44px/1.1 var(--display); letter-spacing: -1px; white-space: nowrap; }
.ai-club .vs b{ min-width: 0; max-width: 470px; overflow: hidden; text-overflow: ellipsis; }
.ai-club .vs i, .ai-club .vs em{ -webkit-flex: none; flex: none; margin: 0 26px; font-style: normal; }
.ai-club .vs i{ font-weight: 500; color: #8A92AC; }
.ai-club .vs em{ font: 800 44px "JetBrains Mono", monospace; }
.ai-club .vs .crest{ width: 60px; height: 60px; margin-right: 18px; border-radius: 50%; background-size: 78%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.12); -webkit-flex: none; flex: none; }
.ai-club .vs .crest.txt{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 24px var(--body); }
.ai-club .ai-clw{ min-width: 0; margin-left: auto; padding-left: 30px; font: 600 22px var(--body); letter-spacing: 0; color: #C9CDDC; overflow: hidden; text-overflow: ellipsis; }
.ai-club .ai-clw.no{ color: #8A92AC; }
.ai-club h2{ position: relative; z-index: 1; margin: 0; max-width: 1100px; font: 800 40px/1.12 var(--display); letter-spacing: -1px; }
.ai-club-acts{ position: relative; z-index: 1; display: -webkit-flex; display: flex; }
.ai-club-acts .ai-btn{ height: 60px; padding: 0 26px; font-size: 22px; white-space: nowrap; }
.ai-tg small{ margin-left: 10px; font: 700 15px var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.ai-tg svg{ -webkit-flex: none; flex: none; }
.ai-tg.on{ box-shadow: inset 0 0 0 2px #3d8bff; }
.ai-tg.on svg{ stroke: #3d8bff; }
.ai-fbbar{ position: absolute; left: 64px; right: 40px; top: 404px; height: 60px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.ai-fbbar .fx-tabs{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; }
.ai-fbbar .fx-tab{ height: 52px; padding: 0 22px; margin-right: 10px; font-size: 22px; }
.ai-fbbar .fx-pills{ -webkit-flex: 1; flex: 1; min-width: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; overflow: hidden; margin: 0 0 0 16px; padding: 6px; }
.ai-fbbar .fx-pill{ -webkit-flex: none; flex: none; height: 46px; margin: 0 10px 0 0; }
.ai-fbbar .fx-pill svg{ width: 18px; height: 18px; margin-right: 8px; fill: none; stroke: #3d8bff; stroke-width: 2.4; }
.ai-fbbar .fx-pill.focused svg{ stroke: currentColor; }
.ai-fb .fx-list{ position: absolute; left: 50px; right: 26px; top: 478px; bottom: 0; margin: 0; padding: 0 14px 40px; }
.ai-fb .fx-sec{ margin: 10px 0 12px; }
.ai-fb .fx-card{ width: 538px; margin-right: 24px; }
.ai-fb .fx-score{ width: 190px; font-size: 72px; white-space: nowrap; }
.ai-fb .fx-x{ white-space: nowrap; }
.ai-fb .fx-row.fin .fx-x{ width: auto; min-width: 90px; padding: 0 12px; }
.ai-fb .fx-empty{ position: absolute; left: 64px; top: 478px; margin: 0; font-size: 24px; }
.ai-fxr{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 12px; }
.ai-fxr .fx-row{ -webkit-flex: 1; flex: 1; min-width: 0; margin-bottom: 0; }
.ai-fxr.mine .fx-row{ box-shadow: inset 0 0 0 2px rgba(61,139,255,.4); }
.ai-fb .fx-row .fx-where{ width: 340px; }
.ai-bell{ -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 72px; height: 72px; margin-left: 14px; border-radius: 50%; background: rgba(255,255,255,.08); color: #8A92AC; }
.ai-bell.no{ background: none; }
.ai-bell svg{ width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-bell.on{ background: rgba(61,139,255,.18); color: #3d8bff; }
.ai-bell.on svg{ fill: currentColor; }
.ai-bell.focused{ background: #3d8bff; color: #1A1205; }
.ai-fbmore{ display: block; width: 100%; height: 72px; margin-bottom: 12px; border-radius: 16px; background: rgba(255,255,255,.08); font: 700 22px var(--body); color: #EEF0F7; }
.ai-fbmore.focused{ background: #3d8bff; color: #1A1205; }
.aip-opts{ margin-top: 28px; }
.aip-opts .ai-btn{ width: 100%; margin: 0 0 14px; padding: 0 18px; box-sizing: border-box; font-size: 19px; white-space: nowrap; }

/* Aviso do jogo: cartão no canto, por cima de qualquer tela e do vídeo, sem pegar o foco (▲ chega nele).
   Entra só com opacity e transform; no modo leve (TV, MSX) aparece sem animação. */
.ai-rem{ position: absolute; z-index: 25; right: 48px; top: 48px; width: 580px; padding: 24px 30px 20px; box-sizing: border-box; border-radius: 26px; background: rgba(13,18,32,.97); border: 2px solid rgba(61,139,255,.55);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); color: #EEF0F7; opacity: 0; -webkit-transform: translateY(-14px); transform: translateY(-14px); transition: opacity .25s ease, -webkit-transform .25s ease; transition: opacity .25s ease, transform .25s ease; transition: opacity .25s ease, transform .25s ease, -webkit-transform .25s ease; }
.ai-rem.on{ opacity: 1; -webkit-transform: none; transform: none; }
html.ai-tv .ai-rem{ transition: none; }
.ai-rem-k{ margin: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font: 800 17px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #3d8bff; }
.ai-rem-k svg{ width: 22px; height: 22px; margin-right: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ai-rem-g{ margin: 10px 0 2px; font: 800 32px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-rem-c{ margin: 0; font: 500 19px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-rem-c.no{ color: #FF9A9A; }
.ai-rem-n{ margin: 14px 0 16px; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
.ai-rem-n b{ margin-right: 16px; font: 800 50px/1 "JetBrains Mono", monospace; }
.ai-rem-n span{ font: 600 18px var(--body); color: #C9CDDC; }
.ai-rem-b{ display: -webkit-flex; display: flex; }
.ai-rem-b .ai-btn{ height: 58px; padding: 0 24px; font-size: 21px; white-space: nowrap; }
.ai-rem-h{ margin: 14px 0 0; font: 600 16px var(--body); color: #8A92AC; }










.ai-fbe{ margin: 20px 8px; font: 500 21px var(--body); color: #8A92AC; }
.ai-teams{ max-height: 520px; overflow: hidden; margin: 18px 0; white-space: normal; }

/* ---------- Player: controles de vidro e cartão do próximo episódio ---------- */
html.ai:not(.mobile) #player .osd-top{ padding: 44px 64px 0 !important; }
html.ai:not(.mobile) #player .osd-top .eyebrow{ font: 600 21px var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #player .osd-top h1{ font: 800 46px/1.05 var(--display) !important; letter-spacing: -1px !important; }
html.ai:not(.mobile) #player .osd-back{ width: 64px !important; height: 64px !important; border-radius: 50% !important; background: rgba(19,26,43,.6) !important; border: 2px solid rgba(255,255,255,.16) !important; }
html.ai:not(.mobile) #player .osd-bottom{ padding: 0 64px 48px !important; }
html.ai:not(.mobile) #player .seek{ height: 8px !important; border-radius: 4px !important; background: rgba(255,255,255,.22) !important; }
html.ai:not(.mobile) #player .seek i{ border-radius: 4px !important; background: #3d8bff !important; }
html.ai:not(.mobile) #player .seek b{ width: 24px !important; height: 24px !important; margin-top: -8px !important; border-radius: 50% !important; background: #3d8bff !important; box-shadow: 0 0 0 6px rgba(61,139,255,.25) !important; }
html.ai:not(.mobile) #player .seek.focused{ box-shadow: 0 0 0 4px rgba(61,139,255,.4) !important; }
html.ai:not(.mobile) #player .times{ font: 500 20px "JetBrains Mono", monospace !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #player .ctrls .ctrl{ height: 66px !important; padding: 0 24px !important; margin-right: 12px !important; border-radius: 16px !important; background: rgba(19,26,43,.62) !important; border: 2px solid rgba(255,255,255,.12) !important; font: 600 20px var(--body) !important; color: #EEF0F7 !important; }
html.ai:not(.mobile) #player .ctrls .ctrl.focused{ background: #3d8bff !important; border-color: #3d8bff !important; color: #1A1205 !important; box-shadow: 0 0 0 6px rgba(61,139,255,.2) !important; }
html.ai:not(.mobile) #player #nxe{ right: 64px !important; bottom: 210px !important; left: auto !important; top: auto !important; width: 660px !important; padding: 20px !important; border-radius: 26px !important; background: rgba(13,18,32,.82) !important; border: 2px solid rgba(255,255,255,.12) !important; box-shadow: 0 24px 60px rgba(0,0,0,.5) !important; }
html.ai:not(.mobile) #player #nxe .nxe-pic{ width: 224px !important; height: 126px !important; border-radius: 14px !important; }
html.ai:not(.mobile) #player #nxe .eyebrow{ font: 700 16px var(--body) !important; letter-spacing: .1em !important; color: #3d8bff !important; }
html.ai:not(.mobile) #player #nxe h3{ font: 800 28px var(--display) !important; }
html.ai:not(.mobile) #player #nxe .btn{ height: 58px !important; border-radius: 14px !important; font: 700 20px var(--body) !important; }
@supports (backdrop-filter: blur(2px)) {
  
}
/* Data e hora no canto: discretas, sem caixa */
html.ai:not(.mobile) #topbar .tb-right{ background: none !important; border: 0 !important; box-shadow: none !important; }
/* Data e hora maiores e com contraste sobre qualquer fundo (Meza 27/10: "sempre visível e um pouco maior"). */
html.ai:not(.mobile) #topbar .tb-date{ font: 600 24px var(--body) !important; color: #C9CDDC !important; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
html.ai:not(.mobile) #topbar .clock{ font: 800 32px var(--body) !important; color: #EEF0F7 !important; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
html.ai:not(.mobile) #player .ctrls{ display: -webkit-flex !important; display: flex !important; -webkit-justify-content: flex-start !important; justify-content: flex-start !important; -webkit-align-items: center !important; align-items: center !important; margin-top: 22px !important; }
html.ai:not(.mobile) #player .ctrls .ctrl{ display: -webkit-inline-flex !important; display: inline-flex !important; -webkit-flex-direction: row !important; flex-direction: row !important; -webkit-align-items: center !important; align-items: center !important; width: auto !important; min-width: 0 !important; }
html.ai:not(.mobile) #player .ctrls .ctrl .ic{ position: static !important; width: auto !important; height: auto !important; margin: 0 10px 0 0 !important; background: none !important; border: 0 !important; font-size: 22px !important; line-height: 1 !important; color: inherit !important; box-shadow: none !important; }
html.ai:not(.mobile) #player .ctrls .ctrl .lb{ position: static !important; margin: 0 !important; font: 600 20px var(--body) !important; color: inherit !important; white-space: nowrap !important; }
/* Texto do botão numa linha só, em tela cheia também (Meza 28/10: "10 / s" e "Próximo / episódio" quebravam). */
html.ai:not(.mobile) #player .ctrls .ctrl{ -webkit-flex-shrink: 0 !important; flex-shrink: 0 !important; }
@media (max-width: 1720px) {
  html.ai:not(.mobile) #player .ctrls .ctrl{ height: 58px !important; padding: 0 16px !important; margin-right: 8px !important; }
  html.ai:not(.mobile) #player .ctrls .ctrl .lb, html.ai:not(.mobile) #player .ctrls .ctrl .ic{ font-size: 17px !important; }
}
@media (max-width: 1400px) {
  html.ai:not(.mobile) #player .ctrls .ctrl{ height: 50px !important; padding: 0 12px !important; margin-right: 6px !important; }
  html.ai:not(.mobile) #player .ctrls .ctrl .lb, html.ai:not(.mobile) #player .ctrls .ctrl .ic{ font-size: 15px !important; }
}
@media (max-width: 1300px) {
  html.ai:not(.mobile) #player .ctrls .ctrl{ padding: 0 9px !important; margin-right: 4px !important; }
  html.ai:not(.mobile) #player .ctrls .ctrl .lb, html.ai:not(.mobile) #player .ctrls .ctrl .ic{ font-size: 14px !important; }
  html.ai:not(.mobile) #player .ctrls .ctrl .ic{ margin-right: 6px !important; }
}
html.ai:not(.mobile) #player .ctrls .ctrl.main{ padding: 0 30px !important; }
/* Botões alinhados com a barra do vídeo, do começo ao fim e com o mesmo espaço entre eles (Meza 28/10: "desalinhados"). */
html.ai:not(.mobile) #player .ctrls{ -webkit-justify-content: space-between !important; justify-content: space-between !important; }
html.ai:not(.mobile) #player .ctrls .ctrl{ margin-right: 0 !important; }
html.ai-tv:not(.mobile) #player .ctrls .ctrl{ padding: 0 18px !important; }
html.ai-tv:not(.mobile) #player .ctrls .ctrl.main{ padding: 0 24px !important; }
html.ai-tv:not(.mobile) #player .ctrls .ctrl .lb, html.ai-tv:not(.mobile) #player .ctrls .ctrl .ic{ font-size: 18px !important; }

/* ---------- Celular: luz ambiente atrás de tudo, barra de pedido, destaque em cartão ---------- */





@supports (backdrop-filter: blur(2px)) {
  
  
}

.ai-mask{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: calc(100% - 32px); height: 48px; margin: 4px 16px 14px; padding: 0 5px 0 14px; border-radius: 24px; text-align: left;
  background: rgba(19,26,43,.62); border: 1px solid rgba(255,255,255,.16); color: #C9CDDC; font: 600 14px "Manrope",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.ai-mask .ai-sp{ width: 20px; height: 20px; margin-right: 10px; }
.ai-mask span{ -webkit-flex: 1; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-mask .mb{ width: 38px; height: 38px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: #3d8bff; color: #1A1205; }
.ai-mask .mb svg{ width: 18px; height: 18px; }
.ai-mhero{ position: relative; margin: 0 16px 18px; height: 340px; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.ai-mhero .bg{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-position: center 20%; }
.ai-mhero:after{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(5,7,13,.95) 0%, rgba(5,7,13,.4) 50%, rgba(5,7,13,0) 75%); }
.ai-mhero .in{ position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; }
.ai-mhero .ai-why{ height: 28px; padding: 0 12px 0 8px; border-radius: 14px; font-size: 12px; border-width: 1px; }
.ai-mhero .ai-why .ai-sp{ width: 15px; height: 15px; margin-right: 6px; }
.ai-mhero h2{ margin: 10px 0 6px; font: 800 30px/1 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; color: #EEF0F7; }
.ai-mhero .meta{ margin: 0 0 12px; font-size: 12.5px; color: #C9CDDC; }
.ai-mhero .btns{ display: -webkit-flex; display: flex; }
.ai-mhero .btns .m-btn{ -webkit-flex: 1; flex: 1; margin-right: 8px; }
.ai-mhero .btns .m-btn:last-child{ margin-right: 0; }












/* Pedido no celular */
.ai-mfield .ai-sp{ width: 18px; height: 18px; -webkit-flex: none; flex: none; }
.ai-mex{ padding: 16px; }
.ai-mex p{ margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.ai-mex .m-chip{ margin: 0 8px 8px 0; }







.ai-mlist{ padding: 12px 12px 20px; }
.ai-mlist .ai-game{ width: auto; height: 126px; margin: 0 0 10px; }
.ai-mit{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 10px; padding: 8px; border-radius: 16px; background: rgba(19,26,43,.62); border: 1px solid rgba(255,255,255,.08); }
.ai-mit .po{ width: 62px; height: 92px; -webkit-flex: none; flex: none; border-radius: 10px; background-size: cover; background-position: center; }
.ai-mit .tx{ -webkit-flex: 1; flex: 1; min-width: 0; margin: 0 10px 0 12px; }
.ai-mit b{ display: block; font-size: 14.5px; color: #EEF0F7; }
.ai-mit span{ display: block; margin-top: 2px; font-size: 12px; color: #8A92AC; }
.ai-mit small{ display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.7em; }
.ai-mit .go{ width: 36px; height: 36px; -webkit-flex: none; flex: none; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(255,255,255,.1); }
.ai-mit .go svg{ width: 16px; height: 16px; }
.ai-mit.ch > :first-child{ width: 72px; height: 48px; -webkit-flex: none; flex: none; }
.ai-mit.ai-mpc > :first-child{ width: 48px; height: 48px; }
.ai-mpc > span:first-child i{ width: 48px; height: 48px; font-size: 17px; }
/* Categorias do app no topo da lista do celular */

/* Página do título no celular: arte grande no topo, sem a capinha ao lado */









/* ---------- Escolha do time e dos campeonatos (TV) ---------- */
.ai-pick{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.aip-head{ position: absolute; left: 190px; top: 50px; right: 64px; }
.aip-head h1{ margin: 0; font: 800 50px var(--display); letter-spacing: -1.5px; white-space: nowrap; }
.aip-head p{ margin: 8px 0 0; font: 500 21px var(--body); color: #8A92AC; }
.aip-side{ position: absolute; left: 190px; top: 196px; width: 400px; z-index: 3; }
html.ai .ai-qbar.aip-q{ position: relative; left: 0; top: 0; width: 400px; height: 72px; margin-bottom: 18px; padding: 0 22px; border-color: rgba(255,255,255,.16); box-shadow: none; }
html.ai .ai-qbar.aip-q.focused{ border-color: #3d8bff; box-shadow: 0 0 0 8px rgba(61,139,255,.12); }
.aip-q .ai-sp{ width: 28px; height: 28px; margin-right: 14px; -webkit-flex: none; flex: none; }
.aip-q .ai-qtxt{ font-size: 22px; text-overflow: ellipsis; }
/* Lote E, item 21: campeonatos numa lista vertical; o país embaixo, pequeno; o escolhido com ✓ */
.aip-lgs{ position: absolute; left: 630px; top: 186px; width: 600px; bottom: 0; z-index: 3; overflow: hidden; padding: 12px 12px 40px; }
.aip-lr, .aip-more{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; min-height: 76px; margin: 0 0 8px; padding: 10px 22px; border-radius: 16px; border: 2px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #EEF0F7; text-align: left; font: 600 23px var(--body); }
.aip-lr span{ -webkit-flex: 1; flex: 1; min-width: 0; }
.aip-lr b{ display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aip-lr small{ display: block; margin-top: 2px; font: 500 16px var(--body); color: #8A92AC; }
.aip-lr svg{ width: 28px; height: 28px; margin-left: 14px; -webkit-flex: none; flex: none; fill: none; stroke: #3d8bff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aip-lr.on{ background: rgba(61,139,255,.12); border-color: rgba(61,139,255,.5); }
.aip-lr.focused, .aip-more.focused{ background: #3d8bff; border-color: #3d8bff; color: #1A1205; }
.aip-lr.focused small{ color: #1A1205; opacity: .75; }
.aip-lr.focused svg{ stroke: #1A1205; }
.aip-more{ -webkit-justify-content: center; justify-content: center; min-height: 64px; color: #C9CDDC; }
.aip-res{ position: absolute; left: 1250px; top: 186px; right: 40px; bottom: 0; z-index: 3; overflow: hidden; padding: 12px 0 40px 12px; white-space: normal; }
.aip-h{ margin: 22px 0 12px; font: 700 18px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.aip-h:first-child{ margin-top: 0; }
.aip-h span{ margin-left: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #3d8bff; }
.aip-c{ display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; vertical-align: top; height: 58px; margin: 0 12px 14px 0; padding: 0 20px 0 14px; font-size: 21px; white-space: nowrap; }
.aip-c svg{ width: 20px; height: 20px; margin-right: 8px; -webkit-flex: none; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aip-c.tm svg{ margin: 0 0 0 10px; }
.aip-c .crest{ width: 34px; height: 34px; margin-right: 10px; -webkit-flex: none; flex: none; border-radius: 50%; background-size: 80%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.1); }
.aip-c .crest.txt{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 15px var(--body); }
.aip-c.on{ background: rgba(61,139,255,.16); border-color: rgba(61,139,255,.6); color: #EEF0F7; }
.aip-c.on svg{ stroke: #3d8bff; }
.aip-c.focused svg{ stroke: #1A1205; }
.aip-none{ margin: 0 0 10px; font: 500 20px var(--body); color: #8A92AC; }
/* Celular */
.aip-msub{ margin: 4px 16px 6px; font-size: 12.5px; line-height: 1.4; color: #8A92AC; }
.aip-mres{ padding: 4px 16px 96px; }
.aip-mres .aip-h{ margin: 16px 0 8px; font-size: 11px; }
.aip-mres .aip-h:first-child{ margin-top: 6px; }
.aip-mres .aip-h span{ margin-left: 8px; }
.aip-mres .aip-c{ height: 38px; margin: 0 8px 8px 0; padding: 0 12px 0 10px; font-size: 13.5px; }
.aip-mres .aip-c svg{ width: 14px; height: 14px; margin-right: 6px; }
.aip-mres .aip-c.tm svg{ margin: 0 0 0 6px; }
.aip-mres .aip-c .crest{ width: 22px; height: 22px; margin-right: 7px; font-size: 10px; }
.aip-mres .aip-none{ font-size: 13px; }
.aip-mres .aip-lr, .aip-mres .aip-more{ min-height: 54px; margin: 0 0 6px; padding: 7px 14px; border-radius: 12px; border-width: 1px; font-size: 15px; }
.aip-mres .aip-lr small{ font-size: 12px; }
.aip-mres .aip-lr svg{ width: 20px; height: 20px; margin-left: 10px; }
.aip-mres .aip-lgl{ margin-bottom: 4px; }
.ai-mfav{ padding: 0 0 6px; }
.ai-mfav .m-sech svg{ width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: #3d8bff; stroke-width: 2.4; }
.ai-mpickb{ margin: 2px 0 8px; }
.ai-mpickb svg{ width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: #3d8bff; stroke-width: 2.4; }

/* ---------- Cortes nas telas antigas (só tamanho; o visual delas é redesenhado em outra sessão) ---------- */
/* Filmes e Séries: três fileiras inteiras na grade (capa 225 + legenda de 2 linhas reservada = 280, + 18 de margem),
   começando em 172px e com 894px de altura; a quarta fica fora até a grade rolar (de fileira em fileira, no ai.js). */
html.ai:not(.mobile) #stage #screen #vod > .vod-main{ top: 108px !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid{ bottom: auto !important; height: 894px !important; padding-bottom: 0 !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster{ margin-bottom: 18px !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .cap{ height: 45px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info h1{ line-height: 1.12 !important; padding-bottom: 2px !important; }
/* Página da série: lista de episódios com quatro inteiros (6 + 4 × 126 - 6 = 504px); o quinto aparece ao rolar. */
html.ai:not(.mobile) #stage #screen .detail .ep-section #ep-row{ height: 504px !important; padding-top: 6px !important; padding-bottom: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide{ height: 120px !important; margin: 0 0 6px !important; padding: 8px 20px 6px 230px !important; overflow: hidden !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .art{ top: 6px !important; }
/* Título da página: uma linha que diminui em degraus (fitLine do screens.js põe t-md…t-xxs); muito comprido, duas
   linhas menores (t-wrap). Assim os botões nunca descem sobre as temporadas e os episódios. */
html.ai:not(.mobile) #stage #screen .detail .detail-text h1{ line-height: 1.06 !important; padding-bottom: 4px !important; overflow: hidden !important; white-space: nowrap !important; max-width: 1100px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-md{ font-size: 70px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-sm{ font-size: 60px !important; letter-spacing: -2px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-xs{ font-size: 52px !important; letter-spacing: -1.5px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-xxs{ font-size: 46px !important; letter-spacing: -1px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-wrap{ font-size: 50px !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
/* Cartão de jogo: as linhas não encolhem (no celular o texto do canal ficava espremido); no celular o cartão cresce. */
.ai-game > div{ -webkit-flex: none; flex: none; }


/* ---------- Filmes e Séries: opção A (grade fixa, quadro do assistente e cartão por cima) ---------- */
.ai-vod{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-vh{ position: absolute; left: 40px; top: 26px; right: 40px; height: 80px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; z-index: 4; }
.ai-vh h1{ -webkit-flex: none; flex: none; white-space: nowrap; margin: 0 34px 0 0; font: 800 52px var(--display); letter-spacing: -1.5px; }
.ai-vask{ -webkit-flex: 1; flex: 1; max-width: 960px; }
.ai-vh .ai-ask{ width: 100%; height: 68px; }
.ai-vh .ai-ask .ph{ font-size: 22px; }
/* Folga de 8px em volta (left/top compensados): o anel do item em foco não é cortado pela borda (Meza 27/10). */
.ai-gcats{ position: absolute; left: 32px; top: 118px; width: 328px; bottom: 0; overflow: hidden; padding: 8px 8px 30px 8px; z-index: 3; }
.ai-gcats .h{ margin: 14px 0 8px 16px; font: 700 16px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
.ai-gcats .h:first-child{ margin-top: 0; }
.ai-cat{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 56px; margin: 0 0 4px; padding: 0 16px; border-radius: 14px; font: 600 21px var(--body); color: #C9CDDC; white-space: nowrap; }
.ai-cat .ic{ width: 22px; height: 22px; margin-right: 12px; -webkit-flex: none; flex: none; color: #8A92AC; }
.ai-cat .ic svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-cat.ai{ color: #EEF0F7; }
.ai-cat.ai .ic, .ai-cat.ai .ic .ai-sp{ color: #7CE7FF; stroke: #7CE7FF; }
.ai-cat .nm{ -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-cat .n{ margin-left: 10px; font: 500 15px "JetBrains Mono", monospace; color: #8A92AC; }
.ai-cat .n svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; }
.ai-cat.on{ background: rgba(255,255,255,.1); color: #EEF0F7; font-weight: 700; }
.ai-cat.focused{ background: #3d8bff; color: #1A1205; box-shadow: 0 0 0 4px rgba(61,139,255,.25) !important; }
.ai-cat.focused .n, .ai-cat.focused .ic, .ai-cat.focused .ic .ai-sp{ color: #1A1205; stroke: #1A1205; }
/* Grade à esquerda e o painel de detalhes fixo à direita (opção B, Meza 28/10): 520 de painel + 40 de folga. */
.ai-gmain{ position: absolute; left: 380px; top: 120px; right: 600px; bottom: 0; }
.ai-ins{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 72px; padding: 12px 20px; border-radius: 18px; background: rgba(13,19,33,.66); border: 2px solid rgba(124,231,255,.18); font: 500 20px/1.4 var(--body); color: #C9CDDC; }
.ai-ins b{ color: #EEF0F7; }
.ai-ins .orb{ width: 42px; height: 42px; margin-right: 16px; -webkit-flex: none; flex: none; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #E7FBFF, #7CE7FF 50%, #3A7BD5); box-shadow: 0 0 22px rgba(124,231,255,.45); }
.ai-ins .orb .ai-sp{ width: 22px; height: 22px; stroke: #04202A; }
.ai-gsort{ display: -webkit-flex; display: flex; height: 50px; margin-top: 14px; }
.ai-gsort .ai-chip{ margin-right: 10px; }
.ai-gsort .ai-chip.on{ background: rgba(61,139,255,.18); border-color: rgba(61,139,255,.55); color: #EEF0F7; }
.ai-gsort .ai-chip.focused{ background: #3d8bff; color: #1A1205; border-color: #3d8bff; }
.ai-gwin{ position: absolute; left: 0; right: 0; top: 146px; bottom: 0; overflow: hidden; }
.ai-grid{ position: relative; padding: 10px 0 0 14px; transition: -webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease, -webkit-transform .25s ease; }
html.ai-tv .ai-grid{ transition: none; }
.ai-gc{ display: inline-block; vertical-align: top; width: 136px; height: 254px; margin: 0 34px 14px 0; border-radius: 12px; }
.ai-gc .ai-art{ width: 136px; height: 204px; border-radius: 12px; }
.ai-gc .ai-pt{ font-size: 17px; }
.ai-match{ position: absolute; right: 6px; top: 6px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(5,7,13,.82); font: 500 14px "JetBrains Mono", monospace; color: #7BE0A6; }
.ai-gt{ display: block; margin-top: 8px; font: 700 17px var(--body); color: #EEF0F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-gw{ display: block; font: 500 15px var(--body); color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-gc.focused{ box-shadow: none !important; }
.ai-gc.focused .ai-art{ box-shadow: 0 0 0 4px #3d8bff, 0 0 0 10px rgba(61,139,255,.2), 0 18px 40px rgba(0,0,0,.45); }
.ai-gc.focused .ai-gt{ color: #3d8bff; }
.ai-gempty{ margin: 30px 14px; font: 500 21px var(--body); color: #8A92AC; }
.ai-pop{ position: absolute; z-index: 10; top: 0; bottom: 24px; right: -560px; width: 520px; border-radius: 22px; overflow: hidden; pointer-events: none; background: rgba(12,17,30,.92); border: 2px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ai-pop.in{ -webkit-animation: aiPopIn .18s ease-out; animation: aiPopIn .18s ease-out; }
@-webkit-keyframes aiPopIn { from { opacity: .35; } to { opacity: 1; } }
@keyframes aiPopIn { from { opacity: .35; } to { opacity: 1; } }
html.ai-tv .ai-pop.in{ -webkit-animation: none; animation: none; }
/* Prévia grande no centro (Meza 28/10): a imagem larga entra inteira em 16:9; a capa em pé (.tall) aparece inteira. */
.ai-pop .pa{ height: 0; padding-top: 66%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1B2338; }
.ai-pop .pa.tall{ background-size: contain; background-color: #070e1c; }
/* TV: a imagem entra uma vez, com um fade curto, no lugar da cor do título (Meza 28/10). */
html.ai-tv .ai-pop .pa.fade{ -webkit-animation: aiPaIn .25s ease-out; animation: aiPaIn .25s ease-out; }
@-webkit-keyframes aiPaIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiPaIn { from { opacity: 0; } to { opacity: 1; } }
.ai-pop .pt{ padding: 20px 28px 24px; }
.ai-pop .ai-chip{ padding: 5px 12px 5px 9px; font-size: 15px; border-width: 1px; }
.ai-pop .ai-chip .ai-sp{ width: 16px; height: 16px; margin-right: 6px; }
.ai-chip.ai{ background: rgba(124,231,255,.1); border-color: rgba(124,231,255,.35); color: #CFF6FF; }
.ai-chip.ai .ai-sp{ stroke: #7CE7FF; }
.ai-pop b{ display: block; margin-top: 10px; font: 800 32px/1.1 var(--display); letter-spacing: -.8px; }
.ai-pop .pm{ display: block; margin-top: 8px; font: 600 20px var(--body); color: #C9CDDC; }
.ai-pop p{ margin: 10px 0 0; font: 500 19px/1.45 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; max-height: 11.6em; }
/* Painel preenchido (Meza 28/10): nota e classificação na linha do ano, elenco/direção, onde parou e 3 parecidos. */
.ai-pop .pv{ margin-left: 12px; padding: 2px 10px; border-radius: 99px; border: 1px solid rgba(61,139,255,.6); color: #3d8bff; font-size: 17px; }
.ai-pop .pc{ margin-left: 8px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); font-size: 16px; }
.ai-pop .pk{ display: block; margin-top: 10px; font: 500 17px/1.4 var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-pop .pk span{ color: #8A92AC; }
.ai-pop .pr{ display: block; margin-top: 16px; font: 600 18px var(--body); color: #EEF0F7; }
.ai-pop .ai-pb{ position: relative; display: block; margin-top: 8px; border-radius: 3px; overflow: hidden; }
.ai-pop .pl{ display: block; margin-top: 18px; font: 700 15px var(--body); letter-spacing: .6px; text-transform: uppercase; color: #8A92AC; }
.ai-pop .pe{ display: -webkit-flex; display: flex; margin-top: 10px; }
.ai-pop .pe span{ -webkit-flex: 1; flex: 1; min-width: 0; text-align: center; padding: 0 4px; }
.ai-pop .pe i{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background-size: cover; background-position: center 20%; font: 700 22px var(--body); font-style: normal; color: #fff; }
.ai-pop .pe b{ display: block; margin-top: 8px; font: 600 15px/1.25 var(--body); letter-spacing: 0; color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.5em; }
.ai-pop.short p{ -webkit-line-clamp: 3; max-height: 4.35em; }
.ai-pop .ph{ display: block; margin-top: 14px; font: 500 16px "JetBrains Mono", monospace; color: #8A92AC; }

/* ---------- Filmes com a barra lateral de categorias (Meza 01/11; por ora só no MSX, CONFIG.FILMES_BARRA) ----------
   Medidas no palco da TV (1920, tela de 1770 depois do menu): barra de 78, grade de 6 capas de 168 em 1128, ficha de 480.
   O nome da categoria fica em pé com rotate(-90deg) num bloco de largura fixa (FL2: o writing-mode falta em navegador de
   TV antiga e o texto não pode sumir). Abrir e fechar não anima (modo leve); sem blur e sem brilho. */
.ai-vod.barra .ai-gbar{ position: absolute; left: 0; top: 0; bottom: 0; width: 78px; z-index: 5; background: #0E1424; border-right: 1px solid #232B3F; cursor: pointer; }
.ai-gbar .ch{ position: absolute; left: 16px; top: 30px; width: 46px; height: 46px; border-radius: 50%; background: #1C2436; color: #3d8bff; font: 800 20px/46px var(--body); text-align: center; }
.ai-gbar .vt{ position: absolute; left: 0; right: 0; top: 100px; bottom: 26px; }
/* atalho: 954 = 1080 - 100 - 26 (palco fixo da TV); se a barra for para o PC com palco mais alto, medir a altura aqui. */
.ai-gbar .vr{ position: absolute; left: 50%; top: 50%; width: 954px; height: 40px; margin: -20px 0 0 -477px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; white-space: nowrap; }
.ai-gbar .lb{ -webkit-flex: none; flex: none; font: 700 16px var(--body); letter-spacing: .18em; text-transform: uppercase; color: #8A92AC; }
.ai-gbar .sp{ -webkit-flex: 1; flex: 1; }
.ai-gbar .nm{ max-width: 560px; overflow: hidden; text-overflow: ellipsis; font: 800 27px var(--body); letter-spacing: .04em; color: #EEF0F7; }
.ai-gbar i{ -webkit-flex: none; flex: none; width: 42px; height: 3px; margin: 0 18px; border-radius: 2px; background: #3d8bff; }
.ai-gbar small{ -webkit-flex: none; flex: none; font: 600 20px var(--body); color: #C9CDDC; }
.ai-vod.barra .ai-vh{ left: 108px; top: 24px; right: 500px; height: 64px; }
.ai-vod.barra .ai-vh h1{ margin-right: 22px; font-size: 44px; }
.ai-vod.barra .ai-vask{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.ai-vod.barra .ai-gsortc{ -webkit-flex: none; flex: none; height: 56px; margin-right: 14px; padding: 0 22px; font-size: 21px; }
.ai-gsortc .dn{ margin-left: 6px; font-size: 16px; }
.ai-gsortc.focused{ background: #3d8bff; color: #1A1205; border-color: #3d8bff; }
.ai-vod.barra .ai-vh .ai-ask{ height: 56px; }
.ai-vod.barra .ai-vh .ai-ask .ph{ font-size: 20px; }
.ai-vod.barra .ai-gmain{ left: 108px; top: 108px; right: 30px; }
/* 3 fileiras inteiras (3 x 300 + 6), nenhuma cortada embaixo. */
.ai-vod.barra .ai-gwin{ top: 0; right: 510px; bottom: auto; height: 906px; }
.ai-vod.barra .ai-grid{ padding: 6px 0 0 17px; }
.ai-vod.barra .ai-gc{ width: 168px; height: 286px; margin: 0 17px 14px 0; }
.ai-vod.barra .ai-gc .ai-art{ width: 168px; height: 252px; }
.ai-vod.barra .ai-gt{ margin-top: 10px; font-size: 19px; }
.ai-vod.barra .ai-gw{ display: none; }
.ai-vod.barra .ai-pop{ right: 0; width: 480px; pointer-events: auto; }
.ai-vod.barra .ai-pop:not([hidden]){ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.ai-vod.barra .ai-pop .pa{ -webkit-flex: none; flex: none; padding-top: 56%; }
.ai-vod.barra .ai-pop .pt{ -webkit-flex: 1; flex: 1; min-height: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding: 18px 24px 22px; }
.ai-vod.barra .ai-pop .pt > *{ -webkit-flex: none; flex: none; }
.ai-pop .pbt{ display: -webkit-flex; display: flex; margin-top: auto; padding-top: 16px; }
.ai-pop .pbt button{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  height: 62px; padding: 0 28px; margin-right: 12px; border: 0; border-radius: 14px; background: rgba(238,240,247,.14); color: #EEF0F7; font: 700 22px var(--body); cursor: pointer; }
.ai-pop .pbt svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-pop .pbt .pgo{ background: #3d8bff; color: #1A1205; }
.ai-pop .pbt .pgo svg{ margin-right: 10px; }
.ai-pop .pbt .pfv{ width: 62px; padding: 0; border-radius: 50%; }
.ai-pop .pbt .pfv.on{ color: #3d8bff; }
.ai-pop .pbt .pfv.on svg{ fill: currentColor; }
.ai-pop .pbt .focused{ box-shadow: 0 0 0 4px #070e1c, 0 0 0 7px #3d8bff !important; }
/* Categorias por cima da grade (painel de 390), com a grade escurecida atrás; fechadas, saem da navegação (display). */
.ai-vod.barra .ai-gcats{ display: none; left: 0; top: 0; width: 390px; padding: 26px 14px 30px 20px; z-index: 8; background: #0E1424; border-right: 1px solid #2A3247; box-shadow: 24px 0 60px rgba(0,0,0,.55); }
.ai-vod.barra.cats-open .ai-gcats{ display: block; }
.ai-vod.barra .ai-gcats h1{ margin: 0 0 16px 8px; font: 800 44px var(--display); letter-spacing: -1px; }
.ai-vod.barra .ai-cat{ height: 48px; font-size: 20px; }
.ai-vod.barra .ai-gshade{ display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 7; background: rgba(5,7,13,.62); }
.ai-vod.barra.cats-open .ai-gshade{ display: block; }
/* Menu aberto por cima das categorias: elas ficam escondidas (visibility, para o ▶ do menu voltar ao item delas). */
#topbar.open ~ #screen .ai-vod.barra .ai-gcats{ visibility: hidden; }
@supports (backdrop-filter: blur(2px)) {
  
  
}

/* ---------- Página da série: proposta 3 "Episódio em destaque" (item 17) ----------
   Imagem larga da série no alto (sem ela, a capa num cartão escurecido à direita), título e quanto foi visto, elenco em
   rostinhos no canto; embaixo as temporadas em coluna e o episódio em foco num cartão grande, os próximos menores ao
   lado. Sinopses com 3 linhas e max-height de reserva (TV antiga sem line-clamp). Na TV e no MSX nada anima (J6). */
.ai-ser{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-sins{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 12px 0 0; font: 500 20px/1.4 var(--body); color: #C9CDDC; }
.ai-sins b{ color: #3d8bff; }
.ai-sins .ai-sp{ width: 24px; height: 24px; margin-right: 12px; stroke: #7CE7FF; }
.ai-sacts{ display: -webkit-flex; display: flex; margin-top: 20px; }
.ai-sacts .ai-btn small{ margin-left: 12px; font: 600 16px var(--body); opacity: .75; }
.ai-sbg{ position: absolute; right: -60px; top: -60px; width: 1300px; height: 760px; background-size: cover; background-position: center 20%; opacity: .85; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 35%, #000 62%); }
.ai-sbg.soft{ opacity: .5; }
html.ai-tv .ai-sbg{ -webkit-mask-image: none; }
.ai-sshade{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(8,11,20,.98) 0%, rgba(8,11,20,.9) 48%, rgba(8,11,20,0) 78%); }
html.ai-tv .ai-sshade{ background: linear-gradient(90deg, rgba(8,11,20,.96) 0, rgba(8,11,20,.55) 45%, rgba(8,11,20,0) 70%), linear-gradient(0deg, rgba(8,11,20,.98) 0%, rgba(8,11,20,.9) 48%, rgba(8,11,20,0) 78%); }
.ai-ser .ai-sbg{ left: 0; right: 0; top: 0; width: auto; height: 1080px; background-position: center 25%; opacity: 1; -webkit-mask-image: none; }
.ai-ser .ai-sbg.blur{ left: auto; right: 150px; top: 56px; width: 300px; height: 450px; background-position: center; border-radius: 24px; opacity: .4;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
/* Fundo da série (Meza 28/10): a imagem aparece mais (o escuro de baixo começa mais baixo) e ganha uma máscara escura por
   inteiro, mais forte atrás do texto, para o texto branco ler bem até em imagem clara. */
.ai-ser .ai-sshade, html.ai-tv .ai-ser .ai-sshade{ background: linear-gradient(0deg, #070e1c 0%, #070e1c 24%, rgba(10,14,25,.72) 46%, rgba(10,14,25,.4) 72%, rgba(10,14,25,.4) 100%), linear-gradient(90deg, rgba(10,14,25,.9) 0, rgba(10,14,25,.55) 42%, rgba(10,14,25,0) 68%); }
.ai-ser .ai-shead{ text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.ai-shead{ position: absolute; left: 200px; top: 64px; width: 1000px; z-index: 3; } /* longe do botão de voltar (Meza 28/10) */
.ai-trow{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
/* Nome do título inteiro na página, sem "..." (Meza 28/10): quebra em linhas e diminui a letra quando é longo. */
.ai-trow h1{ margin: 0 40px 0 0; min-width: 0; font: 800 76px/1.08 var(--display); letter-spacing: -2.5px; }
.ai-trow h1.long{ font-size: 54px; letter-spacing: -1.5px; }
.ai-trow h1.xlong{ font-size: 42px; letter-spacing: -1px; }
.ai-pct{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex: none; flex: none; }
.ai-pct .rg{ position: relative; width: 96px; height: 96px; margin-right: 16px; -webkit-flex: none; flex: none; }
.ai-pct svg{ display: block; width: 96px; height: 96px; }
.ai-pct b{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 26px var(--display); }
.ai-pct p{ margin: 0; font: 500 21px/1.4 var(--body); color: #C9CDDC; white-space: nowrap; }
.ai-pct strong{ color: #EEF0F7; font-weight: 700; }
.ai-shead .ai-meta{ margin-top: 12px; }
.ai-shead .ai-meta span{ margin-right: 18px; }
/* max-height = as mesmas linhas x line-height: o navegador do MSX às vezes não aplica o line-clamp e a sinopse sairia
   inteira, empurrando temporadas e episódios para fora da tela (porta da 0.7.22 do Max Pro). */
.ai-ser .ai-mplot{ margin-top: 10px; max-width: 980px; font-size: 21px; -webkit-line-clamp: 3; max-height: 4.35em; }
.ai-shead .ai-sacts{ margin-top: 16px; }
.ai-scastw{ position: absolute; right: 110px; top: 72px; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }
.ai-scastw[hidden]{ display: none; }
.ai-ser .h{ margin: 0 0 10px 14px; font: 700 16px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
.ai-scastw .h{ margin: 0 10px 4px 0; color: #EEF0F7; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.ai-scast{ display: -webkit-flex; display: flex; padding: 10px; }
.ai-scast .ai-pp{ position: relative; width: auto; margin: 0 0 0 -14px; border-radius: 50%; }
.ai-scast .ai-pp:first-child{ margin-left: 0; }
.ai-scast .ai-pp i{ width: 76px; height: 76px; margin: 0; box-sizing: border-box; border: 3px solid #070e1c; font-size: 24px; }
.ai-scast .ai-pp .t{ display: none; }
.ai-scast .ai-pp.focused{ z-index: 2; }
.ai-cnm{ max-width: 520px; margin: 0 10px 0 0; font: 600 20px var(--body); color: #EEF0F7; text-shadow: 0 2px 8px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-seas{ position: absolute; left: 196px; top: 486px; width: 250px; bottom: 20px; overflow: hidden; z-index: 3; padding: 4px 6px 0 4px; } /* alinhada com o título (.ai-shead em 200px; Meza 28/10) */
.ai-sea{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: baseline; align-items: baseline; margin: 0 0 8px; padding: 12px 18px; border-radius: 12px; white-space: nowrap; font: 700 22px var(--body); color: #C9CDDC; }
.ai-sea em{ margin-left: 12px; font: 500 17px "JetBrains Mono", monospace; color: #8A92AC; }
.ai-sea.on{ background: rgba(255,255,255,.1); color: #EEF0F7; }
.ai-sea.done:not(.on):not(.focused){ opacity: .65; }
.ai-sea.focused{ background: #3d8bff; color: #1A1205; box-shadow: 0 0 0 4px rgba(61,139,255,.25) !important; }
.ai-sea.focused em{ color: #1A1205; }
.ai-eps{ position: absolute; left: 466px; right: 0; top: 486px; bottom: 0; overflow: hidden; z-index: 3; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 10px 0 0 10px; }
.ai-eps .ai-sins{ margin: 20px 0 0; }
.ai-sep{ width: 600px; margin-right: 28px; -webkit-flex: none; flex: none; border-radius: 20px; }
.ai-sep .th{ position: relative; width: 600px; height: 338px; border-radius: 20px; overflow: hidden; background-color: #1B2338; background-size: cover; background-position: center; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.ai-sep.focused{ box-shadow: none !important; }
.ai-sep.focused .th{ box-shadow: 0 0 0 5px #3d8bff, 0 24px 60px rgba(0,0,0,.55); }
.ai-sep .go{ position: absolute; left: 24px; bottom: 28px; z-index: 3; width: 72px; height: 72px; border-radius: 50%; background: #3d8bff; color: #1A1205; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.ai-sep .go svg{ width: 30px; height: 30px; margin-left: 4px; }
.ai-sep .ai-pb{ height: 8px; }
.ai-sep .ai-pb[hidden]{ display: none; }
.ai-sep h4{ margin: 16px 0 6px; font: 700 28px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-sep h4 span{ margin-left: 14px; font: 600 21px var(--body); color: #8A92AC; }
.ai-sep.focused h4{ color: #3d8bff; }
.ai-sepp{ margin: 0; font: 500 21px/1.45 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 4.35em; }
.ai-snext{ display: -webkit-flex; display: flex; -webkit-flex: none; flex: none; }
.ai-snx{ width: 300px; margin-right: 24px; -webkit-flex: none; flex: none; border-radius: 14px; opacity: .7; }
.ai-snx .th{ width: 300px; height: 169px; border-radius: 14px; background-color: #1B2338; background-size: cover; background-position: center; }
.ai-snx b{ display: block; margin-top: 12px; font: 700 21px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-snx span{ display: block; margin-top: 2px; font: 500 17px var(--body); color: #8A92AC; }
.ai-snx.focused{ opacity: 1; box-shadow: none !important; }
/* Fim da temporada ou da série (item 9): selo "Temporada N", cartão de fim e parecidos no mesmo tamanho */
.ai-snx .th{ position: relative; }
.ai-snew{ position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 8px; background: #3d8bff; color: #1A1205; font: 700 15px var(--body); font-style: normal; }
.ai-send{ opacity: .9; }
.ai-send .th{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(61,139,255,.1); border: 2px solid rgba(61,139,255,.35); box-sizing: border-box; }
.ai-send .th i{ font: 700 54px var(--body); font-style: normal; color: #3d8bff; }
.ai-send b, .ai-send span{ white-space: normal; }

/* Ao vivo: a barra antiga de tela cheia (logo, data e hora) repetia a data do canto; "A seguir" ocupa a largura toda. */
html.ai:not(.mobile) .lv-fs-top, html.ai:not(.mobile) .lv-fs-brand{ display: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-up{ -webkit-align-self: stretch !important; align-self: stretch !important; width: 100% !important; box-sizing: border-box !important; }
html.ai:not(.mobile) .acc-main .acc-opts.ai-accscroll{ max-height: 100%; height: 100%; overflow: hidden; padding-bottom: 30px; box-sizing: border-box; }
/* Sinopse do destaque sempre com pelo menos duas linhas, também com o foco nas fileiras (Meza 14/10). */
.ai-home.rowmode .ai-plot{ margin-top: 8px; font-size: 20px; line-height: 1.4; -webkit-line-clamp: 2; min-height: 56px; max-height: 56px; }

/* ---------- Página do filme ---------- */
.ai-mov{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-mhead{ position: absolute; left: 150px; top: 64px; width: 1000px; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }
.ai-mhead .ai-chip{ padding: 6px 14px 6px 10px; font-size: 17px; }
.ai-mhead .ai-chip .ai-sp{ width: 18px; height: 18px; margin-right: 8px; }
.ai-mhead h1{ margin: 12px 0 0; font: 800 76px/1.02 var(--display); letter-spacing: -2.5px; }
.ai-mhead h1.long{ font-size: 56px; letter-spacing: -1.5px; }
.ai-mhead h1.xlong{ font-size: 42px; letter-spacing: -1px; }
.ai-mhead .ai-meta span{ margin-right: 18px; }
.ai-meta .cert{ padding: 1px 9px; border-radius: 6px; background: #3d8bff; color: #1A1205; font-weight: 800; }
.ai-mhead .ai-sins{ margin-top: 10px; }
.ai-sins b{ color: #EEF0F7; }
.ai-mplot{ margin: 12px 0 0; max-width: 920px; font: 500 21px/1.45 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-height: 5.8em; }
.ai-crew{ margin: 8px 0 0; font: 500 17px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 960px; }
.ai-crew:empty{ display: none; }
.ai-crew span{ color: #8A92AC; }
.ai-mhead .ai-sacts{ margin-top: 18px; }
.ai-mrow{ position: absolute; left: 138px; right: 0; top: 590px; z-index: 3; }
.ai-mov.has-cast .ai-mrow.like{ top: 820px; }
.ai-mrow h2{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 2px 12px; font: 800 26px var(--display); }
.ai-mitems{ position: relative; overflow: hidden; white-space: nowrap; padding: 12px 40px 14px 12px; }
.ai-mitems > *{ display: inline-block; vertical-align: top; }
.ai-gc.sm{ width: 140px; height: 210px; margin: 0 20px 0 0; }
.ai-gc.sm .ai-art{ width: 140px; height: 210px; }
.ai-pp{ width: 150px; margin: 0 22px 0 0; text-align: center; white-space: normal; border-radius: 16px; }
.ai-pp i{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 50%; background-size: cover; background-position: center 25%; font: 800 32px var(--display); font-style: normal; color: #fff; }
.ai-pp b{ display: block; font: 700 17px/1.2 var(--body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.4em; }
.ai-pp span{ display: block; margin-top: 2px; font: 500 14px var(--body); color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-pp.focused{ box-shadow: none !important; }
.ai-pp.focused i{ box-shadow: 0 0 0 4px #3d8bff, 0 0 0 10px rgba(61,139,255,.2); }
.ai-pp.focused b{ color: #3d8bff; }
.ai-mhead{ top: 108px; }
.ai-mov.has-cast .ai-mrow.like{ top: 812px; }
.ai-gc.sm{ width: 126px; height: 189px; }
.ai-gc.sm .ai-art{ width: 126px; height: 189px; }
.ai-pp .t{ min-width: 0; }

/* ---------- Abertura das páginas (filme, série e Conta): marca do app enquanto os dados chegam ----------
   Só aparece se a espera passar de 150 ms (reabrir um título já visto não pisca). Fora da TV a marca "respira" com um
   brilho desfocado; na TV, sem desfoque, só a opacidade pulsando. A página entra uma vez, com fade de 200 ms. */
.ai-pload{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 9; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; opacity: 0;
  -webkit-animation: aiPlIn .25s ease .15s forwards; animation: aiPlIn .25s ease .15s forwards; }
.ai-pload img{ position: relative; width: 132px; height: 132px; -webkit-animation: aiPlBreath 1.4s ease-in-out infinite alternate; animation: aiPlBreath 1.4s ease-in-out infinite alternate; }
.ai-pload i{ position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, rgba(61,139,255,.32) 0%, rgba(61,139,255,0) 68%);
  -webkit-filter: blur(16px); filter: blur(16px); -webkit-animation: aiPlBreath 1.4s ease-in-out infinite alternate; animation: aiPlBreath 1.4s ease-in-out infinite alternate; }
html.ai-tv .ai-pload i{ -webkit-filter: none; filter: none; -webkit-animation: none; animation: none; }
html.ai-tv .ai-pload img{ -webkit-animation: aiPlFade 1s linear infinite alternate; animation: aiPlFade 1s linear infinite alternate; }
.ai-pin{ -webkit-animation: aiPlIn .2s ease-out; animation: aiPlIn .2s ease-out; }
@-webkit-keyframes aiPlIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiPlIn { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes aiPlBreath { from { opacity: .55; -webkit-transform: scale(.94); } to { opacity: 1; -webkit-transform: scale(1.04); } }
@keyframes aiPlBreath { from { opacity: .55; -webkit-transform: scale(.94); transform: scale(.94); } to { opacity: 1; -webkit-transform: scale(1.04); transform: scale(1.04); } }
@-webkit-keyframes aiPlFade { from { opacity: .45; } to { opacity: 1; } }
@keyframes aiPlFade { from { opacity: .45; } to { opacity: 1; } }

/* ---------- Troca de tela (item 18): fade e deslize curto de 180 ms, só opacity e transform ----------
   Só visual: o conteúdo novo já tem o foco quando a animação começa (app.js, swapIn). Para a frente entra da direita,
   no Voltar entra da esquerda. Duas animações iguais por sentido (0/1) para reiniciar a cada troca. A página de filme
   e série (pgShow) entra com o mesmo deslize. Desligado na TV e no MSX (html.ai-tv, J12; a página lá continua só com o
   fade) e com prefers-reduced-motion (sem a preferência "no-preference", fica o fade antigo da página). O foco dentro
   das grades e fileiras não ganha transição (J13). */
@media (prefers-reduced-motion: no-preference) {
  
  
  
  
  
}
@-webkit-keyframes aiSwF0 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwF0 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes aiSwF1 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwF1 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes aiSwB0 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwB0 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes aiSwB1 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwB1 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }

/* ---------- TV: nada caro de pintar em tela inteira (Meza 28/10: perfis com cor sólida "melhorou 2000 vezes") ----------
   Sombra do destaque do Início (repinta a cada tecla) com 1 degradê linear só; sem sombras grandes (borrão de
   40 a 80 px) no pedido, no painel da grade, no episódio e na prévia do Ao vivo; Conta e ativação sem os radiais. */
html.ai-tv .ai-bgs{ background: linear-gradient(70deg, rgba(10,14,25,.97) 0, rgba(10,14,25,.9) 34%, rgba(10,14,25,.35) 66%, rgba(10,14,25,0) 100%); }
html.ai-tv .ai-ask, html.ai-tv .ai-pop, html.ai-tv .ai-sep .th{ box-shadow: none; }
html.ai-tv .ai-sep.focused .th{ box-shadow: 0 0 0 5px #3d8bff; }
html.ai-tv:not(.mobile) #stage #screen #live .ch-preview{ box-shadow: none !important; }
html.ai-tv .vod.acc, html.ai-tv .act.lx{ background: #070e1c; }

/* Futebol na TV: a hora usava a Bebas Neue (estreita), que a TV não carrega mais (47407b4); com a letra larga ela invadia a
   bandeira e o campeonato (Meza 28/10, foto do MSX). Na TV, a hora vai na letra do app, num tamanho que cabe. */
html.ai-tv .fx-hr{ width: 150px; font: 800 38px/1 var(--display); letter-spacing: -.5px; }
html.ai-tv .fx-row > .fx-lg{ padding-left: 6px; }
html.ai-tv .fx-score{ font: 800 80px/1 var(--display); letter-spacing: -1px; }
html.ai-tv .fx-row.fin .fx-x{ font: 800 32px/1 var(--display); letter-spacing: 0; }

/* Futebol em duas colunas (Meza 28/10: "gostava mais da versão anterior"; DEV SÊNIOR 14:28). À esquerda o card do seu
   time e o ao vivo; à direita as abas, os campeonatos e a agenda compacta com o sininho. Sem radial nem blur na TV. */
.ai-fb.v2 .ai-club{ left: 64px; right: auto; top: 120px; width: 900px; height: 430px; padding: 32px 38px; -webkit-justify-content: space-between; justify-content: space-between; }
.ai-fb.v2 .ai-club .vs{ display: block; font: 800 44px/1.1 var(--display); }
.ai-fb.v2 .ai-club .vs > span{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 6px 0; }
.ai-fb.v2 .ai-club .vs b{ -webkit-flex: 1; flex: 1; max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-fb.v2 .ai-club .vs em{ margin: 0 0 0 20px; font: 800 44px var(--display); font-style: normal; }
.ai-fb.v2 .ai-club .vs .crest{ width: 62px; height: 62px; margin-right: 20px; }
.ai-fb.v2 .ai-club .ai-clw{ position: relative; z-index: 1; margin: 0; padding: 0; font: 600 20px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-fb.v2 .ai-club h2{ max-width: 780px; font-size: 40px; }
.ai-fb.v2 .ai-club-acts{ -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 -10px; }
.ai-fb.v2 .ai-club-acts .ai-btn{ height: 56px; margin: 0 10px 10px 0; padding: 0 22px; font-size: 20px; }
.ai-fb.v2 .ai-fblive{ position: absolute; left: 52px; top: 576px; width: 924px; }
.ai-fb.v2 .ai-fblive h2{ margin: 0 0 4px 12px; font: 800 28px var(--display); }
.ai-fb.v2 .ai-fblive .ai-items{ height: 250px; }
.ai-dot{ display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; background: #EF4444; vertical-align: 2px; }
.ai-fb.v2 .ai-fbbar{ left: 1004px; right: 40px; top: 120px; height: auto; display: block; }
.ai-fb.v2 .ai-fbbar .fx-tabs{ margin: 0 0 12px; }
.ai-fb.v2 .ai-fbbar .fx-pills{ margin: 0 -6px; padding: 6px; overflow: hidden; }
.ai-fb.v2 .fx-list{ left: 990px; right: 26px; top: 250px; padding: 0 14px 40px; }
.ai-fb.v2 .fx-empty{ left: 1004px; top: 250px; }
.ai-fb.v2 .fx-sec{ margin: 10px 0 10px 4px; }
.ai-agr{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 8px; }
.ai-agr .ai-ag{ -webkit-flex: 1; flex: 1; min-width: 0; margin: 0; }
.ai-agr .ai-bell{ width: 64px; height: 64px; margin-left: 10px; }
.ai-ag{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 84px; padding: 10px 18px; border-radius: 16px; background: rgba(19,26,43,.55); box-sizing: border-box; }
.ai-ag .t{ width: 96px; -webkit-flex: none; flex: none; font: 700 24px var(--display); color: #EEF0F7; }
.ai-ag .t small{ display: block; font: 600 14px var(--body); color: #8A92AC; }
.ai-ag > div{ -webkit-flex: 1; flex: 1; min-width: 0; }
.ai-ag b{ display: block; font: 700 22px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ag b i{ font-style: normal; font-weight: 600; color: #8A92AC; }
.ai-ag div span{ display: block; margin-top: 2px; font: 500 17px var(--body); color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ag .ai-pill{ -webkit-flex: none; flex: none; margin-left: 12px; }
.ai-ag.mine{ background: rgba(61,139,255,.08); box-shadow: inset 0 0 0 2px rgba(61,139,255,.3); }
.ai-ag.fin{ opacity: .55; }
.ai-ag.focused{ background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 3px #3d8bff !important; }
/* Ao vivo: o selo FHD/HD do canal em foco fica amarelo (antes ficava cinza escuro no fundo escuro; Meza 28/10). */
html.ai .live.fixed .ch.focused .ch-q{ color: #3d8bff; border-color: #3d8bff; }

/* Aviso de vencimento da lista (Meza 28/10): selo ao lado da data no topo. Sem foco, sem animação, sem sombra (leve no
   MSX); em 720p corta com reticências. Cinza > 7 dias, amarelo 7 a 4, laranja 3 a 0, vermelho vencida. */
.tb-exp{ display: inline-block; max-width: 300px; margin-right: 16px; padding: 5px 14px; border-radius: 999px; background: rgba(138,146,172,.16); color: #A9B0C6;
  font: 800 19px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tb-exp.warn{ background: rgba(30,96,242,.16); color: #1e60f2; }
.tb-exp.hot{ background: rgba(61,139,255,.22); color: #3d8bff; }
.tb-exp.bad{ background: rgba(239,68,68,.18); color: #FF8A8A; }
@media (max-width: 1400px) { .tb-exp{ max-width: 220px; font-size: 17px; } }

/* Só no Início: nas outras telas o selo ficava por cima do pedido com IA (Meza 01/11, foto do MSX em Séries). */
#topbar:not(.on-home) .tb-exp{ display: none; }
.exp-pop{ max-width: 760px; }
.exp-pop .exp-k{ margin: 0 0 8px; font: 800 18px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #3d8bff; }
.exp-pop h2{ margin: 0 0 12px; font: 800 40px/1.1 var(--display); }
.exp-pop p.muted{ margin: 0 0 26px; font-size: 24px; line-height: 1.4; }

/* Tour da primeira abertura (js/tour.js; Meza 28/10, DEV SÊNIOR T5/T6). Dentro do #stage, nas medidas do palco (respeita o
   zoom da TV). Escuro em 4 retângulos de cor sólida em volta do recorte; contorno âmbar; balão nas cores do LUMA PLAY.
   Na TV nada de sombra, desfoque, degradê ou animação; no PC só um fade curto de opacidade. */
.tour{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 9000; }
.tour .tr-ov{ position: absolute; display: block; background: rgba(4,6,12,.80); }
.tour .tr-hole{ position: absolute; display: block; border: 4px solid #3d8bff; border-radius: 22px; box-sizing: border-box; }
.tour .tr-tip{ position: absolute; width: 640px; box-sizing: border-box; padding: 30px 34px 22px; border-radius: 24px; background: #131A2B; border: 2px solid rgba(61,139,255,.55); color: #EEF0F7; }
.tour .tr-k{ display: block; margin: 0 0 10px; font: 800 17px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #3d8bff; }
.tour .tr-tip h3{ margin: 0 0 12px; font: 800 42px/1.08 var(--display); letter-spacing: -.5px; color: #F4F5FA; }
.tour .tr-tip > p{ margin: 0; font: 600 24px/1.42 var(--body); color: #C9CDDC; }
.tour .tr-dots{ display: -webkit-flex; display: flex; margin: 20px 0 0; }
.tour .tr-dots i{ width: 12px; height: 12px; margin-right: 8px; border-radius: 6px; background: #2C3550; }
.tour .tr-dots i.on{ width: 32px; background: #3d8bff; }
.tour .tr-acts{ display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; margin: 24px 0 0; }
.tour .tr-b{ height: 62px; margin-left: 14px; padding: 0 28px; border-radius: 16px; font: 800 23px/62px var(--body); background: #222B42; color: #C9CDDC; cursor: pointer; white-space: nowrap; }
.tour .tr-b.go{ background: #3d8bff; color: #1A1205; }
.tour .tr-b.on{ box-shadow: 0 0 0 4px #EEF0F7; }
.tour .tr-keys{ margin: 20px 0 0 !important; padding: 14px 0 0; border-top: 1px solid #26304A; font: 600 18px var(--body) !important; color: #8A92AC !important; }
.tour .tr-keys b{ padding: 2px 9px; margin: 0 2px; border-radius: 7px; background: #222B42; color: #EEF0F7; font-weight: 800; }

@-webkit-keyframes tr-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-in { from { opacity: 0; } to { opacity: 1; } }

/* Vídeo por baixo da página (html.video-nativo, player.js; DEV SÊNIOR 29/10, V1): com o vídeo tocando, a luz ambiente e o
   fundo do #stage saem, senão cobrem o buraco da prévia do Ao vivo (ficava só o degradê no APK e no MSX; Meza 29/10).
   O #stage precisa da regra também porque o html.ai #stage pinta o fundo e vence o body.media-on #stage. */
html.video-nativo body.media-on #ai-amb{ display: none; }
html.video-nativo body.media-on #stage{ background: transparent; }
html.video-nativo .live .ch-preview.playing, html.video-nativo #stage #screen #live .ch-preview.playing{ border-radius: 0 !important; } /* o vídeo nativo é um retângulo: com o canto redondo os 4 cantos apareciam em volta (LUMA ANDROID 29/10) */

/* css/abertura.css */
/* Abertura do LUMA PLAY. Copiada de C:\sistemas\luma-abertura\abertura.css (gerado de fonte/abertura.src.css por fonte/prefix.py, já com -webkit-). Só anima opacity e transform; medidas em vmin. */
.la{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;overflow:hidden;background:#050913}
.la img{display:block;width:100%;height:100%}
.la-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#070e1c;opacity:0}
.la-glow{position:absolute;left:50%;top:50%;width:150vmin;height:100vmin;margin:-50vmin 0 0 -75vmin;
  background:radial-gradient(closest-side,rgba(61,139,255,.22),rgba(0,82,204,.07) 55%,rgba(0,82,204,0));opacity:0}
.la-lock{position:absolute;left:50%;top:50%;width:94vmin;height:40vmin;margin:-20vmin 0 0 -47vmin}
.la-mv{position:absolute;left:0;top:0;width:40vmin;height:40vmin;z-index:2;-webkit-transition:-webkit-transform .35s ease-in-out;transition:transform .35s ease-in-out}
.la-cat{position:relative;width:100%;height:100%;-webkit-transform-origin:52% 70%;transform-origin:52% 70%}
.la-cat>img{position:absolute;left:0;top:0;width:100%;height:100%}
.la-gata,.la-luz{opacity:0}
.la-eb,.la-nose{position:absolute;overflow:hidden;opacity:0}
.la-ol{left:38.97%;top:37.45%;width:11.30%;height:8.32%}
.la-or{left:61.43%;top:37.50%;width:11.64%;height:8.32%}
.la-nose{left:52.59%;top:47.04%;width:6.14%;height:4.16%}
.la-lid{position:absolute;left:-5%;right:-5%;top:-10%;height:120%;background:#030304;border-radius:0 0 50% 50%/0 0 45% 45%;-webkit-transform:translateY(0);transform:translateY(0)}
.la-txt{position:absolute;left:44vmin;top:8.1vmin;width:50vmin;height:23.8vmin;opacity:0;-webkit-transform:translateX(-25vmin);transform:translateX(-25vmin)}
.la-load{position:absolute;left:0;right:0;bottom:11%;text-align:center;opacity:0;-webkit-transition:opacity .35s;transition:opacity .35s}
.la-bar{position:relative;width:53vmin;height:.9vmin;margin:0 auto 2.6vmin;border-radius:1vmin;overflow:hidden;background:rgba(61,139,255,.16)}
.la-bar i{position:absolute;top:0;left:0;width:40%;height:100%;border-radius:1vmin;
  background:linear-gradient(90deg,rgba(61,139,255,0),#3d8bff,rgba(61,139,255,0));-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.la-load img{display:inline-block;width:auto;height:4.6vmin}
.la-flash{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 55%,#a8d8ff,#3d8bff 35%,#0052cc 75%);opacity:0}

/* Entrada (2,4 s): olhos e nariz no escuro, olhos abrem e piscam, a gata aparece, o nome desliza */
.la-in .la-eb{-webkit-animation:la-fade .25s .3s forwards;animation:la-fade .25s .3s forwards}
.la-in .la-nose{-webkit-animation:la-fade .4s .55s forwards;animation:la-fade .4s .55s forwards}
.la-in .la-lid{-webkit-animation:la-open .5s .35s cubic-bezier(.3,.7,.3,1) forwards,la-blink .26s 1.2s ease-in-out;animation:la-open .5s .35s cubic-bezier(.3,.7,.3,1) forwards,la-blink .26s 1.2s ease-in-out}
.la-in .la-bg{-webkit-animation:la-fade .8s 1.5s forwards;animation:la-fade .8s 1.5s forwards}
.la-in .la-gata{-webkit-animation:la-fade .6s 1.55s forwards;animation:la-fade .6s 1.55s forwards}
.la-in .la-glow{-webkit-animation:la-glow .9s 1.55s forwards;animation:la-glow .9s 1.55s forwards}
.la-in .la-txt{-webkit-animation:la-slide .55s 1.85s cubic-bezier(.2,.8,.2,1) forwards;animation:la-slide .55s 1.85s cubic-bezier(.2,.8,.2,1) forwards}

/* Espera (enquanto a lista carrega): "Carregando conteúdo…", barra correndo, gata pisca de vez em quando */
.la-wait .la-load{opacity:1}
.la-wait .la-bar i{-webkit-animation:la-run 1.1s linear infinite;animation:la-run 1.1s linear infinite}
.la-wait .la-glow{-webkit-animation:la-breathe 1.8s ease-in-out infinite alternate;animation:la-breathe 1.8s ease-in-out infinite alternate}
.la-wait .la-lid{-webkit-transform:translateY(-102%);transform:translateY(-102%);-webkit-animation:la-blinkloop 3.6s 1s ease-in-out infinite;animation:la-blinkloop 3.6s 1s ease-in-out infinite}

/* Logo viva na espera, sem cortar a logo: a gata inteira respira e flutua de leve, pisca, e um brilho passa no play */
.la-wait .la-cat{-webkit-animation:la-float 2.6s ease-in-out infinite alternate;animation:la-float 2.6s ease-in-out infinite alternate}
.la-wait .la-luz{-webkit-animation:la-luzplay 3.4s 0.8s ease-in-out infinite;animation:la-luzplay 3.4s 0.8s ease-in-out infinite}

/* Saída (1,5 s): o nome sai, a gata vai ao centro e cresce até tomar a tela */
.la-out .la-load{opacity:0;-webkit-transition-duration:.2s;transition-duration:.2s}
.la-out .la-bg,.la-out .la-gata,.la-out .la-eb,.la-out .la-nose{opacity:1}
.la-out .la-lid{-webkit-animation:none;animation:none;-webkit-transform:translateY(-102%);transform:translateY(-102%)}
.la-out .la-luz{-webkit-animation:none;animation:none;opacity:0}
.la-out .la-txt{opacity:1;-webkit-transform:none;transform:none;-webkit-animation:la-txtout .3s forwards;animation:la-txtout .3s forwards}
.la-out .la-cat{-webkit-animation:la-dive .8s .4s cubic-bezier(.55,0,.85,.35) forwards;animation:la-dive .8s .4s cubic-bezier(.55,0,.85,.35) forwards}
.la-out .la-lock{-webkit-animation:la-hide .01s 1.05s forwards;animation:la-hide .01s 1.05s forwards}
.la-out .la-flash{-webkit-animation:la-flash .6s .9s forwards;animation:la-flash .6s .9s forwards}
.la-out .la-glow{opacity:.75}

/* Lista demorando (mais de 15 s): a frase troca pelo texto, no lugar da imagem "Carregando conteúdo…" */
.la-long .la-load img{display:none}
.la-msg{margin:0;font:600 2.6vmin/1.3 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.03em;color:#EEF0F7}
/* De novo, depois de escolher o perfil (denovo): direto na espera, com a logo inteira, entrando com fade de 0,3 s */
.la-re{-webkit-animation:la-fadein .3s;animation:la-fadein .3s}
.la-re .la-bg,.la-re .la-gata,.la-re .la-eb,.la-re .la-nose{opacity:1}
.la-re .la-txt{opacity:1;-webkit-transform:none;transform:none}
.la-re .la-glow{opacity:.75}
@-webkit-keyframes la-fadein{from{opacity:0}to{opacity:1}}
@keyframes la-fadein{from{opacity:0}to{opacity:1}}
@-webkit-keyframes la-fade{to{opacity:1}}
@keyframes la-fade{to{opacity:1}}
@-webkit-keyframes la-open{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(-102%)}}
@keyframes la-open{from{transform:translateY(0)}to{transform:translateY(-102%)}}
@-webkit-keyframes la-blink{0%{-webkit-transform:translateY(-102%)}50%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-102%)}}
@keyframes la-blink{0%{transform:translateY(-102%)}50%{transform:translateY(0)}100%{transform:translateY(-102%)}}
@-webkit-keyframes la-blinkloop{0%{-webkit-transform:translateY(-102%)}90%{-webkit-transform:translateY(-102%)}95%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-102%)}}
@keyframes la-blinkloop{0%{transform:translateY(-102%)}90%{transform:translateY(-102%)}95%{transform:translateY(0)}100%{transform:translateY(-102%)}}
@-webkit-keyframes la-glow{0%{opacity:0}40%{opacity:1}100%{opacity:.75}}
@keyframes la-glow{0%{opacity:0}40%{opacity:1}100%{opacity:.75}}
@-webkit-keyframes la-breathe{from{opacity:.55}to{opacity:1}}
@keyframes la-breathe{from{opacity:.55}to{opacity:1}}
@-webkit-keyframes la-slide{to{opacity:1;-webkit-transform:translateX(0)}}
@keyframes la-slide{to{opacity:1;transform:translateX(0)}}
@-webkit-keyframes la-run{to{-webkit-transform:translateX(250%)}}
@keyframes la-run{to{transform:translateX(250%)}}
@-webkit-keyframes la-txtout{to{opacity:0;-webkit-transform:translateX(4vmin)}}
@keyframes la-txtout{to{opacity:0;transform:translateX(4vmin)}}
@-webkit-keyframes la-dive{from{-webkit-transform:scale(1)}to{-webkit-transform:scale(16)}}
@keyframes la-dive{from{transform:scale(1)}to{transform:scale(16)}}
@-webkit-keyframes la-hide{to{opacity:0}}
@keyframes la-hide{to{opacity:0}}
@-webkit-keyframes la-float{from{-webkit-transform:translateY(0) scale(1)}to{-webkit-transform:translateY(-1.1vmin) scale(1.015)}}
@keyframes la-float{from{transform:translateY(0) scale(1)}to{transform:translateY(-1.1vmin) scale(1.015)}}
@-webkit-keyframes la-luzplay{0%{opacity:0}62%{opacity:0}78%{opacity:.75}100%{opacity:0}}
@keyframes la-luzplay{0%{opacity:0}62%{opacity:0}78%{opacity:.75}100%{opacity:0}}
@-webkit-keyframes la-flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes la-flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* Celular em pé: tudo menor para caber na largura */
@media (orientation:portrait){
  .la-lock{width:58vmin;height:24.8vmin;margin:-12.4vmin 0 0 -29vmin}
  .la-mv{width:24.8vmin;height:24.8vmin}
  .la-txt{left:27.3vmin;top:5vmin;width:31vmin;height:14.8vmin}
  .la-bar{width:46vmin}
  .la-load img{height:4vmin}
}

/* TV (modo leve, html.lite; MSX na Samsung e na LG): o mesmo desenho com efeitos baratos para a TV fraca (DEV SÊNIOR 28/10).
   Uma animação de transform por elemento (a pálpebra abre e pisca num keyframe só), nada de degradê de tela cheia
   (o brilho e o clarão são PNGs pequenas ampliadas; o clarão é um disco que cresce), e na saída a gata cresce só
   até 1,4x e some (o scale(16) é arriscado em Chromium antigo). Na espera, sem o brilho respirando. */
.lite .la-glow{background:url(../img/abertura/brilho-v3.png) 0 0/100% 100% no-repeat}
/* TV: os olhos já aparecem abertos e só piscam uma vez (abrindo devagar, no MSX ficavam "meio fechados"; Meza 28/10). */
.lite .la-lid{-webkit-transform:translateY(-102%);transform:translateY(-102%)}
.lite .la-in .la-lid{-webkit-animation:la-blink .26s 1.2s ease-in-out;animation:la-blink .26s 1.2s ease-in-out}
.lite .la-wait .la-glow{-webkit-animation:none;animation:none;opacity:.75}
/* TV: sem piscar e sem flutuar (Meza 30/10: no MSX da Samsung a gata ficava de olho fechado um tempão). Com a TV ocupada
   carregando a lista, a pálpebra podia ficar parada no meio da piscada (fechada). Olhos sempre abertos e a gata parada. */
.lite .la-in .la-lid,.lite .la-wait .la-lid{-webkit-animation:none;animation:none;-webkit-transform:translateY(-102%);transform:translateY(-102%)}
.lite .la-wait .la-cat{-webkit-animation:none;animation:none}
/* TV: piscada curta só quando o abertura.js vê a TV livre (Meza 01/11); fora dela, olhos abertos como acima. */
.lite .la-pisca .la-lid,.lite .la-in.la-pisca .la-lid,.lite .la-wait.la-pisca .la-lid{-webkit-animation:la-blink .22s ease-in-out;animation:la-blink .22s ease-in-out}
.lite .la-flash{left:50%;top:50%;right:auto;bottom:auto;width:40vmin;height:40vmin;margin:-12vmin 0 0 -19.2vmin;background:url(../img/abertura/clarao-v3.png) 0 0/100% 100% no-repeat;
  -webkit-transform:scale(.3);transform:scale(.3)}
.lite .la-out .la-cat{-webkit-animation:la-divetv .75s .4s cubic-bezier(.55,0,.85,.35) forwards;animation:la-divetv .75s .4s cubic-bezier(.55,0,.85,.35) forwards}
.lite .la-out .la-flash{-webkit-animation:la-circ .8s .72s forwards;animation:la-circ .8s .72s forwards}
@media (orientation:portrait){.lite .la-flash{width:24.8vmin;height:24.8vmin;margin:-7.4vmin 0 0 -11.9vmin}}

/* Abre (0,35→0,85 s, a mesma curva do la-open), fica aberta e pisca às 1,2 s (0,26 s), como la-open + la-blink */
@-webkit-keyframes la-lidin{0%{-webkit-transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(.3,.7,.3,1)}45%{-webkit-transform:translateY(-102%)}76.6%{-webkit-transform:translateY(-102%);-webkit-animation-timing-function:ease-in-out}88.3%{-webkit-transform:translateY(0);-webkit-animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(-102%)}}
@keyframes la-lidin{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.7,.3,1)}45%{transform:translateY(-102%)}76.6%{transform:translateY(-102%);animation-timing-function:ease-in-out}88.3%{transform:translateY(0);animation-timing-function:ease-in-out}100%{transform:translateY(-102%)}}
@-webkit-keyframes la-divetv{from{-webkit-transform:scale(1);opacity:1}to{-webkit-transform:scale(1.4);opacity:0}}
@keyframes la-divetv{from{transform:scale(1);opacity:1}to{transform:scale(1.4);opacity:0}}
/* O disco âmbar (as cores do clarão do PC) sai do nariz da gata, cobre a tela (raio 20vmin x 7 > meia diagonal do 16:9) e apaga */
@-webkit-keyframes la-circ{0%{opacity:0;-webkit-transform:scale(.3);-webkit-animation-timing-function:cubic-bezier(.5,0,.75,.4)}15%{opacity:1}55%{opacity:1;-webkit-transform:scale(7)}100%{opacity:0;-webkit-transform:scale(7)}}
@keyframes la-circ{0%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.5,0,.75,.4)}15%{opacity:1}55%{opacity:1;transform:scale(7)}100%{opacity:0;transform:scale(7)}}

/* css/carregar.css */
/* Carregamento das páginas de filme e série (js/carregar.js), sem texto (Meza 28/10). Copiado de C:\sistemas\luma-abertura\carregar.css (gerado de fonte/carregar.src.css por fonte/prefix.py, já com -webkit-). Só anima opacity e transform; medidas em vmin. */
.lc{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;display:none;background:#050913;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}
.lc.lc-on{display:block}
.lc.lc-vis{opacity:1}
.lc img{display:block;width:100%;height:100%}
.lc-box{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;margin:-27vmin 0 0 -33vmin}
.lc-eb,.lc-nose{position:absolute;overflow:hidden;opacity:0}
.lc-ol{left:38.97%;top:37.45%;width:11.30%;height:8.32%}
.lc-or{left:61.43%;top:37.50%;width:11.64%;height:8.32%}
.lc-nose{left:52.59%;top:47.04%;width:6.14%;height:4.16%}
.lc-lid{position:absolute;left:-5%;right:-5%;top:-10%;height:120%;background:#050913;border-radius:0 0 50% 50%/0 0 45% 45%;-webkit-transform:translateY(0);transform:translateY(0)}
.lc-vis .lc-eb{-webkit-animation:lc-fade .25s .1s forwards;animation:lc-fade .25s .1s forwards}
.lc-vis .lc-nose{-webkit-animation:lc-fade .4s .35s forwards;animation:lc-fade .4s .35s forwards}
.lc-vis .lc-lid{-webkit-animation:lc-open .45s .15s cubic-bezier(.3,.7,.3,1) forwards,lc-blink 3s 1.2s ease-in-out infinite;animation:lc-open .45s .15s cubic-bezier(.3,.7,.3,1) forwards,lc-blink 3s 1.2s ease-in-out infinite}
@-webkit-keyframes lc-fade{from{opacity:0}to{opacity:1}}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
@-webkit-keyframes lc-open{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(-102%)}}
@keyframes lc-open{from{transform:translateY(0)}to{transform:translateY(-102%)}}
@-webkit-keyframes lc-blink{0%{-webkit-transform:translateY(-102%)}82%{-webkit-transform:translateY(-102%)}88%{-webkit-transform:translateY(0)}94%{-webkit-transform:translateY(-102%)}100%{-webkit-transform:translateY(-102%)}}
@keyframes lc-blink{0%{transform:translateY(-102%)}82%{transform:translateY(-102%)}88%{transform:translateY(0)}94%{transform:translateY(-102%)}100%{transform:translateY(-102%)}}