/* HOTBOYS TV - CSS unico, escrito a mao, a partir do design system "HotBoys TV"
   (tokens: bg #0b0b0c, brand #f01f1f, brand-hot #ff7a1a, brand-deep #d81a1a, ink,
   ink-muted #b8b8be, ink-subtle #8a8a92, surface #1c1c20, surface-raised #26262b,
   hairline #34343a; Open Sans; escala fixa para 1080p).
   Valores em rem com 1rem = 16px a 1920 (0.8333vw): 720p vira 2/3 sozinho.
   Sem var(): TV antiga (Chromium 38) nao entende custom properties. */
@font-face{font-family:"Open Sans";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/opensans-300.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/opensans-400.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/opensans-600.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/opensans-700.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/opensans-800.woff2) format("woff2")}

html{font-size:.8333vw;background:#0b0b0c}
body{margin:0;background:#0b0b0c;color:#fff;font-family:"Open Sans","Segoe UI",Roboto,system-ui,sans-serif;font-size:1.625rem;line-height:2.375rem;overflow:hidden;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
img{display:block}
h1,h2,h3{margin:0;font-weight:700}
h1{font-size:3.5rem;line-height:4rem}            /* tv-h1 56/64 */
h2{font-size:2.25rem;line-height:2.75rem}        /* tv-h2 36/44 */
[data-foco]{outline:none}

/* ---- trilho de navegacao (120px, bg-elevated); rotulos aparecem quando o foco entra nele */
.menu{position:fixed;left:0;top:0;bottom:0;width:7.5rem;background:#141416;z-index:5;padding-top:6rem;-webkit-transition:width .15s;transition:width .15s}
.menu.aberto{width:22rem}
.menu-logo{display:none;position:absolute;left:1.5rem;top:2.6rem}
.menu-logo img{height:1.9rem;width:auto}
.menu.aberto .menu-logo{display:block}
.topbar{position:fixed;left:13.5rem;top:2.75rem;z-index:6}
.topbar img{height:2.25rem;width:auto}
.menu a[data-foco]{display:block;position:relative;height:4.5rem;margin:0 0 2rem 1.5rem;width:4.5rem;border-radius:999px;color:#b8b8be;font-size:1.625rem;line-height:4.5rem;font-weight:600;white-space:nowrap;-webkit-transition:width .15s;transition:width .15s}
.menu.aberto a[data-foco]{width:19rem;padding-left:4.5rem}
.menu a svg{position:absolute;left:1.375rem;top:1.375rem;width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.menu a .rotulo{display:none}
.menu.aberto a .rotulo{display:inline}
.menu a.ativo{color:#fff;background:#26262b}
.menu a[data-foco]:focus,.menu a[data-foco].foco{color:#fff;box-shadow:0 0 0 .3125rem #f01f1f,0 0 1.75rem .25rem rgba(255,122,26,.6)}

/* ---- area de conteudo dentro da margem segura */
.tela{height:100vh;padding:7rem 6rem 3rem 13.5rem;overflow:hidden}
.tela.sem-menu{padding-left:6rem;padding-top:6rem}
.conteudo{height:100%;overflow:hidden;position:relative}
body.centro .conteudo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}
.cabecalho{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:baseline;-webkit-align-items:baseline;align-items:baseline;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1.5rem}
.pag-info{color:#8a8a92;font-size:1.25rem;line-height:1.75rem}   /* tv-caption */
.logo-texto{font-weight:800;letter-spacing:-.0625rem;line-height:1}
.logo-texto b{color:#f01f1f;font-weight:800}
.logo-texto span{color:#fff;font-weight:300;letter-spacing:0}

/* ---- botao (84px, 30/700, radius-lg 24) */
.btn{display:inline-block;min-height:5.25rem;padding:1.5rem 2rem;border-radius:1.5rem;border:0;background:#26262b;color:#fff;font:700 1.875rem/2.25rem "Open Sans","Segoe UI",sans-serif;white-space:nowrap;cursor:pointer;vertical-align:middle;-webkit-transition:-webkit-transform .12s ease-out;transition:transform .12s ease-out}
.btn.principal{background:#d81a1a;background:-webkit-linear-gradient(left,#d81a1a,#ff7a1a);background:linear-gradient(90deg,#d81a1a,#ff7a1a);color:#fff}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 .1875rem #34343a}
.btn.peq{min-height:3.5rem;padding:.75rem 1.5rem;font-size:1.5rem;line-height:2rem;border-radius:999px}
.btn:focus,.btn.foco{box-shadow:0 0 0 .3125rem #f01f1f,0 0 1.75rem .25rem rgba(255,122,26,.6);-webkit-transform:scale(1.04);transform:scale(1.04)}
.btn.ghost:focus,.btn.ghost.foco{background:#26262b}
.botoes{margin:1.5rem 0 0}
.botoes .btn{margin:0 1.5rem 1rem 0}
form{margin:0;display:inline}

/* ---- textos e metadados */
.sub{color:#b8b8be;font-size:1.625rem;line-height:2.375rem;max-width:48rem;margin:0 0 1.5rem}
.nota{color:#8a8a92;font-size:1.25rem;line-height:1.75rem;max-width:48rem}
.nota.fake{color:#ffb74d}
.aviso{background:rgba(216,26,26,.2);border:.125rem solid #d81a1a;border-radius:1rem;padding:1rem 1.5rem;display:inline-block;margin:0 0 1.5rem;font-size:1.5rem}
.meta{display:block;color:#b8b8be;font:600 1.5rem/2rem "Open Sans",sans-serif;margin:0 0 1rem}
.meta span{display:inline-block;margin:0 1rem .5rem 0;vertical-align:middle}
.meta .chip{padding:.25rem 1rem;border-radius:.5rem;background:#26262b;color:#fff}
.meta .chip.marca{background:#d81a1a;color:#fff;letter-spacing:.0625rem;font-weight:700}
.meta .bom{color:#3ccf6e}.meta .ruim{color:#ff8a80}
.kicker{display:block;color:#f01f1f;font:700 1.5rem/2rem "Open Sans",sans-serif;letter-spacing:.1875rem;text-transform:uppercase}
.descricao{color:#b8b8be;font:400 1.625rem/2.375rem "Open Sans",sans-serif;max-width:54rem;max-height:7.125rem;overflow:hidden;margin:1.5rem 0 0}

/* ---- heroi (640px) */
.hero{position:relative;height:34rem;margin:-3rem -6rem 2rem -2rem;overflow:hidden}
.hero-fundo,.hero-video{position:absolute;right:6rem;top:0;width:55rem;height:31rem;border-radius:1.5rem;background-size:cover;background-position:center top;box-shadow:0 1.5rem 4rem rgba(0,0,0,.6)}
.hero-video{object-fit:cover;opacity:0;-webkit-transition:opacity .6s;transition:opacity .6s}
.hero.com-video .hero-video{opacity:1}
.hero-sombra{position:absolute;left:0;top:0;width:100%;height:100%;background:-webkit-linear-gradient(left,#0b0b0c 24%,rgba(11,11,12,.9) 36%,rgba(11,11,12,0) 60%);background:linear-gradient(90deg,#0b0b0c 24%,rgba(11,11,12,.9) 36%,rgba(11,11,12,0) 60%)}
.hero-texto{position:absolute;left:2rem;top:4rem;width:62rem;z-index:1}
.hero-texto h1{font:800 4rem/4.5rem "Open Sans",sans-serif;letter-spacing:-.0625rem;margin:.5rem 0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-texto .descricao{max-width:47rem;max-height:7.125rem;margin:1.5rem 0 2rem}

/* ---- "assistindo agora" no heroi e nos cards */
.vivo{position:absolute;left:2rem;top:.5rem;z-index:2;color:#b8b8be;font:600 1.375rem/1.875rem "Open Sans",sans-serif}
.vivo i,.vivo-selo i{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:#e5242f;margin-right:.6rem;vertical-align:middle;box-shadow:0 0 .6rem #e5242f}
.vivo b{color:#fff;font-weight:800}
.vivo span{color:#8a8a92;margin-left:.5rem}
.card .selo.vivo-selo{background:rgba(11,11,12,.9);color:#fff;letter-spacing:0}

/* ---- Top 10 (numero grande a esquerda do cartao, como na Netflix) */
.top10 .top-item{display:inline-block;vertical-align:top;position:relative;padding-left:5.5rem;margin-right:1.5rem;white-space:normal}
.top10 .top-item .numero{position:absolute;left:0;bottom:4.75rem;font:800 11rem/1 "Open Sans",sans-serif;letter-spacing:-.5rem;color:#0b0b0c;-webkit-text-stroke:.2rem #8a8a92;text-shadow:0 0 0 #000}
.top10 .top-item .card{margin-right:0}
.top10 .card.foco ~ .numero,.top10 .top-item .card:focus + .numero{color:#f01f1f}
.top10 .top-item .card.foco .capa{box-shadow:0 0 0 .3125rem #f0251f,0 1rem 3rem rgba(0,0,0,.7)}

/* ---- fileiras e cartoes (384x216, gap 24) */
.fileira{margin:0 0 3rem}
.fileira h2{margin:0 0 1.5rem}
.fileira h2 .ver-todos{margin-left:1.5rem;color:#8a8a92;font:600 1.375rem/1.875rem "Open Sans",sans-serif;padding:.25rem 1rem;border-radius:999px;vertical-align:middle;letter-spacing:.0625rem;text-transform:uppercase}
.ver-todos:focus,.ver-todos.foco{color:#fff;background:#26262b;box-shadow:0 0 0 .3125rem #f01f1f}
.trilho-janela{overflow:hidden;margin:0 -6rem 0 -.75rem;padding:.75rem 6rem .75rem .75rem}
.trilho{white-space:nowrap;-webkit-transition:-webkit-transform .25s ease-out;transition:transform .25s ease-out}
.trilho .card,.trilho .card-ator{display:inline-block;vertical-align:top;white-space:normal}

.card{width:25.5rem;margin:0 1.5rem 0 0;display:block}
.trilho .card{margin-right:1.5rem}
.card .capa{display:block;position:relative;height:13.5rem;border-radius:1rem;overflow:hidden;background:#1c1c20;background:-webkit-linear-gradient(135deg,#26262b,#1c1c20 55%,#2a1e1a);background:linear-gradient(135deg,#26262b,#1c1c20 55%,#2a1e1a);-webkit-transition:-webkit-transform .12s ease-out;transition:transform .12s ease-out}
.card img,.card video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.card video{background:#000}
.card .dur{position:absolute;right:1rem;bottom:1rem;padding:.25rem .875rem;border-radius:999px;background:rgba(11,11,12,.9);font:600 1.375rem/1.875rem "Open Sans",sans-serif;z-index:1}
.card .selo{position:absolute;left:1rem;top:1rem;padding:.25rem .875rem;border-radius:.5rem;background:#d81a1a;color:#fff;font:700 1.25rem/1.75rem "Open Sans",sans-serif;letter-spacing:.0625rem;z-index:1}
.card .prog{position:absolute;left:0;right:0;bottom:0;height:.5rem;background:rgba(255,255,255,.2);z-index:1}
.card .prog span{display:block;height:100%;background:#f01f1f}
.card .titulo{display:block;margin:1rem 0 0;font:600 1.75rem/2.25rem "Open Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.card .subtitulo{display:block;color:#b8b8be;font:400 1.375rem/1.875rem "Open Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card:focus .capa,.card.foco .capa{box-shadow:0 0 0 .3125rem #f0251f,0 1rem 3rem rgba(0,0,0,.7);-webkit-transform:scale(1.06);transform:scale(1.06)}
.card:focus .titulo,.card.foco .titulo{color:#f01f1f}

/* grade: 4 por linha na margem segura */
.grade{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -.75rem}
.grade .card{width:25%;padding:0 .75rem;margin:0 0 1.5rem}
.grade .card .capa{height:auto;padding-top:56.25%}
.rodape{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding-top:1rem}

/* ---- atores */
.card-ator{width:14rem;margin-right:1.5rem;display:block;text-align:center}
.grade-atores{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -.75rem}
.grade-atores .card-ator{width:16.66%;padding:0 .75rem;margin:0 0 2rem}
.card-ator .foto{display:block;width:10.5rem;height:10.5rem;margin:0 auto;border-radius:50%;overflow:hidden;background:-webkit-linear-gradient(135deg,#26262b,#3a2119);background:linear-gradient(135deg,#26262b,#3a2119);box-shadow:inset 0 0 0 .1875rem #34343a;-webkit-transition:-webkit-transform .12s ease-out;transition:transform .12s ease-out}
.card-ator img{width:100%;height:100%;object-fit:cover}
.card-ator .sem-foto{display:block;line-height:10.5rem;color:#8a8a92;font-size:2.5rem}
.card-ator .nome{display:block;margin-top:1rem;font:600 1.625rem/2.125rem "Open Sans",sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-ator .sub{display:block;color:#b8b8be;font:400 1.375rem/1.875rem "Open Sans",sans-serif}
.card-ator:focus .foto,.card-ator.foco .foto{box-shadow:0 0 0 .3125rem #f01f1f,0 0 1.75rem .25rem rgba(255,122,26,.6);-webkit-transform:scale(1.08);transform:scale(1.08)}
.card-ator:focus .nome,.card-ator.foco .nome{color:#f01f1f}
.ator-topo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin:0 0 2rem}
.ator-foto{display:block;width:12rem;height:12rem;border-radius:50%;overflow:hidden;background:#1c1c20;margin-right:2.5rem;-webkit-flex-shrink:0;flex-shrink:0;box-shadow:inset 0 0 0 .1875rem #34343a}
.ator-foto img{width:100%;height:100%;object-fit:cover}
.elenco{display:-webkit-box;display:-webkit-flex;display:flex;margin:0 0 2rem}
.elenco a{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin-right:2rem;padding:.5rem .75rem .5rem .5rem;border-radius:999px}
.elenco a i{display:block;width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;margin-right:1rem;background:-webkit-linear-gradient(135deg,#26262b,#3a2119);background:linear-gradient(135deg,#26262b,#3a2119);box-shadow:inset 0 0 0 .1875rem #34343a}
.elenco a i img{width:100%;height:100%;object-fit:cover}
.elenco a b{display:block;font:600 1.75rem/2.25rem "Open Sans",sans-serif}
.elenco a span{display:block;color:#b8b8be;font:400 1.375rem/1.875rem "Open Sans",sans-serif}
.elenco a:focus,.elenco a.foco{background:#26262b;box-shadow:0 0 0 .3125rem #f01f1f}

/* ---- categorias */
.grade-categorias{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -.75rem}
.card-categoria{display:block;width:25%;padding:0 .75rem 1.5rem}
.card-categoria .caixa{display:block;background:#1c1c20;border-radius:1rem;padding:2rem 1.5rem;border:.0625rem solid #34343a}
.card-categoria .nome{display:block;font:700 1.875rem/2.25rem "Open Sans",sans-serif;text-transform:capitalize}
.card-categoria .sub{display:block;color:#b8b8be;font:400 1.375rem/1.875rem "Open Sans",sans-serif;margin-top:.25rem}
.card-categoria:focus .caixa,.card-categoria.foco .caixa{background:#26262b;box-shadow:0 0 0 .3125rem #f01f1f,0 0 1.75rem .25rem rgba(255,122,26,.6)}
.card-categoria:focus .nome,.card-categoria.foco .nome{color:#f01f1f}

/* ---- detalhe */
.detalhe{position:relative;min-height:27rem;margin:0 0 2rem}
.detalhe-capa{position:absolute;right:0;top:0;width:44rem;height:24.75rem;border-radius:1.5rem;overflow:hidden;background:#1c1c20;box-shadow:0 1.5rem 4rem rgba(0,0,0,.6)}
.detalhe-capa img{width:100%;height:100%;object-fit:cover}
.detalhe-info{width:52rem;padding-top:.5rem}
.detalhe-info h1{font:700 4rem/4.5rem "Open Sans",sans-serif;letter-spacing:-.0625rem;margin:.5rem 0 1.25rem}

/* ---- pareamento (2 colunas) */
.parear{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.parear-esq{width:52rem}
.parear-esq h1{margin:2.5rem 0 1rem;max-width:47rem}
.parear-esq p{color:#b8b8be;font:400 1.625rem/2.375rem "Open Sans",sans-serif;max-width:45rem;margin:0 0 2.5rem}
.passos{margin:0 0 3rem}
.passo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font:600 1.625rem/2.125rem "Open Sans",sans-serif;margin-bottom:1.25rem}
.passo b{-webkit-flex-shrink:0;flex-shrink:0;width:3.25rem;height:3.25rem;margin-right:1.25rem;border-radius:50%;background:#26262b;color:#f01f1f;text-align:center;line-height:3.25rem;font-size:1.5rem}
.passo span{color:#b8b8be;font-weight:400}
.painel{width:47.5rem;padding:3.5rem;border-radius:1.5rem;background:#141416;box-shadow:0 1.5rem 4rem rgba(0,0,0,.6);border:.0625rem solid #34343a;text-align:center}
.painel .rotulo{color:#8a8a92;font:600 1.375rem/1.875rem "Open Sans",sans-serif;letter-spacing:.1875rem;text-transform:uppercase}
.codigo{margin:1.25rem 0 .5rem;font:800 6rem/6.5rem "Open Sans",sans-serif;letter-spacing:.75rem;color:#fff}
.codigo em{color:#f01f1f;font-style:normal}
.painel .url{color:#b8b8be;font:600 1.75rem/2.25rem "Open Sans",sans-serif}
.painel .url b{color:#fff}
.parear-qr{margin:2.5rem auto 0;width:16.25rem;height:16.25rem;padding:1rem;border-radius:1rem;background:#fff}
.parear-qr svg{width:100%;height:100%;display:block}
.estado{margin-top:2rem;color:#8a8a92;font:400 1.375rem/1.875rem "Open Sans",sans-serif}
.estado b{color:#b8b8be}
.estado.ok{color:#3ccf6e}
.hero-central{text-align:center;max-width:70rem}
.logo-img{height:3.5rem;width:auto;margin:0 auto 2rem}

/* ---- conta (cards em grade 2 colunas) */
.conta-grade{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -1rem}
.conta-card{width:50%;padding:0 1rem 2rem}
.conta-card .caixa{padding:2rem;border-radius:1.5rem;background:#141416;border:.0625rem solid #34343a;height:100%}
.conta-card h2{margin:0 0 1.5rem;font-size:2rem;line-height:2.5rem}
.perfil{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin-bottom:1rem}
.perfil i{width:6.5rem;height:6.5rem;border-radius:50%;background:-webkit-linear-gradient(left,#d81a1a,#ff7a1a);background:linear-gradient(90deg,#d81a1a,#ff7a1a);color:#fff;font:800 2.75rem/6.5rem "Open Sans",sans-serif;font-style:normal;text-align:center;margin-right:1.5rem;-webkit-flex-shrink:0;flex-shrink:0}
.perfil b{display:block;font:700 2rem/2.5rem "Open Sans",sans-serif}
.perfil span{color:#b8b8be;font:400 1.5rem/2rem "Open Sans",sans-serif;word-break:break-all}
.plano{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:1.5rem;border-radius:1rem;background:#1c1c20;margin-bottom:1.5rem}
.plano b{display:block;font:700 1.75rem/2.25rem "Open Sans",sans-serif}
.plano span{color:#b8b8be;font:400 1.375rem/1.875rem "Open Sans",sans-serif}
.plano .tag{padding:.375rem 1rem;border-radius:.5rem;background:#d81a1a;color:#fff;font:700 1.25rem/1.75rem "Open Sans",sans-serif;letter-spacing:.0625rem}
.plano .tag.off{background:#34343a}
.lista{list-style:none;padding:0;margin:0}
.lista li{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:.875rem 1.5rem;border-radius:1rem;background:#1c1c20;font:600 1.625rem/2.125rem "Open Sans",sans-serif;margin-bottom:.75rem}
.lista li span.sub{color:#b8b8be;font-weight:400;font-size:1.375rem}
.lista li.esta{box-shadow:inset 0 0 0 .1875rem #f01f1f}
.lista li .ok{color:#3ccf6e;font-weight:700}

/* ---- player em tela cheia (sem Fullscreen API) */
body.player .tela{padding:0}
.player-area{position:fixed;left:0;top:0;width:100%;height:100%;background:#000;z-index:10}
.player-area video{width:100%;height:100%;background:#000;object-fit:contain}
.hud{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.hud.visivel{opacity:1}
.hud-topo{position:absolute;left:0;right:0;top:0;height:18.75rem;background:-webkit-linear-gradient(top,rgba(11,11,12,.7),rgba(11,11,12,0));background:linear-gradient(180deg,rgba(11,11,12,.7),rgba(11,11,12,0))}
.hud-base{position:absolute;left:0;right:0;bottom:0;height:26rem;background:-webkit-linear-gradient(bottom,rgba(11,11,12,.9),rgba(11,11,12,0));background:linear-gradient(0deg,rgba(11,11,12,.9),rgba(11,11,12,0))}
.hud-cabeca{position:absolute;left:6rem;right:6rem;top:4rem;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.hud-voltar{display:inline-block;width:4.5rem;height:4.5rem;border-radius:50%;background:#26262b;text-align:center;line-height:4.5rem;font-size:1.875rem;margin-right:1.5rem;vertical-align:middle}
.hud-titulo{display:inline-block;vertical-align:middle}
.hud-titulo b{display:block;font:700 2.75rem/3.25rem "Open Sans",sans-serif}
.hud-titulo span{display:block;color:#b8b8be;font:600 1.5rem/2rem "Open Sans",sans-serif}
.hud-logo img{height:1.75rem}
.hud-controles{position:absolute;left:6rem;right:6rem;bottom:6rem}
.hud-barra{position:relative;height:.75rem;border-radius:.5rem;background:rgba(255,255,255,.2);margin-bottom:1.25rem}
.hud-buf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:.5rem;background:rgba(255,255,255,.33)}
.hud-prog{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:.5rem;background:#f01f1f}
.hud-knob{position:absolute;left:0;top:50%;width:2.25rem;height:2.25rem;margin:-1.125rem 0 0 -1.125rem;border-radius:50%;background:#f01f1f;box-shadow:0 0 0 .3125rem #f01f1f,0 0 1.75rem .25rem rgba(255,122,26,.6)}
.hud-tempos{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;color:#b8b8be;font:600 1.5rem/2rem "Open Sans",sans-serif;margin-bottom:1.75rem}
.hud-tempos b{color:#fff}
.hud-botoes{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.ctl{position:relative;width:5.5rem;height:5.5rem;border-radius:50%;background:#26262b;text-align:center;line-height:5.5rem;font-size:2.125rem;color:#fff;margin-right:1.25rem}
.ctl small{position:absolute;left:0;right:0;top:3.4rem;font-size:1rem;line-height:1;font-weight:700}
.ctl.play{width:6.5rem;height:6.5rem;line-height:6.5rem;font-size:2.75rem;background:-webkit-linear-gradient(left,#d81a1a,#ff7a1a);background:linear-gradient(90deg,#d81a1a,#ff7a1a)}
.ctl.ativo{box-shadow:0 0 0 .3125rem #f01f1f,0 0 1.75rem .25rem rgba(255,122,26,.6)}
.hud-modo{margin-left:auto;display:inline-block;height:5.5rem;line-height:5.5rem;padding:0 2rem;border-radius:999px;background:#26262b;color:#b8b8be;font:600 1.5rem/5.5rem "Open Sans",sans-serif}
.player-msg{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:rgba(11,11,12,.92);border:.0625rem solid #34343a;border-radius:1.5rem;padding:2rem 3rem;font:400 1.75rem/2.5rem "Open Sans",sans-serif;text-align:center;max-width:70rem;z-index:2}
.player-msg .btn{margin-top:1.5rem}

/* ---- dica de teclas (tv-caption, ink-subtle) */
.dica{position:fixed;right:6rem;bottom:2.5rem;color:#8a8a92;font:400 1.25rem/1.75rem "Open Sans",sans-serif}
body.player .dica{display:none}