/* =========================================================================
   AURA PLAYER · landing editorial "cara de cinema"
   Direção: quase-preto · serifa de display (DM Serif Display) + mono (Space Mono)
   Laranja #FF7A29 = único destaque · roxo #A855F7 = brilho de apoio
   Single file · sem frameworks · dark mode
   ========================================================================= */
:root{
  --ink:#08060B;          /* fundo quase-preto, levemente quente */
  --ink-2:#0E0B14;
  --surface:#15111D;
  --line:rgba(236,231,224,.12);
  --line-2:rgba(236,231,224,.20);
  --paper:#EFEAE2;        /* off-white quente (cor de papel/película) */
  --paper-dim:#C6BEB4;
  --mut:#8B8492;
  --dim:#5E586A;
  --orange:#FF7A29;
  --orange-lo:#FF9A56;
  --purple:#A855F7;
  --green:#7CE0A8;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--paper-dim);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
/* grão de película — textura sutil, sem gradiente lavado */
body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative; z-index:1}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.serif{font-family:"DM Serif Display",Georgia,serif; font-weight:400; letter-spacing:-.012em; color:var(--paper); line-height:1.02}
.serif .it{font-style:italic}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.kicker{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--mut)}
.kicker .o{color:var(--orange)}
.amp{color:var(--orange)}

/* reveal sutil ao rolar */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:"Manrope"; font-weight:700; font-size:15px;
  cursor:pointer; padding:15px 24px; border-radius:4px; border:none; white-space:nowrap; transition:transform .12s, background .2s, color .2s, border-color .2s}
.btn.primary{background:var(--orange); color:#1B0E03}
.btn.primary:hover{background:var(--orange-lo); transform:translateY(-2px)}
.btn.line{background:transparent; color:var(--paper); border:1px solid var(--line-2)}
.btn.line:hover{border-color:var(--paper); transform:translateY(-2px)}
.btn.lg{padding:18px 30px; font-size:16px}
.linkarrow{display:inline-flex; align-items:center; gap:9px; color:var(--paper); font-weight:600; font-size:15px}
.linkarrow .ar{color:var(--orange); transition:transform .2s}
.linkarrow:hover .ar{transform:translateX(4px)}

/* ---------- HEADER ---------- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(8,6,11,.72); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px}
.brand{display:flex; align-items:center; gap:12px}
.brand svg{width:34px; height:34px}
.brand .wm{font-family:"DM Serif Display",serif; font-size:22px; color:var(--paper); letter-spacing:.01em}
.brand .wm em{font-style:italic; color:var(--orange)}
.nav .links{display:flex; align-items:center; gap:34px}
.nav .links a.lnk{font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); transition:color .15s}
.nav .links a.lnk:hover{color:var(--paper)}
.nav-toggle{display:none}

/* ---------- HERO (cinemático full-bleed) ---------- */
.hero{position:relative; min-height:92vh; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; padding:118px 0 0}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% 36%;
  filter:brightness(.62) saturate(1.12) contrast(1.05); transform:scale(1.05); animation:heroZoom 34s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.hero-grade{position:absolute; inset:0;
  background:
    linear-gradient(102deg,#08060B 0%,rgba(8,6,11,.93) 24%,rgba(8,6,11,.46) 48%,rgba(8,6,11,.12) 72%,rgba(8,6,11,.5) 100%),
    linear-gradient(0deg,#08060B 3%,rgba(8,6,11,0) 48%),
    radial-gradient(60% 56% at 88% 14%,rgba(168,85,247,.2),transparent 70%),
    radial-gradient(52% 52% at 4% 98%,rgba(255,122,41,.15),transparent 70%)}
.hero-vig{position:absolute; inset:0; box-shadow:inset 0 0 200px 32px rgba(0,0,0,.6); pointer-events:none}
.hero-credit{position:absolute; right:28px; bottom:22px; z-index:2; font-size:10.5px; letter-spacing:.18em; color:rgba(236,231,224,.46)}
.hero-credit::first-letter{color:var(--orange)}

.hero-inner{position:relative; z-index:2; flex:1; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; align-content:center; width:100%; padding-bottom:44px}
.hero-content{max-width:600px}
.hero-content .kicker{display:inline-block; margin-bottom:20px}
.hero h1{font-family:"DM Serif Display",serif; font-size:clamp(44px,6.2vw,92px); line-height:.96; color:var(--paper); letter-spacing:-.022em; margin:0 0 24px; text-shadow:0 6px 44px rgba(0,0,0,.55)}
.hero h1 .it{font-style:italic}
.hero h1 .u{position:relative; white-space:nowrap; color:#fff}
.hero h1 .u::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:4px; border-radius:3px; background:var(--orange)}
.hero .sub{font-size:clamp(16px,1.4vw,19px); color:var(--paper-dim); max-width:486px; margin:0 0 30px}
.hero .sub strong{color:var(--paper); font-weight:700}
.hero .cta{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:22px}
.hero .free{display:inline-flex; align-items:center; gap:9px; font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.08em; color:var(--paper-dim)}
.hero .free .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green)}

/* tela do app flutuando sobre a cena */
.hero-card{position:relative; justify-self:end; width:100%; max-width:560px}
.hero-card .frame{box-shadow:-26px 56px 120px -40px #000, 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.06)}
.hero-chip{position:absolute; top:-13px; left:-13px; z-index:3; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:rgba(8,6,11,.84); backdrop-filter:blur(10px); border:1px solid var(--line-2); color:var(--paper);
  font-size:10.5px; letter-spacing:.16em; padding:8px 13px; border-radius:6px; box-shadow:0 16px 32px -16px #000}
.hero-chip .d{width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange)}

/* faixa de specs ancorada embaixo */
.hero-specs{position:relative; z-index:2; border-top:1px solid var(--line); background:rgba(8,6,11,.42)}
.hero-specs-row{display:flex; flex-wrap:wrap}
.hero-specs .sp{flex:1; min-width:158px; padding:17px 24px 17px 0; font-size:13.5px; color:var(--paper-dim); display:flex; align-items:center; gap:9px}
.hero-specs .sp::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--orange); flex:none; box-shadow:0 0 7px var(--orange)}
.hero-specs .sp + .sp{border-left:1px solid var(--line); padding-left:24px}
.hero-specs .sp b{color:var(--paper); font-weight:700}
.frame{position:relative; z-index:1; border-radius:14px; padding:10px; background:linear-gradient(180deg,#1A1622,#0C0A12);
  border:1px solid var(--line-2); box-shadow:0 80px 140px -50px #000, inset 0 1px 0 rgba(255,255,255,.06)}
.frame .screen{position:relative; border-radius:8px; overflow:hidden; background:#08060B; aspect-ratio:16/9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.frame .screen.wide{aspect-ratio:1386/640}
.frame .screen .vig{position:absolute; inset:0; z-index:5; pointer-events:none;
  box-shadow:inset 0 0 120px 10px rgba(0,0,0,.55); background:linear-gradient(105deg,rgba(255,255,255,.06),transparent 26%)}
.frame .screen img{width:100%; height:100%; object-fit:cover}

/* ---------- MARQUISE DE PÔSTERES (assinatura) ---------- */
.marquee{position:relative; padding:18px 0 8px; margin-top:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden}
.marquee .lbl{display:flex; justify-content:space-between; align-items:center; padding:0 32px 16px}
.marquee .lbl .l{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut)}
.marquee .lbl .l b{color:var(--paper)}
.marquee .lbl .r{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; color:var(--dim)}
.marquee .mask{position:relative}
.marquee .mask::before,.marquee .mask::after{content:""; position:absolute; top:0; bottom:0; width:140px; z-index:3; pointer-events:none}
.marquee .mask::before{left:0; background:linear-gradient(90deg,var(--ink),transparent)}
.marquee .mask::after{right:0; background:linear-gradient(270deg,var(--ink),transparent)}
.track{display:flex; gap:16px; width:max-content; animation:scrollx 48s linear infinite; padding:0 8px}
.marquee:hover .track{animation-play-state:paused}
@keyframes scrollx{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.pcard{position:relative; width:158px; aspect-ratio:2/3; border-radius:8px; overflow:hidden; flex:none;
  box-shadow:0 24px 40px -24px #000, inset 0 0 0 1px rgba(255,255,255,.06)}
.pcard::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.32))}
.pcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.pcard .pt{position:absolute; left:11px; right:11px; bottom:11px; z-index:2}
.pcard .pt .nm{font-family:"DM Serif Display",serif; color:#fff; font-size:15px; line-height:1.04; letter-spacing:-.01em}
.pcard .pt .mt{font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.08em; color:rgba(255,255,255,.72); margin-top:4px}
.pcard .star{position:absolute; top:10px; left:10px; z-index:2; font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.42); backdrop-filter:blur(4px); padding:3px 7px; border-radius:5px}

/* paletas de "pôster" — tons de cinema variados */
.g1{background:linear-gradient(155deg,#3A2350,#FF7A29)} .g2{background:linear-gradient(155deg,#0E2240,#2E7DDB)}
.g3{background:linear-gradient(155deg,#4A1730,#FF5BA0)} .g4{background:linear-gradient(155deg,#10302A,#23B083)}
.g5{background:linear-gradient(155deg,#2C1248,#A855F7)} .g6{background:linear-gradient(155deg,#40220F,#E0762B)}
.g7{background:linear-gradient(155deg,#101A3A,#5C6CC0)} .g8{background:linear-gradient(155deg,#3A0F18,#C23A3A)}
.g9{background:linear-gradient(155deg,#1C2A12,#7CA33A)} .g10{background:linear-gradient(155deg,#2A1636,#6A4BD6)}
.g11{background:linear-gradient(155deg,#402A0E,#D9A23A)} .g12{background:linear-gradient(155deg,#10232C,#2E8FA0)}

/* ---------- SEÇÕES ---------- */
section{padding:104px 0; position:relative}
.head{max-width:760px}
.head.center{margin:0 auto; text-align:center}
.head .kicker{display:inline-block; margin-bottom:20px}
.head h2{font-family:"DM Serif Display",serif; font-size:clamp(32px,4.6vw,62px); line-height:1.02; color:var(--paper); letter-spacing:-.02em; margin:0}
.head h2 .it{font-style:italic}
.head .lead{color:var(--mut); font-size:clamp(15px,1.3vw,18px); margin:20px 0 0; max-width:600px}
.head.center .lead{margin-left:auto; margin-right:auto}

/* ---------- CONFORMIDADE ---------- */
.compliance{padding:0}
.note{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; max-width:var(--maxw); margin:0 auto;
  padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.note .tag{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); padding-top:6px}
.note p{margin:0; font-family:"DM Serif Display",serif; font-style:normal; color:var(--paper); font-size:clamp(18px,1.8vw,24px); line-height:1.4; letter-spacing:-.01em}
.note p span{color:var(--mut)}

/* ---------- SHOWCASE ---------- */
.show .feature{display:grid; grid-template-columns:1fr 1.12fr; gap:80px; align-items:center; padding:64px 0; border-top:1px solid var(--line)}
.show .feature:first-of-type{border-top:none}
.show .feature.rev .ftxt{order:2} .show .feature.rev .fimg{order:1}
.idx{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.idx .num{font-family:"DM Serif Display",serif; font-size:34px; color:var(--orange); line-height:1}
.idx .lab{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut)}
.feature h3{font-family:"DM Serif Display",serif; font-size:clamp(26px,3vw,42px); line-height:1.05; color:var(--paper); letter-spacing:-.018em; margin:0 0 16px}
.feature h3 .it{font-style:italic}
.feature .body{font-size:clamp(15px,1.2vw,17px); color:var(--mut); margin:0 0 26px; max-width:440px}
.fpoints{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.fpoints li{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line); color:var(--paper-dim); font-size:14.5px}
.fpoints li:last-child{border-bottom:1px solid var(--line)}
.fpoints .ck{font-family:"Space Mono",monospace; font-size:11px; color:var(--orange); letter-spacing:.1em; flex:none}

/* ---------- RECURSOS ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); margin-top:14px}
.fcell{padding:38px 34px 38px 0; border-bottom:1px solid var(--line); position:relative}
.fcell:not(:nth-child(3n)){border-right:1px solid var(--line); padding-right:34px}
.fcell:nth-child(3n+2),.fcell:nth-child(3n){padding-left:34px}
.fcell .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px}
.fcell .top .no{font-family:"Space Mono",monospace; font-size:12px; color:var(--dim); letter-spacing:.1em}
.fcell .ico{color:var(--orange)}
.fcell h3{font-family:"DM Serif Display",serif; font-size:23px; color:var(--paper); margin:0 0 8px; letter-spacing:-.01em}
.fcell p{margin:0; color:var(--mut); font-size:14.5px}

/* ---------- PASSOS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); margin-top:14px}
.step{padding:42px 36px 42px 0; border-bottom:1px solid var(--line)}
.step:not(:last-child){border-right:1px solid var(--line)}
.step:nth-child(2),.step:nth-child(3){padding-left:36px}
.step .n{font-family:"DM Serif Display",serif; font-size:56px; color:var(--orange); line-height:1; margin-bottom:18px}
.step h3{font-family:"DM Serif Display",serif; font-size:24px; color:var(--paper); margin:0 0 8px; letter-spacing:-.01em}
.step p{margin:0; color:var(--mut); font-size:15px}
.step p a{color:var(--orange-lo); border-bottom:1px solid rgba(255,154,86,.4)}

/* ---------- CTA ---------- */
.cta-final{position:relative; overflow:hidden; border-top:1px solid var(--line)}
.cta-final .glow{position:absolute; left:50%; top:8%; transform:translateX(-50%); width:70%; height:120%; z-index:0;
  background:radial-gradient(closest-side, rgba(255,122,41,.22), transparent 70%); filter:blur(60px); pointer-events:none}
.cta-final .glow.p{left:24%; top:20%; width:46%; background:radial-gradient(closest-side, rgba(168,85,247,.2), transparent 70%)}
.cta-in{position:relative; z-index:1; text-align:center; max-width:760px; margin:0 auto}
.cta-in h2{font-family:"DM Serif Display",serif; font-size:clamp(36px,5.2vw,76px); line-height:1.0; color:var(--paper); letter-spacing:-.024em; margin:0 0 22px}
.cta-in h2 .it{font-style:italic; color:var(--orange)}
.cta-in p{color:var(--paper-dim); font-size:clamp(15px,1.3vw,18px); margin:0 auto 34px; max-width:480px}
.cta-in .mini{margin-top:20px; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.12em; color:var(--mut)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:64px 0 56px}
footer .ftop{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line)}
footer .fbrand .brand{margin-bottom:16px}
footer .fbrand p{margin:0; color:var(--dim); font-size:14px; max-width:300px}
footer .fcol h4{font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0 0 18px; font-weight:400}
footer .fcol a{display:block; color:var(--mut); font-size:14.5px; margin-bottom:12px; transition:color .15s}
footer .fcol a:hover{color:var(--paper)}
footer .fbot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:30px; color:var(--dim); font-size:13px}
footer .fbot .mono{font-size:11.5px; letter-spacing:.06em}

/* =========================================================================
   MOCKUPS DE TELA (puro CSS) — troque por prints reais quando quiser
   ========================================================================= */
.ui{position:absolute; inset:0; font-family:"Manrope"; color:#fff; overflow:hidden; container-type:inline-size}
.ui .poster{border-radius:6px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ui .poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.5))}
.ui .barline{height:6px; border-radius:6px; background:rgba(255,255,255,.16)}
.ui .topbar{display:flex; align-items:center; gap:10px; padding:5.5% 6% 3%}
.ui .topbar .tt{font-family:"DM Serif Display",serif; font-size:clamp(11px,2.6cqw,20px); color:#fff}
.ui .tabs{display:flex; gap:12px; margin-left:auto}
.ui .tab{font-family:"Space Mono",monospace; font-size:clamp(7px,1.4cqw,11px); letter-spacing:.08em; color:rgba(255,255,255,.55)}
.ui .tab.on{color:#fff; border-bottom:2px solid var(--orange); padding-bottom:3px}

/* HOME */
.m-home{background:#0A0810}
.m-home .feat{position:absolute; inset:0 0 44% 0; overflow:hidden}
.m-home .feat::before{content:""; position:absolute; inset:0; background:linear-gradient(110deg,#5A2A18,#9B3AA0 58%,#241646)}
.m-home .feat::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,8,16,.94) 0 34%,transparent 72%),linear-gradient(0deg,#0A0810,transparent 58%)}
.m-home .cap{position:absolute; left:6%; bottom:20%; z-index:2; max-width:48%}
.m-home .cap .ek{font-family:"Space Mono",monospace; font-size:clamp(6px,1.2cqw,10px); letter-spacing:.2em; color:var(--orange); text-transform:uppercase}
.m-home .cap .h{font-family:"DM Serif Display",serif; font-size:clamp(15px,3.8cqw,34px); line-height:.98; margin-top:5px}
.m-home .cap .meta{display:flex; gap:7px; margin-top:8px}
.m-home .cap .meta i{font-style:normal; font-family:"Space Mono",monospace; font-size:clamp(6px,1.2cqw,9px); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.24); padding:2px 6px; border-radius:4px}
.m-home .cap .play{margin-top:11px; display:inline-flex; align-items:center; gap:6px; background:var(--orange); color:#1B0E03; font-weight:800; font-size:clamp(7px,1.5cqw,12px); padding:7px 14px; border-radius:4px}
.m-home .rows{position:absolute; left:0; right:0; bottom:5%; padding:0 6%}
.m-home .rowttl{font-family:"Space Mono",monospace; font-size:clamp(6px,1.3cqw,10px); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 8px}
.m-home .strip{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2.6%}
.m-home .strip .poster{aspect-ratio:2/3}

/* CATÁLOGO */
.m-cat{background:#0A0810}
.m-cat .grid2{position:absolute; left:6%; right:6%; top:21%; bottom:6%; display:grid; grid-template-columns:repeat(4,1fr); gap:4%}
.m-cat .grid2 .poster{aspect-ratio:2/3}

/* DETALHE */
.m-det{background:#0A0810}
.m-det .bd{position:absolute; inset:0 0 28% 0; background:linear-gradient(150deg,#3C1840,#16386E)}
.m-det .bd::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,8,16,.92) 0 38%,transparent),linear-gradient(0deg,#0A0810,transparent 62%)}
.m-det .info{position:absolute; left:6%; bottom:8%; right:6%; z-index:2}
.m-det .ek{font-family:"Space Mono",monospace; font-size:clamp(6px,1.2cqw,10px); letter-spacing:.2em; color:var(--orange); text-transform:uppercase}
.m-det .h{font-family:"DM Serif Display",serif; font-size:clamp(16px,4.2cqw,38px); line-height:.98; margin:6px 0}
.m-det .rate{display:flex; align-items:center; gap:11px; margin:6px 0; font-family:"Space Mono",monospace; font-size:clamp(7px,1.4cqw,11px); color:rgba(255,255,255,.78)}
.m-det .rate b{color:var(--green)}
.m-det .lines{max-width:52%; margin-top:8px}
.m-det .lines .barline{margin:5px 0}
.m-det .acts{display:flex; gap:9px; margin-top:13px}
.m-det .acts span{display:inline-flex; align-items:center; gap:6px; font-size:clamp(7px,1.5cqw,12px); padding:8px 15px; border-radius:4px; font-weight:700}
.m-det .acts .b1{background:var(--orange); color:#1B0E03}
.m-det .acts .b2{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff}

/* TV AO VIVO */
.m-live{background:#0A0810; display:flex}
.m-live .side{width:34%; background:rgba(255,255,255,.025); border-right:1px solid rgba(255,255,255,.07); padding:5% 4%}
.m-live .ch{display:flex; align-items:center; gap:8px; padding:6px; border-radius:5px; margin-bottom:3px}
.m-live .ch.on{background:rgba(168,85,247,.16); box-shadow:inset 2px 0 0 var(--orange)}
.m-live .ch .lg{width:clamp(13px,5cqw,28px); aspect-ratio:1; border-radius:5px; flex:none}
.m-live .ch .nm{flex:1; min-width:0}
.m-live .ch .nm .barline{width:72%}
.m-live .main{flex:1; padding:5%; display:flex; flex-direction:column}
.m-live .now{aspect-ratio:16/9; border-radius:7px; position:relative; overflow:hidden; background:linear-gradient(150deg,#2B2C66,#0F3350)}
.m-live .now::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.m-live .now .liveb{position:absolute; top:7%; left:5%; z-index:2; display:inline-flex; align-items:center; gap:5px; font-family:"Space Mono",monospace;
  background:#E23; color:#fff; font-size:clamp(6px,1.2cqw,10px); font-weight:700; padding:3px 8px; border-radius:3px}
.m-live .now .nm{position:absolute; left:5%; bottom:8%; z-index:2; font-family:"DM Serif Display",serif; font-size:clamp(10px,2.6cqw,20px)}
.m-live .epg{margin-top:auto; padding-top:6%}
.m-live .epgrow{display:grid; grid-template-columns:26% 1fr; gap:9px; align-items:center; margin-bottom:7px}
.m-live .epgrow .seg{display:flex; gap:5px}
.m-live .epgrow .seg span{height:9px; border-radius:3px; background:rgba(255,255,255,.12)}
.m-live .epgrow .seg .a{flex:1.4; background:var(--orange)} .m-live .epgrow .seg .b{flex:2} .m-live .epgrow .seg .c{flex:1.2}

/* PERFIS */
.m-prof{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8%; background:radial-gradient(120% 90% at 50% 0%,#1E1130,#0A0810)}
.m-prof .ttl{font-family:"DM Serif Display",serif; font-size:clamp(14px,3.4cqw,28px); color:#fff}
.m-prof .row{display:flex; gap:8%}
.m-prof .who{display:flex; flex-direction:column; align-items:center; gap:10px}
.m-prof .who .av{width:clamp(38px,15cqw,88px); aspect-ratio:1; border-radius:18%}
.m-prof .who.a1 .av{background:linear-gradient(150deg,#FF7A29,#FF5BA0)}
.m-prof .who.a2 .av{background:linear-gradient(150deg,#A855F7,#6A4BD6)}
.m-prof .who.a3 .av{background:linear-gradient(150deg,#2E7DDB,#23B083)}
.m-prof .who.kid .av{background:linear-gradient(150deg,#FFC24B,#FF7A29); position:relative}
.m-prof .who.kid .av::after{content:"KIDS"; position:absolute; inset:auto 0 9% 0; text-align:center; font-family:"Space Mono",monospace; font-size:clamp(6px,1.3cqw,11px); font-weight:700; letter-spacing:1px; color:#1B0E03}
.m-prof .who .nm{font-family:"Space Mono",monospace; font-size:clamp(7px,1.5cqw,12px); color:rgba(255,255,255,.78)}
.m-prof .pin{display:flex; align-items:center; gap:6px; font-family:"Space Mono",monospace; font-size:clamp(6px,1.2cqw,10px); letter-spacing:.1em; color:var(--mut)}

/* PLAYER — vídeo real do Big Buck Bunny (Creative Commons) */
.m-play{background:#06040A}
.m-play video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#06040A; display:block}
.m-play .pl-grad{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.74),transparent 32%),linear-gradient(180deg,rgba(0,0,0,.5),transparent 26%)}
.m-play .title{position:absolute; left:6%; top:8%; z-index:2}
.m-play .title .h{font-family:"DM Serif Display",serif; font-size:clamp(10px,2.6cqw,21px); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.m-play .title .s{font-family:"Space Mono",monospace; font-size:clamp(6px,1.3cqw,10px); letter-spacing:.08em; color:rgba(255,255,255,.8); margin-top:3px}
.m-play .pl-toggle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; width:clamp(40px,13cqw,80px); aspect-ratio:1; border-radius:50%;
  background:rgba(8,6,11,.4); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.34); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:opacity .25s, transform .15s, background .2s, border-color .2s}
.m-play .pl-toggle:hover{transform:translate(-50%,-50%) scale(1.06); background:rgba(255,122,41,.92); border-color:transparent}
.m-play .pl-toggle svg{width:38%; height:38%; fill:#fff}
.m-play .pl-toggle .i-play{margin-left:10%}
.m-play.playing .pl-toggle{opacity:0}
.m-play.playing:hover .pl-toggle{opacity:1}
.m-play.playing .i-play{display:none}
.m-play:not(.playing) .i-pause{display:none}
.m-play .bar{position:absolute; left:6%; right:6%; bottom:10%; z-index:3}
.m-play .bar .track2{height:5px; border-radius:5px; background:rgba(255,255,255,.24); position:relative}
.m-play .bar .track2 span{position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:5px; background:var(--orange)}
.m-play .bar .track2 span::after{content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.m-play .bar .tt{display:flex; justify-content:space-between; margin-top:7px; font-family:"Space Mono",monospace; font-size:clamp(6px,1.2cqw,10px); color:rgba(255,255,255,.82)}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:980px){
  .hero-top{grid-template-columns:1fr; gap:30px; align-items:start; padding-bottom:40px}
  .hero .right{padding-bottom:0}
  .hero .sub{max-width:none}
  .stage{margin-top:46px}
  .show .feature{grid-template-columns:1fr; gap:34px; padding:48px 0}
  .show .feature.rev .ftxt{order:0} .show .feature.rev .fimg{order:0}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .fcell{padding:30px 26px 30px 0 !important}
  .fcell:nth-child(2n){border-right:none !important; padding-left:26px !important}
  .fcell:nth-child(2n+1){border-right:1px solid var(--line); padding-left:0 !important}
  .steps{grid-template-columns:1fr}
  .step{padding:30px 0 !important; border-right:none !important}
  footer .ftop{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:640px){
  .wrap{padding:0 22px}
  .nav .links{display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column; gap:0; align-items:flex-start;
    background:rgba(8,6,11,.97); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); padding:8px 22px 22px}
  .nav .links.open{display:flex}
  .nav .links a.lnk{padding:15px 0; width:100%; border-bottom:1px solid var(--line); font-size:14px}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:4px;
    background:transparent; border:1px solid var(--line-2); color:var(--paper); cursor:pointer}
  .nav-toggle svg{width:20px; height:20px}
  .hero{padding:48px 0 0}
  .hero .cta{gap:16px}
  .hero .cta .btn{flex:1; justify-content:center}
  .hero-specs .sp{flex:1 1 100%; padding:16px 0 !important; border-left:none !important}
  .hero-specs .sp + .sp{border-top:1px solid var(--line)}
  .feat-grid{grid-template-columns:1fr}
  .fcell{padding:28px 0 !important; border-right:none !important; padding-left:0 !important}
  .note{grid-template-columns:1fr; gap:14px}
  section{padding:72px 0}
  footer .ftop{grid-template-columns:1fr 1fr}
  .marquee .lbl{padding:0 22px 14px}
  .pcard{width:128px}
}
@media (min-width:1500px){ :root{--maxw:1340px} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; scroll-behavior:auto} .rv{opacity:1; transform:none} }

/* ===================== PÁGINAS LEGAIS (privacidade / exclusão) ===================== */
.legal{max-width:820px; margin:0 auto; padding:84px 32px 90px}
.legal .kicker{display:block; margin-bottom:16px}
.legal h1{font-family:"DM Serif Display",Georgia,serif; font-weight:400; color:var(--paper);
  font-size:clamp(36px,6.4vw,56px); line-height:1.04; letter-spacing:-.012em; margin:0 0 10px}
.legal .upd{font-family:"Space Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); margin:0 0 18px}
.legal .rule{height:1px; background:var(--line); margin:0 0 30px}
.legal h2{font-family:"DM Serif Display",Georgia,serif; font-weight:400; color:var(--paper);
  font-size:24px; line-height:1.2; margin:40px 0 10px}
.legal p,.legal li{color:var(--paper-dim); font-size:16.5px; line-height:1.8}
.legal p{margin:0 0 14px}
.legal strong{color:var(--paper); font-weight:700}
.legal em{color:var(--mut); font-style:italic}
.legal a{color:var(--orange)}
.legal a:hover{text-decoration:underline}
.legal ul{padding-left:4px; margin:8px 0 16px; list-style:none}
.legal li{position:relative; padding-left:26px; margin:9px 0}
.legal li::before{content:""; position:absolute; left:4px; top:.72em; width:7px; height:7px; border-radius:2px;
  background:var(--orange); transform:translateY(-50%)}
.legal .backline{margin-top:40px; padding-top:22px; border-top:1px solid var(--line)}
.legal .backline a{font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.04em}
@media (max-width:640px){ .legal{padding:60px 22px 70px} }

/* ===================== PÁGINA "MINHA LISTA" (mesmo padrão editorial) ===================== */
.lista{max-width:1000px; margin:0 auto; padding:70px 32px 90px}
.lista-head{margin:0 0 26px}
.lista-head .kicker{display:block; margin-bottom:12px}
.lista-head h1{font-family:"DM Serif Display",Georgia,serif; font-weight:400; color:var(--paper); font-size:clamp(30px,5vw,44px); line-height:1.05; margin:0; letter-spacing:-.01em}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:0 30px 70px -42px #000}
.panel + .panel{margin-top:18px}
.panel-h{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px}
.panel-h h2{margin:0; font-family:"DM Serif Display",Georgia,serif; font-weight:400; color:var(--paper); font-size:20px}

#loginPanel{max-width:460px; margin:0 auto; text-align:center}
.authlogo{width:60px; height:60px; margin:0 auto 16px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#1A1622,#0C0A12); border:1px solid var(--line-2)}
.authlogo svg{width:38px; height:38px}
#loginPanel h2{font-family:"DM Serif Display",Georgia,serif; font-weight:400; font-size:27px; color:var(--paper); margin:0 0 6px}
#loginPanel .muted{color:var(--mut); max-width:360px; margin:0 auto 18px; font-size:14.5px}
#loginPanel .body{text-align:left}

#mgr{display:grid; grid-template-columns:1.12fr .88fr; gap:18px; align-items:start}
#mgr .panel{margin-top:0}

label{display:block; font-family:"Space Mono",ui-monospace,monospace; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:16px 0 8px}
.ip{position:relative}
.ip .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.7; pointer-events:none}
input,select{width:100%; background:var(--ink-2); border:1px solid var(--line-2); color:var(--paper); border-radius:8px; padding:14px; font-size:16px; font-family:"Manrope",sans-serif; outline:none; transition:border-color .15s, box-shadow .15s}
.ip input{padding-left:42px}
input::placeholder{color:var(--dim)}
input:focus,select:focus{border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,122,41,.16)}
input[inputmode="numeric"]{letter-spacing:5px; font-weight:700}
#mac{letter-spacing:2px; font-weight:600}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.seg{display:flex; gap:5px; margin:4px 0 2px; background:var(--ink-2); padding:5px; border-radius:10px; border:1px solid var(--line)}
.seg button{flex:1; background:transparent; border:none; color:var(--mut); border-radius:6px; padding:11px 8px; font-family:"Space Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.05em; cursor:pointer; transition:.15s}
.seg button:hover{color:var(--paper)}
.seg button.on{background:var(--orange); color:#1B0E03}

.btn.full{width:100%; justify-content:center}

.msg{margin-top:14px; font-size:13.5px; font-weight:600; min-height:1px}
.msg.err{color:#FF6B6B} .msg.ok{color:var(--green)}
.hint{color:var(--dim); font-size:12.5px; margin-top:10px; line-height:1.5}
.devhint{display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px; background:rgba(255,122,41,.08); border:1px solid rgba(255,122,41,.22); border-radius:10px; color:var(--mut); font-size:12.5px; text-align:left}
.devhint b{color:var(--paper)}

#lists{margin-top:16px; display:grid; gap:12px}
.listitem{display:flex; align-items:center; gap:13px; position:relative; overflow:hidden; background:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:15px 16px}
.listitem::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line-2)}
.listitem.on::before{background:var(--orange)}
.listitem .tico{width:40px; height:40px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; background:rgba(255,122,41,.1); border:1px solid var(--line)}
.listitem .info{flex:1; min-width:0}
.listitem .nm{font-weight:700; color:var(--paper); display:flex; gap:8px; align-items:center}
.listitem .nm span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.listitem .meta{color:var(--dim); font-size:12px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.listitem .active{flex:none; font-family:"Space Mono",monospace; color:var(--green); font-size:9.5px; font-weight:700; letter-spacing:.1em; background:rgba(124,224,168,.12); border:1px solid rgba(124,224,168,.3); padding:3px 8px; border-radius:999px}
.listitem .acts{display:flex; gap:6px; flex:none}
.linkbtn{background:transparent; border:1px solid var(--line-2); color:var(--mut); cursor:pointer; font-size:12px; font-weight:600; padding:7px 11px; border-radius:7px; transition:.15s; font-family:"Manrope",sans-serif}
.linkbtn:hover{color:var(--paper); border-color:var(--paper)}
.linkbtn.danger:hover{color:#FF6B6B; border-color:rgba(255,107,107,.4)}
.muted{color:var(--mut); font-size:14px}
.hidden{display:none !important}

@media(max-width:780px){ #mgr{grid-template-columns:1fr} }
@media(max-width:640px){ .lista{padding:50px 20px 70px} .panel{padding:20px} .row2{grid-template-columns:1fr} }

/* ===== BAIXAR (download) ===== */
#baixar .dl-row{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px}
.dl-card{display:flex; align-items:center; gap:16px; padding:22px 24px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.02); text-decoration:none; transition:border-color .2s, transform .2s, background .2s}
a.dl-card:hover{border-color:var(--orange); transform:translateY(-2px); background:rgba(255,122,41,.05)}
.dl-card.soon{opacity:.62}
.dl-ico{flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:rgba(255,122,41,.12); color:var(--orange)}
.dl-card.soon .dl-ico{background:rgba(255,255,255,.06); color:var(--mut)}
.dl-tx{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.dl-tx b{font-size:16px; color:var(--paper); font-weight:700; letter-spacing:-.01em}
.dl-tx small{font-size:12.5px; color:var(--mut)}
.dl-arr{flex:none; font-size:20px; color:var(--orange); font-weight:700}
.dl-arr.soon-tag{font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:var(--mut); border:1px solid var(--line); padding:4px 8px; border-radius:6px; font-weight:400}
.dl-note{margin-top:18px; font-size:12px; color:var(--dim); letter-spacing:.02em}
@media(max-width:720px){ #baixar .dl-row{grid-template-columns:1fr} }