/* ===== Polimento geral do layout ===== */
html{scroll-behavior:smooth}
#telaMenu{scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
.secao-conteudo{animation:aparece .35s ease both}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}}
.site-header.solido,.site-header:has(.busca-barra.aberta){background:rgba(20,20,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.hero-titulo{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero-grad{background:linear-gradient(to top,#141414 1%,rgba(20,20,20,.55) 30%,rgba(20,20,20,.1) 60%,rgba(20,20,20,.55)),linear-gradient(to right,rgba(20,20,20,.85),transparent 65%)}
.secao-titulo{letter-spacing:-.01em}
.faixa{gap:6px}
#secaoInicio{gap:32px}
.card-poster{border-radius:8px;border:1px solid rgba(255,255,255,.07)}
.card-titulo{letter-spacing:-.005em}
.btn-pagina{background:#1f1f1f;border:0;border-radius:8px;color:#bbb}
.btn-pagina:hover{background:#2b2b2b;color:#fff}
.btn-pagina.ativo{background:#fff;color:#000}
.paginacao-container{padding:28px 0 8px}
.input-pesquisa{border-radius:8px;background-color:#1f1f1f;border-color:#333}
.input-pesquisa:focus{border-color:#fff}

/* menu inferior rolável (9 abas) */
@media(max-width:1023px){
.nav-principal{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.nav-principal::-webkit-scrollbar{display:none}
.btn-aba{flex:1 0 66px;scroll-snap-align:center}}

/* modal com banner */
.modal-conteudo{--mp:18px;padding:0 var(--mp) calc(var(--mp) + var(--sb));border-radius:16px 16px 0 0;overflow-x:hidden}
@media(min-width:701px){.modal-conteudo{--mp:26px;border-radius:14px}}
.modal-banner{display:none;position:relative;height:190px;margin:0 calc(var(--mp)*-1);background:center/cover no-repeat}
.modal-banner.tem{display:block}
.modal-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(31,31,31,.15),var(--s1))}
.modal-corpo{padding-top:48px}
.modal-banner.tem+.modal-corpo{padding-top:0;margin-top:-56px;position:relative;z-index:1}
.modal-poster{box-shadow:0 10px 28px rgba(0,0,0,.55)}
.btn-fechar-modal{background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* rodapé */
.rodape-site{margin-top:24px;gap:16px;padding-top:36px}
.rodape-logo{height:28px;width:auto;opacity:.9}
.rodape-links a{padding:4px 2px}
.rodape-site p{max-width:60ch;line-height:1.5;opacity:.8}
</style>