[hidden]{ display:none !important }
/* Identidade Bods & Co.: azul-noite + dourado, Baskervville nos títulos e Manrope no texto. */
:root{ --bg:#011422; --panel:#06222F; --panel2:#0B2B3A; --line:#14303F; --ink:#F5F4F3; --muted:#9AA7AF; --gold:#B9915B; --gold2:#D9BC8C; --gold3:#8A6A3E; --ok:#7FB89A; --radius:10px;
  --gold-rgb:185,145,91; --hi-rgb:245,232,210; --gold-hi:#C9A16B; --on-gold:#011422; --title2:#E3CFA9;
  --display:"Baskervville",Georgia,serif; --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 var(--sans); -webkit-font-smoothing:antialiased }
a{ color:inherit } svg{ width:18px; height:18px; flex:none }
.muted{ color:var(--muted) } .center{ text-align:center; padding:60px 16px }

/* barra do topo (transparente sobre o banner) */
.bar{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:34px; padding:14px clamp(16px,4vw,56px);
  background:linear-gradient(180deg, rgba(11,11,13,.85), rgba(11,11,13,0)); transition:background .25s }
.bar.solid, body[data-page=aula] .bar, body[data-page=conta] .bar{ background:rgba(11,11,13,.96); backdrop-filter:blur(8px); border-bottom:1px solid #1d1d22 }
.brand img{ height:42px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) }
.nav{ display:flex; gap:22px; font-size:14px } .nav a{ text-decoration:none; color:rgba(255,255,255,.7) } .nav a:hover, .nav a.on{ color:#fff } .nav a.on{ font-weight:600 }
.logout{ margin-left:auto } .bell-wrap:not([hidden]) + .logout{ margin-left:0 }
.link{ background:none; border:0; color:rgba(255,255,255,.7); cursor:pointer; font:inherit; font-size:14px; padding:0 } .link:hover{ color:#fff }
main{ min-height:100vh }

/* banner principal */
.hero{ position:relative; min-height:clamp(440px, 78vh, 760px); display:flex; align-items:flex-end; background:#0b0b0d right 20% / cover no-repeat }
.hero-sm{ min-height:clamp(340px, 54vh, 520px) }
.hero-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,13,.96) 0%, rgba(11,11,13,.82) 32%, rgba(11,11,13,.25) 62%, rgba(11,11,13,.1) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(11,11,13,0) 38%) }
.hero-in{ position:relative; padding:0 clamp(16px,4vw,56px) clamp(36px,7vh,72px); max-width:min(640px, 100%) }
.hero-hi{ margin:0 0 6px; color:var(--gold2); font-weight:600; letter-spacing:.02em }
.hero h1{ font-family:var(--display); font-weight:600; font-size:clamp(34px, 5.4vw, 64px); line-height:1.02; letter-spacing:.005em; text-transform:uppercase; margin:0 0 14px;
  background:linear-gradient(180deg,#fff 30%,var(--title2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-desc{ color:rgba(255,255,255,.78); font-size:clamp(14px,1.4vw,16.5px); margin:0 0 22px; max-width:520px }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap } .hero-next{ margin:14px 0 0; font-size:13.5px; color:rgba(255,255,255,.65) } .hero-next b{ color:#fff; font-weight:600 }
.hero-prog{ display:flex; align-items:center; gap:12px; margin-top:18px; font-size:12.5px; color:rgba(255,255,255,.6); max-width:360px } .hero-prog .pbar{ flex:1 }
.crumb{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:rgba(255,255,255,.7); text-decoration:none; margin-bottom:14px } .crumb:hover{ color:#fff } .crumb svg{ width:14px; height:14px }

/* botões */
.btn-gold, .btn-glass, .btn-done{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:8px; font:inherit; font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:0; white-space:nowrap }
.btn-gold{ background:linear-gradient(180deg,var(--gold2),var(--gold) 50%,var(--gold3)); color:var(--on-gold); box-shadow:0 8px 24px rgba(var(--gold-rgb),.25) } .btn-gold:hover{ filter:brightness(1.08) }
.btn-glass{ background:rgba(255,255,255,.12); color:#fff; backdrop-filter:blur(6px) } .btn-glass:hover{ background:rgba(255,255,255,.2) }
.btn-done{ background:var(--panel2); color:#fff; border:1px solid var(--line) } .btn-done svg{ opacity:.35 } .btn-done.on{ background:rgba(60,207,122,.14); border-color:rgba(60,207,122,.45); color:#8ef0b5 } .btn-done.on svg{ opacity:1 }
.sm{ padding:10px 16px; font-size:14px }
.btn-gold svg, .btn-glass svg{ width:17px; height:17px }

/* fileiras */
.rows{ position:relative; z-index:2; margin-top:-28px; padding-bottom:70px }
.row{ margin:0 0 34px }
.row-head{ display:flex; align-items:baseline; gap:14px; padding:0 clamp(16px,4vw,56px); margin-bottom:12px }
.row-head h2{ margin:0; font-size:clamp(17px,1.6vw,21px); font-weight:600; letter-spacing:-.01em }
.mod-n{ font-family:var(--display); text-transform:uppercase; color:var(--gold); font-weight:500; letter-spacing:.06em; margin-right:6px }
.row-link{ display:inline-flex; align-items:center; gap:3px; font-size:13px; color:var(--gold2); text-decoration:none; opacity:.85 } .row-link:hover{ opacity:1 } .row-link svg{ width:14px; height:14px }
.row-count{ font-size:12.5px; color:var(--muted) }
.rail-wrap{ position:relative }
.rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 clamp(16px,4vw,56px); padding:6px clamp(16px,4vw,56px) 14px; scrollbar-width:none }
.rail::-webkit-scrollbar{ display:none }
.rail > *{ scroll-snap-align:start; flex:none }
.rail-btn{ position:absolute; top:6px; bottom:14px; z-index:3; width:clamp(16px,4vw,56px); border:0; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s }
.rail-btn svg{ width:30px; height:30px } .rail-btn.prev{ left:0; background:linear-gradient(90deg, rgba(11,11,13,.9), rgba(11,11,13,0)) } .rail-btn.next{ right:0; background:linear-gradient(270deg, rgba(11,11,13,.9), rgba(11,11,13,0)) }
.rail-wrap:hover .rail-btn{ opacity:1 } .rail-wrap.at-start .prev, .rail-wrap.at-end .next{ opacity:0 !important; pointer-events:none }
@media (hover:none){ .rail-btn{ display:none } }

/* capa vertical do módulo (estilo Netflix/Cademi) */
.poster{ position:relative; width:clamp(150px, 15vw, 210px); aspect-ratio:2/3; border-radius:var(--radius); overflow:hidden; text-decoration:none; background:var(--panel2);
  transition:transform .25s, box-shadow .25s; box-shadow:0 6px 18px rgba(0,0,0,.35) }
.poster:hover{ transform:scale(1.05); box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--gold-rgb),.5); z-index:2 }
.poster-img{ position:absolute; inset:0; background:#1b1612 center / cover no-repeat; filter:saturate(.85) contrast(1.05); transition:transform .4s }
.poster:hover .poster-img{ transform:scale(1.06) }
.poster-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.92) 100%) }
.poster-txt{ position:absolute; left:12px; right:12px; bottom:14px; display:flex; flex-direction:column; gap:3px }
.poster-txt small{ font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); border-left:2px solid var(--gold); padding-left:7px }
.poster-txt b{ font-family:var(--display); font-weight:500; font-size:clamp(17px,1.5vw,21px); line-height:1.08; text-transform:uppercase; color:#fff }
.poster-txt span{ font-size:11.5px; color:rgba(255,255,255,.6) }
.poster-corner{ position:absolute; right:0; bottom:0; border-style:solid; border-width:0 0 18px 18px; border-color:transparent transparent var(--gold) transparent }
.poster-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.15) } .poster-bar i{ display:block; height:100%; background:var(--gold) }
.poster.locked .poster-img{ filter:grayscale(.6) brightness(.55) } .poster.locked .poster-corner{ display:none }
.poster-lock{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; color:var(--gold2) }
.poster-lock svg{ width:15px; height:15px }

/* card horizontal de aula */
.thumb-card{ width:clamp(230px, 22vw, 300px); text-decoration:none; display:block }
.thumb-img{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#1b1612 center / cover no-repeat; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .25s, box-shadow .25s }
.thumb-card:hover .thumb-img{ transform:scale(1.04); box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--gold-rgb),.5) }
.thumb-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%) }
.thumb-play{ position:absolute; inset:0; margin:auto; z-index:1; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.55); border:1.5px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transform:scale(.85); transition:.2s }
.thumb-play svg{ width:18px; height:18px; margin-left:2px }
.thumb-card:hover .thumb-play{ opacity:1; transform:none; background:var(--gold); border-color:var(--gold); color:var(--on-gold) }
.thumb-n{ position:absolute; left:10px; bottom:8px; z-index:1; font-family:var(--display); font-size:26px; font-weight:600; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6) }
.thumb-done{ position:absolute; top:8px; right:8px; z-index:1; width:24px; height:24px; border-radius:50%; background:var(--ok); color:#06210f; display:flex; align-items:center; justify-content:center }
.thumb-done svg{ width:14px; height:14px }
.thumb-txt{ padding:9px 2px 0; display:flex; flex-direction:column; gap:1px }
.thumb-txt small{ font-size:11.5px; color:var(--gold2); text-transform:uppercase; letter-spacing:.05em }
.thumb-txt b{ font-size:14px; font-weight:500; line-height:1.3 } .thumb-txt span{ font-size:12px; color:var(--muted) }
.thumb-card.locked .thumb-img{ filter:grayscale(.7) brightness(.5) } .thumb-card.locked .thumb-play{ opacity:1; background:rgba(0,0,0,.6) } .thumb-card.locked{ cursor:default }
.thumb-card.done .thumb-txt b{ color:rgba(255,255,255,.75) }
.pbar{ height:4px; background:rgba(255,255,255,.15); border-radius:4px; overflow:hidden } .pbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold3),var(--gold2)) }
.empty{ padding:10px clamp(16px,4vw,56px); color:var(--muted) }

/* página da aula: player + conteúdo do curso ao lado */
.lesson{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; max-width:1500px; margin:0 auto; padding:88px clamp(16px,3vw,40px) 60px }
.player{ position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5) }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.noplayer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted) }
.lesson-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin:20px 0 6px; flex-wrap:wrap }
.lesson-head h1{ margin:2px 0 0; font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.015em }
.kicker{ font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-size:13px }
.lesson-actions{ display:flex; gap:10px; flex-wrap:wrap }
.lesson-desc{ margin-top:16px; color:rgba(255,255,255,.78); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px }
.sub-h{ font-size:15px; font-weight:600; margin:26px 0 10px }
.materials{ display:flex; flex-direction:column; gap:8px }
.materials a{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none }
.materials a:hover{ border-color:rgba(var(--gold-rgb),.5) } .materials a svg{ color:var(--gold) } .materials a span{ flex:1 } .materials em{ font-style:normal; font-size:12.5px; color:var(--gold2) }
.next-card{ display:flex; align-items:center; gap:16px; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; max-width:520px }
.next-card:hover{ border-color:rgba(var(--gold-rgb),.5) } .next-card .thumb-img{ width:180px; flex:none } .next-card .thumb-play{ opacity:1 }
.next-card small{ display:block; font-size:12px; color:var(--gold2); text-transform:uppercase; letter-spacing:.05em } .next-card b{ font-weight:500 }
.lesson-side{ position:sticky; top:84px; align-self:start; max-height:calc(100vh - 100px); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 0 }
.lesson-side h3{ margin:0 16px 10px; font-size:15px }
.side-mod{ border-top:1px solid var(--line) }
.side-mod summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; font-size:14px; font-weight:600 }
.side-mod summary::-webkit-details-marker{ display:none } .side-mod summary small{ display:block; font-family:var(--display); font-weight:500; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold) }
.side-mod summary em{ font-style:normal; font-weight:400; font-size:12px; color:var(--muted) }
.side-les{ display:flex; align-items:center; gap:10px; padding:9px 16px 9px 18px; font-size:13.5px; text-decoration:none; color:rgba(255,255,255,.82) }
.side-les:hover{ background:var(--panel2) } .side-les.on{ background:rgba(var(--gold-rgb),.12); color:#fff; box-shadow:inset 3px 0 0 var(--gold) }
.side-les i{ width:20px; height:20px; flex:none; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center }
.side-les i svg{ width:12px; height:12px } .side-les.done i{ background:var(--ok); border-color:var(--ok); color:#06210f }
.side-les span{ flex:1; min-width:0 } .side-les em{ font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap }
.side-les.off{ color:var(--muted) } .side-les.off i{ border:0; color:var(--muted) }
@media (max-width:980px){ .lesson{ grid-template-columns:1fr; padding-top:76px } .lesson-side{ position:static; max-height:none } }

/* minha conta e páginas simples */
.page{ max-width:980px; margin:0 auto; padding:96px clamp(16px,4vw,40px) 60px }
.page h1{ font-size:26px; margin:0 0 18px } h2{ font-size:19px; margin:28px 0 12px }
.btn{ background:linear-gradient(180deg,var(--gold2),var(--gold) 50%,var(--gold3)); color:var(--on-gold); border:0; border-radius:8px; padding:12px 18px; font-weight:600; cursor:pointer; text-decoration:none; font-size:15px; display:inline-block }
.btn:disabled{ opacity:.6 }
label{ display:block; font-size:13px; color:var(--muted); margin:12px 0 } input{ width:100%; margin-top:4px; padding:12px; border-radius:8px; border:1px solid #33333d; background:#101014; color:var(--ink); font:inherit }
.msg{ padding:12px; border-radius:8px; background:var(--panel2); font-size:14px; margin-top:14px } .msg.err{ background:#3a1515; color:#ffb3b3 }
table{ width:100%; border-collapse:collapse; font-size:14px } td,th{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line) } th{ color:var(--muted); font-weight:600 }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; overflow-x:auto }

@media (max-width:760px){
  .bar{ gap:16px } .brand img{ height:34px } .nav{ gap:14px; font-size:13.5px }
  .hero{ background-position:70% top; min-height:78vh } .hero-sm{ min-height:56vh }
  .hero-shade{ background:linear-gradient(0deg, var(--bg) 4%, rgba(11,11,13,.82) 42%, rgba(11,11,13,.25) 75%, rgba(11,11,13,.45) 100%) }
  .hero-actions a{ flex:1; justify-content:center }
  .poster{ width:42vw } .thumb-card{ width:72vw }
}
/* ── Tela de login: foto com gradiente escuro ── */
.auth{ position:fixed; inset:0; z-index:30; display:flex; align-items:flex-start; overflow-y:auto; font-family:var(--sans);
  background:#011422 var(--login-img, radial-gradient(120% 80% at 85% 10%, rgba(185,145,91,.20), transparent 60%)) right top / auto 100% no-repeat; -webkit-font-smoothing:antialiased }
.auth::before{ content:""; position:fixed; inset:0; background:linear-gradient(90deg, #0a0b0d 0%, #0a0b0d 34%, rgba(10,11,13,.9) 44%, rgba(10,11,13,.6) 58%, rgba(10,11,13,.28) 76%, rgba(10,11,13,.12) 100%) }
.auth-panel{ position:relative; width:min(400px, calc(100% - 40px)); margin:auto 0 auto clamp(20px, 8vw, 128px); padding:40px 0; color:#fff } /* margem automática: centraliza sem cortar em telas baixas */
.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:40px }
.auth-brand .mark{ width:38px; height:38px; border-radius:9px; background:#8c1c2c; color:#fff; font-weight:700; font-size:13px; letter-spacing:.04em; display:flex; align-items:center; justify-content:center }
.auth-brand b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em } .auth-brand small{ color:rgba(255,255,255,.55); font-size:12px }
.auth h1{ font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.025em; margin:0 0 10px; color:#fff; display:block }
.auth .lead{ color:rgba(255,255,255,.66); font-size:14.5px; line-height:1.55; margin:0 0 28px }
.auth label{ display:block; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.75); margin:0 0 14px }
.auth input{ display:block; width:100%; margin-top:6px; padding:12px 14px; font:inherit; font-size:15px; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:8px }
.auth input::placeholder{ color:rgba(255,255,255,.35) }
.auth input:focus{ outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.09); box-shadow:none }
.auth .auth-btn{ width:100%; padding:13px; margin-top:6px; border:0; border-radius:8px; background:#fff; color:#111827; font:inherit; font-size:15px; font-weight:600; cursor:pointer }
.auth .auth-btn:hover{ background:#f1f1f3 } .auth .auth-btn:disabled{ opacity:.6; cursor:wait }
.auth .auth-btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3) } .auth .auth-btn.ghost:hover{ background:rgba(255,255,255,.08) }
.auth details{ margin-top:22px; border-top:1px solid rgba(255,255,255,.12); padding-top:18px }
.auth summary{ cursor:pointer; color:rgba(255,255,255,.7); font-size:13.5px; list-style:none } .auth summary::-webkit-details-marker{ display:none }
.auth summary::after{ content:" →"; } .auth details[open] summary{ margin-bottom:14px }
.auth .auth-note{ color:rgba(255,255,255,.55); font-size:13px; line-height:1.5; margin:0 0 12px }
.auth .auth-msg{ margin-top:16px; padding:12px 14px; border-radius:8px; font-size:13.5px; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12) }
.auth .auth-msg.err{ background:rgba(185,28,28,.18); border-color:rgba(239,68,68,.4); color:#fecaca }
.auth-foot{ margin-top:36px; color:rgba(255,255,255,.35); font-size:12px }
@media (max-width:760px){
  .auth{ display:block; background-position:center top; background-size:100% auto; background-color:#0a0b0d; background-attachment:local }
  .auth::before{ background:linear-gradient(180deg, rgba(10,11,13,.05) 0%, rgba(10,11,13,.35) 28%, rgba(10,11,13,.92) 46%, #0a0b0d 56%) }
  .auth-panel{ margin:40vh auto 32px } .auth-brand{ margin-bottom:22px } .auth h1{ font-size:26px }
}
/* esfumado na borda esquerda da foto (a foto é quadrada: largura = altura da tela) */
@media (min-width:761px){ .auth::after{ content:""; position:fixed; top:0; bottom:0; left:calc(100vw - 100vh - 2px); width:70vh; background:linear-gradient(90deg, #0a0b0d 0%, rgba(10,11,13,.85) 20%, rgba(10,11,13,.5) 50%, rgba(10,11,13,.18) 78%, rgba(10,11,13,0) 100%); pointer-events:none } .auth-panel{ z-index:2 } }
.auth-logo{ display:block; width:210px; max-width:70%; height:auto }
@media (max-width:760px){ .auth-logo{ width:170px } }
/* celular: tudo centralizado */
@media (max-width:760px){ .auth-panel{ text-align:center } .auth-brand{ justify-content:center } .auth-logo{ margin:0 auto } .auth label{ text-align:center } .auth input{ text-align:center } .auth details summary{ text-align:center } }
/* celular: foto desfocada ocupando o fundo inteiro, conteúdo no topo */
@media (max-width:760px){
  .auth{ display:block; background:#0a0b0d }
  .auth::before{ background:linear-gradient(180deg, rgba(10,11,13,.7) 0%, rgba(10,11,13,.8) 45%, rgba(10,11,13,.93) 100%), var(--login-img, radial-gradient(120% 80% at 85% 10%, rgba(185,145,91,.20), transparent 60%)) center 15% / cover no-repeat; filter:blur(5px); transform:scale(1.08) }
  .auth-panel{ margin:7vh auto 32px; padding:0 } .auth-brand{ margin-bottom:26px }
}
/* logo com brilho e movimento suave */
.auth-logo{ filter:brightness(1.18) saturate(1.15) drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(var(--gold-rgb),.4));
  animation:logo-float 5s ease-in-out infinite, logo-glow 5s ease-in-out infinite; will-change:transform, filter }
@keyframes logo-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@keyframes logo-glow{
  0%,100%{ filter:brightness(1.18) saturate(1.15) drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(var(--gold-rgb),.3)) }
  50%{ filter:brightness(1.28) saturate(1.2) drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(var(--gold-rgb),.55)) } }
@media (prefers-reduced-motion:reduce){ .auth-logo{ animation:none } }
/* logo da marca */
.auth-logo{ width:240px } @media (max-width:760px){ .auth-logo{ width:200px } }
.brand{ display:flex; align-items:center } .brand img{ display:block; height:40px; width:auto }
.auth-logo{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(var(--gold-rgb),.3)); animation:logo-float 5s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){ .auth-logo{ animation:none } }
/* botão Entrar dourado (mesma cor da logo) */
.auth .auth-btn{ background:linear-gradient(180deg, var(--gold2) 0%, var(--gold) 48%, var(--gold3) 100%); color:var(--on-gold); border:1px solid var(--gold-hi);
  box-shadow:inset 0 1px 0 rgba(var(--hi-rgb),.6), 0 6px 18px rgba(var(--gold-rgb),.28); text-shadow:0 1px 0 rgba(var(--hi-rgb),.45) }
.auth .auth-btn:hover{ filter:brightness(1.07) } .auth .auth-btn:disabled{ filter:saturate(.6) brightness(.85); cursor:default }
/* ── login em uma dobra só: espaços e tamanhos acompanham a altura da tela ── */
.auth-panel{ padding:clamp(10px, 3vh, 40px) 0 }
.auth-brand{ margin-bottom:clamp(10px, 3.2vh, 40px) }
.auth-logo{ width:clamp(130px, 24vh, 240px) }
.auth h1{ font-size:clamp(22px, 3.6vh, 30px); margin-bottom:clamp(4px, 1vh, 10px) }
.auth .lead{ font-size:clamp(13px, 1.9vh, 14.5px); margin-bottom:clamp(12px, 3vh, 28px) }
.auth label{ margin-bottom:clamp(8px, 1.7vh, 14px) }
.auth input{ padding:clamp(9px, 1.5vh, 12px) 14px }
.auth .auth-btn{ padding:clamp(10px, 1.6vh, 13px) }
.auth details{ margin-top:clamp(12px, 2.4vh, 22px); padding-top:clamp(10px, 2vh, 18px) }
.auth-foot{ margin-top:clamp(10px, 3vh, 36px) }
@media (max-width:760px){
  .auth{ display:flex; flex-direction:column; justify-content:center; min-height:100dvh }
  .auth-panel{ margin:0 auto; padding:clamp(8px, 2.5dvh, 28px) 0 }
  .auth-logo{ width:clamp(120px, 21dvh, 200px) }
  .auth-brand{ margin-bottom:clamp(8px, 2.4dvh, 26px) }
  .auth h1{ font-size:clamp(21px, 3.4dvh, 26px) }
  .auth .lead{ margin-bottom:clamp(10px, 2.4dvh, 24px) }
}

/* login: campos com borda dourada (cor da logo) + olhinho da senha */
.auth input{ border-color:rgba(var(--gold-rgb),.55) }
.auth input:hover{ border-color:rgba(var(--gold-rgb),.8) }
.auth input:focus{ border-color:var(--gold-hi); box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18) }
.pw-wrap{ position:relative; display:block }
.pw-wrap input{ padding-right:46px !important }
.pw-eye{ position:absolute; right:6px; top:50%; transform:translateY(calc(-50% + 3px)); width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:6px; color:rgba(var(--gold-rgb),.75); cursor:pointer; padding:0 }
.pw-eye:hover{ color:var(--gold-hi); background:rgba(255,255,255,.06) }
.pw-eye svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.pw-eye .x{ display:none } .pw-eye.on .x{ display:inline }
@media (max-width:760px){ .pw-wrap input{ padding-left:46px !important } }
/* capas: texto sempre legível (as miniaturas trazem legenda gravada no rodapé) */
.poster-shade{ background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.96) 78%, #000 100%) }
.poster-img{ background-position:center 30% }
.thumb-img::after{ background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,0) 55%) }
/* id visual alinhada ao painel/Cademi: botões chapados e discretos */
.hero h1{ font-family:var(--display); font-weight:600; text-transform:none; letter-spacing:-.01em; line-height:1.05; font-size:clamp(32px,4.6vw,56px); background:none; color:#fff }
.hero-hi{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--gold) }
.btn-gold, .btn-glass, .btn-done{ border-radius:6px; padding:11px 20px; font-size:14px; font-weight:600; letter-spacing:-.005em; box-shadow:none }
.btn-gold{ background:var(--gold); color:var(--on-gold) } .btn-gold:hover{ background:var(--gold-hi); filter:none }
.btn-glass{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14) } .btn-glass:hover{ background:rgba(255,255,255,.16) }
.btn-done{ background:transparent; border:1px solid rgba(255,255,255,.18) }
.sm{ padding:9px 15px; font-size:13.5px }
.row-head h2{ font-size:clamp(16px,1.4vw,19px); font-weight:600; letter-spacing:-.015em }
.mod-n{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em; vertical-align:2px; margin-right:8px }
.kicker{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em }
.lesson-head h1{ font-weight:700; letter-spacing:-.025em }
.side-mod summary small{ font-family:var(--sans); font-weight:600; letter-spacing:.12em; font-size:11px }
.thumb-n{ font-family:var(--sans); font-weight:700; font-size:24px; letter-spacing:-.04em }
.thumb-txt small{ font-weight:600; letter-spacing:.08em; font-size:11px }
.nav a{ font-weight:500 } .page h1{ font-weight:700; letter-spacing:-.025em }
.btn{ background:var(--gold); color:var(--on-gold); border-radius:6px; padding:11px 18px; font-size:14px }
.mod-row{ scroll-margin-top:84px }

/* vídeo de fundo do banner (sem som) */
.hero{ overflow:hidden }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 30%; pointer-events:none }
@media (max-width:760px){ .hero-video{ object-position:68% 30% } }
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none } }
/* celular: banner mais baixo */
@media (max-width:760px){
  .hero, .hero-sm{ min-height:clamp(340px, 56vh, 480px) }
  .hero-in{ padding-bottom:26px }
  .hero-hi{ font-size:11.5px; margin-bottom:4px }
  .hero h1{ font-size:clamp(24px, 7vw, 30px); margin-bottom:8px }
  .hero-desc{ font-size:13.5px; margin-bottom:14px }
  .hero-actions a{ padding:11px 16px; font-size:14px }
  .hero-next, .hero-prog{ margin-top:10px }
  .rows{ margin-top:-12px }
}

/* página da aula no estilo Cademi: player largo no topo, conteúdo embaixo, trilha de progresso à direita */
.watch{ padding-top:70px }
.watch-stage{ background:#000; border-bottom:1px solid #1d1d22 }
.watch-stage .player{ max-width:min(1240px, calc((100vh - 150px) * 16 / 9)); margin:0 auto; border-radius:0; box-shadow:none }
.watch-body{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; max-width:1240px; margin:0 auto; padding:36px clamp(16px,3vw,24px) 80px }
.watch-main h1{ font-size:clamp(22px,2.2vw,28px); font-weight:600; letter-spacing:-.02em; margin:0 0 12px }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); margin-bottom:28px }
.crumbs a{ color:var(--muted); text-decoration:none } .crumbs a:hover{ color:#fff } .crumbs span:last-child{ color:rgba(255,255,255,.75) }
.watch-desc{ color:rgba(255,255,255,.78); font-size:15px; line-height:1.75; padding-bottom:28px; border-bottom:1px dashed #2a2a31 }
.watch-actions{ display:flex; justify-content:center; align-items:center; gap:14px; margin:30px 0 }
.round-btn{ width:42px; height:42px; border-radius:50%; background:#1c1c21; border:1px solid #2a2a31; color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none }
.round-btn:hover{ background:#26262d } .round-btn svg{ width:18px; height:18px }
.seen{ display:inline-flex; align-items:center; gap:10px; padding:11px 22px; border-radius:30px; border:1px solid #2f4a35; background:#16251a; color:#7fd99a; font:inherit; font-size:14px; font-weight:500; cursor:pointer }
.seen svg{ width:16px; height:16px; opacity:.6 } .seen:hover{ background:#1b2f20 } .seen.on{ background:#3ccf7a; border-color:#3ccf7a; color:#06210f } .seen.on svg{ opacity:1 }
.next-big{ position:relative; display:block; margin-left:auto; width:min(420px,100%); aspect-ratio:16/9; border-radius:12px; overflow:hidden; text-decoration:none; box-shadow:0 14px 36px rgba(0,0,0,.5) }
.next-img{ position:absolute; inset:0; background:#1b1612 center/cover no-repeat; transition:transform .4s } .next-big:hover .next-img{ transform:scale(1.05) }
.next-big::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0) 55%) }
.next-arrow{ position:absolute; top:12px; right:12px; z-index:1; width:42px; height:42px; border-radius:50%; background:rgba(20,20,23,.85); color:#fff; display:flex; align-items:center; justify-content:center }
.next-cap{ position:absolute; left:16px; right:16px; bottom:14px; z-index:1 } .next-cap small{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold2) } .next-cap b{ font-weight:600 }
.track{ align-self:start; position:sticky; top:90px; max-height:calc(100vh - 110px); overflow:auto; padding-right:4px }
.ring{ flex:none } .ring circle{ fill:none; stroke-width:2.5 } .ring-bg{ stroke:#2c2c33 } .ring-fg{ stroke:var(--gold); stroke-linecap:round }
.track-total{ display:flex; gap:14px; align-items:flex-start; margin-bottom:26px } .track-total b{ display:block; font-size:14.5px; font-weight:600 } .track-total small, .track-head small{ display:block; font-size:12.5px; color:var(--muted) }
.track-mod{ margin-bottom:18px }
.track-head{ display:flex; gap:14px; align-items:flex-start; background:none; border:0; padding:0; color:rgba(255,255,255,.75); font:inherit; text-align:left; cursor:pointer; width:100% }
.track-head b{ display:block; font-size:14.5px; font-weight:500 } .track-mod.open .track-head b{ color:#fff; font-weight:600 }
.track-les{ display:none; list-style:none; margin:10px 0 4px 10px; padding:0 0 0 22px; border-left:1px solid #2c2c33 }
.track-mod.open .track-les{ display:block }
.track-les li{ position:relative; margin:0 0 14px } .track-les li i{ position:absolute; left:-27px; top:6px; width:9px; height:9px; border-radius:50%; background:#0b0b0d; border:1.5px solid #4a4a52 }
.track-les a, .track-les span{ display:block; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.65); text-decoration:none }
.track-les a:hover{ color:#fff } .track-les li.on a{ color:var(--gold2); font-weight:600 } .track-les li.on i{ border-color:var(--gold); background:var(--gold) }
.track-les li.done i{ background:var(--ok); border-color:var(--ok) } .track-les li.off span{ color:var(--muted) }
@media (max-width:980px){ .watch{ padding-top:58px } .watch-body{ grid-template-columns:1fr; gap:30px; padding-top:22px } .track{ position:static; max-height:none } .next-big{ margin:0 auto } }

/* blocos personalizados pelo painel */
.hero-off{ height:90px }
.cbanner .cb-in{ position:relative; display:block; margin:0 clamp(16px,4vw,56px); min-height:180px; border-radius:14px; overflow:hidden; background:#1b1612 center/cover no-repeat; text-decoration:none }
.cb-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.2)) }
.cb-txt{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:28px; max-width:560px } .cb-txt b{ font-size:22px; font-weight:700 } .cb-txt span{ color:rgba(255,255,255,.8) } .cb-txt em{ font-style:normal; margin-top:4px }
.clinks{ display:flex; flex-wrap:wrap; gap:10px; padding:0 clamp(16px,4vw,56px) }
.clinks a{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:10px; background:var(--panel); border:1px solid var(--line); text-decoration:none; font-weight:500 } .clinks a:hover{ border-color:rgba(var(--gold-rgb),.6) } .clinks svg{ width:14px; height:14px; color:var(--gold) }
.ctext{ margin:0 clamp(16px,4vw,56px); padding:18px 20px; border-radius:12px; background:var(--panel); border:1px solid var(--line) } .ctext b{ display:block; font-size:16px; margin-bottom:6px } .ctext p{ margin:0; color:rgba(255,255,255,.78) }
.ctext.hl{ background:linear-gradient(135deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.05)); border-color:rgba(var(--gold-rgb),.45) }
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:25; display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:30px; background:#25d366; color:#fff; text-decoration:none; font-weight:600; font-size:14px; box-shadow:0 10px 24px rgba(0,0,0,.35) }
.wa-float svg{ width:22px; height:22px } @media (max-width:760px){ .wa-float span{ display:none } .wa-float{ padding:13px } }
/* título da aula com setas e "Marcar como visto" à direita (desktop) */
.watch-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px }
.watch-head .crumbs{ margin-bottom:0 } .watch-head .watch-actions{ margin:0; flex:none; justify-content:flex-end }
@media (max-width:980px){ .watch-head{ flex-direction:column; gap:18px } .watch-head .watch-actions{ align-self:stretch; justify-content:center } }

/* ───── Editor visual (só aparece dentro do painel) ───── */
.ed-pen{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px 0 9px; border:0; border-radius:99px; cursor:pointer; font:600 12px/1 var(--sans);
  background:linear-gradient(180deg,var(--gold2),var(--gold)); color:var(--on-gold); box-shadow:0 4px 14px rgba(0,0,0,.45); white-space:nowrap; z-index:8 }
.ed-pen svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.ed-pen:hover{ filter:brightness(1.1) }
.poster .ed-pen{ position:absolute; top:8px; right:8px; padding:0; width:32px; justify-content:center; opacity:0; transition:opacity .15s }
.poster .ed-pen span{ display:none }
.poster:hover .ed-pen, .poster:focus-within .ed-pen{ opacity:1 }
.poster:hover{ outline:2px dashed var(--gold); outline-offset:-2px }
@media (hover:none){ .poster .ed-pen{ opacity:1 } }
.ed-hero{ position:relative; z-index:6; height:0 }
.ed-hero .ed-pen{ position:absolute; top:76px; right:clamp(16px,4vw,56px) }
.ed-hero.ed-off{ height:auto; padding:76px clamp(16px,4vw,56px) 0 } .ed-hero.ed-off .ed-pen{ position:static; opacity:.8 }
.ed-sec{ position:relative; border:2px dashed transparent; border-radius:12px; margin:0 clamp(4px,1vw,12px) }
.ed-sec:hover{ border-color:rgba(var(--gold-rgb),.55) }
.ed-tools{ position:absolute; top:6px; right:10px; z-index:7; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end }
.ed-tools em{ font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:4px }
.ed-tools .ed-pen{ background:#26262d; color:var(--ink); box-shadow:none; height:28px } .ed-tools .ed-pen:last-child{ background:linear-gradient(180deg,var(--gold2),var(--gold)); color:var(--on-gold) }
.ed-off > :not(.ed-tools){ opacity:.35; filter:grayscale(1) }
.ed-empty{ padding:26px 18px; border-radius:10px; background:var(--panel); color:var(--muted); font-size:14px; margin-top:30px }
.ed-add{ display:flex; justify-content:center; padding:10px 0 40px }
.bar > .ed-pen{ margin-left:-20px }
.wa-float .ed-pen{ position:absolute; top:-38px; right:0 }
.auth-panel > .ed-pen{ align-self:flex-start; margin-bottom:10px }
@media (max-width:760px){ .bar > .ed-pen{ margin-left:0; width:30px; padding:0; justify-content:center } .bar > .ed-pen span{ display:none } .ed-tools em{ display:none } .ed-tools .ed-pen span{ display:none } .ed-tools .ed-pen{ width:30px; padding:0; justify-content:center } .ed-tools .ed-pen:last-child span{ display:inline } .ed-tools .ed-pen:last-child{ width:auto; padding:0 11px 0 9px } }

/* ───── Sininho de avisos ───── */
.bell-wrap{ position:relative; margin-left:auto }
.bell{ position:relative; width:38px; height:38px; border-radius:50%; border:0; background:transparent; color:rgba(255,255,255,.85); cursor:pointer; display:grid; place-items:center }
.bell:hover, .bell.on{ background:rgba(255,255,255,.08); color:#fff }
.bell svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round }
.bell-n{ position:absolute; top:3px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--gold); color:var(--on-gold); font-size:10.5px; font-weight:700; line-height:17px; text-align:center; box-shadow:0 0 0 2px var(--bg) }
.bell-pop{ position:absolute; top:calc(100% + 10px); right:-8px; width:min(380px, calc(100vw - 24px)); max-height:min(70vh, 560px); display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.6); overflow:hidden; z-index:30 }
.bell-h{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line) } .bell-h b{ font-size:15px } .bell-h small{ color:var(--gold2); font-weight:600; font-size:12px }
.bell-list{ overflow-y:auto }
.bell-it{ position:relative; padding:14px 16px 14px 28px; border-bottom:1px solid var(--line) } .bell-it:last-child{ border-bottom:0 }
.bell-it.new{ background:rgba(var(--gold-rgb),.07) } .bell-it.new::before{ content:''; position:absolute; left:12px; top:20px; width:7px; height:7px; border-radius:50%; background:var(--gold) }
.bell-it img{ display:block; width:100%; border-radius:8px; margin-bottom:10px; max-height:180px; object-fit:cover }
.bell-it b{ display:block; font-size:14.5px; color:#fff } .bell-it p{ margin:5px 0 0; color:#c9c5bd; font-size:13.5px; line-height:1.5 }
.bell-btn{ display:inline-flex; align-items:center; gap:4px; margin-top:9px; font-size:13px; font-weight:600; color:var(--gold2); text-decoration:none } .bell-btn svg{ width:14px; height:14px }
.bell-it time{ display:block; margin-top:7px; font-size:11.5px; color:var(--muted) }
.bell-empty{ padding:26px 16px; color:var(--muted); text-align:center; margin:0 }
@media (max-width:760px){ .bell-pop{ position:fixed; top:62px; right:12px; left:12px; width:auto } }

/* Vitrine sem logo: nome em texto */
.brand-name{ font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:.01em; color:#fff; white-space:nowrap }
.auth-brand .brand-name{ font-size:28px }

/* Logo do login (o B dourado da Bods & Co.) */
.auth-logo{ width:clamp(96px, 16vh, 140px); max-width:60% }