:root{
  --bg:#000;
  --card:#141414;
  --text:#fff;
  --muted:#b3b3b3;
  --line: rgba(255,255,255,.08);
  --accent:#e50914;

  --topbar-h: 80px;
  --hero-h: 520px;
}

html,body{
  background:var(--bg);
  color:var(--text);
  height:100%;
  margin:0;
}

a{ color:inherit; text-decoration:none; }
.container{ max-width:1200px; }

body{ overflow:hidden; }

.topbar{
  position:sticky; top:0; z-index:9999;
  background:rgba(0,0,0,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}

.brand{
  font-weight:900;
  letter-spacing:.6px;
  color:var(--accent);
  font-size:20px;
}

.search-input{
  background:#0f0f0f !important;
  border:1px solid var(--line) !important;
  color:#fff !important;
}
.search-input::placeholder{ color:#888; }

.hero{
  min-height: var(--hero-h);
  display:flex;
  align-items:flex-end;
  padding:60px 0 30px 0;
  background-size:cover;
  background-position:center;
  position:sticky;
  top: var(--topbar-h);
  z-index:9998;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.85) 100%),
    linear-gradient(0deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,0) 55%);
}

.hero .inner{ position:relative; max-width:780px; }
.hero .title{ font-size:42px; font-weight:900; line-height:1.05; }
.hero .desc{ color:var(--muted); margin-top:10px; }

.badge-soft{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid var(--line);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.badge-live{
  background:rgba(229,9,20,.22);
  border:1px solid rgba(229,9,20,.35);
}

.btn-red{
  background:var(--accent);
  border:0;
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
}
.btn-ghost{
  background:rgba(255,255,255,.14);
  border:1px solid var(--line);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
}

.catalog-scroll{
  height: calc(100vh - var(--topbar-h) - var(--hero-h));
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 16px;
}

.row-title{
  font-size:18px;
  font-weight:900;
  margin:22px 0 12px;
}
.row-actions a{ color:var(--muted); font-size:12px; }
.row-actions a:hover{ color:#fff; }

/* ✅ Carrossel mais “premium” */
.carousel{
  position:relative;
  display:flex;
  gap:16px;
  overflow:auto;
  padding: 6px 16px 18px 16px;  /* respiro lateral */
  scroll-snap-type:x mandatory;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;

  scrollbar-width: none; /* Firefox */
}
.carousel::-webkit-scrollbar{ height:0; } /* Chrome */

/* fade nas laterais (estilo Netflix) */
.carousel:before,
.carousel:after{
  content:"";
  position:sticky;
  top:0;
  width:42px;
  height:100%;
  flex:0 0 auto;
  pointer-events:none;
  z-index:5;
}
.carousel:before{
  left:0;
  background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.carousel:after{
  right:0;
  background: linear-gradient(270deg, rgba(0,0,0,.85), rgba(0,0,0,0));
}

/* ✅ cards maiores e legíveis */
.vcard{
  position:relative;
  flex:0 0 auto;
  width: clamp(200px, 20vw, 270px);
  scroll-snap-align:center;
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}

.vcard:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,.62);
}

.vthumb{
  width:100%;
  background:#1f1f1f;
  background-size:cover;
  background-position:center;
  aspect-ratio: 16 / 9;
}

.vmeta{ padding:14px 14px 16px; }

.vtitle{
  font-size:14px;
  font-weight:900;
  line-height:1.15;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;

  min-height: 56px;
}

.vsmall{
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
}

.preview{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.12) 100%);
  opacity:0;
  transform: translateY(10px);
  transition: opacity .15s ease, transform .15s ease;
}
.vcard:hover .preview{
  opacity:1;
  transform: translateY(0);
}

.preview .p-title{ font-size:12px; font-weight:900; margin-bottom:6px; }
.preview .p-sub{ color:var(--muted); font-size:12px; line-height:1.2; }
.preview .p-actions{ display:flex; gap:8px; margin-top:10px; }

.p-play{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent);
  border:0;
  color:#fff;
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}
.p-more{
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid var(--line);
  color:#fff;
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}

/* hero video */
.hero .hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  transition: opacity .18s ease;
}
.hero.is-preview .hero-video{ opacity:1; }

.hero .hero-video #heroPlayer{
  width:100%;
  height:100%;
}

/* ✅ Overlay Play */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

.hero-playbtn{
  width:88px;
  height:88px;
  border-radius:999px;
  border:0;
  background: rgba(229,9,20,.92);
  color:#fff;
  font-weight:900;
  font-size:34px;
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
  cursor:pointer;
}

.hero-playtext{
  font-weight:900;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
}

/* foco estilo Netflix */
.vcard:focus{ outline:none !important; }
.vcard:focus{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,.62);
}
.vcard:focus .preview{
  opacity:1;
  transform: translateY(0);
}

/* mobile: cards grandes e fáceis */
@media (max-width: 768px){
  :root{ --hero-h: 520px; }
  .vcard{ width: 260px; }
  .hero .title{ font-size:34px; }
}