:root { --red:#e50914; --bg:#0b0b0b; --ink:#e5e5e5; --muted:#b9c0ca; --gold:#f5c518; }

* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; background:#111; color:#eee; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }

.site-header { background:#141414; border-bottom:1px solid #222; position: sticky; top:0; z-index: 10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; }
.brand img { display:block; }
.main-nav a { margin-left:16px; color:#ddd; font-weight:600; }
.main-nav a:hover { color:#fff; }

.hero { padding:32px 0 8px; }
h1 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin:0 0 8px; }
h2 { font-size: 1.05rem; margin: 0 0 6px; color:#fff; }
.muted { color: var(--muted); }

/* === Cards da Home (LCP com <img>) === */
.grid-cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:14px; margin: 16px 0 28px; }
.card { background:#181818; border:1px solid #222; border-radius:14px; overflow:hidden; }
.card-link { display:block; padding:14px; }
.grid-cards .card .card-img {
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:12px; margin:-14px -14px 12px; border-bottom:1px solid #222;
}
.grid-cards .card .card-img.ph { background:linear-gradient(180deg,#2a2a2a,#151515); }

/* Badge (avaliação) */
.badge { display:inline-block; background:#141414; border:1px solid rgba(245,197,24,.4); color:var(--gold); border-radius:999px; padding:4px 10px; font-size:.85rem; font-weight:600; }

/* Listas */
.list-header { padding:18px 0 8px; }
.toplist { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.topitem { background:#181818; border:1px solid #222; border-radius:14px; overflow:hidden; }
.topitem .card-link { display:flex; gap:12px; align-items:flex-start; padding:10px; color:#fff; }
.topitem img { flex:0 0 auto; border-radius:8px; }
.topitem .meta { display:flex; flex-direction:column; gap:6px; }

/* Destaque em vermelho para nomes */
.topitem .meta h2,
.title-meta h1 { color: #af1920; }

/* Página de título */
.title-hero { background:#101010 center/cover no-repeat; }
.title-hero-overlay { display:flex; gap:16px; align-items:flex-end; padding:16px; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.85)); }
.title-hero .poster { box-shadow: 0 10px 24px rgba(0,0,0,.4); border-radius:12px; }
.title-meta h1 { margin:0 0 6px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.year { color: var(--muted); font-weight:400; }

/* FAQ */
.faq { margin: 24px 0; }
.faq-item { background:#171717; border:1px solid #222; border-radius:12px; padding:12px; margin-bottom:10px; }

/* Footer */
.site-footer { background:#141414; border-top:1px solid #222; margin-top:32px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; flex-wrap:wrap; }
.footer-nav a { margin-left:14px; color:#ddd; }
.footer-nav a:hover { color:#fff; }

/* Ads placeholder */
.ad { width:100%; min-height:120px; display:block; background:#151515; border:1px dashed #2a2a2a; border-radius:12px; margin:14px 0; }

/* === Hover moderno (sem underline), leve lift + realce === */
.card, .topitem { will-change: transform; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card:hover, .topitem:hover { transform: translateY(-2px); border-color:#2a2a2a; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.card-link:hover, .topitem .card-link:hover { text-decoration:none; }
.card:hover .card-img { filter: saturate(1.06) brightness(1.03); transition: filter .18s ease; }
.topitem:hover img { filter: brightness(1.06) saturate(1.08); transition: filter .18s ease; }

/* === Veja também === */
.see-also { margin:22px 0 6px; }
.see-also h2 { margin:0 0 10px; }
.see-also-grid { list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.see-also-grid a { display:block; padding:10px 12px; background:#181818; border:1px solid #242424; border-radius:10px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.see-also-grid a:hover { text-decoration:none; transform:translateY(-1px); border-color:#2a2a2a; box-shadow:0 6px 16px rgba(0,0,0,.22); }

/* Acessibilidade: foco visível nos links de card */
.card-link:focus-visible, .topitem .card-link:focus-visible, .see-also-grid a:focus-visible {
  outline:2px solid var(--red); outline-offset:2px; border-radius:10px;
}
/* Renderização eficiente fora da tela */
.card { content-visibility: auto; contain-intrinsic-size: 180px 320px; }