/* 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}
.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}
.pill:not(.metal):hover,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,.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). */
.gerador{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
.vitrine{min-width:0}
.painel__cab{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.painel__cab .passo{margin:0}
.painel__cab h2{margin:0}
.painel__campos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.6fr); gap:18px; align-items:start}
.painel__campos label{margin:0}
.painel__campos .solta{grid-template-columns:auto 1fr; justify-items:start; text-align:left; gap:12px; padding:9px 12px}
.painel__campos .solta__icone,.painel__campos .solta__previa{width:40px; height:40px}
.painel__campos .solta__texto{gap:2px}
.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: a amostra grande à esquerda, o hex em mono à direita. O input de cor
   nativo vira a própria amostra. */
.campo-cor{display:block}
.cor__nome{display:block; margin-bottom:8px; font-size:.9rem; font-weight:600; color:var(--txt-1)}
.campo{display:flex; gap:10px; align-items:center}
.campo input[type=text]{flex:1; margin-top:0; font-family:var(--mono); font-size:.9rem; letter-spacing:.04em}
.campo input[type=color]{appearance:none; -webkit-appearance:none; width:46px; height:46px; padding:0; border:1px solid var(--linha-forte); border-radius:10px; background:var(--sup-0); cursor:pointer; overflow:hidden; flex:0 0 auto}
.campo input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
.campo input[type=color]::-webkit-color-swatch{border:0; border-radius:6px}
.campo input[type=color]::-moz-color-swatch{border:0; border-radius:6px}
.paleta[hidden]{display:none}
.paleta{display:flex; gap:5px; align-items:center; margin:18px 0 0; max-width:520px}
.paleta__rotulo{font:500 .72rem/1 var(--mono); letter-spacing:.06em; color:var(--txt-3); margin-right:8px; white-space:nowrap}
.paleta i{flex:1; height:26px; 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; background:rgb(var(--sup-0-rgb) / .72); backdrop-filter:blur(6px); animation:surgir .25s ease-out}
.gerando__caixa{display:grid; justify-items:center; gap:10px; padding:30px 34px 26px; border-radius:var(--r-lg); background:var(--sup-0); border:1px solid var(--linha); box-shadow:0 10px 8px -8px rgb(0 0 0 / .6); text-align:center; min-width:min(300px,80%)}
.gerando__caixa strong{color:var(--txt-1); font-weight:600}
.gerando .orb{margin-bottom:8px}
.gerando__etapa{font:500 .72rem/1 var(--mono); letter-spacing:.06em; 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,.painel__campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){
  .bloco,.acoes,.rodape-in,.passos,.painel__campos,.grade__corpo{grid-template-columns:minmax(0,1fr)}
  .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}
}