:root{
  --navy:#16213e; --navy2:#22345a;
  --gold:#b8860b; --gold-light:#faf1d8; --gold-line:#c9a227;
  --wine:#7a2942; --wine-light:#f8ecf0;
  --blue:#2c5f8a; --blue-light:#e9f1f8;
  --green:#3f7a52; --green-light:#eaf4ec;
  --gray:#5b6472; --gray-light:#eef0f2;
  --cream:#faf7ef; --paper:#fffdf9;
  --ink:#232a36; --sub:#6b7280;
  --bg:#f2efe7; --sidebar-bg:#0f1730; --sidebar-ink:#dfe3ee; --sidebar-sub:#8b93ac;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;} /* trava rolagem horizontal — sem isso, qualquer imagem
  um pouco mais larga que a tela (banner, capa de curso) empurra a página inteira
  pro lado no celular e dá a sensação de "tamanho desproporcional". */
img{max-width:100%; height:auto;} /* sem isso, uma imagem sem width/height explícitos
  no HTML renderiza no tamanho original do arquivo — em telas de celular fica
  gigante e estoura a largura da tela. */
body{
  margin:0; font-family:'Georgia','Times New Roman',serif; background:var(--bg); color:var(--ink);
  min-height:100vh;
}

/* ---------------- LOGIN ---------------- */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 25% 55%, #fff, transparent),
    radial-gradient(1px 1px at 40% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 75% 20%, #fff, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 15% 75%, #fff, transparent),
    linear-gradient(160deg, #0c1330 0%, #16213e 45%, #3a2f45 78%, #6b4f33 100%);
}
.login-card{
  position:relative; background:var(--paper); border-radius:16px; padding:40px 36px; width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card .logo{font-size:26px; letter-spacing:3px; color:var(--gold); font-weight:700; text-align:center;}
.login-card .logo-sub{font-size:12px; letter-spacing:1px; color:var(--sub); text-transform:uppercase; text-align:center; margin:4px 0 28px; font-family:Arial,sans-serif;}
.login-card label{display:block; font-family:Arial,sans-serif; font-size:12px; color:var(--sub); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;}
.login-card input{
  width:100%; padding:11px 14px; margin-bottom:18px; border-radius:8px; border:1.5px solid #d8d2c0;
  font-family:Arial,sans-serif; font-size:14px; background:#fff; color:var(--ink);
}
.login-card input:focus{outline:none; border-color:var(--gold-line);}
.login-card button{
  width:100%; padding:12px; border-radius:8px; border:none; background:var(--gold-line); color:#1a1204;
  font-family:Arial,sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:transform .15s;
}
.login-card button:hover{transform:translateY(-1px);}
.login-card button:disabled{opacity:.6; cursor:default; transform:none;}
#loginError{
  display:none; background:var(--wine-light); border:1px solid var(--wine); color:var(--wine);
  border-radius:8px; padding:10px 12px; font-family:Arial,sans-serif; font-size:12.5px; margin-bottom:16px;
}
.forgot-link{
  display:block; text-align:center; margin-top:16px; font-family:Arial,sans-serif; font-size:12.5px;
  color:var(--sub); text-decoration:none;
}
.forgot-link:hover{color:var(--gold-line); text-decoration:underline;}

/* ---------------- BOAS-VINDAS (1º acesso) ---------------- */
#welcomeScreen{
  position:fixed; inset:0; z-index:120; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 25% 55%, #fff, transparent),
    radial-gradient(1px 1px at 40% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 75% 20%, #fff, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 15% 75%, #fff, transparent),
    linear-gradient(160deg, #0c1330 0%, #16213e 45%, #3a2f45 78%, #6b4f33 100%);
}
.welcome-card{max-width:640px; width:100%; text-align:center; color:#fff;}
.welcome-card .logo{font-size:15px; letter-spacing:4px; color:var(--gold-line); text-transform:uppercase; font-family:Arial,sans-serif; margin-bottom:18px;}
.welcome-card h1{font-size:32px; line-height:1.25; margin:0 0 22px; font-weight:700;}
.welcome-card .divider{width:80px; height:2px; background:var(--gold-line); margin:0 auto 24px;}
.welcome-card p{font-size:16px; line-height:1.8; color:#e9e4d6; text-align:center; margin:0 0 14px; font-family:Georgia,serif;}
.welcome-card p.destaque{font-style:italic; color:var(--gold-light); font-size:17px; margin-top:20px;}
.welcome-actions{display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.wbtn{
  font-family:Arial,sans-serif; font-weight:700; font-size:14px; letter-spacing:.3px; padding:15px 30px;
  border-radius:30px; cursor:pointer; border:2px solid transparent; transition:transform .15s, background .15s;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
.wbtn:hover{transform:translateY(-2px);}
.wbtn.primary{background:var(--gold-line); color:#1a1204;}
.wbtn.secondary{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.wbtn.secondary:hover{background:rgba(255,255,255,.1); border-color:#fff;}
@media(max-width:720px){ .welcome-card h1{font-size:24px;} }

/* ---------------- MODAL: QUEM SOMOS ---------------- */
/* z-index acima do #welcomeScreen (120): sem isso, abrir "Quem Somos" a
   partir da própria tela de boas-vindas faz o modal renderizar escondido
   atrás dela. */
#quemSomosModal{z-index:130;}
.modal-card{
  background:var(--paper); border-radius:16px; max-width:720px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.5); padding:0;
}
.modal-head{
  background:linear-gradient(135deg,#0c1330,#16213e 60%,#3a2f45); color:#fff; padding:30px 34px 26px;
  border-radius:16px 16px 0 0; position:relative;
}
.modal-head .type-tag{display:inline-block; font-family:Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:4px 12px; border-radius:20px; background:var(--gold-line); color:#1a1204; margin-bottom:12px;}
.modal-head h2{margin:0; font-size:26px;}
.modal-close{position:absolute; top:18px; right:20px; background:rgba(255,255,255,.12); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px;}
.modal-close:hover{background:rgba(255,255,255,.22);}
.modal-body{padding:30px 34px 36px;}
.video-frame{
  border-radius:12px; overflow:hidden; background:#000; aspect-ratio:16/9; margin-bottom:28px; box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.video-frame iframe, .video-frame video{width:100%; height:100%; border:0; display:block;}
.video-frame.video-placeholder{
  display:flex; align-items:center; justify-content:center; color:#8b93ac; font-family:Arial,sans-serif; font-size:13px; text-align:center; flex-direction:column; gap:8px;
}
.video-frame .play-ic{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff;}
h3.mh{font-size:15px; color:var(--navy); text-transform:uppercase; letter-spacing:.5px; font-family:Arial,sans-serif; border-bottom:2px solid var(--gold-line); padding-bottom:8px; margin:26px 0 12px;}
h3.mh:first-of-type{margin-top:0;}
.modal-body p{font-size:14.5px; line-height:1.75; text-align:justify; margin:0 0 12px;}
.valores-list{list-style:none; padding:0; margin:0; font-family:Arial,sans-serif;}
.valores-list li{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid rgba(120,110,80,.15); font-size:13.5px; line-height:1.6;}
.valores-list li:last-child{border-bottom:none;}
.valores-list .vnum{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--gold-light); color:#8a6a10; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.valores-list b{color:var(--navy); font-family:Georgia,serif; font-size:14px;}
@media(max-width:720px){ .modal-head, .modal-body{padding-left:20px; padding-right:20px;} }

/* ---------------- MODAIS (recuperar / trocar senha) ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(12,19,48,.65);
}
.modal-overlay .login-card{box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-msg{
  border-radius:8px; padding:10px 12px; font-family:Arial,sans-serif; font-size:12.5px; margin-bottom:16px;
}
.modal-msg.ok{background:var(--green-light); border:1px solid var(--green); color:var(--green);}
.modal-msg.err{background:var(--wine-light); border:1px solid var(--wine); color:var(--wine);}

/* ---------------- SHELL ---------------- */
#portalShell{display:none; grid-template-columns:280px 1fr; min-height:100vh;}
#portalShell.show{display:grid;}

aside{
  background:var(--sidebar-bg); color:var(--sidebar-ink); position:fixed; top:0; left:0; bottom:0; width:280px;
  display:flex; flex-direction:column; z-index:50; border-right:1px solid rgba(255,255,255,.06);
}
.side-head{padding:24px 22px 16px; border-bottom:1px solid rgba(255,255,255,.08);}
.side-head .logo{font-size:20px; letter-spacing:2px; color:var(--gold-line); font-weight:700;}
.side-head .logo-sub{font-size:10.5px; letter-spacing:1px; color:var(--sidebar-sub); text-transform:uppercase; margin-top:4px; font-family:Arial,sans-serif;}

.nav-toolbar{display:flex; gap:6px; padding:12px 12px 0;}
.nav-toolbar button{
  flex:1; padding:6px 4px; border-radius:7px; border:1px solid rgba(255,255,255,.15); background:transparent;
  color:var(--sidebar-sub); font-family:Arial,sans-serif; font-size:10.5px; cursor:pointer; transition:all .15s;
}
.nav-toolbar button:hover{background:rgba(255,255,255,.08); color:#fff;}

nav{flex:1; overflow-y:auto; padding:14px 10px;}
nav::-webkit-scrollbar{width:5px;}
nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:4px;}
.cycle-title{
  display:flex; align-items:center; justify-content:space-between; padding:9px 12px; margin-top:8px;
  font-family:Arial,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:#fff; cursor:pointer; border-radius:8px;
}
.cycle-title:hover{background:rgba(255,255,255,.06);}
.cycle-title.archived{color:var(--sidebar-sub);}
.cycle-title.coming-soon{cursor:default; color:var(--sidebar-sub); opacity:.75;}
.cycle-title.coming-soon:hover{background:transparent;}
.soon-badge{
  font-size:9px; text-transform:uppercase; letter-spacing:.4px; font-weight:700; padding:2px 8px; border-radius:10px;
  background:var(--wine); color:#fff;
}
.cycle-body{padding-left:4px;}
.cycle-body.collapsed{display:none;}

/* Nível "ano do ciclo" (ex.: "Ciclo da Torá 5786"), aninhado dentro do
   item pai "Ciclos da Torá" — mais discreto que o cycle-title de topo,
   mas ainda destacado (branco, negrito), porque escolher o ano é uma ação
   tão importante quanto escolher um livro. */
.cycle-year-title{
  display:flex; align-items:center; justify-content:space-between; padding:8px 12px 8px 18px; margin-top:2px;
  font-family:Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:#fff; cursor:pointer; border-radius:8px; border-left:3px solid transparent;
}
.cycle-year-title:hover{background:rgba(255,255,255,.06);}
.cycle-year-title.archived{color:var(--sidebar-sub);}
.cycle-year-title.active-in-grid{background:rgba(255,255,255,.09); border-left-color:var(--gold-line);}

.book-title{
  display:flex; align-items:center; justify-content:space-between; padding:7px 12px 7px 20px; margin-top:2px;
  font-family:Arial,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--sidebar-sub); cursor:pointer; border-radius:8px;
}
.book-title:hover{background:rgba(255,255,255,.06); color:#fff;}
.book-body{padding-left:10px;}
.book-body.collapsed{display:none;}

.nav-link{
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:8px; text-decoration:none;
  color:var(--sidebar-sub); font-family:Arial,sans-serif; font-size:12.5px; margin-bottom:2px;
  border-left:3px solid transparent; transition:all .18s; cursor:pointer;
}
.nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-link.active{background:rgba(255,255,255,.09); color:#fff; border-left-color:var(--gold-line);}
.nav-dot{width:8px;height:8px;border-radius:50%; flex-shrink:0;}
.nav-empty{padding:8px 12px; font-family:Arial,sans-serif; font-size:11.5px; color:var(--sidebar-sub); font-style:italic;}

.side-foot{padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.08); font-family:Arial,sans-serif;}
.user-chip{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; color:var(--sidebar-sub);}
.user-chip .role-badge{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; font-weight:700; padding:2px 8px; border-radius:10px;
  background:var(--gold-line); color:#1a1204;
}
.user-chip .role-badge.aluno{background:var(--blue); color:#fff;}
.logout-btn, .admin-link{
  width:100%; padding:9px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:transparent;
  color:#fff; font-family:Arial,sans-serif; font-size:12px; cursor:pointer; text-align:center; text-decoration:none;
  display:block; margin-bottom:8px;
}
.admin-link{border-color:var(--gold-line); color:var(--gold-line);}
.logout-btn:hover, .admin-link:hover{background:rgba(255,255,255,.08);}
.quem-somos-link{color:var(--gold-line);}

/* ---------------- MAIN ---------------- */
main{grid-column:2; padding:0;}
.mobile-bar{display:none;}
/* Sem teto fixo em pixels: a largura útil acompanha a tela (e o zoom),
   só limitando um respiro nas bordas em telas muito largas. */
.wrap{max-width:none; width:100%; margin:0 auto; padding:48px clamp(24px, 4vw, 64px); box-sizing:border-box;}
.welcome h1{font-size:26px; color:var(--navy); margin:0 0 6px;}

/* ---------------- BANNER CAROUSEL ---------------- */
/* aspect-ratio (em vez de height fixo) mantém a mesma proporção de corte da
   imagem em qualquer zoom/largura — a altura acompanha a largura sempre na
   mesma razão, então o corte no topo/base não aumenta quando o navegador
   fica mais largo (dar zoom out). */
.banner-carousel{position:relative; width:100%; aspect-ratio:3.4/1; min-height:170px; max-height:460px; overflow:hidden; background:var(--navy);}
.banner-track{position:relative; width:100%; height:100%;}
.banner-slide{
  position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center;
  opacity:0; transition:opacity .8s ease; will-change:opacity;
}
.banner-slide.active{opacity:1;}.banner-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(15,23,48,.45); color:#fff; font-size:22px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; z-index:5; transition:background .15s;
}
.banner-arrow:hover{background:rgba(15,23,48,.7);}
.banner-arrow.prev{left:16px;} .banner-arrow.next{right:16px;}
.banner-dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; z-index:5;}
.banner-dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; padding:0;
  transition:background .2s, transform .2s;
}
.banner-dots button.active{background:#fff; transform:scale(1.25);}
@media(max-width:880px){
  .banner-carousel{aspect-ratio:2.2/1; min-height:140px; max-height:260px;}
  .banner-arrow{width:32px; height:32px; font-size:18px;}
}
.welcome p{color:var(--sub); font-family:Arial,sans-serif; font-size:14px; line-height:1.7;}

.study-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:28px;}
.study-card{
  border:1.5px solid rgba(120,110,80,.25); border-radius:12px; padding:18px; background:var(--paper);
  text-decoration:none; color:var(--ink); transition:transform .15s, box-shadow .15s; display:block;
}
.study-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08);}
.study-card .type-tag{
  display:inline-block; font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:3px 9px; border-radius:6px; color:#fff; margin-bottom:10px;
}
.study-card .type-tag.parasha{background:var(--gold-line);}
.study-card .type-tag.festa{background:var(--wine);}
.study-card .type-tag.video{background:var(--blue);}
.study-card .type-tag.pdf{background:var(--green);}
.study-card .type-tag.soon{background:var(--sidebar-sub);}
.study-card h3{margin:0 0 4px; font-size:16px;}
.study-card span.meta{font-family:Arial,sans-serif; font-size:11.5px; color:var(--sub);}
button.study-card{font:inherit; text-align:left; width:100%; display:block; cursor:pointer; margin:0;}
.study-card.group-card.is-soon{opacity:.7;}
.study-card.empty-card{cursor:default;}
.study-card.empty-card:hover{transform:none; box-shadow:none;}

.course-card{
  position:relative; aspect-ratio:16/9; padding:0; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  cursor:default;
}
.course-card:hover{transform:none; box-shadow:0 8px 20px rgba(0,0,0,.08);}
.course-soon-flag{
  position:absolute; top:12px; right:-34px; transform:rotate(40deg); width:150px; text-align:center;
  background:var(--wine); color:#fff; font-family:Arial,sans-serif; font-weight:700; font-size:10.5px;
  letter-spacing:.5px; text-transform:uppercase; padding:5px 0; box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.grid-back-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:26px; padding:8px 16px; border-radius:20px;
  border:1.5px solid rgba(120,110,80,.3); background:var(--paper); color:var(--ink); font-family:Arial,sans-serif;
  font-size:12.5px; font-weight:700; cursor:pointer; transition:transform .15s;
}
.grid-back-btn:hover{transform:translateX(-3px); background:var(--gold-light);}

#loadingState, #emptyState{font-family:Arial,sans-serif; color:var(--sub); font-size:13px; padding:40px 0; text-align:center;}

/* mobile */
@media(max-width:880px){
  #portalShell.show{display:block;}
  aside{transform:translateX(-100%); transition:transform .25s; width:260px;}
  aside.open{transform:translateX(0);}
  main{padding-top:56px;}
  .mobile-bar{
    display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; height:56px; background:var(--navy);
    color:#fff; z-index:55; padding:0 16px; font-family:Arial,sans-serif;
  }
  .mobile-bar button{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;}
  .mobile-bar span{font-weight:700; letter-spacing:1.5px; color:var(--gold-line); font-size:13px;}
  .wrap{padding:28px 20px;}
  /* O botão de Dúvidas (.duvidas-fab, fixo em top:24px) ficava dentro da
     faixa da .mobile-bar (0–56px) e sobrepunha o hamburguer/título — desce
     ele pra abaixo da barra. Seletor de irmão geral (ver comentário mais
     abaixo, perto de #areaShell) porque o fab é injetado direto no body
     depois de #portalShell. */
  #portalShell ~ .duvidas-fab{ top:68px; }
}

/* Fundo escurecido atrás do menu lateral no celular — sem isso, ao abrir o
   menu (aside.open) não havia nenhuma forma de fechar clicando fora dele,
   só clicando exatamente num link da navegação. Parecia "travado". */
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(8,12,26,.55); z-index:49;
}
.sidebar-backdrop.show{display:block;}
@media(min-width:881px){ .sidebar-backdrop{display:none !important;} }

/* ---------------- Moreh — IA de apoio (roadmap item 26) ---------------- */
.moreh-fab{
  position:fixed; bottom:24px; right:24px; z-index:65; display:flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff; border:2px solid var(--gold-line); border-radius:34px; padding:16px 22px;
  font-family:Arial,sans-serif; font-weight:700; font-size:15px; cursor:grab; user-select:none; touch-action:none;
  box-shadow:0 8px 26px rgba(0,0,0,.35); transition:transform .15s, box-shadow .15s;
}
.moreh-fab:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.4);}
.moreh-fab.dragging{cursor:grabbing; transform:scale(1.03);}
.moreh-fab-icon{font-size:22px;}
.moreh-fab-label{letter-spacing:.3px;}

.moreh-panel{
  position:fixed; bottom:96px; right:24px; width:400px; max-width:calc(100vw - 32px);
  height:560px; max-height:calc(100vh - 40px); min-width:300px; min-height:340px;
  background:var(--paper); border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:auto; resize:both; z-index:66;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none; transition:opacity .2s, transform .2s;
  font-family:Arial,sans-serif;
}
.moreh-panel.open{opacity:1; transform:none; pointer-events:auto;}

.moreh-header{background:var(--navy); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; cursor:grab; user-select:none; touch-action:none; flex:0 0 auto;}
.moreh-header.dragging{cursor:grabbing;}
.moreh-title{font-weight:700; font-size:15px;}
.moreh-subtitle{font-size:11px; color:#b7bfcf; margin-top:2px;}
.moreh-close{background:none; border:none; color:#fff; font-size:16px; cursor:pointer; opacity:.8;}
.moreh-close:hover{opacity:1;}

.moreh-messages{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--cream); min-height:0;}
.moreh-msg{font-size:13px; line-height:1.5; padding:10px 12px; border-radius:12px; max-width:88%; white-space:pre-wrap;}
.moreh-msg-bot{background:var(--gold-light); color:var(--ink); align-self:flex-start; border:1px solid var(--gold-line);}
.moreh-msg-user{background:var(--navy); color:#fff; align-self:flex-end;}
.moreh-msg-thinking{opacity:.7; font-style:italic;}
.moreh-msg-error{background:var(--wine-light); border:1px solid var(--wine); color:var(--wine);}

.moreh-form{display:flex; gap:8px; padding:10px; border-top:1px solid rgba(0,0,0,.08); background:var(--paper); flex:0 0 auto;}
.moreh-input{
  flex:1; resize:none; border:1px solid rgba(0,0,0,.15); border-radius:10px; padding:9px 11px;
  font-family:inherit; font-size:13px; max-height:160px; background:var(--paper); color:var(--ink);
}
.moreh-input:focus{outline:2px solid var(--gold-line); outline-offset:1px;}
.moreh-send{background:var(--gold-line); color:#1a1204; border:none; border-radius:10px; padding:0 16px; font-weight:700; font-size:13px; cursor:pointer;}
.moreh-send:disabled{opacity:.6; cursor:default;}

.moreh-resize-hint{position:absolute; right:4px; bottom:2px; font-size:12px; color:rgba(0,0,0,.35); pointer-events:none;}

@media(max-width:480px){
  .moreh-panel{right:12px; left:12px; width:auto; bottom:78px; resize:none;}
  .moreh-fab{right:14px;}
}

/* ---------------- Acesso Rápido / Tira-Dúvidas ---------------- */
.duvidas-fab{
  position:fixed; top:24px; right:24px; z-index:67; display:flex; align-items:center; gap:9px;
  background:var(--navy); color:#fff; border:2px solid var(--gold-line); border-radius:30px; padding:13px 20px;
  font-family:Arial,sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.3);
  transition:transform .15s;
}
.duvidas-fab:hover{transform:translateY(-2px);}
.duvidas-fab .ic{font-size:17px;}
@media(max-width:600px){ .duvidas-fab{padding:11px 14px; font-size:0;} .duvidas-fab .ic{font-size:19px;} }

/* Botão "Conheça o Portal" — mesma cor do cabeçalho/telas azuis do portal
   (var(--navy)), pequeno, "pendurado" no canto inferior direito do próprio
   card de login (não no canto da tela) — fica dentro de #loginScreen de
   propósito: some sozinho quando o login é escondido.
   Seletor ".login-card .conheca-portal-btn" (em vez de só ".conheca-portal-btn")
   de propósito: precisa de mais especificidade que a regra genérica
   ".login-card button" (width:100%, fundo dourado, ver acima), senão essa
   regra genérica ganha e o botão sai gigante e amarelo. */
.login-card .conheca-portal-btn{
  width:auto; position:absolute; bottom:-14px; right:18px; z-index:5;
  background:var(--navy); color:#fff; border:2px solid var(--gold-line); border-radius:20px;
  padding:7px 16px; font-family:Arial,sans-serif; font-weight:700; font-size:11.5px; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.3); transition:transform .15s;
}
.login-card .conheca-portal-btn:hover{transform:translateY(-2px);}

/* No Ambiente de Cursos o cabeçalho já tem "Voltar ao Portal"/"Sair"
   ancorados no canto superior direito — desce o botão de Dúvidas pra não
   sobrepor. #duvidasFab é injetado no body (duvidas.js) depois de
   #areaShell no HTML dessa página, então o seletor de irmão geral só
   pega aqui, sem afetar as outras páginas. */
#areaShell ~ .duvidas-fab{ top:92px; }
/* No celular a coluna lateral (banners, assinatura, lista de cursos) empilha
   em cima do conteúdo e ocupa a largura toda (.area-sidebar{width:auto} —
   ver media query mais abaixo) — um fab fixo no topo ficava sobreposto aos
   botões de curso conforme a pessoa rolava a tela, dando a impressão de um
   "painel travado" bloqueando o toque. Desce ele pro rodapé, onde nada mais
   rola por baixo. */
@media(max-width:880px){ #areaShell ~ .duvidas-fab{ top:auto; bottom:20px; right:16px; } }

.dp-overlay{position:fixed; inset:0; background:rgba(12,19,48,.45); z-index:68; opacity:0; pointer-events:none; transition:opacity .25s;}
.dp-overlay.show{opacity:1; pointer-events:auto;}

.duvidas-panel{
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:var(--paper);
  box-shadow:-10px 0 40px rgba(0,0,0,.25); z-index:69; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .28s ease;
}
.duvidas-panel.open{transform:translateX(0);}
.dp-head{
  background:linear-gradient(135deg,#0c1330,#16213e 60%,#3a2f45); color:#fff; padding:24px 24px 20px; position:relative; flex:0 0 auto;
}
.dp-head .eyebrow{font-family:Arial,sans-serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-line); margin-bottom:6px;}
.dp-head h2{margin:0; font-size:21px; font-family:Georgia,serif;}
.dp-head p{font-family:Arial,sans-serif; font-size:12px; color:#c9c2ac; margin:8px 0 0; line-height:1.5;}
.dp-close{position:absolute; top:16px; right:16px; background:rgba(255,255,255,.12); border:none; color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px;}
.dp-close:hover{background:rgba(255,255,255,.22);}

.dp-body{flex:1; overflow-y:auto; padding:10px 14px 24px;}
.dp-item{border:1.5px solid rgba(120,110,80,.25); border-radius:10px; margin-top:10px; overflow:hidden; background:var(--paper);}
.dp-q{
  width:100%; text-align:left; background:var(--cream); border:none; padding:14px 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:Georgia,serif; font-size:14.5px; font-weight:700; color:var(--navy);
}
.dp-q .chev{font-family:Arial,sans-serif; font-size:12px; color:var(--sub); transition:transform .2s; flex-shrink:0;}
.dp-item.open .dp-q .chev{transform:rotate(180deg);}
.dp-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.dp-item.open .dp-a{max-height:600px;}
.dp-a-inner{padding:14px 16px 18px;}
.dp-tag{display:inline-block; padding:3px 10px; border-radius:6px; font-family:Arial,sans-serif; font-weight:700; font-size:10px; letter-spacing:.4px; color:#fff; margin-bottom:10px;}
.dp-tag.gold{background:var(--gold);} .dp-tag.wine{background:var(--wine);} .dp-tag.gray{background:var(--gray);}
.dp-a p{font-size:13.5px; line-height:1.7; margin:0 0 10px; text-align:justify; color:var(--ink);}
.dp-video{
  border-radius:8px; overflow:hidden; background:#000; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  color:#8b93ac; font-family:Arial,sans-serif; font-size:11.5px; text-align:center; flex-direction:column; gap:6px;
}
.dp-video .play-ic{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff;}

@media(max-width:880px){ .duvidas-fab{top:66px;} }

/* ---------------- Área do Assinante / Curso Torá em Foco (Fase 2) ---------------- */
#areaLoadingScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; color:var(--sub); font-size:14px;
}
#portalLoadingScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; color:var(--sub); font-size:14px;
}
/* #areaShell ocupa a viewport inteira em coluna: cabeçalho fixo no topo
   (flex-shrink:0) + corpo que se divide em menu lateral e área principal,
   cada um rolando por conta própria (min-height:0 é o que permite isso
   dentro de um flex item). */
#areaShell{min-height:100vh; height:100vh; display:flex; flex-direction:column;}
.area-header{background:var(--sidebar-bg); border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; position:sticky; top:0; z-index:30;}
.area-header-inner{
  max-width:1400px; margin:0 auto; padding:18px clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.area-header-inner .logo-sub{font-size:10.5px; letter-spacing:1px; color:var(--sidebar-sub); text-transform:uppercase; font-family:Arial,sans-serif;}
.area-header-actions{display:flex; gap:10px; align-items:center;}
.logout-btn-inline{
  padding:9px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:transparent;
  color:#fff; font-family:Arial,sans-serif; font-size:12.5px; cursor:pointer; text-decoration:none; transition:background .15s;
}
.logout-btn-inline:hover{background:rgba(255,255,255,.08);}

.area-body{flex:1; display:flex; min-height:0;}
.area-sidebar{
  /* position:static sobrescreve de propósito a regra genérica "aside{...}"
     (usada pelo menu lateral do portal, com position:fixed) — como este
     elemento também é uma tag <aside>, herdava fixed sem eu ter setado
     "position" aqui, o que tirava ele do fluxo do flex e fazia sobrepor
     o cabeçalho inteiro. */
  position:static; width:300px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-ink);
  padding:26px 22px; overflow-y:auto;
}
.area-main{flex:1; overflow-y:auto; padding:40px clamp(24px,4vw,56px);}
.area-main-placeholder{
  font-family:Arial,sans-serif; color:var(--sub); font-size:14px; text-align:center; padding:80px 20px;
}

/* Mini-carrossel de banners no topo da coluna do Ambiente de Cursos —
   mesmos banners do Portal (img/banner-1.png..7.png), em versão reduzida
   pra caber na largura de 300px da coluna, funcionando como "anúncios"
   acima do card do assinante. Sem setas (não sobra espaço), só autoplay
   + bolinhas — ver initSidebarBannerCarousel em js/area-assinante.js. */
.sidebar-banner-carousel{
  /* aspect-ratio igual ao carrossel do Portal (.banner-carousel, 3.4/1) —
     as imagens (img/banner-1.png..7.png) foram desenhadas nessa proporção;
     usar 16/9 aqui cortava o conteúdo do banner ao aplicar cover. */
  position:relative; width:100%; aspect-ratio:3.4/1; border-radius:10px; overflow:hidden;
  margin-bottom:20px; background:var(--navy);
}
.sidebar-banner-track{position:relative; width:100%; height:100%;}
.sidebar-banner-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .6s ease;
}
.sidebar-banner-slide.active{opacity:1;}
.sidebar-banner-dots{
  position:absolute; left:0; right:0; bottom:7px; display:flex; justify-content:center; gap:5px; z-index:5;
}
.sidebar-banner-dots button{
  width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,.5); padding:0; cursor:pointer;
}
.sidebar-banner-dots button.active{background:#fff; transform:scale(1.3);}

.area-sidebar-user{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:18px;
}
.area-sidebar-user h2{font-size:15px; margin:8px 0 6px; color:#fff;}
.area-sidebar-user p{font-family:Arial,sans-serif; font-size:12px; color:var(--sidebar-sub); line-height:1.5; margin:0 0 14px;}
.area-sidebar-user .wbtn{padding:9px 16px; font-size:12px; width:100%; justify-content:center;}

.area-sidebar-section-title{
  font-family:Arial,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--sidebar-sub); margin:26px 0 10px 4px;
}
.course-nav-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px; border-radius:8px;
  border:none; background:transparent; color:var(--sidebar-ink); font-family:Arial,sans-serif; font-size:13px;
  cursor:pointer; margin-bottom:4px; transition:background .15s;
}
.course-nav-item:hover{background:rgba(255,255,255,.06);}
.course-nav-item.active{background:var(--gold-line); color:#1a1204; font-weight:700;}
.course-nav-item .lock-ic{opacity:.6; font-size:11px;}

.sub-card{
  background:var(--paper); border:1.5px solid rgba(120,110,80,.25); border-radius:14px; padding:28px 30px;
  margin-top:32px; box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.sub-card h2{margin:8px 0 8px; font-size:22px; color:var(--navy);}
.sub-card p{font-family:Arial,sans-serif; font-size:14px; color:var(--sub); line-height:1.6; margin:0 0 18px;}
/* .wbtn.secondary foi feito pra fundo escuro (texto branco) — dentro do
   .sub-card (fundo claro) isso ficava branco sobre branco, invisível.
   Sobrescreve só aqui com cores que funcionam no fundo claro. */
.sub-card .wbtn.secondary{color:var(--wine); border-color:rgba(122,41,66,.4);}
.sub-card .wbtn.secondary:hover{background:var(--wine-light); border-color:var(--wine);}
.sub-badge{
  display:inline-block; font-family:Arial,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:4px 12px; border-radius:20px; background:var(--gold-light); color:#8a6a10;
}
.sub-badge-ok{background:var(--green-light); color:var(--green);}
.sub-badge-warn{background:var(--wine-light); color:var(--wine);}

.area-section-title{font-size:19px; color:var(--navy); margin:36px 0 4px;}

/* ---- Ambiente de Cursos: capa do curso + grade de módulos/aulas ---- */
.course-hero{
  display:flex; gap:28px; align-items:center; flex-wrap:wrap; background:var(--paper);
  border:1.5px solid rgba(120,110,80,.25); border-radius:16px; padding:26px; box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.course-hero-cover{
  width:220px; height:220px; flex-shrink:0; border-radius:12px; background-size:cover; background-position:center;
  background-color:var(--sidebar-bg); display:flex; align-items:center; justify-content:center; color:var(--sidebar-sub);
  font-family:Arial,sans-serif; font-size:12px; text-align:center;
}
/* Curso com vídeo de apresentação cadastrado: vídeo em largura maior no
   topo (reaproveita .video-frame, 16:9, do modal do Quem Somos), texto
   embaixo — em vez do layout padrão de capa quadrada + texto ao lado. */
.course-hero.has-video{flex-direction:column; align-items:stretch;}
.course-hero-video-wrap{width:100%; max-width:640px; margin:0 auto;}
.course-hero-video-wrap .video-frame{margin-bottom:0;}
.course-hero.has-video .course-hero-text{text-align:center; max-width:640px; margin:0 auto;}

.course-hero-text{flex:1; min-width:220px;}
.course-hero-text .type-tag{
  display:inline-block; font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:4px 12px; border-radius:20px; background:var(--gold-line); color:#1a1204; margin-bottom:10px;
}
.course-hero-text h1{font-size:24px; color:var(--navy); margin:0 0 10px;}
.course-hero-text p{font-family:Arial,sans-serif; font-size:14px; color:var(--sub); line-height:1.7; margin:0;}

.module-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:20px;}
.module-card{
  position:relative; border:1.5px solid rgba(120,110,80,.25); border-radius:12px; padding:18px; background:var(--paper);
  background-size:cover; background-position:center; text-align:left; font-family:Arial,sans-serif; cursor:pointer;
  transition:transform .15s, box-shadow .15s; color:var(--ink);
}
.module-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08);}
.module-card .type-tag{
  display:inline-block; font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:3px 9px; border-radius:6px; color:#fff; background:var(--blue);
}
.module-card h3{margin:0 0 6px; font-size:15px; font-family:Georgia,'Times New Roman',serif; color:var(--navy);}
.module-card .module-meta{font-size:11.5px; color:var(--sub);}
.module-card .lock-badge{
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; background:var(--sidebar-bg);
  color:var(--sidebar-sub); display:flex; align-items:center; justify-content:center; font-size:12px;
}
.module-card .done-badge{
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; background:var(--green);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px;
}
.module-card.is-locked{cursor:not-allowed; opacity:.6;}
.module-card.is-locked:hover{transform:none; box-shadow:none;}
.module-card .progress-track{height:5px; border-radius:3px; background:rgba(120,110,80,.15); margin-top:12px; overflow:hidden;}
.module-card .progress-fill{height:100%; background:var(--gold-line);}

@media(max-width:880px){
  #areaShell{height:auto; min-height:100vh;}
  .area-body{flex-direction:column;}
  /* .area-sidebar também é uma tag <aside> — a regra genérica "aside{}" lá
     em cima (pensada só pro menu do Portal) empurra QUALQUER <aside> pra
     fora da tela com transform:translateX(-100%) no mobile, só trazendo de
     volta com a classe ".open" — que esta coluna nunca ganha. Resultado: a
     coluna inteira (banners, assinatura, lista de cursos) ficava deslocada
     pra fora da tela, mas continuava ocupando a altura dela no layout — daí
     o vão vazio do tamanho da coluna, com o fundo escuro dela junto. */
  .area-sidebar{width:auto; overflow-y:visible; transform:none;}
  .area-main{overflow-y:visible; padding:28px 20px;}
  .course-hero{flex-direction:column; text-align:center;}
  .course-hero-cover{width:100%; max-width:280px;}
}

.player-modal-card{max-width:900px;}
.player-modal-card .modal-body{padding:0;}
#playerWrap{background:#000; border-radius:0 0 16px 16px; overflow:hidden;}
#playerWrap mux-player{display:block;}