:root{
  --brand:#f2b705;
  --primary:#2951f2;
  --yt1:#ff0033;      /* trailer vermelho */
  --yt2:#b1001f;
  --bg:#0b0d12;
  --card:#16181f;
  --muted:#aeb7c3;
  --shadow:0 16px 40px rgba(0,0,0,.45);
}

/* Base / bg */
.spx{color:#edf1f7;background:var(--bg);min-height:100vh;position:relative}
.spx-bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60% 60% at 12% 0%, rgba(242,183,5,.14), transparent 60%),
  linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.9)),
  var(--bg);filter:blur(16px) saturate(1.05)}
.spx-wrap{width:min(1180px,92%);margin:0 auto 60px}

/* Header */
.spx-head{padding:32px 0 12px}
.spx-title{font-size:clamp(2rem,2.3rem + 1vw,3rem);font-weight:900;color:var(--brand)}
.spx-year{color:var(--muted);font-weight:700;margin-left:.35rem}
.spx-subtag{margin:.4rem 0 0;color:var(--muted);font-style:italic}

/* Layout: poster um pouco menor no desktop */
.spx-hero{
  display:grid;
  grid-template-columns: clamp(260px, 26vw, 300px) 1fr;
  gap:32px;
  align-items:start
}
.spx-poster .poster{display:block;width:100%;border-radius:18px;box-shadow:var(--shadow)}
@media (max-width:980px){ .spx-hero{grid-template-columns:1fr} }

/* Card */
.spx-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:var(--shadow);padding:18px 20px}
.spx-card h2{margin:0 0 10px;font-size:1.25rem;font-weight:900;color:var(--brand)}

/* IMDb */
.spx-imdb{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.spx-imdb .imdb-star svg{width:22px;height:22px;fill:#ffd54a;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.spx-imdb .imdb-num{font-weight:900;font-size:1.2rem}
.spx-imdb .imdb-label{opacity:.75;font-weight:800;border:1px solid rgba(255,255,255,.14);padding:4px 8px;border-radius:999px}

/* Facts grid */
.spx-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.spx-facts li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;font-weight:700}
.spx-facts b{color:var(--brand);margin-right:6px}

/* Abas (somem no desktop) */
.spx-tabs{display:flex;gap:8px;margin:14px 0 10px}
.spx-tab{flex:1;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;padding:12px 10px;font-weight:800}
.spx-tab.is-active{border-color:transparent;background:linear-gradient(135deg,var(--primary),#1e40af)}
.spx-pane{display:none}
@media (min-width:981px){ .spx-tabs{display:none} .spx-pane{display:block} }

/* Ads + placeholder */
.spx-ads{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; min-height:90px; margin:8px 0 14px;
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.spx-ads .ad-placeholder{
  width:100%; min-height:70px; border:2px dashed rgba(255,255,255,.18);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-weight:800; letter-spacing:.3px;
  background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.06), rgba(255,255,255,.03));
  background-size:200% 100%; animation:shimmer 2.2s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Botões */
.spx-btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:none;border-radius:12px;padding:14px 18px;font-weight:900}
.spx-btn--primary{color:#fff;background:linear-gradient(135deg,var(--primary),#1e40af);box-shadow:0 14px 30px rgba(41,81,242,.35)}

/* Trailer estilo YouTube (igual ao primary em formato; sem ícones) */
.spx-ctas .spf-trailer-btn,
.spx-ctas--side .spf-trailer-btn{
  width:100%;border-radius:12px!important;font-weight:900!important;
  padding:14px 18px!important;
  background:linear-gradient(135deg, var(--yt1), var(--yt2))!important;
  color:#fff!important;border:none!important;
  box-shadow:0 14px 30px rgba(255,0,51,.35)!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
  text-align:center!important;
}
.spx-ctas .spf-trailer-btn:before,
.spx-ctas--side .spf-trailer-btn:before{ content:none!important; }
.spf-trailer-btn svg, .spf-trailer-btn i{ display:none!important; }

/* CTAs containers */
.spx-ctas{display:flex;flex-direction:column;gap:12px}        /* mobile */
.spx-ctas--side{display:none;flex-direction:column;gap:12px}  /* desktop */
@media (min-width:981px){
  .spx-ctas{display:none}
  .spx-ctas--side{display:flex}
}

/* Comentários */
.spx-comments{margin-top:22px}
.spx-comments-title{text-align:center;margin:0 0 14px;font-size:1.5rem;font-weight:900;color:var(--brand)}

/* Modal */
.spx-modal{position:fixed;inset:0;z-index:70;display:none}
.spx-modal[aria-hidden="false"]{display:block}
.spx-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.spx-modal__dialog{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(560px,92%);max-height:80vh;overflow:auto;background:var(--card);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:var(--shadow)
}
.spx-modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.spx-modal__head h3{margin:0;font-size:1.3rem;font-weight:900}
.spx-modal__close{border:none;background:transparent;color:#fff;font-size:1.2rem}
.spx-modal__body{padding:16px 18px}
.spx-watchlist{display:flex;flex-wrap:wrap;gap:10px}
.spx-watchlist a.spf-btn{flex:1 1 220px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;padding:12px 14px;border-radius:12px;font-weight:800}
.spx-watchlist a.spf-btn:hover{background:rgba(255,255,255,.14)}

/* Idade badge */
.age{display:inline-flex;width:26px;height:26px;border-radius:999px;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#111}
.age-L{background:#66ff66}
.age-10{background:#e5ff00}
.age-12{background:#ffe680}
.age-14{background:#ffb84d}
.age-16{background:#ff6b6b;color:#fff}
.age-18{background:#b91c1c;color:#fff}