/* Página de cada curso da Vitrine SAPDH. A cor do curso vem do <body>: --cor (escura) e --cor-viva (brilho).
   Botão, janelinha, selo de Black Friday e entrada com movimento seguem os da vitrine (index.html). */
:root{--noite:#121013;--tinta:#1f1b1d;--ouro:#d9ad4f;--ouro-claro:#f5dc97;--ouro-escuro:#9a7127;--vermelho:#ea1c24;--vermelho-escuro:#b50c13;--texto-claro:#d2cbc4;--texto-cinza:#4b4749;--cor:#3d1d78;--cor-viva:#6a3fc0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--noite);color:#fff;font:16px/1.55 'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit}button{font:inherit;cursor:pointer}:focus-visible{outline:3px solid var(--ouro-claro);outline-offset:3px}h1,h2,h3,p{margin-top:0}
.container{width:min(1120px,calc(100% - 40px));margin-inline:auto;position:relative;z-index:2}
.estreito{max-width:780px;margin-inline:auto}

/* ---- barra de cima ---- */
.barra{position:relative;z-index:5;padding:16px 0}
.barra .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.voltar{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--texto-claro);text-decoration:none;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.voltar:hover{background:rgba(255,255,255,.12)}
.barra img{width:52px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}

/* ---- topo ---- */
.topo{position:relative;overflow:hidden;isolation:isolate;padding:10px 0 80px;background:radial-gradient(90% 70% at 85% 30%,var(--cor) 0,rgba(0,0,0,0) 62%),radial-gradient(70% 60% at 0% 100%,rgba(217,173,79,.14) 0,rgba(217,173,79,0) 60%),linear-gradient(180deg,#1c181a 0,#171315 100%)}
.topo:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;background-image:repeating-linear-gradient(120deg,transparent 0 88px,#ecd08e 89px 90px)}
.brilho{position:absolute;z-index:0;border-radius:50%;pointer-events:none;will-change:transform}
.b1{width:620px;height:620px;right:-160px;top:-80px;background:radial-gradient(circle,var(--cor-viva) 0,rgba(0,0,0,0) 66%);opacity:.45;animation:flutua1 21s ease-in-out infinite alternate}
.b2{width:520px;height:520px;left:-180px;bottom:-200px;background:radial-gradient(circle,rgba(217,173,79,.22) 0,rgba(217,173,79,0) 66%);animation:flutua2 25s ease-in-out infinite alternate}
@keyframes flutua1{to{transform:translate3d(-90px,70px,0) scale(1.1)}}
@keyframes flutua2{to{transform:translate3d(110px,-60px,0) scale(1.12)}}
.topo-grade{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:56px;padding-top:24px}
.rotulo{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:800;color:var(--ouro-claro)}
.rotulo:before{content:'';width:36px;height:1px;background:linear-gradient(90deg,rgba(217,173,79,0),var(--ouro))}
.centro .rotulo:after{content:'';width:36px;height:1px;background:linear-gradient(90deg,var(--ouro),rgba(217,173,79,0))}
.clara .rotulo{color:var(--ouro-escuro)}
.topo h1{font-weight:800;font-style:italic;font-size:clamp(36px,5.4vw,62px);line-height:1.04;letter-spacing:-.02em;margin:14px 0 16px}
.topo h1 em,.titulo em{font-style:italic;background:linear-gradient(100deg,#f8e3a6 0,#d9ad4f 38%,#fff3c9 50%,#d9ad4f 62%,#b8862b 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:reluz 7s ease-in-out infinite}
.clara .titulo em{background-image:linear-gradient(100deg,#7d5a1b 0,#b98a2c 38%,#e2bd62 50%,#b98a2c 62%,#7d5a1b 100%)}
@keyframes reluz{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.promessa{font-size:18px;color:var(--texto-claro);max-width:540px;margin-bottom:26px}
.selos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.selos li{font-size:12.5px;font-weight:700;color:#efe8de;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.nota-botao{font-size:12.5px;color:#a9a19a;margin:12px 0 0}
.arte{position:relative;width:min(440px,100%);margin-left:auto}
.arte:before{content:'';position:absolute;inset:-9%;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,rgba(245,220,151,0),rgba(245,220,151,.5),rgba(245,220,151,0) 30%,var(--cor-viva) 55%,rgba(245,220,151,0) 80%);filter:blur(28px);opacity:.7;animation:gira 14s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.arte img{width:100%;height:auto;border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(245,220,151,.25);animation:paira 7s ease-in-out infinite}
@keyframes paira{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- seções ---- */
.secao{position:relative;overflow:hidden;padding:88px 0}
.escura{background:radial-gradient(80% 60% at 100% 0,var(--cor) 0,rgba(0,0,0,0) 60%),linear-gradient(180deg,#1a1618 0,#151113 100%)}
.clara{color:var(--tinta);background:radial-gradient(90% 55% at 50% 0,#fff 0,rgba(255,255,255,0) 62%),linear-gradient(165deg,#eef0f2 0,#d9dbdf 55%,#c9ccd1 100%)}
.clara:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(rgba(31,27,29,.14) 1px,transparent 1.3px);background-size:18px 18px;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 75%);mask-image:linear-gradient(180deg,#000 0,transparent 75%)}
.linha-ouro{position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:linear-gradient(90deg,transparent 0,var(--ouro) 18%,var(--ouro-claro) 50%,var(--ouro) 82%,transparent 100%);box-shadow:0 0 18px 2px rgba(217,173,79,.5)}
.cabeca{text-align:center;margin-bottom:44px}
.titulo{font-weight:800;font-style:italic;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.02em;margin:12px auto 10px;max-width:820px}
.cabeca p{color:var(--texto-claro);max-width:620px;margin:0 auto}
.clara .cabeca p{color:var(--texto-cinza)}

/* para quem é */
.perfis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.perfil{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:16px;padding:20px;box-shadow:0 14px 30px rgba(45,38,30,.12),0 0 0 1px rgba(0,0,0,.03);font-size:15px;line-height:1.45;color:#35302f}
.perfil i{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--cor-viva),var(--cor));color:#fff;font-style:normal;font-weight:900;font-size:17px;box-shadow:0 6px 14px rgba(0,0,0,.18)}

/* o que vai aprender */
.topicos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;counter-reset:topico}
.topico{counter-increment:topico;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#ece5dc;font-size:15.5px;line-height:1.45}
.topico:before{content:counter(topico,decimal-leading-zero);flex-shrink:0;font:italic 800 15px/1 'Segoe UI',Arial,sans-serif;color:var(--ouro-claro);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(245,220,151,.5);background:radial-gradient(circle,var(--cor) 0,rgba(0,0,0,0) 70%)}

/* como funciona */
.infos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.info{background:#fff;border-radius:16px;padding:22px 20px;box-shadow:0 14px 30px rgba(45,38,30,.12);border-top:4px solid var(--cor-viva)}
.info small{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--ouro-escuro);margin-bottom:8px}
.info strong{display:block;font-size:17px;line-height:1.3;color:var(--tinta)}
.info span{display:block;font-size:13.5px;color:#5b5759;margin-top:6px}

/* quem ensina */
.professor{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center}
.professor figure{margin:0;position:relative}
.professor img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:200px 200px 18px 18px;border:1px solid rgba(245,220,151,.4);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.professor h3{font-size:26px;font-style:italic;font-weight:800;margin-bottom:4px}
.professor .cargo{color:var(--ouro-claro);font-weight:700;font-size:14px;margin-bottom:14px}
.professor p{color:var(--texto-claro)}

/* depoimentos */
.depos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.depo{margin:0}
.depo-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 16px 36px rgba(45,38,30,.25)}
.depo-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.depo-video button{position:absolute;inset:0;width:100%;border:0;padding:0;background:#000;display:grid;place-items:center}
.depo-video button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.depo-video button span{position:relative;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ouro-claro),var(--ouro));color:#2a2010;box-shadow:0 0 0 10px rgba(245,220,151,.2),0 12px 26px rgba(0,0,0,.5)}
.depo figcaption{margin-top:10px;text-align:center;font-size:14px;font-weight:700;color:#35302f}

/* perguntas */
.perguntas{display:grid;gap:12px}
.perguntas details{border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.perguntas summary{cursor:pointer;list-style:none;padding:19px 22px;font-weight:700;color:#f1ebe2;display:flex;justify-content:space-between;gap:18px}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary:after{content:'+';font-size:22px;line-height:20px;color:var(--ouro)}
.perguntas details[open] summary:after{content:'−'}
.perguntas details p{margin:0;padding:0 22px 20px;color:var(--texto-claro);font-size:15px}

/* chamada final */
.final{position:relative;overflow:hidden;text-align:center;padding:84px 0;background:radial-gradient(70% 90% at 50% 0,var(--cor-viva) 0,rgba(0,0,0,0) 70%),linear-gradient(180deg,var(--cor) 0,#141113 100%)}
.final .titulo{max-width:760px}
.final p{color:#e7dfd6;max-width:560px;margin:0 auto 28px}
.final .botao{display:inline-flex;margin:0 auto}

/* ---- botão (igual à vitrine) ---- */
.botao{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 30px;border:0;border-radius:999px;background:linear-gradient(180deg,#f43d43 0,var(--vermelho) 45%,var(--vermelho-escuro) 100%);color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;text-transform:uppercase;text-align:center;box-shadow:0 10px 24px rgba(234,28,36,.4),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s,box-shadow .2s}
.botao:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:passa 5s ease-in-out infinite}
@keyframes passa{0%,64%{left:-60%}100%{left:130%}}
.botao:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(234,28,36,.55),inset 0 1px 0 rgba(255,255,255,.25)}
/* grupo = verde (WhatsApp), igual à vitrine */
.botao.verde{background:linear-gradient(180deg,#3bcf6a 0,#1fa64b 45%,#137a34 100%);box-shadow:0 10px 24px rgba(31,166,75,.38),inset 0 1px 0 rgba(255,255,255,.25)}
.botao.verde:hover{box-shadow:0 14px 30px rgba(31,166,75,.52),inset 0 1px 0 rgba(255,255,255,.25)}
.botao.grande{width:100%;min-height:54px;font-size:15px}
.botao[disabled]{opacity:.75;cursor:wait}

/* ---- rodapé ---- */
.rodape{text-align:center;padding:60px 0 34px;background:radial-gradient(70% 80% at 50% 0,#2b2213 0,rgba(43,34,19,0) 70%),var(--noite)}
.gtec{width:min(280px,72%);margin:0 auto 26px;animation:paira 7s ease-in-out infinite}
.gtec img{width:100%;height:auto;filter:drop-shadow(0 16px 32px rgba(0,0,0,.7))}
.rodape p{margin:0 0 6px;font-size:12px;color:#8f8984}.rodape a{color:#c9c1b8}

/* ---- selo de Black Friday na arte do topo (o mesmo da vitrine, maior) ---- */
.bf{position:absolute;left:-18px;top:-18px;z-index:3;width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:19px;text-align:center;color:#fff;pointer-events:none;background:radial-gradient(circle at 34% 28%,#3b3b3d 0,#141415 58%,#050505 100%);border:4px solid #ffd60a;box-shadow:0 10px 22px rgba(0,0,0,.45),0 0 0 2px rgba(0,0,0,.35),0 0 18px rgba(255,214,10,.35);transform-origin:50% -8px;animation:bf-balanca 3.6s ease-in-out infinite}
.bf:before{content:'';position:absolute;top:6px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff5a5f,#a40e14);box-shadow:0 0 0 1.5px rgba(255,255,255,.25)}
.bf small{font:700 7.5px/1 'Segoe UI',Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#d9d9d9}
.bf b{font:400 21px/.86 Impact,Haettenschweiler,'Arial Narrow Bold','Roboto Condensed',sans-serif;font-stretch:condensed;letter-spacing:.3px;text-transform:uppercase;margin-top:3px;text-shadow:0 1px 0 #000}
.bf i{position:absolute;right:13px;bottom:9px;font:800 8.5px/1 'Segoe UI',Arial,sans-serif;font-style:normal;letter-spacing:.5px;text-transform:uppercase;background:#e3121b;color:#fff;padding:2px 5px 2px 7px;border-radius:2px 3px 3px 2px;transform:rotate(-14deg);box-shadow:0 2px 4px rgba(0,0,0,.4)}
@keyframes bf-balanca{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* ---- entrada com movimento ---- */
html.anima .revela{opacity:0;transform:translate3d(0,30px,0)}
html.anima .revela.visivel{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--atraso,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}

/* ---- janelinha do cadastro (igual à vitrine) ---- */
.janela{border:0;padding:0;margin:auto;background:transparent;color:#fff;width:min(440px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:visible}
.janela::backdrop{background:rgba(8,6,8,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.janela-corpo{position:relative;background:linear-gradient(165deg,#2a2326 0,#171315 100%);border:1px solid rgba(217,173,79,.38);border-radius:20px;padding:30px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(217,173,79,.08)}
.janela[open] .janela-corpo{animation:abre .38s cubic-bezier(.2,.8,.2,1)}
@keyframes abre{from{opacity:0;transform:translateY(26px) scale(.97)}}
.fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1}
.fechar:hover{background:rgba(255,255,255,.16)}
.janela .rotulo{font-size:11px;letter-spacing:2.5px}
.janela h2{font-style:italic;font-weight:800;font-size:25px;line-height:1.15;margin:10px 34px 8px 0}
.janela .apoio{color:var(--texto-claro);font-size:14px;margin:0 0 20px}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:700;color:#ebe4dc;margin-bottom:6px}
.campo input{width:100%;height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}
.campo input::placeholder{color:rgba(255,255,255,.35)}
.campo input:focus{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(217,173,79,.25)}
.campo input[aria-invalid=true]{border-color:#ff6b72}
.erro{display:block;color:#ff9095;font-size:12.5px;margin-top:6px}
.erro:empty{display:none}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--texto-claro);margin:4px 0 18px;cursor:pointer}
.aceite input{flex-shrink:0;width:20px;height:20px;margin:0;accent-color:var(--ouro)}
.aceite a{color:var(--ouro-claro)}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nota{font-size:11.5px;color:#9b948e;text-align:center;margin:12px 0 0}
.pronto{text-align:center;padding:10px 0 4px}
.pronto b{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,var(--ouro-claro),var(--ouro));color:#2a2010;font-size:30px}
.pronto p{color:var(--texto-claro);font-size:15px;margin:0}

/* no computador, colunas pela quantidade de itens (o gerador manda --colunas) */
@media(min-width:901px){.perfis,.infos{grid-template-columns:repeat(var(--colunas,4),minmax(0,1fr))}}

/* ---- tablet e celular ---- */
@media(max-width:900px){
  .topo-grade{grid-template-columns:1fr;gap:30px;text-align:center}
  .arte{order:-1;width:min(330px,82%);margin:0 auto}
  .promessa{margin-inline:auto}
  .selos{justify-content:center}
  .topo .rotulo:after{content:'';width:36px;height:1px;background:linear-gradient(90deg,var(--ouro),rgba(217,173,79,0))}
  .professor{grid-template-columns:1fr;text-align:center;gap:26px}
  .professor figure{width:min(260px,70%);margin:0 auto}
}
@media(max-width:640px){
  .container{width:calc(100% - 32px)}
  .secao{padding:64px 0}.final{padding:64px 0}
  .topo{padding-bottom:58px}
  .topo h1{font-size:clamp(32px,9.5vw,42px)}
  .promessa{font-size:16px}
  .topicos{grid-template-columns:1fr}
  .botao{width:100%;padding:0 18px;font-size:14px}
  .bf{width:78px;height:78px;left:-10px;top:-10px;border-width:3px;padding-top:14px}.bf:before{top:4px;width:6px;height:6px;margin-left:-3px}.bf small{font-size:5.6px}.bf b{font-size:16px}.bf i{font-size:6.5px;right:9px;bottom:7px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.anima .revela{opacity:1;transform:none}}