/* ==========================================================
   TREINANDO ROBÔ — infoapp (entrar + módulos)
   Mesmo DNA do funil: verde profundo, cards BRANCOS, verde da marca.
   Mobile primeiro (390px). Valores copiados do site.css do funil
   para este app não depender do site (projeto independente).
   ========================================================== */
:root{
  --fundo:#07140e; --fundo-2:#10402a;
  --paper:#fff; --ink:#141414; --ink-soft:#2a2a2a; --ink-mute:#5b5b63;
  --rule:#e4e4e7;
  --green:#0fd96b; --green-bright:#00ff85; --green-deep:#0a6b3c; --accent:#e8f5ec;
  --erro:#b3261e;
  --r-card:12px; --r-pill:9999px;
  --sh-card:0 10px 30px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --sh-green:0 8px 22px rgba(15,217,107,.35);
  --font-display:'Clash Display','General Sans',system-ui,sans-serif;
  --font-sans:'General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-sans);
  /* gradientes radiais dão profundidade; fixo pra não "cortar" ao rolar */
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%,var(--fundo-2) 0%,transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 100%,#0b2f1f 0%,transparent 60%),
    var(--fundo);
  background-attachment:fixed;
  /* sem rolagem lateral, nunca */
  overflow-x:hidden;
}
.wrap{
  max-width:560px;margin:0 auto;
  padding:calc(16px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom));
}

/* marca */
.marca{display:flex;align-items:center;gap:9px;justify-content:center;color:#fff;margin-bottom:22px;position:relative}
.marca img{border-radius:8px}
.marca b{font-family:var(--font-display);font-size:17px;letter-spacing:-.02em}
.sair{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#a9c9b8;font:inherit;font-size:14px;text-decoration:underline;
  padding:10px 4px;cursor:pointer;min-height:44px /* alvo de toque confortável */
}

/* card branco que salta do fundo escuro */
.card{background:var(--paper);border-radius:var(--r-card);padding:22px 18px;box-shadow:var(--sh-card)}
.card[hidden]{display:none}
.olho{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-deep);margin:0 0 10px
}
h1{font-family:var(--font-display);font-size:clamp(24px,6.4vw,30px);line-height:1.18;letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance}
.txt{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px}

/* formulário — letras grandes: público com pouca intimidade com tecnologia */
label{display:block;font-weight:600;font-size:15px;margin:18px 0 8px}
input[type=email]{
  width:100%;font:inherit;font-size:17px;padding:15px 14px;border-radius:var(--r-card);
  border:1.5px solid var(--rule);background:#fff;color:var(--ink)
}
input[type=email]:focus{outline:3px solid rgba(15,217,107,.4);border-color:var(--green)}
.erro{color:var(--erro);font-size:14.5px;line-height:1.45;margin:10px 0 0}
.erro[hidden],.aviso[hidden]{display:none}

.btn{
  display:block;width:100%;margin-top:16px;cursor:pointer;text-align:center;
  font-family:var(--font-display);font-size:17px;letter-spacing:-.01em;
  padding:16px 18px;border-radius:var(--r-card);border:0;
  background:var(--green);color:#06130c;box-shadow:var(--sh-green);
  transition:transform .16s,filter .16s
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:disabled{opacity:.5;cursor:wait;transform:none}
.btn:focus-visible,.btn-2:focus-visible,.aula:focus-visible,.mod-topo:focus-visible,.voltar:focus-visible{outline:3px solid var(--green-bright);outline-offset:2px}
.btn-2{
  display:block;margin:6px auto 0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:15px;color:var(--ink-mute);text-decoration:underline;padding:12px
}
.btn-2.claro{color:#cfe7d9;margin-top:14px}
.btn-2[hidden]{display:none}

.selo-ok{
  width:56px;height:56px;border-radius:50%;background:var(--green);color:#06130c;
  display:grid;place-items:center;font-size:30px;font-weight:700;margin-bottom:14px;box-shadow:var(--sh-green)
}
.rodape{text-align:center;color:#7fa38e;font-family:var(--font-mono);font-size:11px;margin-top:26px}

/* ---------- app.html (visual de aplicativo) ---------- */
/* A barra inferior é fixa: o conteúdo precisa de folga embaixo, senão o último card fica escondido atrás dela */
:root{--nav-h:72px}
.app{font-size:17px;line-height:1.5}
.app .wrap{padding-bottom:calc(var(--nav-h) + 36px + env(safe-area-inset-bottom))}
.app .marca{justify-content:flex-start;margin-bottom:18px}
.titulo-pagina{color:#fff;margin:0 0 6px}
.sub-pagina{color:#b4cdbf;font-size:17px;line-height:1.5;margin:0 0 20px}
.aviso{
  background:#fdecea;color:#6e1410;border-left:4px solid var(--erro);border-radius:10px;
  padding:14px;font-size:16px;line-height:1.5;margin:0 0 16px
}
.aviso.ok{background:#e8f5ec;color:#0b3d24;border-color:var(--green-deep)}
.carregando{color:#b4cdbf;text-align:center;padding:30px 0;font-size:17px}
.carregando[hidden],.tela[hidden],.nav[hidden],.convite[hidden],.continuar[hidden]{display:none}
.lista{display:grid;gap:14px}
.app :focus-visible{outline:3px solid var(--green-bright);outline-offset:2px}
.card :focus-visible,.modulo :focus-visible{outline-color:var(--green-deep)}

/* botões do app: sempre com texto, 56px de altura (dedo, pressa, celular simples) */
.app .btn{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:14px;
  font-size:19px;text-decoration:none;
}
.app .btn:active{transform:scale(.98)}
.btn-peq{
  flex:none;min-height:48px;padding:0 18px;border:0;border-radius:var(--r-card);cursor:pointer;
  background:var(--green);color:#06130c;font-family:var(--font-display);font-size:17px
}
.btn-zap{background:#fff!important;color:var(--green-deep)!important;border:2px solid var(--green-deep);box-shadow:none!important}

/* ---- Continuar de onde parei: o botão mais importante da tela ---- */
.continuar{
  appearance:none;-webkit-appearance:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--green);color:#06130c;border:0;border-radius:16px;padding:16px;min-height:84px;cursor:pointer;
  box-shadow:var(--sh-green);margin:0 0 18px;font:inherit
}
.continuar:active{transform:scale(.99)}
.continuar-play{flex:none;width:52px;height:52px;border-radius:50%;background:#06130c;display:grid;place-items:center}
.continuar-play svg{width:24px;height:24px;fill:var(--green-bright);margin-left:3px}
.continuar-txt{display:flex;flex-direction:column;min-width:0}
.continuar-txt b{font-family:var(--font-display);font-size:21px;line-height:1.15;letter-spacing:-.01em}
.continuar-txt span{font-size:15.5px;margin-top:3px;overflow-wrap:anywhere}

/* ---- convite de instalação ---- */
.convite{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;align-items:center;
  background:#0b1d14;border:1.5px solid #1f4631;border-radius:14px;padding:14px;margin:0 0 16px;color:#fff
}
.ic,.nav svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.convite .ic{width:34px;height:34px;color:var(--green-bright)}
.convite-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.convite-txt b{font-family:var(--font-display);font-size:17px}
.convite-txt span{font-size:14.5px;color:#b4cdbf}
.convite-x{
  grid-column:1/-1;justify-self:center;background:none;border:0;color:#b4cdbf;font:inherit;font-size:15px;
  text-decoration:underline;min-height:44px;padding:0 12px;cursor:pointer
}

/* ---- cards de módulo ---- */
.modulo{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden;border:2px solid transparent}
.mod-topo{
  appearance:none;-webkit-appearance:none;width:100%;border:0;background:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer;padding:16px;display:flex;gap:14px;align-items:flex-start;min-height:88px
}
.mod-logo{flex:none;width:60px;height:60px;border-radius:14px;display:block}
.mod-info{flex:1;min-width:0}
.mod-info h2{font-family:var(--font-display);font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0 0 4px;overflow-wrap:anywhere}
.mod-info p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-mute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modulo.aberto .mod-info p{-webkit-line-clamp:unset;display:block}
.seta{flex:none;align-self:center;width:26px;height:26px;color:var(--ink-mute);transition:transform .2s}
.seta svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.modulo.aberto .seta{transform:rotate(90deg)}
/* progresso: barra + número escrito ("1 de 3"), nunca só a barra */
.prog{display:flex;align-items:center;gap:10px;margin-top:10px}
.prog-barra{flex:1;height:12px;border-radius:99px;background:#dfe5e1;overflow:hidden}
.prog-barra span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--green-bright))}
.prog-txt{font-family:var(--font-mono);font-size:13.5px;color:var(--ink);white-space:nowrap;font-weight:600}
.selo{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:99px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;background:#ececee;color:#3c3c43}

.mod-corpo{border-top:1px solid var(--rule);padding:8px 10px 12px}
.mod-corpo[hidden]{display:none}
.aula{
  appearance:none;-webkit-appearance:none;width:100%;border:0;background:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;min-height:68px
}
.aula:hover{background:var(--accent)}
.aula + .aula{border-top:1px solid #efeff1}
.aula .marca-aula{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#06130c
}
.aula .marca-aula svg{width:18px;height:18px;fill:currentColor;margin-left:2px}
.aula.vista .marca-aula{background:var(--green-deep);color:#fff}
.aula.vista .marca-aula svg{margin:0;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.aula.breve{cursor:default}
.aula.breve .marca-aula{background:#e4e7e5;color:#5b5b63}
.aula .nome{flex:1;min-width:0;font-weight:600;font-size:17px;line-height:1.3}
.aula .dur{flex:none;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-mute);text-align:right}

/* bloqueado: continua branco e legível (é venda, não erro) — tracejado + selo + preço + botão */
.modulo.bloqueado{border:2px dashed #9aa5a0}
.mod-trava{padding:4px 16px 18px;border-top:1px solid var(--rule)}
.mod-trava ul{list-style:none;margin:6px 0 12px;padding:0}
.mod-trava li{display:flex;gap:10px;align-items:center;padding:10px 0;font-size:16px;color:var(--ink-mute);border-top:1px solid #efeff1}
.mod-trava li:first-child{border-top:0}
.mod-trava li svg,.cad{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.preco-linha{font-size:16px;color:var(--ink-mute);margin:0}
.preco-linha b{display:block;font-family:var(--font-display);font-size:30px;color:var(--green-deep);letter-spacing:-.02em;line-height:1.2}

/* ---- blocos de Minha conta / Comunidade ---- */
.bloco{margin:0 0 14px;padding:18px}
.bloco .rotulo{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin:0 0 6px;font-weight:600}
.bloco .valor{margin:0;font-size:17px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.bloco .btn{margin-top:14px}
.card.bloco h2{font-family:var(--font-display);font-size:22px;line-height:1.2;margin:0 0 8px;letter-spacing:-.02em}
.status{list-style:none;margin:0;padding:0}
.status li{display:flex;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #efeff1;font-size:17px;line-height:1.3}
.status li:first-child{border-top:0;padding-top:2px}
.status li span{flex:1;min-width:0}
.status em{flex:none;font-style:normal;font-family:var(--font-mono);font-size:12.5px;font-weight:600;text-transform:uppercase;padding:3px 10px;border-radius:99px}
.status .sim em{background:#e8f5ec;color:#0a6b3c}
.status .nao em{background:#ececee;color:#3c3c43}
.btn-sair{
  display:block;width:100%;min-height:56px;margin-top:6px;background:none;border:2px solid #b4cdbf;color:#fff;
  border-radius:var(--r-card);font:inherit;font-size:17px;font-weight:600;cursor:pointer
}
.com-logo{width:72px;height:72px;border-radius:16px;display:block;margin-bottom:12px}
.com-lista{list-style:none;margin:12px 0 0;padding:0}
.com-lista li{display:flex;gap:10px;align-items:center;padding:9px 0;color:var(--ink-mute);font-size:16px}
.com-lista svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bloco.bloqueado{border:2px dashed #9aa5a0}

/* ---- BARRA DE NAVEGAÇÃO INFERIOR ---- */
/* Ícone SEMPRE com palavra embaixo. 3 abas = cada uma ocupa 1/3 da largura (alvo enorme).
   Aba ativa: cor viva + negrito + barrinha no topo (não depender só da cor). */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;
  display:flex;background:#0b1d14;border-top:1px solid #1f4631
}
.nav a{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--nav-h);color:#b4cdbf;text-decoration:none;font-size:15px;font-weight:500;position:relative;
  -webkit-tap-highlight-color:transparent
}
.nav a svg{width:28px;height:28px}
.nav a[aria-current="page"]{color:var(--green-bright);font-weight:700}
.nav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:4px;border-radius:0 0 4px 4px;background:var(--green-bright)}
.nav .ponto{position:absolute;top:10px;left:calc(50% + 12px);width:12px;height:12px;border-radius:50%;background:var(--green-bright);border:2px solid #0b1d14}
.nav .ponto[hidden]{display:none}

/* ---- player (tela cheia) ---- */
.player{position:fixed;inset:0;z-index:60;background:var(--fundo);display:flex;flex-direction:column;overflow-y:auto;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.player[hidden]{display:none}
.player-topo{display:flex;align-items:center;padding:12px 14px}
.voltar{background:var(--paper);border:0;border-radius:var(--r-pill);font:inherit;font-weight:600;font-size:16px;padding:12px 18px;cursor:pointer;min-height:48px;color:var(--ink)}
.player-titulo{font-family:var(--font-display);font-size:20px;line-height:1.25;color:#fff;margin:4px 16px 12px}
.player-video{width:100%;aspect-ratio:16/9;background:#000}
.player-video iframe{width:100%;height:100%;border:0;display:block}
.player-acoes{padding:6px 16px 24px}

/* ---- folha de instalação ---- */
.folha{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center}
.folha[hidden]{display:none}
.folha-caixa{background:#fff;color:var(--ink);width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto}
.folha-caixa h2{font-family:var(--font-display);font-size:24px;margin:0 0 12px;letter-spacing:-.02em}
.passos{margin:0;padding:0;list-style:none;counter-reset:p}
.passos li{counter-increment:p;position:relative;padding:10px 0 10px 46px;font-size:18px;line-height:1.4;min-height:56px}
.passos li::before{content:counter(p);position:absolute;left:0;top:8px;width:34px;height:34px;border-radius:50%;background:var(--green);color:#06130c;display:grid;place-items:center;font-family:var(--font-display);font-size:18px}
.passos svg{display:inline-block;vertical-align:-5px;width:24px;height:24px;fill:none;stroke:var(--green-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* "Não consigo entrar": discreto pra não competir com o botão principal,
   mas sempre visível — é a saída de quem digitou o e-mail errado na compra */
.ajuda{margin:14px 0 0;text-align:center}
.ajuda a{color:#5b7066;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.ajuda a:hover{color:#0a6b3c}
.bloco .preco-linha{margin-top:14px}