/* site/estilo.css — a identidade da DON Consultoria (don-consultoria.com), na
   vertente Fábrica de Conteúdos: fundo escuro, Archivo + JetBrains Mono, e o
   roxo da frente de conteúdo (--frente-con) como acento. Os tokens são os do
   tokens.css do site da DON, copiados com o mesmo nome, para as duas páginas
   envelhecerem juntas.
   A marca do CLIENTE aparece só dentro do iframe: a página que a rodeia não
   muda de cor, senão ele não sabe onde termina o site e começa a aula. */
:root{
  --sup-0:#070910; --sup-0-rgb:7 9 16; --sup-1:#0F1319; --sup-2:#1A1E25; --sup-3:#262A31;
  --txt-1:#F0F3F8; --txt-2:#B3BDCE; --txt-3:#8B919A;
  --linha:#22252B; --linha-forte:#3A3E45;
  --veu:rgb(255 255 255 / .045); --veu-forte:rgb(255 255 255 / .08);
  --acao-bg:#F0F6FF; --acao-bg-hover:#E0E7F1; --acao-txt:#13171F;
  --frente-con:#B886DA; --frente-con-rgb:184 134 218; --frente-con-claro:#E3CEF3;
  --frente-con-fundo:#372543; --frente-con-poco:#1E1226;
  --foco:#F0F6FF; --err:#F0A3A3;
  --sans:'Archivo',-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --max:1200px; --r-sm:10px; --r-md:14px; --r-lg:20px;
}
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; padding:0 16px; background:var(--sup-0); color:var(--txt-2); font:16px/1.68 var(--sans); font-variation-settings:'wdth' 100; -webkit-font-smoothing:antialiased}
:focus-visible{outline:2.5px solid var(--foco); outline-offset:3px; border-radius:3px}
h1,h2,h3{color:var(--txt-1); margin:0; font-weight:600; font-variation-settings:'wdth' 102; letter-spacing:-.022em; line-height:1.14; text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.55rem); letter-spacing:-.03em; line-height:1.08; max-width:16ch}
h1{background:linear-gradient(180deg,#FFFFFF 0%,#C9CDD6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
h1 em{font-style:normal; -webkit-text-fill-color:var(--frente-con); color:var(--frente-con)}
h2{font-size:clamp(1.45rem,2.2vw,2rem); font-weight:600; margin-bottom:.5em}
h3{font-size:.9rem; font-weight:600; margin-bottom:4px}
p{margin:0 0 12px}
a{color:var(--txt-1)}
.wrap{max-width:var(--max); margin:0 auto}

/* ---------- o topo, como no site da DON ---------- */
.topo{position:sticky; top:0; z-index:60; margin:0 -16px; padding:0 16px; background:rgb(var(--sup-0-rgb) / .78); backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid var(--linha)}
.topo-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px}
.topo-logo{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
.topo-logo img{height:36px; width:auto}
.topo-logo span{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--txt-3); white-space:nowrap}
.nav{display:flex; align-items:center; gap:24px}
.nav a{font-size:.9rem; text-decoration:none; color:var(--txt-2); transition:color .2s; display:inline-flex; align-items:center; min-height:24px; padding:5px 0}
.nav a:hover{color:var(--txt-1)}
.nav .nav-cta{white-space:nowrap; padding:8px 16px; border-radius:var(--r-sm); border:1px solid var(--linha); background:var(--veu); color:var(--txt-1); font-weight:600}
.nav .nav-cta:hover{border-color:var(--frente-con); color:var(--txt-1)}

/* ---------- o herói: o bloco da Fábrica de Conteúdos ---------- */
.sec{padding:clamp(40px,5vw,72px) 0}
.rotulo{display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--frente-con); margin-bottom:28px}
.frente-chip{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; padding:8px 14px; border-radius:999px; background:rgb(var(--frente-con-rgb) / .10)}
.frente-logo{height:72px; width:auto}
.bloco{display:grid; grid-template-columns:1fr 1.12fr; border:1px solid var(--linha); border-radius:var(--r-lg); background:var(--sup-1); overflow:hidden}
.bloco-txt{padding:clamp(28px,3.2vw,46px); display:flex; flex-direction:column; gap:0}
.bloco-txt .fio{height:1px; background:var(--linha); margin:0 0 28px}
.bloco-txt .sub{max-width:44ch; margin:16px 0 0}
.bloco-txt .chamadas{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px}
.bloco-painel{position:relative; overflow:hidden; min-height:340px; padding:clamp(28px,3.2vw,46px); display:flex; align-items:center; justify-content:center; background:var(--frente-con-fundo) radial-gradient(rgb(var(--frente-con-rgb) / .28) 1px, transparent 1.5px) 0 0/22px 22px}
/* A maquete da aula: o topo com logo, trilha e Sumário, e a capa com o chip
   do tema, como a casca desenha. --cliente é a cor principal que o cliente
   digita (app.js a escreve no :root), então o herói responde antes mesmo de
   o iframe recolorir. Sem hex, fica no roxo da vertente. */
.maquete{--cor:var(--cliente, #68497D); width:min(100%,420px); border-radius:var(--r-md); overflow:hidden; background:#fff; color:#181D4A; box-shadow:0 18px 24px -12px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .08); transform:rotate(-2deg) translateY(6px); transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bloco:hover .maquete{transform:rotate(0) translateY(0)}
.maquete__topo{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #DFE2F0; font:600 .72rem/1 var(--sans)}
.maquete__logo{color:var(--cor); white-space:nowrap}
.maquete__trilha{flex:1; height:4px; border-radius:2px; background:#E2E5F1; overflow:hidden}
.maquete__trilha i{display:block; width:11%; height:100%; background:var(--cor)}
.maquete__sumario{color:#555B7E; padding:5px 9px; border:1px solid #DFE2F0; border-radius:6px; white-space:nowrap}
.maquete__capa{padding:26px 22px 22px; background:var(--cor); color:#fff; display:grid; gap:14px; justify-items:start}
.maquete__chip{font:700 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:4px; background:rgb(255 255 255 / .18)}
.maquete__capa strong{font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:600; line-height:1.2; letter-spacing:-.02em; max-width:20ch}
.maquete__botao{font:600 .8rem/1 var(--sans); padding:9px 14px; border-radius:6px; background:#fff; color:var(--cor); margin-top:6px}
.maquete__legenda{position:absolute; left:clamp(28px,3.2vw,46px); bottom:18px; font:500 .72rem/1 var(--mono); letter-spacing:.06em; color:var(--frente-con-claro); opacity:.85}

/* ---------- orb (libraries.dev/orbs): o "gerando" da vitrine ---------- */
.orb{display:block; margin-bottom:6px}
/* Metal (libraries.dev/metal, em CSS): anel cromado de conic-gradient na
   borda, aresta de luz em cima e um halo que vagueia por dentro. O claro é o
   pill da DON em prata; o escuro é a superfície do site com o mesmo anel. */
.metal{position:relative; isolation:isolate; overflow:hidden; border:1px solid transparent !important; background:linear-gradient(180deg,#FAFAFC 0%,#D6D9E0 55%,#EEF0F4 100%) padding-box, conic-gradient(from 210deg,#FFFFFF,#7C808A 18%,#E6E8EE 34%,#4B4F58 50%,#FFFFFF 64%,#9FA3AD 80%,#FFFFFF) border-box; color:#13171F; box-shadow:inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(0 0 0 / .12), 0 10px 26px -12px rgb(0 0 0 / .7)}
.metal:hover{background:linear-gradient(180deg,#FFFFFF 0%,#E3E6EC 55%,#F6F7F9 100%) padding-box, conic-gradient(from 210deg,#FFFFFF,#7C808A 18%,#E6E8EE 34%,#4B4F58 50%,#FFFFFF 64%,#9FA3AD 80%,#FFFFFF) border-box}
.metal::after{content:''; position:absolute; inset:-60%; z-index:-1; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgb(255 255 255 / .9), transparent 38%); mix-blend-mode:screen; opacity:.55; animation:vagar 7s ease-in-out infinite alternate}
.metal--escuro{background:linear-gradient(180deg,#1C2027,#0F1319) padding-box, conic-gradient(from 210deg,#8A8E98,#2A2E36 18%,#767A84 34%,#1C1F26 50%,#B8BCC6 64%,#3A3E46 80%,#8A8E98) border-box; color:var(--txt-1); box-shadow:inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 26px -12px rgb(0 0 0 / .8)}
.metal--escuro:hover{background:linear-gradient(180deg,#242931,#141920) padding-box, conic-gradient(from 210deg,#8A8E98,#2A2E36 18%,#767A84 34%,#1C1F26 50%,#B8BCC6 64%,#3A3E46 80%,#8A8E98) border-box; color:var(--txt-1)}
.metal--escuro::after{opacity:.16}
/* O roxo é o metal do BOTÃO DE GERAR, e só dele: o anel e o miolo saem da
   rampa de --frente-con, para a única ação que monta a aula ser a única coisa
   roxa e sólida da página. Ele não leva [data-metal]: o metal-fx real é
   cromático e apagaria justamente o roxo. */
.metal--roxo{background:linear-gradient(180deg,#8E5FBC 0%,#5E3A85 52%,#7B4FA8 100%) padding-box, conic-gradient(from 210deg,#F3E6FF,#5E3A85 18%,#C9A4E4 34%,#33204A 50%,#FFFFFF 64%,#8E62B8 80%,#F3E6FF) border-box; color:#FFFFFF; box-shadow:inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .28), 0 14px 30px -14px rgb(0 0 0 / .8)}
.metal--roxo:hover{background:linear-gradient(180deg,#9E6ECD 0%,#6B4396 52%,#8A5CBB 100%) padding-box, conic-gradient(from 210deg,#F3E6FF,#5E3A85 18%,#C9A4E4 34%,#33204A 50%,#FFFFFF 64%,#8E62B8 80%,#F3E6FF) border-box; color:#FFFFFF}
.metal--roxo::after{opacity:.4}
.metal:disabled{opacity:.4}
.metal:disabled::after{animation:none}
.metal-host{display:inline-flex}
@keyframes vagar{0%{transform:translate(-22%,-18%) scale(.9)} 50%{transform:translate(14%,10%) scale(1.05)} 100%{transform:translate(24%,-14%) scale(.95)}}
.badge{display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px; border:1px solid transparent; background:linear-gradient(180deg,#1C2027,#0F1319) padding-box, conic-gradient(from 210deg,#8A8E98,#2A2E36 18%,#767A84 34%,#1C1F26 50%,#B8BCC6 64%,#3A3E46 80%,#8A8E98) border-box; color:var(--txt-1); font:500 .72rem/1 var(--mono); letter-spacing:.06em; box-shadow:inset 0 1px 0 rgb(255 255 255 / .18)}
@media (prefers-reduced-motion:reduce){.metal::after{animation:none}}

/* ---------- botões e links ---------- */
.pill,button{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:9px; background:var(--acao-bg); color:var(--acao-txt); font:inherit; font-weight:600; font-size:.9rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .2s,border-color .2s,color .2s,opacity .2s}
/* :where() derruba a especificidade do elemento: sem ele, este hover genérico
   (0,2,1) vencia o hover de QUALQUER botão de componente (0,2,0) e pintava
   de branco quase ilegível o chip de cor, o Tela cheia e o Ajustar tom
   (Marcelo, 16/09/2026: "hover branco sem legibilidade em tudo"). */
:where(.pill,button):not(.metal):hover{background:var(--acao-bg-hover)}
.pill-linha,button.pill-linha{background:var(--veu); color:var(--txt-1); border-color:var(--linha)}
.pill-linha:hover,button.pill-linha:hover{background:var(--veu-forte); border-color:var(--linha-forte)}
button:disabled{opacity:.4; cursor:not-allowed}
button:not(.metal):disabled:hover{background:var(--acao-bg)}
button.pill-linha:disabled:hover{background:var(--veu); border-color:var(--linha)}
.pill svg,button svg,#cta-contato svg,.link-seta svg{width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.link-seta{display:inline-flex; align-items:center; gap:7px; padding:12px 4px; color:var(--txt-1); font-size:.9rem; font-weight:600; text-decoration:none}
.link-seta:hover{color:var(--frente-con)}
.link-seta:hover svg{transform:translateX(3px)}

/* Quando o metal-fx assume o botão (site/metal.mjs), ele mesmo pinta o anel e
   o miolo e zera o fundo do filho: fica o texto claro e nada de sombra. */
.pill.fx,button.fx{color:var(--txt-1); background:transparent; border-color:transparent; box-shadow:none}
.pill.fx:hover,button.fx:hover{background:rgb(255 255 255 / .05)}
button.fx:disabled:hover{background:transparent}

/* ---------- a ferramenta: o painel e a vitrine ---------- */
.passo{font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); display:block; margin-bottom:10px}
/* minmax(0,1fr): a trilha auto herdaria o min-content da barra da janela e
   estouraria a tela do celular (medido em 16/09/2026: 402 px em 375). */
/* A identidade virou um passo inteiro, não uma barra de quatro campos
   (Marcelo, 16/09/2026). São duas seções irmãs: montar a marca e, depois,
   ver a aula. O #aula recua da barra grudada do topo ao receber o scroll. */
.gerador{display:block}
.gerador .sec{padding-top:0}
.gerador #gerador{padding-top:clamp(40px,5vw,72px)}
#aula{scroll-margin-top:84px}
.vitrine{min-width:0}
.painel__cab{margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--linha)}
.painel__cab .passo{margin-bottom:10px}
.painel__cab h2{margin-bottom:.35em}
.painel__dica{margin:0; font-size:.9rem; max-width:60ch}
.painel__dica em{font-style:normal; color:var(--txt-1); font-weight:600}
/* minmax(0,…) nas duas colunas: a trilha auto herdaria o min-content da
   maquete e estouraria a tela do celular (medido em 16/09/2026). */
.painel__corpo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(24px,3vw,44px); align-items:start}
.etapas{display:grid; gap:26px; min-width:0}
.etapa{min-width:0; padding-top:26px; border-top:1px solid var(--linha)}
.etapa:first-child{padding-top:0; border-top:0}
.etapa__cab{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; margin-bottom:18px}
.etapa__cab h3{font-size:1.05rem; margin-bottom:4px}
.etapa__cab h3 small{font-weight:500; font-size:.72rem; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); vertical-align:2px; margin-left:8px}
.etapa__cab p{margin:0; font-size:.9rem; max-width:52ch}
.etapa__icone{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--frente-con); background:rgb(var(--frente-con-rgb) / .12)}
.etapa__icone svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.marca-campos{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start}
.marca-campos label{margin:0}

/* A prévia rápida: a capa da aula respondendo à cor, ao logo e ao nome
   enquanto o cliente escolhe. Não é a aula — a aula é o passo 2. */
.amostra{position:sticky; top:96px; display:grid; gap:14px; min-width:0}
.amostra__rotulo{font:500 .72rem/1 var(--mono); letter-spacing:.06em; color:var(--txt-3)}
.amostra__nota{margin:0; font-size:.9rem; color:var(--txt-3)}
.maquete--amostra{width:100%; transform:none; box-shadow:0 14px 22px -14px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .08)}
.maquete__logo-img{height:22px; width:auto; max-width:104px; object-fit:contain}
.maquete__logo-img[hidden]{display:none}
.maquete__logo{overflow:hidden; text-overflow:ellipsis; max-width:120px}

/* Gerar: a única ação que monta a aula, e por isso a única peça roxa e
   sólida do painel. */
.gerar{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:28px; padding-top:24px; border-top:1px solid var(--linha)}
.gerar button{padding:15px 26px; font-size:1rem; border-radius:11px}
.gerar__nota{margin:0; font-size:.9rem; color:var(--txt-3); max-width:44ch}
.gerar__nota--pronta{color:var(--frente-con)}
.vitrine__cab{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:18px}
.vitrine__cab h2{margin-bottom:.35em}
.seg{display:inline-flex; flex:0 0 auto; padding:3px; border-radius:999px; background:var(--sup-2); border:1px solid var(--linha)}
.seg .seg__btn{padding:7px 14px; border-radius:999px; border:0; background:transparent; color:var(--txt-2); font-size:.9rem; box-shadow:none}
.seg .seg__btn:hover{background:var(--veu-forte); color:var(--txt-1)}
.seg .seg__btn[aria-pressed=true]{background:var(--acao-bg); color:var(--acao-txt)}
.painel,.vitrine,.acao{background:var(--sup-1); border:1px solid var(--linha); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,32px)}
label{display:block; margin:0 0 16px; font-size:.9rem; font-weight:600; color:var(--txt-1)}
label small{font-weight:400; font-size:inherit; color:var(--txt-3)}
input,button{min-width:0}
input[type=text],input[type=email]{display:block; width:100%; margin-top:6px; padding:11px 13px; border:1px solid var(--linha-forte); border-radius:var(--r-sm); font:inherit; font-size:.9rem; color:var(--txt-1); background:var(--sup-0); caret-color:var(--frente-con); transition:border-color .2s}
input::placeholder{color:var(--txt-3)}
input[type=text]:hover,input[type=email]:hover{border-color:var(--txt-2)}
input[type=text]:focus-visible,input[type=email]:focus-visible{outline-offset:2px; border-color:var(--frente-con)}
input[type=file]{display:block; width:100%; max-width:100%; margin-top:6px; font:inherit; font-size:.9rem; color:var(--txt-2)}
input[type=file]::file-selector-button{font:inherit; font-weight:600; font-size:.9rem; padding:7px 12px; margin-right:10px; border-radius:var(--r-sm); border:1px solid var(--linha); background:var(--veu); color:var(--txt-1); cursor:pointer}
.cor__nome{display:block; margin-bottom:8px; font-size:.9rem; font-weight:600; color:var(--txt-1)}

/* ---------- o seletor de cor (site/seletor-cor.mjs) ----------
   O input[type=color] nativo saía da página para o diálogo do sistema, que é
   pequeno, fala em R/G/B e não ensina nada. Aqui a escolha fica na página em
   três vias: amostras nomeadas, três controles com a trilha pintada com o que
   cada um faz, e o campo do hex, que continua sendo a verdade. */
.sc{display:grid; gap:18px; min-width:0}
.sc__amostras{display:flex; flex-wrap:wrap; gap:8px}
.sc__amostra{position:relative; display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border-radius:999px; border:1px solid var(--linha-forte); background:var(--sup-0); color:var(--txt-2); font:500 .8rem/1 var(--sans); box-shadow:none; transition:border-color .18s,color .18s,background .18s}
.sc__amostra::before{content:''; width:20px; height:20px; border-radius:50%; flex:0 0 auto; background:var(--c,transparent); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
.sc .sc__amostra:hover{border-color:var(--txt-2); color:var(--txt-1); background:var(--veu)}
.sc .sc__amostra[aria-pressed=true]{border-color:var(--frente-con); color:var(--txt-1); background:rgb(var(--frente-con-rgb) / .12)}
.sc__amostra[aria-pressed=true]::after{content:''; position:absolute; inset:-4px; border-radius:999px; border:1px solid rgb(var(--frente-con-rgb) / .45)}
/* "Sem cor": a barra diagonal do sinal de proibido, uma só, no lugar do
   xadrez de transparencia — aqui nao ha transparencia nenhuma para mostrar. */
.sc__amostra--sem::before{background:linear-gradient(135deg,transparent calc(50% - 1px),var(--txt-3) calc(50% - 1px),var(--txt-3) calc(50% + 1px),transparent calc(50% + 1px)) var(--sup-2)}
.sc__amostra--logo span{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em}
.sc__logo[hidden]{display:none}
.sc__logo{display:grid; gap:8px}
.sc__logo-rotulo{font:500 .72rem/1 var(--mono); letter-spacing:.06em; color:var(--frente-con)}
.sc__logo-cores{display:flex; flex-wrap:wrap; gap:8px}

/* Os três controles. A trilha de cada um mostra o resultado de arrastá-lo, e o
   polegar carrega a cor atual: é a parte didática do seletor. */
.sc__mais{align-self:start; justify-self:start; gap:7px; padding:6px 12px 6px 8px; border-radius:999px; border:1px solid var(--linha); background:var(--veu); color:var(--txt-2); font-size:.9rem; font-weight:500; box-shadow:none; margin-bottom:-8px}
.sc .sc__mais:hover{background:var(--veu-forte); color:var(--txt-1); border-color:var(--linha-forte)}
.sc__mais svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s}
.sc__mais[aria-expanded=true] svg{transform:rotate(180deg)}
.sc__fino[hidden]{display:none}
.sc__fino{display:grid; gap:12px; padding:16px 18px; border:1px solid var(--linha); border-radius:var(--r-md); background:var(--sup-0)}
.sc__eixo{display:grid; grid-template-columns:minmax(0,12ch) minmax(0,1fr) auto; align-items:center; gap:14px; margin:0; font-weight:600}
.sc__eixo-nome{font-size:.9rem; color:var(--txt-1); line-height:1.2}
.sc__eixo-nome small{display:block; font:400 .72rem/1.3 var(--sans); color:var(--txt-3)}
.sc__eixo-valor{font:500 .72rem/1 var(--mono); letter-spacing:.04em; color:var(--txt-3); min-width:5ch; text-align:right}
.sc__eixo input[type=range]{appearance:none; -webkit-appearance:none; width:100%; height:22px; margin:0; background:transparent; cursor:ew-resize}
.sc__eixo input[type=range]::-webkit-slider-runnable-track{height:10px; border-radius:999px; background:var(--trilha,var(--sup-3)); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
.sc__eixo input[type=range]::-moz-range-track{height:10px; border-radius:999px; background:var(--trilha,var(--sup-3)); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
.sc__eixo input[type=range]::-webkit-slider-thumb{appearance:none; -webkit-appearance:none; width:20px; height:20px; margin-top:-5px; border-radius:50%; background:var(--polegar,#fff); border:2.5px solid #F2F4F8; box-shadow:0 2px 8px rgb(0 0 0 / .6)}
.sc__eixo input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--polegar,#fff); border:2.5px solid #F2F4F8; box-shadow:0 2px 8px rgb(0 0 0 / .6)}

.sc__exato{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px}
.sc__chip{display:grid; place-items:center; width:58px; height:58px; flex:0 0 auto; border-radius:12px; border:1px solid var(--linha-forte); background:var(--sup-0)}
.sc .sc__chip--vazio{background:linear-gradient(135deg,transparent calc(50% - 1px),var(--txt-3) calc(50% - 1px),var(--txt-3) calc(50% + 1px),transparent calc(50% + 1px)) var(--sup-2)}
.sc__chip b{font:700 1.1rem/1 var(--mono); color:var(--txt-3)}

.sc__campo{flex:0 1 240px; min-width:0}
.sc__hex-rotulo{display:block; margin-bottom:6px; font-size:.9rem; font-weight:600; color:var(--txt-1)}
.sc__campo input[type=text]{margin-top:0; font-family:var(--mono); font-size:1rem; letter-spacing:.08em; padding:15px 13px}
.sc--erro .sc__campo input[type=text]{border-color:var(--err)}
.sc__gota{flex:0 0 auto; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--linha-forte); background:var(--veu); color:var(--txt-2); font-size:.9rem; box-shadow:none}
.sc .sc__gota:hover{background:var(--veu-forte); border-color:var(--frente-con); color:var(--txt-1)}
.sc__gota svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sc__gota[hidden]{display:none}
.sc__ajuda{margin:0; font-size:.9rem; color:var(--txt-3)}
.sc--erro .sc__ajuda{color:var(--err)}
.paleta[hidden]{display:none}
.paleta{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0}
.paleta__rotulo{flex:0 0 100%; font:500 .72rem/1 var(--mono); letter-spacing:.06em; color:var(--txt-3); margin:0 0 3px}
.paleta i{flex:1 1 20px; height:24px; border-radius:6px; border:1px solid rgb(255 255 255 / .08)}
/* O logo: uma área que aceita arrastar, com a prévia no lugar do ícone. */
.solta{position:relative; display:grid; justify-items:center; text-align:center; gap:12px; padding:22px 16px; border:1px dashed var(--linha-forte); border-radius:var(--r-md); background:var(--veu); cursor:pointer; font-weight:400; color:var(--txt-2); transition:border-color .2s,background .2s}
.solta:hover,.solta--sobre{border-color:var(--frente-con); background:rgb(var(--frente-con-rgb) / .08)}
.solta:focus-within{outline:2.5px solid var(--foco); outline-offset:3px}
.solta input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0)}
.solta__icone,.solta__previa{width:46px; height:46px; border-radius:10px; flex:0 0 auto}
.solta__icone{display:grid; place-items:center; background:var(--sup-2); color:var(--frente-con)}
.solta__icone svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.solta__previa{object-fit:contain; background:#fff; padding:5px}
.solta__texto{display:grid; gap:4px; font-size:.9rem}
.solta small{white-space:nowrap}
.solta u{color:var(--txt-1); text-decoration-color:var(--frente-con); text-decoration-thickness:1.5px; text-underline-offset:3px}
.solta small{font-size:.9rem; color:var(--txt-3)}
.erros{margin:0; color:var(--err); font-size:.9rem; min-height:1.5em}
.ajustes{margin:0; padding:0; list-style:none; color:var(--txt-3); font-size:.9rem}
.ajustes li{margin:6px 0}
.ajustes .sw{display:inline-block; width:.9em; height:.9em; border-radius:3px; border:1px solid var(--linha-forte); vertical-align:-1px; margin:0 3px}
.vitrine__dica{margin:0; font-size:.9rem; max-width:70ch}
/* Altura pela largura da tela, não por aspect-ratio + min-height: os dois
   juntos fazem a largura mínima da moldura nascer da altura, e o grid estoura
   para fora da tela (visto no painel de 800 px em 15/09/2026). */
.janela{border:1px solid var(--linha-forte); border-radius:var(--r-md); overflow:hidden; background:var(--sup-2)}
.janela__barra{display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--linha); font:500 .72rem/1 var(--mono); letter-spacing:.04em; color:var(--txt-3)}
.janela__barra i{width:10px; height:10px; border-radius:50%; background:var(--sup-3)}
.janela__barra span{margin-left:8px}
.janela__vivo{margin-left:auto; color:var(--frente-con)}
.janela__vivo::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
@media (prefers-reduced-motion:reduce){.maquete{transition:none}}
.janela__cheia{margin-left:10px; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:6px; border:1px solid var(--linha); background:var(--veu); color:var(--txt-2); font:inherit; font-size:.72rem; letter-spacing:.04em; cursor:pointer}
.janela__cheia:hover{border-color:var(--frente-con); color:var(--txt-1); background:var(--veu-forte)}
.janela__cheia svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.janela:fullscreen,.janela--cheia{position:fixed; inset:0; z-index:100; border:0; border-radius:0; background:var(--sup-0); display:flex; flex-direction:column}
.janela:fullscreen .moldura,.janela--cheia .moldura{flex:1; height:auto; aspect-ratio:auto}
.janela--mobile{width:min(100%,430px); margin:0 auto}
.janela--mobile .moldura{aspect-ratio:9/17}
.moldura{position:relative; width:100%; aspect-ratio:16/9; max-width:100%; overflow:hidden; background:var(--sup-3)}
/* "Gerando a sua aula": o véu sobre o iframe enquanto as cores e as cenas
   entram. Some quando a recoloração termina, com um mínimo para o olho ver. */
.gerando[hidden]{display:none}
.gerando{position:absolute; inset:0; display:grid; place-items:center; container-type:size; background:rgb(var(--sup-0-rgb) / .86); backdrop-filter:blur(6px); animation:surgir .25s ease-out}
.gerando__caixa{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; text-align:center; padding:16px; gap:4px}
.gerando__caixa strong{display:block; color:var(--txt-1); font-size:1.12rem; font-weight:600; line-height:1.2}
.gerando .orb{display:block; flex:none; width:min(96cqw,84cqh); height:min(96cqw,84cqh); margin:0; filter:drop-shadow(0 0 10px rgb(255 255 255 / .1))}
.gerando__texto{display:grid; gap:8px; min-width:0}
.gerando__etapa{font:500 .72rem/1.3 var(--mono); letter-spacing:.04em; color:var(--txt-3); min-height:1em}
@keyframes surgir{from{opacity:0}}
.moldura iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff}

/* ---------- como funciona: quatro passos ---------- */
.passos{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:passo}
.passos li{position:relative; background:var(--sup-1); border:1px solid var(--linha); border-radius:var(--r-lg); padding:24px 22px 22px; transition:transform .2s,border-color .2s,background .2s}
.passos li:hover{transform:translateY(-3px); border-color:var(--linha-forte); background:var(--sup-2)}
.passos__n{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; margin-bottom:18px; font:700 .9rem/1 var(--mono); color:var(--frente-con); background:rgb(var(--frente-con-rgb) / .12)}
.passos h3{font-size:1rem; margin-bottom:8px}
.passos p{margin:0; font-size:.9rem; max-width:34ch}

/* ---------- a grade curricular, sob demanda ---------- */
.grade{background:var(--sup-1); border:1px solid var(--linha); border-radius:var(--r-lg); overflow:hidden}
.grade summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(20px,2.4vw,32px); cursor:pointer}
.grade summary::-webkit-details-marker{display:none}
.grade summary h2{margin:0}
.grade summary small{margin-left:10px; vertical-align:middle; color:var(--frente-con)}
.grade summary svg{width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--txt-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s}
.grade[open] summary svg{transform:rotate(180deg)}
.grade summary:hover svg{stroke:var(--frente-con)}
.grade__corpo{display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:clamp(28px,4vw,56px); padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px); border-top:1px solid var(--linha)}
.grade__ementa p{margin:0; max-width:52ch}
.grade__temas{list-style:none; margin:0; padding:0}
.grade__temas li{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:13px 0; border-top:1px solid var(--linha); color:var(--txt-1); font-size:.9rem; line-height:1.5}
.grade__temas li:first-child{border-top:0; padding-top:0}
.grade__temas b{font:700 .72rem/1.9 var(--mono); letter-spacing:.06em; color:var(--txt-3)}
.grade__temas .gratis{margin-left:10px; vertical-align:1px; color:var(--frente-con)}

/* ---------- as duas saídas ---------- */
.acoes{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.acao p{max-width:46ch}
.acao label{margin-bottom:14px}
.acao--pago{border-color:rgb(var(--frente-con-rgb) / .45); background:linear-gradient(160deg,var(--frente-con-poco),var(--sup-1) 60%)}
.contato{font-size:.9rem; color:var(--txt-3)}
.estado{grid-column:1/-1; margin:0; color:var(--txt-2); font-size:.9rem; min-height:1.5em}
.estado:not(:empty)::before{content:'▸ '; color:var(--frente-con)}

/* ---------- a página de obrigado ---------- */
.cartao{max-width:640px; margin:0 auto}
.cartao h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cartao .acao{margin-top:24px}

/* ---------- o rodapé ---------- */
.rodape{margin:clamp(40px,5vw,72px) -16px 0; padding:0 16px 34px; border-top:1px solid var(--linha); color:var(--txt-2)}
.rodape-in{display:grid; grid-template-columns:1.4fr 1fr; gap:36px; padding:44px 0 38px}
.rodape-marca img{height:34px; width:auto; margin-bottom:18px; opacity:.92}
.rodape-marca p{max-width:400px; margin:0}
.rodape-contato{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.rodape-contato a{text-decoration:none; color:var(--txt-2); transition:color .2s}
.rodape-contato a:hover{color:var(--frente-con); text-decoration:underline; text-underline-offset:4px}
.rodape-base small{font-size:inherit}
.rodape-base{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:24px; border-top:1px solid var(--linha); font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--txt-3)}

@media (max-width:1100px){.passos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* A prévia rápida desce para debaixo dos controles antes de a coluna ficar
   estreita demais para a capa da maquete caber. */
@media (max-width:1000px){
  .painel__corpo{grid-template-columns:minmax(0,1fr)}
  .amostra{position:static; grid-template-columns:minmax(0,260px) minmax(0,1fr); align-items:start; column-gap:20px}
  .amostra__rotulo{grid-column:1/-1}
  .amostra__nota{align-self:end}
}
@media (max-width:900px){
  .bloco,.acoes,.rodape-in,.passos,.marca-campos,.grade__corpo{grid-template-columns:minmax(0,1fr)}
  .amostra{grid-template-columns:minmax(0,1fr)}
  .sc__eixo{grid-template-columns:minmax(0,1fr) auto; row-gap:4px}
  .sc__eixo input[type=range]{grid-column:1/-1}
  .sc__eixo-nome small{display:inline; margin-left:6px}
  .vitrine__cab{flex-direction:column; align-items:flex-start}
  .bloco-painel{min-height:0; order:-1; padding:28px 20px 44px}
  .maquete{transform:none}
  .nav a:not(.nav-cta){display:none}
  .topo-logo span{display:none}
  .estado{grid-column:auto}
}

/* ---------- alternativa Astra: escolha curta, prévia e próximo passo ---------- */
html{scroll-padding-top:96px; scrollbar-color:var(--linha-forte) var(--sup-0)}
::selection{background:var(--frente-con-fundo); color:var(--txt-1)}
[hidden]{display:none !important}
.pular{position:fixed; z-index:100; top:8px; left:16px; padding:12px 18px; background:var(--acao-bg); color:var(--acao-txt); transform:translateY(-160%)}
.pular:focus{transform:none}
button,.pill{min-height:44px}
button{white-space:nowrap}
section[id],article[id]{scroll-margin-top:96px}
h1{background:none; color:var(--txt-1); -webkit-text-fill-color:var(--txt-1); font-size:clamp(2.65rem,5.1vw,4.4rem); max-width:13ch; line-height:1.04}
h1 em{-webkit-text-fill-color:var(--frente-con)}
h2{font-size:clamp(1.6rem,2.65vw,2.55rem); letter-spacing:-.03em}
p{text-wrap:pretty}
#inicio{padding-top:56px; padding-bottom:48px}
.bloco{border:0; border-radius:0; background:none; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; overflow:visible}
.bloco-txt{padding:0}
.rotulo{gap:16px; margin-bottom:24px}
.frente-logo{height:54px}
.frente-chip{padding:0; background:none; font-size:.75rem}
.bloco-txt .sub{font-size:1.05rem; line-height:1.65; max-width:48ch; margin-top:24px}
.bloco-txt .chamadas{margin-top:24px}
/* O shader externo deixava este CTA chapado. O aço e seu reflexo ficam no
   próprio link, para preservar o acabamento mesmo sem WebGL ou rede. */
.pill.cta-metal{
  color:#191D25; white-space:nowrap; border-radius:10px;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgb(255 255 255 / .14) 2px 3px),linear-gradient(115deg,#A4AAB4 0%,#F7F8FA 22%,#CED2D9 43%,#F2F4F7 52%,#9CA3AF 76%,#E5E8ED 100%);
  border:1px solid #E9ECF1 !important;
  box-shadow:inset 0 1px 0 #FFF,inset 0 -2px 2px rgb(48 55 69 / .28),0 5px 12px -6px rgb(0 0 0 / .7);
  transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease,filter .24s ease;
}
.cta-metal>span,.cta-metal>svg{position:relative; z-index:1}
.pill.cta-metal::after{
  inset:-35% auto; left:-65%; width:45%; z-index:0; opacity:0;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .85),transparent);
  mix-blend-mode:normal; transform:skewX(-22deg); animation:none;
}
@keyframes reflexo-metal{0%{left:-65%;opacity:0}20%{opacity:.9}100%{left:135%;opacity:0}}
.pill.cta-metal:focus-visible::after{animation:reflexo-metal .85s ease-out both}
@media (hover:hover){
  .pill.cta-metal:hover{transform:translateY(-2px); filter:brightness(1.07); box-shadow:inset 0 1px 0 #FFF,inset 0 -2px 2px rgb(48 55 69 / .2),0 9px 18px -7px rgb(0 0 0 / .8)}
  .pill.cta-metal:hover::after{animation:reflexo-metal .85s ease-out both}
  .pill.cta-metal:hover svg{transform:translateX(3px)}
}
.pill.cta-metal:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.pill.cta-metal:hover,.pill.cta-metal:hover svg{transform:none}}
.hero-garantia{margin:15px 0 0; font-size:.8rem; color:var(--txt-3)}
.bloco-painel{min-height:375px; padding:36px 28px 70px; background:var(--frente-con-poco); border-radius:var(--r-lg); border:1px solid var(--frente-con-fundo)}
.bloco-painel .maquete{--cor:#68497D; transform:none; width:100%}
.bloco:hover .maquete{transform:none}
.bloco-painel .maquete__capa{padding:32px 26px; min-height:210px}
.bloco-painel .maquete__capa strong{font-size:2rem; max-width:15ch}
.maquete__legenda{line-height:1.5; right:24px; bottom:20px; left:28px; letter-spacing:0}
#como{padding:30px 0 40px; border-top:1px solid var(--linha)}
#como h2{font-size:1.15rem; margin:0 0 24px; letter-spacing:-.015em}
.passos{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:0}
.passos li{display:flex; align-items:flex-start; gap:18px; padding:0; background:none; border:0; border-radius:0}
.passos li:hover{background:none; transform:none}
.passos__n{flex-shrink:0; border-radius:50%; margin:0; width:56px; height:56px; font-size:1.75rem}
.passos h3{font-size:1rem; margin:3px 0 6px}
.passos p{font-size:.9rem; line-height:1.6; max-width:34ch}
.gerador #gerador{padding-top:20px}
.painel{padding:clamp(20px,2.7vw,36px)}
.painel__cab{padding-bottom:24px; margin-bottom:28px}
.painel__cab h2{margin-bottom:12px}
.painel__dica{max-width:85ch; line-height:1.65}
.painel__corpo{grid-template-columns:minmax(0,1fr) 280px; gap:32px}
.etapas{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; row-gap:30px}
.etapa--marca{grid-column:1/-1}
.etapa{padding-top:24px}
.etapa__cab{display:block; margin-bottom:20px}
.etapa__icone{display:none}
.etapa__cab h3{font-size:1.13rem; margin-bottom:8px}
.etapa__cab p{font-size:.875rem; line-height:1.6}
.etapa--cor .etapa__cab p{min-height:4.8em}
.marca-campos{grid-template-columns:1.15fr 1fr; align-items:center}
.solta{display:flex; text-align:left; justify-content:flex-start; padding:16px; min-height:108px; gap:12px}
.solta__icone,.solta__previa{width:34px; height:34px}
.solta small{white-space:normal; font-size:.75rem; line-height:1.5}
.solta__texto{font-size:.85rem}
.campo-nome .cor__nome{margin-bottom:8px}
.amostra{top:96px; padding-top:0; gap:18px; grid-template-columns:minmax(0,1fr)}
.amostra__rotulo{font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--txt-1); letter-spacing:0; margin:0}
.maquete--amostra .maquete__topo{padding:12px 10px; gap:8px}
.maquete--amostra .maquete__sumario{font-size:.6rem; padding:5px}
.maquete--amostra .maquete__logo{max-width:96px; font-size:.65rem}
.maquete--amostra .maquete__capa{padding:26px 20px; min-height:236px; gap:18px}
.maquete--amostra .maquete__capa strong{font-size:1.45rem; max-width:16ch}
.maquete__destaque{display:block; background:var(--destaque,#E3CEF3); color:var(--destaque-tinta,#372543); padding:6px 10px; font-size:.75rem; font-weight:600; border-radius:4px}
.amostra__nota{font-size:.8rem; line-height:1.65}
.paleta{gap:4px}
.paleta i{height:12px; border-radius:2px}
.paleta__rotulo{font:400 .75rem/1.5 var(--sans); letter-spacing:0; margin-bottom:6px}
.sc{gap:14px}
.sc__exato{align-items:flex-end; flex-wrap:nowrap; gap:10px}
.sc__chip{width:44px; height:48px; border-radius:8px}
.sc__campo{flex:1; min-width:0}
.sc__hex-rotulo{font-size:.75rem; margin:0 0 6px; line-height:1.4}
.sc__campo input[type=text]{font-size:.9rem; height:48px; padding:12px; letter-spacing:.02em}
.sc__gota{width:44px; height:48px; padding:10px}
.sc__gota span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.sc__sugestoes{font-size:.75rem; color:var(--txt-3); margin-top:3px}
.sc__amostras{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.sc__amostra{justify-content:center; flex-direction:column; min-width:0; min-height:60px; padding:7px 3px; border-radius:8px; gap:5px; border-color:transparent; font-size:.64rem; line-height:1.2; white-space:normal; text-align:center; background:var(--sup-0)}
.sc__amostra::before{width:24px; height:24px; border-radius:5px}
.sc__amostra[aria-pressed=true]::after{inset:-1px; border-radius:8px; border-color:var(--frente-con)}
.sc__amostra--sem{grid-column:span 2; flex-direction:row; font-size:.72rem; padding:8px}
.sc__amostra--sem::before{width:18px; height:18px}
.sc__logo{order:-1; padding:12px; border-radius:8px; background:var(--frente-con-poco)}
.sc__logo-rotulo{font:500 .75rem/1.4 var(--sans); letter-spacing:0}
.sc__logo-cores{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.sc__amostra--logo{flex-direction:row; min-height:44px}
.sc__amostra--logo span{font-size:.64rem; letter-spacing:0}
.sc__mais{font-size:.8rem; border:0; background:none; padding:0 4px; margin:0; min-height:44px; border-radius:4px}
.sc__ajuda{font-size:.75rem; line-height:1.55; margin-top:-8px}
.sc__fino{padding:14px; gap:20px}
.sc__eixo{grid-template-columns:minmax(0,1fr) auto; gap:8px}
.sc__eixo-nome{font-size:.8rem}
.sc__eixo-nome small{display:block; margin:3px 0 0; font-size:.7rem}
.sc__eixo input[type=range]{grid-row:2; grid-column:1/-1; height:32px}
.sc__eixo-valor{grid-column:2; grid-row:1}
.erros:empty,.ajustes:empty{display:none}
.erros:not(:empty),.ajustes:not(:empty){padding:14px 16px; margin-top:20px; border:1px solid var(--linha-forte); border-radius:8px; background:var(--sup-0)}
.ajustes{color:var(--txt-2); font-size:.8rem}
.privacidade{font-size:.8rem; margin:28px 0 0; color:var(--txt-3)}
.gerar{margin-top:18px; padding-top:22px; justify-content:space-between}
.gerar__nota{font-size:.85rem}
.vitrine{background:transparent; padding:0; border:0}
.vitrine__cab{margin-bottom:20px}
.vitrine__dica{font-size:.9rem; max-width:65ch}
.aula-instrucoes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; list-style:none; margin:24px 0; padding:24px 0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.aula-instrucoes li{display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:12px}
.aula-instrucoes svg{width:24px; height:24px; fill:none; stroke:var(--frente-con); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.aula-instrucoes h3{font-size:.95rem; line-height:1.5; margin:0 0 6px; color:var(--txt-1)}
.aula-instrucoes p{font-size:.85rem; line-height:1.6; margin:0}
.aula-instrucoes strong{font-weight:600; color:var(--txt-1)}
.aula-instrucoes a{color:var(--frente-con-claro); text-underline-offset:3px}
.aula-instrucoes a:hover{color:var(--txt-1)}
@media (max-width:1100px){.aula-instrucoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aula-aviso{font-size:.85rem; margin-bottom:16px; padding:12px 16px; background:var(--sup-1); border-radius:8px; color:var(--txt-2)}
.janela__cheia{min-height:32px}
.janela__barra .janela__vivo{margin-left:auto}
/* A rolagem até a janela já reserva o topo fixo via scroll-padding do html.
   A altura restante acomoda a barra da aula e mantém sua navegação visível. */
/* Piso de 640px: abaixo disso a capa da aula rola, e no Moodle ela não rola
   (notebook de 1366 px com zoom de 125% dava 520px). */
.janela:not(:fullscreen):not(.janela--cheia) .moldura{max-height:max(calc(100dvh - 180px), 640px)}
@media (min-width:651px){.janela:not(:fullscreen):not(.janela--cheia):not(.janela--mobile) .moldura{min-height:640px}}
.janela__cheia--sair{border-color:var(--frente-con); color:var(--txt-1); background:var(--veu-forte)}
.curriculo{border-top:1px solid var(--linha)}
.curriculo__cab{display:flex; align-items:center; justify-content:space-between; gap:24px}
.curriculo__cab p{margin:0; max-width:65ch}
.curriculo__total{font:500 .9rem/1 var(--mono); color:var(--frente-con); white-space:nowrap; padding:14px 18px; border:1px solid var(--frente-con-fundo); border-radius:8px}
.curriculo__intro{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:26px 0; margin:24px 0 12px; border-top:1px solid var(--linha)}
.curriculo__intro>p{max-width:67ch; font-size:.9rem; margin:0}
.ementa{max-width:100%; font-size:.85rem}
.ementa summary,.moodle-ajuda summary{cursor:pointer; min-height:44px; padding:8px 0; color:var(--txt-1); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--linha-forte)}
.ementa p{max-width:90ch; padding:20px 0 6px; font-size:.9rem; line-height:1.75}
.curriculo__blocos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px}
.curriculo__blocos h3{font-size:1rem; padding:18px 0; margin:0; border-bottom:1px solid var(--linha-forte); color:var(--frente-con-claro)}
.grade__temas li,.grade__temas li:first-child{grid-template-columns:30px minmax(0,1fr); gap:16px; padding:19px 0; border-top:0; border-bottom:1px solid var(--linha); min-height:94px; font-size:.9rem; line-height:1.55}
.grade__temas b{font-size:.8rem; color:var(--txt-3)}
/* Inclui li para o primeiro item não perder o respiro lateral para :first-child. */
.grade__temas li.tema-gratis{width:100%; margin:16px 0 20px; padding:26px 24px; border:1px solid rgb(var(--frente-con-rgb) / .18); border-radius:10px; background:var(--frente-con-poco); box-shadow:none}
.tema-gratis b{color:var(--frente-con)}
.tema-gratis a{display:block; width:fit-content; padding:8px 0 0; color:var(--frente-con-claro); text-decoration:none; font-size:.8rem}
.tema-gratis a:hover{text-decoration:underline}
.curriculo__fim{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; font-size:.85rem}
.ofertas-cab{margin-bottom:30px}
.ofertas-cab h2{max-width:26ch}
.acoes{grid-template-columns:1.15fr 1fr; gap:28px; align-items:stretch}
.acao{padding:clamp(22px,3vw,40px); border-radius:var(--r-lg); display:flex; flex-direction:column; min-width:0}
.acao--gratis{border-color:var(--frente-con); background:var(--sup-1)}
.acao--pago{border-color:var(--linha); background:transparent}
.oferta-topo{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px}
.oferta-tipo{font-size:.8rem; color:var(--txt-2)}
.oferta-preco{font-size:1.3rem; font-weight:600; color:var(--frente-con-claro)}
.oferta-preco--pago{font-size:.8rem; color:var(--txt-3)}
.acao h3{font-size:clamp(1.6rem,2.2vw,2rem); margin-bottom:14px}
.acao>p{font-size:.95rem; max-width:43ch; line-height:1.7}
.oferta-itens{list-style:none; padding:0; margin:12px 0 30px; font-size:.9rem}
.oferta-itens li{padding:8px 0 8px 22px; position:relative; border-bottom:1px solid var(--linha)}
.oferta-itens li::before{content:''; position:absolute; left:2px; top:16px; width:9px; height:5px; border:solid var(--frente-con); border-width:0 0 1.5px 1.5px; transform:rotate(-45deg)}
.oferta-form{margin-top:0}
.oferta-form label{font-size:.85rem; margin:0 0 8px}
.oferta-form input{font-size:1rem; margin:0 0 14px; min-height:50px}
.oferta-form button{width:100%; min-height:52px; padding:12px; font-size:.9rem}
.oferta-ajuda{font-size:.8rem; line-height:1.55; color:var(--txt-2); margin:14px 0 0}
.oferta-voltar{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.8rem; color:var(--frente-con-claro); text-underline-offset:4px}
.oferta-nota{font-size:.75rem; line-height:1.6; color:var(--txt-3); margin:16px 0 0}
.moodle-ajuda{border-top:1px solid var(--linha); padding-top:14px; margin-top:24px; font-size:.85rem}
.moodle-ajuda ol{padding-left:20px; line-height:1.7}
.moodle-ajuda li{margin-top:8px}
.estado:not(:empty){padding:18px; margin-top:20px; background:var(--sup-1); border-radius:8px}
@media (max-width:1100px){
  .bloco{gap:32px}
  .painel__corpo{grid-template-columns:minmax(0,1fr) 250px; gap:24px}
  .etapas{column-gap:20px}
  .sc__amostras{grid-template-columns:repeat(4,minmax(0,1fr))}
  .marca-campos{grid-template-columns:minmax(0,1fr)}
  .etapa--cor .etapa__cab p{min-height:6.4em}
}
@media (max-width:900px){
  .bloco{grid-template-columns:1.1fr 1fr; gap:24px}
  .bloco-painel{order:0; min-height:330px; padding:20px 18px 60px}
  .bloco-painel .maquete__capa strong{font-size:1.5rem}
  .maquete__legenda{left:18px; right:18px; font-size:.65rem}
  .painel__corpo{grid-template-columns:minmax(0,1fr)}
  .marca-campos{grid-template-columns:1.15fr 1fr}
  .sc__amostras{grid-template-columns:repeat(5,minmax(0,1fr))}
  .etapa--cor .etapa__cab p{min-height:4.8em}
  .amostra{position:static; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:16px 24px; border-top:1px solid var(--linha); padding-top:24px}
  .amostra__rotulo{grid-column:1/-1}
  .maquete--amostra{grid-row:2/4}
  .maquete--amostra .maquete__capa{min-height:0; padding:18px}
  .maquete--amostra .maquete__capa strong{font-size:1.1rem}
  .amostra__nota{align-self:start}
  .curriculo__blocos{gap:28px}
  .acoes{gap:20px}
}
@media (max-width:650px){
  body{padding:0 20px}
  .topo{margin:0 -20px; padding:0 20px}
  .topo-in{min-height:64px}
  .nav .nav-cta{font-size:.8rem; padding:8px 12px}
  #inicio{padding:32px 0}
  .bloco{grid-template-columns:minmax(0,1fr); gap:28px}
  h1{font-size:clamp(2.6rem,10vw,3.4rem); max-width:13ch}
  .rotulo{margin-bottom:20px}
  .frente-logo{height:42px}
  .bloco-txt .sub{font-size:.95rem; margin-top:20px}
  .bloco-txt .chamadas{gap:12px}
  .chamadas .pill{font-size:.85rem; padding:12px 16px}
  .chamadas .link-seta{font-size:.8rem}
  .hero-garantia{font-size:.73rem}
  .bloco-painel{min-height:0; padding:22px 20px 52px}
  .bloco-painel .maquete__capa{padding:22px; min-height:160px}
  .bloco-painel .maquete__capa strong{font-size:1.7rem}
  .passos{grid-template-columns:minmax(0,1fr); gap:24px}
  .passos p{max-width:40ch}
  .painel{padding:22px 18px}
  .painel__dica{font-size:.85rem}
  .etapas{grid-template-columns:minmax(0,1fr); gap:24px}
  .etapa--marca{grid-column:auto}
  .marca-campos{grid-template-columns:minmax(0,1fr)}
  .etapa--cor .etapa__cab p{min-height:0}
  .sc__amostra{min-height:62px}
  .amostra{grid-template-columns:minmax(0,1fr); gap:16px}
  .maquete--amostra{grid-row:auto}
  .maquete--amostra .maquete__capa{min-height:185px}
  .maquete--amostra .maquete__capa strong{font-size:1.4rem}
  .gerar{flex-direction:column; align-items:stretch; gap:12px}
  .gerar button{font-size:.95rem; padding:14px}
  .gerar__nota{text-align:center; font-size:.8rem}
  .vitrine__cab{gap:16px}
  .aula-instrucoes{grid-template-columns:minmax(0,1fr); gap:22px; margin:20px 0; padding:22px 0}
  .seg{width:100%}
  .seg .seg__btn{flex:1; min-height:44px}
  .janela__barra{gap:8px; padding:10px}
  .janela__barra i{display:none}
  .janela__barra span{margin-left:0; font-size:.65rem; letter-spacing:0}
  .janela__cheia{margin-left:auto; font-size:.65rem; min-height:36px}
  .moldura{aspect-ratio:9/16; max-height:680px}
  .curriculo__cab{align-items:flex-start; flex-direction:column; gap:12px}
  .curriculo__total{padding:10px 12px; font-size:.8rem}
  .curriculo__intro{margin-top:24px; padding:22px 0 8px; gap:6px}
  .curriculo__blocos{grid-template-columns:minmax(0,1fr); gap:24px}
  .grade__temas li,.grade__temas li:first-child{min-height:0; padding:17px 0; font-size:.875rem; gap:12px}
  .grade__temas li.tema-gratis{width:100%; margin:14px 0 18px; padding:22px 20px; grid-template-columns:24px minmax(0,1fr); gap:12px}
  .curriculo__fim{flex-direction:column; align-items:flex-start; gap:6px}
  .acoes{grid-template-columns:minmax(0,1fr); gap:24px}
  .acao{padding:24px 20px}
  .oferta-topo{gap:12px; margin-bottom:24px}
  .oferta-form button{font-size:.8rem}
  .rodape{margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px}
  .rodape-base small{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,::before,::after{animation:none !important; transition:none !important}}

/* Contato no lugar de download e pagamento (16/09/2026). */
.acao--contato{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; border-color:rgb(var(--frente-con-rgb) / .45); background:linear-gradient(160deg,var(--frente-con-poco),var(--sup-1) 60%)}
.acao--contato h2{max-width:22ch; margin:10px 0 14px}
.acao--contato__texto p{max-width:46ch; line-height:1.7}
.acao--contato__lado .oferta-itens{margin-top:0}
.acao--contato #cta-contato{display:flex; align-items:center; justify-content:center; gap:9px; border-radius:9px; border:1px solid transparent; font-weight:600; text-decoration:none; width:100%; min-height:52px; padding:12px; font-size:.9rem}
.acao--contato .oferta-nota{margin-top:14px}
@media (max-width:760px){.acao--contato{grid-template-columns:1fr}}

/* O formato mora na barra da janela: quem está vendo a aula enxerga a troca. */
.seg--barra{margin-left:10px; font-family:var(--sans, inherit); letter-spacing:0}
.seg--barra .seg__btn{padding:5px 12px; font-size:.75rem; min-height:0}
.janela--mobile .janela__barra > span:not(.janela__vivo){display:none}
@media (max-width:650px){.seg.seg--barra{width:auto; margin-left:0}.seg--barra .seg__btn{min-height:36px}}
.janela--mobile .janela__cheia{margin-left:auto}

/* O embed grátis do tema 01 (16/09/2026). */
.acao--embed{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; border-color:var(--frente-con); background:var(--sup-1)}
.acao--embed h2{max-width:22ch; margin:0 0 14px}
.acao--embed__texto p{max-width:46ch; line-height:1.7}
.acao--embed .oferta-itens{margin-bottom:0}
.embed-pronto{margin-top:22px; padding-top:18px; border-top:1px solid var(--linha)}
.embed-pronto textarea{display:block; width:100%; margin:8px 0 12px; padding:11px 13px; border:1px solid var(--linha-forte); border-radius:var(--r-sm); background:var(--sup-0); color:var(--txt-1); font:500 .75rem/1.55 var(--mono); resize:vertical}
.embed-pronto__acoes{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.acao--embed .moodle-ajuda{margin-top:18px}
@media (max-width:760px){.acao--embed{grid-template-columns:1fr}}

/* Enquanto os módulos não chegam, o lugar dos seletores não fica vazio (16/09/2026). */
.sel-carregando{display:grid; gap:12px; color:var(--txt-2); font-size:.85rem}
.sel-carregando__amostras{display:flex; flex-wrap:wrap; gap:8px}
.sel-carregando__amostras i{width:34px; height:34px; border-radius:50%; background:var(--sup-2, rgba(255,255,255,.08)); animation:sel-pulso 1.2s ease-in-out infinite alternate}
.sel-carregando__amostras i:nth-child(even){animation-delay:.3s}
@keyframes sel-pulso{from{opacity:.35}to{opacity:.9}}
@media (prefers-reduced-motion: reduce){.sel-carregando__amostras i{animation:none}}
/* "Grátis" vira selo brilhante preso no canto esquerdo do card do embed (16/09/2026). */
.acao--embed{position:relative; overflow:visible}
.acao--embed .oferta-topo{justify-content:flex-start}
.acao--embed .oferta-preco{position:absolute; top:0; left:clamp(20px,2.4vw,32px); transform:translateY(-50%); overflow:hidden;
  padding:6px 16px 6px 12px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
  color:#1B1024; background:linear-gradient(135deg,#FFFFFF 0%,var(--frente-con-claro) 45%,#B98BE0 100%);
  box-shadow:0 0 0 1px rgb(255 255 255 / .5) inset,0 0 18px rgb(185 139 224 / .55),0 6px 18px rgb(0 0 0 / .35)}
.acao--embed .oferta-preco::before{content:"✦"; margin-right:6px}
.acao--embed .oferta-preco::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgb(255 255 255 / .85),transparent); transform:skewX(-20deg);
  animation:selo-brilho 2.8s ease-in-out infinite}
@keyframes selo-brilho{0%,55%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion: reduce){.acao--embed .oferta-preco::after{animation:none; display:none}}
/* Com o embed pronto, o pedido (e-mail e botão) sai de cena e fica só o código (16/09/2026). */
.embed-pedir[hidden]{display:none}
.embed-pedir[hidden] + .embed-pronto{margin-top:0; padding-top:0; border-top:0}
.embed-pronto__ok{margin:0 0 14px; font-weight:600; color:var(--frente-con-claro)}