/* ============================================================================
   "APP VIVO" — demo interativa em DOM (recria a UI do app + animações).
   Usa os tokens do landing.css (--line-2, --mut, --paper). Escala por container-query (cqw).
   ============================================================================ */
/* Portável: define os próprios tokens (não depende do landing.css). Pra reusar em outra página,
   basta: as fontes (Manrope/DM Serif/Space Mono), este CSS, a pasta shots/ e o <section>+<script>. */
.livedemo{padding:46px 0 20px; --line-2:rgba(236,231,224,.2); --mut:#8B8492; --paper:#EFEAE2}
.app-device{position:relative; margin:30px auto 0; max-width:1040px; border-radius:20px; padding:11px;
  background:linear-gradient(180deg,#1A1622,#0B0912); border:1px solid var(--line-2);
  box-shadow:0 60px 130px -54px #000, 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06)}
.app-device::before{content:""; position:absolute; inset:-12% -8%; z-index:-1; border-radius:40px;
  background:radial-gradient(60% 60% at 50% 35%, rgba(168,85,247,.22), transparent 70%); filter:blur(14px)}
.app-screen{position:relative; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:#0E0719;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.app-screen::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:40;
  background:radial-gradient(130% 100% at 50% 38%, transparent 62%, rgba(0,0,0,.4))}

.appstage{position:absolute; inset:0; container-type:size; font-family:"Manrope",sans-serif; color:#EDE7F5}
.ap-top{position:absolute; top:0; left:0; right:0; height:9%; display:flex; align-items:center; justify-content:space-between; padding:0 3.2%; z-index:20}
.ap-logo{font-weight:800; font-size:2.7cqw; letter-spacing:-.01em}
.ap-logo b{color:#FF7A29}
.ap-meta{font-size:1.9cqw; color:#9A8FB0; font-weight:600}

.ap-scene{position:absolute; inset:0; opacity:0; transform:scale(1.03); transition:opacity .55s ease, transform .55s ease; pointer-events:none}
.appstage[data-scene="home"]   .ap-home,
.appstage[data-scene="grid"]   .ap-grid,
.appstage[data-scene="live"]   .ap-live,
.appstage[data-scene="detail"] .ap-detail,
.appstage[data-scene="player"] .ap-player{opacity:1; transform:none}

/* HOME — flex column que SEMPRE cabe na tela 16:9 (featured cresce; fileira+dock altura fixa) */
.ap-home{display:flex; flex-direction:column; padding:9.6cqh 3.2cqw 3.6cqh; gap:1.9cqh}
/* top bar (extras) */
.ap-sub{color:#9A8FB0; font-weight:600; font-size:.66em}
.ap-meta{display:flex; align-items:center; gap:1.5cqw}
.ap-meta .clk{font-size:2.3cqw; color:#fff; font-weight:800}
.ap-wx{display:flex; align-items:center; gap:.7cqw; font-size:1.5cqw; color:#C6BEB4; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.6cqw 1.3cqw; border-radius:3cqw}
.ap-wx i{color:#8B8492; font-style:normal; font-size:.85em}

/* CONTINUE DE ONDE PAROU (card horizontal + Retomar) */
.ap-resume{flex:none; display:flex; align-items:center; gap:2cqw; height:25cqh; padding:1.5cqw; border-radius:1.6cqw;
  background:linear-gradient(90deg, rgba(168,85,247,.16), rgba(168,85,247,.04)); border:1px solid rgba(255,255,255,.1)}
.ap-resume .thumb{height:100%; aspect-ratio:5/3; border-radius:1.1cqw; overflow:hidden; flex:none; border:1px solid rgba(255,255,255,.1)}
.ap-resume .thumb img{width:100%; height:100%; object-fit:cover}
.ap-resume .info{flex:1; min-width:0}
.ap-resume .info .lab{font-size:1.4cqw; letter-spacing:.18em; color:#FF7A29; font-weight:800}
.ap-resume .info .ti{font-size:2.8cqw; font-weight:800; margin:.45em 0 .8em; line-height:1}
.ap-resume .info .pb{height:.6cqw; border-radius:1cqw; background:rgba(255,255,255,.2); overflow:hidden; max-width:84%}
.ap-resume .info .pb i{display:block; height:100%; width:34%; background:#FF7A29; border-radius:1cqw}
.ap-resume-btn{flex:none; font-size:1.95cqw; font-weight:800; color:#EDE7F5; padding:1.5cqw 2.8cqw; border-radius:1cqw;
  border:1px solid rgba(255,122,41,.7); background:rgba(255,122,41,.12)}

.ap-rowlab{flex:none; font-size:1.5cqw; letter-spacing:.16em; color:#9A8FB0; font-weight:800; margin:0}

/* CONTINUAR ASSISTINDO — cards em PAISAGEM com selo + título */
.ap-cont{flex:none; display:flex; gap:1.6cqw}
.ccard{flex:1; min-width:0}
.ccard .th{position:relative; aspect-ratio:16/9; border-radius:1.2cqw; overflow:hidden; border:1px solid rgba(255,255,255,.09)}
.ccard .th img{width:100%; height:100%; object-fit:cover}
.ccard .bd{position:absolute; top:.8cqw; left:.8cqw; font-size:1.05cqw; font-weight:800; color:#1B0E03; background:#FF7A29; padding:.35cqw .9cqw; border-radius:.6cqw; letter-spacing:.02em}
.ccard .nm{font-size:1.45cqw; color:#EDE7F5; font-weight:600; margin-top:.9cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.ap-dock{margin-top:auto}
.ap-tile.t-live{background:linear-gradient(180deg, rgba(255,122,41,.2), rgba(255,46,46,.06)); border-color:rgba(255,122,41,.18)}
.ap-poster{aspect-ratio:2/3; border-radius:1cqw; overflow:hidden; position:relative; transition:transform .4s ease; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ap-poster img{width:100%; height:100%; object-fit:cover}

/* DOCK — em fluxo (não absoluto) no fim da coluna */
.ap-dock{flex:none; display:flex; gap:1.4cqw; height:16cqh; z-index:15}
.ap-tile{flex:1; border-radius:1.2cqw; padding:0 1.6cqw; overflow:hidden;
  background:linear-gradient(180deg, rgba(168,85,247,.16), rgba(168,85,247,.05)); border:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; justify-content:center; gap:.4cqh}
.ap-tile .i{font-size:3cqw; line-height:1}
.ap-tile .l{font-size:1.7cqw; font-weight:800; line-height:1.1}
.ap-tile .s{font-size:1.25cqw; color:#9A8FB0; line-height:1}

/* GRID (Filmes) — sidebar de categorias + grade com título/ano */
.ap-grid{padding:9.5cqh 3.2cqw 4cqh; display:flex; gap:2.4cqw}
.ap-side{flex:0 0 23cqw; display:flex; flex-direction:column; gap:1.3cqh}
.si{position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:1cqw;
  padding:1.5cqw 1.6cqw; font-size:1.7cqw; font-weight:700; color:#C6BEB4}
.si small{display:block; font-size:1.2cqw; color:#8B8492; font-weight:500; margin-top:.35cqw}
.si.on{background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.32); color:#EDE7F5; padding-left:2.4cqw}
.si.on::before{content:""; position:absolute; left:.9cqw; top:1.4cqw; bottom:1.4cqw; width:.4cqw; border-radius:1cqw; background:#A855F7}
.ap-gwrap{flex:1; min-width:0; overflow:hidden}
.ap-grid .g{display:grid; grid-template-columns:repeat(5,1fr); gap:1.4cqw}
.gp{opacity:0; transform:translateY(2cqw) scale(.97); transition:transform .5s ease, opacity .5s ease}
.gp .t{font-size:1.35cqw; color:#EDE7F5; font-weight:600; margin-top:.8cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gp .y{font-size:1.2cqw; color:#8B8492; margin-top:.15cqw}
.appstage[data-scene="grid"] .gp{opacity:1; transform:none}
.appstage[data-scene="grid"] .gp:nth-child(2){transition-delay:.05s}
.appstage[data-scene="grid"] .gp:nth-child(3){transition-delay:.1s}
.appstage[data-scene="grid"] .gp:nth-child(4){transition-delay:.15s}
.appstage[data-scene="grid"] .gp:nth-child(5){transition-delay:.2s}
.appstage[data-scene="grid"] .gp:nth-child(6){transition-delay:.25s}
.appstage[data-scene="grid"] .gp:nth-child(7){transition-delay:.3s}

/* DETALHE — com backdrop cinematográfico, progresso, botões e elenco (como o app) */
.ap-detail{padding:0}
.ap-bg{position:absolute; inset:0; z-index:0}
.ap-bg img{width:100%; height:100%; object-fit:cover}
.ap-bg-g{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,5,12,.97) 28%, rgba(8,5,12,.55) 62%, rgba(8,5,12,.25)),
            linear-gradient(0deg, rgba(8,5,12,.9), transparent 55%)}
.ap-dwrap{position:absolute; inset:0; z-index:2; display:flex; gap:3cqw; align-items:center; padding:9.5cqh 3.6cqw 6cqh}
.ap-dwrap .p{flex:0 0 19cqw; aspect-ratio:2/3; border-radius:1.4cqw; overflow:hidden;
  box-shadow:0 24px 56px -18px #000, 0 0 0 1px rgba(255,255,255,.1)}
.ap-dwrap .p img{width:100%; height:100%; object-fit:cover}
.ap-dwrap .d{flex:1; min-width:0}
.ap-dwrap .d h3{font-size:4.4cqw; font-weight:800; margin:0 0 .9cqw; line-height:1}
.ap-dwrap .d .m{font-size:1.75cqw; color:#C6BEB4; margin-bottom:1.7cqw}
.ap-dwrap .d .m b{color:#FF7A29}
.ap-prog{display:flex; align-items:center; gap:1.4cqw; margin-bottom:2.1cqw; max-width:52cqw}
.ap-prog .pb{flex:1; height:.65cqw; border-radius:1cqw; background:rgba(255,255,255,.22); overflow:hidden}
.ap-prog .pb i{display:block; height:100%; width:22%; background:#FF7A29; border-radius:1cqw}
.ap-prog .tm{font-size:1.35cqw; color:#9A8FB0; font-weight:600; white-space:nowrap}
.ap-detail .btns{display:flex; gap:1.2cqw; flex-wrap:wrap; margin-bottom:2.1cqw}
.ap-pill{font-size:1.6cqw; font-weight:800; padding:1.3cqw 2.1cqw; border-radius:1cqw;
  border:1px solid rgba(255,255,255,.14); color:#EDE7F5; background:rgba(255,255,255,.05)}
.ap-pill.on{background:#FF7A29; color:#1B0E03; border-color:#FF7A29}
.ap-dwrap .d p{font-size:1.65cqw; color:#C6BEB4; line-height:1.5; margin:0 0 2cqw; max-width:56cqw;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ap-cast{display:flex; gap:2.2cqw}
.cav{display:flex; flex-direction:column; align-items:center; gap:.7cqw; width:8.5cqw}
.cav .c{width:5.6cqw; height:5.6cqw; border-radius:50%; background:linear-gradient(135deg,#2a1d3f,#3a2a52);
  border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.9cqw; color:#C6BEB4}
.cav span{font-size:1.15cqw; color:#9A8FB0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

/* PLAYER */
.ap-player{background:#000}
.ap-player>img{width:100%; height:100%; object-fit:cover; opacity:.92}
.ap-player .np{position:absolute; left:3.6%; right:3.6%; bottom:7%; z-index:6}
.ap-player .np .t{font-size:2.4cqw; font-weight:800; display:flex; align-items:center; gap:1.2cqw}
.ap-player .np .dot{width:1.4cqw; height:1.4cqw; border-radius:50%; background:#FF5E5E; box-shadow:0 0 2cqw #FF5E5E; animation:appPulse 1.4s infinite}
.ap-player .pbar{margin-top:1.6cqw; height:.8cqw; border-radius:1cqw; background:rgba(255,255,255,.2); overflow:hidden}
.ap-player .pbar i{display:block; height:100%; width:8%; background:#FF7A29; border-radius:1cqw}
.appstage[data-scene="player"] .ap-player .pbar i{animation:appProg 9s linear forwards}
.ap-play{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:6;
  width:9cqw; height:9cqw; border-radius:50%; background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:3.4cqw; opacity:0}
.appstage[data-scene="player"] .ap-play{animation:appFade 2.6s ease forwards}

/* anel de FOCO (controle remoto) */
.ap-focus{position:absolute; z-index:18; border:.45cqw solid #FF7A29; border-radius:1.3cqw; pointer-events:none;
  box-shadow:0 0 0 .3cqw rgba(255,122,41,.25), 0 0 6cqw rgba(255,122,41,.4);
  opacity:0; transition:top .45s cubic-bezier(.4,1.2,.4,1), left .45s cubic-bezier(.4,1.2,.4,1), width .45s, height .45s, opacity .3s}
.ap-focus.show{opacity:1}

/* legenda + controles do tour */
.demo-foot{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; flex-wrap:wrap}
.demo-cap{font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.demo-cap b{color:var(--paper)}
.demo-dots{display:flex; gap:8px}
.demo-dots span{width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:.3s; cursor:pointer}
.demo-dots span.on{background:#FF7A29; width:22px; border-radius:4px}
.demo-pp{background:transparent; border:1px solid var(--line-2); color:var(--paper); border-radius:6px; cursor:pointer;
  font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.06em; padding:9px 15px}
.demo-pp:hover{border-color:var(--paper)}

@keyframes appPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes appProg{from{width:8%}to{width:96%}}
@keyframes appFade{0%{opacity:1}72%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ap-scene{transition:none} .ap-focus{transition:none}
  .appstage[data-scene="player"] .ap-player .pbar i{animation:none; width:60%}
}

/* TV AO VIVO — sidebar + lista de canais + preview "No Ar" + EPG (Agora / A seguir) */
.ap-live{padding:9.5cqh 3.2cqw 4cqh; display:flex; gap:2cqw}
.ap-live .ap-side{flex:0 0 21cqw}
.ap-chans{flex:0 0 31cqw; display:flex; flex-direction:column; gap:1.2cqh; min-width:0}
.chan{display:flex; align-items:center; gap:1.2cqw; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:1cqw; padding:.9cqw 1.1cqw}
.chan.on{border-color:#FF7A29; background:rgba(255,122,41,.08)}
.chan .logo{width:5.4cqw; height:3.6cqw; border-radius:.6cqw; overflow:hidden; flex:none; background:#0E0719; border:1px solid rgba(255,255,255,.08)}
.chan .logo img{width:100%; height:100%; object-fit:cover}
.chan .cn{flex:1; min-width:0; font-size:1.5cqw; font-weight:600; color:#EDE7F5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chan .dot{width:.9cqw; height:.9cqw; border-radius:50%; background:#FF7A29; flex:none; box-shadow:0 0 1.4cqw #FF7A29; animation:appPulse 1.6s infinite}
.ap-prev{flex:1; min-width:0; display:flex; flex-direction:column; gap:1.5cqh}
.ap-prev .pv{position:relative; aspect-ratio:16/9; border-radius:1.2cqw; overflow:hidden; border:1px solid rgba(255,255,255,.1)}
.ap-prev .pv img{width:100%; height:100%; object-fit:cover}
.ap-prev .pv .live{position:absolute; left:1cqw; bottom:1cqw; font-size:1.2cqw; font-weight:800;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.16); padding:.55cqw 1.1cqw; border-radius:.7cqw; color:#EDE7F5}
.ap-prev .pv .live b{color:#FF5E5E}
.ap-epg{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:1.2cqw; padding:1.3cqw 1.6cqw}
.ap-epg .now{display:flex; align-items:center; gap:1.4cqw; margin-bottom:1cqw}
.ap-epg .now .tag{font-size:1.05cqw; font-weight:800; letter-spacing:.12em; color:#1B0E03; background:#FF7A29; padding:.35cqw .8cqw; border-radius:.5cqw; flex:none}
.ap-epg .now .pg{flex:1; min-width:0}
.ap-epg .now .pn{font-size:1.7cqw; font-weight:700; color:#EDE7F5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ap-epg .now .pt{font-size:1.2cqw; color:#8B8492}
.ap-epg .now .pb{flex:0 0 13cqw; height:.5cqw; border-radius:1cqw; background:rgba(255,255,255,.18); overflow:hidden}
.ap-epg .now .pb i{display:block; height:100%; width:46%; background:#FF7A29}
.ap-epg .ep{display:flex; align-items:center; gap:1.4cqw; padding:.7cqw 0; border-top:1px solid rgba(255,255,255,.07)}
.ap-epg .ep .tm{font-size:1.3cqw; font-weight:700; color:#FF9A56; flex:none; width:7cqw}
.ap-epg .ep .en{font-size:1.4cqw; color:#C6BEB4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}