/* =======================================================
   css/curso.css — páginas públicas de UM curso (modulo.php) e de uma
   FORMAÇÃO (formacao.php). Redesenho de 01/10/2026.

   Carregue DEPOIS de css/home.css: cabeçalho (.topo), botões (.bt), caixa
   (.box) e rodapé (.rodape) vêm de lá. Tudo daqui leva o prefixo "p" para não
   esbarrar nas classes da home (.hero, .passos, .curso, .formacao).
   EXCEÇÃO: .aula (linha de aula) e .mod (linha de módulo) mantêm o nome —
   os testes contam essas classes para saber quantas aulas/módulos a página mostra.

   Desenho: faixa escura com o que é o curso; à direita, o cartão de compra,
   que acompanha a rolagem no computador. No celular o cartão vem logo depois
   da faixa e, quando sai da tela, uma barra fixa embaixo mantém o botão à mão.
======================================================= */
body.pcurso{background:var(--fundo);overflow-x:hidden}

.pgrade{display:grid;grid-template-columns:minmax(0,1fr) 372px;grid-template-rows:auto 1fr;column-gap:44px;align-items:start}
/* o fundo da faixa: um item da grade que ocupa a 1ª linha e sangra até as bordas da tela */
.pfundo{grid-column:1 / -1;grid-row:1;align-self:stretch;margin:-72px calc(50% - 50vw) 0;
    background:
      radial-gradient(760px 420px at 10% 12%, rgba(243,122,18,.19), transparent 62%),
      radial-gradient(900px 560px at 100% 120%, rgba(46,160,110,.26), transparent 60%),
      linear-gradient(160deg,#061F16 0%, var(--noite) 38%, #0F4A35 100%)}
.phero{grid-column:1;grid-row:1;position:relative;color:#fff;padding:40px 0 46px;min-width:0}
.pmain{grid-column:1;grid-row:2;padding:34px 0 80px;min-width:0}
.plado{grid-column:2;grid-row:1 / span 2;position:sticky;top:86px;padding:40px 0 30px;z-index:2}

/* ---------------- faixa ---------------- */
.pmigalha{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.62);margin:0 0 16px}
.pmigalha a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600}
.pmigalha a:hover{color:#fff;text-decoration:underline}
.pmigalha svg{width:13px;height:13px;stroke:currentColor;opacity:.6;flex:none}
.petq{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.petq span{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.petq span.lar{background:var(--laranja);border-color:var(--laranja);color:#1D1206}
.phero h1{font-size:clamp(1.65rem,3.1vw,2.5rem);line-height:1.13;letter-spacing:-.03em;font-weight:800;margin:0 0 14px;text-wrap:balance}
.phero .plead{font-size:1.04rem;line-height:1.6;color:rgba(255,255,255,.8);margin:0 0 20px;max-width:62ch}
.pfatos{display:flex;gap:10px 22px;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:.92rem;color:rgba(255,255,255,.9);font-weight:600}
.pfatos li{display:inline-flex;align-items:center;gap:8px}
.pfatos svg{width:18px;height:18px;stroke:#7EE2B0;flex:none}
.pprof{margin:18px 0 0;font-size:.9rem;color:rgba(255,255,255,.72)}
.pprof b{color:#fff}

/* ---------------- cartão de compra ---------------- */
.pcompra{background:#fff;border:1px solid var(--borda);border-radius:20px;box-shadow:var(--sombra-2);overflow:hidden}
.pcompra .pcapa{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#F7F6F0}
.pcompra .pcapa.sem{display:grid;place-items:center;background:linear-gradient(135deg,var(--verde),var(--noite));color:#fff;font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.pcompra .pdentro{padding:20px 22px 22px}
.ppreco{font-size:2.3rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--verde-esc)}
.ppreco-sub{display:block;font-size:.84rem;color:var(--muted);margin:6px 0 16px;line-height:1.45}
.pcompra .bt{width:100%;margin-top:8px}
.pcompra .bt:first-of-type{margin-top:0}
.pfeito{display:flex;align-items:center;gap:10px;background:#ECFDF3;border:1px solid #ABEFC6;color:#085D3A;border-radius:12px;padding:12px 14px;font-weight:800;font-size:.95rem;margin:0 0 14px}
.pfeito svg{width:20px;height:20px;stroke:#079455;flex:none}
.pfeito small{display:block;font-weight:600;color:#17694A;font-size:.8rem}
.pconta{font-size:.86rem;color:var(--muted);text-align:center;margin:12px 0 0}
.pconta a{color:var(--verde);font-weight:800;text-decoration:none}
.pconta a:hover{text-decoration:underline}
.pinclui{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--borda);display:grid;gap:10px}
.pinclui li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:.88rem;line-height:1.45;color:#2A3A33}
.pinclui svg{width:18px;height:18px;stroke:var(--verde);margin-top:1px}
.pseguro{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:var(--muted);margin:14px 0 0;line-height:1.45}
.pseguro svg{width:15px;height:15px;stroke:#079455;flex:none;margin-top:1px}
.pandamento{margin:0 0 14px}
.pandamento b{display:block;font-size:.95rem;margin-bottom:8px}
.pandamento .barra i{width:0}
.pempresa{display:block;margin:12px 0 0;padding:14px 16px;border-radius:14px;border:1px dashed var(--verde-borda);background:var(--verde-claro);
    font-size:.86rem;line-height:1.5;color:#14432F;text-decoration:none}
.pempresa b{display:block;color:var(--verde-esc)}
.pempresa:hover{border-color:var(--verde)}

/* ---------------- conteúdo ---------------- */
.pmain h2{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;margin:38px 0 6px;color:var(--texto)}
.pmain > h2:first-child,.pmain > .pliga:first-child + h2{margin-top:0}
.psub{color:var(--muted);font-size:.95rem;margin:0 0 16px;max-width:68ch}
.pcard{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra-1);padding:22px 24px;margin:0 0 14px}
.pcard p{margin:0 0 10px;font-size:.95rem;line-height:1.65;color:#2A3A33}
.pcard p:last-child{margin-bottom:0}
.pcard ul{margin:8px 0 10px;padding-left:20px}
.pcard li{margin-bottom:6px;font-size:.94rem;line-height:1.55;color:#2A3A33}
.pcard a{color:var(--verde);font-weight:700}
.pcard .pmiudo{font-size:.85rem;color:var(--muted)}

/* ligação com outra página (formação, pré-requisito) */
.pliga{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--verde-claro);border:1px solid var(--verde-borda);
    border-radius:var(--raio);padding:18px 20px;margin:0 0 14px}
.pliga .ic{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center}
.pliga .ic svg{width:21px;height:21px;stroke:var(--verde)}
.pliga strong{display:block;font-size:1rem;line-height:1.4;color:var(--verde-esc)}
.pliga strong a{color:var(--verde);text-decoration:none}
.pliga strong a:hover{text-decoration:underline}
.pliga div div{font-size:.9rem;line-height:1.55;color:#24493A;margin-top:4px}
.pliga.req{background:#FFF8EC;border-color:#F3D7A8}
.pliga.req .ic svg{stroke:var(--laranja-esc)}
.pliga.req strong{color:#7A4508}
.pliga.req strong a{color:#9A5200}
.pliga.req div div{color:#6B4A1E}

/* o que você sabe ao terminar */
.psabe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.psabe li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.93rem;line-height:1.5;color:#2A3A33;margin:0}
.psabe svg{width:18px;height:18px;stroke:#079455;stroke-width:2.6;margin-top:2px}
.pmais{margin-top:14px}
.pmais summary{cursor:pointer;font-weight:800;font-size:.9rem;color:var(--verde);list-style:none;display:inline-flex;align-items:center;gap:6px}
.pmais summary::-webkit-details-marker{display:none}
.pmais summary::after{content:"+";font-size:1.1rem;line-height:1}
.pmais[open] summary::after{content:"–"}
.pmais[open] summary{margin-bottom:14px}

/* aulas */
.aula{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--borda);border-radius:14px;
    padding:14px 18px;margin:0 0 8px;box-shadow:var(--sombra-1)}
.aula .n{width:42px;height:42px;border-radius:12px;background:var(--verde-claro);color:var(--verde);display:grid;place-items:center;font-weight:800;font-size:1rem}
.aula b{display:block;font-size:.98rem;line-height:1.4;color:var(--texto)}
.aula span{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}

/* como funciona */
.pcomo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcomo div{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra-1);padding:20px 22px}
.pcomo .ic{width:40px;height:40px;border-radius:11px;background:var(--creme);display:grid;place-items:center;margin-bottom:12px}
.pcomo .ic svg{width:20px;height:20px;stroke:var(--laranja-esc)}
.pcomo b{display:block;font-size:1rem;margin-bottom:4px}
.pcomo p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* etapas da formação */
.petapas{display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:et;margin:0;padding:0;list-style:none}
.petapas li{position:relative;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra-1);padding:18px 20px 20px 66px;counter-increment:et}
.petapas li::before{content:counter(et);position:absolute;left:18px;top:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--verde);color:#fff;font-weight:800;font-size:.95rem}
.petapas li:last-child::before{background:var(--laranja);color:#1D1206}
.petapas b{display:block;font-size:.96rem;line-height:1.3;margin-bottom:6px}
.petapas span{display:block;font-size:.87rem;line-height:1.55;color:var(--muted)}

/* módulos da formação */
.mod{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
    box-shadow:var(--sombra-1);padding:18px 20px;margin:0 0 10px;transition:border-color .15s}
.mod:hover{border-color:var(--verde-borda)}
.mod .num{width:46px;height:46px;border-radius:13px;background:var(--verde-claro);color:var(--verde);display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.mod.ok{border-color:#ABEFC6;background:#FAFEFC}
.mod.ok .num{background:#12B76A;color:#fff}
.mod.ok .num svg{width:20px;height:20px;stroke:#fff;stroke-width:3}
.mod h3{margin:0 0 4px;font-size:1.02rem;line-height:1.35;font-weight:800;letter-spacing:-.01em}
.mod p{margin:0 0 8px;font-size:.89rem;line-height:1.55;color:#3A4A43}
.mod .meta{font-size:.82rem;color:var(--muted)}
.mod .meta a{color:var(--verde);font-weight:700;text-decoration:none;white-space:nowrap}
.mod .meta a:hover{text-decoration:underline}
.mod .acao{text-align:right;display:grid;gap:8px;justify-items:end;min-width:132px}
.mod .acao .preco{font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--verde-esc);line-height:1}
.mod .acao .bt{box-shadow:none}
.pselo{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;border-radius:999px;padding:6px 12px;white-space:nowrap}
.pselo.ok{background:#ECFDF3;border:1px solid #ABEFC6;color:#067647}
.pselo.breve{background:#F2F4F3;border:1px solid var(--borda);color:var(--muted)}

/* nota legal */
.plegal{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--raio);background:var(--verde-claro);border:1px solid var(--verde-borda);margin:26px 0 0}
.plegal svg{flex:none;width:22px;height:22px;stroke:var(--verde);margin-top:2px}
.plegal p{margin:0;font-size:.92rem;line-height:1.6;color:#1E3B30}
.pfim{color:var(--suave);font-size:.82rem;line-height:1.6;margin:18px 0 0}

/* barra de compra do celular */
.pbarra{display:none}

/* ---------------- responsivo ---------------- */
@media (max-width:1020px){
    .pgrade{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;column-gap:0}
    .phero{padding:30px 0 96px}
    .plado{grid-column:1;grid-row:2;position:static;padding:0;margin-top:-70px}
    .pcompra{display:grid;grid-template-columns:220px 1fr}
    .pcompra .pcapa{height:100%;aspect-ratio:auto;min-height:200px}
    body.pcurso .rodape{padding-bottom:96px}
    .pmain{grid-row:3;padding-top:30px}
    .pbarra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:14px;align-items:center;justify-content:space-between;
        background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--borda);box-shadow:0 -10px 30px -16px rgba(10,40,28,.35);
        padding:10px 16px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .22s}
    .pbarra.visivel{transform:none}
    .pbarra .q{min-width:0;line-height:1.2}
    .pbarra .q b{display:block;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:var(--verde-esc)}
    .pbarra .q span{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pbarra .bt{flex:0 0 auto;height:46px}
}
@media (max-width:640px){
    .phero{padding:22px 0 86px}
    .phero .plead{font-size:.98rem}
    .pfatos{font-size:.88rem;gap:8px 16px}
    .pcompra{display:block}
    .pcompra .pcapa{aspect-ratio:16/9;min-height:0;height:auto}
    .pcompra .pdentro{padding:18px}
    .ppreco{font-size:2rem}
    .pmain h2{font-size:1.18rem;margin-top:30px}
    .pcard{padding:18px 16px}
    .psabe,.pcomo,.petapas{grid-template-columns:1fr}
    .pliga{grid-template-columns:1fr;padding:16px}
    .pliga .ic{width:38px;height:38px}
    .aula{padding:12px 14px;grid-template-columns:36px 1fr;gap:12px}
    .aula .n{width:36px;height:36px;border-radius:10px;font-size:.9rem}
    .mod{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:16px;align-items:start}
    .mod .num{width:38px;height:38px;border-radius:11px;font-size:.95rem}
    .mod .acao{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;text-align:left;min-width:0;
        border-top:1px solid var(--borda);padding-top:12px}
    .mod .acao .bt{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){ .pbarra{transition:none} }
@media print{ .topo,.plado,.pbarra,.rodape{display:none} .pfundo{display:none} .phero{color:#000} .pgrade{display:block} }