/* Estilo da biblioteca de skills (veio do wireframe aprovado em 16/10/2026) · visual da escala.ai (manual v4, 04/10/2026).
   Gelo de fundo, cartões brancos, roxo nos títulos e no botão, verde uma vez por tela, Geist do título ao botão.
   Só claro: a marca não tem modo escuro. Círculo laranja = anotação, não interface. */
:root{
  --gelo:#F4F3F7;--branco:#FFFFFF;--tinta:#170722;--cinza:#5F5468;--cinza-2:#8B8394;--linha:#E2DCE9;
  --roxo:#5D2784;--roxo-noite:#2A0F40;--lavanda:#E9E1F4;--lavanda-2:#F6F2FB;--verde:#62B230;--verde-escuro:#3E7A1A;--verde-claro:#EDF6E6;
  --erro:#A3261B;--erro-claro:#FCECEA;--ambar:#7A5300;--ambar-claro:#FFF4DA;
  --anot:#E8590C;
  --f:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gelo);color:var(--tinta);font-family:var(--f);font-size:16px;line-height:1.55;overflow-wrap:anywhere}
p{margin:0}
a{color:var(--roxo);text-underline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-weight:300;font-size:44px;line-height:1.1;letter-spacing:-.02em}
h2{font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.01em}
h3{font-weight:600;font-size:18px;line-height:1.3}
.rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--roxo);margin:0}
.lead{font-size:19px;color:var(--cinza);max-width:62ch}
.mute{color:var(--cinza)}
.small{font-size:14px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}


/* casca */
.top{background:var(--branco);border-bottom:1px solid var(--linha)}
.top .in{max-width:1200px;margin:0 auto;padding:0 32px;min-height:64px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinta)}
.marca img{height:22px;width:auto;display:block}
.vsep{width:1px;height:22px;background:var(--linha)}
.produto{font-weight:600;font-size:15px}
.nav{display:flex;gap:28px;margin-left:28px}
.nav a{font-size:15px;color:var(--cinza);text-decoration:none;padding:21px 0 19px;border-bottom:2px solid transparent}
.nav a.on{color:var(--tinta);font-weight:600;border-bottom-color:var(--roxo)}
.nav .curto{display:none}
.dir{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--cinza)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--lavanda);color:var(--roxo);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.pg{max-width:1200px;margin:0 auto;padding:40px 32px 64px;display:flex;flex-direction:column;gap:32px}
.rodape{max-width:1200px;margin:0 auto;padding:20px 32px 40px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--cinza);border-top:1px solid var(--linha)}
.rodape .m{font-family:var(--mono);font-size:12px}
.voltar{display:inline-flex;align-items:center;gap:6px;font-size:15px;text-decoration:none;color:var(--cinza)}
.voltar .i{width:18px;height:18px}

/* peças */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:24px}
.ic{width:42px;height:42px;border-radius:10px;background:var(--lavanda);color:var(--roxo);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ic .i{width:22px;height:22px}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--roxo);color:#fff;font:600 16px/1 var(--f);padding:14px 22px;border-radius:10px;border:0;text-decoration:none;white-space:nowrap}
.bt .i{width:18px;height:18px}
.bt.cheio{width:100%}
.bt2{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--branco);color:var(--roxo);font:600 15px/1 var(--f);padding:12px 18px;border-radius:10px;border:1px solid #CDBFE0;text-decoration:none;white-space:nowrap}
.bt2 .i{width:17px;height:17px}
.bt2.off{color:var(--cinza-2);border-color:var(--linha);background:var(--gelo)}
.bt3{display:inline-flex;align-items:center;gap:6px;color:var(--roxo);font-weight:600;font-size:15px;text-decoration:none}
.bt3 .i{width:17px;height:17px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.3;padding:4px 10px;border-radius:999px;background:var(--lavanda);color:var(--roxo);font-weight:500;white-space:nowrap}
.chip.nova{background:var(--verde-claro);color:var(--verde-escuro)}
.chip.cinza{background:var(--gelo);color:var(--cinza);border:1px solid var(--linha)}
.chip.erro{background:var(--erro-claro);color:var(--erro)}
.chip.ambar{background:var(--ambar-claro);color:var(--ambar)}
.cmd{display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 14px/1.45 var(--mono);background:var(--gelo);border:1px solid var(--linha);border-radius:8px;padding:10px 12px;color:var(--tinta)}
.cmd .cp{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--f);color:var(--roxo);white-space:nowrap}
.cmd .cp .i{width:16px;height:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:600}
.input{border:1px solid #CFC6DA;border-radius:10px;background:#fff;padding:13px 14px;font-size:16px;color:var(--cinza-2);min-height:48px}
.input.cheio{color:var(--tinta)}
.input.area{min-height:104px;line-height:1.6}
.sel{display:flex;justify-content:space-between;align-items:center}
.sel .i{width:18px;height:18px;color:var(--cinza)}
.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5}
.aviso .i{margin-top:2px}
.aviso.lav{background:var(--lavanda-2);border:1px solid var(--linha)}
.aviso.erro{background:var(--erro-claro);color:var(--erro)}
.aviso.ambar{background:var(--ambar-claro);color:var(--ambar)}
.ponto{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--verde);flex:none}

/* biblioteca */
.boas{display:flex;flex-direction:column;gap:12px}
.banner{display:flex;align-items:center;gap:18px;background:var(--lavanda-2);border:1px solid #DCCFEC;border-radius:14px;padding:18px 20px}
.banner .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.banner .fechar{color:var(--cinza);display:inline-flex}
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.skill{display:flex;flex-direction:column;gap:16px}
.skill .cab{display:flex;align-items:flex-start;gap:14px}
.skill .cab>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.skill .nome{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.skill .cmdo{font:500 13px/1.3 var(--mono);color:var(--cinza)}
.meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.meta li{display:flex;gap:10px;align-items:flex-start}
.meta li .i{width:18px;height:18px;color:var(--roxo);margin-top:3px}
.meta b{font-weight:600}
.skill .pe{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--linha);flex-wrap:wrap}

/* comece aqui */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tres .card{display:flex;flex-direction:column;gap:10px;padding:20px}
.passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.passo{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--linha)}
.passo:first-child{border-top:0;padding-top:4px}
.num{width:36px;height:36px;border-radius:50%;background:var(--lavanda);color:var(--roxo);display:inline-flex;align-items:center;justify-content:center;font:500 15px/1 var(--mono)}
.passo .cx{display:flex;flex-direction:column;gap:10px;min-width:0}
.ver{background:var(--lavanda-2);border-left:3px solid var(--roxo);border-radius:0 8px 8px 0;padding:10px 14px;font-size:15px;line-height:1.5}
.ver b{font-weight:600}
.reco{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.reco .tx{display:flex;flex-direction:column;gap:6px;max-width:62ch}
.reco .bts{display:flex;gap:10px;flex-wrap:wrap}

/* página da skill */
.dois{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.princ{display:flex;flex-direction:column;gap:32px;min-width:0}
.lado{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.baixar{display:flex;flex-direction:column;gap:14px}
.arq{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--cinza)}
.arq b{font:500 14px/1.3 var(--mono);color:var(--tinta)}
.fatos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fato{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fato .rot{color:var(--cinza)}
.fato p{font-size:15px;line-height:1.45}
.fato p b{font-weight:600;font-size:17px;display:block}
.sec{display:flex;flex-direction:column;gap:14px}
.lista{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.exemplo{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center}
.thumb{aspect-ratio:4/3;border-radius:10px;border:1px solid var(--linha);background:linear-gradient(180deg,#fff 0 18%,var(--gelo) 18% 100%);position:relative;overflow:hidden}
.thumb i{position:absolute;left:10%;right:10%;height:7px;border-radius:4px;background:var(--lavanda)}
.thumb i.r{background:var(--roxo);height:12px;right:35%}
.acc{background:var(--branco);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.acc>.h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px}
.acc>.h .t{display:flex;flex-direction:column;gap:2px}
.acc>.h .i{color:var(--cinza)}
.acc>.b{border-top:1px solid var(--linha);padding:4px 20px 8px}
.acc+.acc{margin-top:-2px}
.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.duas .card{display:flex;flex-direction:column;gap:8px;padding:20px}

/* conta */
.conta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.linhas{display:flex;flex-direction:column;gap:12px}
.linha{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;font-size:15px}
.linha span:first-child{color:var(--cinza)}
.faq .h b{font-weight:600;font-size:16px}

/* admin */
.form-lib{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:16px;align-items:end}
.contas{display:flex;gap:10px;flex-wrap:wrap}
table.tab{width:100%;border-collapse:collapse;font-size:15px}
.tab th{text-align:left;font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);padding:10px 12px;border-bottom:1px solid var(--linha)}
.tab td{padding:13px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.tab .em{font-weight:500}
.tab .off td{color:var(--cinza-2)}
.tab-wrap{padding:6px 12px}
.cartoes{display:none;flex-direction:column;gap:0}
.cartao{padding:14px 4px;border-bottom:1px solid var(--linha);display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.cartao:last-child{border-bottom:0}
.cartao .l1{display:flex;justify-content:space-between;gap:10px;align-items:center}
.cartao .em{font-weight:600;font-size:15px}

/* entrar */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:900px}
.luz{position:relative;overflow:hidden;color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  background:radial-gradient(120% 90% at 100% 0%,#A77BD3 0%,rgba(167,123,211,0) 55%),linear-gradient(150deg,#2A0F40 0%,#4A1D6C 45%,#5D2784 70%,#7D4BAE 100%)}
.luz .ponto-luz{position:absolute;right:120px;top:110px;width:14px;height:14px;border-radius:50%;background:var(--verde);box-shadow:0 0 24px 8px rgba(98,178,48,.45)}
.luz img{height:26px;width:auto}
.luz .meio{display:flex;flex-direction:column;gap:20px;max-width:30em}
.luz h1{font-size:48px;color:#fff}
.luz .rot{color:var(--lavanda)}
.luz p{color:var(--lavanda);font-size:18px}
.luz ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.luz li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px}
.luz li span{color:var(--lavanda)}
.luz .pe{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lavanda)}
.lado-form{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.form-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px;padding:32px}
.form-card h2{font-size:30px;font-weight:300}
.div{height:1px;background:var(--linha)}

/* e-mail */
.cliente{max-width:760px;margin:40px auto;background:#fff;border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.cab-mail{padding:16px 24px;border-bottom:1px solid var(--linha);display:flex;flex-direction:column;gap:6px;font-size:14px;background:#FBFAFC}
.cab-mail div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px}
.cab-mail span{color:var(--cinza)}
.cab-mail .assunto{font-weight:600;font-size:16px}
.corpo-mail{padding:40px 24px;background:var(--gelo)}
.mail{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--linha);border-radius:12px;padding:36px 36px 28px;display:flex;flex-direction:column;gap:20px}
.mail img{height:22px;width:auto;align-self:flex-start}
.mail h2{font-size:28px;font-weight:300}
.mail .end{font:400 13px/1.5 var(--mono);color:var(--cinza)}
.mail .pe{border-top:1px solid var(--linha);padding-top:16px;font-size:13px;color:var(--cinza)}

/* 390 */
@media (max-width:600px){
  h1{font-size:32px}
  .lead{font-size:17px}
  .top .in{padding:0 16px;min-height:56px;gap:0 12px}
  .marca{gap:10px}
  .marca img{height:19px}
  .produto{font-size:14px}
  .dir .email{display:none}
  .avatar{width:30px;height:30px;font-size:12px}
  .nav{order:3;width:100%;margin:0;gap:22px;border-top:1px solid var(--linha)}
  .nav a{font-size:14px;padding:12px 0 10px}
  .nav .longo{display:none}
  .nav .curto{display:inline}
  .pg{padding:24px 16px 48px;gap:28px}
  .rodape{padding:16px 16px 32px}
  .card{padding:18px}
  .grade,.tres,.duas,.conta{grid-template-columns:minmax(0,1fr)}
  .banner{align-items:flex-start;flex-wrap:wrap;padding:16px}
  .banner .tx{flex-basis:calc(100% - 60px)}
  .banner .bt2{width:100%}
  .dois{grid-template-columns:minmax(0,1fr);gap:28px}
  .lado{position:static;order:-1}
  .fatos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exemplo{grid-template-columns:minmax(0,1fr)}
  .exemplo .thumb{max-width:220px}
  .passo{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .num{width:30px;height:30px;font-size:13px}
  .acc>.h{padding:16px}
  .acc>.b{padding:4px 16px 8px}
  .linha{grid-template-columns:minmax(0,1fr);gap:2px}
  .form-lib{grid-template-columns:minmax(0,1fr)}
  .tab-wrap table{display:none}
  .cartoes{display:flex}
  .split{grid-template-columns:minmax(0,1fr);min-height:0}
  .luz{padding:28px 16px 32px;gap:24px}
  .luz .ponto-luz{right:40px;top:40px;width:10px;height:10px}
  .luz h1{font-size:30px}
  .luz p{font-size:16px}
  .luz img{height:22px}
  .lado-form{padding:24px 16px 40px}
  .form-card{padding:22px}
  .cliente{margin:16px;border-radius:12px}
  .cab-mail{padding:14px 16px}
  .cab-mail div{grid-template-columns:52px minmax(0,1fr)}
  .corpo-mail{padding:20px 12px}
  .mail{padding:24px 18px 20px}
  .reco .bts{width:100%}
  .reco .bts a{flex:1}
  .bt{padding:14px 18px}
}

/* ajustes depois da 1ª conferência (16/10) */
.luz img{align-self:flex-start}
.skill .pe{margin-top:auto}
.dois .fatos{grid-template-columns:repeat(2,minmax(0,1fr))}
.fato p b{margin-bottom:2px}
.so-cel{display:none}
.banner{position:relative}
.banner .tx b{display:inline-flex;align-items:center;gap:8px}
@media (max-width:600px){
  .luz{gap:14px;padding:22px 16px 26px}
  .luz .meio{gap:10px}
  .luz ul,.luz .meio>p:not(.rot),.luz .pe{display:none}
  .luz h1{font-size:26px}
  .dois .fatos{grid-template-columns:minmax(0,1fr)}
  .lado{display:none}
  .so-cel{display:block}
  .banner .ic{display:none}
  .banner .tx{flex-basis:auto;padding-right:28px}
  .banner .fechar{position:absolute;top:14px;right:14px}
}
.cab-mail span.mk{color:#fff}

/* ===================== área de membros (redesenho de 16/10, pedido do Rodrigo) ===================== */
.ponto-luz{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--verde);box-shadow:0 0 24px 8px rgba(98,178,48,.45);z-index:1}
.luz .logo{height:26px;width:auto;align-self:flex-start}
.luz .meio{max-width:25em;position:relative;z-index:1}
.luz li{align-items:center}
.luz .pers-luz{position:absolute;right:8px;bottom:0;width:250px;height:auto;align-self:auto}
.chip .i{width:14px;height:14px}
.chip-m{display:none}

/* banner */
.hero{position:relative;overflow:hidden;border-radius:24px;color:#fff;padding:52px 56px;min-height:420px;display:flex;align-items:center;
  background:radial-gradient(110% 90% at 100% 0%,#A77BD3 0%,rgba(167,123,211,0) 55%),linear-gradient(150deg,#2A0F40 0%,#4A1D6C 45%,#5D2784 70%,#7D4BAE 100%)}
.hero .ponto-luz{right:430px;top:60px}
.hero .txt{position:relative;z-index:1;max-width:620px;display:flex;flex-direction:column;gap:16px}
.hero .rot,.shero .rot{color:var(--lavanda)}
.hero h1{color:#fff;font-size:56px;line-height:1.04}
.hero .sub{color:var(--lavanda);font-size:19px;max-width:50ch}
.hero .bts,.shero .bts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.btw{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--roxo);font:600 16px/1 var(--f);padding:14px 22px;border-radius:10px;text-decoration:none;white-space:nowrap}
.btg{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.35);font:600 15px/1 var(--f);padding:13px 18px;border-radius:10px;text-decoration:none;white-space:nowrap}
.btw .i,.btg .i{width:18px;height:18px}
.hstats{display:flex;gap:32px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--lavanda)}
.hstats b{display:block;font-weight:300;font-size:32px;color:#fff;line-height:1.1}
.hero .pers{position:absolute;right:48px;top:0;bottom:0;width:380px}
.hero .pers img{position:absolute;right:0;top:40px;width:350px;height:auto}
.hero.menor{min-height:340px}
.hero.menor .pers img{width:300px;top:30px}
.hprog{display:flex;align-items:center;gap:12px;max-width:380px;margin-top:6px}
.hprog .prog{flex:1}
.hero .prog span{color:var(--lavanda)}
.hero .barra{background:rgba(255,255,255,.2)}
.hero .barra i{background:#fff}

/* progresso */
.prog{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--cinza)}
.barra{flex:1;height:8px;border-radius:999px;background:var(--lavanda);overflow:hidden;min-width:60px}
.barra i{display:block;height:100%;background:var(--roxo);border-radius:999px}
.prog span{white-space:nowrap}

/* primeiros passos e continue */
.painel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px}
.passos-ini,.continua{display:flex;flex-direction:column;gap:16px}
.cab-p h2{font-size:22px;margin-top:4px}
.chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.chk li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linha);font-size:15.5px}
.chk li>span{flex:1}
.chk li em{font-style:normal;font-size:13px;color:var(--verde-escuro)}
.chk .i.ok{color:var(--verde)}
.chk .i.ab{color:#B9AEC8}
.chk li.ok>span{color:var(--cinza)}
.cont-l{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center}
.cont-l>div{display:flex;flex-direction:column;gap:6px}
.cont-l .cv{border-radius:12px;aspect-ratio:4/3}
.cont-l .cv-ic{width:48px;height:48px;right:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.cont-l .cv-ic .i{width:24px;height:24px}
.cont-l h3{font-size:20px}

/* seções */
.titulo-sec{display:flex;flex-direction:column;gap:4px}
.titulo-sec h2{font-size:30px;font-weight:300;letter-spacing:-.015em}
.metodo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.metodo .card{display:flex;flex-direction:column;gap:10px}
.abas{display:flex;gap:8px;flex-wrap:wrap}
.aba{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--linha);background:#fff;font-size:14.5px;color:var(--tinta);text-decoration:none}
.aba b{font:500 12px/1 var(--mono);color:var(--cinza)}
.aba.on{background:var(--roxo);border-color:var(--roxo);color:#fff}
.aba.on b{color:var(--lavanda)}

/* cartões de skill (capa por categoria) */
.cursos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.curso{background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.cv{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-end;padding:14px 16px;color:#fff;overflow:hidden}
.cv::after{content:'';position:absolute;right:-50px;bottom:-80px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.cv-ic{position:absolute;right:18px;top:18px;width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.cv-ic .i{width:32px;height:32px;stroke-width:1.5;color:#fff}
.cv-cat{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lavanda);position:relative;z-index:1}
.cv-chip{position:absolute;left:14px;top:14px;z-index:1}
.cv-marketing{background:linear-gradient(135deg,#2A0F40 0%,#5D2784 55%,#A77BD3 125%)}
.cv-estrategia{background:linear-gradient(135deg,#170722 0%,#3B1458 55%,#6E3A99 125%)}
.cv-gestao{background:linear-gradient(135deg,#3B1458 0%,#7D4BAE 100%)}
.cv-vendas{background:linear-gradient(135deg,#2A0F40 0%,#6E3A99 60%,#C2A3E3 135%)}
.cv-operacao{background:linear-gradient(135deg,#1F0B30 0%,#4A1D6C 100%)}
.cv-produtividade{background:linear-gradient(135deg,#4A1D6C 0%,#9B6CC9 100%)}
.curso .corpo-c{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.curso .corpo-c h3{font-size:19px}
.curso .corpo-c>p.mute{font-size:15px}
.meta-c{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--cinza);flex-wrap:wrap;margin-top:auto}
.meta-c .i{width:16px;height:16px}
.curso .bt2.cheio{width:100%}
.curso.prod{background:#FBFAFC}
.curso.prod .cv{background:linear-gradient(135deg,#DCCFEC 0%,#F1EBF8 100%);color:var(--roxo)}
.curso.prod .cv::after{border-color:rgba(93,39,132,.10)}
.curso.prod .cv-ic{background:rgba(93,39,132,.08)}
.curso.prod .cv-ic .i{color:var(--roxo);opacity:.55}
.curso.prod .cv-cat{color:var(--roxo)}
.curso.prod h3{color:var(--cinza)}
.ajuda-faixa{display:flex;align-items:center;gap:16px}
.ajuda-faixa>div{flex:1;display:flex;flex-direction:column;gap:2px}

/* comece aqui */
.etapa{display:flex;flex-direction:column;gap:18px}
.etapa-cab{display:flex;align-items:center;gap:14px}
.etapa-cab>div{flex:1}
.etapa-cab>.i{width:30px;height:30px;color:#B9AEC8}
.etapa-cab h2{font-size:24px}
.mini{display:flex;gap:12px;align-items:flex-start;background:var(--lavanda-2);border-radius:12px;padding:16px}
.mini>.i{color:var(--roxo);margin-top:2px}
.mini>div{display:flex;flex-direction:column;gap:4px}
.mini h3{font-size:16px}
.tres .card{gap:10px}

/* página da skill */
.shero{position:relative;overflow:hidden;border-radius:24px;color:#fff;padding:36px 40px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:center;
  background:radial-gradient(90% 120% at 100% 0%,#A77BD3 0%,rgba(167,123,211,0) 55%),linear-gradient(150deg,#2A0F40 0%,#4A1D6C 45%,#5D2784 75%,#7D4BAE 100%)}
.shero .ponto-luz{right:390px;top:36px}
.shero .txt{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;min-width:0}
.migalha{font-size:14px;color:var(--lavanda)}
.migalha a{color:#fff}
.shero h1{color:#fff;font-size:48px}
.shero .sub{color:var(--lavanda);font-size:18px;max-width:56ch}
.hchips{display:flex;flex-wrap:wrap;gap:8px}
.hchip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff}
.hchip .i{width:15px;height:15px}
.sprog{position:relative;z-index:1}
.prog-card{display:flex;flex-direction:column;gap:12px;color:var(--tinta)}
.prog-card h3{font-size:20px;font-weight:400}
.dois{grid-template-columns:minmax(0,1fr) 320px}
.lado-aulas{position:sticky;top:24px}
.aulas ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.aulas li{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:10px}
.aulas li>div{display:flex;flex-direction:column;gap:2px}
.aulas li b{font-weight:600;font-size:15px}
.aulas li span{font-size:13px;color:var(--cinza)}
.aulas li .i{color:#B9AEC8;margin-top:1px}
.aulas li.atual{background:var(--lavanda-2)}
.aulas li.atual .i{color:var(--roxo)}
.aulas li.ok .i{color:var(--verde)}
.aulas li.extra .i{color:var(--cinza)}
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 75% 15%,#7D4BAE 0%,rgba(125,75,174,0) 60%),linear-gradient(150deg,#170722,#3B1458)}
.v-play{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.v-play .i{width:32px;height:32px;fill:var(--roxo);stroke:var(--roxo);margin-left:5px}
.v-rod{position:absolute;left:24px;bottom:20px;right:24px;display:flex;justify-content:space-between;align-items:baseline;color:#fff;font-size:15px}
.v-rod b{font-weight:600;font-size:18px}
.video>.mk{position:absolute;top:16px;left:16px}
.video.gravando{aspect-ratio:auto;padding:20px 22px;justify-content:flex-start;background:var(--lavanda-2);border:1px dashed #CDBFE0}
.v-in{display:flex;gap:14px;align-items:flex-start;width:100%}
.v-in>.i{color:var(--roxo);width:24px;height:24px}
.v-in>div{display:flex;flex-direction:column;gap:2px;flex:1}
.v-in span{color:var(--cinza);font-size:15px}
.demo{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:10px;align-items:stretch}
.demo ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:15.5px}
.d-in{background:var(--lavanda-2)}
.d-out{border:1.5px solid var(--roxo)}
.d-seta{display:flex;align-items:center;justify-content:center;color:var(--roxo)}
.exemplo-real{display:flex;flex-direction:column;gap:12px;border-left:4px solid var(--roxo)}
.citacao{font-size:28px;font-weight:300;line-height:1.25;letter-spacing:-.01em}
.linha-ex{display:grid;grid-template-columns:2fr .6fr 1.6fr .8fr;gap:16px;padding:14px;border:1px solid var(--linha);border-radius:10px;font-size:14.5px}
.linha-ex>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.adapta{list-style:none;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.adapta li{display:flex;gap:12px;align-items:flex-start}
.adapta li>.i{color:var(--roxo);margin-top:3px}
.adapta li>div{display:flex;flex-direction:column;gap:2px}
.adapta b{font-weight:600}
.acc-pe{padding:14px 0 12px;border-top:1px solid var(--linha);display:flex;justify-content:flex-end}
.acc .h h3 .chip{margin-left:6px;vertical-align:middle}

@media (max-width:600px){
  .hero{padding:0 20px 28px;min-height:0;flex-direction:column;align-items:stretch}
  .hero .pers{position:relative;right:auto;top:auto;bottom:auto;width:auto;height:200px;order:-1;margin:0 -20px 4px;overflow:hidden}
  .hero .pers img{width:220px;top:18px;left:50%;right:auto;transform:translateX(-35%)}
  .hero.menor .pers img{width:220px}
  .hero .ponto-luz{right:36px;top:30px}
  .hero h1{font-size:34px}
  .hero .sub{font-size:16px}
  .hstats{gap:20px}
  .hstats b{font-size:24px}
  .hero .bts a,.shero .bts a{flex:1}
  .hprog{max-width:none}
  .painel,.metodo,.cursos{grid-template-columns:minmax(0,1fr)}
  .titulo-sec h2{font-size:24px}
  .abas{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px}
  .aba{white-space:nowrap;flex:none}
  .curso.prod{flex-direction:row}
  .curso.prod .cv{width:88px;aspect-ratio:auto;flex:none;padding:0}
  .curso.prod .cv-ic{width:44px;height:44px;right:auto;left:22px;top:18px}
  .curso.prod .cv-ic .i{width:22px;height:22px}
  .curso.prod .cv-cat,.curso.prod .cv-chip{display:none}
  .curso.prod .corpo-c{padding:14px}
  .curso.prod .corpo-c h3{font-size:16px}
  .curso.prod .corpo-c>p.mute{font-size:14px}
  .chip-m{display:inline-flex}
  .ajuda-faixa{flex-wrap:wrap}
  .ajuda-faixa .bt2{width:100%}
  .etapa-cab{flex-wrap:wrap}
  .etapa-cab .bt2{width:100%}
  .etapa-cab h2{font-size:21px}
  .shero{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:20px}
  .shero .ponto-luz{right:28px;top:26px}
  .shero h1{font-size:34px}
  .shero .sub{font-size:16px}
  .dois{grid-template-columns:minmax(0,1fr)}
  .lado-aulas{position:static;order:-1}
  .demo{grid-template-columns:minmax(0,1fr)}
  .d-seta{transform:rotate(90deg);height:24px}
  .linha-ex{grid-template-columns:minmax(0,1fr)}
  .adapta{grid-template-columns:minmax(0,1fr)}
  .citacao{font-size:23px}
  .v-play{width:64px;height:64px}
  .luz .pers-luz{display:none}
  .cont-l{grid-template-columns:96px minmax(0,1fr)}
}
.meta-c{gap:6px 16px}
.meta-c>span{display:inline-flex;align-items:center;gap:6px}
@media (max-width:600px){
  .hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hstats span{font-size:13px;line-height:1.3}
  .metodo .card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;align-items:start}
  .metodo .num{grid-row:span 2}
  .curso:not(.prod) .cv{aspect-ratio:5/2}
  .curso:not(.prod) .cv-ic{width:52px;height:52px;top:14px}
}
.shero .prog-card .rot{color:var(--roxo)}

/* ===================== painel: publicar skill (16/10) ===================== */
.subnav{display:flex;gap:28px;border-bottom:1px solid var(--linha);margin-top:-8px}
.subnav a{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;color:var(--cinza);text-decoration:none;padding:12px 0 11px;border-bottom:2px solid transparent}
.subnav a b{font:500 12px/1 var(--mono);background:var(--gelo);border:1px solid var(--linha);border-radius:999px;padding:3px 7px;color:var(--cinza)}
.subnav a.on{color:var(--tinta);font-weight:600;border-bottom-color:var(--roxo)}
.cab-adm{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cab-adm>div{display:flex;flex-direction:column;gap:6px}
.est{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px;white-space:nowrap}
.est .i{width:14px;height:14px}
.est.pub{background:var(--verde-claro);color:var(--verde-escuro)}
.est.prod{background:var(--gelo);color:var(--cinza);border:1px solid var(--linha)}
.est.rasc{background:var(--ambar-claro);color:var(--ambar)}
.sk{display:flex;align-items:center;gap:12px}
.sk .cv{width:64px;aspect-ratio:4/3;border-radius:8px;padding:0;flex:none}
.sk .cv-ic{width:30px;height:30px;border-radius:8px;left:50%;top:50%;right:auto;transform:translate(-50%,-50%)}
.sk .cv-ic .i{width:16px;height:16px}
.sk .cv::after{display:none}
.sk>div{display:flex;flex-direction:column;gap:1px}
.sk b{font-weight:600}
.sk span{font:400 12.5px/1.3 var(--mono);color:var(--cinza)}
.acoes{display:flex;gap:14px;justify-content:flex-end}
.tab .num-r{text-align:right}

/* assistente */
.wiz-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wiz-top .wt{display:flex;flex-direction:column;gap:4px}
.wiz-top h1{font-size:40px}
.salvo{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--cinza)}
.salvo .i{width:16px;height:16px;color:var(--verde)}
.stepper{list-style:none;margin:0;padding:18px 22px;display:flex;gap:0;background:#fff;border:1px solid var(--linha);border-radius:14px}
.stepper li{flex:1;display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--cinza-2);position:relative}
.stepper li:not(:last-child)::after{content:'';flex:1;height:2px;background:var(--linha);margin:0 12px;min-width:16px}
.stepper .n{width:30px;height:30px;border-radius:50%;border:1.5px solid #CFC6DA;display:inline-flex;align-items:center;justify-content:center;font:500 13px/1 var(--mono);flex:none;background:#fff}
.stepper li span.l{white-space:nowrap}
.stepper li.feito{color:var(--tinta)}
.stepper li.feito .n{background:var(--verde-claro);border-color:var(--verde);color:var(--verde-escuro)}
.stepper li.feito .n .i{width:16px;height:16px}
.stepper li.feito:not(:last-child)::after{background:var(--verde)}
.stepper li.atual{color:var(--tinta);font-weight:600}
.stepper li.atual .n{background:var(--roxo);border-color:var(--roxo);color:#fff}
.step-cel{display:none}
.wiz{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.wiz.um{grid-template-columns:minmax(0,1fr)}
.wiz-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.wiz-lado{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px}
.wiz-lado>.rot{color:var(--cinza)}
.wiz-pe{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--linha);border-radius:14px;padding:14px 18px;box-shadow:0 -4px 20px rgba(23,7,34,.04)}
.wiz-pe .small{flex:1;text-align:right}
.bt.off{background:#CFC6DA;color:#fff}
.drop{border:2px dashed #CDBFE0;border-radius:16px;background:var(--lavanda-2);padding:44px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.drop .ic{width:56px;height:56px;border-radius:14px}
.drop .ic .i{width:28px;height:28px}
.drop h3{font-size:19px}
.regras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.regras li{display:flex;gap:10px;align-items:flex-start}
.regras li>.i{width:18px;height:18px;margin-top:3px;color:var(--roxo)}
.regras li.ok>.i{color:var(--verde)}
.regras li.al>.i{color:var(--ambar)}
.regras code,.mono{font:400 13.5px/1.5 var(--mono);color:var(--cinza)}
.arquivo{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--linha);border-radius:12px;background:#fff}
.arquivo>div{flex:1;display:flex;flex-direction:column;gap:2px}
.arquivo b{font:500 15px/1.3 var(--mono)}
.lido{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 16px;font-size:15px}
.lido>span:nth-child(odd){color:var(--cinza)}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form-2 .largo{grid-column:1/-1}
.hint{font-size:13px;color:var(--cinza)}
.campo .lab{display:flex;justify-content:space-between;gap:8px}
.input.trava{background:var(--gelo);color:var(--cinza)}
.icones{display:flex;gap:8px;flex-wrap:wrap}
.icones span{width:42px;height:42px;border-radius:10px;border:1px solid var(--linha);display:inline-flex;align-items:center;justify-content:center;color:var(--cinza);background:#fff}
.icones span.on{border:2px solid var(--roxo);color:var(--roxo);background:var(--lavanda-2)}
.opcoes{display:flex;gap:10px;flex-wrap:wrap}
.opt{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;padding:9px 12px;border:1px solid var(--linha);border-radius:10px;background:#fff}
.opt .bx{width:18px;height:18px;border-radius:5px;border:1.5px solid #CFC6DA;display:inline-flex;align-items:center;justify-content:center;flex:none}
.opt.on{border-color:var(--roxo);background:var(--lavanda-2)}
.opt.on .bx{background:var(--roxo);border-color:var(--roxo);color:#fff}
.opt .bx .i{width:13px;height:13px;stroke-width:2.5}
.opt.radio .bx{border-radius:50%}
.opt.radio.on .bx{background:#fff;box-shadow:inset 0 0 0 4px var(--roxo)}
.opt em{font-style:normal;font-size:12.5px;color:var(--cinza)}
.itens-ed{display:flex;flex-direction:column;gap:8px}
.item-ed{display:flex;align-items:center;gap:8px}
.item-ed .input{flex:1;min-height:42px;padding:10px 12px;font-size:15px}
.item-ed .x{color:var(--cinza-2)}
.item-ed .x .i{width:16px;height:16px}
.origem{font-size:12px;color:var(--roxo);background:var(--lavanda);border-radius:999px;padding:2px 8px;white-space:nowrap}
.arvore{display:flex;flex-direction:column;gap:10px}
.ramo{border:1px solid var(--linha);border-radius:12px;padding:14px 16px;background:#fff;display:flex;flex-direction:column;gap:6px}
.ramo .rc{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ramo b{font-weight:600}
.ramo ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--cinza)}
.ramo li{display:flex;gap:10px}
.ramo li code{font:500 12.5px/1.6 var(--mono);color:var(--roxo);min-width:16px}
.ramo.extra{background:#FBFAFC;border-style:dashed}
.sug{border:1px solid #F1D9A6;background:var(--ambar-claro);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.sug .t{display:flex;gap:10px;align-items:flex-start;color:var(--ambar);font-weight:600}
.diff{display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.diff .de{background:#FCECEA;color:#7A2219;text-decoration:line-through;text-decoration-color:rgba(122,34,25,.45);border-radius:8px;padding:8px 10px}
.diff .para{background:var(--verde-claro);color:#2C5A12;border-radius:8px;padding:8px 10px}
.sug .bts{display:flex;gap:10px;flex-wrap:wrap}
.radio-cards{display:flex;flex-direction:column;gap:10px}
.rcard{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--linha);border-radius:12px;background:#fff}
.rcard .bx{width:20px;height:20px;border-radius:50%;border:1.5px solid #CFC6DA;flex:none;margin-top:2px}
.rcard.on{border:2px solid var(--roxo);background:var(--lavanda-2)}
.rcard.on .bx{box-shadow:inset 0 0 0 5px var(--roxo);border-color:var(--roxo)}
.rcard>div{display:flex;flex-direction:column;gap:2px}
.rcard b{font-weight:600}
.prev{border:1px solid var(--linha);border-radius:14px;overflow:hidden;background:var(--gelo)}
.prev-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#fff;border-bottom:1px solid var(--linha);font-size:13px;color:var(--cinza)}
.seg{display:inline-flex;border:1px solid var(--linha);border-radius:8px;overflow:hidden}
.seg span{padding:5px 10px;font-size:12.5px}
.seg span.on{background:var(--roxo);color:#fff}
.esq{padding:14px;display:flex;flex-direction:column;gap:10px}
.esq .h{border-radius:12px;padding:16px;color:#fff;display:flex;flex-direction:column;gap:6px;background:linear-gradient(150deg,#2A0F40 0%,#5D2784 70%,#7D4BAE 100%)}
.esq .h b{font-weight:300;font-size:24px}
.esq .h span{font-size:12px;color:var(--lavanda)}
.esq .h .cs{display:flex;gap:4px;flex-wrap:wrap}
.esq .h .cs i{display:inline-block;height:14px;width:64px;border-radius:999px;background:rgba(255,255,255,.18)}
.esq .h .b{display:inline-block;width:96px;height:22px;border-radius:6px;background:#fff;margin-top:4px}
.esq .bl{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.esq .bl span{font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--roxo)}
.esq .bl i{display:block;height:7px;border-radius:4px;background:var(--lavanda)}
.esq .bl.v{background:var(--lavanda-2);border-style:dashed}
.sucesso{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sucesso .grande{width:64px;height:64px;border-radius:50%;background:var(--verde-claro);color:var(--verde);display:flex;align-items:center;justify-content:center}
.sucesso .grande .i{width:34px;height:34px;stroke-width:2}
.efeito{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
.lista-ok{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.lista-ok li{display:flex;gap:10px;align-items:flex-start}
.lista-ok li>.i{color:var(--verde);margin-top:2px}
.zap{white-space:pre-line;font:400 14.5px/1.55 var(--f);background:#F1F7EC;border:1px solid #D7E9C9;border-radius:12px;padding:14px 16px;color:var(--tinta)}
.faixa-versao{display:flex;gap:12px;align-items:flex-start;background:var(--lavanda-2);border:1px solid #DCCFEC;border-radius:12px;padding:14px 16px;font-size:15px}
.faixa-versao>.i{color:var(--roxo);margin-top:2px}
.historico{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.historico li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linha);font-size:14.5px}
.historico li:first-child{border-top:0}
.comp{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--linha);border-radius:12px;overflow:hidden;font-size:14.5px;background:#fff}
.comp>div{padding:11px 14px;border-top:1px solid var(--linha)}
.comp>div:nth-child(-n+3){border-top:0;background:#FBFAFC;font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.comp .muda{color:var(--roxo);font-weight:600}

@media (max-width:600px){
  .subnav{gap:22px}
  .wiz-top h1{font-size:30px}
  .stepper{display:none}
  .step-cel{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
  .step-cel b{font-weight:600;font-size:15px}
  .wiz{grid-template-columns:minmax(0,1fr)}
  .wiz-lado{position:static}
  .wiz-pe .small{display:none}
  .form-2{grid-template-columns:minmax(0,1fr)}
  .lido{grid-template-columns:minmax(0,1fr);gap:2px}
  .lido>span:nth-child(even){margin-bottom:8px}
  .drop{padding:30px 16px}
  .efeito{grid-template-columns:minmax(0,1fr)}
  .comp{grid-template-columns:minmax(0,1fr)}
  .comp>div:nth-child(-n+3){display:none}
  .comp>div:nth-child(3n+1){background:#FBFAFC;font-weight:600}
  .acoes{justify-content:flex-start}
}
.sk span.mk{color:#fff;font:700 13px/1 var(--f)}
.step-cel .barra{flex:none}

/* ===================== do app (o que o wireframe desenhava e agora funciona) ===================== */
button{font:inherit;cursor:pointer}
button.bt,button.bt2,button.bt3,button.btw,button.btg{border:0}
button.bt2{border:1px solid #CDBFE0}
button.btg{border:1px solid rgba(255,255,255,.35)}
button.bt3{background:none;padding:0}
a.bt,a.bt2,a.bt3,a.btw,a.btg,button{cursor:pointer}
.bt:hover{background:#4E1F70}.bt2:hover{background:var(--lavanda-2)}.btw:hover{background:var(--lavanda)}.btg:hover{background:rgba(255,255,255,.16)}
.bt3:hover{text-decoration:underline}
.bt[disabled],.bt2[disabled]{opacity:.55;cursor:not-allowed}
:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
input.input,textarea.input,select.input{font:inherit;color:var(--tinta);width:100%;appearance:none}
textarea.input{resize:vertical;line-height:1.5}
select.input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5468' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;padding-right:40px}
.input::placeholder{color:var(--cinza-2)}
.input.erro{border-color:#D9A13B;box-shadow:0 0 0 3px var(--ambar-claro)}
form{margin:0}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.flash{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;font-size:15px}
.flash.ok{background:var(--verde-claro);color:#2C5A12}
.flash.erro{background:var(--erro-claro);color:var(--erro)}
.flash.aviso{background:var(--ambar-claro);color:var(--ambar)}
.flash .i{margin-top:2px}
.flash ul{margin:6px 0 0;padding-left:18px}

/* acordeões de verdade (details) */
details.acc>summary{list-style:none;cursor:pointer}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary .seta-acc{transition:transform .15s}
details.acc[open]>summary .seta-acc{transform:rotate(180deg)}
details.acc+details.acc,section.acc+details.acc,details.acc+section.acc{margin-top:10px}
.acc>.h .t h3 .chip{margin-left:6px;vertical-align:middle}
details.sub{border:1px solid var(--linha);border-radius:12px;background:#FBFAFC;margin-top:4px}
details.sub>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-weight:600}
details.sub>summary::-webkit-details-marker{display:none}
details.sub>div{padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}
.parte-feita{display:flex;justify-content:flex-end;padding:14px 0 12px;border-top:1px solid var(--linha)}
.tabela-md{overflow-x:auto}
.tabela-md table{width:100%;border-collapse:collapse;font-size:15px}
.tabela-md th{text-align:left;font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);padding:10px 12px;border-bottom:1px solid var(--linha)}
.tabela-md td{padding:12px;border-bottom:1px solid var(--linha);vertical-align:top}
.extra-html{padding:6px 0 10px;display:flex;flex-direction:column;gap:10px}
.lista code,.ver code,p code,td code{font:400 13.5px/1.4 var(--mono);background:var(--gelo);border:1px solid var(--linha);border-radius:5px;padding:1px 5px}
.passo .cx>p{line-height:1.55}
.video-yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#170722}
.video-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cv-link{text-decoration:none;color:inherit}
.cartao-link{text-decoration:none;color:inherit;display:flex;flex-direction:column}

/* entrar */
.form-card form{display:flex;flex-direction:column;gap:16px}

/* upload */
.drop{position:relative;cursor:pointer}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop.sobre{border-color:var(--roxo);background:var(--lavanda)}
.drop .escolhido{font:500 14px/1.3 var(--mono);color:var(--roxo)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt{position:relative;cursor:pointer}
.opt:has(input:checked){border-color:var(--roxo);background:var(--lavanda-2)}
.opt:has(input:checked) .bx{background:var(--roxo);border-color:var(--roxo);color:#fff}
.opt.radio:has(input:checked) .bx{background:#fff;box-shadow:inset 0 0 0 4px var(--roxo)}
.opt .bx .i{opacity:0}
.opt:has(input:checked) .bx .i{opacity:1}
.icones label{cursor:pointer}
.icones input{position:absolute;opacity:0;pointer-events:none}
.icones label span{width:42px;height:42px;border-radius:10px;border:1px solid var(--linha);display:inline-flex;align-items:center;justify-content:center;color:var(--cinza);background:#fff}
.icones label:has(input:checked) span{border:2px solid var(--roxo);color:var(--roxo);background:var(--lavanda-2)}
.rcard{cursor:pointer;position:relative}
.rcard input{position:absolute;opacity:0;pointer-events:none}
.rcard:has(input:checked){border:2px solid var(--roxo);background:var(--lavanda-2)}
.rcard:has(input:checked) .bx{box-shadow:inset 0 0 0 5px var(--roxo);border-color:var(--roxo)}
.rcard.off{opacity:.5;cursor:not-allowed}
.mostra-se{display:none}
.rcard:has(input:checked)+.mostra-se,.mostra-quando:has(input[value=link]:checked) .so-link,.mostra-quando:has(input[value=pagina]:checked) .so-pagina,.mostra-quando:has(input[value=linha]:checked) .so-linha{display:grid}
.so-link,.so-pagina,.so-linha{display:none}
.adapt-linha{display:grid;grid-template-columns:150px 180px minmax(0,1fr);gap:8px}
.adapt-linha select.input,.adapt-linha input.input{min-height:42px;padding:9px 12px;font-size:15px}
.item-ed input.input{min-height:42px;padding:9px 12px;font-size:15px}
.preview-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ambar-claro);color:var(--ambar);border-radius:12px;padding:12px 16px;font-size:14.5px}
.vazio{padding:28px;text-align:center;color:var(--cinza);display:flex;flex-direction:column;align-items:center;gap:12px}
.copiado{color:var(--verde-escuro)!important}
@media (max-width:600px){
  .adapt-linha{grid-template-columns:minmax(0,1fr)}
}

/* ===================== telas médias (o wireframe desenhou 390 e 1440; aqui o meio do caminho) ===================== */
@media (max-width:1280px){
  .luz .pers-luz{width:190px}
  .hero .pers{width:300px;right:24px}
  .hero .pers img{width:290px}
  .hero .txt{max-width:calc(100% - 300px)}
  .hero .ponto-luz{right:330px}
}
@media (max-width:1100px){
  .luz .pers-luz{display:none}
  .wiz{grid-template-columns:minmax(0,1fr) 320px}
  .dois{grid-template-columns:minmax(0,1fr) 280px}
  .shero{grid-template-columns:minmax(0,1fr) 300px}
  .cursos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr);min-height:0}
  .luz{padding:28px 24px 32px;gap:16px}
  .luz ul,.luz .meio>p:not(.rot),.luz .pe{display:none}
  .luz h1{font-size:32px}
  .lado-form{padding:24px 16px 40px}
  .hero{padding:0 24px 28px;min-height:0;flex-direction:column;align-items:stretch}
  .hero .pers{position:relative;right:auto;top:auto;bottom:auto;width:auto;height:200px;order:-1;margin:0 -24px 4px;overflow:hidden}
  .hero .pers img{width:220px;top:18px;left:50%;right:auto;transform:translateX(-35%)}
  .hero .txt{max-width:none}
  .hero .ponto-luz{right:36px;top:30px}
  .hero h1{font-size:40px}
  .painel,.metodo,.conta,.tres,.efeito{grid-template-columns:minmax(0,1fr)}
  .shero{grid-template-columns:minmax(0,1fr);padding:28px 24px}
  .shero .ponto-luz{right:28px;top:26px}
  .dois,.wiz{grid-template-columns:minmax(0,1fr)}
  .lado-aulas{position:static;order:-1}
  .wiz-lado{position:static}
  .form-lib{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .form-lib .campo:first-child{grid-column:1/-1}
  .stepper li span.l{display:none}
  .stepper li.atual span.l{display:inline}
}
@media (max-width:900px) and (min-width:601px){
  .top .in{gap:0 16px}
  .dir .email{display:none}
  .nav{order:3;width:100%;margin:0;gap:24px;border-top:1px solid var(--linha)}
  .nav a{padding:12px 0 10px}
}
/* o selo "Em produção" no corpo do cartão é só do celular (no computador ele já está na capa) */
.meta-c>span.chip-m{display:none}
@media (max-width:600px){.meta-c>span.chip-m{display:inline-flex}}
a.avatar{text-decoration:none}
.cont-l .cv-cat{display:none}

/* celular por último: vence as regras de tela média acima */
@media (max-width:600px){
  .cursos{grid-template-columns:minmax(0,1fr)}
  .hero{padding:0 20px 28px}
  .hero .pers{margin:0 -20px 4px}
  .hero h1{font-size:34px}
  .luz{padding:22px 16px 26px;gap:14px}
  .luz h1{font-size:26px}
  .form-lib{grid-template-columns:minmax(0,1fr)}
  .form-lib .campo:first-child{grid-column:auto}
  .shero{padding:24px 20px}
  .shero h1{font-size:34px}
}