.hero{position:relative;height:clamp(380px,62dvh,620px);overflow:hidden;background:#000;flex-shrink:0;touch-action:pan-y}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.hero-slide.ativo{opacity:1;visibility:visible}
.hero-bg{position:absolute;inset:0;background:center 20%/cover no-repeat}
.hero-bg.blur{opacity:.45;background-position:center top}
.hero-bg.sem-img{background:linear-gradient(135deg,#3b1030,#0d1020 60%,#5a1a08)}
.hero-bg.canal-bg{overflow:hidden;background:radial-gradient(800px 480px at 82% 30%,rgba(224,18,63,.35),transparent 62%),radial-gradient(600px 420px at 95% 90%,rgba(255,143,31,.22),transparent 60%),var(--bg)}
.hero-bg.canal-bg::before{content:"";position:absolute;inset:-25%;background:var(--logo) center/50% auto no-repeat;filter:blur(50px) saturate(1.5);opacity:.3}
.hero-grad{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 3%,rgba(13,16,32,.5) 42%,rgba(13,16,32,.1)),linear-gradient(to right,rgba(13,16,32,.8),transparent 70%)}
.hero-conteudo{position:absolute;left:0;right:0;bottom:0;max-width:var(--mw);margin:0 auto;padding:0 var(--px) 52px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hero-texto{display:flex;flex-direction:column;gap:12px;max-width:min(100%,720px);min-width:0}
.hero-slide.ativo .hero-texto{animation:entra .5s both}
@keyframes entra{from{opacity:0;transform:translateY(12px)}}
.hero-tags{display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem;font-weight:700}
.tag-tipo{background:var(--grad);color:#fff;padding:.3em .8em;border-radius:99px}
.tag-tipo.live::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#fff;margin-right:.5em;animation:pisca 1.3s infinite}
@keyframes pisca{50%{opacity:.25}}
.tag-meta{background:rgba(255,255,255,.12);padding:.3em .7em;border-radius:99px}.tag-meta.nota{color:#ffc95c}
.hero-titulo{font-size:clamp(1.7rem,2.4vw + 1rem,3.4rem);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hero-sinopse{color:#cfd3e6;line-height:1.5;max-width:60ch;font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-botoes{display:flex;gap:10px;margin-top:6px}
.btn-hero-play,.btn-hero-info{height:46px;padding:0 24px;border-radius:12px;border:0;font-weight:700;font-size:.95rem;cursor:pointer;white-space:nowrap}
.btn-hero-play{background:var(--grad);color:#fff}
.btn-hero-info{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-hero-play:active,.btn-hero-info:active{transform:scale(.97)}
.hero-poster{display:none;width:clamp(140px,11vw,200px);aspect-ratio:2/3;border-radius:14px;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.hero-poster img{width:100%;height:100%;object-fit:cover}
.hero-poster.logo-canal{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:clamp(96px,12vw,200px);background:rgba(255,255,255,.08);border-radius:28px}
.hero-poster.logo-canal img{object-fit:contain;padding:14%}
.iniciais{font-size:1.7rem;font-weight:800}
.hero-slide.canal .hero-conteudo{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:14px;padding-bottom:112px}
.hero-dots{position:absolute;left:var(--px);bottom:20px;display:flex;gap:6px;z-index:5}
.hero-dot{position:relative;overflow:hidden;width:28px;height:4px;border-radius:2px;border:0;padding:0;background:rgba(255,255,255,.28);cursor:pointer}
.hero-dot.ativo::after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:left;animation:prog 7s linear forwards}
@keyframes prog{from{transform:scaleX(0)}}
.hero-rail{position:absolute;left:0;right:0;margin:0 auto;max-width:var(--mw);bottom:14px;z-index:5;display:none;gap:10px;overflow-x:auto;padding:6px var(--px);scrollbar-width:none}
.hero-rail::-webkit-scrollbar{display:none}.hero-rail.canal{display:flex}
.hero-thumb{flex:0 0 auto;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);border-radius:14px;opacity:.7;cursor:pointer;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .2s,border-color .2s}
.hero-thumb:hover{opacity:1}.hero-thumb.ativo{opacity:1;border-color:var(--or);transform:translateY(-3px)}
.hero-rail.midia .hero-thumb{width:44px;height:66px;overflow:hidden;border-radius:8px}
.hero-rail.midia .hero-thumb img{width:100%;height:100%;object-fit:cover}
.hero-rail.canal .hero-thumb{width:72px;flex-direction:column;gap:5px;padding:7px 4px 6px}
.thumb-img{width:40px;height:40px;border-radius:10px;background:rgba(0,0,0,.28);padding:5px;display:flex;align-items:center;justify-content:center}
.thumb-img img{width:100%;height:100%;object-fit:contain}
.thumb-nome{width:100%;font-size:.62rem;font-weight:600;text-align:center;color:#cfd3e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-seta{display:none;position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.3rem;cursor:pointer;z-index:5;align-items:center;justify-content:center}
.hero-seta:hover{background:var(--rd)}.hero-seta.esq{left:14px}.hero-seta.dir{right:14px}
@media(min-width:700px){.hero-seta{display:flex}.hero-conteudo{padding-bottom:72px}
.hero-slide.canal .hero-conteudo{flex-direction:row;align-items:flex-end;justify-content:space-between}}
@media(min-width:900px){.hero-poster{display:flex}.hero-dots{display:none}.hero-rail.midia{display:flex}.hero-conteudo{padding-bottom:96px}}