.sbop-on-page { color:#0b2852; background:#fff; }.on-hero { position:relative; overflow:hidden; padding:24px 0 70px; background:radial-gradient(circle at 85% 20%,rgba(181,137,236,.3),transparent 30%),linear-gradient(135deg,#fbf9ff,#f0e6ff); }.on-hero::after { position:absolute; right:-130px; bottom:-240px; width:440px; height:440px; content:""; border:1px solid rgba(126,79,199,.14); border-radius:50%; }.on-breadcrumb { position:relative; z-index:2; margin-bottom:47px; font-size:12px; font-weight:700; }.on-breadcrumb a { color:#7d55c6; text-decoration:none; }.on-kicker { display:block; margin-bottom:11px; color:#8653ce; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.on-hero h1 { margin:0 0 17px; font-size:clamp(48px,6vw,78px); font-weight:800; line-height:1; letter-spacing:-.065em; }.on-hero p { max-width:650px; margin:0; color:#5d6d81; font-size:15px; line-height:1.8; }.on-hero-actions { display:flex; margin-top:27px; align-items:center; gap:20px; flex-wrap:wrap; }.on-primary { display:inline-flex; min-height:50px; padding:12px 18px; align-items:center; gap:9px; color:#fff; font-size:13px; font-weight:800; text-decoration:none; background:linear-gradient(135deg,#9663dc,#7444bd); border-radius:12px; box-shadow:0 11px 24px rgba(112,64,189,.2); }.on-hero-actions > span { display:inline-flex; align-items:center; gap:8px; color:#51647b; font-size:12px; font-weight:700; }.on-hero-actions > span i { color:#8452cc; font-size:18px; }.on-banner { position:relative; overflow:hidden; padding:12px; background:#fff; border-radius:24px; box-shadow:0 20px 48px rgba(49,31,76,.16); transform:rotate(1.5deg); }.on-banner img { display:block; width:100%; height:310px; object-fit:cover; border-radius:16px; }.on-banner > span { position:absolute; right:24px; bottom:24px; display:inline-flex; padding:9px 12px; align-items:center; gap:7px; color:#fff; font-size:12px; font-weight:800; background:rgba(10,34,73,.86); border-radius:10px; backdrop-filter:blur(8px); }
.on-content { padding:72px 0 84px; }.on-featured { display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; margin-bottom:48px; color:#fff; background:linear-gradient(145deg,#9563db,#7545bf); border-radius:26px; box-shadow:0 22px 55px rgba(112,64,189,.2); }.on-featured-cover,.episode-cover { position:relative; display:block; width:100%; padding:0; overflow:hidden; background:#102f5e; border:0; }.on-featured-cover { min-height:410px; }.on-featured-cover::after,.episode-cover::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 40%,rgba(5,23,50,.48)); }.on-featured-cover img,.episode-cover img { width:100%; height:100%; object-fit:cover; }.on-play,.episode-cover > span { position:absolute; z-index:2; top:50%; left:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#a56fe6,#7545c0); border-radius:50%; box-shadow:0 13px 30px rgba(45,25,77,.35); transform:translate(-50%,-50%); transition:transform .2s ease; }.on-play { width:78px; height:78px; font-size:38px; }.on-featured-cover:hover .on-play,.episode-cover:hover > span { transform:translate(-50%,-50%) scale(1.08); }.on-featured-copy { display:flex; padding:47px; flex-direction:column; justify-content:center; }.on-label { color:#eadcff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.on-episode-number { width:fit-content; margin-top:13px; padding:6px 10px; font-size:12px; font-weight:800; background:rgba(255,255,255,.14); border-radius:8px; }.on-featured h2 { margin:13px 0 14px; font-size:clamp(29px,3.3vw,42px); font-weight:800; line-height:1.15; letter-spacing:-.045em; }.on-featured-copy > p { margin:0 0 20px; color:rgba(255,255,255,.78); font-size:14px; line-height:1.75; }.on-meta { display:flex; gap:18px; flex-wrap:wrap; }.on-meta span { display:inline-flex; align-items:center; gap:7px; font-size:12px; }.on-watch { display:inline-flex; width:fit-content; margin-top:25px; padding:11px 15px; align-items:center; gap:8px; color:#7545bd; font-size:13px; font-weight:800; background:#fff; border:0; border-radius:10px; }
.on-toolbar { display:flex; margin-bottom:42px; align-items:center; justify-content:space-between; gap:20px; }.on-search { position:relative; flex:1 1 390px; max-width:480px; }.on-search i { position:absolute; top:50%; left:17px; color:#8653ce; font-size:17px; transform:translateY(-50%); }.on-search input { width:100%; min-height:52px; padding:12px 16px 12px 46px; color:#173454; font-size:13px; background:#faf9fc; border:1px solid #e2ddea; border-radius:13px; outline:0; }.on-search input:focus { border-color:#996bd9; box-shadow:0 0 0 4px rgba(143,91,211,.1); }.on-filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.on-filters button { padding:10px 14px; color:#58677b; font-size:12px; font-weight:800; background:#fff; border:1px solid #e2ddea; border-radius:999px; }.on-filters button:hover,.on-filters button.active { color:#fff; background:#8150ca; border-color:#8150ca; }.on-heading { display:flex; margin-bottom:24px; align-items:flex-end; justify-content:space-between; gap:20px; }.on-heading span { color:#8553cd; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.on-heading h2 { margin:5px 0 0; font-size:32px; font-weight:800; letter-spacing:-.04em; }.on-heading > p { margin:0; color:#717c8d; font-size:12px; }
.episode-card { overflow:hidden; background:#fff; border:1px solid #e6e0ea; border-radius:20px; box-shadow:0 11px 28px rgba(28,42,79,.07); transition:transform .22s ease,box-shadow .22s ease; }.episode-card:hover { transform:translateY(-5px); box-shadow:0 18px 38px rgba(28,42,79,.12); }.episode-cover { height:225px; }.episode-cover > span { width:58px; height:58px; font-size:28px; }.episode-body { display:flex; min-height:215px; padding:23px; flex-direction:column; }.episode-body > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }.episode-body small { color:#8150ca; font-size:12px; font-weight:800; }.episode-body time { color:#778294; font-size:12px; }.episode-body h3 { margin:12px 0 9px; color:#102d55; font-size:17px; font-weight:800; line-height:1.4; }.episode-body p { margin:0 0 8px; color:#6b7789; font-size:12px; }.episode-link { display:inline-flex; width:fit-content; margin-top:auto; padding:8px 0 0; align-items:center; gap:7px; color:#7b4dc4; font-size:13px; font-weight:800; background:transparent; border:0; }.on-empty { padding:55px 20px; text-align:center; background:#faf8fd; border:1px solid #e6dfed; border-radius:20px; }.on-empty i { color:#8552cd; font-size:30px; }.on-empty h2 { margin:12px 0 7px; font-size:22px; font-weight:800; }.on-empty p { margin:0; color:#6b7789; font-size:13px; }
.on-player-modal .modal-content { overflow:hidden; color:#fff; background:#071d3d; border:0; border-radius:18px; box-shadow:0 25px 70px rgba(0,0,0,.35); }.on-player-modal .modal-header { padding:17px 20px; border-color:rgba(255,255,255,.12); }.on-player-modal .modal-title { font-size:17px; font-weight:800; }.on-player-modal .modal-body { padding:0; background:#000; }.on-player-modal iframe { width:100%; height:100%; border:0; }
@media (max-width:991.98px) { .on-banner { max-width:650px; margin:0; transform:none; }.on-featured { grid-template-columns:1fr; }.on-featured-cover { min-height:400px; }.on-toolbar { align-items:flex-start; flex-direction:column; }.on-search { width:100%; max-width:none; flex-basis:auto; }.on-filters { justify-content:flex-start; } }
@media (max-width:575.98px) { .on-hero { padding:20px 0 53px; }.on-breadcrumb { margin-bottom:35px; }.on-hero h1 { font-size:52px; }.on-hero p { font-size:14px; }.on-banner img { height:220px; }.on-content { padding:52px 0 66px; }.on-featured { border-radius:20px; }.on-featured-cover { min-height:280px; }.on-featured-copy { padding:30px 24px; }.on-featured h2 { font-size:28px; }.on-filters { flex-wrap:nowrap; width:100%; padding-bottom:5px; overflow-x:auto; }.on-filters button { flex:0 0 auto; }.on-heading { align-items:flex-start; flex-direction:column; gap:7px; }.episode-cover { height:230px; }.episode-body { min-height:0; }.on-player-modal .modal-dialog { margin:12px; } }

/* Mantém o logo central das capas livre e posiciona a ação no canto. */
.on-featured-cover .on-play,
.episode-cover > span {
  top: auto;
  right: 18px;
  bottom: 18px;
  left: auto;
  border: 3px solid rgba(255,255,255,.86);
  transform: none;
}
.on-featured-cover .on-play { right: 27px; bottom: 27px; width: 72px; height: 72px; font-size: 35px; }
.episode-cover > span { width: 54px; height: 54px; font-size: 26px; }
.on-featured-cover:hover .on-play,
.episode-cover:hover > span { transform: scale(1.08); }