:root { --cor: #2563EB; --fundo: #07073F; --txt: #F2F5FA; --suave: #A4ACC4; --vidro: rgba(255,255,255,.06); --vidro-borda: rgba(255,255,255,.1); --ok: #34D399; --erro: #F47D8A; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; }
body {
  margin: 0; min-height: 100%; color: var(--txt); font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
body.com-barras { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2 { margin: 0 0 .4rem; line-height: 1.2; letter-spacing: -0.015em; }
p { margin: 0 0 .8rem; }
.suave { color: var(--suave); }
.pequeno { font-size: .82rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ic { flex: none; }
.cresce { flex: 1; min-width: 0; }
:focus-visible { outline: 2px solid var(--cor); outline-offset: 3px; border-radius: 8px; }

/* Topo */
.topo-app { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: calc(.7rem + env(safe-area-inset-top, 0px)) clamp(1rem, 2vw, 1.6rem) .7rem; background: var(--cabecalho); }
.logo-app { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid var(--vidro-borda); text-decoration: none; font-weight: 800; font-size: 1.3rem; color: var(--cor); }
.logo-app img { width: 100%; height: 100%; object-fit: cover; }
.sino { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid var(--vidro-borda); text-decoration: none; }
.sino.ativo { background: var(--cor); }
.ponto { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #EF4444; color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--fundo); }

.pagina { padding: 0 clamp(1rem, 3vw, 2rem) 2rem; }
.largura { max-width: 1200px; margin: 0 auto; }
.largura.estreita { max-width: 1040px; }
.largura.feed { max-width: 640px; }
.titulo-pagina { font-size: 1.6rem; margin: .8rem 0 1.2rem; }

/* Banners (carrossel) */
.carrossel { position: relative; margin: .5rem 0 1.6rem; }
.carrossel-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; scrollbar-width: none; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 16 / 9; max-height: 62vh; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
a.banner:hover img { filter: brightness(1.06); }
.carrossel-pontos { display: flex; justify-content: center; gap: .45rem; margin-top: .8rem; }
.carrossel-pontos button { width: 9px; height: 9px; border-radius: 5px; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: width .2s; }
.carrossel-pontos button.ativo { width: 26px; background: var(--cor); }
.titulo-secao { font-size: 1.25rem; margin: 0 0 1rem; color: var(--nomes); }
.boas-vindas { padding: 2.5rem 0 1.5rem; }
.boas-vindas h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.boas-vindas p { color: var(--suave); font-size: 1.1rem; }

/* Produtos */
.produtos { list-style: none; margin: 0; padding: 0; }
.produtos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.5rem); }
.produtos-cinema { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.produtos-cinema li { flex: 0 0 clamp(150px, 22vw, 240px); scroll-snap-align: start; }
.produtos-cinema .card-produto-capa { aspect-ratio: 2 / 3; }
.barra-capa { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: rgba(0,0,0,.35); }
.card-produto { display: block; text-decoration: none; border-radius: 18px; overflow: hidden; background: #12152A; border: 1px solid var(--vidro-borda); transition: transform .15s ease, border-color .15s ease; }
.card-produto:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cor) 60%, transparent); }
.card-produto-capa { position: relative; aspect-ratio: 1 / 0.92; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--cor), var(--fundo)); }
.card-produto-capa img { width: 100%; height: 100%; object-fit: cover; }
.inicial-grande { font-size: 6rem; font-weight: 800; color: rgba(255,255,255,.9); }
.card-produto-rodape { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; background: rgba(20, 23, 38, .9); }
.card-produto-rodape strong { font-size: 1.05rem; display: block; color: var(--nomes); }
.card-produto-rodape .barra { margin-top: .5rem; }
.seta-circ { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cor) 22%, transparent); color: color-mix(in srgb, var(--cor) 60%, #fff); }
.bloqueado .card-produto-capa img { filter: grayscale(.7) brightness(.55); }
.selo-cadeado { position: absolute; display: flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 99px; background: rgba(0,0,0,.6); border: 1px solid var(--vidro-borda); font-weight: 600; font-size: .92rem; }
.barra { height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; display: block; }
.barra span { display: block; height: 100%; background: var(--cor); border-radius: inherit; }

/* Página do produto */
.cab-produto { display: flex; align-items: center; gap: 1rem; padding: 1rem 0 1.4rem; }
.cab-produto h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.voltar-circ { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--vidro); border: 1px solid var(--vidro-borda); text-decoration: none; }
.voltar-circ:hover { background: rgba(255,255,255,.12); }
.progresso-linha { white-space: nowrap; display: flex; align-items: center; gap: .8rem; margin-top: .5rem; font-size: .85rem; color: var(--suave); }
.progresso-linha .barra { flex: 0 1 220px; }
.desc-produto { color: #CDD3E2; max-width: 70ch; margin-bottom: 1.5rem; }
.modulo { margin-bottom: 2.2rem; }
.modulo-titulo { font-size: 1.15rem; margin: 1.6rem 0 1rem; color: var(--nomes); }
.grade-aulas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 290px), 1fr)); gap: 1.4rem 1rem; }
.card-aula { display: grid; gap: .7rem; text-decoration: none; }
.card-aula-capa { position: relative; aspect-ratio: 1 / 0.94; border-radius: 14px; overflow: hidden; background: #12152A; border: 1px solid var(--vidro-borda); display: grid; place-items: center; transition: transform .15s ease, border-color .15s ease; }
.card-aula:hover .card-aula-capa { transform: scale(1.02); border-color: color-mix(in srgb, var(--cor) 60%, transparent); }
.card-aula-capa img { width: 100%; height: 100%; object-fit: cover; }
.play-vazio { color: color-mix(in srgb, var(--cor) 70%, #fff); opacity: .8; }
.card-aula-titulo { text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--nomes); }
.modulo-travado .card-aula { cursor: not-allowed; }
.modulo-travado .card-aula-capa img { filter: grayscale(.8) brightness(.45); }
.libera-em { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; padding: .2rem .6rem; border-radius: 99px; background: rgba(255,255,255,.1); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.feito { position: absolute; top: .6rem; right: .6rem; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #05301F; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* Aula */
.h-aula { font-size: clamp(1.25rem, 2.6vw, 1.7rem) !important; margin-top: .15rem !important; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; border: 1px solid var(--vidro-borda); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.capa-sem-video { border-radius: 16px; max-height: 60vh; margin: 0 auto; }
.acoes-aula { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.2rem 0; }
.desc-aula { color: #D2D8E5; max-width: 72ch; padding: 1.1rem 1.2rem; background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: 14px; }
.nav-aulas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.nav-aulas a { display: grid; gap: .15rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--vidro); border: 1px solid var(--vidro-borda); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav-aulas a:hover { border-color: color-mix(in srgb, var(--cor) 60%, transparent); }
.nav-aulas small { color: var(--suave); font-weight: 500; }
.nav-aulas .dir { grid-column: 2; text-align: right; }
.trilha { list-style: none; margin: 0; padding: 0 0 .6rem; display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.trilha li { flex: 0 0 150px; scroll-snap-align: start; }
.trilha a { display: grid; gap: .45rem; text-decoration: none; }
.trilha-capa { position: relative; aspect-ratio: 1 / 0.94; border-radius: 12px; overflow: hidden; background: #12152A; border: 2px solid transparent; display: block; }
.trilha-capa img { width: 100%; height: 100%; object-fit: cover; }
.trilha .atual .trilha-capa { border-color: var(--cor); }
.trilha .feito { width: 22px; height: 22px; top: .4rem; right: .4rem; }
.trilha-titulo { font-size: .82rem; font-weight: 600; line-height: 1.3; color: #CDD3E2; }
.trilha .atual .trilha-titulo { color: var(--txt); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .1s ease; }
.btn:active { transform: scale(.98); }
.btn-p { padding: .55rem .9rem; font-size: .88rem; }
.btn-cor { background: var(--cor); color: #fff; }
.btn-cor:hover { filter: brightness(1.1); }
.btn-vidro { background: var(--vidro); border-color: var(--vidro-borda); color: var(--txt); }
.btn-feito { background: rgba(52,211,153,.14); color: var(--ok); border-color: rgba(52,211,153,.35); }

/* Formulários */
.form { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-weight: 600; font-size: .9rem; }
label .suave { font-weight: 400; }
input, textarea { width: 100%; font: inherit; color: var(--txt); background: rgba(0,0,0,.3); border: 1px solid var(--vidro-borda); border-radius: 12px; padding: .8rem .9rem; }
input:focus, textarea:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 30%, transparent); }
.caixa-vidro { background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: 18px; padding: 1.3rem; }
.aviso { padding: .85rem 1rem; border-radius: 12px; margin: .8rem 0 1rem; border: 1px solid; }
.aviso-ok { color: var(--ok); background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.3); }
.aviso-erro { color: var(--erro); background: rgba(240,90,106,.08); border-color: rgba(240,90,106,.3); }
.vazio { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--vidro-borda); border-radius: 18px; margin: 1rem 0; }
.vazio h2 { font-size: 1.15rem; }
.vazio p { color: var(--suave); max-width: 46ch; margin: 0 auto; }

/* Entrar */
.entrar { max-width: 380px; margin: 0 auto; padding: 10vh 0 3rem; text-align: center; }
.entrar-logo { width: 110px; height: 110px; margin: 0 auto 1.3rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid var(--vidro-borda); box-shadow: 0 0 60px color-mix(in srgb, var(--cor) 45%, transparent); font-size: 3rem; font-weight: 800; color: var(--cor); }
.entrar-logo img { width: 100%; height: 100%; object-fit: cover; }
.entrar h1 { font-size: 1.6rem; }
.entrar .form { text-align: left; margin: 1.6rem 0 1.2rem; }
.entrar .btn { width: 100%; margin-top: .3rem; }

.campo-ic { position: relative; display: block; }
.campo-ic .ic { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--suave); }
.campo-ic input { padding-left: 2.7rem; }

/* Feed */
.post { background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: 18px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.post-cab { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.post-cab div { display: grid; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--cor); font-weight: 700; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-texto { white-space: normal; }
.post-img { border-radius: 14px; margin: .3rem 0 .6rem; width: 100%; }
.post-acoes { display: flex; align-items: center; gap: 1rem; padding: .3rem 0 .6rem; border-bottom: 1px solid var(--vidro-borda); }
.curtir { display: flex; align-items: center; gap: .35rem; background: none; border: 0; color: var(--suave); font: inherit; font-weight: 600; cursor: pointer; padding: .3rem .2rem; }
.curtir.curtido { color: #F2557A; }
.curtir.curtido .ic { fill: currentColor; }
.comentario { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem 0 0; font-size: .92rem; }
.mini-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: .78rem; font-weight: 700; }
.link-suave { background: none; border: 0; color: var(--suave); cursor: pointer; padding: .2rem; }
.comentar { display: flex; gap: .5rem; margin-top: .8rem; }
.comentar input { padding: .6rem .85rem; }

/* Notificações */
.lista-notif { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.notif { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border-radius: 16px; background: var(--vidro); border: 1px solid var(--vidro-borda); text-decoration: none; }
.notif.nova { border-color: color-mix(in srgb, var(--cor) 60%, transparent); background: color-mix(in srgb, var(--cor) 12%, transparent); }
.notif .cresce { display: grid; gap: .2rem; }
.notif-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cor) 25%, transparent); flex: none; }
.notif-txt { color: #D2D8E5; font-size: .93rem; }

/* Perfil */
.perfil-topo { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0 .5rem; }
.perfil-topo h1 { font-size: 1.4rem; margin: 0; }
.perfil-topo p { margin: 0; }
.avatar-g { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--cor); font-size: 1.7rem; font-weight: 800; flex: none; }
.lista-progresso { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lista-progresso a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--vidro); border: 1px solid var(--vidro-borda); text-decoration: none; }
.lista-progresso .barra { margin-top: .5rem; }
.pct { font-weight: 700; color: color-mix(in srgb, var(--cor) 55%, #fff); }
.sair-app { width: 100%; margin-top: 1rem; }

/* Barra inferior */
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom, 0px)); background: var(--menu); border-top: 1px solid rgba(255,255,255,.06); }
.barra-inferior.abas-2 { grid-template-columns: repeat(2, 1fr); }
.barra-inferior a { display: grid; justify-items: center; gap: .2rem; text-decoration: none; color: #B4BACA; font-size: .78rem; font-weight: 600; }
.aba-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: transform .2s ease, background .2s ease; }
.barra-inferior a.ativo { color: color-mix(in srgb, var(--cor) 65%, #fff); }
.barra-inferior a.ativo .aba-ic { background: var(--cor); color: #fff; transform: translateY(-14px); box-shadow: 0 6px 18px color-mix(in srgb, var(--cor) 55%, transparent); margin-bottom: -14px; }
.suporte img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.suporte-menu summary { list-style: none; cursor: pointer; }
.suporte-menu summary::-webkit-details-marker { display: none; }
.suporte-opcoes { position: fixed; right: clamp(1rem, 2vw, 1.6rem); bottom: calc(164px + env(safe-area-inset-bottom, 0px)); z-index: 26; display: grid; gap: .4rem; padding: .5rem; border-radius: 14px; background: #1A1E2E; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.suporte-opcoes a { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: 10px; text-decoration: none; font-weight: 600; color: #fff; }
.suporte-opcoes a:hover { background: rgba(255,255,255,.08); }
.suporte { overflow: hidden; position: fixed; right: clamp(1rem, 2vw, 1.6rem); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 25; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--cor); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.45); }

@media (max-width: 640px) {
  .grade-aulas { gap: 1.1rem .8rem; }
  .card-aula-titulo { font-size: .85rem; }
  .nav-aulas { grid-template-columns: 1fr; }
  .nav-aulas .dir { grid-column: auto; text-align: left; }
  .banner { border-radius: 14px; margin-top: .2rem; }
  .logo-app { width: 44px; height: 44px; }
  .sino { width: 42px; height: 42px; }
  .acoes-aula .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Tema claro */
.tema-claro { --txt: #142033; --suave: #5B6781; --vidro: rgba(0,0,0,.04); --vidro-borda: rgba(0,0,0,.1); color: var(--txt); }
.tema-claro input, .tema-claro textarea { background: #fff; color: var(--txt); }
.tema-claro .card-produto, .tema-claro .card-aula-capa, .tema-claro .trilha-capa { background: #fff; }
.tema-claro .card-produto-rodape { background: rgba(255,255,255,.92); }
.tema-claro .sino, .tema-claro .voltar-circ { background: rgba(0,0,0,.05); color: var(--txt); }
.tema-claro .barra { background: rgba(0,0,0,.1); }
.tema-claro .desc-aula, .tema-claro .desc-produto, .tema-claro .notif-txt, .tema-claro .trilha-titulo { color: #34425A; }
.tema-claro .barra-inferior a { color: #4B5770; }
.tema-claro .logo-app, .tema-claro .entrar-logo { background: rgba(0,0,0,.05); }
.tema-claro .carrossel-pontos button { background: rgba(0,0,0,.2); }
.tema-claro .libera-em { background: rgba(0,0,0,.07); }

.outros-apps { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.2rem; }
.link-esqueci { color: var(--txt); font-weight: 600; font-size: .92rem; }
.entrar .outros-apps { margin: 1.2rem 0; }

/* --- Versão Netlify (site estático) --- */
.nav-aulas .so-um { grid-column: 1 / -1; }
.email-perfil { word-break: break-all; }
.lista-produtos-perfil { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.lista-produtos-perfil a { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; background: var(--vidro); border: 1px solid var(--vidro-borda); text-decoration: none; font-weight: 600; }
.lista-produtos-perfil img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.aviso-texto { white-space: pre-line; }

/* Logo com imagem: sem moldura redonda, respeita a transparência do PNG */
.entrar-logo.com-img { display: block; width: auto; height: auto; max-width: none; margin: 0 auto 1.3rem; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.entrar-logo.com-img img { display: block; width: auto; height: 120px; max-width: 240px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--cor) 45%, transparent)); }
.logo-app.com-img { display: block; width: auto; height: auto; background: none; border: 0; border-radius: 0; overflow: visible; }
.logo-app.com-img img { display: block; width: auto; height: 44px; max-width: 160px; object-fit: contain; }

/* Links dentro das descrições e avisos */
.desc-aula a, .desc-produto a, .notif-txt a { color: color-mix(in srgb, var(--cor) 55%, #fff); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.tema-claro .desc-aula a, .tema-claro .desc-produto a, .tema-claro .notif-txt a { color: color-mix(in srgb, var(--cor) 80%, #000); }